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
Tip #3: Overall Mobile Accessibility
Tip #4: Try to Provide Information Through Color
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
Tip #7: Testing Time!
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.
Also check out following responsive web design interactive infographic where all valuable information about RWD is gathered.