Image may be NSFW.
Clik here to view.
Mobile web browsers and SmartPhones, such as the iPhone, are rapidly gaining in popularity and the question of how to accommodate user accessing the web via Mobile phones and PDAs has become of interest to many organizations and developers.
Constrained Devices
The standard desktop monitor size these days varies from 800×600 to 2560×2048 pixels, with the average websites today typically being designed for a minimum screen size of 1024×768. Mobile web browsers on the other hand generally have screen sizes of 480×320 pixels or less.
When it comes to resolution, typical monitors have screen resolutions ranging from 67 to 130 pixels per inch (ppi), with typical modern LCD monitors having resolutions of around 96 ppi. Smartphones, typically have much higher resolution – he resolution of the iPhone, for example, is 163 ppi.
In other words a standard mobile web browser typically has one fifth the screen real-estate but about 50% better resolution then the typical desktop monitor.
Furthermore, users sitting in front of a desktop or browsing from a laptop, generally interact with the page using his keyboard and a pointing device such as a mouse or touchpad. Smarthpone users typically use stylus or their fingers on a touch sensitive screen or miniature keyboard.
Also, most mobile devices are less powerful, in terms or memory and processing power then your average desktop or laptop and sites relying heavily on client side processing might be disadvantaged. Bandwidth might also be an issue in some cases.
Many Browsers?
While the desktop market is dominated by Internet Explorer Firefox and Safari, the mobile browser market, at least until recently appeared more fragmented. However, the leaders are quickly emerging and appear to be Opera, Safari Mobile. With Safari Mobile’s popularity being driven by the popularity of the iPhone
Nokia, is also popular choice for mobile browsing. However, I do believe Nokia’s browsers is based on the same WebKit an open source application framework that the Safari Mobile browser is based on
So for my money, unless there was definitive reason for doing otherwise, when designing for mobile device, I would simply concentrate on designing for Mobile Safari.
Optimising Existing Sites
There essentially three approaches that can be taken when adapting a site for mobile browsers, the first of which is to simply optimise and standardize the existing site.
After all, the foundation of every good web site is a good HTML structure that clearly separates content, style and behavior. A well designed site that follows web standards and best practices will stand a reasonable chance of at least providing an acceptable mobile browsing experience, especially on newer devices such as the iPhone. The focus in this approach should be on the use of graceful degradation and progressive enhancement techniques for CSS and JavaScript, simple navigation and the limitation of purely decorative elements. If you’re on a budget, and don’t need to be a cutting edge iPhone content provider, this might well all that is required.
in the case of services or sites aimed primarily at mobile users, it may be the standard desktop site that is not actually required.
Dedicated Mobile Sites
However, in many cases optimizing and existing site, while a worthwhile exercise it its own right, may simply not cut the mustard. Because, lets face it, the increasing complexity of most sites, means that many web pages simply contain too much information and have too complex layout to be workable on a small screen.
For those on the cutting edge, flush with funds and brimming with enthusiasm,
In such case, developing a separate site dedicated to mobile users will guarantee the best result. It will allow developers and content provider to truly aim both styling and content at the mobile browser. Specific functionality such as location based services (LBS) and the tel: protocol, which can cause a mobile phone to dial a phone number when a link is clicked on, can also be taken advantage of.
To easily identify the mobile version of a site is it possible to register a .mobi domain name. An easier choice however, is to use a subdomain, such as m.SiteName.com or mobile.SiteName.com instead. The Economists mobile web site for example can be found at m.economist.com. Another alternative is to create a sub directory, such as www.SiteName.com/mobile. Direction to the mobile version of the device can be achieved via client side user agent sniffing or server-side capability detection. (see
Obviously, a dedicated mobile site will require maintaining two sites, which does sound like a significant overheard. However, in reality this may be less of an overhead than it first appears. Many web sites these days are based on content stored in a database. And hence, provide it is the content, rather then the interface itself which undergoes frequent updating, a second mobile device interface, once it has been create created, will not require any continued maintenance.
In fact, in such cases, the dedicated mobile site solutions starts looking almost like the third option for implementing a mobile website: One site, different views.
One Site, different Views
Often touted as one of the simplest and most effective method of designing sites for viewing via different devices, is the use of different style sheets.
CSS 2.1 / HTML 4.0 offer a number of methodologies of dealing with different media types including handheld devices. The @media rule allows application of different rules for different media within the same style sheet.
[sourcecode language='css']@media screen {
body { font-size: 10pt }
}
@media handheld {
body { font-size: 13px }
}[/sourcecode]
The @import rule allows importing of style rules from other style sheets.
[sourcecode language='css']@import url(”webtv.css”) tv;[/sourcecode]
The HTML link element allows setting of a media attribute to specify the target media type for the link.
[sourcecode language='html']
CSS 3 will add another method called Media Queries.
As always, universal and consistent browser support can not be guaranteed, and cross-browser testing will be a necessity.
For data driven sites, where the page itself is simply a template for data drawn from a database or other files, I can not see much difference between the development of this method and the previous one.
Nuts and bolts: A practical example
The images bellow shows, as an example, a ScrewTurn driven wiki site that is to be made available to smartphone users. Followed by a mockup of a potential smartphone compatible layout.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
ScrewTurn is a .Net wiki engine and does support theming for handheld devices through inclusion of a Handheld_Styles.css within the Themes\Default\ directory. This style sheet would then be used to manipulate the display of the page elements that are defined within the MasterPage.master page. Specifically, the CSS z-index property could be used to stack SidebarDiv and MainDiv.
Clicking on the Content tab within the menu would alter the value of the z-index, effectively re-stacking the layers. Similarly, clicking a topic within the tree menu, would not only load the appropriate content in the MainDiv but also bring the MainDiv to the top.
Obviously, implementing the above solution would require some DHTML coding to implant the automatic changes to the z-index value. However, when running in standard screen mode, the SidebarDiv and MainDiv would not be overlapping, and hence any changes to the z-index value should go unnoticed.
Resources and References
- World Wide Web Consortium (W3C) mobileOK Checker will check a site’s level of mobile-friendliness.
- The World Wide Web Consortium (W3C) Mobile Web Best Practices 1.0 lists 60 points to consider when delivering Web content to mobile devices.
- Chris Pederick’s User Agent Switcher 0.7 allows access to sites (and run style sheets) that are restrict access based on the browser being used.
- The iPhone Simulator allows a site to be viewed inside and iPhone “skin”. Works best when used in conjunction with User Agent Switcher
- Coding for the mobile web, Mar 08.
- A List Apart: Put Your Content in My Pocket, Aug 08.
- Tips to design your site for mobile devices, Jul 08.
And here are a couple of other points I have come across but not had a chance to look into
- Safari Book Store, a subscription-based media-download service, have developed completely new websites and user interfaces for their customers on the go.
- WordPress has a free WordPress plugin to develop mobile sites