Make A Difference With Responsive Mobile
Feeds
Wednesday, 4th April 2012
Following on from my introduction to responsive layouts, I thought I'd share a little tip about using responsive layouts to make your website rock on mobile. Recently, I have noticed that I'm abandoning a lot of pages that people have linked to on Twitter. The person sharing the link has done enough to get me interested, but after waiting for ten or fifteen seconds for something to appear I just can't be bothered any longer. I don't know if any statistics are available to illustrate how many people are like me or how many seconds they manage to maintain their patience, but I'm sure you've done the same on some occasion.
So while it is nice to tweak your layout on a mobile device, it is even nicer to make the download smaller too. You can make one single change to your design but make a huge bandwidth saving.
On my website, I opened the site from afresh with an empty cache and the biggest single file being downloaded was my background image. It's a hefty 300kb, which you would hardly notice on a decent broadband connection. Of course, once it has downloaded the first time, your browser uses the cached version, so the next page is a lot lighter.
This means my first page weighs in at 531kb, but the next page is just 30kb because all of the images, stylesheets and JavaScript files have been cached. Despite this, the first time someone hits my website from their mobile phone, they'll have to wait a few seconds, which is annoying.
So I added a replacement background-image in my CSS for small devices. The new image is half the width and height of the original, which makes a huge difference in terms of file size. This means that the first page on my website is only 186kb. That's about a third of the size of the desktop site.
I can now repeat the process with the next-biggest item to see if I can improve that, until my website is absolutely tiny and loads almost instantly.
Even if you don't opt for a responsive layout, using the media-queries to supply light-weight images will make your website appear faster for people with small devices and as most small devices are on small connections, you'll be solving a problem for a vast majority of people.
There are some techniques coming out for bandwidth-dependent substitution, but while they are maturing, media queries will give you a great jump-start.
Visit the introduction to responsive layouts to grab the code.