Designing for Mobile Devices

There is certainly a lot to consider when designing a website for mobile use. Not only are there so many variations of screen sizes and band-width, but the range of capabilities can make any web developer feel limited. Here are a few tips to keep your mobile web site looking sharp.

The most important guideline to follow when designing for mobile devices is to simplify, simplify, simplify. You should only publish the bare minimum of what the viewers will need, and severely narrow down the content. Using a single-column layout is considered best practice, and limits scrolling to only one direction. You will also be surprised to note that you will want to limit your navigation to only a few key options, no more than four. This will supply the operator of the device with only what they need, and get the important information to them fast.

Next on your list is that you will want to redirect the viewers to a separate, or sub-domain. A sub-domain will allow you to keep all of your files on the same server, and is most likely your cheapest option. Some actual examples of this are m.twitter.com, and netflix.com/mobile/.

One of the most important aspects of developing for mobile devices is validating your markup. Mobile browsers tend to be much less tolerant than your standard desktop browser, so it is vital to check your markup on a regular basis, as mobile browsers tend to update more often then desktop versions. An awesome validator is the W3C mobileOK Checker, found at http://validator.w3.org/mobile/ . It is also important to not rely on Flash or Javascript, since many popular mobile devices do not yet support them. Do your research to find out which mobile devices support various tags, as most have defaults for elements such as typography and lists. Try and stay away from adding pop-ups, or opening links in a new window.

All in all, you’re best off keeping everything dead simple on your mobile design. Cutting down on the use of images, complex programming and in-depth content will all help to make your website display flawlessly. I recommend checking out http://www.mobileawesomeness.com/ for some great mobile web design inspiration. The key to creating a successful layout for mobile devices is to get your brand and message across as simply and as quickly as possible to the user.