Goodbye styles and background images, hello tables (my old friend) and broken emails.

There may be all sorts of reasons behind the move, be it a reaction to Microsoft not being allowed to bundle Internet Explorer with Windows 7 or the official Microsoft view that using Word offers the most powerful email composition tools for Outlook users. This is flawed by tha fact that recipients will require Outlook to view the emails properly, and with only 7% of the market this punishes Outlook users in my opinion. I see no reason why a corporation such as Microsoft can’t allocate the resources to create an email client that provides powerful authoring and rendering of emails, using email standards.

The Email Standards Project, Campaign Monitor (I love you guys!) and Newism have initiated a campaign, http://fixoutlook.org/, to try and highlight the problems to Microsoft, so lets all hope they listen.

Alternatively the sooner I get away from having to worry about building HTML emails, the better.

Addition: the Microsoft response

Microsoft have provided a response to the campaign on their MSDN blog which expands on a number of points I raised. In the comments I pointed out that HTML is not an email standard, and Microsoft correctly state “There is no widely-recognized consensus in the industry about what subset of HTML is appropriate for use in e-mail for interoperability“. This is my view too but of course it doesn’t make my day job any easier.

I agree that many using Word to compose rich emails will find that the easiest and most powerful method – but it still relies on the recipient using a client expecting Word formatted HTML.

Finally, if Microsoft would please prove to me that “Word has always done a great job of displaying the HTML which is commonly found in e-mails around the world” I’d appreciate it, because I think that is absolute bollocks and my professional experience backs that up.

The Pyrenees are beautiful and while we knew we were in for a tough time with a few big hills, no one really expected to be staying at the bottom of a hors catégorie climb in Col du Tourmalet. Round the corner was the Col d’Aspin too which has featuredin Le Tour de France 66 times. So the climbing was awesome, tough, beautiful, painful, challenging, sweaty and required a lot of determination.

Climbing the Col du Tourmalet as soon as we got there on Saturday morning was difficult enough. Of course the next day, the riding an undulating 70km (via Lourdes and Bagneres de Bigorre) and climb the other side from the West to on Sunday was unbelievably tough.

On Monday we managed to fit 2 Cols into out ride, by riding a nice small road Col near Heches, then up the Col d’Aspin from the East. It was in between these two Cols that we discovered Richard G didn’t actually have the compact chainset that he asked for on his Specalized Roubaix S-Works. Which provided amusement, expect for the fact it just showed his strength while he beat me up most hills, or mountains!!

Tuesday was the last day so it was a straight sprint up Col d’Aspin from the West and back down again to pack up and head home.

What a fantastic few days it was and I absolutely want to do this again, only next time I want to take those hills by the scuff of the neck and keep up with the rest of the boys, if not bethe first up! Although as I was riding with 2 Ironmen, this might be more difficult  than it seems.

Molly Holzschlag on stage at FOWD 2009 - Flickr image from user: vectorfunk

The conference day was in the rather big Kensington Town Hall, which was nice, having met up with Natalie from BluHalo and the @fhoke lads the sessions got underway.

After Ryan Carson introduced the day and told us what we needed to know, there was an impromtu talk from Danny Somekh which looked at applying the agile development model to web sites. Quite interesting, if a little under prepared due to being such a late addition.

Next Jim Coudal of Coudal Partners (http://www.coudal.com/) talked about how the creative process seems to focus on taking a constant and applying variables to it, using the Booking Bands game as an example. Booking Bands says combine a band and a book to make something amusing. I’ve come up with “Oliver’s Twisted Sister” and “The Bloodhounds of the Baskervilles gang”. To do this he emphasised most would take either a band and cycle through the books you know, or vice versa. He also highlighted a short attention span isn’t necessarily a bad thing for creativity.

Next was Meagan Fisher from SimpleBits on the Mobile Web. Not really anything new, but it was interesting and good to know the leaders in web geekery are promoting and fighting for the same things as I am.

Brett Welch (of www.goodbarry.com was good) was next and was really fun. He talked about the business side of our work – the following points sticking with me:

• Talk about the clients business
• Design is a commodity
• Are you worth it?
• Try to join the dots not build from new
• Sell your expertise not a product

He had a way to remember the process, involving Busta Rhymes. Business, Understand, Strategy, Targets, Actions. The end result should be effective and repeat business.

Mark Boulton (http://www.markboulton.co.uk/) was next talking about typography for the web. He made some good points, being a very intelligent bloke:

• Typography can be frustrating on the web
• Design bridges author and reader concept ideas
• Use smart defaults and push people with the ability to influence design to make correct decisions
• Make people think they are being creative
• Use a typography cascade
• Check the Vista defaults for more fonts to use
• sIFR is a pain in the arse (my personal favourite)

The next speaker was slightly different as he had a companion to help him. Who is a guide dog. Because Robin Christopherson is completely blind.

Robin (of http://www.abilitynet.org.uk/) demonstrated the difficulties that blind and users with other disabilities find whilst using the internet. He pointe4d out that a lot of disabled users use a mobile version of a site as it is simpler, that captcha is not viable, gave some tips on making things easier for your users and was overall very impressive. This is something I will take back to the office and push for better accessibility in our sites.

Mike Kus speaking - Flickr Image by vectorfunk

Mike Kus from Carsonified was up next talking about design. His slides are up at http://www.slideshare.net/mikekus/graphic-design-the-forgotten-web-standard A good talk with a good video at the end. Not really my bag though – design and stretching design legs. One good point he made was to to harness the power of the copy you are designing for and think about the copy to inspire rather than dictate.

Sabrina Dent then spoke about the Stalinist web design model. Something that I always have trouble with. Its fine to say no all the time – but I struggle when it comes down to saying the words! Sabrina backed this up with the reasons why and so it might help me say no more often. Sabrina’s blog is at http://www.sabrinadent.com/

Finally Molly Holzschlag (www.molly.com) ran through the future of web standards, covering HTML5, XHTML, Compat mode in IE8, SVG, Canvas, RDFa, Microformats and a lot more besides. Really good and perfect for what I went to FOWD for.

I will cover the workshop content in another blog – after I have conveyed the message I took away to all the good folks at GyroHSR, hopefully changing something for the better too.

It has been a fun few weeks! Last week I went to see Velvet Revolver, the super group made up of members from Stone Temple Pilots, Guns ‘n’ Roses and Wasted Youth, and afterwards in the private bar met Slash and Scott Weiland. Both seemed bloody nice chaps, although Weiland appeared to be the only person in the UK allowed to smoke indoors at the gig. Now that’s power.

I was extremely disappointed that while writing this I found that Velvet Revolver have parted company with Scott Weiland, Slash citing his “increasingly erratic behaviour” as the reason! Well I never!

Slash was a bloody nice chap too. And my f**king God was he good on guitar! Unbelievable in fact.

The Friday after the gig was my first sponsorship deadline, which I just about reached, with the rest on its way. Great news – I am definitely cycling to Amsterdam and Brussels in June then!! Hoorah! Speaking of which I did my first training ride on Saturday – only 20 miles, but it’s a start. This weekend I will do 40 miles and then the following weekend I will try all the way to Deal to see mother and Grandad!

The final update is possibly the best bit – for me anyway. Up there with meeting Slash! I was in .net magazine! Now it was only readers sites, but the site Griff designed for www.challengebee.org, that I built over a couple of nights a few months ago is one of the sites featured on page 18. Nice screen shot, blurb that I wrote and picture of me and the Griff. I am proud! Next up is writing a decent article for the mag, which I am sure I could do!! I’ll scan and upload to this post asap! Probably tomorrow!

The above is an example code – use it and I’ll know when you do because it is a text message to me, telling me how modest (awesome) I am. All automated.

The programmes I installed to test the QR codes on my Windows Mobile Orange SPV E650 (aka the HTC S710) were the i-nigma reader and the Quickmark reader both of which work really well if the QR is large enough (anything over an inch in print was fine – screen worked better but that defeats the object!).

The QR code can include all manner of information – popular uses I have seen include sending direct to mobile web pages, auto dialling phone numbers, short texts and even full sms messages with number and message! If you want your own QR codes you can create them for non-commercial use on the kaywa web site. hey also have an excellent reader on there, just one not compatible with my phone at time of writing.

So I will be pushing for these codes to be used more in my line of work and looking out for them and using them when I see them. Apparently current uses include on “Lost” posters, on the labels of England shirts and The Sun ran a piece on QR codes when they printed a code in the tabloid back in December.

Now I’m off to make QR code t-shirts – and you won’t know what they say unless you’re as cool as me and my phone!QR code

That isn’t the case anymore because I have fallen in love with Ubuntu! It has been an absolute dream to use, the GUI is beautiful and the ease of use is much better than Windows.

Installing I had some problems with v7.10 however, where it just seemed to hang after showing the Ubuntu progress bar when trying to load the install. However I thought I would try v6.06 as a last resort – it worked. When installing I loved the ease of set up, Microsoft should take a leaf out of the Linux book (or maybe a full chapter!). The installation did collapse at first attempt (at some point during the Open Office install) but following a retry I was away.

Setting up my wireless network was a little easier than Windows, not completely trouble free however. I could connect to my wireless network fine once I found how to choose the network to connect to, but I still couldn’t load any web pages by domain name, only by IP address. A little investigation and I found that Ubuntu had set the DNS to be my router. Once I had changed that to my ISP DNS servers I was cooking on gas.

I have yet to really try to use the machine for any serious work, or really get stuck into any programmes or terminal exploration – but I’ll let you know when I do.

This blog was brought to you by an Acer Travelmate 290 running Ubuntu 6.06.

However the client dropped a massive bomb shell when it was revealed that they (as a large corporate company) use Lotus Notes 5 as their primary email client. This is bad.

Not only does this mean we have to output a huge amount of work but it also means that this work must be absolutely indestructible, unbreakable code.

If you look at the following examples of emails displayed between Lotus Notes and Microsoft Outlook, you can see how perfectly valid and working emails can be slaughtered left, right and center by the Lotus Notes HTML rendering engine.

Sony email which uses styles quite heavily. While this means that the email will not display as designed in email clients that do not support CSS (Gmail, Notes amongst others) at least it will degrade gracefully.

This Hugo Boss email doesn’t use any style for any layout or formatting byut still breaks quite badly.

My preferred method would be that of Sony, or even plain text emails – which a recent .net podcast (episode 19) said most people surveyed would prefer to receive. Unfortunately the limited technical experience of marketing staff that have to sign off these emails mean that we have to make the emails work in Notes if possible, even if the actual recipients receiving the email in Notes is minimal.

There are a number of methods that can be used to make sure you emails display as planned in Lotus Notes and hopefully the trials and tribulations I have endured for the past year can be kept to a minimum for others by following these rules.

1. NO BACKGROUND IMAGES

   They just don’t work. This doesn’t just apply to Notes, but also includes other well know email clients. This should be a general rule for all HTML email builds.

2. ALWAYS SET OUT TABLE COLUMNS FIRST

   No matter whether widths are set on the

   tags themselves, it has always helped me to have an empty row right at the start of every single table, with 1px in height spacer images defining the table cell widths.

3. NEVER EVER USE ROWSPAN

   Now I don’t know why this doesn’t work, but it proved to be a thorn in my design for a long time. I find that the only way to guarantee the reliable display or a table exactly as it should be is to ignore that rowspan even exists and insert tds in every row wherever required.

4. DON’T SPLIT IMAGES HORIZONTALLY

   If you have a wide image, don’t split it across a row. This often results in extra space for no apparent reason, stretching the table row containing the images. Even if you have distinctly separate images, if you can get away with just using one full row width image then do it. And fight to keep it that way.

   If you absolutely have to split images horizontally, each must be in its own table cell, because even with absolutely no whitespace in the code, Lotus adds a single character space between each image.

5. USE NO STYLES

   In my emails, I usually set text size at 11px or 12px using a style in my font tags to get around a link and copy size bug in hotmail. However Lotus Notes ignores this, and ALL other styles. So use no margins, padding font declarations, in fact use no styles at all. Go back to the early 90s, when CSS didn’t even exist!

   Since I still like to make sure the link and surrounding copy are the same size in hotmail, I still define font size, however use 13px with a size="2" back up in the font tag (or 10px and size="1").

6. DO NOT USE P TAGS

   Lotus Notes doesn’t recognise the margins that should apply between p tags, so I find that declaring a font tag then using spacers to separate copy blocks, as follows:

   <font face="arial, verdana, sans-serif" size="2" color="#333333" style="font-size: 13px;">
Copy paragraph 1.
<br /><img src="../images/1x1spacer.gif" width="1" height="15" alt="" />
Copy paragraph 2, and so on throughout.
<br /><img src="../images/1x1spacer.gif" width="1" height="15" alt="" />
</font>


I’m sure there are more techniques and ways to make HTML emails work in all email clients, but I find that the above guidelines help me work more efficiently by decreasing the time spent on fixing Lotus Notes issues (especially when Notes development is a requirement), in fact most are so reliable that I have also started using the above rules in all emails. You never know, they might help when it comes to developing emails for Microsoft Outlook 2007, when Word is used for parsing HTML emails.

So you have the web developer toolbar, have solved all issues in Firefox, only to find IE doesn’t do the same.

What if you could click a bookmarked site, load a piece of javascript, then you simply click on any element on a page to display the element, id, class, hierarchy, positioning, border, margin and padding values in a pretty interface? Well sonny, with X-Ray (from http://westciv.com) you can!

The best bit is that it even works in IE, so you can troubleshoot any box model or double margin problems easily! It’s an excellent idea, and if I hadn’t already voted for jQuery, I would have voted for it in the innovation category of the .net magazine awards. Maybe you could vote in my stead!

My friend and colleague sent me a link to this PC Mag article…

Oh dear! What I hope this does not mean is that I will keep working hard at developing my favascript, Flash, PHP ekcetera skills only to find that the job market is saturated with people fallen from grace in respective bust companies or that the purchasers and users of such online things are put off completely.

Personally I think that there will always be failures in any kind of business environment and t’internet is no different, however the current trend of jumping on the latest band wagon is dangerous and will add to “Bubble 2.0″. Creating the next social networking site, or the next video streaming site and investing everything into it is always going to be a big mistake – I just think that there would be less of an impact if the burst does happen if some people sat back and went “Actually they did it well enough and I won’t be able to compete.”

Of course there are the services that should be removed and destroyed – things like mySpace that is a total waste of time, space and effort. Bad code breeding bad designs, thousands of bands you’ve never heard of spamming you, hundreds of friends (I don’t think I have 1,00 friends anyway – nevermind that use myspace!), bored people bombarding you with pointless things (can be applied to facebook as well!) and owned by an evil (alledgedly) corporate giant.

Rant over.

So this weekend I had a nice weekend picnic-ing, then watched Transformers at the cinema. Sunday was the usual Sunday League training then couple of pints. Excellent weather both days, but I did have a couple of Transformers opinions I need to get off ny chest.

Firstly Bumble Bee wasn’t a Beetle. And to wind us up he’s parked nest to a battered Beetle in the car showroom who he dents with his door! OK, so the new Camero is fine and Bumble Bee wasn’t always a Beetle (just the best one was!). But changing at will between old Camero and new wasn’t right! OK I wan’t the biggest fan originally or of the comic but surely if the Transformers could change to anything they scan or touch then they could have all been F16s! Same with that anoying little radio/mobile phone thing!!

Secondly why was Optimus Prime a big rig instead of a nice flat fronted truck as I remember him!! I wish they’d left it as was, however I must say the new Hasbro Optimus Prime toy looks pretty impressive.

But apart from that the film was awesome and I enjoyed it a lot. The moments I really enjoyed were most of the Autobot lines, Optimus Prime getting his sword out and the whole fight sequences. I’ll look forward to the second film!!

Work wise I’ve had an interesting week, something came up, made work interesting, I made what I hope will be the right decision and that I can help make some interesting changes. That’s about all I’ll say for the minute! This wek will mostly be spent working out ways to use jQuery to “add value” to upcoming jobs. And learning AJAX more so I don’t get stuck with combining 2 different ajaxy implementations on one page!

And finally – Luke Young, Jonathan Woodgate, Tuncay Sanli and Alan Smith (hopefully) aint a bad list of signings for Boro this summer. Let’s get back in Europe boys!!