357 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
Of Bruce Elgort , (very small) Alien Abduction, OpenNTF and changing times.
Wed, Oct 2nd 2013 271
OK who turned out the lights and where is the tuna?
Thu, Sep 5th 2013 179
All change has at it's heart a moment of melancholy
Tue, Aug 27th 2013 207
Who can say where the road goes, where the day goes? Only time....
Tue, Jan 29th 2013 187
Offical start of the Domino Charity Marathon Dander For Cash 2013
Wed, Jan 2nd 2013 196
Interesting thing coming in ECMAScript 6
Tue, Nov 27th 2012 206
The new CSS3 @supports() rule is really rather cool!
Fri, Nov 23rd 2012 170
Top 10
WARNING the Domino 852* ID Vault does no play well with 850* client code stream and there is no fix!
Wed, Jul 6th 2011 417
Of Bruce Elgort , (very small) Alien Abduction, OpenNTF and changing times.
Wed, Oct 2nd 2013 271
All change has at it's heart a moment of melancholy
Tue, Aug 27th 2013 207
Interesting thing coming in ECMAScript 6
Tue, Nov 27th 2012 206
Offical start of the Domino Charity Marathon Dander For Cash 2013
Wed, Jan 2nd 2013 196
Alternates to the evil EVAL() in javascript
Sun, Nov 4th 2012 189
Who can say where the road goes, where the day goes? Only time....
Tue, Jan 29th 2013 187
OK who turned out the lights and where is the tuna?
Thu, Sep 5th 2013 179
The new CSS3 @supports() rule is really rather cool!
Fri, Nov 23rd 2012 170
Useful i5/OS tip - Displaying Locks on an IFS Object
Thu, Nov 22nd 2012 163


Developing for Mobile Browsers (Part 1)
   

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.

---------------------
http://feedproxy.google.com/~r/dominoyesmaybe/~3/C7c2vkTO9_o/developing-for-mobile-browsers-part-1.html
Jan 30, 2011
47 hits



Recent Blog Posts
271


Of Bruce Elgort , (very small) Alien Abduction, OpenNTF and changing times.
Wed, Oct 2nd 2013 10:30a   Steve McDonagh
The story of Bruce. So today is one of those rare moments of transition when something moves from one era to another. Specifically Mr Bruce Elgort is after an illustrious career at the helm of OpenNTF is standing down as chairperson ... or should that be "is standing up from the chair" because if he doesn't stand up then they will need another chair .. anyway I digress. I first met Bruce in 2007 when we were both abducted by aliens easily identifiable by the fact they are physically incap [read] Keywords: notes blackberry community openntf taking notes wiki
179


OK who turned out the lights and where is the tuna?
Thu, Sep 5th 2013 2:09p   Steve McDonagh
... and here I sit for the first time in 3 days alone with my thoughts outside Brighton railway station in glorious Autumn sunshine. ICON13 is over and real life drifts around me in ill advised shorts, double entendre tee-shirts and the occasional "kiss me quick" hat. Sitting on the low wall it occurs to me that I have been told by many people that we are afforded moments of clarity when all become clear and this wibbly wobbly continuum we call home makes perfect sense - sadly this is most def [read] Keywords: admin agent domino ilug community office
207


All change has at it's heart a moment of melancholy
Tue, Aug 27th 2013 5:22a   Steve McDonagh
.... and today more than most. For Warren Elsmore announced that ICON formerly known as UKLUGi s bowing out after 8 years of state of the art conferencing. The world it seems changes, moves on and re-aligns it's priorities in new and interesting ways yet these changes are always tinged with a moistness of eye and a faint longing to be returned to "the good old days" a moment of Kleenex requirement if you will. I am honoured to have helped with UKLUG and ILUG in a small way for several y [read] Keywords: ilug
187


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
196


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
206


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




170


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
163


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
123


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
189


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




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition