How can i design a site for mobile phones

Question

How can i start the development of a site that can be browse from mobile phones? For example, if you browse Gmail site from an iPhone the site looks different from the normal site. You have to design two differents sites to do this? How can I know if the site is accessed by a mobile browser?

Answer 1

You have to design two differents sites to do this?

Yes

How can I know if the site is accessed by a mobile browser?

Your programming language has probably some way of looking through the client's information. PHP, for example, has a superglobal variable $_SERVER that has all kinds of information of both the serving server, and the visiting client. In this case, you would be interested in the value of $_SERVER['HTTP_USER_AGENT'], which would give the following result, should I visit a page:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

This tells you that I'm running Mac OS X 10.5.6, using Safari 4.0. There are known keywords for various mobile browsers. One version of iPhone's browser, for example, has the following user agent:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

the "iPhone" already gives it away, but is further confirmed by the keywords "Mobile" and "Safari"

Answer 2

Keep it simple, think opera mini and you will get it right. (iPhone has more off a normal browser...)

1. Focus on content

2. Avoid plugins

3. Follow the web standards

4. Separate content from layout/design, use css as much as posible.

5. Use text and pictures.

Add the rest of the bells and whistles if you must, but make sure the the site:s content is always available even when the bells and whistles are turned off. If you can browse the page with a simple browser like lynx and normal browser like firefox then you are on the right track.

For more info feel free to visit the any browser campaign

---

Edit: In case it is not obvious you work with different css for different types of browsers, but always use the same content. Visit the css zen garden for a nice demo.

---

Update: Adding a link to css media types, and as stated by others it is the handheld option that is interesting.

• http://www.w3.org/TR/CSS21/media.html

Answer 3

Most sites have a slightly different sub domain for mobile sites (most use "m"). e.g. flickr uses m.flickr.com

(there is a recommendation to use the .mobi TLD but I've never seen that used)

Make the design super simple, don't use too many graphics, where you need to keep them as small as possible. This might be helpful for the design.

I would probably construct a different set of pages for mobile users, making use of the same business objects etc. as you're using for the main site.

If the differences between the design of the two sights isn't to great you might be able to get a way with just serving separate CSS files?

Answer 4

For checking how a weppage looks in a mobile Browser use Opera Mini Emulator

Answer 5

The majority of mobile devices these days support "mobile stylesheets" which are simply alternate stylesheets to display things simpler. You can add a mobile stylesheet to your site in the normal way and include the media="handheld" attribute:

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

Then those styles will apply to mobiles.

The only problem with this method is if your HTML is bulky, it may take a while for the page to load since most mobile browsers are slower (except Opera Mini). That's why the bigger sites like flickr and digg use separate sites.

Additional notes:

• Bulky HTML doesn't affect Opera Mini as much because it uses a proxy which does the rendering externally then sends a special "image" to the device.
• Use simple, clean HTML then you can send the same to normal browsers and mobile devices
• You'll have to check on the combinations of stylesheets with media attributes. IIRC adding the code above will make browsers ignore the first stylesheet. If you add media="all" to the first one, both will be used (and you can thus override the original styles rather than start afresh).

Answer 6

Check out the WURFL project. Its intention is to help developers target multiple phone browsers, and started way back before there was Mobile Safari, back in the days of HDML, WAP and XHTML-MP. It's up-to-date however, storing capabilities of modern devices such as iPhone. It has data on over 400 devices, and has libraries in Java, PHP, Perl, Ruby, Python, .NET, C++. Depending on how broad you want to target your mobile app it's something to look at. Here's a list of sites that use WURFL.

Another related project written by Luca Passani (the co-founder and maintainer of WURFL) is Switcher. You can use this to automatically redirect to the mobile version of your site.

Answer 7

You don't HAVE to design two different sites, but you probably want to if it's important to let mobile users access your site.

There are a few ways to deal with this problem, each with pros and cons. I'm assuming that your site has its information in a database, and publishes that data using a set of templates? (Like a Ruby on Rails or Django site; a PHP site; a blog; etc.) If you've hand-coded a bunch of static HTML pages, this is going to be way more labor intensive for you.

1: Same HTML, different stylesheets for SCREEN and MOBILE

The idea: You deliver the same HTML structure to all requests. You create a stylesheet for SCREEN and one for MOBILE.

Good: For you, the programmer. It's easier for you to maintain 2 stylesheets than it is to maintain 2 totally separate template sites.

Bad: For your users. A site that's easy to use on a mobile device usually is inefficient for a normal browser; and sites optimized for a desktop / laptop often fail miserably on a mobile device. Obviously it depends on how you code your pages, but in most cases, pushing your normal site to a mobile browser will be bad for your users. (See http://www.useit.com/alertbox/mobile-usability.html for a summary of Jakob Nielsen's recent usability research on mobile sites.)

2: Maintain separate sites

(Gmail maintains even more than 2 systems! They basically have different container applications / templates that process the same data: the full AJAX browser version; the plain HTML browser version; a basic mobile version; a native Blackberry application; and a native iPhone application.)

This is the emerging standard for sites that really care about having both a mobile and desktop presence. It's more work for you, but in general it's much better for your users.

On the upside, you can probably create one stripped down pure HTML site that works for mobile and that acts as a fallback for the rare web user who doesn't have javascript, or who has major accessibility issues that prevent them from using the "full" site.

Also, depending on your user base: in the US, people generally have access to a desktop / laptop, and use their mobile devices for auxiliary access. For example, I book my plane tickets and rental car using my desktop computer, but I want to look up my reservation code on my mobile. In many cases, you can get away with limiting the functionality that you offer on the mobile site, and require the full computer to perform uncommon use cases.

The basic procedure:

1. Design & build UIs for mobile and screen.
2. Launch the sites at two different URLs; the emerging convention is www.yoursite.com for the desktop version, and m.yoursite.com for the mobile version. (This allows users to browse directly to m.yoursite.com if they know of the convention.)
3. On www.yoursite.com, sniff the user agent and test to see if the user's browser is mobile. If so, direct the user to m.yoursite.com.
   1. There are sniffers written in various server languages (PHP, Perl, whatever) that you can probably use. Check the licenses. Here's an example of a sniffer written in php.
   2. From Wikipedia's article on user agent sniffing: "Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."
4. On m.yoursite.com, provide a link back to www.yoursite.com. Users who click on this link should NOT be redirected back to the mobile site, and how you accomplish this depends on your implementation.

You may want to follow Quirksmode for his emerging articles about mobile testing.

3: Templates output different data chunks depending on the user-agent, and maintain separate stylesheets

Like (2), this requires you to sniff the user agent. Unlike (2), you're still using all the same page logic and don't have to maintain two separate sites. This might be okay if you're just dealing with a blog or website that's mostly about reading data.

In your template code, you can say things like

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

This lets you mostly maintain one set of template files. You can also streamline the pages that you're sending to your mobile users, so they don't get a big bloated page when they just wanted to read your blog post or whatever.

Answer 8

Your site should limiited to the mobile phone which can support on maximum requirements. you can not even entertain all the mobile phone.

Your web site should have different set of css style, and HTTP AGENT must check the client type according to the request Css selection should take place .