Web design has changed tremendously in the past ten years. In the not so distant past, browsers were just for desktop and laptop machines, and a “small screen” meant ten inches.
Today, most Web accesses come from mobile devices with screens as small as three or four inches, while the biggest desktop monitors have grown larger than ever. Now wearable devices, with even smaller screens, are joining the mix. This divergence has presented a challenge to designers.
One way to address the issue was to create desktop and mobile versions of websites. This meant designing each page twice, but it was doable. Then came netbooks and tablets, with screens smaller than laptops’ but bigger than phones’. It became apparent that a separate design for each case wouldn’t be practical. Even phones are problematic for a single design, since they can rotate between portrait and landscape orientation.
Many modern websites address this issue by creating pages that adapt to their environment. They can change layout, picture size, typeface, and element visibility to suit the device and browser they’re working with. This approach is called responsive web design.
The idea of responsive design
Ethan Marcotte’s 2010 article, “Responsive Web Design,” presented a new approach to the variety of browser environments. The term comes from “responsive architecture,” the idea of physical spaces that change in response to the people within them. In responsive buildings, lighting and temperature settings can change to accommodate crowds, and even the walls can move.
Earlier efforts at browser-neutral design avoided making assumptions about their environment. A text column could flow to whatever width was available. A picture wouldn’t be wider than the screen. This approach had its limits, though. Beyond a certain point, shrinking elements down isn’t enough. A grid of thumbnails that looks good on a desktop will either be too small to view or need scrolling if the number of images per row doesn’t change.
The responsive approach actively adapts to the browser. It can change the layout rather than just scaling it down. Its priorities include not just fitting on the screen, but retaining a logical page organization and keeping controls usable.
Understanding media
Responsive design is possible because of a feature of HTML and CSS called media queries. These allow selective application of stylesheets and JavaScript based on characteristics of the environment, including:
- Handheld vs. non-handheld devices
- Available width and height
- Screen resolution
- Device orientation
- Print vs. screen
- Color vs. monochrome
Pages can apply different CSS stylesheets or call different JavaScript functions based on the values returned by media queries. They can also use the older approach of querying the “user agent” (browser name), but that provides less information. Some browsers falsify their user agent for compatibility reasons, and new devices could have agent names that the page doesn’t know about. Media queries are a more flexible approach and less prone to breaking. Sometimes the user agent can provide useful extra information.
However, old browsers may not support media queries. These include Internet Explorer before version 9, Opera before version 9.5, and (in part) Safari before version 4. Designers may choose not to support these browsers, or they may attempt a reasonable set of defaults.
How the page can respond
In principle, the material on the page can change completely based on a media query. This would only confuse the user, though. Responsive design should present the same content, rearranging it to suit the environment. Sometimes it’s acceptable to omit part of the content or substitute a different version.
Layouts of two and three columns are common in pages for desktops. A tablet or a small desktop window might see the page rearrange itself to two columns, and a phone might make do with one. The material in the omitted columns is usually a sidebar with lists or widgets. It can appear as a temporary overlay by tapping a control, or as a menu. Alternatively, the material from the sidebars can appear above or below the main content.
Grids and tables can change their dimensions. The page might calculate the number of thumbnails per row in a grid based on the window size and change it when the user resizes the window. A desktop window might display ten thumbnails per row, while the same page on a small mobile device might show just three per row.
The browser can shrink images down. It can do this simply by specifying smaller dimensions for the same image file, but this is wasteful. Mobile devices may have data costs or limited bandwidth. If the desktop image is very large, the page might substitute a smaller version when displaying to a phone.
Links and controls need to stay usable on a mobile device. Shrinking objects proportionally to the window size could result in buttons so small and close together that the user can’t reliably tap the right one. In this case, the design should make sure the size and separation of the controls doesn’t fall below a usable size.
Touch screens can’t use hover text. A responsive layout might substitute a caption or add a button to show the text.
How designers do it
It’s possible to create a responsive page by hand coding, but that’s a lot of work. More often, Web designers take advantage of popular frameworks to add responsiveness. Some of them are part of content management systems such as WordPress; others are collections of CSS and JavaScript that the designer can apply to custom pages, such as Bootstrap and Foundation. The disadvantage of using them is that hastily created pages can have a generic “framework” look. A skilled designer can avoid this problem with custom extensions to the framework.
A well-executed responsive design will look good on any screen. This opens a site to the widest possible audience, including users of devices that may not even exist when the designer created the page.
At Mankato Web Design, all the sites we build use responsive web design. Please contact us to learn how we can deliver the site design that you need.
