These days there are thousands or mobile websites all around the web, some of them can be considered to be a pure nightmare for mobile devices because of improper usability testing and design implementations. This causes overall diminishing of mobile web and users distrust to this useful functionality.

The information about mobile web design, presented on the web, is a bit vague. Lots of websites have really poor mobile interface because they were not produced professionally. In this article we are going to describe several simple steps that would help you design effective mobile websites. Additionally, at the end of the article we described several software options that would help you adjust your website to the needs of various portable devices. Keeping in mind following tips you will be able to create mobile website that would satisfy needs of the most demanding users.

Tips to Consider:

Tip #1: Try to Understand What Your Users Want


No matter what type of UI is created, first of all you need to establish some sort of a connection between designer and user. If you are building a mobile website with the best possible level of interaction between user and the interface, how would you be able to devise your steps effectively if you can’t even imagine user’s preferences on your exact matter? You need to provide a survey, it would give you information about user’s preferences. Once you have a good idea of what areas and design elements your users are attracted to the most, then you can move on to the next step.
Tip #2: Minimalism is the Key

Keeping everything to a minimum is a simple and effective solution. Since effective mobile interactions have everything to do with great usability and nothing to do with overcrowded designs, it is essential to keep your mobile designs as simple as possible. A simple mobile website will more than likely be 9 times out of 10 more effective than one that feels bloated. This depends greatly on the mobile device, the “heavier” your site is the more time device will need to download it. Keep in mind that most mobile devices have ≈ 512Mb of operating memory or even less.
Tip #3: Overall Mobile Accessibility

The key to effectiveness is the possibility for user to browse freely thorough the interface. For example, allow toggling as an options rather than force users to view them, hide rarely used features and widgets, and avoid having users fill out long forms. When users access mobile site, much of their attention should be re-focused to the content. This means that the content should be as equally accessible as it is legible. You should also use a variety of techniques that will help you redirect mobile users and/or detect specific screen resolutions. The standard screen resolution is 320×480.
Tip #4: Try to Provide Information Through Color

Color rendering plays an important role in mobile usability. When used right it gives a compelling manner to provide information without need to use additional spacing. In case you decide to use different colors you may refer to the W3C Mobile Web Best Practice this tells us that if we provide users with information in color, we have to make sure that this same information is available without any color. There has to be a definite contrast between a background color and text. Information that is conveyed using colors should contain a contrast between any of the other elements within the website design. Please remember that colors are used to provide information effectively but not just to make “things look pretty”.

Tip #5: Do not Accept Mobile Device as Mini Computer

To regard mobile devices as tiny computers is a major simplification and the idea that content can be just shrunk to size is wrong, to some extend. Web design for mobile devices requires major overhauls. You need to adjust fonts and color scheme to be legible on smaller screens, contrasts and resolutions need to be sharpened, complicated design features need to be dropped out or simplified, the information needs to be shifted so that the most important elements can be viewed together.
Tip #6: Omit Pop-ups and Refreshes
Most mobile browsers do not support pop-ups. The ones that support this function have a very narrow space to pop into. Try to use them less (or do not use them at all) and you will avoid unpredictable results. Also, omit the function of automatic page refreshing to avoid filling of the device limited memory. User can refresh the content manually or turn this option on in the settings of his/her device’.
Tip #7: Testing Time!

The development of effective usability of a mobile website requires constant testing of the design. Test your website on a cellular network; turn off Wi-Fi connection and use your wireless carrier’s data network. Then launch your web browser and enter your site’s URL. Start counting. If it takes five seconds or less to load your home page, that’s pretty good. If it’s 10 seconds or more, there are lots things that need to be improved. Usability testing is not a onetime event. You need to improve your website’s quality by providing tests on various devices with different screen resolutions, operating systems and performance features, to check how usable your website is.

Software to Create Mobile Websites:

When speaking of mobile usability it is essential to mention tools that can help you create a mobile version of your website, below you can find a list of resources and applications that will help you successfully fulfill your aim:
Mippin is a fantastic tool for those who want to mobilize an RSS-driven site. It’s much quicker to use and the results look great, every time. What’s more, your site will be optimized to work on over 2,000 handsets and the service is completely free. It provides users with basic analytics in reports, as well as the ability to earn money through mobile advertising.

At last count, 31,912 websites had been optimized for mobile phones using Wirenode, though this tool offers slightly more than Mippin. Using Wirenode’s users can configure their domain name, upload pictures, track visitors and page views and preview their site on an emulated phone. Editor interface lets fully personalize mobile site with colors and images, and create, edit, rearrange and delete individual pages.

2ergo has mobilized huge organizations like Rightmove and The National Guard, creating mobile-friendly websites for them which look great and load quickly. 2ergo’s customers can choose to use the self-service mobile publishing and content management tool, Mobile Site Builder, or let 2ergo design a custom site especially for them. The latter, obviously, is the more expensive option of the two. 2ergo’s service includes automatic device and carrier detection, data capture and collection forms, an integrated ad service platform, real-time tracking and top-notch technical support.
Zinadoo is a free tool, which lets build mobile sites quickly and easily. Users can make the most of Zinadoo’s web and mobile widgets, as well as its text and email services, to promote their site to an online and offline community. Furthermore, they can optimize their site for Google Mobile with keywords and tags, and upload videos using Zinadoo’s Mobile Video. As if that wasn’t enough, users can also gain access to Zinadoo’s online Business Directory and Mobiseer, a Web 2.0 service for organizing, tagging, sharing and managing favorite mobile sites.
Winksite is an excellent W3C mobileOK and .mobi standards-compliant mobile website builder which focuses on the community element of website promotion and social interaction. It’s packed with mobile-community features like forums, chat and polls. Users can use Winksite to create their own mobile portal for communicating with friends, sharing feeds and favorites. Users can also divert all of their texts, emails and Twitter messages to one mobile destination which people can interact with.
Mobile sites have slightly different web address than full sites. Mobile version usually starts with “m.” before the regular web address, or ends with the suffix “.mobi” rather than “.com.” If a mobile user types in your regular URL or follows a link to the site from a search engine, the mobile version has to be loaded automatically. Though it happens not on every phone, just in case include at the top of your website a link to your mobile site, and vice versa.
Following these simple steps, you will not only satisfy your mobile visitors creating a pleasant UI but you will become more visible in mobile search results:
Try to understand your user’s wishes;
Provide survey on your site or in your social community page, your visitors will help you improve your mobile website.
Produce minimalistic design;
Do not forget that you are creating mobile version of your website for devices that are limited in screen size and functionality, comparing to your computer.
Improve total accessibility;
Take your iPhone, Blackberry or any other mobile device you owe and test your mobile version on it.
Use color coding for (less)important information;
When color coding is applied you need to ensure user that the same information is accessible without color effects.
Do not think of a mobile device as of a mini computer;
No matter how advanced mobile device is, if its screen size is less than 7 inches it cannot be considered a mini computer, so keep in mind that most users have devices with screen sizes from 2.3 and up to 7 inches.
Do not use pop-ups;
Pop-up is the main thing that causes user frustration. Pop-ups not only distract, they “stir user’s wrath” if they can’t be closed, better omit this functionality than make your users hate you.
Test, test and once again test;
Testing is important not only for mobile websites but for all kinds of work you do, better check dozen times what you have done than to feel awkward or humiliated later.
Good luck with your design products and do not forget to drop a line at the bottom concerning your mobile web experience.