• Vector graphics (SVG, Canvas)
• 3D Graphics (Canvas3D)
• Animation (Javascript, SMIL, CSS animation and transitions)
• Rich media (native handling of audio and video)
• Javascript at speeds close to native compiled code
• Proper layout and typography (through advances in CSS)
• Complex form handling

This all all potentially awesome stuff, but there are a lot of hurdles to overcome. I have questions.

Do plug-in technologies like Flash, Java and Silverlight become irrelevant? Or will they continue to do things that the browser alone can’t (yet) do? What are those things?

What will it take to bring these new capabilities into wider use? The likes of Webkit & Opera are already bringing much of this stuff to millions of users through their mobile phones and games consoles. Will that be enough, or will the dominant desktop browser (Internet Explorer in case you hadn’t guessed) hold them back?

Will efforts to hack support into IE by other means (e.g. Raphaël, which uses IE’s proprietary VML to fake SVG support) be a good enough stop-gap measure to help with the adoption of these technologies? Can we leverage the likes of Flash, Java and Silverlight to help out where IE is lacking? (Will cross-browser headaches ever really go away?)

Then there’s the question of developer tools. The availability of decent authoring software helped the adoption of Flash massively. Will such things appear naturally when enough people are hand-crafting these technologies, or will the tools drive adoption?

Obviously I don’t have any answers. I can’t wait to start playing with it all though.

Well, it’s brilliant except for all the cables. Right now I’ve got the power cable attached, the ipod plugged in, another wire going off to my camera, then there’s the backup drive and a pair of earphones. I’m using a portable computer but I’m tied down by all of the peripherals.

Now, imagine if you could dock your ipod to a hub over there on the shelf and have the laptop talk to it wirelessly. It’d be ace, especially if your phone, camera, GPS, external drives and all the other gubbins could sit over there with it.

The thing is, most of these things can connect via the USB ports on the side of the Mac. If only there was a wireless USB standard and products by the likes of Belkin and DLink which could do exactly that… Awesome stuff, except for the distinct lack of Mac support. Damn and blast and buggrit!

So what do I really want to see from tomorrow’s Apple Notebook event? An even faster Macbook would be nice, especially if it had Wireless USB built right in.

The presentations were fantastic this year. Particular highlights for me were those from Richard Ishida, Jon Hicks and Dan Webb. I took a lot of good stuff away from each of them.

It was also a privilege to see Molly E. Holzschlag (who recently announced her retirement from the conference circuit), Joe Clarke (who announced his retirement from Web Accessibility) and Håkon Wium Lie, who showed off the $100 Laptop.

Outside the presentation halls, it was great to catch up with old friends again and lovely to meet new people. Hopefully I’ll see you all again soon. It was only slightly weird when the bouncer at Metra told me he’d voted for the Threadless tee I was wearing.

I was beginning to feel a bit down about the whole web thing, so it’s really good to leave @media feeling enthused, inspired and full of fresh knowledge. Big thanks to everyone who made it what it was and here’s to the next one!

Name-check to some of the massive! In no particular order: Sheila, CazM, Pete, Jon & Leigh, Rich, Bahar, Boozeniges, David, Natbat, Henrik, Molly, Karl, Eatyourgreens, Gareth, Fran, Alan, Sophie, Steve, Ann and Blair. If I’ve forgotten you and you’re deeply offended, let me know ;)

I’ve come to the conclusion that a lot of default CMS installations are just plain horrible to use. They’re over-complicated, difficult and ugly. After the initial Oooh, I’ve got a shiny new toy to play with! feeling has worn off, you (and your users) just don’t want to use them. If the user doesn’t want to update the website, the website simply won’t get updated.

So what’s the answer? You can either find yourself a new CMS and rebuild the website around that, or you can make the best of what you’ve got.

Now, it’s likely that your CMS users won’t know HTML and nor will they want to. To help them out, the CMS often comes with a WYSIWYG HTML editor that tries to look, feel and work like Microsoft Word.

That’s all well and good, but they often come with absolutely everything enabled. Imagine Word with all of it’s toolbars switched on — it’s got buttons that’ll do the washing up, summon a small army and invade New Zealand or even change the colour of your text. It all adds up to make an editor that’s hard to use and intimidating to the new user. Besides, do you actually want the user to be able to change the text colour? Won’t that contravene your brand guidelines or ruin your lovely design?

Keep it simple, stupid

Now for a tangent: A lot of people love Apple products. Why? One reson is their simplicity:

The most fundamental thing about Apple … is that they’re just as smart about what they don’t do. Great products can be made more beautiful by omitting things.

(from technologyreview.com).

It’s that good old maxim again: Keep it simple, stupid. So what happens if we apply that to our HTML editor?

I started by removing absolutely all of the buttons and drop-downs. Every last one. I was left with a blank canvas on which to type. Obviously this is a bit limiting, so I slowly added back the functions I needed to do the job (and nothing more). The end result is vastly simplified; an environment that lets you focus on the content, not the features of the editor. What’s more, by stripping out some of the more advanced features, I reduced the likelihood of the editor going bananas and cranking out the sort of HTML that Word itself would be proud of *.

Now, this is obviously just one small aspect of the CMS. But apply that principle across the whole system and the end result will be simpler, easier to use and less intimidating.

Don’t stop there either. If you’re able to customise the look and feel of the interface, make it look good, too. Here’s that article again:

Attractive things work better… When you wash and wax a car, it drives better, doesn’t it? Or at least feels like it does.

(also from technologyreview.com).

If you get the interface right, it makes life easier for your users and they’ll love you for that (or at the very least, harbour less of a desire to kill you).

* Not sure what I mean? Open a document in Word, then visit File > Save as Web Page. Open the result up in your text editor of choice and — as Mr. T would say — Let me introduce you to my friend pain!

Ah. They’re all failed delivery notices. Some spamming bastard has sent out a batch of unsolicited e-mails spoofed to look like they came from someone at thinkdrastic.net.

Rest assured it wasn’t me. I hate spam as much as the rest of you.

Nope, I just get to clear up the mess afterwards. No doubt I’ll find my domain on all sorts of blacklists now. Oh great joy. I’m in such a great mood now.

Oh, happy christmas everybody.

It’s a fairly simple three-column layout. The thing is, I’ve used some funky negative margin trickery to swap the first and second columns (so that the HTML is displayed in the correct order for non-CSS user agents).

Unfortunately, IE6 renders this:

…except in some hard-to-reproduce circumstances when it gets it right.

It turned out to be a combination of bugs, which made it ever so slightly difficult to track down. First up was The IE Doubled Float-Margin Bug. Adding display: inline; to the CSS for the floated columns appeared to just make the problem worse, but was in fact needed to correct the issue.

Once that was in place, the page was only correctly rendered once I’d moused over certain links. It took me quite some time to figure out what was going on: IE was incorrectly calculating the funky margins: Instead of basing them on the width of the floated column’s parent element, it was working them out from the body element. I figured that out because the rendering was slightly different dependent on the width of the window.

The solution was to wrap yet another element around the outside, and set the width there too.

I’ve created a simple test-case that explains the solution for the anybody else that runs into the issue.

We’re currently working with one (I’m not going to name names here) which has a document management component that looks something like this:

It’s a simple tree-view that works very similarly to Windows Explorer. Believe it or not, to build that simple box they’ve used twelve nested tables, a div, a span, endless inline styles, javascript: URIs and even a made-up HTML attribute (view the full horror). Even if you don’t know HTML, you can see that it’s overkill. Apart from one on the outer-most element, it’s lacking any useful IDs or class-names for me to hook into with my style-sheet.

I know I’m a mark-up purist, but really that’s just taking the piss. Accessibility? Search-engine friendliness? Page load-time optimisation? Nope, never heard of them. It’s alright though, it does AJAX.

It’s no wonder that so many corporate web-sites have appalling mark-up when this is the state of the default output from the “enterprise level” CMS products that drive them. If web standards and best practise are going to go truly mainstream, we’re going to have to reach out to the developers of these products and nudge them in the right direction.

I’ll leave you with this exerpt from Bruce Lawson & Patrick Lauke’s talk at the multipack’s Geek in the Park event:

Legal & General… made their site accessible because they were worried about the legal risk.

And they found as side effects: 30% increase in natural search engine traffic, a significant improvement in Google rankings for all their target keywords, a 75% reduction in time for pages to load, accessible to mobile devices, their time to manage content reduced from an average of five days to half a day per job, they saved £200,000 a year on site maintenance, they got a 95% increase in visitors getting a life insurance quote (which was the purpose of that site), a 90% increase in sales online, and 100% return on investment in 12 months. And that was the side effects of making the site accessible.

Mozilla have stepped up and released Firefox 2, the latest version of their browser. A built-in spell-checker and protection against fraudulent & malicious web-sites are amongst the new features.

If you already use Firefox, the built-in update system should let you know about the download shortly (if it hasn’t already). If you aren’t you really ought to give it a go — Grab a copy from getfirefox.com.

This will be pushed out via Windows Update in the next few weeks, though it’ll be a non-crititcal as a high-priority update for now. IE7 will not install without asking first. More information on the IE Blog.

[Thanks to Andrew Disley for the tip-off]

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

I didn’t understand it at first. I just couldn’t see the point. I wasn’t thinking outside the box. It took a kick up the backside from Jeremy Keith and co to figure it out.

You see, most web-sites contain some form of useful data: Contact information, reviews, events and so on. Sometimes, it’s not even obviously structured data. Take my “About the author” snippet for example:

Olly Hodgson is a Web Designer dude from Cheltenham, England.

It tells you who I am, what I do, where I’m from and includes a link where you can find out more about me. There’s almost enough for a business card.

The thing is, no two coders will mark-up their contact information, reviews and events in quite the same way, so it’s not exactly simple to extract it and use it elsewhere. Microformats aim to change that.

Here comes the science bit

Let’s take a closer look at that snippet:

<p class="vcard">
<a href="http://thinkdrastic.net/about/" class="fn url">Olly Hodgson</a> is a <span class="title">Web Designer</span> dude from <span class="adr"><span class="locality">Cheltenham</span>, <span class="country-name">England</span></span>.
</p>

You see those class-names wrapped around the important bits of data? That’s the hCard microformat in action. Basically, it’s an HTML version of vCard, which is the industry-standard electronic business card format. In there we’ve got a name (class=“fn”), a web address (class=“url”), a job-title (class=“title”) and so on.

Run this page through Technorati’s hCard to vCard converter and hey presto! A vCard you can open in your address book software.

The real beauty is that you don’t have to change the look-and-feel of your web-site in the slightest. Just add the magical class-names to your existing mark-up and you’re done.

So what’s next?

Microformats are obviously still in their infancy, but their potential is endless. Where hCard opens up contact information, hCalendar does the same for events. hReview has the potential to completely shake up the way products are rated in the online shopping world. XOXO could enable a web-browser to offer an outline-view of your site similar to the one offered in Microsoft Word. The list goes on and on.

What’s more, while microformats offer a standardised way of extracting data from HTML, they don’t in any way lock you into writing it in a specific way. Your HTML code can look how you want it to really, as long as it includes those magical class attributes.

Go on, get out there and implement them. You know you want to.

Anyway, Derek Powazek first popularised the idea last year with his Embrace your bottom! piece. The idea is that the footer on your site can be more than the plain old boilerplate legalese.

The theory goes thus: A reader arrives at a page on your site and gets drawn in by whatever fantastic piece of content you have top and centre. They read down the page and assuming you’ve done your job right, they reach the bottom wanting more. So you use your footer to give it to them, with links to related articles and other interesting content on your site.

Sounds great, so why the argument?

Now, I’m a great fan of these things. I really couldn’t see people’s problem with them at all.

Then, whilst exploring the resources on Webcredible’s site, I found a very interesting article: Usability for older web users. One of the things I took away from it is that older users are much less likely to scroll down a page to find what they need, probably because it’s a concept novel to computer technology.

This doesn’t really change my opinion of the fat footer. It’s still a novel way of presenting related / secondary / meta-data without distracting the user from the primary content — another useful tool in the box. It simply means you need to take your target audience into account. If you’re designing for the “silver surfer” generation (and with an ageing population in the UK, you really ought to be considering them), you need to be aware that they’re less likely to use any navigation that sits “below the fold”.

Sorry Anton, I couldn’t resist ‘shopping it. Here’s the original and here’s the Flickr group with a whole lot more…

So what do they tell me?

Firstly, you lot need to buck your ideas up. Over half of you are still using Internet Explorer, you crazy fools! There’s plenty of better alternatives out there — and they’re free! Firefox and Opera are the obvious ones.

One of you is still using Internet Explorer 5. Whoever you are, you really need to upgrade.

You lot don’t like Sony, do you?

It’s no surprise to find that a lot of you have trouble with the Sony SonicStage and Connect software that came with your Walkman. The most popular search phrases are about those two, and my rants about them get by far the most traffic. Those of you still looking for an answer, might like to try the ml_sony plugin for Winamp.

Of course I won’t be writing much about them anymore, because they simply don’t work on this shiny new Mac. That’s good in some ways, but it also means that I’m left with a Walkman full of music that I can’t update. If anybody fancies writing a Mac OS-X driver…

Ahem…

Second most popular search term? “Cumfest”. Nicely done folks. I bet you’re not looking for pictures of mountain bikers in the snow either, are you?

Speaking of which, the rest of you are into your bikes. Unfortunately those of you looking for Hope Technology and 24Seven bikes aren’t going find much more than my rants about their awful web-sites.

Hmm, ranting is becoming something of a recurring theme here isn’t it? I’m quite happy-go-lucky in real life…

1. But only if you’re me.

I don’t know about you, but I thoroughly enjoyed it. It’s successfully messed up my body clock but I don’t think I can blame anyone but myself for that…

So, I arrived in Brighton on Thursday night after a surprisingly trouble-free train journey. After checking into the hotel, I wandered up the road to Heist for the pre-conference social gathering. I met some new people, caught up with the usual suspects and generally had a good time. We finished up at a random pub on the sea-front at about 3 a.m.

Just under five hours later, my alarm went off. I staggered downstairs where I self-served myself the biggest breakfast of all time, before wandering up to the Corn Exchange, venue for the conference. A bit of fresh air did me the world of good, so I was feeling surprisingly wide awake by the time I got there. I grabbed the freebies, downed some coffee and got chatting to some more of the peeps before we were called into the auditorium.

The conference itself was ace. We had talks from Jeff Barr, Simon Willison & Paul Hammond, Jeremy Keith (twice!), Aral Balkan, Derek Featherstone, Thomas Vander Wal and Jeff Veen. Various other attendees around the internet have dissected each of the sessions so I won’t go into detail.

Obviously it wasn’t all perfect. Biggest problem for me was the lack of leg-room in the auditorium. Maybe it’s just my bad knees?

The good stuff made up for that though. Aral’s “Mash my Flex up” presented Flash to me in a whole new light. Derek Featherstone came up with a series of gotchas and examples of deeply inaccessible coding on some very high profile sites (hello Google Calendar). Finally, Jeff Veen stole the show (as per usual). It was one of his inspirational tour-de-force talks, leaving most of the audience thinking “Yeah, this stuff is ace! Let’s go and build it, right now!”

Which of course we didn’t. After running off to drop off various laptops, bags and miscellaneous freebies off at numerous hotels around Brighton, we all congregated at The Terraces for the Snipperoo sponsored after-party. Alas, I missed out on the free-bar (which ran out in about ten minutes flat). That place closed somewhat earlier than billed, so a bunch of us went-a-wandering, eventually ending up in Sidewinder. Again, I finally crawled into bed shortly after 3 a.m.

Just under five hours later, my alarm went off. I staggered downstairs where I self-served myself the second-biggest breakfast of all time, before checking out and wandering up to the station. After a surprisingly trouble-free train journey, I got home to find that I’d lost my house-keys and ended up climbing in a window. Utter genius. Where did they turn up? Bottom of my wash-bag. Go figure…

Of course one of the best things about the whole conference was the backnetwork. I didn’t have to collect business cards from everybody I met. Instead I logged on, added them to my network (all done with XFN) et voila! I have their contact details. What’s more, it picks up people’s blog posts that mention dConstruct, along with any Flickr photos tagged with dconstruct06. Madgex, that was an inspired idea!

Alas I wasn’t allowed to put the Evil Edna button onto the live web-site.