Total Followers 132,503
As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them.
In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it’s important to choose one markup language and stick to it. Explore your customer’s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.
In deciding between the two, access your site’s analytics to see which devices your visitors are using.
Aside from markup languages, mobile phones differ greatly in rendering capabilities across browsers. Just as with IE6, Safari, and Firefox have extreme differences, mobile phones are a whole different device you have to account for. And since there’s so many shapes and sizes on the market, it makes the task even more cumbersome.
A common tactic for those designing for the mobile web is to simply scale down their existing site to fit the parameters of a mobile device. This practice is counterproductive, as the mobile user is visiting your site to access specific information as quickly as possible. Also remember that many mobile devices use touch-screen technology so designing your UI around it is worthwhile. In determining what to include on your mobile website, consider the following:
Enhance your mobile websites usability by including only pertinent information that a mobile user needs while on the go. You have to keep in mind that browsing a website through a mobile device presents its own challenges. And while phones such as the iPhone and Android have made great strides in enhancing the web usability for its customers, not all phones make the task easy. Here are some tips to keep in mind regarding usability for mobile websites:
There are few different ways for adding a mobile version of your site to your domain. For instance you can create a subdomain from your primary domain that houses your mobile site. For instance, mobile.yoursite.com and yoursite.mobi. In any case many viewers still reach the primary domain when typing in your url. In this case you can:
In this article I’ve discussed key checkpoints to keep in mind in the creation of your mobile website. As the web expands, so does the devices and technology used to access it. Gone are the days where we had to worry about how our site renders in Internet Explorer. These new advances in technology presents more opportunities to appreciate and gain the most from the web. It’s our job to make this as easy as possible for those who wish to get on board.
Get The Only Freelancer crash course you will ever need to read!
Wednesday, December 21st, 2011 13:52
Thanks for sharing your great tips and advice on mobile web design, some really interesting stuff. It’s irritating using your mobile device to check out someones website… to find you have to keep zooming in and out. It simply doesn’t work! We love creating mobile websites for our clients alongside their web design. Usability is key and very important! You don’t want to put people off as soon as they click on your mobile site, you want to wow them!
Friday, November 11th, 2011 21:53
Great points! You need to know what you want and more importantly know your audience. Here is a tool that allows you to create a free mobile site with a QR code attached and you can see how it looks on a mobile phone with an awesome emulator.
Wednesday, August 31st, 2011 15:35
Thanks for the post guys. I’ve been looking into mob web design for a little while now and have always wondered what the do’s and don’ts of the coding is. Removing tabs from the menu and content is one thing I was unsure of cause surely this is taking away from the users experience? Of course if your website is super long on a normal browser, you would have to look at shortening it, but anything else, surely it restricts the users experience?
Tuesday, August 30th, 2011 23:03
Excellent overview of mobile web design, I’m just starting with this and I sure found your article very useful.
Thanks for posting.
Sunday, August 28th, 2011 13:09
i will try :)
Saturday, August 27th, 2011 15:20
Hi Stephanie,
Nice article – mobile website design is such a hot topic at the moment.
Saturday, August 27th, 2011 20:17
Great article! I do have to comment on the scaling down of website part though. I use my iPhone to browse websites a lot and when I access facebook or mailchimp I always have to revert to the full version of the website because there are functions that are not accessible with the mobile version which is frustrating at times. Researching and understanding users needs are very important when deciding which functions to keep on mobile versions.
Saturday, August 27th, 2011 13:37
Very handy technique… helped me a lot recently. Good idea to post it ;)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Ben
Saturday, August 27th, 2011 13:37
Very handy technique… helped me a lot recently. Good idea to post it ;)
Tony Marshall
Saturday, August 27th, 2011 15:20
Hi Stephanie,
Nice article – mobile website design is such a hot topic at the moment.
Sheryll
Saturday, August 27th, 2011 20:17
Great article! I do have to comment on the scaling down of website part though. I use my iPhone to browse websites a lot and when I access facebook or mailchimp I always have to revert to the full version of the website because there are functions that are not accessible with the mobile version which is frustrating at times. Researching and understanding users needs are very important when deciding which functions to keep on mobile versions.
Ahmed Bolica
Sunday, August 28th, 2011 13:09
i will try :)
Jorge Amaya
Tuesday, August 30th, 2011 23:03
Excellent overview of mobile web design, I’m just starting with this and I sure found your article very useful.
Thanks for posting.
Kattie
Wednesday, December 21st, 2011 13:52
Thanks for sharing your great tips and advice on mobile web design, some really interesting stuff. It’s irritating using your mobile device to check out someones website… to find you have to keep zooming in and out. It simply doesn’t work! We love creating mobile websites for our clients alongside their web design. Usability is key and very important! You don’t want to put people off as soon as they click on your mobile site, you want to wow them!
Chris
Friday, November 11th, 2011 21:53
Great points! You need to know what you want and more importantly know your audience. Here is a tool that allows you to create a free mobile site with a QR code attached and you can see how it looks on a mobile phone with an awesome emulator.
Gavin
Wednesday, August 31st, 2011 15:35
Thanks for the post guys. I’ve been looking into mob web design for a little while now and have always wondered what the do’s and don’ts of the coding is. Removing tabs from the menu and content is one thing I was unsure of cause surely this is taking away from the users experience? Of course if your website is super long on a normal browser, you would have to look at shortening it, but anything else, surely it restricts the users experience?