venturebeat.

com
view original (slow to load)

Search Search

Guest

Make the mobile web better: Don’t make

these 4 responsive-design mistakes
IGOR FALETSKIAPRIL 1, 2013 12:43 PM
TAGS: DESIGN, GUEST POST, IGOR FALETSKI, MOBILE DESIGN, MOBILE SUMMIT, MOBILE SUMMIT 2013, RESPONSIVE
DESIGN

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.

FROM VENTUREBEAT

Buying and getting the best from mobile marketing technology doesn’t need
to be difficult. VB has compiled three of our best research reports on mobile
success in one low cost bundle. Arm yourself for 2016.

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.

0 comments

Post comment as...

 ABOUT CONTACT
CAREERS
ADVERTISE

Terms of Service Privacy Policy © 2015 VentureBeat. All rights reserved.