This is a very opinionated post. I look forward to hearing your feedback on Twitter. :)
Recently, a good friend of mine asked me about responsive web design along with all the different kinds of implications that come with it. I've been asked these questions multiple times before, so I figured I'd finally put them in writing for the public's eyes to view.
To get a grasp on what responsive web design actually means (I'll call it "RWD" for short), let's quote Wikipedia:
Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.
TL;DR: This is a technique used in modern web design that can be used to craft beautiful websites despite the device used.
For us web developers, we can take advantage of awesome tools in CSS like media queries and flexbox to easily display content on multiple screens in an easy way (no messy server-side logic and testing user agents!). And from the looks of it, RWD has been all the hype:
But as the title of this article suggests, I don't like it... in fact, I don't like it one bit. Let me explain why by focusing on three completely different topics: design, development, maintenance, and marketing of a responsive site.
Designing a responsive site is far from easy... what I've personally done and have seen other designers do is provide different "states" when things should become smaller, hidden, or even shortened at different screen resolutions. This is a great way to visualize some of the different ways your website may be viewed at that resolution, but notice the key word: some. For all of the states in the middle, there can be issues with things looking a little out of place or just plain old whacky.
If you're not the kind of to ask lots of "what if" questions, turning a responsive web design into a reality won't be the easiest thing to do. You definitely need a creative mind to make sure everything flows together with a simple user experience.
When you've finally decided that everything is done and you're ready to deploy your spankin' new website, you'll quickly become over-loaded with the struggles of a responsive site:
- Text looking ugly due to poor wrapping
- Choppy fonts
- Ugly anti-aliased images due to browser resizing
- Imperfect padding/margins at certain widths
- Hard to read (I've seen many responsive sites squash text together to just get things to fit)
- Bulk. AKA: bad for web performance. Mobile browsers will cry as they now have to download content that won't even be used later on.
I'm not saying that everyone comes across these issues, but it's some of the more common ones I've seen.
The reality of it is, people don't design for mobile, they design for the desktop and try their hardest to make it work for mobile.
The big "gotcha" with RWD websites is even they look great originally, they can be a complete mess to support later on. You can't quickly make changes any more as even the simplest of a change can throw something off.
After a year of maintaining the same website, you may find yourself in a nasty situation needing to support things that you've never thought of, instead of spending your time creating new features.
Honestly, you're better off creating a whole separate website dedicated to smaller displays and leave your main site focused for larger, desktop-sized displays. In my opinion, this is much easier to do than trying to kill two birds with one stone just because "it's cool" or "it's hip".
I'm no marketing expert by any means (I leave this to the pros like Gary Vaynerchuk), but let's tackle some of the simplest issues that I see with responsive sites. First and foremost, do you know what your website main goal is? Once you figure this out, you can figure out a nice little statistic called the conversion rate:
Conversion marketing is an eCommerce phrase most commonly used to describe the act of converting site visitors into paying customers. Although different sites may consider a "conversion" to be some sort of result other than a sale.
Yes, the term "conversion rate" usually references a sale, but this isn't always the case. When I was running a tech blog, I considered a conversion to be a reader who read two or more articles. A conversion might even be an advertisement click or maybe even someone downloading your application... no matter what it is, let's get on with the point. There are a plethora of things that affect conversion rate, but here are the potential issues I see specifically with a responsive site:
- Call-to-actions can be pushed further down the page. Any content that you can see when first loading the webpage without scrolling is considered above-the-fold; this matters when you expect the user to take an action, like clicking a button. If you're not being careful, a responsive site can sometimes push this button further down the page. This in turn can cause a decrease in conversion rate.
- A/B tests become essentially useless when targeting an entire website. The entire point of A/B testing is to test two distinct variables and nothing else. If your page can resize, shrink, or even hide content, an A/B test will not be accurate. You'd have to target certain screen resolutions if you want an A/B test to actually mean something with a responsive site, which in turn means you'll have to run the test longer to gather enough data.
- Conversion rates won't be a concrete number anymore. If your site dynamically changes based on the user, your conversion rate now isn't just for one layout, it's for many...
- If you're hiding or moving around any content, how would you possibly know what works and what doesn't work?
I could probably come up with more, but you get the picture. Responsive sites add too many variables for to dive in a take a closer look at how to optimize things.
This is all I have to rant on with my personal thoughts about responsive web design. I'm not by all means saying don't use it, but be sure to use it carefully if you're running any kind of serious website, especially if your website is a sole-driver in any source of income.
What are your thoughts on responsive websites? Hit that Twitter button below and let me know! :)