Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 2 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 6 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Optimise your site for mobile devices

AshleyAshley

With the advent of smart phones and more powerful handheld devices like the iPad are your mobile users having the best experience? The mobile arena introduces a layer of complexity that can be difficult for designers and developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform.

Add a Mobile Stylesheet

In the code below we’ve included two stylesheets, the first main.css targets desktop computers and laptops using the ‘screen’ media type, while the second mobile.css targets mobile devices. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both.


<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Make phone numbers clickable

It’s easy to make phone numbers clickable, just like we can use ‘mailto:’ to link email addresses through (although this isn’t advised due to email harvesting) we can add ‘tel:’ followed by the number as shown below.


<a href="tel:+44203948578" class="phone-link">(+44) 203 94 8578</a>

Make filling in forms easier

HTML5 input types allows us to make it easier for users to fill in forms by providing the correct keyboard configuration. this can be achieved by changing the input type to either ’email’ or ‘tel’.


<input type="email" name="email" />
<input type="tel" name="telephone"/>

Take if a step further with JavaScript and jQuery

jQuery just released the mobile version of its popular framework that allows you to use Its lightweight code is built with progressive enhancement, which also has a flexible, easily themeable design.

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 6
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    Oh ! very helpful post all of us so thanks a lot for sharing this


  • Cebu Tech Blogger
    Posted on

    Cebu Tech Blogger Cebu Tech Blogger

    Reply Author

    Hi, I’m new here… To which CMS this UI optimization tip works? Just WP?


  • Spinnerboy
    Posted on

    Spinnerboy Spinnerboy

    Reply Author

    Thanks for a very informative website. Two questions —
    1. You say not to use mailto: bc of email harvesting – so what do you recommend to make email addresses clickable?

    2. Thanks for the info about making phone numbers clickable – how do I make the phone number non-clickable for those accessing the site with desktop computers?

    – SpinnerBoy


  • Castors
    Posted on

    Castors Castors

    Reply Author

    Next generations will open site over the phone so it’s require site for mobile devices


  • Puja
    Posted on

    Puja Puja

    Reply Author

    Hmm.grt site


  • kirsty
    Posted on

    kirsty kirsty

    Reply Author

    Nice advice. You might also be interested in “Optimizing for Mobile Devices – What Should You Look at?” – http://tumblr.com/xkz12f5dwk