One Site – Multiple Layouts
In the past (pre surge in smartphone and tablet use), web pages were designed to accommodate a specific, or fixed display resolution like 1024 x 768 or 1366 x 768. But the recent boom in tablet and smartphone use over the past few years has changed the way designers have to think about design. Tablets and smartphones all have varying screen resolutions and sizes so a site that was created for a resolution of 1024 x 768 with a 9-inch screen is going to look a lot different on a 4-inch smartphone. A lot of horizontal and vertical scrolling, zooming in and out is needed to maneuver through the site. The initial solution to this was having an additional mobile site. The problem with that is the chore and cost of maintaining two sites.
CSS Media Queries
While some people may not mind either of these web experiences there is a much more functional solution with responsive design. Responsive design first emerged in 2010 in an article by Ethan Marcotte (I recommend checking this out – see the link below). The main idea behind responsive design is the use of CSS media queries. CSS media queries within the stylesheet call to the device being used and display the site based on the device’s width using the layout designed for that particular width.
For example, I would create three different layouts, one for each media query. There is one layout for a device with a width greater than 1200 pixels, one for a device whose width is less than 600 pixels, and another for a width less than 400 pixels. Ethan Marcotte’s article has an image of a photographer taking a team picture that displays this concept really well: at the screens largest the team members are standing side by side in one row but as the screen scales down the players are standing in two rows, then three rows with the top row of players sitting on the second row’s shoulders, until there are five rows of players some standing on other team member’s shoulders. Each variation corresponds to a different media query in CSS.
Applications of Responsive Design
This concept can be applied to more elements of a page other than images. It can be used to shift the placement of the navigation menu from the right of the logo to below the logo, it can also change the orientation of the menu to display vertically instead of horizontally. Depending on a site’s content, there are many ways to use CSS media queries to rearrange a website’s layout based on the device. This allows a site’s style to remain coherent among different devices and it offers a similar web experience among devices.
For further reading on Responsive Design see: