Responsive design is quickly gaining recognition as the dominant approach to building new websites. With good reason, too: a responsive design workflow is a fantastic way to build tailored web experiences for different screen sizes and resolutions.
However, going responsive comes with its own set of difficulties. In this article we highlight the four main challenges of a responsive design approach, and address the business impact of each challenge. If you’re thinking about going responsive, here are some critical facts you should know in advance!
In a responsive design, each time a page loads on mobile it is also loading instructions for how to look on desktops and tablets. Every time a user visits your site they download the full page content by default – no matter which device they are using.
We conducted an analysis into 15 top responsive e-commerce sites which revealed that the average responsive site home page consists of 87.2 resourcesand is made up of 1.9 MB of data. If 87 resources seems like a lot, it is. The reason the number is so high is because together they dictate how the web page should render on all desktop, smartphone and tablet devices.
However, since your customer is only using one device at a time to access your website, they have to wait for these resources to download before the page becomes usable on their device.
It almost goes without saying: we all hate waiting for websites to load. When your customers are forced to wait, the result is a drop in conversion rates and user satisfaction. On smartphones, the conversion rate drops by an extra 3.5% when users have to wait just one second. By the 3 second mark, 57% of users will have left your site completely.
By using services like the above, you’ll ensure that the number of HTTP requests is dramatically reduced and customers spend less time waiting for pages to become usable.
Images pose one of the biggest problems in responsive design. If a responsive design uses one markup across devices, how do you ensure that only big, beautiful images are served to your Retina Macbook Pro, while making sure that an old smartphone is sent smaller images that make sense for its lower-resolution screen?
The business impact of the image problem is significant. For image-rich websites, page performance on mobile can become significantly degraded, with a similar impact on conversion rates as detailed in the previous section. In addition, the wasted bandwidth of sending weighty images to the wrong devices can cost thousands of dollars a month.
“To say that a picture is worth a thousand words is really an understatement. In our case, pictures are worth hundreds of millions of dollars. You have to create a new way to load those images dynamically and in real time without affecting the user experience, so having the fastest possible load time is very important to us.”
Richard Cohene, Beyond the Rack
The good news is that there are a number of different solutions to the responsive image problem. The bad news is that these solutions frequently require you to make significant changes to your existing site, or come with performance challenges of their own.
Going responsive ensures that your existing ‘desktop content’ is also available on smartphones and tablets. This is a great approach, because users on these devices expect to have access to the same information across different devices. It also means that every time you update your content, it is automatically reflected across desktops, smartphones, and tablets.
However, a responsive design often gives designers only two choices for how to present a page’s content. They can either:
- Load existing ‘desktop content’ and show all of it
- Load specific desktop and mobile content and hide one or the other
The challenge stems from the fact that while mobile users expect to have access to the same content across all devices, they also expect the information to be presented in an easily digestible format. You could show all of your existing content, but that doesn’t provide a great experience for people reading on smaller screens. It’s also possible to load both your ‘desktop content’ and ‘mobile content’ and selectively hide the elements you don’t need on a particular device, but that just adds to the performance problems detailed above.
The business impact of this problem varies between industries. If you monetize your website through advertising revenue, a dip in pages per visit due to inferior content layout is bad news for your bottom line. If you have an e-commerce website, a poor mobile user experience could result in reduced mobile conversion rates at all points in your funnel.
The best solution to the responsive content problem is to try and make your content adaptive. Rather than envisioning a model where you have ‘desktop content’ and ‘mobile content’, think about how you can publish content so that it is useful on any platform.
Sometimes this can mean changing existing content so that it doesn’t break when viewed in different contexts (e.g. a headline isn’t clipped on a smartphone screen). Other times it can mean creating additional content, structures and metadata that allow you to create content once and then publish everywhere.
Development Time and Resources
One of the most frequently cited problems with responsive design is that it is difficult and expensive to shoehorn an existing website design into a responsive framework. Since you’re integrating several designs into one markup, it can take several times as long to get a design to market. You have to employ advanced techniques to make sure the design works perfectly on every browser, while also making sure that it will degrade gracefully in older, legacy browsers.
The business impact is represented by the additional time, QA and resources it takes to make your site responsive. the more expensive the project becomes.
The trick to implementing a responsive design is to do so in a way that is sustainable and realistic in a world of limited resources (time, people, money). For example, it is generally cheaper and easier to go responsive when rebuilding a site from the ground up, rather than trying to manipulate an existing design.
Another solution is to forgo a single responsive design in favour of using adaptive templates. Rather than trying to create one design that is responsive to every device type, adaptive templating allows you to break up the design into multiple responsive templates that are targeted to different device screen sizes and resolutions.
Unlike a single responsive design, you can test and launch adaptive templates without needing to see if one design decision is going to break another part of the design. It’s a great way of reducing the time, development, and QA cost of going responsive.
Here at Mobify, we’re huge believers in the principles of a responsive (and adaptive) web. The idea that a website should dynamically respond to the device that is accessing it is a core part of our company philosophy, and we’ve built responsive design best practices into our platform to help websites quickly and easily launch amazing experiences for every screen size and resolution on the market.
If you’re thinking of launching a responsive website and would like more information on how to avoid the challenges of a responsive approach, please contact Mobify’s Director of Customer Success, Ben Terrill.