Let’s just agree up front that mobile devices have changed the web and there’s no going back. One of the results of this web evolution has been a term you may be getting tired of: responsive design.
Responsive design is, at its core, a straightforward technique of applying specific styles for different screen sizes so that layouts, font sizes, images, etc. are all optimized for a particular screen. This is what allows a website to show your phone’s browser the ubiquitous hamburger icon rather than a full nav menu.
The ramification of this solution is that your style decisions (defined in your style sheets) are now multiplied by the number of screen sizes you target. Say you settle on three sizes—desktop, tablet, and phone—for each element on a page you must decide how it is presented for each of those three sizes. The typical approach is to divide page templates in regions, and define a behavior for each region.
There are a few pitfalls to avoid when building a responsive design site:
- Boring, homogenous pages: There are many CSS toolkits for responsive grids and other schemes, and a development team new to responsive sites will tend to stick to the basics and force the design to fit the technology (in this case, their imperfect use of technology). Just be aware that there is nothing about responsive design that prevents you from producing beautiful web sites so keep at it.
- Mobile features on the desktop: Watch out for that hamburger icon creeping out of the mobile-targeted styles. That, and other features that mobile users appreciate, don’t belong on your desktop site.
- Surprising behavior and layouts: Each of the different screen sizes warrant extra planning, design, development, and QA time. Don’t expect to be able to build a responsive site for the same amount of effort as a traditional site.
And what of the biggest challenge of all: retrofitting an existing site as a responsive site? That’s a topic that deserves its own post, so stay tuned.