Responsive design can help you create a website that works well with all devices
AppleCorp
There has been a huge growth in the number of people viewing websites from smartphones and tablets. How long has it been since you redesigned your site? Have you taken these developments into account?
Most websites were designed for the standard PC user and use a print approach—with tables, columns, graphics, video, PDFs and the like. Many of these techniques lose their impact or cause significant problems for mobile viewers on small screens.
Navigation and other features that work with a mouse might not work so well with touch on a phone or tablet. Large graphic files might load slowly over a mobile connection, and highly structured pages might be almost unreadable on a small screen. A classic example: restaurant websites with menus available only as PDFs that are all but impossible to read on smartphones.
Are the attorney bios on your firm’s website available only as PDFs? Your website today might be accessed and viewed by the small screens of smartphones, several sizes of tablet screens and, at the other extreme, very large TV screens.
Enter the idea of responsive design. In simplest terms, responsive design means creating websites that respond well in every type of screen size. Other common phrases for this approach include “mobile first” design or multidevice or multiscreen design. If you take a look at the writings of people like Ethan Marcotte, Luke Wroblewski and Karen McGrane, you’ll get a good overview of the idea and other current approaches to simpler, content-focused designs.
The big idea is to create a website with a consistent and simple approach that will work well across all device and screen types. There are a number of techniques, but generally you use a “fluid” or “relative” approach so that your page adjusts proportionally to the user’s screen size. Columns are generally avoided, and a simpler approach is taken with a strong emphasis on content and how the user wants to get that content driving the design. Here are four steps for you to take if responsive Web design makes sense to you (and it should):
• Take a fresh look at your website. Analyze it using a number of devices, determine what problems exist, and see how significant they are.
• Look at some examples of responsive websites. A great starting point is Jake Rocheleau’s “40 Examples of Brilliant, Responsive Website Layouts” online at Speckyboy Design Magazine.
• Think like a user. Focus on the content that visitors to your website most want, especially from mobile devices.
• Talk to your current Web designer about responsive design. Or find one who is familiar with the approach. Some website programs, such as Wordpress, have templates with responsive-design principles.
Responsive Web design is both more complex and more nuanced than I can cover in this article. However, it is part of a growing practice that reflects changes in how we access websites. A website refresh, and a responsive approach, should be on your technology agenda.
Dennis Kennedy is a St. Louis-based legal technology writer and information technology lawyer.
