10 Most Important Guidelines for Mobile Web Development

An immense development in the world of mobile devices has made things a lot easier for mobile users. With Android, iPhone and other Smartphone people are accessing internet simply from their mobile websites. As per a recent research, more than sixty three million people in States visited different mobile websites via their mobile devices and the count is expected to reach almost 2 billion by the end of next year. Since the numbers are growing like anything, it is very important for designers and developers to come up with websites specially designed for mobile usage.

Good thing about mobile web development is that as a developer or a designer, you won’t have to make an extra effort to learn something out of the blue as far as technology is concerned, in order to develop a mobile website design. All you need to have is a whole new perspective regarding designing of the mobile website. Today, in this article I am aiming to sum up the most important guidelines for mobile web development in a simpler way. So here goes:

Initiate with Analytics

Initiate with Analytics

It is extremely important to analyze a certain points regarding your mobile users’. To start off with, review the stats of your OS. This will help you in analyzing the important and most visited web pages of your website. You will also get to know the country/city you are driving the most traffic from. Apart from analyzing the top pages visited by users’, make sure you check the keywords being used in order to get an access to your site. These analytics will help you a lot in your mobile development and will definitely bring positive results.

Visitors profiling

Visitors Profiling

Mobile users are bound to have different needs altogether in comparison with desktop users. While developing and designing your mobile website, make sure you put yourself in the mobile user’s shoes. If your target audience is teenager, they will always be on the go so your website should be easy enough to use while driving, shopping or any other activity. Analyzing audience profile is indeed helpful in mobile web development.

Minimize the usage of images

Minimize the usage of images

Excessive usage of images is not considered to be a very practical act for mobile websites. In fact, images are considered to be a bad news for mobile websites and that too for the following reasons:

  • In general, images take a lot of time to load because of their large sizes. As a developer and designer, you must keep in mind that mobile users are often using slow internet connections and their connections cannot handle download of heavy images. So, this is one good reason to avoid usage of images.
  • Each image will require a new HTTP connection and because of the latency it has, it will further slow down the loading of the page.
  • Sizing of the images for all kinds of devices can be very difficult due to the different resolutions. You are inviting a whole new lot of effort by including a lot of imagery in your mobile website.

Still, if you really desire to use images in your website, make sure you use CSS Sprite because it helps in time reduction of loading.

Do not rely on JavaScript

Different mobiles will support different browsers and if you are developing a website to accommodate all of the browsers, you should not rely on JavaScript because mobile browsers are not very good with supporting JavaScript. Apart from this, mini browsers such as opera mini, also provide poor support to JavaScript resulting into a poor outcome. This issue is expected to get resolved in coming years thanks to Apple, Android and Blackberry devices.

Avoid drop-downs

Avoid drop-downs

While you are developing/designing a mobile website, make sure you avoid fly-outs and drop-downs in your website. This is a good thing but only for desktop websites since a user is able to move the cursor over any tab to view the drop down. Yes, a notch for dragging down can be used but then again, it is not a great idea for mobile websites. It would be a good idea if you do not use this thing at all.

Optimizing Download Speed with minimizing JavaScript and CSS

As mentioned earlier, JavaScript is not a reliable thing and if you want to increase the downloading speed of your website minify the JavaScript and CSS and it will automatically improve the downloading speed of your website. Also, minifying JavaScript and CSS should not be a difficult task so there should be no excuses for doing this.

Horizontal and Vertical Layouts

Horizontal and Vertical Layouts

These days we see a lot of mobile websites supporting both horizontal and vertical layouts for the websites.  Yes, they work well for iPhone and Android devices but this is not practical for all Smartphone’s. While developing your website, you should go for a single column form. This will allow your users to scroll and that too in a single direction. By default, the single direction should be vertical because this is what is natural and a user expects this as well. If any images are being used, they too should support vertical scrolling. Opting for both vertical and horizontal scrolling is not a good idea.

Take advantage of mobile features

Take advantage of mobile features

A great way to develop your website is to learn the features of mobile devices which are the most popular. You can then incorporate these features into your mobile website and this will be a definite plus for your website.

An option to visit your regular website

Mobile website is bound to have very limited information and in case a user requires more information, you can always provide a link of your regular website on the main page of your mobile web site.

Speed of your website

Speed of your website

While developing your website, this is the most important thing to consider. Your site’s speed should be good enough to deliver website’s content quickly. If you want to achieve this, apart from avoiding JavaScript you need to avoid usage of flash as well. The most important guideline for mobile web development is to focus more on functionality and speed.


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


10 Comments

  1. Good read, Humaira! Thanks for sharing this. I agree with almost every word, except for the drop-down menus, but Mike mentioned that before. I think, optimizing for speed is one of the most important ideas here.

    • Humaira says:

      Thank you Daniel. Like I said to Mike, yes drop-down menus can be of good use if they are incorporated well. Many mobile websites are implementing this idea successfully.

  2. Praveen says:

    Very nice & good tips & Important Guidelines for Mobile Web Development, dad by day increase Web & Mobiles technology. This is very useful nice effort by you, thanks to sharing nice info.

    • Humaira says:

      Praveen, thank you for your wonderful comment. You will definitely get to read a lot more informative articles. Do let me know if you guys have any topics/suggestions/ideas for such informative articles.

  3. Bryan says:

    A good piece of information. Its the era of mobile and in US almost 70% mobile users browse web through their device. However, drop down menus are sometime very useful if designed perfectly. There are another point missed – do not use flash for mobile websites. Business owners still need to be educated about mobile sites and optimization, as far I know they believe their site working well by visiting from smartphone browsers!

    • Humaira says:

      Hey Bryan. I totally agree with your points. Flash for mobile sites should not be used as they make the entire website really slow. We will be having more relevant articles and will definitely be covering other important points.

  4. MIke says:

    A solid read, but I don’t agree with you about avoiding dropdowns. I feel like with the minimal space it is a good and smart solution when a large amount of items(links, etc) need to be featured and presented to the user. The space that dropdown menu’s like those can save is excellent for presenting additional content higher up on the screen for visitors and users to experience. Just my 2 cents

    • Humaira says:

      Hey Mike. Thank you for your suggestion and I agree with you to an extent. Drop-down menus are good but they need to be incorporated well within a website. The reason why I said that they should be avoided is that they do not render well on all mobile websites. Having said that, yes, they are a great way to save some extra space.

  5. David says:

    Great read. I really like the mention of utilizing mobile features. I’ve recently developed and online app where we utilized the talk-to-text feature for smart phones for entering notes the user needs to store in the app. While mobile features vary greatly from one device to another, sometimes they are worth bringing into the process to simplify users’ experiences.

    • Humaira says:

      David, thank you for liking the article. Yes, I agree with you that utilizing mobile features can prove to be very beneficial and at the end of the day users’ experience matters the most.