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:
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.
<linkrel="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
<linkrel="stylesheet"href="main.css"media="screen"/><linkrel="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.
Who can say where the road goes, where the day goes? Only time....
Tue, Jan 29th 2013 11:41a Steve McDonagh Although I am not over in Orlando at Connect 13 this year the distance from my friends is all the more difficult with the news that one of the "Geek Bikers" , Kenneth Kjarbye from Denmark, had an fatal accident on the Annual Hog ride.
Stuck in Ireland I have only my words to reach out to Kenneth's family and my friends who are at this time in a dark place they were not expecting to be not even in their worst nightmares .. but there are no words I can think of that really do help, there ar [read] Keywords: community
199
Offical start of the Domino Charity Marathon Dander For Cash 2013
Wed, Jan 2nd 2013 5:28p Steve McDonagh The Dander Route
A while back I mentioned that there would be a reprise of the Domino Dander for Cash this coming year. It takes me great pleasure to announce that this year's Dander will be longer bigger and more challenging than the two that have preceeded it. As of today it is offical, a spreadsheet has been created and accomodation is being looked at and foot care product sales have gone through the roof in certain places around the UK and USA
When I say "we" these are the brave [read] Keywords: domino
community
email
184
Interesting thing coming in ECMAScript 6
Tue, Nov 27th 2012 4:41a Steve McDonagh Javascript always has been the poor cousin to all that whizz-bangery that happens on a server and as a result anything new coming down the pipe line kinda gets lost in the news-stream of super-duper server improvements.
I try were possible to keep up to speed with what's about to come along and it was with this in mind I I was casting my eye over Juriy Zaytsev's EMCAScript 6 compatibility chart and I started to notice green's appear. Some of the current or beta versions of the browsers are [read] Keywords: ibm
apple
application
blogger
javascript
network
properties
server
wiki
176
The new CSS3 @supports() rule is really rather cool!
Fri, Nov 23rd 2012 5:42a Steve McDonagh As all devs know , browsers can in varying degrees be a right royal pain in the arse when it comes to standards compliance and when you throw in companies like Never Upgrade a PC Till It Breaks Inc. who are still running XP with IE6, planning your super duper new web site to support them can be fraught with problems.
Most of us are used to the idea of designing a UI that degrades into a DBA-UX (Different But Acceptable User Experience) to do this we have to be able to work out exactly the su [read] Keywords: blogger
css
173
Useful i5/OS tip - Displaying Locks on an IFS Object
Thu, Nov 22nd 2012 6:59a Steve McDonagh I was plagued this week by an odd problem on one of our i5 boxes. I was trying to use the CPYFRMIMPF & CPYTOIMPF to pull in data from a new Japanese division that uses nothing but Japanese characters in their data. This of course means UTF-8 / Unicode data, which can be a bit of a pain to set up in a DB2/i5 data table (particularly if someone forgets to make fields something other than CCSID 65535!) Anyway.... I could get data off the system using the CPYTOIMPF into the IFS no problem at a [read] Keywords: blogger
db2
157
Domino Dander for Dosh 2013
Thu, Nov 15th 2012 11:31a Steve McDonagh Gentle readers some non-techie news!
The bold Eileen Fitzgerald and myself are planning a Dander For Dosh in May next year.
Eileen and were joined by the indefatigable Carl Tyler for 2012's walk along the coast between Bray and Wicklow in Ireland. We didn't pester the life out of you because we didn't get the giving organized in time for the actual walk. This year we will get our act in gear and start demanding money with menaces in January - You have been warned!
Conscious of the f [read] Keywords: domino
blogger
178
Alternates to the evil EVAL() in javascript
Sun, Nov 4th 2012 8:34a Steve McDonagh I am interupting the Design Series of post for a quick Javascript post that comes out of a question asked on the Javascript forum on LinkedIn about alternates to the eval() function in Javascript. The most pertinent reasons for not using eval() are:- 1. Security - it leaves your code open to a JS injection attack which is never a good thing 2. Debugging - no line numbers which is a PITA 3. Optimisation - as until the code to be executed is unknown, it cannot be optimized. Sadly EVAL is way t [read] Keywords: ajax
applications
blogger
dojo
javascript
linkedin
security
server
111
Principles of Design #6 - Colour Theory, The basics
Mon, Oct 15th 2012 4:32p Steve McDonagh Right I could wax long an lyrical about colours and how to use them, which I have to say probably sounds odd coming from me given that I am nearly colour blind. However I have been colour blind all my life and to me the sky is blue and grass green because that is what we are taught from when we are small.
Colour is very hard to describe to someone else without using the word "like" in fact most colour names are based around a descriptor that carries with it the meaning of the colour being [read] Keywords: blogger
Principles of Design - Unity, Getting all to work together
Wed, Sep 26th 2012 2:26p Steve McDonagh Bit of a gap in the series, a 25 mile walk in the Mournes and a couple of projects at work got in the way.. Anyway on with the series - Unity, what is it?
Well that is a hard-ish concept as it sort of suggest that "What works ... works". However it is something that all devs should think about as most of aspire to create things that work and have an identity. Alternately we may work in a company that has a well defined corporate identity framework with in which we create our applications an [read] Keywords: ldd
lotus
applications
blogger
community
css
development
twitter
