Responsive Web Design

    Responsive web design is the practice of making websites that are easy to view across all devices, be it tablets, desktops, or phones.  This is important because it reduces the cost to maintaining only one site (instead of separate mobile and desktop sites), because of the rising use of mobile devices, and because it enhances user experience.  Responsive web design can be achieved through use of media queries, CSS declarations that can alter the style sheet based on the device being used to view it.  One aspect of these media queries are breakpoints, which change the layout once a certain browser width has been reached.  For an example of responsive web design, I found the Boston Globe's website (http://www.bostonglobe.com/).

    This is the main page displayed on a desktop monitor.  The font and images are large, and there's even an ad in the upper right.  The navigation bar at the top covers all the categories of the paper in addition to a search bar.  There are three main columns, one for major stories to the left, another for smaller stories to the right, and one for the ad and tweets from their Twitter on the right.  The content spans across the entire page, and it makes use of all of the space it has.

    This is the main page displaying as it would on a tablet.  Notice how the entire right column with the ad and tweets has been removed to save space.  Only the columns with stories remain.  The font and images are smaller, but still easily readable, and are the main focus of the smaller view.  The navigation bar has been reduced to only three main tabs with sub-tabs and the search bar to save screen space.  The main focus of the content is still the stories, but it is made even more evident in this view due to the lack of the right column.

    This is the main page displaying as it would on a mobile phone.  At this point, due to the lack of screen space, there is only one column with the major stories.  The text and images have been shrunk quite a bit, but are still readable (maybe with a BIT of work).  The navigation bar has been condensed even further, with only two main tabs and the search bar becoming a button that you need to push, rather than a text field.  The main content (and pretty much the only content) on this page are the main stories, which are the primary focus of the site.  As such, even though the layout is much smaller, the point of the site still manages to be put across.