Things are just swell with your desktop site. You've designed, iterated, tested, and iterated some more. It's an on-going battle, but you like where you're at. However, now you're going through the analytics and notice an undeniable trend: More and more visitors are coming from smartphones or tablets. And so now you're thinking mobile.
Well, you're not alone. The growth of visitors using mobile devices has many turning their attention to a mobile site. By next year many are expecting traffic from mobile visitors to surpass that of desktop visitors. In other words, the mobile revolution isn't near, it's here.
Responsive Web Design
Sites designed responsively make use of media queries, fluid grids, and flexible images to create a page that displays in any sized browser without horizontal scrolling. It's a rather clever styling technique that allows a single front-end to deliver to desktops, tablets, or smartphones.
Not surprisingly there's been a ton of buzz around Responsive Web Design, and it's more than well-deserved. Here at Layer0 we love and regularly use responsive techniques. But at the same time, there are some significant difficulties and drawbacks that come along with using Responsive Web Design as a complete mobile solution.
Why it isn't enough
The Dreaded Rebuild
In part 1 of this series, we talked about how using Responsive Web Design can lead to some real user experience issues. But there's an even larger reason many could be hesitant to fully embrace Responsive Web Design - The Dreaded Rebuild.
It's a different perspective on design, which takes an intrinsically different approach to the structure of your HTML.
The fluid grids of a responsively designed site require a fundamentally different infrastructure. Page elements need to be systematically arranged inside containers to dictate their flow as the page collapses. So a rebuild typically means starting at the foundation.
Starting over from the floor up is sometimes necessary. And it can offer the opportunity to fix development or design problems you discovered the hard way. But if the desktop site is working, who has the time and resources to re-do everything for a responsive mobile solution?
And as GoCardless discovered when they rebuilt their site responsively, it can be prohibitively difficult and time consuming.
It was much slower to implement - responsive designs took almost twice as long to design and implement compared to fixed-width designs. This was valuable time we could have spent improving other areas of the product.
Hiroki Takeuchi, Ditching Responsive Design
Building responsively takes time. Maintaining a responsively design site takes more time. And all this time and effort could be funneled into more productive aspects of the site.
Not only that, but while designing a single front-end with multiple formats in mind GoCardless had to make concessions in one format to appease the other, creating an experience issue. Eventually they just decided to ditch responsive design.
And that's just the big issue with going responsive. Once you're there you have a different set of headaches to deal with, including a phrase that will strike terror into your conversion ratio - long load times.
Your time is valuable
Time is the one thing you cannot have enough of. It's a fixed value in a varient world (time dilation, aside, of course). And so we value it. And we absolutely cannot stand squandering it on something we deem unworthy of it.
One thing definitely unworthy of our time: waiting for a site to load.
Site speed is something Google's been absolutely obsessed about. For several years now it has been a factor in their search ranking algorithm.
The crux of it is this: mobile visitors expect a page to load in two seconds or less. Once it hits three seconds, they start bailing. And when you're designing responsively for mobile, that quickly becomes a big issue.
Heavy, slow-loading mobile pages are an all too often side-effect of a responsively design site.
Remember, a vital element of Responsive Web Design is the media query, which is evaluated client side. The single set of features means the same content and information is served on all devices. Studies have found that up to 86% of all responsively designed websites send the same amount of content to mobile users as desktop users. That means over-downloading. A mobile device is downloading logic for the desktop site, and then just ignoring it.
And then there are those flexible images. If a mobile device is going to display an image smaller, why not just deliver them a smaller image? That large banner image scales down nicely, but what about the needlessly large download?
Surely, there's got to be a better way to go responsive. Some way to avoid the dreaded rebuild and the over-downloading issues that ail Responsive Web Design. And maybe a way to better handle the experience issues we talked about in part 1?
Coming up next in our Responsive Web Design series, we'll take a look at trying to solve some of these issues with RESS, Responsive design with Server Side components. Surely, there's got to be a better way to go responsive. Some way to avoid the dreaded rebuild and the over-downloading issues that ail Responsive Web Design. And maybe a way to better handle the experience issues we talked about in part 1?