I have been working with a web site that needs to be viewable from both desktop and mobile browsers. The site has an established CSS which works well across the current desktop browsers (even IE after a shed load of fiddling and hacking). However there are now a vast array of mobile browsers and whilst they do their best when faced with a CSS definition that was coded, tweaked and hacked for the desktop it basically just either doesn't work or the accessibility for the user goes out the window in a flurry of gestures and scrolling.
Yes you did read that right I used the "accessibility" word. It has, for good or ill, become a euphemism for "We will look at that in the next release", "There is no budget for that" and most tellingly "I am not paid to be that sort of designer".
The concept of the "Usable App" is now becoming firmly ingrained into the user. My better and ever patient half Valerie is a prime example of this. She was a late comer to the tech world but is now equipped with both net book and smart phone. She was lying on the sofa the other night downloading apps from the Android market and if she could not use the app quickly, see it's usefulness and intuitively use it then it was deleted and forgotten very very quickly. This brutal but fair criticism of mobile applications is now appearing daily inside the firewall. Users want similar ease of use of corporate apps on their mobile devices. I have been asked several times "Why can't you make it like TweetDeck*? (*insert app of choice here) and I foresee a time in the very near future when the same sentiments will be expressed about desktop apps.
So where does that leave us the developers? Geek seer and banana imitator
Tom Duff perhaps saw this very thing 3 years ago when he did a session ILUG entitled "Moving from a Plumber to a Painter". Well I am seeing my career move in that very direction. I still have the requirement to have all the perfectly lovely uber-geeky back end code
but I need to spend an equal effort enabling an interface that allows all my users to access it on whatever platform they want to use.
So I want to share what I have discovered about mobile web coding so far. I am not an expert by any stretch of the imagination (and I welcome input from anyone out there that is!) , but I have learnt a couple of tricks and in the next few posts I will run them up the flag pole and you can use or abuse them as you see fit ;-)
So onward with the first
Topic ...
Getting Started
I have to say I got stuck on this particular thorny question for some time and there appear to be 3 ways you can tailor your site for mobile access :-
1) Server-side Methods & The UA String
One approach to including mobile stylesheets involves detecting the
user agent string with a server-side agent. With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain. This server-side approach has several advantages in that it ensures compatibility and also allows the website to serve special mark-up/content to mobile users with a minimum of fuss, avoiding potentially expensive multiple downloads of style sheets.
This technique can be perfect for big websites on super servers, I have my doubts when implementing on most sites. New user agent strings come out almost daily, so keeping the UA list current is next to impossible and requires lots and lots of testing with the currently available mobile browsers. Additionally, this approach depends on the device to relay its true user agent and yet browsers have been spoofing their UA string to get around this type of detection in the past. For instance, most UA strings still start with “Mozilla” to get through the Netscape checks used in the 90's, and for several years Opera rather inexplicably pretended to be IE!
This method also implies that there are two separate applications a desktop and a mobile one, this can lead to the development of two mutually separate and unique applications rather than one application which has been optimised for particular platforms.
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 I could add this to my HTML:
<link rel="stylesheet" href="desktop.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />
Here we’ve included two stylesheets, the first
desktop.css targets desktops and laptops using the screen media type, while the second
mobile.css targets mobile devices using handheld. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both which with mobile data costs can be a download to far.
The pubic hair in the soap of this method is that most newer devices have done away with the handheld distinction altogether so that users get a fully-featured web page as opposed to what used to be duller mobile layouts. I have found that
media queries work rather well. This method allow us to target styles based on the client based on viewport width.
<link rel="stylesheet" href="mobile.css"
media="only screen and (max-device width:480px)"/>
First, define two stylesheets:
desktop.css with everything for normal browsers and
antidesktop.css to overwrite/nullify any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet
main.css which contains this code
@import url("desktop.css");
@import url("antidesktop.css") handheld;
@import url("antidesktop.css") only screen and (max-device-width:480px);
Finally, define another stylesheet
handheld.css with additional styling for mobile browsers and link them on the page like this
<link rel="stylesheet" href="main.css" media="screen"/>
<link rel="stylesheet" href="handheld.css"
media="handheld,only screen and max-device-width:480px)"/>
While this technique reaches a large market share of mobile devices, it is by no means perfect. Some mobile devices such as iPad are more than 480 pixels wide and will not work with this method. However, these larger devices arguably don’t need a condensed mobile layout. Moving forward, there will likely be more devices that don’t fit into this mold. Unfortunately, it is very difficult to future-proof mobile detection, since standards are still emerging.
Besides device detection, the media query approach also presents other issues. Mainly, media queries can only style content differently and provide no control over content delivery. For instance, a media query can be used to hide a side column’s content, but it cannot prevent that mark-up from being downloaded by your users. Again given mobile bandwidth and cost issues, this additional HTML should not simply be ignored.
3. User Selection
Considering the difficulties with mobile UA detection on the server and the pitfalls of media queries on the client it could be best simply allow the user to decide whether to view the mobile version of your website. This has the disadvantage of requiring more user interaction but it is arguably the most fool-proof method and also the easiest to accomplish.
Simply stick a button or a link that reads
Visit our mobile site which when clicked takes the user to the correctly styled mobile page. The one problem with this is
Users are stupid and will miss the button or will click it when they are using a desktop, then try to get it to work by touching their screens and then phone the help desk to tell you it doesn't work, but if you have sensible users then this could be the route for you, particularly since some will prefer a condensed layout that is optimized for their device, whereas others may prefer to access the entire website, without the restrictions of a limited mobile layout.
Those are the 3 options I have come across, there may be more and if there are please let me know :-)
In my next post on this I will look at what I think you should change when optimizing for a mobile device.
