Mobile web browsing is expected to overtake desktop usage within the next 3-5 years.  Responsive web design paves the way to respond to current and future portable device widths, while accommodating the needs of desktop users with varying screen widths and resolutions.

The key ingredients of responsive design:

1. A fluid, grid-based layout.

The best way forward is to think of the narrow mobile device width first, which keeps you content-focused on what mobile users will want to see first and grasp quickly before they hurry on to the next site.  If more text or secondary elements need to be added to layouts for desktop users with more real estate, that’s perfectly fine.  More columns can be populated as screen width increases to build progressively shorter and wider web pages.  Keep in mind that optimum column widths for type should fit 50-65 characters, going far beyond this will make it difficult to read, so keep this at the fore for all scenarios. Collapsible menus are preferred for mobile devices and ipads, and easy-to-click links and buttons are key.

2. Flexible images and media. 

Images and media can now automatically scale to fit variable browser widths. This scalability is relatively new and a big breakthrough for designers who strive for that important sense of scale, where wimpy or clunky simply will not do.  Headlines can also be scaled with the use of FitText, a jQuery plugin, and code can even be tweaked to allow border scaling as well.

3. Media queries. 

This involves setting the rules, establishing what happens if there’s a maximum scenario width of 960 pixels, for instance.  You can set device orientation, page wrap, content and sidebar width percentages, then move on to the other browser/device widths you need to cater to.  

View responsive web design in action:

Since a picture is still worth a thousand words, here’s a link to a responsive site so you can see how it adapts as you change the window viewing width. Note the image scaling and layout differences that change as you adjust your browser width. 

The flexibility of responsive web design is a great breakthrough, but there are times when separate mobile sites may be needed.  A restaurant is a great example of the different needs for mobile and home use.  The home user will want to see pictures of the food and the restaurant – along with being able to view the full menu.  The mobile user knows the restaurant and will want to quickly make a reservation, so considerable time could be saved if he or she doesn’t have to wait for larger graphics and menus to download. For most scenarios, responsive web design is a big breakthrough and a great way to compose content for almost any canvas.