HFI Connect

User Experience News, Blogs, and Videos


Just want to share my knowledge about some guidelines in creating Mobile website with you all. I did some R&D for my last project. It’s an M-Commerce site for UK’s famous retailer. I have created User Interface, Visuals, HTML’s and integrated in JSP’s. Ok. Let me come to the article.

Here I am going to discuss about the general guidelines we need to consider while doing Mobile website.

There are increasing internet users accessing websites via phones and mobile devices. As a result, we need to be educated in this area and ready to design websites that accommodate this audience. And designing websites for mobile devices brings some unique situations and challenges.


Mobile Screen Size: Mobile technology is always changing; screen sizes are changing, too. Fortunately for designers, modern mobile devices typically have bigger screens and higher resolutions than those of a few years ago, but of course those older phones are still in use. The results of the studies and R&D 240 x 320 (a.k.a. QVGA) should be the standard size for mobile development.

Mobile Browsers: Mobile browsers behave somewhat differently than desktop browsers and because the environment of its users is not the same, the designer needs to gain some understanding and familiarity. So get start with a general understanding of the mobile browser, if you don’t already have experience.

Constant Change: Change is constant in Mobile technology. As technology and trends continue to change, the mobile Web will evolve accordingly. The challenge of change isn’t really anything new to designers; the mobile Web just presents another area in which designers need to stay up to date.

User Interface Design

Navigation: Navigation is heart of mobile website. In Desktop version, usually repeat the navigation on every page. In Mobile, the real estate is small and priceless. For your website on a mobile, only display the navigation on the homepage. On other pages only include links back to the homepage and back to the last important point along the path users have taken. Show these links at the top and bottom of the page so they're never too far away. BBC Mobile does this effectively with a clickable breadcrumb trail at the top and a list of links at the bottom.

Target Customers and Needs: Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. Mobile users are more likely to want information to help them at that location or time, such as finding directions or finding out what's going on nearby. Also, they might want quick entertainment to pass away a short period of time, like something to read on the bus or while waiting to meet a friend. For your site, predicts users' needs and fulfill these as quickly as possible.

Clean and Semantic: Navigation Mobile cursor is not that much easy like moving the pointing device down (with the joystick or direction buttons) simultaneously scrolls the page and highlights links, buttons and form fields. To solve this, the website should be clean and semantic. It will help give visitors a pleasant experience, with no unnecessary difficulties.

Form – Make it Simple: “Form entry” plays important role in mobile website. Allow users to input information by making selections instead of entering free text (or at least provide this as an alternative method). Entering text on a mobile phone can be painfully slow and error-prone on the typical 12 button mobile keypad. Mobile users are more likely to make mistakes (due to misspelling or mistyping) or take shortcuts.

Small Screen Content: Mobile phone screens are of course tiny and have only a fraction of the area or pixels on most PC monitors. Be sure to identify page requests coming from mobiles and only send down the most essential of information. Otherwise, important content might be pushed down or difficult to find amongst everything else on the page.

Make the User Comfort: Mobile browsers often don't display basic controls such as 'Back' or they display the web page in full screen mode. As such, always include a 'Back' button on every page other than the homepage. So that user won’t get any confusion about where he is standing and what he is doing.

Visual Design

Mobile Friendly Design: One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible. The simple options that a user has can make a mobile website much more usable than it would be otherwise, as long as the options allow for actions the visitor wants to take.

Breathing Space: Breathing space is an important part of any design, and becomes necessity in mobile design because the typical screen size is so much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

Minimal use of Images: As high-speed Internet connections have become more common in recent years, designers have been able to take more liberties with things like bandwidth-hogging video and images. The average visitor on a desktop or laptop wants to see a visually engaging website, and, as a result, images are heavily used. However, when it comes to mobile design, excessive use of images often does more harm than good. There is a great variety of speeds of mobile Internet connections and of pricing plans for access. Visitors are more likely to be slowed down or concerned with use of their resources when they’re on a mobile. Additionally, the size of the screens can make many images difficult to see and content harder to read. For these reasons, it’s very common to see minimal use of images in mobile Web design.

Design for your Phone: We must cater not only to different screen sizes and resolutions, but to different shapes. From short and long rectangles to tall and skinny ones to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!


Now that we’ve looked at some of the current trends and challenges in designing for mobiles, let’s examine some specific issues that should be considered by designers during the process.

Clean, semantic markup: The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.

Separation of content and presentation with CSS: Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.

Alt tags: Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.

Labeling form fields: Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.

Use of headings: With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.
Avoid floats if possible: Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.

Reduce margins and padding: Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.

Pay attention to navigation: Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

Consider Color Contrast: Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.

Test Test Test: Always test test test before going to launch. As with any other type of Web design, testing is a big part of the process. However, testing websites for mobile devices brings additional challenges, and fortunately, there are some tools available that were created especially for these purposes. There is lot of emulators available in the net for testing.

Sample: W3C mobileOK Checker

Views: 57


  • Add Photos
  • View All

Discussion Groups

© 2017   Human Factors International   Powered by

Badges  |  Report an Issue  |  Terms of Service