7 Tips to Create The Mobile Version of a Website

Not long ago developers considered browser-rendering differences to be one of the most challenging problems. IE6 probably a nightmare to the online industry, is gone but there are still a lot of issues with browsers that make coding a tough job. Along with the exponential evolution of smartphones and handheld devices other issues have emerged and left the browser problem somewhere in the background.

Making a mobile version of a website is apparently simple: minimize the amount of content and pictures, tests and maybe some enhancements. Still, the big dilemma in every web designer’s head is how to increase compatibility as mobile devices have various screen resolutions: 128×160, 176×220, 240×320, 320×480. Most likely, soon, we will witness devices with even more resolutions and choosing a screen size for the website will be even harder. Still, mobile sites are a necessity and ignoring it would be foolish. And to stay in the bad news section: usually people who access the Internet from smartphones are rather selective: only a small number prefer the phone when they’re browsing for fun; most people still stick to the old desktop.

Those who use mobile Internet do this either because they urgently need certain information or when they are in cigarette breaks for accessing social networks, news, etc. In addition, they would definitely leave behind a complex site with too many options and too many banners. Therefore, a site’s mobile version, even if it’s smaller requires a considerable effort, sometimes greater than when making a desktop version. Being a rather new concept determines a lack of resources in this domain. However, with passion and lots of work you can create impressive layouts.

To help designers and developers make mobile sites I’ve created a list with 6 tips of capital importance; of course the issues that may occur are many and can’t discuss them all in this article, but I hope this will be of help.

Also I appreciate any idea from readers as this makes this post more valuable and helps those in need, even more.

1. Select a good domain name

Select a good domain name

There are three options when choosing a domain name:

    • Choosing a domain different from the desktop version (eg. www.blogm.com, www.vblog.com or www.mblog.uk).

Personally, I don’t think it’s a good idea because loyal readers are used to the old address and also, probably, lots of money have been invested in making it popular. And so on, another domain would reduce the value of the brand.

    • Choosing a subdomain (http://yourblogname.com.mobile or http://m.yourblogname.com)

In this case, the confusion problem is partially solved through a campaign in which the readers are informed that they can access the mobile version of the site by adding .mobile after the old address for example. (an intuitive option).

    • Using a .mobi domain (http://yourblogname.mobi)

There are still wild discussions about the use of it, but I consider it a very good solution.
The specialists created an auxiliary solution; a code that enable the servers to detect if a desktop or a mobile browser is accessing the site. The big problem is the exact identification of the call type as it would be a disaster to try to access a website from a computer and to get the mobile version on screen.

2. Stick to the essential information

Stick to the essential information

A Create mobile website can’t offer the whole quantity of information of a desktop one because the upload speed is significantly lower, only the Super Smart Phone & High Speed connection to the Internet could compete with “the old computer”. As this solution is still pretty insignificant in the whole range of opportunities on the market (even if it gets more popular everyday), designers minimize the site content. As I pointed out earlier, people who use handheld devices are in urgent need of information and a complicated site would only scare them away.

3.  All the files must be under 20Kb size

The maximum page size of a mobile online presence must be under 20Kb-25Kb but the recommendation of the experts is to keep if even under 10Kb. There are two main advantage of a smaller size: the upload process doesn’t need hours till to fully render it and reduced cost for users who pay for their traffic.

4. Pay great attention to coding

Desktop browsers are more and more sophisticated and they can bypass some programming errors but we can’t say the same thing for mobile browsers; Even the most powerful phone CPU can’t compare to the one of a computer or laptop. So before publishing it a developer must be sure that the code is 100% valid.

5. Good navigation is vital

Internet access from handhelds has just gone passed the pioneer stage so many are still experimenting; a few years from now the tips from this article will probably be obsolete or unimportant. Considering all I still find it hard to believe that a complicated menu with many hyperlinks would be successful. Anyway, at this point it is recommended that you avoid complex menus as simplicity is the key to success. Apparently easy, to reduce a website to its basic and essential components is one of the most difficult tasks.

6. Accessibility keeps the users on your mobile versions

Due to various reasons, a user can restrict the upload of images but without the alt attribute he doesn’t have any idea about their content. In addition, you need to use the tag label for input form. These are only a few examples of the importance of accessibility in the overall rating of the site. If in the desktop and laptop versions accessibility is still a pretty neglected concept, in the mobile version it becomes vital for a good navigation.

7. A Great Varieties of Displays Requires tons of tests

The variety of handheld devices screen resolutions is still a great challenge and an ideal solution doesn’t seem to be within reach in the near future. To minimize the number of rendering problems you can use applications that allow viewing in different forms or you can use a variety of handhelds (a more expensive solution). Anyway, the testing of the site in different view modes is compulsory even if it takes a long time.

Even if far from being problem free, designers say they that the layouts will be adjusted and navigation will become pleasurable. The next few years are critical on establishing a base for creating websites for mobiles, so we will have innovations in this domain many years from now.

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub

1 Comment