The right way to build a mobile site
Mobiles now outnumber televisions 3-to-1 and PCs by more than 4-to-1. Analysts predict by 2012, half of all devices accessing the Internet will be mobile devices. What impact does this have on brands and companies? In order to reach your audiences where they are, it is almost necessary to have ...
Mobiles now outnumber televisions 3-to-1 and PCs by more than 4-to-1. Analysts predict by 2012, half of all devices accessing the Internet will be mobile devices.
What impact does this have on brands and companies? In order to reach your audiences where they are, it is almost necessary to have two websites – one for desktop users which has the full functionality and another for mobile users with reduced or customized functionality.
But, developing a mobile site doesn’t just mean taking your regular site and shrinking it down. At Flip, we’ve developed many mobile sites and learned valuable lessons each time.
Before getting started, it’s important to consider the following basic restrictions of mobile platforms.
- Small screen size and resolution – Mobile screens are much smaller than desktop monitors. So we should ensure that the content fits properly (a horizontal scrollbar is one of the most annoying things for a web page). Apart from that, the screen size and resolution varies from device to device which makes it complicated to generalize layouts. We need to consider devices from a small 240x320 pixels resolution to a massive 640 x 960 pixels iPhone Retina display.
- Limited navigation– There is no mouse and not all mobile devices are equipped with touch screen.
- Limited or no javascript support – There are still many devices which do not have good javascript support or it may be disabled by default.
- Limited or no flash support – Though full flash support is promised for many mobile platforms in future, at present there are only very limited devices which support this(to name, Nokia N900 which runs on MAEMO and devices which are updated to the promising Android 2.2 Froyo) – the others only support a very limited subset called FlashLite. Also, the Apple vs Adobe fight goes on and it is almost certain that iPhone, one of the most popular platform/device, will not support flash in near future.
- Limited and costly bandwidth – Though 3G connections are common and 4G connections are around the corner, there are many places in the world where even a GPRS enabled connection is considered a luxury. Also, the bandwidth is more costly when compared to normal broadband connections.
The actual process of “mobile site optimization” can be quite complex because there are so many different types of mobile smart phones and each has their own operating systems with different screen resolutions.
Here is a quick snapshot of the different platforms:
| Platform | Current status | Popular devices |
|---|---|---|
| Apple iPhone OS (iOS) | iOS version 4.x | Iphone, iPod Touch, iPad |
| Symbian | Symbian 3 is getting ready (Nokia N8 is announced on this platform) | Nokia N Series |
| Android | Android 2.2 (Froyo) with full flash support | HTC Hero, Nexus One |
| RIM BlackBerry | BlackBerry 6 | BlackBerry Curve, BlackBerry Storm |
| Microsoft Windows Mobile | HTC HD2, Samsung Omnia II | Windows Mobile 7 is announced and will be available by the 4th quarter |
| Palm OS | HP acquired Palm and it may be used in many devices including printers | Palm Pre |
| Maemo | Nokia and Intel announced merging of Maemo and Moblin. The new platform will be called MeeGo | Nokia N900 |
| Samsung Bada | Bada is the newest platform from Samsung and will be used in their medium range smart phones | Samsung Wave |
There are several browsers available for mobile devices.
| Browser | Rendering Engine | Available platforms |
|---|---|---|
| Iphone Safari | Webkit | Apple iPhone, iPod Touch, iPad |
| Opera Mini | Presto – implements server side compression | Java based, available for almost all platforms including iPhone |
| Opera Mobile | Presto | Symbian, Windows Mobile, Android version expected |
| Skyfire | Gecko – supports flash rendering through server side | Symbian, Windows Mobile, Android |
| Android native browser | Webkit | Android |
| Symbian native browser | Webkit | Symbian |
| BlackBerry | New webkit based engine announced | Black Berry |
| IE Mobile | Trident | Windows Mobile |
| UC Web | Gecko – server side compression | Java, Symbian |
| Firefox Fennec | Gecko | Maemo/MeeGo, Android (alpha version) |
There may be more browsers but they're not very popular and those may be derived from the native browsers just extending functionality rather than rendering (Eg: DolphinHD browser for the Android)
DesignDesigning mobile templates requires very different thinking than a regular website.
- The design should be simple. Otherwise it will require more complex CSS and HTML. That means it will take some extra time to load. Also, template matching in different browsers will become more difficult.
- Optimize for thumb – Touch screen devices are becoming too common now. So even if the design is for generic mobiles, it should be touch friendly as well.
- Use breadcrumbs – it will be easier to navigate around pages if we use the breadcrumb properly
- No popups – They are one of the most irritating things when browsing a website in mobile devices
- No flash content – There are very few mobile devices which can render flash animations properly
- Related links – It will be easier to find similar or related posts
- Use XHTML and CSS layouts. Most mobile devices can render XHTML faster. Also, make sure to validate your HTML because validation errors can affect the page rendering speed.
- Use simple and clean HTML. The more complex you make it, the more difficult it will be when doing template matching in different browsers.
- Always use 'em' units instead of 'px' units for proper scaling of layout.
- Do not rely on javascript for layout as javascript support may be limited or turned off.
- Avoid explicit 'font-size' declarations for inner elements. As far as possible, font-size should be given only to the body element. This will make inheriting easier and more predictable.
- Use the 'viewport' meta to control the default page scaling
- For phone numbers use the href=”tel:” property so that user can click (or touch) to dial that number
- Use HTML5 input types like email, url, date, number, tel to bring up proper keyboard on touch screen devices.
- Keep in mind that many mobile devices have a protected file system (Eg: iPhone) and does not allow file uploads. So, either provide alternate methods (may be send by email) or make the field optional.
- Detect phone orientation and provide suitable layouts (For eg: to show images). Phone orientation (landscape or portrait) can be easily determined using javascript (compare window width and height – if width is greater the phone is in landscape mode. If height is greater it is in portrait mode). It should be noted that, we should not rely on javascript for layout - it should be an extra feature if supported.
- Automatically switch to the mobile version or otherwise, offer a mobile friendly page based on user agent.
- Use HTML 5 video tags for showing video and do not use flash based players (MP4 video format is recommended as many devices supports this format). This may not be 100 % compatible with every mobile devices out there. But it will ensure that, the video is playable at least on modern mobile devices. Also, do offer a download option. Many mobile devices have a built in video player which can play mp4 videos. So, even if the video is not playable on the browser directly, user can download the video and playback using the application.
Well, there are many designers and programmers who optimize and test their pages in iPhone only. Please keep in mind that, Iphone may be the fastest selling smartphone in the world, but it is not the most popular platform. The BlackBerry, Android and Symbian outsells iPhone as a platform. So make sure, your site works well in Android, Symbian and BlackBerry phones – not just iPhone.
Multiple versions optimized for different devicesAnother option is to provide different versions of your site optimized for different devices. For example, a generic mobile friendly version for medium range mobile devices without touch capability and touch optimized interfaces for iPhone or other touch screen based high end devices. Also, this can be offered based on resolution. For example, for an iPad with 1024x768 resolution, offer an iPad friendly high resolution page.
A real life popular example of this is touch.facebook.com, the touch friendly mobile version of Facebook, and m.facebook.com, the generic mobile friendly page.
SEOGoogle mainly recommends the following for better indexing of a mobile site.
- Google has a separate mobile bot for indexing mobile friendly pages. So, always redirect this bot (check for user agent 'Googlebot-Mobile') to the mobile version of your site. This bot should not see the normal site.
- Use the XHTML Mobile doctype so that search engine bots can clearly identify the page as mobile friendly.
- For each page, there should be a link for the standard view of that page. It will help Google to categorize mobile pages and its corresponding standard pages.
Choosing a separate domain (or sub domain) is debatable. I think the best approach is to redirect to a different domain ( preferably “m.domain” sub domain) for mobile friendly pages for the following reasons:
- Users can clearly understand they are visiting the mobile friendly (or device friendly) version of the site and another version of the site exists.
- It will be never considered as cloaking by search engines because the urls will be different (Googlebot might consider that we're trying to do some black hat SEO if it somehow sees both normal content and mobile friendly content on the same url - If you want to go with the 'no sub domain' approach, make sure Google bot only sees your normal site version). Though the content may be repeating, it won't be considered as duplicate content because search engines can easily identify it as mobile friendly version.
- It is the common practice followed by many big sites (Eg: m.facebook.com, m.cnet.com)
- Google themselves follow this approach and it can't go wrong. (eg: m.google.com, m.orukt.com, m.youtube.com etc)
Once you’ve completed the building, the site should be tested in as many platforms as possible (preferably on real devices). But in the absence of the real deal, the following simulators are excellent substitutes:
- For iPhone, the iPhone SDK is bundled with an iPhone emulator. Unfortunately, it is only available for Mac. For Windows users, there is an unofficial simulator for testing web pages using Safari - http://labs.blackbaud.com/NetCommunity/article?artid=662
- Android emulator is available with the Andorid SDK - http://developer.android.com/sdk/
- For testing in BlackBerry, the emulator can be downloaded for each phone model. You will also need the BlackBerry MDS simulator for accessing internet. Available from http://www.blackberry.com/developers/simulators
- For testing in Opera mini, an online tester is available at http://www.opera.com/mobile/demo
That’s the basics on mobile site development.
No comments:
Post a Comment