Now we have almost reached the end of 2010 and the advances that have been made in the last couple of years it is therefore not surprising that a large proportion of internet users are now turning to their mobile phones to browse the web. This isn’t a new concept by any means but with the improvements being made all the time to smart phones then the importance of a good mobile presence has become much more necessary. Here I thought I would just do a short, simple post of the common areas that designers need to think about when designing for the mobile web. Still many designers are intimidated by the mobile design aspect of web design so i have also added some tips to make life a little easier. I have even done a tutorial on how to develop a simple but effective mobile theme that anyone can have a go at if they are new to this area of design.

Key points to remember when designing for mobile.

1. Simplicity of content and style.

When designing mobile website simplicity is always key. Due to smaller resolutions, slower internet speeds and the general importance of content over design keeping things as simple as possible is crucial. When looking for information via a mobile the user generally is looking for content FAST. Using lots of images, javascript and complex styles will only delay things further. Uses of intricate graphics and large amounts of colour will only distract the user from their main goal which is finding the information they require.

2. Percentage based CSS.

Unlike conventional web design we can never really tell what resolution our design will be displayed upon. Unlike the magic 960px size we don’t have a scale to work off of when it comes to mobile design. Creating a design to the smallest mobile resolution will only create a poor outlook on large mobile devices. If you keep a design simple a way of fixing this resolution problem is percentage based design. Still using CSS and tags we can really utilise the margin: auto and width: 96% features therefore the smallest and largest of devices will span our web pages equally to the size of the browser.

3. Use of white space

Just like conventional web design the use of white space is a really important spacing feature. White space is probably even more important on smaller screens as things can get very cluttered. By keeping our style and content simple, using lists, headings, blocks, line height we can use the white space to separate out our content and break things up to make content easier to find.

4. Importance of typography.

Again much consideration needs to be given to typography. As with all web design we want to get large amounts of content to the user but by making font sizes small, poor line height, poor font selection we can confuse things and make viewing incredibly difficult. We also need to consider that many mobile browsers only contain a limited amount of fonts so we need a typical and widely available font selection to make sure our designs are as they should be.

5. Avoidance of animations.

We all like our designs to stand out from the crowd but do we want to risk this over content delivery and usability. Animation techniques can make or break a conventional website but when it comes to mobile sites where our main aim is to deliver content and not design, flash, javascript etc can be a real turn off for users. We also need to remember that animations tend to require many images and tend to be large in size, making load times greatly increase.

6. Good usage of CSS

The way you use CSS on your mobile site is crucial to the way your content will be separated. When we’re talking about mobile websites the design is secondary to the content but your style sheets are crucial in the way your content is displayed, layed out and separated. If your content is bunched together then this is a major turn off fot your users.

7. Clean, semantic markup

I would say that semantic markup is up there with the most important of tips that I can give on mobile design. It is imperative that you markup your site in this way to ensure that despite whatever happens in terms of CSS styling that your web pages will still be displayed in an effective fashion that is clean and makes sense to the viewer. If your CSS pages aren’t loaded by the browser then your content will still be readily available to the user.

8. Alt tags

I’ve included this tip but to any well trained web designer alt tags are a standard part of typical web design that they will never forget to get their pages xhtml valid. Some mobile users will not have images enabled on their mobile device and therefore it is essential that alt tags are used for usability issues and for users to understand what the image would have represented.

9. Use of headings

Heading make a huge difference to any web design. Mobile devices struggle to consistently display styles and headings can style and structure the layout to some degree on a mobile device. Using headings can break up the content making the site more usable and also improve the navigation of the site allowing users to quickly find certain areas of interst.

10. Margins and padding

This is quite an obvious point when we think about it. As the mobile screen is smaller than a traditional monitor then the margins and paddings need to be of a reduced size in order to keep the sizing consistent. One little tip though is to scale the width of the site down by 3-5% in order to bring the content in from the edges. Padding should also be used to space between blocks of content, forms and images in order to make the site look less cluttered.

11. Pay attention to navigation

Navigation is at the forefront of every website. Like many other areas of mobile design we often only place the important category links on the pages. Navigation is incredibly important as we often have less content per page so being able to source a new page is essential. It needs to be clear, easy to access therefore at the top of the page and more often than not with a search bar at the bottom of the page if the user cannot find the required information.

The mobile browsing world is getting bigger and bigger. Remember that just because we may feel we are up to date now does not mean that in a years time or even less we will still know all there is to know in this area.
As I have said above the mobile design world currently revolves around simplicity. Only the most important and necessary content manages to get into the designs and that is what you should think about when converting an existing site into a mobile version. The principles are generally quite straight forward and some important conversion points are listed below:

Cut out images

I’m not for a second saying that images should be cut out of a design all together. Logos are often saved as image files and most designers will want to use a logo in their design. The reason images should be used at a minimum is down to loading times of the site. As mobile devices often have slower internet connections then bulky images can have a drastic effect on the overall site experience due to the load times. As we move towards smarter mobile phones, better mobile connections and larger screens then images will become used more frequently, but for now if you want to cater for a greater number of mobile users then be prepared to have to use your images wisely and sparingly.

Creating a mobile domain

There are a number of different domain types you can use for your mobile websites. From the custom top level .mobi domain to simply a designated mobile folder on your existing domain. The most commonly selected method is to host your mobile site on a sub-domain. This method is free and can be customised to suit your own preferences. It’s easy and quick to set and may look as follows: m.adrice.co.uk, mobile.adrice.co.uk or adrice.co.uk/mobile/. There is also another method that I would like to recommend and is exceptionally efficient for designers without the help of a developer to browser detect for them. This method is through mobify.com, is free and is a great place to start if you are new to mobile web design.

Content choice

Like i have said previously mobile designs are often simplified versions of a traditional website. On larger displays much more content can be displayed and much of it can be none essential but extra content to back up what is essential. When it comes to mobile conversion you must prioritise your content and only display the most important info that users will be looking for. With that in mind many designers often leave out many images, styles, animations and adverts. Adverts being the most important word here. Adverts have no place in my opinion on mobile sites. They will clutter the site, destroy the structure and generally annoy the user who is their for one reason only and that is the content.

Many ecommerce mobile sites will also follow the same principles. Many will often leave out some extra product information, multiple product images, sub pages and more . It is even common for some ecommerce sites to focus solely around a search form that quickly accesses products that the user is looking for.

Conclusion

I believe simplicity is the key and can be highly refreshing. The simple usability of a site is essential for people on the go. Who wants to have to scroll through lengths and lengths of text and images to find information that they desire quickly and efficiently. Remember “Keep it simple, keep it clean” and you can’t go far wrong.

Author Bio: Adie is the head designer at AdRiCe Design creating smart custom built websites and user interfaces for the web and web apps.

Category: Internet
Keywords: mobile websites, web design, tips, designing