You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy

You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy

• By Maximiliano Firtman


• July 22nd, 2014


• PerformanceResponsive Web DesignUser Experience


• 3 Comments

You resize a browser and a grin creeps over your face. You’re happy: You cruise we are now mobile-friendly, that we have achieved your goals for a website. Let me be a bit brazen before removing into a discussion: You are losing users and substantially money if manageable web pattern is your whole thought and your customarily resolution for mobile. The good news is that we can do it right.

In this article, we’ll cover a attribute between a mobile web and manageable design, starting with how to ask manageable pattern intelligently, since opening is so critical in mobile, since manageable pattern should not be your website’s goal, and finale with a opening issues of a technique to assistance us know a problem.

Designers and developers have been oversimplifying a problem of mobile given 2000, and some people now cruise that manageable web pattern is a answer to all of a problems.

We need to know that, over any other goal, a mobile web knowledge contingency be lightning fast. Delivering a fast, serviceable and concordant knowledge to all mobile inclination has always been a challenge, and it’s no opposite when we are implementing a manageable technique. Embracing opening from a commencement is easier.

Responsive web pattern is great, though it’s not a china bullet. If it’s your customarily arms for mobile, afterwards a opening problem competence be opposition your acclimatisation rate. Around 11% of a websites are responsive¹, and a series is flourishing any month, so now is a time to speak about this.

According to Guy Podjarny’s research², 72% of manageable websites broach a same series of bytes regardless of shade size, even on delayed mobile network connections. Not all users will wait for your website to load.

With customarily a elementary bargain of a problem, we can minimize this loss.

Mobile Websites Are From a Past

I’m not observant that we should not pattern responsively or that we should go with an m.* subdomain. In fact, with amicable pity everywhere now, assigning one URL per document, regardless of device, is smart. But this doesn’t meant that a singular URL should always broach a same ask or that any device should download a same resources.

Let me quote Ethan Marcotte³, who coined a tenure “responsive web design”:

“Most importantly, manageable web pattern isn’t dictated to offer as a deputy for mobile web sites.” — Ethan Marcotte

Responsive, Mobile And Fast

We can advantage a advantages of manageable pattern though inspiring opening on mobile if we use certain other techniques as well. Responsive web pattern was never meant to “solve” performance, that is since we can’t censure a technique itself. However, desiring that it will solve all of your problems, as many seem to do, would be wrong.

Designing responsively is critical since we need to bargain with a operation of viewport sizes opposite desktop and mobile. But meditative customarily of shade distance underestimates mobile devices. While a line between desktop and mobile is removing blurrier, opposite possibilities are still open to us formed on a device type. And we can’t confirm on functionality regulating media queries yet.

Some commentators have called this “responsible manageable web design,” while others cruise it manageable web pattern with a complicated vision. Without removing into semantics, we do need to know and be wakeful of a problem.

While there is no china bullet and no solutions that can be practical to any form of document, we can use a integrate of tricks to urge a existent manageable solutions and maximize performance:

• Deliver any ask to all inclination with a same URL and a same content, though not indispensably with a same structure.


• When starting from scratch, follow a mobile-first approach.


• Test on genuine inclination what happens when resources are installed and when display: none is applied. Don’t rest on resizing your desktop browser.


• Use optimization collection to magnitude and urge performance.


• Deliver manageable images around JavaScript while we wait for a improved resolution from browser vendors (such as srcset).


• Load customarily a JavaScript that we need for a stream device with redeeming loading, and substantially after a onload event.


• Inline a initial viewpoint of a ask for mobile devices, or broach above-the-fold calm first.


• Apply a intelligent manageable resolution with one or some-more of these techniques: redeeming loading, responsiveness according to group, and a server-side covering (such as an adaptive approach).

Conditional Loading

Don’t always rest on media queries in CSS since browsers will bucket and parse all of a selectors and styles for all inclination (more on this later). This means that a mobile phone would download and parse a CSS for incomparable screens. And since CSS blocks rendering, we would be wasting altered milliseconds over a mobile connection.

Replace CSS media queries with a JavaScript matchMedia query on inclination whose context we know will not change. For example, we know that an iPhone can't modify to a distance of an iPad dynamically, so we would customarily bucket a CSS for it that we unequivocally need.

We can also use underline detection, such as with Modernizr⁴, to make smarter decisions about a UI and functionality formed not customarily on shade dimension.

Responsiveness According to Group

While we can rest on a singular HTML bottom and manageable pattern for all screens when traffic with elementary documents, delivering a same HTML to desktops and smartphones is not always a best solution. Why? Again, since of opening on mobile.

Even if we store a same ask server-side, we can broach differences to a customer formed on a device group. For example, we could broach a vast floating menu to screens 6 inches and bigger and a tiny hamburger menu to screens smaller than 6 inches. Within any group, we could use manageable techniques to adjust to opposite scenarios, such as switching between mural and landscape mode or varying between iPhones (320 pixels wide), 5-inch Android inclination (360 pixels) and phablets (400 pixels and up).

Server-Side Layer

The final discretionary partial of a smarter manageable resolution is a server. Server-side underline showing and decisions are not new to a mobile web. Libraries such as WURFL⁵ and Device Atlas⁶ have been on a marketplace for years.

Mixing manageable pattern with server-side components is not new. Known infrequently as manageable pattern and server-side components⁷ (RESS) and infrequently as adaptive design, it improves manageable pattern in speed and usability, while gripping a singular formula bottom for everybody server-side.

Unfortunately, these techniques haven’t gained many traction in a village over a final few years. Just demeanour during any blog or repository for developers and examination mentions of “RESS” and “adaptive” to “responsive.” There’s a reason for that: We are front-end professionals. Anything that involves a server looks like a problem to us, and we don’t wish that.

In some cases, a front-end operative will be in control of a book on a server; in other cases, a remote growth organisation will conduct it, and a operative won’t wish to bargain with a organisation any time they wish to make a tiny change to a UI. we know a feeling.

That’s since it competence be time to cruise of a new pattern covering in vast projects, whereby a front-end operative can make decisions server-side though inspiring a back-end architecture. Node.js is an glorious claimant for this platform, being a server-side covering between a stream craving back-end infrastructure and a front end.

In this new layer, a front-end operative would be in assign of decisions formed on a stream context that would make a knowledge fast, manageable and serviceable on all a devices, though touching a back-end architecture.

Responsive Design, Performance And Technical Data

You competence have some doubts by this indicate in a article. Let’s examination some technical sum to reduce your concerns.

Responsive pattern customarily entails delivering a same HTML ask to all inclination and regulating media queries to bucket opposite CSS and picture files. You competence have a somewhat opposite thought of what it means, though that is customarily how it is implemented.

You competence also cruise that mobile networks currently are quick adequate to broach a good experience. After all, 4G is fast, and inclination are removing faster.

Well, let’s see some information before sketch conclusions.

Cellular Connections

4G networks are not accessible everywhere, and even if a whole universe was on a 4G network today, a conditions competence not be what we expect. Less than 3% of mobile phones⁸ out there are on a 4G connection. Taking customarily a US, a series of 4G users has reached approximately 22%, and even those propitious users are not on 4G 40% of a time⁹.

We customarily cruise of mobile network speeds in terms of bandwidth. With 3G, we get adult to 5 Mbps; with 4G, we get adult to 50 Mbps. But that’s not customarily a many critical cause in a mobile web browsing experience. While some-more bandwidth is useful for transferring vast files (such as a YouTube video), it doesn’t supplement many value when you’re downloading a lot of tiny files and a latency is high and fixed. Latency is a round-trip time that a initial byte of any package takes to get to a device after a request.

Cellular networks have some-more latency than other connections. While a latency on a DSL tie in a US home is between 20 and 45 milliseconds, on 3G it can be between 150 and 450 milliseconds, and on 4G between 100 and 180. In other words, latency is 5 to 10 times aloft on a mobile tie than on a home network.

Other issues embody a latency when there is a change in radio state, a passed time when a phone turns on a radio to get some-more information after carrying been asleep, a reduce accessible memory on normal inclination and, of course, battery and CPU usage.

Responsive Design on Cellular Networks

Consider a genuine case. Keynote, a association that offers opening solutions, has published information on a website opening of tip Super Bowl 2014 advertisers¹⁰. The information speaks for itself: On a connected or Wi-Fi connection, a loading times operation from 1 to 10 seconds, while on a mobile connection, a loading times operation from 5 to 60 seconds. Think about that: one full notation to bucket a website being advertised in a Super Bowl!

¹¹

Website opening of a tip Super Bowl 2014 advertisers. View vast version¹²)

The same news shows that 43% of those websites offer a mobile-specific version, with an normal distance of 862 KB; 50% broach a manageable solution, with an normal distance of 3211 KB (nearly 4 times larger); and 7% offer customarily a desktop chronicle to mobile devices. So, by default, manageable websites are incomparable than mobile-specific websites.

Of course, manageable pattern can demeanour different, but, unfortunately, a normal manageable website out there looks like these ones of Super Bowl advertisers.

Cloud-Based Browsers

If we still doubt that opening is a problem on a mobile web, cruise that browser vendors are formulating cloud-based browsers to assistance users — including a barbarous Opera Mini, a Asia-based UC Browser (which commands 11% of a tellurian marketplace share, according to StatCounter¹³), Amazon Fire’s Silk and now Google Chrome (through a settings option).

These vendors restrict any website and apparatus in a cloud, and afterwards a browser downloads an optimized chronicle to a mobile device. They do it since they know that opening matters a lot to a user’s happiness.

Underestimating a Mobile Web

The web village has always underestimated a significance of mobile browsers. I’m used to conference people contend that a mobile web currently is customarily Safari for iOS and Chrome for Android and that, for manageable design, we need customarily caring about viewports that are 320 pixels wide. It’s distant some-more formidable than that.

Today, some-more than 10 browsers have a marketplace share over 1%. Even if we wish to cruise customarily a default browsers on iOS and Android, it’s not so simple. Roughly speaking¹⁴, 50% of mobile users crop a web on iOS, 38% on Android, 3% on Windows Phone, 5% with Opera Mini (on several handling systems) and 4% on other platforms.

On Android, 64% of users currently crop with Android’s batch browser, that is not a same as Google Chrome and that exists in opposite versions. Moreover, some of Samsung’s latest Galaxy inclination have a chronicle of a Android browser with a customized engine.

In terms of viewport size, we are traffic currently with pixel widths of 320, 360, 400 and 540 with Android smartphones alone. My suggestion, then, is never to blink a mobile web, and to learn a singular characteristics.

Above-the-Fold Content in 1 Second

On a mobile device, we can cruise a website to be quick when calm above a overlay (i.e. a calm that is manifest though scrolling) is rendered in 1 second or less. we know, 1 second seems extremely quick — generally deliberation that during slightest half of that time is taken adult by a mobile tie — though it has been proven to be possible. A 1-second response keeps users engaged with a content, thereby augmenting a acclimatisation rate and shortening abandonments.

To grasp a 1-second response time, above-the-fold calm needs to be perceived in one turn outing over a delivery control custom (TCP) — remember that a normal 3G tie has roughly half a second of latency. Because of a TCP underline famous as a “slow start,” that initial response should be no some-more than about 14 KB in sequence to equivocate a second package. This means that during slightest a HTML and CSS for a above-the-fold calm should fit in a singular 14 KB HTTP response. If we grasp that, afterwards we’ll have achieved a notice of a 1-second loading time.

This order is not created in mill and will change formed on your content. However, since calm that appears above a overlay will customarily not be a same on a mobile shade as on a desktop screen, achieving this thought of 1 second with a manageable pattern is unequivocally difficult. It’s possible, though mixing techniques creates it many easier.

One HTML for All

A standard manageable pattern delivers a singular HTML ask to all devices: televisions, desktops, tablets, smartphones and underline phones. It sounds great, though we live in a universe that has mobile and other problems. Your manageable HTML competence describe rightly on mobile devices, though it’s not as quick as it should be, and that is inspiring your acclimatisation rate.

If a singular display: none appears in any of your CSS, afterwards your website is not as quick as it could be. On a website that has been designed from blemish to be semantic, afterwards a manageable overkill would be roughly nil; on a website whose HTML includes 40 outmost scripts, jQuery plugins and imagination libraries, mostly for a advantage of vast screens, afterwards a manageable overkill would be during a high end. When a same HTML is used, afterwards a same outmost resources would be announced for all devices.

This isn’t to contend that manageable pattern alone can’t be done, customarily that a website won’t be optimized by default. If we are supportive to performance, afterwards your manageable resolution competence demeanour opposite than a usual.

Let’s examination Starbucks’ website. Its home page is manageable and looks good in a 3 viewports we tested (see a screenshots below). But on checking a internals, we see that all versions bucket a same 33 outmost JavaScript files and 6 CSS files. Does a mobile device with 3G latency merit 39 outmost files customarily to get a viewpoint shown below?

¹⁵

The Starbuck’s website in opposite states. (View vast version¹⁶)

You competence be thinking, “Hey, censure a implementation, not a technique¹⁷.” You’re right. This essay is not opposite manageable web design. It’s opposite aiming for responsiveness in a proceed that leads to a diseased implementation, and it’s opposite prioritizing responsiveness over performance, as we see with Starbucks. It looks good when we resize a browser, though that’s not all that is important. Performance also matters a lot to mobile users.

If your manageable website has opening problems, afterwards a error competence distortion with how you’ve framed a goal. If we have a bill for manageable design, afterwards we contingency also have a bill for performance.

Loading Resources

Media queries are implemented in opposite ways, customarily as one of a following:

• a singular CSS record with mixed @media declarations,


• multiple CSS files related to from a categorical page around media attributes.

In a initial case, any device would bucket a CSS dictated for all inclination since there would be customarily one CSS group. Hundreds of selectors that will never be used are eliminated and parsed by a browser anyway.

You competence cruise that mixed outmost files are improved since a browser would bucket a resources formed on breakpoints. This is what we’re taught in tutorials in blogs, magazines, books and training courses.

link rel="stylesheet" href="desktop.css"
 media="(min-width: 801px)" 
link rel="stylesheet" href="tablet.css" 
 media="(min-width: 401px) and (max-width: 800px)"
link rel="stylesheet" href="mobile.css" 
 media="(max-width: 400px)"

Well, you’d be wrong. All browsers will bucket all outmost CSS, regardless of context. The screenshot next shows an iPhone downloading all of a CSS files excerpted above, even ones not dictated for it.

¹⁸

Browser will bucket all outmost CSS files, regardless of a context. (View vast version¹⁹)

Why do browsers download all CSS files? Suppose we have one CSS record for mural course and another for landscape. We wouldn’t wish browsers to bucket CSS on a fly when a course changes, in box a integrate of milliseconds go by though any CSS being used. We’d wish a browser to preload both files. That’s what happens when we conclude media queries formed on shade dimensions.

Can a measure of mobile browsers be changed? Mostly not yet, though vendors are scheming their mobile browsers to be resized like desktop browsers, that is since a browsers customarily bucket all CSS declarations regardless of either their breadth matches a media query.

While pliant viewports don’t exist on mobile inclination (yet), some viewports resize in certain situations:

• when a course changes in certain browsers,


• when a viewport stipulation changes dynamically,


• when equivalent calm is combined after onload,


• when outmost mirroring is supported,


• when some-more than one app is open during a same time on some Samsung Android inclination (in multi-window mode).

Browsers that are optimized for these changes in context will preload all resources that they competence need.

While browsers competence be smarter about this in a nearby future, we’re left with a problem now: We are delivering some-more resources than are indispensable and, thus, penalizing mobile users for no reason.

The Real Problem: Responsive Design As A Goal

As Lyza Danger Gardner says in “What We Mean When We Say ‘Responsive’³¹²⁰,” designers conclude “responsive” differently, that can lead to communication problems.

Let’s get to a root. The tenure initial seemed in a 2010 post by Ethan Marcotte²¹, followed by a book with a same name. Ethan defines it as providing an optimal observation knowledge opposite a far-reaching operation of inclination regulating 3 techniques: liquid grids, stretchable images and media queries.

Nothing is wrong with that definition. The problem is when we set it as a thought of a website though bargain a broader goals that we need to achieve.

When we set manageable pattern as a goal, it becomes easy to remove perspective. What is a genuine problem we are perplexing to solve? Is being manageable unequivocally a problem? Probably not. But do we know “being responsive” to meant “being mobile-compatible”? If so, afterwards we competence be creation some mistakes.

The ultimate thought for a website should be “happy users,” that will lead to some-more conversions, whatever a acclimatisation competence be, either it’s removing a caller to widespread a word, providing information or creation a sale. Users won’t be happy though a high-performing website.

The proceed impact of opening on conversions, sold in mobile, has been proven many times. If this is a initial time we are conference about this, customarily check any of Steve Souders²²’ consultant books about optimizing web performance.

When we know your goals, we can confirm that collection and techniques are best to grasp them. This is when we investigate where and how to use a manageable approach. You use manageable pattern — we don’t achieve it.

Responsive vs. Users

The New York Times redesigned a website²³ a integrate of months ago with a thought of gripping “you in mind.” Meanwhile, thousands of other vast companies benefaction their new manageable websites with pride.

The New York Times follows manageable pattern in opposite ways, though some people complained that it still uses a apart mobile version, instead of bettering a blueprint formed on a same HTML. An essay even came out patrician “The Latest New York Times Web App Misses a Point of Responsive Design²⁴.”

²⁵

The New York Times follows manageable pattern in opposite ways. (View vast version²⁶)

Who pronounced that manageable web pattern means ancillary all probable shade sizes with a same HTML? Sure, this is a common understanding, though that order isn’t created anywhere. It’s customarily a need to facilitate a problem that has led to it.

In new months, companies have pronounced things along a lines of, “We’ve practical a new manageable design, and now a mobile conversions have increasing by 100%.” But did conversions boost since a website was finished to be responsive, or are users realizing that a website is now manageable and so are happier and modify more?

People modify some-more since their knowledge on mobile inclination is now improved and faster than whatever resolution was in place before (whether it was a wanton mobile chronicle or a crammed-in desktop layout). So, yes, responsiveness is improved than zero and improved than an aged mobile implementation. But a apart mobile website with a same pattern or even a smarter resolution finished with other techniques would grasp a same acclimatisation rate or better.

Conclusion

“Your visitors don’t give a sh*t if your site is responsive,” — Brad Frost

Brad Frost²⁷ is totally right. Users wish something quick and easy to use. They don’t customarily resize a browser, and they don’t even know what “responsive” means.

It’s a sour truth, and it doesn’t utterly ask to all websites. But it’s improved than thinking, “We can relax. Our website is responsive. We’ve taken caring of mobile.” Sometimes, even when not applicable to a situation, observant that manageable pattern is “bad for performance²⁸” can be good since it helps to widespread a word on since opening is so important.

The New York Times is right: The thought is a user. It’s not a apparatus or a technique or even a designer’s happiness.

Further Resources

• “Responsive Web Design: Missing a Point²⁹,” Brad Frost


• “RESS: Responsive Design + Server-Side Components³⁰,” Luke Wroblewski


• “What We Mean When We Say ‘Responsive’³¹²⁰,” Lyza Danger Gardner, A List Apart


• “You Can Run, But You Can’t Hide From Performance³²,” Aaron Rudger, Keynote


• “Real-World RWD Performance: Take 2³³,” Guy Podjarny


• “Blame a Implementation, Not a Technique³⁴,” Tim Kadlec


• “‘RWD Is Bad for Performance’ Is Good for Performance³⁵,” Tim Kadlec

(al, ml)

Footnotes

1. 1 http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/


2. 2 http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/


3. 3 http://www.abookapart.com/products/responsive-web-design


4. 4 http://modernizr.com/


5. 5 http://www.scientiamobile.com/


6. 6 https://deviceatlas.com/


7. 7 http://www.lukew.com/ff/entry.asp?1392


8. 8 http://www.4gamericas.org/index.cfm?fuseaction=pagepageid=2253


9. 9 http://opensignal.com/reports/state-of-lte-q1-2014/


10. 10 http://blogs.keynote.com/the_watch/2014/02/you-can-run-but-you-cant-hide-from-performance.html


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/06/03-keynote-opt.jpg


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/06/03-keynote-opt.jpg


13. 13 http://gs.statcounter.com/#mobile_browser-ww-monthly-201303-201403


14. 14 http://firt.mobi/velocity


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/06/01-starbucks-opt.jpg


16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/06/01-starbucks-opt.jpg


17. 17 http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/


18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/06/02-inspector-opt.jpg


19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/06/02-inspector-opt.jpg


20. 20 http://alistapart.com/column/what-we-mean-when-we-say-responsive


21. 21 http://alistapart.com/article/responsive-web-design/


22. 22 http://stevesouders.com


23. 23 http://www.nytimes.com/redesign/


24. 24 http://readwrite.com/2013/12/05/new-york-times-responsive-web-app-todays-paper


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/06/04-nytimes-opt.jpg


26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/06/04-nytimes-opt.jpg


27. 27 http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/


28. 28 http://timkadlec.com/2014/07/rwd-is-bad-for-performance-is-good-for-performance/


29. 29 http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/


30. 30 http://www.lukew.com/ff/entry.asp?1392


31. 31 http://alistapart.com/column/what-we-mean-when-we-say-responsive


32. 32 http://blogs.keynote.com/the_watch/2014/02/you-can-run-but-you-cant-hide-from-performance.html


33. 33 http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/


34. 34 http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/


35. 35 http://timkadlec.com/2014/07/rwd-is-bad-for-performance-is-good-for-performance/

↑ Back to topShare on Twitter

You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy