What The Heck Is Responsive Design?
The modern cell phone (yes, I'm looking at you iPhone) has really changed how I design websites. Today I wouldn't be doing my job if I didn't talk to potential clients about how to "handle mobile". Increasingly website users are visiting your website on a mobile device and the expectation is that this year mobile devices will overtake the desktop as the most common way users view websites.
With this in mind, you can clearly see why designing with mobile devices in mind is important. One method to tackle this is known as responsive design (or, specifically, responsive web design). I find that many clients I meet with have heard the term but aren't sure what it means (thus this article).
What Responsive Design Is
Put plainly, responsive design is a method of designing a website so that it adapts to the device it is being viewed on. For example, if you are reading my blog on a desktop device chances are you are seeing a sidebar with additional content and navigation highlighted with a big colored background with a little star. Perhaps something like this:
Now on a large resolution monitor this works out just fine. But what about on a mobile device, say your iPhone or (not to offend you Android lovers out there) your Galaxy S3? Clearly we wouldn't have the real estate to display all this content. So, if you look at this same page on a mobile device it may look something like this:
You'll notice that now the website uses the full available area for the main content of the site (the sidebar gets pushed below the main content) and the main navigation doesn't have as much space so the logo moves above it and the large colored background with the star is traded in for simple colored letters.
These are the two extremes (small phone, large monitor) but there are also adaptations occurring at different widths so if you look on a tablet the content will shift again and so on and so forth. The idea is that we are designing once and adapting our design to fit the ever expanding universe of devices and screen resolutions your users are using.
The Benefits Of Responsive Design
Aside from the obvious benefit of your website looking great on a number of devices there are additional benefits too.
- Content does not have to be duplicated (unlike separate mobile websites).
- Website URLs are consistent across all devices (unlike separate mobile websites that tend to have mobile.domain.com and domain.com).
- Responsive design websites are search engine friendly (heck, Google recommends using responsive design).
- Your website is easier to maintain (compared to a separate mobile website).
The Cons Of Responsive Design
To be fair, like anything with technology there is no such thing as a silver bullet. Responsive design can be great for clients, but there are some things to be aware of.
- Older, fixed width content you have may not fit in a responsive design.
- You have to, gulp, give up some design control to make it work.
- It does add time to development and testing costs for a project.
Is Responsive Design Right For Me? Heck, Do I Even Need To Worry About Mobile?
I will be completely honest with you. I do have clients whose users rarely use mobile devices. For these clients I tend to recommend not dealing with mobile (responsive design or otherwise) just yet. I'm a big fan of letting data help to make this decision for you. Look at your Google Analytics (or whatever analytics you use) and take a look at how many mobile visits you have.
Consider the following screen capture from Tunnel 7's Google Analytics:
I did this when I decided to redesign Tunnel 7 and found that nearly 15% of my visitors were using a mobile device. This was simply too large a segment for me to ignore. Knowing that this number will only continue to grow also made the decision to implement a responsive easy.
I suggest you do the same exercise to see how quickly you need to concern your website with being optimized for mobile. (Of course, if you can get ahead of the curve go for it. A website redesign is a great time to implement a responsive design (retro-fitting and old site is not painless, trust me!))
The reality is that in time mobile will be unavoidable and "mobile first" will be the direction to go as desktop devices are used less and less.
Responsive design, in my experience is the most efficient (and, thus, most cost effective) way to have a mobile optimized internet presence. Hopefully this article helped you better understand what responsive design is, some of the pros and cons and how to judge when you should starting thinking "mobile first". Have a question? Never hesitate to contact me. I love talking about this stuff!