Have you ever walked into a building that literally bends or expands as crowds approach it?
This framework—pun intended--of responsive architecture has taken hold in the world of website design. Architects don’t build an
What is Responsive Web Design and Why Does it Matter?
The term responsive web design was first coined by web designer Ethan Marcotte, author of Responsive Web Design and the brains behind the Boston Globe redesign. At its most basic, the concept involves using CSS and HTML to resize, hide, shrink, enlarge or move content to make it look good on any screen.
Internet use is increasing exponentially on tablets, smartphones, watches and other mobile devices. Each of these instruments may be able to handle variations in size, functionality and even color. The problem is that mobile websites usually have reduced functionality and content. This can cause frustration amongst visitors, especially if they are familiar with your full website.
If you create one responsive website, you don’t have to create a website for each device. Your prospects can easily view your content on their desktop computer or TV as their mobile phone. In addition, mobile friendliness can positively impact your search rankings. Look at this another way. If you don’t adapt your website to fit these different platforms and fit them well, you will likely lose viewers and ultimately, lose business.
10 Bold Best Practices
- Start Fresh. It may be possible to add responsive functions to an existing website, but it’s probably not going to work. If your current website isn’t designed to fit a fluid grid already, it’s hard to be confident it will work well
onevery screen size.
- Be Flexible. Think about flexibility in terms of the big picture: Layout columns and text, as well as images.
- Think Big and Small. Responsive web design is not just a small screen solution. It has benefits for all screen sizes, including very large displays.
- Consider Context. Don’t become preoccupied with fit-to-size to the exclusion of the content. Think about the mobile user and what he might be looking for on your website when he is away from home and focus on those elements.
- Scale Back and Prioritize. When in doubt, remove it. For example, the blog pages for the accounting firm KLR presents an editorial image for each blog on large size screens, but for smaller devices, the images following the first one are eliminated to save space.
- Navigate Solutions. Be as consistent as possible in your navigation including labels, links
andvisual characteristics, but you must break away from consistency in how the navigation works or is laid out.
- Insert Icons. Replace lengthy bursts of text with icons using Scalable Vector Graphics.
- Adjust Font Size. Experiment with typefaces to make sure they work at both large and small sizes. Some letterforms may work fine at larger sizes, but lack clarity when sized down.
- Consider Input Methods. Mouse/keyboard or touch screen/fingers? Size your clickable buttons appropriately.
- Test Your Designs. Run usability tests with actual users.
3 Cool Case Studies
Barack Obama. For his 2012 re-election campaign, the Obama team created a responsive website that worked seamlessly on any mobile or tablet device. Highlights include the prioritization of content and adaptation of layout for different widths/sizes of devices. In addition, on the mobile version, the navigation bar collapsed into a Facebook-style menu button to save vertical space. Finally, the online store was easy to use on different size devices.
Grey Goose. Here, it is clear that a responsive website is more than columns of fluid text and images on a solid background. The beautiful photography, intuitive navigation
Andersson Wise Architects. Yes, you would expect an architecture firm to have a website that is structured, simple, smart and visually stunning. But notice the nice linear layout of images and understated menu on smaller devices. The juxtaposition between functional elements and a splendid showcase of photography is apparent across all mechanisms.
I think that in the not too distant future, the term Responsive Web Design will become redundant because ALL web development and design will have to be responsive if you want to put your site into everyone’s hands.