Optimizing Websites for Mobile Gadgets

websites-for-mobile Gone are the days when people used a PC or notebook for strictly sharing information. Now people can browse the web using mobile phones while walking or traveling. You don't need to carry a heavy bag full of information because everything you need is at your fingertips. The power of Internet is here to stay with all kinds of exciting possibilities.  With the huge growth of smart phones and the clear shift in interest towards the mobile market companies that concentrate on marketing in this area can stand to receive large benefits.

Importance of Optimizing Websites for Mobile Gadgets

According to ICT statistics internet access by mobile phones will be almost 1 billion by 2014.  Moreover, more than 80% of cell phones now come bundled with a web browser.

Websites Suitable for Mobile Gadgets

Generally there is specific information which people browse through mobile phones. Some examples include booking a movie ticket or air ticket, to learn the latest news, buying pizza or to learn the way to a particular location etc.

With these types of capabilities all on your phone mobile gadgets are suddently becoming a very attractive choice.  Now lets learn how to get your website optimized for Mobile Gadgets?

Planning Your Domain For Mobile Gadgets

Before you start your gadget design you should plan how your URL will view for mobile devices. The same domain can be integrated to the mobile phone adding the design and css for mobiles but there would be lots of testing that needs to be done before launching to the web. Also remember to keep things simple. For extremely complex or dynamic website content this is not a recommended plan.

There are standard URL methods to access for mobile phones.

a) Adding a sub domain to your existing site like http://mobile.yoursite.com.

In this case it is possible to deliver the content quickly and effectively on mobile Gadgets as the design and css elements are separate from the main domain. Examples of sites using mobile as sub domains are Bing,Reuters, Newsweek, Washington Post etc.

b)The internet now offers a special domain name that has been designated for mobile users called ".MOBI".  By using this extension your site can be accessed by http://yoursite.mobi. This is not widely known by users at this time.  You can read more about MOBI here. Sites using MOBI are BMW, Business Week, ESPN etc. Talk about sports and football!

c) Even though standards are set, popular websites use the different sub domains for Mobile Phones  like Google, Yahoo etc.

So we have planned how the URL for mobiles will display, now let's start designing.

Designing for Mobile Gadgets

As mobile devices have a different screen layout than PC/Notebook, you have to work differently with the available screen size. One of the major changes compared to your desktop is the screen resolution.

1. Once you have a specific place to put content for mobile users, you should consider the design limitations of the mobile client.  The common resolution of both Smartphone and Pocket PCs is 320 x 240.

2. Due to the narrow width you may find that the vertical design of web pages with navigation at the side may not be practical due to the small screen.  Always avoid horizontal scrolling.

3. Use less graphics.  It is recommended not to use big pictures / banners as it takes time to get the page loaded. Place only brief meaningful content as people won't be interested to read long articles or description.

4. Add alt and title tag for pictures because Smart Phone users may block images so they get content to load faster.

5. Never use scripting languages as there is no native support for Java, Flash or other ActiveX controls which users can download on their PC. Only limited versions of JavaScript are supported.

6. Don't uses frames or objects that have a fixed size, like tables.

7. Using the phone attribute –

<a href=?#? tel=?1.866.410.7090?>Call Us Now</a>

Windows Mobile supports <a ref="1.866.410.7090">Call Us Now</a>

This attribute allows you to directly dial the toll-free number. This will significantly improve calling rates!

8. Meta Tags – If you have mobile optimized website pages, give them a mobile meta-tag: MOBILEOPTIMIZED.  Mobile meta tags can be incorporated into mobile optimized. How do HTML documents identify the document as made for mobile?.

9. You can learn more about Google Mobile Site Maps here.

To add to this, the Google Mobile team recently launched Google Latitude, a fun new way to share your live location with friends. For those of you who aren't familiar, Google Latitude is a feature of Google Maps for Mobile that allows you to share your whereabouts and receive updates about your friends' approximate locations.

If you are using WordPress as a blog just install this plugin and let users browse your posts using mobile.


As this is a new era of web and as the developments and standardizations practices are getting formulated please get in touch to get updated. It is the right time to capture the market!  Just remember – while you are sitting pondering getting into mobile gadgets, some of your competitors are already pouncing on the opportunity!

Post a Comment


  • avatar

    Once your app is storyboarded, choose from the templates in the SDK and start developing. Don’t miss the YouTube tutorials that offer great guidance on using the templates.

  • avatar

    Great post Jay! I just wonder what the impact of a separate domain name specifically for mobile devices wil have on the search ranking.

    Is it possible to detect the browser or device type and forward to a subfolder?

    This might benefit the organic ranking rather than detract!


  • avatar

    Nice read, and a relevant post Jay.  I think this year most businesses will concentrate on this area. Finoy added a very important point and it is a valuable  tip. Thanks.

  • avatar

    There are some css tricks if you want to get your existing website in mobile gadgets without even changing the pages.

    Writing CSS for the media type handheld

    <link href="css/style.css" rel="stylesheet" media="handheld" />

    Browser Testing/preview

    If you are a Dreamweaver or Flash user, we’ll also take a look at Adobe Device central that will help you to test your pages for handheld devices. In Dreamweaver  go to –> select file menu –>preview in browser > Device central or press ctrl+alt+F12

    If you're using Opera browser go to select View > Small Screen to see your page rendered in an
    approximation of what a mobile screen might display.

    An important tool in the Firefox Web Developer Toolbar is CSS > View CSS by Media Type > Handheld

    Hope this helps a lot !


Submit a Guest Post to the Rise to the Top Blog

Find Out How!
  • Recent Posts