Designing anything always brings a set of challenges to designers and overcoming these challenges is often what makes design so rewarding. Designing for mobiles is no different and I have certainly come across these challenges myself. As a result of this I imagined that other designers will have already or will come across many of the same issues that I did and that is why have chosen to outline the most common of them here.

Resolution and Device Sizes

As designer we have all at some point come across the issue of designing for different resolutions but in mobile design that same problem arises again but this time with a slightly different issue. Not only are we having to design for smaller resolutions but their are also a greater number of differences in device size and unlike traditional web design we cant just fix this issue by designing for the smallest resolution and wrapping the content. As the devices in question are s small we ultimately want to use the whole width of the screen and that means percentage based widths. We can use some of our traditional principles and still create our content, navigation, images to fit even the smallest of devices but as the res gets larger we need our content to expand and fill the screen. Simple….just make sure your tags etc are percentage based and transition well. But remember the important rule….TEST your site on many devices to make sure your design works.

Research The Area

As with all sorts of design we must research and understand what that particular area of design involves. Mobile design is no different and that is probably why you are reading articles like this. Jumping into mobile design can be a big mistake and the outcome can look very unsightly. If you do your research you will be a lot more confident and a better understanding will lead to a better end result. Check out another article on “How to design for the Mobile Web”.

Advances In Mobile

Again this is nothing new to an experienced designer. Rapid change has been occurring in web design for years from ever increasing screen resolution to new markup standards and browsers. As the mobile industry is on the increase and more and more devices are coming to market there is ultimately going to become more and more competition as companies compete with their own technologies. Designers need to stay on top of this, understand the changes and adapt and transition with it. If you keep on top of the industry then I’ sure your designs will prosper as a result.

Simplicity and Content

If you read my previous two articles on mobile design then you will already be familiar with the concept that ‘simplicity is key’ to mobile design. Most mobile users will be on the move, looking for information and wont be interested in fancy graphics, images and animations. If it isn’t essential then remove it from the design. If you keep the design clean and simple, usable then deciding on your content and the way it looks will become much easier. Concentrate on effective navigation, at the top of the page and bottom with maybe a search bar as the user will be wanting the information rapidly. If they can’t find it qickly then likely they will go somewhere else. Remember that typing on a mobile device is a lot tricker than on a keyboard so if you are using forms then keep them as simple as possible. And also an essential point to remember is make sure your typography is clear, simple (that is one of the common fonts) and easy to read.

Test, Test and Test Again

If you take one thing from this article then let it be test and then test again. Much in the same way as traditional web design it is important that we test our creations. Only this way we know if they work well. Understandably it is much tricker than working with a desktop website as we are never going to have all the mobile phones available. To make things simpler then we can make sure we keep our designs simple and make sure they are coded to standards and semantically. This way we can be sure that whatever else happens when our designs are loaded that at least all our content will be viewable and readable.

A really good piece of kit for testing mobile designs is the opera browser. Using opera we can choose to disable images, CSS etc, decrease the size of the screen and view our mobile site. This way we can get a good idea of what our site will look like if CSS and images aren’t loaded as we would wish. To do this in the Opera toolbar, go to “View” and select “Small Screen.” This will display the website in a very narrow window, similar to what would be used on a mobile device.

Browser Detection

If you are a designer then browser detection scripts are going to become an area that you aren’t probably familiar with, customising or writing the scripts may be entirely impossible. Mobify is a good place to start. Using mobify all this is taken care of for you leaving you just to concentrate on the design. Once you have finished you can simply cut and paste 2 lines of javascript to do all the browser/mobile detection for you.
A few points to follow to guarantee success:

1. Clean XHTML Markup and CSS

XHTML a markup language we are all familiar with and styling using CSS.

2. Know Your Phones

Make sure you cater for the largest and smallest of mobile devices. Scale your site and content to fit all screen sizes.

3. Know Your Users

Your users are likely to be on the go and in need of info fast. Make sure you site is clean, usable and easy to find and read the information that is needed.

4. Simplicity Is Key

Simplicity is key. Use simple styles, essential content, only important images and stay away from complex animations.

5. Use a sub-domain

Using a sub-dmain is the easiest and cheapest way to launch your site. Something like www.mobile.website.com always looks good and will function well with your users as well.

6. Validate Your Markup

Using valid to standards semantically correct markup will make sure your content is viewable and easily readable even in the poorest of conditions.

7. Test.

Testing is the only way to make sure your design works properly. Test on a number of devices, a number of sizes and platforms to make sure everything is as it should be.

Author Bio: Adie is the head designer at AdRiCe Design creating rich user interfaces and websites for all to enjoy on the web.

Category: Internet
Keywords: design, mobile, tips, challenges