WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn1

Is your website mobile ready?

Over the past few years, mobile Internet consumption has increased at an exponential rate.  A good portion of this can be attributed to the success of smart phone devices like Google’s Android platform, Apple’s iPhone, RIM’s Blackberry, and of course Windows mobile phones.

When phones first became Internet capable, it was common for developers to enable their web pages to work with the WAP browsers. Current smart phones are much more powerful, the browsers work with standards in-line with their larger computer brethren. This has led many developers feel that there is no need to create versions of their websites that work with WAP browsers.

While that may be true, some provisions  should be made to insure that your users will have quick access to your content using the slower Internet connections provided by their phones. Below i have outlined a few tips to make sure your website will satisfy your visitors on their mobile devices.

Create a Mobile Sub-Domain

Creating a mobile version of your website begins with creating a sub-domain of your current site. Most users have become accustomed to appending “m” or “mobile” so that your URL reads m.yoursite.com or mobile.yoursite.com. After creating a sub-domain, you have the choice in how you want your mobile site to work. Either it can be a mirror of your main sites content with a custom CSS file made for mobile browsers or you can choose to make an independent site that has its own content that you feel would benefit mobile users.

Targeting Mobile Browsers

A simple way to a mobile compliant website is to develop a customized CSS file that targets mobile devices. By using the media type declaration on your CSS file. For example adding:

<link rel=”stylesheet” href=”mobile.css” type=”text/css” media=”handheld” />

will only load the CSS file that you define (mobile.css) when a handheld device is detected. This method may not work on all mobile browsers and devices, but should cover most of them.

Liquid Column Layouts

Like computer monitors, mobile devices are appearing in all different sizes and resolutions. The easiest way around the varying sizes is to use a liquid layout that will adjust to any screen size. One way to accomplish this is to not define content sections by absolute pixels and use percentages instead. This will allow the sections to only be able to take up X% of any given screen size. Another way around this is to not define anything in the CSS file and let the HTML render naturally. Of course this last method may not be visually pleasing, but it is a quick and dirty way towards getting mobile friendly. If you are a WordPress blogger, you can use the last free WordPress theme I made for this purpose :- WordPress Mobile Theme

Trimming the Fat

On the smaller screen, it is important to focus the user on the content they are looking for. On mobile browsers there simply is not enough space for the rich content that could be delivered on big screens. It is a good idea to remove the large pictures, and dozens of links that navigate around your site. What used to be a convenience to navigate around your site becomes a nuisance in its mobile version.

Here are some screen caps of ESPN’s web site in mobile form and standard view from my Android phone.

ESPN Standard Website

Even though the browser can render the whole page and all of its interactive elements they are so small that it is nearly useless.

ESPN Mobile Website

When you move to the mobile version they have decided to go to large navigation tiles that drop down with extra content under them so that user can focus on what they are looking for.

I chose the ESPN website because it is a good example of doing it right. Their standard website is a very rich interactive space filled with current data interactive elements and links to everything about the company.  ESPN’s web developers have done a good job and studying their users and trimming their mobile sites down to what they need. In its mobile form its will take users what they need on the go quickly.

Conclusion

The tips above are a few ways to optimize your mobile website for the growing amount of traffic from smart phones. Of course before beginning work on the mobile version of your website you will want to take a look at the traffic that you are getting. Mobile traffic is a small portion of the Internets total traffic, a little more than 1%, yet it is expected to grow exponentially in the coming years. Now is a good time to look at how your site looks in mobile browsers to ensure future success.

Lawrence Hall, community manager Go-gulf, provides web design and development solutions in Middle East.

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn1
  1. huagongkeji left a comment on March 22, 2016 at 11:29 pm |

    HGIT is the professional manufacturer for two axis foam sealing machine, this machine can be used in Filter, cabinet, lighting, battery, etc.
    German Beckhoff dispensing operation system. Operation interface is indicated in both Chinese and English; if there is any need, other languages can be added. The system boasts functions such as false operation reminding, idiot-proof protection, overpressure alarming, temperature alarming and low material level reminding.
    When operating the human-machine interface, the operator only needs to enter commands in the interface such as “Confirm” and “Start” for loading and unloading of workpieces, and then the equipment can automatically complete the required function operations.
    The control system is CNC2013 control system independently researched and developed by the Company. It can control multiple axes simultaneously and control dispensing speed and glue flow, with multi-formula storage function, pressure alarming function, etc. which makes it safer and user-friendly.
    The dispensing valve and mixer match with each other well, easy to operate and convenient for maintenance.
    Two components metering pump can choose Domestic pump or Germany pump according to customer demand
    http://www.hgcx.cn/en/index.php?p=product_show&id=223&c_id=34&o_id=&lanmu=12

  2. website development left a comment on October 18, 2013 at 6:36 am |

    I specified up a WordPress blog site ages ago however it utilized
    to obtain a lot of spam on the posts I composed, how do
    you navigate that?

    My web-site: website development

  3. itinhay left a comment on May 28, 2013 at 9:00 pm |

    This is very cool, but i need to say that i will think about this.

  4. Junaid Raza left a comment on May 8, 2013 at 11:43 am |

    Great! You have great info about mobile optimization. I think you just need to change your design a little. You don’t need to go to any where else. Because, you might face problems, google is checking your work and you will try to be more efficient, google might see you as spam. Subdomains idea may harm your page rank and google rank as well. I am still not clear about it. If you can help me, please share.

  5. meet left a comment on May 3, 2012 at 3:40 am |

    intresting!!!!!! 1 chk dis out tooo……. http://clicktechdoll.blogspot.in/

  6. don moores left a comment on March 31, 2012 at 3:23 pm |

    Great info–here I was chasing around after reading another post and thinking going mobile would be a great contributor to my site – but thanks to you I will study this more and for sure slower to making the move to mobile–thanks

  7. dubai web design left a comment on February 14, 2012 at 6:09 pm |

    Mobile internet usage in the Middle East and especially in Dubai has taken off, the two biggest mobile operators who are Etisalat and Du have reduced there tariffs for internet browsing which is a relief as charges are around 20 GBP for 200mb for Blackberry Services.

  8. Anvelope vara left a comment on May 30, 2011 at 3:24 am |

    This is very cool, but i need to say that i will think about this.

  9. web design abu dhabi left a comment on October 26, 2010 at 12:04 pm |

    Thanks for the information on getting optimized for a mobile phone. I havent had a chance to really look into going with a mobile optimization for my website, but I will have to once I start getting the ball rolling and get my business all put together. It still is going to take some time, but it is something for sure to consider. I will have to bookmark this and take a look at it later once i get things started in the next few weeks. Thanks again!

  10. Rupiningsih left a comment on April 27, 2010 at 9:26 am |

    Hi author, I like your information. May I copy your post and link your page to my blog? thanks alot for your kindness… 😉

    best regards
    Rupi

  11. Tom Dringer left a comment on April 26, 2010 at 1:39 pm |

    Thanks some great tips there. I guess using a subdomain gives you the ability to re-dseign the site to be completely mobile friendly so I see what you mean. Cheers

  12. Salvador left a comment on April 25, 2010 at 10:34 pm |

    Very nice post and something to really think about with the growth of mobile traffic. We are at the moment configuring our site for mobile traffic. Thanks for the tips, take care

  13. Hugo left a comment on April 25, 2010 at 3:25 am |

    Hi, thanks for the topic, really complete !
    But I must say I don’t totally agree with the idea of making a subdomain for your mobile version of the website.
    Why ?
    Simply because it’s quite bad for SEO; a website with 2 different URL for the same content can :
    1) be considered as duplicate content
    2) reduce the page rank of your content.

    What do you think ?

  14. Michael Seljak left a comment on April 21, 2010 at 10:01 am |

    Great post. We are trying to get our blog accessible to mobile users around the globe. We are looking for a suitable plugin for http://www.rhinoplasty.ws.
    Can you recommend one?

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project