Developing for Mobile Phones

Detect what types of browser and device your visitors are using. There are many ways to detect information about the visitor's browser from within your website code. If you're using a Server Side language such as PHP, you can detect whether the visitor is viewing on a mobile before your HTML structures have even been presented. If you need to detect mobile devices at Client Side, use the JavaScript Navigator object as follows:

var userAgent = navigator.userAgent;

Tailor the style of your website to suit mobile phones and other devices with small screens. Most Web designs for PC or laptop viewing are far too big and complex for viewing on mobiles, so the content of your site will not be presented effectively if you use the same design for all. To set a separate style sheet for mobile browsing, see the following example JavaScript:

//detect iphone

if(userAgent.search("iphone")>=0) document.getElementById("styleSheet").href = "mobile_style.css";

This would change the style in a page with a Stylesheet indicated as follows:

Tailor the content of your site for mobile users. As well as having smaller screen sizes, mobile browsers are mostly dependent on mobile connections and are therefore slower than the average desktop or laptop to load. Many people also have limited data plans on their mobile phones and prefer sites that have smaller amounts of content. Consider using fewer images and other large media files on your mobile pages and minimize file sizes wherever you can.

Create a separate mobile site. In most cases the most effective way to cater to mobile visitors is by creating an entire separate version of your site that is designed specifically for mobile viewing. This means that you can tailor the content, style and functionality without this interfering with your main site. Your Web host may provide facilities for mobile development on your Web server and your users will be redirected to the mobile site automatically.

Create mobile applications in addition to your website. Particularly if your website has a commercial purpose, it can be valuable to provide people with a mobile "app" for accessing it rather than having to visit it in their phone browser. This can be a complex exercise, but you can focus on the major platforms such as iPhone and Android.