Media Queries ≠ Mobile

Posted 14 July 2011
7 comments so far.
Tweet

Before you read this I’m not discussing responsive design debate! Thats for another day.

Yea, Media Queries are great, and using them comes down to the cliche of

With great power comes great responsibility

which in alot of cases is not followed. There are right and wrong times to use media queries, and especially when entering the mobile platform or should mean small screen, as what does mobile mean!? I take it is mobile phone = small screen, but that is changing as new technology is invented all the time.

A Laptop is mobile? A tablet device is mobile? But they are connected to wifi so are they? We can’t test connection speed effectively yet so we have to assume alot of things which makes it difficult to measure some of the points below.

What annoys me is how some can add a media query style sheet to a website that moves a few things around (in a straight looooong scrollable line usually) and call it ‘Mobile’.

It’s not f**king mobile!

There are always exceptions to the rule, such as the initial code is so light first that it doesn’t really mater, and probably some more.

What I am talking about is taking the same mark up, with a javascript library, plug-ins, large images that have been designed for a wide screen and broadband connection.

Here are just some things you have to consider when designing for ‘mobile’.

Screen size
Connection speed
Type of device
Their data plan
Why are they visiting on a mobile
Location
What do would they want to achieve

So how can we design for ‘mobile’ with these things in mind? Not easy right.

We all have 3G reception with about 1.5mbs connection so it’s not that big a deal!? I was starting to think like this, until my recent holiday where the connection I was blessed with was GPRS at something like 0.1mbs (it got better whilst out in the towns etc but), I was trying to find things in the area to visit and do but frustrating connection speeds and large download sites left me angry(over exaggerating). Google loaded in seconds and google places helped, but you want to see the website and get a feel for the place.

This cemented my ideas of how I should approach a ‘mobile’ site. I want it to be fast as possible considering that list above.

Case Study: Taylors Hairdressers

We recently designed Taylors & Co and gave them a single mobile page as we thought about what customers might be looking for in a hurry whilst out and about maybe looking for somewhere to get their hair cut passing through on business, pleasure or just out shopping?

We identified that what they are looking for are phone number, and opening times, they cut hair right, so they know that already. I made sure the site was as light as possible and the page is around 30kb in size compared to 208kb on the ‘desktop’ version. Not a huge difference, but it is if you start looking at peoples data plans, and speed, getting that info 5 times quicker is surely a good thing?

If I was to slap a media query on the main site, It would not be truly ‘mobile’. There are other things that would help it be mobile such as geo locating and much more, but the project scope was that we could only do what we have done for now.

Comments

# Andy 309 days ago

Nice post. I’ve had this argument with people before. Layout’s important for reading on mobile devices, but speed and page size are possibly more so when you consider connection speeds and data plans. Really like the idea you had for your client’s site. A single focused page for mobile is an excellent approach to developing a desktop-mobile solution.
# James 309 days ago

I know we’ve spoken about this at #HuddsDigitals and I agree in the most part with you but strangely when I put the same question to Twitter a while back I got some different responses = http://t.co/PQf2vUI

I’m going to file it under the “can’t please everyone so why try” category :)
# Oliver Ker 309 days ago

@ James
Im not talking about a landing page. You have to evaluate the project and what will work best, what Im saying is throwing media queries at a site to make it work for small screen is not a silver bullet. You have to look at the users to make it easy for them.

I will never take info away from users, even a link back to the main site if necessary, but looking at it from a different angle is required.
# Joe Turner 309 days ago

Exactly the point I have been trying to explain to a client who owns an restaurant. If someone is visiting their website on a mobile, you can be pretty confident that they want a phone number, opening hours or details on booking a table. They don’t want to see the bio of the chef or history of the food they cook.

Nicely written, I think I’d have been much blunter :-)
# Pete Duncanson 309 days ago

Tricky one this. If its a green field site then yes you can plan a head and build in some nice separate mobile templates/views. If its an existing site you’ve been asked to make mobile friendly though, what do you do? The site might not really be built for it so media queries come into their own here.

A single stand alone light weight landing page for mobiles is ok, I’m quite a fan of these (especially if they have a checkbox offering to never show me it again) when out and about they are perfect. But I should always be allowed to get to the main site if I wish too as well. I hate it when sites assume I always want a cut down version. I don’t. Sometime I know exactly which page I want on an existing site but can’t get to it due to some mobile page gatekeeper which refuses to let me past. I’m a grown up, I understand it might take a while but I want to down load the full fat page please. Here media queries can really make a difference on making the site easier to read/use (or you can just leave it be and let the user zoom and pan, not the end of the world either if you ask me).

My main bug bear with mobile is the limitations on caching and the fact you need to normally send something down the wire to detect what the browser is. I’ve seen jQuery plugins which will do a redirect but you still have to download jQuery (too big to cache), the page itself, any CSS before the plugin, the plugin itself and anything that might follow before the script fires a location.href change. Now thats wasted bandwidth. Then you get to building different templates for different devices, again fine with a single mobile page, a right pain in the arse if you have a larger site. Mods get added to some templates and not others (you can only be so DRY), you need to eye ball it on multiple devices and before you know it everything is out of sync and a bit of a mess often only spotted by a user or worst case “a friend of the client”. Too many templates not enough eye balls…

Like I said its a tricky problem to fix, horses for courses.
# Oliver Ker 309 days ago

I agree with you Pete, I know you are guys that don’t take it light heartedly, as I say

There are always exceptions to the rule

What my argument is the blanket rule of media queries does not mean mobile, there are so many other factors to consider before deciding to either offer a mobile version.
# Filipe Varela 309 days ago

Excellent point, Oliver.

I think you’re on the money when you say “you have to evaluate the project and what will work best”.
You have to see what works and what doesn’t on a per-project basis. For instance, I love how the mobile solution for Taylors & Co. — I think it suits the client and the user.

On the other hand, I don’t want to be barred from any content just because I’m on a smartphone.
User must be treated equal, with device specifications, I believe.

Oliver Ker Design