Early in the life of this blog, I posted on responsive design. For those not familiar with the term, responsive design is a type of website design that dynamically reconfigures the site for each user’s access device. Responsive sites look one way on a smartphone, another on a tablet, and yet another on laptops or desktops.
When a user accesses a responsive site, the site interrogates the user’s access device to see what the size and aspect ratio of the screen is. Then, the site serves up information from a database according to guidelines established by programmers. In practical terms, this means that for smartphones, the site is most likely dished up as one column with larger type and navigation nested under an icon.
Benefits of Responsive Design
The benefits to the user are immediately apparent. The site is “usable” on even the smallest platform. This is important because Google estimates that by 2015, half of all web searches will be from mobile devices.
The benefits to the company sponsoring the site are also clearly apparent: more users, a more satisfying user experience and lower support costs. To optimize the experience for each user, they now need only support and update one site instead of four different ones.
However, for the designers creating the site, the benefits are not so apparent. For a responsive site to work, you need to design for the lowest common denominator (i.e., the smallest screen) and work upwards from there.
You need to keep all elements within their own areas on a rigid grid for each size so that the layouts can be reconfigured as the elements rearrange themselves. That means, the elements can’t overlap because they may no longer even be adjacent to each other as you move from one size to another.
Tradeoffs
As a result, responsive sites score far higher on functionality and usability than they do on cutting-edge design. Another consideration for responsive design is cost. Responsive sites generally cost more than traditional sites because of their complexity.
Steep Learning Curve
My company has developed several responsive sites so far this year. The first was by far the biggest and most complex – 560 pages in seven languages. If you haven’t yet created a responsive site, I highly recommend starting with something less ambitious. The complexity of designing all those pages for all those devices in all those languages was daunting to say the least. One of the biggest problems: it just takes more words to say things in some languages than others. Some languages used 50 percent more words than English. After much tweaking, the client’s site now looks great and works great. The client loves it.
As we got in the responsive groove, each of the next three sites we designed took less time. The first contained about 100 pages and took about three weeks. The second and third each contained about 200 pages. The last of those took less than a week.
Some Modest Recommendations to Save Your Shirt
If you work in a small design shop or ad agency, here are some recommendations that can make your first foray into responsive design easier:
- Start small with a simple site to help get up the learning curve. Calculus isn’t for kindergarten.
- Don’t try to break the grid with your design. Stay within the box. Make the excitement come from the elegance, simplicity and sophistication of the overall architecture. Those techniques they taught you in art school to build visual excitement, such as establishing a pattern and then breaking it, won’t work in a responsive design. You may find a workaround, but it will be very, very costly and will probably break your site at some point.
- Learn the differences between content management systems before you start. Drupal, for instance, gives you far more flexibility than WordPress but WordPress is much easier to work with. Unless a) you’re an expert PHP programmer, b) you’re willing to hire one or c) you have some other compelling reason to go with Drupal, such as foreign language support, stick with WordPress. WordPress offers a wide variety of themes (templates), some of which are easily customizable (within limits), and the system is much easier to grok.
- The first time out, don’t try to create a responsive site yourself, especially if you’re new to content management systems and especially if the content management system you’re using is Drupal. Find a good programming firm to help you. You’re going to need a spiritual guide through the wilderness of technology.
Finally, don’t be afraid to try something new like responsive design. That’s how you grow. Every year, I try to do at least one thing that makes me really stretch. This year, it was responsive design. It makes being creative much harder because of the complexity. But in the end, it’s worth it. Nothing worthwhile is ever easy to achieve.
