Creating a Mobile Friendly Website. How to “Mobilize” your Website.

A “mobile-friendly” Website offers content without clutter and is easily viewable on mobile devices. Creating a mobile-friendly website has become crucial if you desire a presence on the mobile web. With more people browsing the internet from their mobile devices, it is important to make your website accessible to these users. If your business relies on the internet to generate revenue, then it is critical that you make adjustments to accommodate mobile customers.

A website displayed on a computer screen is not the same as a website displayed on a mobile device. There are, to name few: layout issues, navigation problems, and design issues. If you begin with a valid HTML code that is written with clean, logical markup, then you are ahead of the game. A well structured code with clear organization and semantic markup will display cleanly, is usable and accessible on any device; including mobiles.

Web developers may take few steps to optimize their website for mobile devices. These steps include:

  1. Create a separate CSS style sheet for mobile devices (media type handheld). Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile devices.
  2. Reduce the number of round-trip requests to your server and the amount of data transferred.
  3. Resize and compress images for the small screen to ensure fast page loading.
  4. Design the website to work for mobile devices: provide large clickable features and short links that are easy to type. Make sure the content is clear and concise. Design with a small screen in mind. While computer screens are getting bigger, mobile screens are not.
  5. Provide clear and concise navigation. Remove internal links that are not useful for mobile users.
  6. Optimize the website to have fast-loading pages.
  7. Minify your code. The less file size, the faster your page will load.
  8. Remove needless components: widgets, plugins and add-ons may slow down the website´s loading time and may not even work at all on old mobile devices.
  9. Eliminate link redirects.
  10. Rethink your content. Mobile users want useful information quickly.
  11. Think Vertical: organize content with mobile consumption in mind. Structure your website so that content and pictures are organized vertically, with pictures on top of articles. Content should be displayed in a one-column format.
  12. Eliminate any unnecessary images.
  13. Where possible Use CSS3 instead of images. HTML5 browsers that support CSS3 (like Android, Mobile Safari) can use attributes for gradients, rounded corners, shadows and text transformations.
  14. Take advantage of new features in HTML: use HTML5 and CSS3 when possible.
  15. Plan for the lowest common denominator. For example, Flash and JavaScript are not widely supported by many mobile devices. So it is best to leave them out.
  16. Use Fluid/Liquid design: use relative measures like percentage (%) and em units. Avoid using pixels.
  17. Eliminate frames: frames should not be used to start with.
  18. Eliminate popups in favor of plain HTML.
  19. Eliminate nested tables and layout tables. If you have tabular data, consider another way to present the data in a linearized display.
  20. Reduce margins, paddings and borders to fit the small screen.
  21. Use smaller font sizes.
  22. Keep it simple. Limit the need for user input and minimize user clicks.
  23. Use Java instead of Flash. Java is the most commonly used platform for mobile website development.
  24. If you have a long navigation list at the start of the page, move the links to the end of the document flow.
  25. Chose color combinations that provide good contrast, particularly for devices with fewer color options.
  26. Last but not the least, extensively test your mobile-friendly website on multiple devices – including, if possible, actual devices and mobile simulators. In the same way a regular website face testing, mobile versions of websites require testing and validation.
  27. If you have Adobe Dreamweaver installed on your computer, you can preview mobile content with Adobe Device Central. Adobe Device Central uses skins for dozens of mobile devices to display your content in various ways. The preview can give you a good impression of how content will look and behave on selected devices.

In conlusion, the need for mobile websites will continue to grow. Don´t let your business lag behind with an unfriendly website that is useless to your mobile customers.

Tools that help you create a Mobile version of your existing website:

I am assuming that you already have a website, but you also want to make it mobile-friendly. These are the tools that can help with that:

  1. Mippin Mobilizer
  2. Google Conversion Utility
  3. Mowser

Tools to validate your Mobile website:

  1. W3C mobileOK Checker
  2. mobiReady

Tools to test and view your Mobile website:

  1. Opera Mini Simulator
  2. Mowser
  3. Google Mobilizer

Question: Will HTML5 Eliminate the Need for a Mobile Device Design?

The short answer is NO. If you use HTML5 and CSS3, you might skip steps 13 and 14, but you still need to make sure that the other steps are implemented.

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

10 Responses to “Creating a Mobile Friendly Website. How to “Mobilize” your Website.”

  1. Rob says:

    Great article. With the rise in mobile marketing, businesses are rushing to “go mobile.” Another tool that is making it easy to “mobilize” a website is Womple. Check it out:

    Happy to answer any questions about Womple.

  2. Very helpful post man, thanks for the info.

  3. השלמת בגרויות says:

    big like! – thanks .

  4. More people than ever are using mobile devices in order to perform searches on the go. I think mobile sites are the wave of the future.

  5. nice article and great list Boutros, many people still unfortunately neglect the mobile web and they don’t know what they are missing, but many others don’t know where to start, so we create our service to help this group of people go mobile with the minimun effort and also monetize their mobile traffic.

  6. Keith Mantos says:

    Valuable info. I found your Website by accident, I bookmarked it.

  7. For the future planning, this blog is very useful and supportive to me.Give more ideas for the future in the next article in this blog. I’ll be waiting for these ideas. Best of luck.

  8. I think this blog is really useful and informative. Please keep up the good work it is great to read content on a blog that is not just self obsessed nonsense. I hope I can develop a blog of this standard eventually, although I must admit I find blogging very time consuming and difficult. I wish someone would write a blog on how to produce a really interesting blog like this one.

  9. Mobile websites are really the best instruments through which the retailers can easily present their products in front of the customers in a unique way. Well, We would like to tell you that there are some disadvantages also of not having a mobile friendly website. visit