BLOG

Responsive Web Design is an easy way for web owners to connect with all of their users – from desktop to cell phone.  Recent trends show that more and more users are depending on their cell phones as the go-to device for all of their internet needs.  Catering to this group is becoming more and more paramount.

The Numbers

Data from the Internet Pew Institute for 2012 reveals that 55% of adult cell owners use the internet on their mobile phones, and 31% of these users say that using their mobile device is the primary way they access the internet. These folks may have had access to desktop or laptop computers at home, work or school but chose to use their cell phones as their primary access point to the internet.

With numbers like these and the percent of users in these groups continuing to increase (these numbers were double that of three years ago) why would you design a website exclusively for desktop users and exclude so many people?

Responsive Design Defined

Responsive web design allows you to create one site with multiple looks –each optimized for its own platform. Using a combination of HTML and CSS3, flexible images and the all important @media rule, sites can look perfect on a desktop, laptop, tablet or cell phone.

The Regular Desktop Design Model on Mobile

Let me be clear. Users can still view your site on their mobile device without a responsive design. They’ll see your site as it appears on a desktop but in miniature form. It’s typically difficult to read text, click buttons and see images without increasing the size of these regular desktop designs on mobile devices. Once the size is increased users typically still have to scroll through the site, navigating around on the screen to see content. If you have a patient user, you’ll have no problem with this setup. Chances are most users won’t take the time to make all of these adjustments to view your site. Small text is probably something that you could get away with, but the real probably is usually the tiny buttons and links. They are almost impossible to click without some serious contortion!

The Mobile Specific Design Model

Some sites have mobile only sites specifically designed for cell phone users. This type of design usually consists of a dumbed-down version of the full site. This is a great option for many users as they can easily click links and buttons and read text. Many big companies use this approach to give their mobile users the bits and pieces the COMPANY thinks the user is going to need or be searching for on a mobile device. The problem with this model is that many users feel gypped when they reach this type of site. The misconception by companies is that users will do most of their major searching and shopping when they get home to their desktop. As we saw with the numbers from the Internet Pew Institute, that’s simply not the case. Most users want to see the full site – all of the stories on a news site or all of the products on an e-commerce site.

Here’s a completely different example. My son’s school recently created a mobile-only parent portal. It was promoted on the district’s site and lots of excited emails were sent promoting it. The main flaw is that it is LIMITED! I usually need to check my son’s cafeteria account in the morning to make sure he has enough money to buy lunch. The lunch account is not on the mobile version. I have to search around and find the “full version” of the site and then I’m right back to the regular Desktop Design Model which requires lots of screen pulls and accidental clicking on the wrong -ugh.

Responsive Design Model

The Responsive Design Model allows users to have access to a full site. As a designer you can still limit some of the content or peripheral pieces that might not translate well for cell phones, but for the most part the user experience is the same for the mobile user as it is for the desktop/laptop user. The main difference is typically how things are structured. For example, a two column site on a desktop will collapse into a single column on a vertical tablet or cell phone, with the side column information typically falling below the main content…but it’s still there! Menu items are usually consolidated to a single drop down feature at the top too. Mobile users can still navigate the site, read full articles and access all of the features of the full site but without the headache of reading small print and having to click on tiny text links and buttons.

Adopting a responsive design isn’t as difficult as you might think. If you are using WordPress, there are lots of free templates from which to choose. The Responsive Theme is a great starting point. If you are a developer, you can customize it to fit your needs (epoff.com is built on a the Responsive Theme).

CyberChimps is the company that maintains the Responsive Theme.

If you want a custom look without all of the coding and work, prices range from $30 to $55 for a premium theme, and $100 for a six-pack bundle. I work with all kinds of themes – free, custom, and I’ve even built my own — I have to say CyberChimps is hands down one of the best companies offering free and paid options out there. The code is clean and the designs are sleek and work so well with WordPress.

Please share your responsive stories, sites and best practices with us!