Mobile Web Design
Adjusting for a mobile world
Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa.
Mobile is a great place to try new things with different limits. People using the mobile web are much less patient than those in front of a computer--cellphone screens are much smaller and the mobile internet connection, usually 3G, isn't as fast yet.
NavigationThe omnipresent menu can't be applied in many cases because of the screen size. The menu probably would have to be in a vertical way and it could be very uncomfortable if for every single page people would need to scroll down all the menu to see the content. So, only use omnipresent menu if your site has only three links or less on its top navigation and, because of that, it can be horizontal. The solution is to put the navigation on the first page and on the others pages use a link at the top to come back to the first page or use breadcrumbs.
ContentYour content should be the highest priority. The screen is very small so make your design as clean as possible with less images and a lot of white space. The mobile connection isn't as fast yet to handle images, and it can make it harder to focus on the content.
LinksOn mobile everything is smaller and it is not different with links. You have to make them easier to click on. That can be done with, once again, more use of white space around them and bigger font sizes. When the link is selected, instead of just underlining it or changing its color, it should change the background color, even if the link is in the middle of a paragraph. It's much better for mobile user to see what they have clicked on.
Various Screen SizesEach phone has a different screen size, and the iPhone has two positions: vertical and horizontal. So, your site cannot have a fixed width with pixels. It's much better to use percentage and EMS. This method will make your site adaptable to the various screens sizes. Also you can limit the zoom of the interface and the size of the screen using the META properties for mobiles.
Cross PlatformsDon't expect your mobile site to look the same in all mobile browsers; there are dozens out there. There are some HTML elements and CSS properties that aren't supported by some mobile browsers or, at least, it doesn't work the way it should. The various heading markups for example will look different from browser to browser. But if all you want is a site that works well on the iPhone and android, you won't have too much trouble with the code as you already have with desktop browsers. All you need is to adapt the site as I said in the other topics.
Expand your customer base by going mobile with your website, contact us for a free quote today!