What is the mobile web?

And how is it any different to the normal web?

Written by Anthony Chambers 11 years ago, and read2,890 times

Everybody is talking about the mobile web, but what exactly is it? The truth is that it doesn't exist. We give the illusion that there are two internets: One for desktop/laptop computers with relatively large screens, and then another for mobile devices like mobile phones. This simply isn't the case. There is only one internet.

If I'm using my desktop PC at home then obviously I want to use the normal internet, right? And if I'm out and about using my mobile phone I want the mobile internet. If I'm sat at home using the laptop on the wifi I should still get the normal internet, shouldn't I? And if I'm using my mobile phone on the wifi at home? Then what? I'm on the same high-speed broadband connection, so I can take a lot of data, so I want the normal internet, don't I? But hang on, my screen is only around 4" in diagonal, so should I have the mobile experience?

Now I'm out and about with my laptop tethered to my mobile phone. I have a relatively large screen, so I want the normal internet, don't I? Oh, but I'm using my phone's data allowance, so I should be using the mobile web, shouldn't I? But that will look rubbish on my screen... it's all so very confusing!

You see, there is only ONE internet. There is no such thing as a mobile or a normal internet. Just the internet.

So how do we support multiple formats with one internet?

Well for one you should get out of this everyone-has-high-speed-broadband-so-size-doesn't-matter attitude.

We've all done it. Oh, the site loads really quickly on my 100mb/s broadband, so it must be fine, right? Not necessarily. What about those poor people still on dial-up, or out in the sticks using their mobile phone to view the site? Do they have high-speed broadband that has a massive allowance? No, they don't.

There used to be a school of thought where websites should be kept under 100KB in size, including all resources (javascript, images, stylesheets etc). That's largely gone out the window these days because of broadband, but with mobile phones being used more and more I think it should be revisited.

Ultimately, you should only be loading in resources that you need. Do you need to load in the jQuery UI date-picker on your homepage? Do you need all of those definitions in your stylesheets? Have you replaced a lot in your HTML and just not got around to removing them all from your CSS files?

Now, I don't proclaim to be the world's greatest at optomising a website, and I know that AnthonyChambers.co.uk is hardly media-intensive, but one of my largest articles about installing PHP, MySQL and FastCGI on CentOS comes in at a massive 104KB as I write this. Of that, 32.9KB is jQuery, 46KB is for the syntax highlighting system and just over 14KB is Google Analytics. So I could probably get that page down to just over 11KB based on the HTML and CSS alone. Not bad, eh?

And the user experience on a desktop browser, a tablet or a mobile phone? All slightly different, and all fully usable, and all using the exact same HTML and CSS includes. Nothing different, just the way it looks.

Try it out. Load the site up on your desktop browser at full screen. You should see that the body of the site never exceeds ~1200px wide. Now make the window narrower and you should see that the margins around the main content will eventually disappear. A bit narrower still and the font sizes at the top of the page reduce so they're not taking up so much screen real-estate. Go even more narrow and the top menu will disappear, to be replaced with a link that jumps to the bottom of the page where there is now a touch friendly menu. It all just works.

How do I do it?

Well for one, this will only work on modern CSS3 compatible browsers and most recent mobile phones. The actual steps to make it work are really straightforward though:

First we make a declaration in the <head> of the page to tell mobile browsers how we want them to scale the page. By default, most mobile browsers will scale the page to fit, which usually means you feel like you're a mile away from the screen. We do this with this simple code, which you can tweak as you see fit:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

You would immediately see a difference with that when you view the page with a mobile device. The screen should now be fully zoomed in, but you may find that you now only see a small section of the page. This is where CSS 3 Media Queries come in!

@media screen and (max-width: 1024px) {
    body{ margin: 0px; }
    #container{ width:100%; }
}

Adding something like that to the bottom of your CSS will override the styles for the <body> element and the #container ID, allowing them to fit properly in to the viewport. You can add multiple media queries for different resolutions, and some devices support different orientations (ie portrait/landscape) as well. There's not much you can't do with these.

So, with a couple of simple additions to your pages and style sheets, you can create a desktop AND mobile friendly web site, and hopefully you'll keep the sizes down too so that no matter how people are connected they will still get the fastest and most suitable version of your site