Knowpapa.com - a developer's blog

Tweaking Website Designs for Mobile Handheld Devices

iphoneThe number of individuals assessing internet on handheld devices has crossed more than 100 million users.

While iPhone & Android powered devices share a majority of market share in this segment – other manufacturers like Sony Ericsson, BlackBerry, Nokia, Samsung, HTC are slowly catching up on the largely untapped market.

Given the imminent growth in this segment of internet users – it is imperative that developers pay a little extra attention to display contents that best fit into these handheld devices.

Fortunately tweaking your existing designs to display nicely on most of these devices may be easier than you may think.

Here is a low-down on 4 alternative things you can do to achieve this:

a) Tweak the Container Width

The iPhone and most similar handheld devices displays webpages on a 980 pixels wide screen. So a webpage around 960 pixels will fit almost nicely into the screen. If your webpage is any wider, the page will nudge out of screen area and the reader will have to zoom in to fit the content on to the screen.

On the other hand a webpage width less than 960 px will cause the content to display in lesser area than is available for optimal reading. Thus a screen width of 960 px is optimally placed for iPhone.

b) Add a Viewport Meta Declaration

If your webpage size is different than 960px, there is still a way to let the handheld device adjust the screen for optimal display.

Simply include a meta declaration like:

meta name="viewport" content="width=XYZ"

, where XYZ is the width of the your content container. Place this declaration in your website header and this would let the device iPhone adjust the display to optimally zoom your webpage for best reading experience.

c) Add a dedicated CSS style sheet for Handheld Device

Normal desktop browsers use css style sheet which have a media attribute of “screen”. On the other hand, mobile browsers first look for a css style sheet with a media attribute of “handheld”. Thus you can have a separate style sheet for you mobile devices with a media=”handheld” declaration.

link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"

If you provide a separate css style sheet , the iPhone  or android device would pull css information from this dedicated style sheet.

c) Switch to Fluid and Responsive Structure

Building responsive design means that the elements of your web site will automatically align to best fit any given screen size.

In its core essence, building a responsive structure involved using fluid width layout. This means that all width elements in your css are laid out in percentage terms and font-sizes are specified in em (rather than in px). But there is more to it than meets the eyes.

A very good tutorial on building responsive web designs can be found here.

Technology to Avoid

1) Excessive Flash Component: Flash components should always be avoided. For one , flash components are not discernible to the search engines and that can really hit your traffic. If you are keen on using animations on your website, handheld device manufacturers including Apple and Blackberry have embraced HTML5 components over flash. Flash is also likely to be resource intensive in terms of its power requirements and with most of the handheld devices running on battery – this is definitely a big concern.

2) Iframes: Iframes should be avoided when designing websites for smaller screens. Iframes have a fixed width structure and they can really mess up the view on smaller screens.