Web Development For The Iphone And Ipad

Want your website to look great on mobile devices such as Iphone and Ipad?

Do you have your own website or have looked at a website on your Iphone or Ipad and wondered why it looks different?

A lot of the time your website, or a site you viewed on a PC or Mac will not look much different when viewed on an Iphone or Ipad. However sometimes due to poor design or simply just not knowing what it takes to make a website compatible with mobile devices can be a bad look.

There are many things to consider when designing mobile websites or simply making your current website compatible with mobile devices. In particular mobile stylesheets:

The first step to adding mobile support to a website is including a special stylesheet to adjust the CSS for mobile devices:

Detecting the User Agent String

With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain, for instance m.michaelreaney.com. This server-side approach has several advantages: it guarantees the highest level of compatibility and also allows the website to serve special mark-up/content to mobile users.

Client-side Methods & Media Queries

Alternately, the easiest approach involves detecting the mobile device on the client side. One of the earliest techniques for including mobile stylesheets involves taking advantage of the stylesheet’s media type, for instance:

1. <link rel="stylesheet" href="site.css" media="screen" />
2. <link rel="stylesheet" href="mobile.css" media="handheld" />

User Initiated Method

Considering there can be difficulties with mobile UA detection, some companies such as IKEA have opted to simply allow the user to decide whether to view the mobile version of their website. While this has the clear disadvantage of requiring more user interaction, it is arguably the most fool-proof method and also the easiest to accomplish.

Conclusion

As the worldwide shift to mobile continues, handheld device support will become increasingly important. Hopefully this summary has left you with both the desire and determination necessary to make mobile support a reality in your websites.

If you would like to know more, or understand how I can make your website mobile compatible please get in touch either via email: info@michaelreaney.com or by phone: 0800 673 932