Web Design and Build

New HTML5 elements and IE8 Last updated:29 October 2010

I was reading a discussion on a forum last week about HTML5, and thought I’d have a quick mess around with it to see what happened with various browsers. I created a test page using the new tags provided by HTML5 (<header>, <footer> etc.).

This page doesn’t display correctly in any browser that I tested (FF3, IE6/7/8, Chrome2, Safari 4, Opera 9.63 or even Opera 10 beta2), although FF, Chrome, Safari and Opera all display the <aside> element correctly for some reason.

I then applied display:block to the css for all the new elements and tried again here.

Slightly to my surprise the page looks fine in FF, Opera , Chrome and Safari. Slightly less surprisingly, it fails horribly in IE6 and IE7. The biggest surprise for me was that it looks just as bad in IE8. I suspect, on reflection, that the browsers that worked did so because of their treatment of unrecognised html elements, rather than their support for the new HTML5 elements.

HTML5_IE8HTML5_Opera

Here’s what it looks like in IE8 on the left (pretty much the same as in IE7 and IE6) and here’s how it should look in Opera 9 on the right. I have to say I expected it to be OK in IE8, given that’s the pretty much the newest browser I tested with. So much for HTML5 support in IE8…

Conclusion: being able to use even the simpler features of HTML5 looks a long way off…

Stop WordPress adding <br/> tags Last updated:29 October 2010

Been swearing at WordPress this afternoon…

I’ve been trying to transfer an html form, which I had working perfectly on a static html page, onto a WordPress page. WordPress insisted on adding multiple <br/> tags where I didn’t want them. Mutter.

Eventually, after much searching, I identified a parameter within wp-includes/formatting.php, which allows you to disable this irritating feature. If you open formatting.php and find the function wpautop you’ll see this:

function wpautop($pee, $br = 1)

Change this to:

function wpautop($pee, $br = 0)

Save the file and publish it back to your server and that’s it. Works fine in WP2.8.

Note: WP 2.8.3 overwrites formatting.php so this change needs redoing.

Update 24 October 2010

Fed up with repeatedly doing this I’ve developed a WordPress plugin to address the issue. Give it a try and let me know if it works for you.

Paypal Website Payments Standard in the UK Last updated:29 October 2010

I was messing about with the Paypal “Website Payments Standard” yesterday, looking at a possible small scale trial on a site. Really easy to set up, but then I tried to do two more things, specifically, restrict orders to “home country” customers only, and calculate postage by weight.

After a lot of reading of help files and Googling, I eventually find that both these options are only supported for US customers – the “shipping by weight” despite it being all over the help pages and even giving you the option on screen – which then has no effect.

Thanks Paypal…

Website design – lessons learned Last updated:29 October 2010

I’ve just finished managing a web design project and was reflecting on lessons learned. Three big ones for me:

  • On this project we worked with an external design agency to develop the information architecture, user personas and user journeys. I was rather sceptical about this approach in this case as some work had already been done, but am now a convert to the cause. This work actually made a critical difference between a website that would have been just OK and one that’s really good.
  • We used a lot of mockups and clickable wireframes, and they really served to bring the project to life, and instil confidence in our project stakeholders. Even more true on a web project because it’s so visual. One prototype page is worth many Powerpoint slides.
  • As part of the design we did some “quick and dirty” user testing, where we rounded up a few potential users and sat them in front of a working mockup. This was useful for the design, but had the additional effect of adding a huge amount of weight to the design decisions, to the extent that these were almost never questioned subsequently – which I’m pretty sure would have happened without the testing.

Useful lessons for next time.

A glimpse into the future… Last updated:29 October 2010

I’ve been writing a little application over the last week for my wife’s website to do some behind the scenes stuff maintaining a shop inventory. Nothing excessively complicated.

What’s been different however is that since these aren’t pages intended (or even accessible) for public consumption, I’ve been able to write them solely for Firefox3 – and haven’t had to test them in anything else. Consequently, no worries about what IE6 will do to my nice layout. No worries about unsupported css. Very refreshing.

A little window into the future (hopefully) on what web design would be like if all browsers were standards compliant.