Responsive Web Design Intro, Web

In order to prepare to make our websites responsive, we needed to learn HOW they are responsive. This is done mostly through media queries. Break points are important for the code, however. Break points are used to separate sections of code so it is easier to read and change, but  media queries are what we use to make websites responsive to the device, and they became a standard in 2012. They are a CSS3 module and basically tell a website when to shrink and grow.

The website I have chosen to show as having good responsive design is http://stephencaver.com/
This is because the website shows a good example of shortening content for mobile users, and also looks great on each screen.

 This is the full, desktop screen page. The motto is clearly defined with the logo in the top left, and there are buttons conveniently right below the text, with more links above the text as well.

 


When you shrink the website to a middle, tablet size, the buttons stack on top of each other, the logo moves to the center, and finally the motto shrinks a lot to give the specifics above room to grow. The buttons form 2 columns, and the font increases in size.

 
Finally, when you shrink the website to about a mobile device, the motto shrinks substantially and the buttons below completely disappear. The specifics become the buttons and remain above the motto, and the rest of the content comes up to replace the space of the buttons. There are no columns, and the font increases in size again.