Tips & tricks: how to optimize a website for mobile devices

The huge development and usage of mobile devices makes us pay a close attention to this market of potential clients that will accede the website we’re creating with a far lower resolution respect to the standards (320 x480 tells you something?). In this article I’ll give you a few hints on how it’s possible to optimize the website or part of it, for a better usabilty on these mobile devices. In the following examples I’ll use iPhone as a reference.

Optimize websites for mobile devices: Identify the device

The first thing to do is to establish if the request to our web page comes from a mobile device and if so, from what kind of device. This information (along with other information that don’t interest us for this case) is included in the super global array $_SERVER and more precisely in the index HTTP_USER_AGENT. So let’s check with strpos() the presence of the string iPhone in this variable.
In practice strpos() finds the position of occurrence (in this case iPhone) within the string we passed as first parameter. If it finds nothing it will return a FALSE value; so it will be perfect for our purpose.

if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
   //Operations to be performed only in case of an iPhone
}

Upload a specific style sheet

A fundamental step for the optimization of our site is the uploading of a specific style sheet for the device. This way we can format some elements in a different way respect to the style sheet used for the visualization of the website.

For example, it’s a good rule to leave a greater space between the clickable items. Using a finger may be less precise of a mouse. I don’t want to dwell too much on these details because it’s not my field; I wonder if one of these days our expert of usability will give us a nice article about the guidelines to follow in the css optimization for mobile devices. Meanwhile let’s start seeing a possible solution to upload a specific style sheet for iPhone. For example we can enter a code like this in the header of our document:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
    ?><link rel="stylesheet" href="iphone.css" type="text/css" /><?php
}
else
{
    ?><link rel="stylesheet" href="style.css" type="text/css" /><?php
}
?>

This way the file iphone.cc will be uploaded if the detected device is an iPhone, otherwise a standard style sheet will be uploaded (style.css).

When html5 will be totally implemented, we could manage the style sheets this way:

<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="ipad.css" rel="stylesheet" type="text/css"  media="only screen and (min-width: 321px) and (max-width: 768px)" >
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

Not bad.

Not only CSS

Once we’re able to detect what kind of device is accessing our website, we can also decide to develop some parts specifically using the additional features. Let’s consider that for example that our website has a contact form. When the user clicks on contact , if he’s using an iPhone, he will be addressed to a form developed specifically for this device; let’s see how to do it. We’ll develop it in html5 and not just for fun; let’s see why:

  • If we establish that the request arrives from an iPhone, we’re sure that the browser is Safari. So more html5 features are supported, especially the ones we’re going to use.
  • With the features we’re going to use, we’ll improve the usabilty of our form; we’ll see later how.
  • Instead of doing theoretical experiments with html5, this is the right occasion to start using it at a production level.

So let’s begin, preparing our form.php, declaring the doctype of html5

<!DOCTYPE html>
<html>
<head>

Now we insert a particular metatag that will tell the iPhone that it has to visualize the page not zoomed in or out but exactly how it’s declared, this because we’ll give optimal dimensions to our form through css.

<meta name ="viewport" content ="initial-scale = 1.0, user-scalable = no">

In this case I also excluded the possibility for the user to use the zoom (not necessary, I did it only for teaching purposes).

Now let’s define the style of our form:

#container{
    width: 250px;
    margin: 0 auto;
}
input{
    width: 250px;
    height: 25px;
    font-size:18px;
    -webkit-border-radius: 5px;
}
input#submit{
    width: 80px;
    height: 30px;
}

We just center the container, after we increase the height of the fields and the font. I use with no problems the propriety -webkit-border-radius (we’re certainly on Safari).

Here’s the body of the document:

<body>
    <div id="container">
        <form action="#" method="post">
            <label for="name">Name and surname</label><br />
            <input type="text" id="name" name="name">
            <br /><br />
            <label for="web">Site</label><br />
            <input type="url" id="web" name="web">
            <br /><br />
            <label for="email">Email</label><br />
            <input type="email" id="email" name="email">
            <br /><br />
            <label for="phone">Phone nummber</label><br />
            <input type="tel" id="phone" name="phone">
            <br /><br />
            <input type="submit" value="submit" id="submit">
        </form>
    </div>
</body>

As you can see I used the type url, email and phone that have been introduced in html5 and perfectly supported by iPhone. Let’s see the benefits on the usability (If you have an iPhone, you can try it directly on the example page).
Our form, is displayed thid way:

Now if we select the field Name and Last Name, the standard keyboard is displayed.

But if I go on the field Website, here I find the specific keypad for the insertion of the url (below I have at my disposal dot, slash and .com).

This because iPhone is able to recognize the type of url and act accordingly.

In the same way, entering in the email field, I’ll find the specific keyboard for the insertion of the email (below I have at my disposal the @sign and dot).

Lastly, arriving at the telephone number field, there’s the numeric keypad.

As I said before, it’s not for fun or a forcing the use of html5 in cases like this.
Here’s the complete code.

<!DOCTYPE html>
<html>
<head>
    <meta name = "viewport"  content = "initial-scale = 1.0, user-scalable = no">
    <title>iPhone optimized form</title>
    <style>

    #container{
        width: 250px;
        margin: 0 auto;
    }
    input{
        width: 250px;
        height: 25px;
        font-size:18px;
        -webkit-border-radius: 5px;
    }
    input#submit{
        width: 80px;
        height: 30px;
    }
    </style>
</head>
<body>
    <div id="container">
        <form action="#" method="post">
            <label for="name">Name and surname</label><br />
            <input type="text" id="name" name="name">
            <br /><br />
            <label for="web">Site</label><br />
            <input type="url" id="web" name="web">
            <br /><br />
            <label for="email">Email</label><br />
            <input type="email" id="email" name="email">
            <br /><br />
            <label for="phone">Phone number</label><br />
            <input type="tel" id="phone" name="phone">
            <br /><br />
            <input type="submit" value="submit" id="submit">
        </form>
    </div>
</body>
</html>

Conclusions

In this article we saw a few simple ideas that allow us to optimize the visualization of our website on mobile devices. We also saw how to use some html5 proprieties can improve the usability. Is sense we can imagine that mobile devices will be the engines and precursors of the shift to the latest html version. Moreover it must be underlined that Safari in the version for iPhone is more advanced than the computer version and it’s the only (and the first) that supports all css3 proprieties.

Now there’s enough to start to have fun!

As an additional supplement, I would like to point out this comparison chart that shows the compatibility of the different browsers with css3 and html5.  But, since we got this far, why not go further? I’m preparing a series of tutorials on jquery mobile, an extension of jQuery (including a css framework) specifically designed to simplify the development of websites for mobile devices.

And you? What do you think of optimizing your websites for mobile devices?  Are you starting to think about it?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Maurizio is married to the triad PHP - MySql - Apache and, not enough, he has a lover called jQuery. He has a blog where he tries to describe in detail all of "his lovers". His real specialty is the realization of large business application, altough he never refuses the commitment of a website.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

  • Tips & tricks: how to optimize a website for mobile devices
    Mobile Web Design

    The question that I ask myself as a web designer is whether it’s right and obvious that our profession automatically covers the abilities of...

19 comments

  1. fathima
  2. Pnr Status Track
  3. Get Pnr Status

Trackback e pingback

  1. Do’s And Don’ts Of Localised SEO
    […] make sure that you also optimise your website with local SEO and make it usable with a mobile phone. …

Leave a Reply

Current day month ye@r *