Skip to main content

First thing you should do to optimize your desktop site for mobile

By Jason Grigsby

Published on March 14th, 2012

Topics

Bruce Lawson has great post today called What Users Want from Mobile, and what we can re-learn from them. I highly recommend reading it.

Bruce quotes from a survey of mobile web users and pulls out a few highlights including a huge demand by users for performance. Bruce writes:

This tells us that speed is more important than aesthetics. So perhaps some of the time and effort put into media queries, viewports, avoiding scrolling, line length would actually be better employed reducing HTTP requests and optimising so that websites are perceived to render faster.

Exactly.

This echoes something Brad Frost and I were talking about the last time I was in New York.

If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.

Most mobile browsers are pretty good about providing tools to help someone utilize a design meant for desktop on a small screen. People can double-tap or pinch and zoom to see and read the content.

But if your site is a bloated mess, there is nothing people can do about it. There is no magical gesture that people can invoke to make something load faster if the developer hasn’t built the site for speed in the first place.

The only gesture they are likely to use involves a single, upright finger as they ditch your site for one that responds to their requests in a timely fashion.

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Comments

Brett Jankord said:

Speed will always play an important role in how users view your website, and thus, your brand/company/product/etc.

I would highly recommend looking through Yahoo’s list of best practices for speeding up a web site: http://developer.yahoo.com/performance/rules.html

Also, starting your project with a mobile first mindset will help decrease loading times overall on your website. Like Luke said, if your site is fast on a mobile device, it will be blazing fast on a desktop device.

On a side note, do you or anyone else know what was used to concatenate the CSS and JavaScript files on the BostonGlobe.com?

John Keith said:

@aaron +1 on the performance first rally! We’ve been pushing that message for many years now, but it’s more important now than ever. “YSlow thinking” is our first line of defense, but there’s so much more. One of my partners at Lucid Meetings (another company of mine) says also that designing with IE7 in mind helps with mobile because you pay better attention to DOM/JS/browser performance in general.

Peter Müller said:

Brett: Looks like Boston Globe did the simplest thing of all. Just concatenate the files together without further minifiaction. Thats just cat *.css > foo.css

They might have a build system to auto generate the IE/non-IE mutually exclusive style blocks.

My company uses assetgraph-builder to do that and a lot of other minifications automated: https://github.com/One-com/assetgraph-builder https://github.com/One-com/assetgraph

Scott Jehl said:

Great post, Jason. Completely agreed. On the framework end of things, we’re trying hard to get jQuery Mobile’s dependencies down so smaller builds are possible. Looks like 12kb gets you plenty of the goodies without specific widgets now, so we’re making progress…

Brett: On the Globe site, we prototyped with a php/htaccess setup that simply split a comma-separated URL into files and concatenated/minified/gzipped the output. For JS, we loaded only about 5kb up front, which contained feature tests and media query polyfills, from there, we dynamically loaded all the rest of the JS and Ads, so even if they were a little heavier than we’d wanted, they at least would not block an already-usable page from being used.

In production, The Globe team rebuilt our prototype in their own preferred tech – the solution is easy enough to reproduce, and this doesn’t include the minify part, but you might check out “CSS and Javascript Combinator 0.5 by Niels Leenheer” to help you get the gears churning:

yuiop said:

where is your mobile version? Hypocrites

Permalink to yuiop’s comment

Replies to yuiop

Jason Grigsby (Article Author ) replied:

@yuiop Thanks for the anonymous comment.

1. We had a mobile version until last week. We got infected by the current wordpress malware that is going around (http://blog.sucuri.net/2012/03/rr-nu-malware-campain-more-details.html). Last week there was no specific vector that the attack was coming from. Ergo, we turned off any plugins that were unnecessary including the one that did theme switching to our mobile theme.

2. The theme switching plugin is unnecessary because we’re nearing completion of a new responsive site and plan to launch it in the coming days. No need to invest more time in the current site other than to clean up the malware crap.

3. As the saying goes, the cobbler’s children have no shoes. We’ve spent on our time our client projects and not on our own site. We’re keenly aware of its short comings.

Finally, thank you for putting us in our place. It’s nice to know you’re looking out for us. Have a pleasant day!

Allan White said:

“The cobbler’s children have no shoes” – ha! Way to respond with humor.

I moved quickly away from WPTouch for example – no fun hacking someone else’s CSS, and wanted a lighter mobile site anyway.

Your site is one of the best in-depth looks at RWD. You’re in Portland? Are you speaking/presenting locally anytime? Would love to say hi sometime.