There has been a lot of buzz about responsive web design recently, but for all that buzz, I still find that many people aren’t familiar with what it is or why it’s important. Responsive web design refers to a website’s ability to adapt itself to whatever device the website visitor is using. That means the site is designed to be equally user friendly on desktop computers, laptops, tablets and smartphones.
At the onset of the mobile craze, the trend was to create two versions of a company website: one for standard computers and laptops and another version for mobile devices. Now a single version of a website can accommodate both as long as it takes advantage of responsive design.
The simplest responsive designs feature websites that conform to the size and rotation of the device being used. More complex designs provide different page layouts and site navigation menus that are optimized for mobile devices. Key elements for responsive design include:
- Simple website layouts that reduce clutter
- Variable font sizes for easier reading
- Navigation menu layouts that accommodate a smaller screen
- Touchscreen options that allow users to rotate as well as swipe, pinch and zoom
- Removal of certain content to decrease the need for scrolling
- Elimination of image rollovers and other features that are only effective when using a mouse
Why it matters
Recent statistics from Pew Research Center illustrate why responsive web design is an important consideration for companies in today’s increasingly mobile world:
- 90: Percentage of adults with a cell phone
- 63: Percentage of cell phone owners that go online with their phones
- 58: Percentage of adults with a smartphone
- 42: Percentage of adults with a tablet
- 34: Percentage of Internet users that mostly use their phones, rather than other devices, to go online
Based on these statistics, it’s easy to see that you could be missing out on a large number of website visitors and potential customers if your website doesn’t employ responsive design.
Example websites that got it right
- Theworkcycle.com celebrates the trend of bicycling to work. Computer-based visitors are presented a top navigational menu and photo galleries that are browsed via mouse click. Mobile visitors see the same top navigational menu, but the photo galleries can be browsed via finger swipe and re-size based on the mobile device’s rotation.
- Smashingmagazine.com is dedicated to best practices for website developers and designers, so it’s no surprise their site takes full advantage of responsive design. If you compare the navigation experience of this site from both a computer-based browser and a mobile device, you will notice significant differences. Rather than the full-width website, mobile users are treated to larger font on a slimmed version of the site that eliminates the right column of ads. The standard navigational menus are replaced with a single-menu button that is always visible at the top of the screen regardless of how far down the visitor has scrolled.
Whether you choose a simple responsive design or a complex one, the important thing is to optimize your company website for mobile users so you are accommodating the largest audience possible.
