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.
Here are just some things you have to consider when designing for ‘mobile’.
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.
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.
27 January 2012
On a recent project we were tasked with creating a web app for a presentation...
17 January 2012
I often get asked to look through existing websites to evaluate for new work. After...
14 November 2011
As web designers, UX designers or what ever we call ourselves these days, we have...