Monday 31 January 2011

Developing for Mobile Browsers (Part 2)

Moving on.... so what next, well having decided which method we are going to choose for getting the mobile content to the device as defined in part 1. Next how and what are we going to display?

Mobile stylesheets need to alter your content for the smaller more vertical display on most smartphones. (I am going to aim this at the smartphone mobile, tablets and iPads are a slightly different kettle of fish) If your desktop web site uses multi-column layouts we need to alter this so that it is displayed in single columns. Most mobile screens will be used vertically, so horizontal space becomes even more “expensive” and mobile layouts can rarely afford more than one column of content. Next, reduce clutter throughout the page by setting display: none; on any less important elements. Finally, save additional pixels by reducing margins and padding to create a tighter layout.

Setting display:none; however does not reduce bandwidth, the content will still be downloaded it will just not be displayed. If your workforce regularly travels outside the bounds of their local mobile ISP they may be hit with much more expensive roaming data charges if they can't find a nice friendly free wifi hotspot. In the US this is probably not a problem, however in Europe where proximity to a border can cause you to be hit with 5 euros a meg charges this is more worrisomesome.

If your site uses images for buttons or navigation, consider replacing these with plain-text / CSS counterparts. If you’d like to force the browser to use the alternate text for any of your images, use this snippet (and use JavaScript to add the as-text class for img and make sure that alt-attributes are properly defined in your markup):

img.as-text { content: attr(alt); }

Given the generally imprecise nature of the "click" event it is wise to make any clickable object have a display:block; style with increased padding and perhaps a tad more margin.

If you have made use of tiny or small fonts, consider how these will look on a small screen, if the user has to constantly zoom in on your content to make it usable then this should be looked at and an increase in font size considered

Floats, ah floats oh how I loath you particularly in Mobile layouts, I use them only when I really really have to. Given the ease with which elements are zoomed into and out off floats can really screw up a nice design on a mobile device. I use the axiom that on mobile devs vertical scrolling is better than horizontal.

The good old mouseover event doesn't work on most mobile devices and given the way they are used with fingers and not mice this is fair enough So make sure to have proper definitions of :active-states. and forget about the :hover It may be useful to apply definitions from the already defined :hover states to the :active states.

Avoid drop down Nav bars and menus at all times.. these can be a nightmare to code, instead have them either visible at all times or in a slide in/out panel.

If you want some good JS that will allow you to explore the RIA I can recommend jQueryMobile : The Touch-Optimised Web Framework for iPads and Smartphones which has a growing array of functions and UI widgets that make your mobile web pages sing.

The jQuery mobile framework takes the "write less, do more" mantra to the next level. Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms

See here for details of current coverage


In the next post I will look at some of the "mobile" only things you can do with HTML schemes

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.

Sunday 30 January 2011

Oh I really really hate IE !

OK it is old news, really old news but Internet Explorer is a pus filled bag of uselessness that never seems to get any better in fact it seems to gradually get worse as time goes on.

I spent today getting a CSS / HTML framework for a wee social app I am developing and in a couple of hours I was able to get Firefox, Chrome, Opera and Safari to behave nicely with little fiddling with the CSS the way I wanted it to look just worked out of the box!.


FireFox

Chrome

Safari

Opera

And then we try IE .. 
Internet Explorer

Why? Oh Why? Oh Why?

Friday 21 January 2011

LS Buzzword Bingo - An Apology and an Update

It seems the Buzzword bingo ignited a fire that it was never intended to do (see comment stream in the last post) The cards were prepared several weeks ago before this whole brouhaha developed and at the time no PM for Notes was generally know and it just seemed "a good idea at the time" which it appears it was not.

The team behind the Bingo apologise unreservedly for any upset caused and we can assure everyone it was done without malice and in a spirit of good humour. We have removed the offending squares from all the boards and the new updated forms can be downloaded here or from the link on the previous post.

Go to the Ask the Product Managers session ask questions and have a good productive time and if you get a line well Tweet out that you did.

Wednesday 19 January 2011

LS11 Buzzword Bingo Download ** Available **

OK all you Lotusphere 11 Attendee's I have been passed this by that well known Domino personality, sage, armadillo wranger and jQuery Ninja  Noel Tostus (aka "The Loosest Nut"). He at present has little or no access to the internet as he is contemplating deep and wonderous thoughts about "the cloud" while sat on a Yak high on a mountain in Nepal.

Whilst deep in thoughts of a Lotus Live and google-ish nature he noticed that there were some phrases that lept unbiden to his mind. After due consideration he realised that these phrases had been planted there in the fertile fields of his imagination by the multitude of IBM Product managers he had come across in his daily doings in the Lotus world.

This was one of those EUREKA moments, he leapt from his yak and reached for his Mac Book Pro and sculpted for you the LS11 Product Manager Buzzword Bingo!!

01. Click here to download the PDF
02. Print off a copy for yourself and perhaps a couple of copies for your chums.
03. Have a chat to some Product Managers, attend The "Ask the Product Manager" session
ASK102 Ask the Product Managers
Speaker: Miscellaneous
SW 5-10 - Thursday  11:15am - 12:15pm
04  When one of the Phrases comes up mark it off
05. When you get a line Horizontal / Vertical / Diagonal Tweet "LS11 BuzzWord BINGO!!!!"

There are no actual prizes as such other than the admiration of your colleagues and that warm feeling of having achieved something in the greater scheme of things

Oh and ENJOY LS11! !!

**UPDATE** Download file has been changed to reduce offense

"It is a Small Lotus World" LS prize draw is open to EVERYONE not just LS11 attendees!

Well we are down to the final days before the annual bun fight in Orlando beings. As usual yours truly will be watching the goings on from afar. One of these years I shall be there to join in and bring a sense of "proper" Dominoyesmaybe chaos to the occasion.

Even though I cannot be there I want to remind folks of the "It is a small Lotus World"  draw arranged by Bruce Elgort and the lovely chaps from the London Developer Co-Op which is happening at UKLUG Nite at Lotusphere on Monday 01 Feb in Shulas  bar at 8pm.

Now even if you are not at LS11 or cannot get a ticket or are doing something else that means you cannot get to the UKLUG bash you can still buy a ticket and potentially win one of the prizes that are on offer.and have it shipped to you anywhere in the world!

There are several Lotus Themed Prizes.

First up the lads of the LDC commissioned a piece from "Army of Trolls" called "It's a Small Lotus World"
This amazing piece of art has 100's of visual links to Lotus people and companies and would be a fantastic addition to any office or study wall.



There are not 1 but 4, yes 4!!! beautifully framed prints up for grabs (2 12"x18" prints and  2 11"x14") being given to winners.

Then Mr Sametime himself Carl Tyler has manufactured some webcam clothing  which will be awarded to some lucky winners.


Incredibly useful addition to any geek's wardrobe for those Web Conferences where you really really want to be naked but can't be.

Lastly my own offerings. I have done 3 Lotus Themed drawings pictures, which I have left unframed so you can do with them as you wish.


Sgt Brill's Lonely Lotus Band
The Lands Of the Lotii Map
An "Original" UKLUG 11 Poster

Now why are we doing this? Simple - to raise some cash for the Children's Cancer Association (CCA).a charity that gives support to seriously ill children and their families and is a charity close to the hearts of Bruce and Gayle Elgort and one that I, the chaps at LDC and Carl are proud to support in what ever way we can :)

OK So how can you get your hands on these goodies?

Simple jump over to this page and make a $10 .. yes JUST $10 donation and your name will be entered in the draw. You can buy as many tickets as you want and you can enter even if you are not going to LS or UKLUG !

Alternately you can grab Matt White, Mark Myers, Julian Woodward, Carl Tyler, Bruce Elgort or the ever lovely Gayle Elgort at LS any time before Monday evening and give them your name and $10 (or more!) for a ticket to this once in a life time opportunity to grab some unique Lotus Community stuff and be the ENVY of all your colleagues.

So come on dig down behind the sofa for the lost chnage or rob your piggie banks of $10 and get a ticket now. Remember this draw is open to anyone from wherever you happen to be and it is for a really really good cause :-) and we all THANK YOU for the donation it will make a lot of difference :-)

Wednesday 5 January 2011

UKLUG 2011 - Meeting #1 Jan 5th 2011 @ 8pm - The Adventure begins

Those assembled :
Warren "Dictator of the Minifigs" Elsmore
Kitty "The Receptionator" Elsmore
Paul "Leather Clad Biker Joy Boy" Mooney
Steve "German Porn Star" McDonagh
Bill "Hoots Mon Me Bollox are cold in this Kilt" Buchan
Mike "Tickle Me Turtle" Smith
Eileen "Tigger with a clipboard" Fitzgerald
Rob "Ooops where is the floor?" Novak
Matt "Captain xPageo" White
The meeting was called to order by Mr Elsmore at 8pm who put it to the committee that the first order on the agenda was that there was no agenda. Ms Fitzgerald was so shocked that she created a list of her her toys categorised them both alphabetically by name and cross indexed them by size and weight, forced them thru a bubble sort and then threw them, in the correct order order out of her pram.

Put to the vote the committee passed a motion of no confidence in the non agenda mainly to stop Ms Fitzgerland throwing Tigger out of the pram. As Mr Buchan noted this was a health and safety issue as the aforementioned Tigger Soft Toy was many many times bigger than Paul Mooney. It was decided by a majority that instead of a non-agenda that there was an quantum agenda which conforming to Heisenberg's uncertainly principal we could know there is was but not what was on it (or vice a versa) at the same time.
Mr McDonagh drew a picture of a Schrodinger's cat in a box and this distracted Ms Fitzgerald sufficiently so that Mr Novak could hide the rest of her Toys behind a picture of David Tennant.

The first item discussed on the non-spatially apparent agenda was the "theme" for UKLUG 2011, many and varied suggestions were posited by the committee but there seems to be some life in "UKLUG 2011 : The Crayola Conference" which arose from Mr Smith who had fallen asleep in the corner so we poked with a stick to get  his input and as he rose, tousled haired from his dreams of world dominioation he muttered that we as a committee could learn a lot from crayons: some are sharp, some are pretty, some are dull, while others are bright, some have weird names, but we have to learn to live in the same box. The committee will debate this idea further as it seems like a good metaphor for collaboration and it would be a nice bit of themed (and not terribly expensive) tat for the in bag giveaway.

That lead us to the appointment of the most important role of "UKLUG Tat Tsar" (or Czarina) the usual  rounds of xTreme Rock-Paper-Scissors were not required this year as someone has "THE" pictures from ILUG 2010 and is not afraid to use them. Their appointment remains top secret because the world is not ready for pictures/video of certain lotii doing ...  errrr .... things in Marybeth's cloak.


Moving on .. UKLUG ... it was decided will have an infinite number of tracks. There will be Admin, Dev, Management, Sponsor as usual but each of these will be subdivided into a recursive array of "virtual" tracks. Mr Novak is in charge of these Virtual Tracks and has Promised that Mr Robichaux and Mr Krantz will not only have a Quickr Place ready but a Symbian, Blackberry, iPhone, Droid and WinMo app so that the worried conference attendee will not have to bend space and time to work out what session is on when.


Mr White was voted in un-opposed as "Snoopy Matty Squirrel - the web site pimp"

Mr McDonagh was tasked with ensuring that the minutes were not made up like he had for ILUG cos it can look TOO professional  (as if I would).


Ms Fitzgerald wanted it noted in the minutes that "DAVID TENNANT WAS NOT GETTING MARRIED NO! NO! NO! NO! NO! NO!". Mr Buchan provided the distraught Ms Fitzgerald with a Kleenex.

Ms Elsmore then steered the conversation back in a geekward direction with some well chosen words about accommodation near the venue, availability, room rates, proximity where all high on the list of must haves along with a decent bar and snacks available until at least 4am.

The discussion then turned to key note speaker and in a move away from a geek speakers UKLUG may be opened this year by someone who may well have once drunk in the snug of The Rovers Return in Coronation Street with Ena Sharples, however such stardom is expensive so we cannot say to much just yet.

The meeting reached the 26 minute mark and it was noted that this was a record and it would have been had the meeting ended there, it didn't. What we discussed next is so ultra sensitive that I cannot even minute it for fear of starting the Loticopalypse! Needless to say there was much ZOMG!!ing and WTF??ing and some tittering from Mr Buchan and Mr McDonagh (but they can't really help it)


Before the meeting closed it was put by Mr White that it should be mentioned that the UKLUG night is getting closer and should be "biggied up" because not only will it be a WHIZZ bang affair BUT ALSO  he, the LDC chappies and Mr McDonagh are raising some $$$'s for a damn fine charity with some works of art.
So get your hands in your pockets spend $10 and get a ticket for the draw here!

With that the meeting fell into disorder and some of us went off to do rude things with a set of cushions and yogurt..... (Ooops sorry Paul was I not meant to minute that?)

Sunday 2 January 2011

2011 a Review backwards

Casting my eye over Planetlotus i note with interest the number of reviews of 2010 that have appeared, it is the time of year for that sort of thing i know, but I have never been one for following the trend in such things, I plough my own furrow so to speak.

Being Irish and coming from a long line of Irish rogues and nere-do-wells it was deemed useful for we adult male McDonaghs to be adepts in the ancient art of Rhubarbomancy, (Which for those of you unfamiliar with the occult arts is seeing into the future using Rhubarb ... i can not go into details but it involves sugar in your belly button and coatsie's rhubarb jam recipe)

So I have cast the leaves, mashed up the stems and filled my belly button with sugar and can now give you the Review of 2011

January
Not a lot happens in January well for me anyway other than a greater than usual Lotusphere 2011 envy. Which was due to the twit stream and blogs being full of the leaked news of a new lotus web 2 gadget called The Blog And SameTime Aggregated Rss Device now affectionately known as "The Bastard". Ahh to be have been there when it was announced  but such is life.
Paul Mooney gets no taller.

February
A bit of bad code in the new UKs Electoral Commission Candidate Registration Software slips thru unit testing but more on this in May. Theo Hesselmans unveils to much applause his iBlooter his expertly crafted calendaring and scheduling app for mobiles devices linked to the Domino MonLezGetBlootered NSF
Paul Mooney gets no taller.

March

Ed Brill is awarded the Senior Exceptionally Imposing World Wide Figurehead Personage with a really tidy blog design award 2011. Ed was, as always, gracious at the award ceremony where he promised that he would continue to both be a figure head and have a tidy blog
Paul Mooney gets no taller.
April
I get a new mac book pro, and ipad, a new fireblade, new leathers, new helmet for my birthday ... which is nice ...  as is the offer of a place on the Ulster Rugby team for the Heineken Cup Final, but I couldn't really take it up SWMBO wouldn't let me, something about being to old!

Paul Mooney gets no taller.
May
The bug in the Electoral Commissions system results in a corruption of the candidates for the local Northern Ireland Elections with the Crufts Dog Show entrantts list. As a result the Mayor of Belfast is now a Pommerainian called PootsiePoo.
UKLUG in Manchester is a roaring success and at an after conference meal Rob Novak believing he was signing for some 4am chips actually signed himself Viktor and Julian up to Manchester United. Julian was last seen worrying about the end of game communal baths. Viktor and Rob play in the FA Cup Final.

Paul Mooney thinks he got taller, but there was a twist in the measuring tape
Bill Buchan wins a rosette at the Marykirk raft race, it seems he won the "best raft" prize after floatingon his back for 10 mins near the finish.

June
The month of the great podcast famine ... the release of fat electrons onto the Internet by ISPs to throttle streaming of BBC's Top Gear accidentally cause chaos as no-one can download podcasts. Stuart and Darren's TWIL and Bruce and Julian's Taking Notes (Julian is now playing left back for Man United) are hit badly and we in the yellowverse have nothing to listen to. Sales of Take That's come back CD rocket as a result

Paul Mooney gets no taller.
July
There is a heat wave everywhere except Coleraine where it snows. Everyone strips off and goes to the beach, mountains, lakes or anywhere else but their desks. As a result nothing happens
Paul Mooney gets no taller.
August
SWMBO Val gets telegrams from the Queen,Pope and all the heads of state of the G7 for staying married to me for so long and in doing so has made the world a safer place for the last 25 years.Eileen, Coatsie and I receive good news that the 2012 Olympics are allowing the Danderathon as an exhibition sport.. The Danderathon comprises going for a long walk having a cracking good meal and drinking a lot.

Paul Mooney gets no taller.
September
In a surprise move IBM shock the community by announcing Notes 8.5.4 has got a new version of Lotusscript however it transpires a "NOT" was left out a press release but it did provide the bloggers with ample grist to the mill of vent, rant and professional dribbling. It continues even now.
Paul Mooney gets no taller.
October
Java suddenly makes sense! ... No wait that was a dream i had after a particularly fine Stilton and a few glasses of port.
Paul Mooney gets no taller.
November
Twitter's new interface is unveiled ... everyone thinks it is shit but then they always do
Marybeth Raven unveils the new Notes UI which incorporates the new Temporal To Do List which takes your Future To Do's, opens a small portal in the space time continuum checks if you actually do the task or just couldn't be arsed and if the latter it silently deletes in. To Do lists sudden become REALLY useful
Paul Mooney gets no taller.
December
The mini ice age strikes again cold cold cold snow snow snow ice ice ice. This year LS12 plans not only to provide a nice backpack but special Lotus Snows Socks for the northern hemispherian lotii.... and so the slide production begins again for LS12
Paul Mooney gets no taller.

... so there you go,, that was 2011

Disqus for Domi-No-Yes-Maybe