Designing Websites for mobile phones and iPads

Each passing year, the number of users who use their mobile phones and iPads to access internet is increasing at a considerable rate. If one goes by the current trend, there is steep rise in the number of such users and experts have predicted a tremendous growth of mobile web industry.  With this scenario, it has become essential to make website for all types of internet users, whether they use computers or mobile devices for web surfing.

Designers and developers now have to create mobile and iPad friendly versions of the sites to cater to this particular segment (mobile web users). Not doing so will only result in the loss of potential customers.
iPad & Friends

Creating Mobile Friendly web designs

Fluid layout

The screen space available in mobiles phones is quite small, in comparison to computers and also different mobiles have different screen resolutions which make it difficult for designers to fit in the content. Therefore adopting a Fluid layout proves to be of much help as such a layout adjusts itself to fit the screen size and it becomes easy to utilize the available space properly.

Make the site simple with a minimalist design

It is clear that a website meant for mobile users ought to be different from the one for desktop users as the former cannot contain all the features. It is therefore a good practice to opt for a minimalist design and make the site simple by incorporating only the necessary features. A mobile website needs to achieve the right balance between design and functionality to offer user friendly experience.

Clean and valid mark up is essential

Though proper coding is the necessity for standard browsers as well but mobile browsers are quite strict in this regard. Thus to ensure mobile friendliness of the site, it is imperative to keep the code clean and valid. It is better to write code in XHTML as most mobile phones support it but it is not a compulsion and one may use basic HTML and CSS.

Restrict the use of Images to the Minimum

Images may not appeal as mush on a mobile device than they do on a desktop and also they increase the load time. Therefore only necessary images must be used which help conveying the message and serve some purpose.

Clickable area- Make it BIG

As mobile users utilize their fingertips on their touch screens to click, they must be given the privilege of large buttons. In fact the clickable area should be made large enough to grab attention of the users and allow them an easy way to click.

Designing iPad friendly websites


As an iPad user can view the site either in landscape or portrait, the layout should be such that it favors both. To enable visitors to properly view the site, a designer can make use of the beneficial features of CSS and JavaScript.

Background Contrast should be low

The iPad version of the site should be designed with low contrast to make it easily viewable by users. The reason behind doing so is that iPads have light contrast because of which sites with high contrast backgrounds become difficult to look into.

Avoid Flash

As it is known that iPads do not support Flash, it is a wise move not to use Flash elements in the design. Rather one can take advantage of HTML5 and CSS3.

Navigation – make it finger friendly

It is an important consideration while designing a site for an iPad. It must be borne in mind that it is a touch device and users only have the option of using their fingers. There is no hover effect as in standard sites to facilitate navigation. Therefore to make navigation smoother, it is required to put more space between the various links and make the buttons larger in size so that they are clearly visible and clickable.

The above mentioned are some of the useful ways that help creating mobile and iPad friendly websites. We hope the information provided helps our readers.

Author Bio :
Mark Harvey, web developer working with XhtmlJunction, a popular web development company offering services like PSD to HTML, PSD to Drupal, PSD to Magento, PSD to WordPress and few more. PSD to HTML now at $39/8 hours.


This post is written by guest author, you can also write one here at by checking Write For Us page For more information.

You may also like...

3 Responses

  1. Great article. Simple but very useful tips. Keep up the great work.

  2. Sylvia says:

    Nice article. As a web designer/developer AND an iPad user, I have to strongly concur with the need to eliminate Flash and to make interaction fingertip friendly.

  3. Bill Smith says:

    just what I wanted to read as we start designing pages for mobile devices

Leave a Reply