Designing compatible web sites for internet phones

There are a few tips we should follow when creating web sites to ensure best practice and display on iphones and other popular smart phones.

To boil it down, it’s about compromise. One web site has to fit properly on a computer browser and on a roughly 3 x 4 inch hand held device. Unless you create two completely different web sites, compromise has to happen – but we can be smart about it.

If we design a web site to be only 3 inches wide it’s going to look pretty small and silly on a computer browser. Instead the site should be created following a few rules which allows the site to resize to about a third of the size it would display on a computer (expandable web sites – you know the ones which resize when you pull the edge of your browser in and out to resize the window and the content compensates) and have components easy to access:

 

Minimize Scrolling – Firstly we want to minimize scrolling on the iphone and make sure important components of the site are not going to appear on the far right edges of the screen etc. My compromise is that I use this area for less important things like non-specific gap filling photos, or nothing at all.

Logo – Make sure this is placed in the top left corner, as like reading a book internet phone’s view web pages from left to right, top to bottom. Placing the logo top left ensure the viewer is immediately aware they have arrived at their intended destination as it will be the first thing they see on an iphone.

Menu - The menu should be inclined towards to the top left corner direction too, usually under the logo. Again, this ensures less scrolling and user time. I think it is fine to have the menu structure either vertical or horizontal bearing in mind the length of its content and letting this be the determining factor.

Expandable Web Site – Make sure your web site is sized as a percentage of the page not a fixed pixel width, so the page can be resized horizontally and account for this by nicely reorganizing its content. This is a not a new revelation of the web design world, often the designer saw this option as an and/or and the design outcome was the deciding factor in this consideration, now usability must be the deciding factor when considering multi-platform web sites.

Background Images – make sure these are vertically tall, as using percentage width determination/auto resize will result in pages scrolling much longer on an iphone than they would compared on a normal computer browser. Be aware an image could re-tile itself before you may intend on an iphone and check for this when designing.

Font Sizes – don’t go smaller than 10 points/pixel in my opinion.

 

Well there are some tips that I hope you found interesting if you had been thinking of this topic. There are few more minor things of course, but they are easy to stumble upon on preview and correction as you go along creating a site, the main thing is that that the good basic structure is there.

Here is an online iphone simulator if you wish to check you site: TestiPhone.com. Please visit my web design page if you would like me to design your iphone compatible web site.

Advertisement