Everyone’s talking about it. Why shouldn’t I? Responsive design is hot these days. Not because of what it is. More so because people like to talk about what other people are talking about.
Don’t get caught up in the hype.
Most people who rave about responsive design don’t even know what it is or when it’s really needed.
What is responsive design?
In a nutshell, responsive design is a webpage that is coded to adjust to the viewport of the device accessing the page.
No, it is not a mobile website.
No, it is not an option that you must select and can revert from and any given time.
It is pure CSS using media queries that tell the webpage to display itself a certain way based on the dimensions of the viewport.
For a perfect example, check out CSS Tricks.
Grab the right edge of your browser window (assuming you are on a desktop or laptop) and drag it to the left, making the window more and more slim.
Notice how the website dynamically redesigns itself.
No effort on the part of the visitor is required.
The amazing thing about responsive design is that there is no waiting period. If you visit the site using your iPhone, it will load at the settings designated for that size viewport… period.
If you visit the site on your Kindle Fire, it will load according to that specific screen size.
Likewise, if you quickly turn your iPad from portrait to landscape, the changes are instant.
The design responds to the viewport, hence the name, responsive design.
What is the purpose of responsive design?
Contrary to popular belief, the purpose of responsive design is not to simply have a beautiful mobile layout.
Instead, like everything else, it’s to give the visitors what they want in the most efficient manner.
Desktop optimized websites oftentimes have more bells and whistles than a handheld device screen can handle.
With the increasing number of world wide mobile users, it’s becoming more and more important to deliver your content efficiently across multiple platforms.
So it’s not about looks… it’s about what the mobile user is looking for.
If you have a blog with a Facebook widget in the sidebar, displaying 20 little profile thumbnails, what purpose does that serve for a mobile user?
It’s almost considered common sense that it doesn’t belong on the page when viewed from a mobile phone.
Responsive design has the ability to remove various forms of content and adjust the remaining content to improve usability.
It is not uncommon for a responsive website to:
- Remove unnecessary images
- Darken font colors
- Change the navigation layout
- Increase font size
- Prioritize content from top to bottom
- Much much more
As you would assume, responsive design is intended to make the user experience better… which includes, but is not limited to, aesthetics.
Do you need to “go responsive”?
I don’t know. Do you?
The first thing to understand is that you don’t go out and pay the big bucks to get yourself a responsive layout just because there’s a buzz about it.
Never do that… for anything.
Instead, make an informed decision on whether or not it’s for you.
In response to the owner of a real estate business who has a web presence, Chris Pearson, the creator of Thesis, had this to say in a comment from Alex Mangini’s article on responsive design:
Mike, I’d like to make a distinction between a responsive design and a mobile interface, because these are separate things that are often misunderstood.
Based on your comment, it’s clear that your site needs some sort of mobile solution, be it a responsive design or a mobile-specific interface.
I would encourage you to look at *precisely* what your customers are after when they browse for properties using a mobile device. In all likelihood, they only want to browse properties and to see images and stats when viewing specific properties.
This means that you would ideally serve FAR less data to a mobile user than you would to someone who is browsing your site from a desktop computer.
And this is precisely where the problem/misconception with responsive design comes into play.
Mobile users need 2 things: [1] The data they’re after, and [2] speed (they need that data as quickly as possible).
With a responsive design, your ENTIRE site—scripts, code, and everything—loads for mobile users. This is problematic because these things are primarily intended for larger screens ONLY, and they will massively impair loading times on mobile devices.
Given that speed is so important to the mobile experience, this is a huge problem.
If mobile browsing is truly important to your business, then you MUST optimize for speed and for EXACTLY what the user is after.
Responsive design does not solve these problems, but a mobile-specific interface (likely located on a subdomain as you mentioned) is the answer.
The bottom line here is that mobile devices are different from desktop browsers, and—this is the most important thing—users interact with them differently.
Because of these differences, a mobile-specific interface is the best answer for companies that are reliant upon mobile devices for sales and leads.
I think that was a great way of explaining how responsive design must fit the needs of your website visitors.
Responsive design isn’t always the best answer, as Chris explained.
Be sure to pay very close attention to the needs if your website before you go responsive. Likewise, consider alternatives like mobile interfaces if that will serve you better.
The bottom line is to make an informed decision before taking action on this one.
Don’t fall for the hype unless you can prove to yourself that it is warranted and will serve you well.