Programming Blog

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.

Design Adjustments

Navigation

The 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.

Content

Your 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.

Links

On 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 Sizes

Each 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 Platforms

Don´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. Check out well coded sites at Mobify, a place where you can build your mobile site. Some designs aren´t as nice but the codes are all valid. You can test it and see if it works for you. Some design blogs use it very well, others not so much. I tried it but I ended up building a mobile site all by myself. And here you can validate your code.

Great Examples

Below are some great mobile adjusted web designs, all of them and more you can find at a very useful mobile website showcase, Mobile Awesomeness.

Other Resources

Learn How To Develop For The iPhone – It shows you how to build an alternate page and style sheet for the iPhone and iTouch.

Give Your Website a Custom iPhone Bookmark Icon – This tutorial teaches you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen.

Create a Slick iPhone/Mobile Interface from any RSS Feed – This article is about creating a web page that is formatted for the iPhone that will dynamically fill itself with content from a RSS feed.

iPhone Apps Design Mistakes: Over-Blown Visuals – The development of iPhone applications has recently become a hot topic. However, many of these applications are poorly designed and just don ´t become useful as it could be.

MobiSiteGalore – A free site to build your mobile site
Create a Unit Converter Application for Flash Lite Enabled Devices- Flash Lite is an implementation of the Flash runtime for mobile phones, consumer electronic devices, and Internet-connected digital home devices.

Developing with Flash Lite – Mark Doherty over at FlashMobileBlog has teamed up with Dale Rankine to produce a video tutorial series: “Developing with Flash Lite” on their Adobe Flash Lite Vimeo channel.

Doctype: jQTouch and Mobile Design – In this week’s 7 minute episode of Doctype Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.

Go to Source