Mobile

Make the mobile web better: Don’t make these 4 responsive-design mistakes

Igor Faletski is CEO of Mobify.

Until recently, almost everyone who accessed the web used the same device: a desktop computer. In 2006, just two screen sizes accounted for 77% of all web usage. If designers were building bridges instead of web sites, in 2006 they only had to plan for Ford Model T’s.

As you know, this paradigm has completely shifted. Our research found that today, eight screen sizes—various laptops, smartphones, tablets, monitors, web-enabled TVs, and netbooks—account for 77% of web usage. What’s more, no one screen size has more than 20% of the market share. Today, we must plan for all sorts of vehicles crossing bridges, from the slowest scooter to speedy Ferraris to enormous Mac trucks.

The fix for today’s multi-screen world where smartphone and tablet users expect as rich and graceful a web experience as desktop users is responsive design. Responsive has become the darling of web designers and developers, and is fast becoming the dominant approach to building new websites. With good reason, too. A responsive design workflow is one of the most effective ways to build tailored web experiences for different screen sizes.

But responsive isn’t a magic bullet. It may solve the problem of screen size layout, but there are inherent problems with the responsive approach that many developers gloss over. Here are four common mistakes that could plague your responsive project.

Mistake #1: Your responsive site is over resourced

At Mobify, we analysed responsive websites for 15 top e-commerce vendors. The data revealed that the average homepage uses 87.2 resources, consisting of 1.9 MB of data. The reason those numbers are so high is because together they dictate how web pages must render on a whole range of different devices and screen sizes. What happens when your responsive site needs to load 87 resources before your site renders? It slows down.

It goes without saying, we all hate waiting for websites to load. When smartphone customers are forced to wait an extra second, conversion rates drop by an additional 3.5%. By the three second mark, 57% of users will have left your site.

To improve responsive website performance, make sure only necessary resources are sent to customers’ smartphones, tablets and desktops. You can compress and concatenate JavaScript and CSS resources with tools like SASS for CSS compression and Uglify for JavaScript compression, or with Mobify’s automated JavaScript and CSS acceleration tool.

Mistake #2: Your images are bloated

Images pose a major responsive design problem. Since a responsive website uses a single markup across devices, how do you make sure that only big, beautiful images are served to Retina iPad displays, while old smartphones get smaller low-resolution images that will load quickly?

For image-rich websites, page performance on mobile can tank along with conversion rates. Plus, the wasted bandwidth costs of sending weighty images to the wrong devices is practically throwing money away.

The good news is that several solutions exist for dynamically optimizing your images for all screen sizes and resolutions, including an automated tool we created. This means you can always send the right images to the right devices.

Mistake #3: Mobile doesn’t mean “lite”

When it comes to content, responsive designers currently have two choices. They can choose to load all the existing desktop content, or load specific content for small, mobile screens. We used to think that accessing the web via a small screen meant that users wanted a “lite” experience. Not true. According to Google, 90% of web users move between devices to accomplish a goal. That means someone accessing your website from a smartphone likely wants to perform the same actions—like buying your product—as someone from the desktop.

Truly sophisticated websites will need to move past responsive layout and take content—not just context—into account. That could mean more thoughtfully creating additional content, structure and metadata that works across all screens.

Mistake #4: You broke the bank

Shoehorning an existing website design into a responsive framework that works on every browser and will degrade gracefully in older, legacy browsers is complicated and expensive. Try rebuilding a site from the ground up instead of manipulating existing design—it’s generally cheaper and easier.

Another option is to use adaptive templates rather than a single responsive design. Adaptive templating lets you break up the design into multiple responsive templates that are targeted to different device screen sizes and resolutions. This solution lets you test and launch iteratively, bringing down the time, development and quality assurance costs of going responsive.

Responsive design is indeed a big step forward in solving the multi-screen conundrum. But it’s still a nascent approach and requires thoughtful implementation to deliver top-notch customer experiences in today’s post-PC world where 31% of all traffic to US e-commerce sites already comes from smartphones and tablets.

Mobile design image via Shutterstock

Igor Faletski is CEO of Mobify.

blog comments powered by Disqus