Developer tips for building a great mobile website

Tips and Tricks

What does it take to truly deliver a fantastic mobile web experience?  There are many different facets to creating a great mobile site that will have your visitors coming back time and time again.  The main concept to keep in mind when building a website for smartphones is that, above all, simplicity is king. I don’t mean to say that your site has to be boring and vanilla – on the contrary, your site can be rich and vibrant – but it must keep some key concepts in the forefront.

  • You must remember that with smartphones (vs a desktop comupter) you have a significantly reduced screen size to work with. You don’t want to force the user to have to scroll all over the site just to read some text or look for a link.  Keeping your UI clean and minimalist will go an incredible distance to improving the user experience on your site.  Keep in mind that a vertical layout instead of a horizontal layout will render much better on most smartphones, and help the user navigate through the site with great ease.
  • Images tend to be a big sticking point when developing mobile sites and applications.  Images should be used sparingly and only when they add real value and meaning to a site. Adding an image just for the sake of adding an image just makes the page take longer to load, potentially causes additional data charges, and could annoy any visitor to your site.
  • For best results, “meta tags” should be used to control the initial scale of your content. Using the following tag will ensure the BlackBerry® Browser loads the page in column view, preventing your users from having to zoom in to read any content and thus really enriching the user experience:

<meta http-equiv="HandheldFriendly"content="true" />

  • When designing your mobile site, remember to design for a wireless network. That means getting the information across the network and to the smartphone as quickly as possible, and sending only what you need to send to make sure that the size of the site is minimal, since a wireless network can lose connectivity or transfer speed at any given point.  Desktop web developers can pretty much get away with anything and have the site render in a relatively quick amount of time, but keeping your site to only what is needed and not having to frequently go out to access the network really helps maximize rendering speed.
  • Designing an effective navigation scheme is critical to a great mobile site.  Your users must be able to locate the information they need as quickly as possible: if they take any wrong turns, it could lead to potential data charges or wasted time having to reach out across the mobile network to retrieve data.  Some simple planning and architecture can go a long way to improving the user experience.  Creating an effective site hierarchy designed to reduce the number of clicks needed and can often lead to a greatly enhanced experience.  Also, having clear titles for your pages will also help generate more traffic to those sites, since they will be stored in the browsing history, making it easy for users to find previously viewed content.

Here are some additional points to remember for developing mobile web sites for BlackBerry smartphones. JavaScript® is turned off by default on BlackBerry smartphones. It’s a situation that you’ll need to handle using the “noscript” element.  Avoid using JavaScript as core functionality of your site or app since it could potentially be cause for loss of traffic. Always remember to use the supported styles and standards depending on your target browser.  For more information on which BlackBerry Browser version supports a given standard, and what elements are available for each version, visit the BlackBerry Developer Zone.

Anyone else have any tips and tricks to build a great mobile site? Post a comment below and share them with the community!

About Prosanta B.

Prosanta is a member of the BlackBerry Developer Relations team specializing in Web Development. Prosanta’s focus is on developing out the web platform and tools associated with web development while supporting the development efforts of a number of Independent Software Vendors. Prior to joining RIM, Prosanta had worked on numerous web portals for major multinational firms writing both front and backend code.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus