Build Mobile Websites | How to make a Mobile Website | Creating Mobile Websites

July 18, 2012 by Jamshaid Hashmi

Let’s start with the premise that, given the growing demand and popularity of mobile sites you decide it’s time to consider a mobile website for your business. However, you remain a somewhat skeptical whether you need a mobile website for ‘your’ business and the prospect of building one leaves you even more puzzled.

Why Create a Mobile Website?

Before going any further let’s consider the actual facts:

• More than 90% of the mobile phones in the US and Europe are web enabled
• The current industries seeing the most growth in mobile searches are business, entertainment, and travel (30% in Restaurant category)
• Mobile searchers tend to use the same search engine on their mobile device as they use on their desktop computer
• Given the staggering growth, the mobile channel is where business owners need to invest for the future. The mobile category is pulling an ever increasing share of advertising dollars when compared to traditional online channels

Challenges in Developing Mobile Websites

There are four main challenges facing the mobile website design, and most have to do with the user interface and user experience.  Take for example the small screens on mobile devices.   For something to be mobile, it must be easy to carry and thus relatively small. Small screens mean fewer visible options at any given time, requiring users to rely on their short-term memory to build an understanding of an online information space. This makes almost all interactions harder. It’s also difficult to find room for multiple windows or other interface solutions that support advanced behaviors, such as comparative product research.

The second challenge is awkward input, especially for typing. It’s hard to operate GUI widgets  (Graphical User Interface) without a mouse. Menus, buttons, hypertext links, and scrolling all take longer time and are more error-prone, whether they’re touch-activated or manipulated with a teensy trackball. Text entry is particularly slow and littered with typos, even on devices with dedicated mini-keyboards.

The third challenge with mobile devices is download delays. Getting to the next screen can sometimes take forever — often longer than it would on dial-up, even with a supposedly faster 3G service.

Last but not least, enormous challenges exist with poorly designed mobile sites. Because websites are typically optimized for desktop usability, they don’t follow the guidelines necessary for usable mobile access.

Advantages of Building Mobile Websites

Mobile phones are used for a number of different things as illustrated by the following graphic:

•  Communication (including email, social network sites, forums, using a camera application to send a picture to a friend)•  Information seeking (examples include finding business hours, stores, locations, directions, checking news, sport information, movie times)•  Data handling (e.g., uploading a picture, installing an application)•  Entertainment (e.g., watching video) •  Transactions (e.g., shopping, banking)

With this in mind you need to assess your options. Here are a few things to take into consideration.

• If your budget allows for a mobile site, build one: your users will do better with it.
• Use site analytics to determine how much your site is accessed from mobile devices and to decide whether it’s worth building a mobile site and which platform to prioritize
• Build a mobile site if people do small, quick transactions on your site under time pressure
• Build a mobile site if people use your site to communicate with each other.
• Build a mobile site if people come to your site to kill time and browse.
• The only eventuality when you do not need to build a mobile site is when your full site has a shallow information structure and limited functionality (1–4 possible tasks).

Checklist for Designing Mobile Websites

Here is a checklist of some items to follow when considering ‘How To Build a Mobile Site’:

• Auto-Detect Mobile Phones. Mobile-friendly websites automatically detect that users are on a mobile device and then display the appropriate version of the site.
• Clear Calls to Action. The most important features of the site should be at the top of the page and should include clear calls to actions.
• Avoid Mobile-Unfriendly Elements. The design should avoid mobile-unfriendly elements such as flash, large images, video, and complex layouts.
• Fluidity. Design with a fluid layout that will gracefully adapt to a range of typical mobile screen resolutions.
• Touch Interface. Touch screens don’t have hover states — it’s all about fingers tapping, so don’t build a site that requires users to move their mouse over menus or other elements. Also, make sure links and other clickable elements are big enough to tap with a fingertip.
• Scrolling. Limit scrolling to one direction — the site should only scroll vertically. Having to manage a page that scrolls horizontally and vertically is difficult to navigate.
• One Window. Avoid pop-ups and new windows. A user’s entire experience should take place in a single window.
• Simple Navigation. Simplify your navigation. Typically, a site’s traditional navigation is too complex for a mobile site.
• Clean Code. Most desktop web browsers allow a lot of leeway when rendering HTML and will usually display a site correctly, even if the code has flaws. Mobile browsers usually have less room for error, so there is an added value to having clean, simple code.
• Use Alt Tags. Sometimes images won’t load, either because of issues with the mobile browser or because a user’s connection is too slow. Always include descriptive alt tags for images, in case they don’t appear.
• Label Forms. Some modern websites embed form labels inside the form field. On mobile, it’s much more difficult to keep track of the fields, and users often make use of “next/previous” buttons built into the keyboard. Without clear labels alongside the form fields, it might be impossible to know what information is supposed to be in which field.
• Escape Hatch. Sometimes users just need to use your normal site. If possible, always have a link back to the original, Full site and from your Desktop site to your mobile site

The fact is that your customers are searching the web using their mobile devices and the numbers show 1 in 7 searches performed in Google are from a mobile device.  The need for a mobile site is becoming increasingly important for businesses to remain competitive.  Information provided in this post will give you a good starting point, but like anything, consult with a professional before embarking on mobile site development.

About the Author : Google

A serial entrepreneur with extensive background in franchising and interests in multiple online business channels, Jamshaid (Jam) Hashmi has played an instrumental role in the franchise development and success of a renowned international franchise company. His most recent entrepreneurial interests include launching ClickTecs, a Digital Marketing company specializing in Search Engine Marketing and Social Media Marketing as well as Website and Mobile Application development. In 2007 he co-founded WSI Search Result, an online marketing company that supplies services to Internet Marketing Consultants. A sought after public speaker, Jam has been the featured keynote at many franchise conferences and international summits. He regularly trains ‘C’ Level Executives and supports both new and seasoned business owners on Search Engine Optimization (SEO), Social Media Optimization, Mobile Marketing, Brand Reputation Management and Conversion & Measurement through web analytics. When he’s not scaling the heights of the Internet world, Jam ‘unwinds’ on extreme thrill-seeking adventures from the jungles of the Amazon to the highest summits. His passions include working with NGOs on humanitarian missions to areas around the world affected by disasters and poverty.