the 200ok weblog

Coffee Theory

2009-04-27T08:00:00.001+10:00

Ask web developers about the tools they use, and it’s likely they’ll start talking about hardware, software and web applications. That’s understandable, but it’s not the whole picture.

I believe things like software pale in comparison with the most powerful tool available: coffee.

I'm not talking about caffeine. What I'm talking about is the power of informal work time. It’s wrapped up in what I call Coffee Theory, which in short form is this:

Large organisations only survive because people drink coffee.

It’s all about people

When I think back over the projects I’ve worked on, technology was often the least of our problems. Before we even started coding, there were people to convince, requirements to gather and budgets to get approved.

Sure, bugs can be nasty and frustrating – but they can be fixed. You’re smart, you can Debug Stuff. But you can’t debug people; and if you hit a big enough problem with people you might not even get to the coding stage.

People can baulk at an idea, people can play politics and ultimately people can bring your entire project to a halt. One thing is for sure – you can’t solve people problems by hacking code.

The good news is a lot of people problems are communication problems, and coffee can help you fix those.

Communication Problems

Businesses generate a huge amount of data, but they struggle getting the right information to the right people.

The problem starts with simple overload – there’s just too much email and documentation for any one person to read. Attempts to filter information have mixed success, since the gatekeepers may not always know what’s relevant to everyone else.

If the organisation is big enough there can be entire teams who do similar work, but have no effective lines of communication. Maybe they only ever deal with each other when something has already gone wrong – and they’re still annoyed about what happened last time…

At best, you’re probably missing great opportunities for collaboration, knowledge sharing and just simply meeting new people.

At worst, you can have teams working at cross purposes, duplicating effort and having arguments that are mostly historical. Good things like “what’s the best solution” get lost in the noise. The organisation has ended up with internal disconnection.

So how does coffee help?

The morning coffee break does not respect hierarchy, structure or politics. When you go for coffee, you can and will meet everyone from the developer who sits in the next cubicle, right up to the CEO.

In the corporate environment, people who otherwise wouldn’t talk to each other can still meet over coffee. Organisational disconnects are repaired by the humans in the system, since they are social beings who get together and chat about Stuff™.

Without coffee, without informality, organisations would grind to a halt. Think about it: if you waited to be told everything through official channels, do you think you’d ever get anything done? Or have you just learned who to ask when you need information?

Smart managers recognise this and encourage their staff to socialise a little at work. They know that some of the best ideas happen between the discussions about sport, politics and the weather.

People are often more attentive and open to discussion during the coffee run – you can actually get their undivided attention, away from the interruptions of the office. It can be a very smart and efficient way to brainstorm a problem.

So coffee is the reason that large organisations survive. If individuals are smart about it, coffee can also be a way for them to thrive and have fun within these bureaucratic behemoths.

Extend your social network

One of the best things I’ve ever learned about work life is that “networking” is just a fancy word for being sociable. So if you’re worried about taking some time out of your day for the coffee run, remember that keeping in touch with co-workers is an important part of work life.

Walk to the coffee shop and get to know the people you work with; then get to know the people they work with. Keep doing this and you’ll have contacts all over the organisation, which turns a cold call into a friendly chat. When you need information you’ll have friendly faces to go to – and they’ll come to you when they need your expertise.

Even if you’re not a hard-edged, career-driven type, being friendly with people makes work life infinitely more enjoyable. It’s not cynical, it’s human!

Don’t get carried away…

With all networking activities there’s a danger of acting outside your character because You Are Networking And This Is Serious Business. I think the best way to avoid this is to just relax and be yourself.

Be friendly, be genuine and let the passion for your work speak for itself. Pay attention to the things other people are passionate about – even if you don’t share their focus, understanding it will help you work together.

Use coffee as a way to get to know people, but don’t bulldoze conversations into an agenda. You should find opportunities to pitch your ideas to the right people, but let those moments arrive naturally.

You should also be a little diplomatic – be open, discuss whatever comes up, but be just a little careful. Remember, if you’re about to tell a senior manager how unbelievably bad a system is… they might have been the one who selected the system in the first place. So be nice.

The coffee shop is not a boardroom!

Beyond the random gathering of the coffee run, you can use coffee as a way to break down barriers with specific people.

If you’ve had a string of meetings with someone and still find yourselves at an impasse, try meeting in a coffee shop instead of the office. The change of pace can help find a new approach, or prompt people to explain underlying issues they didn’t think to discuss in meetings.

People relax in coffee shops – they do not relax in boardrooms. Take people out of strict working environments, and you may find “impossible” problems can be sorted out in half an hour over a coffee.

Coffee is informal, it's friendly and it's personal. It shows that you're interested in the person as well as the business card. It may not work on everyone, but you might be surprised who it does work on.

“But I don’t like coffee…”

Great, or maybe we could go somewhere and just eat a bunch of caramels. When you think about it, it’s just as arbitrary as drinking coffee.
– Will, Good Will Hunting.

Coffee theory does not strictly require coffee. Coffee is just a very common social ritual which is accepted in most offices. In your office it could be tea, ice cream or indeed eating a bunch of caramels.

The actual thing doesn’t matter. Realistically you should just watch out for informal moments which offer an opportunity to step outside the normal, staid office dynamic.

What about beer?

Sure, beer is another social lubricant. But unlike coffee, it does not sharpen your ability to pitch your ideas. Alcohol is also commonly consumed at the end of the week. So although on Friday night someone was totally convinced you're on to something, by the time Monday rolls around they’ve probably forgotten the conversation entirely.

Besides that, not everyone drinks beer. But most people do enjoy some form of break during the work day. They also tend to do it every day, so you don’t have to wait another week for the pub night to roll around.

So beer has its place; but realistically while you’re likely to achieve general social bonding between workmates—and yes that’s a good thing—you’re far less likely to get any real work done.

To the coffee shop!

Regardless of your role, at some point the human factor is going to be the biggest hurdle you have between you and your goals.

The challenge may be selling an idea; resolving a dispute; getting people to work together; or finding new ways to do old tasks.

Whatever it is, sometimes the office will not hold the answer. Meetings, email and phone calls can’t fix everything. Sometimes you need to get people out of the workplace and into a different mindset – and going for a coffee is an ideal way to make that happen.

So that’s Coffee Theory in a nutshell. It’s about bridging the gaps left in corporate communications, so you can get people together and get things done. It’s about embracing the human side of work life; and accepting that informal work time can be the most productive time of the day.

It’s worked for me so far, I hope it works for you too.

Now, who’s up for a coffee?

proudly naked

2009-04-08T23:09:00.004+10:00

It's CSS Naked Day, is your markup showing?

There's a certain purity to seeing content with absolutely no CSS applied. Raw structure, a focus what the page is really about. It pares away all possible distraction, shows the heirarchy of content. Plus, it kind of reminds me of the early days when my net access was text-only ;) (vt100, dialup).

Running good semantic HTML without any CSS is perhaps the most levelling thing you can do - everyone can use it. Desktop browsers, mobiles, Lynx, screen readers... the Googlebot is pretty big on text, too.

Good structural markup is the foundation for a solid, flexible and maintainable website. You should always pay attention to your markup!

putting ie6 out to pasture

2009-03-23T01:32:00.002+11:00

Many things live on past their use-by date, but few have shown the zombie-like tenacity of IE6. It has remained animated, chewing on our brains long after it should have stopped twitching.

We've all felt the pain of building for IE6 alongside modern browsers. So, it's glorious to be able to say this - 2009 is the year we get rid of IE6. Say it with me, people!

We know it's the right decision. IE6 is obsolete, insecure and takes a disproportionate amount of developer time. It doesn't make any sense to support IE6 when times are tough and budgets are short.

No more waiting. I can feel it in the very bones of this industry - can't you?

It's not just funny slogans and therapeutic IE6 hate sites, either. We're talking about the reality of how we actually get this browser off our support lists.

why now?

IE6 is long overdue for the chop, but the release of IE8 was the last piece of the puzzle.

IE7 wasn't it - there were too many locked down corporate environments, too many intranets that only work in IE6. Too many corporate policies about running one version behind the latest, for reasons like stability and cost.

IE6 has hung on, retaining a truly astounding market share - even now it hangs on to roughly 18% depending on your source. Much as we hate building for it, we had to accept that people were using it.

But now, IE8 is out. That puts IE6 two entire versions behind; and companies with IE6-only services have had two years to prepare for the inevitable. Microsoft's recommendation is to upgrade:

Customers who have applications for Internet Explorer 6 should visit http://msdn.microsoft.com/iecompat for the latest guidance on migrating from Internet Explorer 6 to Internet Explorer 7 and Internet Explorer 8.
Internet Explorer 8 Business FAQ (PDF)

IE6 is just too old and outdated to be part of a responsible corporate operating environment. Similarly, home users with IE6 should upgrade to something more secure even if they don't care about the new features. There just aren't any good arguments for keeping IE6.

just how old is ie6, again?

IE6 was released in August 2001. Its competitors were Netscape 6 and Opera 6. Firefox and Safari weren't even out when IE6 was released.

IE6 is older than iPods, Canon dSLRs and BlackBerry smartphones (the Sony-Ericsson P800 was the hot smartphone at the time). It's older than MySpace and YouTube. Web 2.0 wasn't even a buzzword yet...

We are talking about a browser that simply wasn't designed for the modern web. IE sat stagnant for more than five years while other browsers improved standards compliance, speed, security and features.

The real kicker is that since Microsoft was shocked back into IE development, they have released two major versions of the product. They make no bones about whether IE6 should still be in use:

Internet Explorer 6 was designed for the Web as it was in 2001. In the last 8 years the Web has changed and evolved. ... Internet Explorer 8 provides the latest features to help users get work done more quickly, and browse the Web more safely and more reliably.

Internet Explorer 8 Business FAQ (PDF)

That's about as blunt as corporations get about their own product. Microsoft can't really push much harder - it's stuck with a long support plan for IE6 because it came bundled with several operating systems.

What this all means it that we should switch from "waiting for IE6 to go away" mode, to "giving it a push out the door" mode.

options for "not supporting" ie6

So what does it actually mean to "not support" IE6?

Unlike other decrepit browsers, IE6 is still clinging to a market share large enough that few sites can dismiss it outright. For some lucky sites the share is low enough to aggressively push it out, but for the rest of us we need some interim options.

In the world of graded browser support, IE6 still manages to be its own category.

So, here are some options:

No change: continue full support. If you are stuck with this, make sure your timelines and maintenance budget are increased - the site owner needs to be aware of the costs.
Reduced bugfixing: aim for full support, but when you hit an IE6 bug you fix it the simplest way. That usually means IE6 will look a bit different - a few px here and there - but you can save days of development time.
Progressive enhancement: use advanced CSS and provide a premium experience for better browsers. So what if IE6 gets square corners instead of round ones, or loses a text shadow? It doesn't matter so long as the site is still functional in IE6.
Soft push: keep supporting IE6, but show a low-key message on your site encouraging people to upgrade (or contact their IT department requesting an upgrade).
Aggressive push: actively tell your users not to use IE6; stop serving stylesheets to IE6; etc. Some high-profile sites like Facebook are going down this path, but right now it's not a viable option for all sites.

Chances are that your roadmap will move through these phases, for example a combination of reduced bugfixing and progressive enhancement is likely to fit a lot of mainstream sites.

arguments and questions

If you take this issue to your boss, or to your clients, it's not hard to anticipate a few questions coming up...

Don't you support other older browsers?: Not two entire versions behind and not when the browser in question can take as long to support as all the others put together.
Don't we just have a percentage threshold for browser support? Don't we have to wait for IE6's share to drop to nothing?: Browser support really isn't quite that simple. In any case IE6 has an artificially inflated share, despite being the worst browser on the market. It has to be pushed out.
I can't just take your word that IE6 is bad...: Ok... Microsoft evangelists recommend upgrading and Gartner strongly recommend you upgrade or switch if you're still on IE6. Does that help?
Surely bugfixing isn't that big a deal?: IE6 is so outdated "bugfixing" means "build and maintain a parallel code base". If we're going to that much effort, maybe we should invest in a purpose-built mobile site instead? Or free up some time for R&D? Or just simply drop IE6 and save some money?
It's your job to build the website, just get on with it.: It's also our job to advise the business when it's making an expensive and risky decision. It is bad for business to support this browser.
Can't I simply expect you to build for it, like last time?: Not any more. Now that we have to support IE8, IE6 is outside the reasonable boundaries of assumed support. IE6 support is now outside scope, unless you pay for it.
Don't your estimates cover it?: The market has now changed and estimates need to be revised accordingly.
We only have IE6, since our intranet only works in IE6.: That's a very risky dependency. However it should not dictate the support standard for your public website, which is frequented by people who don't use your intranet.; As far as intranets go... IE7 has been out for more than two years; and Microsoft has released two entire rounds of "readiness kits" to help update IE6-only services. At this point, maybe you should consider using Virtual PC for your IE6-only application (it's free); and upgrade workstation browsers to something better.; If you're really stuck with IE6, you can also roll out an additional browser on your system; giving users a modern, secure browser like Opera, Firefox, Chrome or Safari for general web use. You do not have to live with just one browser.
But... IE6 looks different... DIFFERENT I TELL YOU!: Unless you have a contractual obligation to make IE6 pixel-perfect, that really doesn't matter. Let the web be the web.

last thoughts

Most browsers don't need this kind of attention at the end of their lives. Most die out pretty fast when the new version comes out. IE6 is an aberration, an accident of history.

If Microsoft hadn't sat on IE6 for so long, perhaps we wouldn't have got so many web and application developers who started treating it like a stable release environment. Maybe if Microsoft had pushed IE7 a bit harder it would have taken more market share. Who knows.

The reality we have right now is that the industry is being held back by a crappy browser that even the vendor wants to see gone. Although we would normally keep supporting a browser to its natural death, IE6 has stubbornly refused to die.

The industry has to take control and say enough is enough. It's bad for innovation, it's bad for our sanity, it's bad for security, it's bad for everyone's bottom line. IE6 has to go. The time has come.

Say it again: 2009 is the year we get rid of IE6!

Review: Asus Eee PC 1000H

2009-03-05T23:45:00.005+11:00

The popularity of netbooks seems to just keep on growing. I suppose it's not really surprising to find a lot of people are keen on a cheap, small laptop!

I bought a 10″ Eee PC just in time for WDS08, where it seemed even the Macbook Pro's dominance might be under threat from cheap ultraportables. Since then I've travelled to Perth with it; taken it to several web events; and even used it at work.

Since I periodically get asked what I think of the Eee, I thought I should write up a proper review.

Specific model: ASUS Eee PC 1000H, Windows XP Home, 80gig HDD, 1gig RAM, 1.6Ghz Atom CPU.

price and portability

Two key reasons to buy a netbook in the first place are that they are cheap and tiny. With the Eee PC I have a neat little laptop for about the same amount of cash that my first iPod took out of me, which is kind of impressive when you consider the 1000H is one of the more expensive models so far.

And yes, it's tiny. The 10" model is heavier than the 9" (for obvious reasons), but it's still really light. I really don't notice the extra weight in my backpack on the days I carry this with me, a sharp distinction from the 15" MacBook Pro I used to borrow (which weighs a ton).

The Eee's portability is particularly noticeable getting through airport security checks. I've lugged a few different laptops through airports and they've been a real pain. However the Eee was a breeze - probably mostly because you can pick it up easily with one hand, leaving the other hand free to grab your bag.

battery life

In power-saving mode the Eee easily goes for more than five hours, putting far more expensive and heavy machines to shame - most laptops seem to need power by the two hour mark. Asus claim a maximum of seven hours, but to be honest I've never had it running that long in a single stretch away from power.

To put it into real terms... during the flight to Perth for Edge of the Web I spent time editing my presentation, watched an episode of Top Gear, wrote a draft of this review and still had three hours of battery left.

The only battery-related niggle is the battery LED. For no sane reason, it blinks green all the way from 80% down to 20%; at which point it starts blinking orange. This means the LED is blinking uselessly most of the time. I don't need to be alerted when power is 80%!

keyboard

The keyboard was the reason I never bought a 7" Eee PC - I couldn't type on it, it was just too small. But the increase to 10" was a critical difference - it's still small, but usable.

The keyboard has an excellent feel, apart from a slight rattle in the right-hand side. My only complaint is that the right-side shift key is in the wrong place. Asus had to compromise on the placement of the shift key to preserve the layout of the cursor keys.

What this means is you have to be careful, or else an accidental keystroke on the up arrow will have you editing the line above your intended focus. It's annoying and it's really my biggest complaint about the machine.

Still I'm getting used to it and the only netbook I've seen with a better keyboard was the Acer Aspire One, which didn't compete with the Eee on any other critical factor on my list (particularly battery life).

touchpad

This machine has one of the most natural and responsive touchpads I've ever used. It really is nice to use and with the low resolution it's plenty big enough. The multi-touch features are great.

screen

The 1024x600 screen is fine. On the rare occasion something doesn't fit vertically, you can switch to a 1024x768 mode - you scroll slightly to the extra screen area, which sounds a bit odd but actually works pretty well.

performance

I haven't had any problems with the performance of this machine. It does take a little while to start up, but once running it's fine - which has been true for many laptops I've used.

The Eee switches between three modes (power saving, high performance and super performance) depending on factors like whether it's on battery or mains power. Obviously you can override that behaviour, trading off some battery life to run at full CPU power.

Either way it handles work tasks just fine, particularly using StarOffice; it plays music and video with no hassles; and I've not had any issues with common browsing tasks.

I'm not sure how it would cope with something like Photoshop, but I'm not planning on doing any photo editing on the Eee. I have a desktop with a nice 22" monitor at home for that.

glitches

I've had one or two minor glitches. I needed to upgrade the touchpad drivers to get it working in some browsers; and if you have a password set on your machine it will bounce back out of sleep to the login screen the first time you hit the sleep button (you have to hit it again to actually sleep the machine).

I've also found you need to be patient and wait for Windows to finish shutting down before you close the lid. Apparently there are some system dialogs which prevent shutdown and the Eee doesn't seem to override these at the hardware level - which is bad if you've already shoved it into your bag.

Really these are minor issues and I think they're more related to the OS than the hardware.

summary

The Eee PC was built to a purpose and it fulfils that purpose very well. I wouldn't buy this as a primary workstation because that simply isn't what it's for. However as a secondary, portable machine on a budget it's brilliant.

Good:

cheap
light
extremely good battery life

Bad:

annoying battery LED
right-hand shift key in wrong place

Would I recommend it to a friend? Heck I do all the time. I'm really happy with my Eee PC.

microsoft virtual pc tips

2009-01-25T23:20:00.007+11:00

I've never been a fan of "multiple IE" and "multiple Firefox" hacks, since my experience has always been they're not quite the same as having the different versions installed on different machines. Most of the time they're fine, but sooner or later one of those funny little bugs will bite you.

So, for a while now I've used the free Virtual PC setup that Microsoft gives away for testing purposes. They're full systems, so you can be confident that they're "real" installs - and of course you can run other browsers on them too. Currently I run a test image with IE6 and FF2.

Here are a few quick tips about Virtual PC that I've learned along the way...

Where to download it:

Virtual PC 2007 download (via the Virtual PC homepage)
IE testing VPC images download
The images are big files and slow to download, so be nice at work and stick them on a network drive for your coworkers

Setting it up:

The free test images are all time-bombed to an irritatingly short period of time. So, don't invest too much time setting them up.
I usually name the machine something like "IE6 to the end of April 09" to remind myself which image it is and how long it'll keep working.
I've found Virtual PC images seem to run a little better if you double the "recommended" RAM to 256megs. YMMV.
The test images given out by Microsoft will generally have no Flash or an old version installed (usually v6). So you probably want to upgrade Flash immediately unless you are specifically wanting to test old Flash versions.
Virtual PC unable to connect to the web? Try setting it to use a shared connection (NAT). Right-click the network icon at the bottom of the Virtual PC window, and hit "network settings" in the network panel. NAT will be an option in the adapters dropdown.

Using it:

Sick of using the mouse to get out of the Virtual PC window? Hit right-alt+L to minimise it, then you can alt-tab as normal. Right-alt is the default "host key" which has a bunch of other shortcuts as well.
You can drag and drop, copy and paste etc between the host system and the virtual PC. I was used to a VMWare environment where you couldn't do that, so I originally assumed you couldn't do that in VPC - but you can.

I hope those tips are useful. Happy testing...

Moments of Connection

2008-12-26T17:30:00.006+11:00

We talk about connection a lot. We talk about social objects, social networks... technology to connect people.

But for all that, a lot of the time we remain distracted by the tools we're using. The experience is often "using the service" rather than "connecting with friends".

Then there are some moments which show us what connection really means.

I'm talking about those moments when the technology falls away from notice, and we simply experience the warmth and emotion of human connection.

Human stuff. Like many things it defies definition, but we know it when we see it... and we know it when we feel it.

Derek Featherstone's "Connection" post describes just such a moment, browsing Flickr photos on his TV in his lounge room. You should read the whole post but I'll borrow a little:

As the photos play, I see my friends. I see Ben. I see Chaals. Lisa and Lisa and Lachlan, John and Maxine, Scott and Cheryl. My head and heart both started racing.

...

Next up was Jeremy Keith. Scrolling through his sets I see dConstruct 2008 and push play. I see photos of speakers, attendees, conference organizers — and friends in each category. It starts happening again. I see Jessica, Paul Duncan, Andy Budd, James Box and more. Heart racing, fitting with the music. What is happening?
Connection » box of chocolates

These moments are what truly excite me about the web; and about the potential of the internet as a whole.

These moments are what I want my less tech-savvy friends to tap into.

the net keeps me connected

Twitter has kept me in touch with friends from web events. Flickr lets me share photos with friends and family. Skype lets me video call my family (I live in a different city). Facebook, for all its faults, has kept me in touch with friends from college.

My friends are split to the four winds. We revel in the moments when we're in the same room, but in between those golden moments we use the net to keep in touch. Online connection is real and important to me, not the ersatz connection many people still assume it must be.

connected moments

Moments don't need to be big or complex to make an impression. One of my favourites was my "twitter moment". It was essentially the moment when I decided I'd keep using Twitter.

One night back in March 2007 I was enjoying a few drinks here in Sydney with Chaals, who was visiting from Oslo. I used my phone to twitter our location, with our view of the Sydney Harbour Bridge. Moments later I got a direct message from Derek, in Ottawa, asking me to say "hi" to Chaals for him.

It was a very simple thing. But in that moment technology had connected three friends in real time, away from the computer and in fact on opposite sides of the planet... and that's pretty cool!

Sure, I know it's all just mobile towers and servers and satellites and data. But every once in a while I think we should just appreciate the joy of the magic of it all.

[Cartoon: Three Panel Soul :: Archive 2008-11-05]

I'm not saying that a text message was as good as having Derek there with us. But it was nice to be able to share the moment so casually. Without Twitter it wouldn't have happened.

Moments of connection like these help build friendships, despite great distances... and this year, on my 30th birthday no less, this moment happened:

L-R: me, Derek, Chaals.

And that's the really good stuff :)

...and you?

So, has there ever been a moment where—for all your web savvy—you were able to simply enjoy the magic?

What's your moment of connection?

Choose your resolution

2008-12-03T22:46:00.004+11:00

The old rules for supporting screen resolutions were simple. Monitors were basically all the same shape and new ones just got a little bigger... so all you really had to do was support the standard resolution of new monitors, plus one resolution "back". Easy!

But these days the rules aren't so simple. Desktop monitors are generally bigger, but they come in a variety of sizes and ratios; and users don't always maximise their browser windows anyway. People are browsing on tiny mobile phones that weren't really designed for anything longer than a text message. Devices like the iPhone, Nintendo Wii and Asus Eee PC are new and shiny, yet their resolution is retro.

All of these displays are new. We don't have a situation where the major differences are divided between new and old, nor is there a linear increase in size as new displays come out.

To really see what this means, let's compare a selection of new device resolutions side by side:

(Statistics from TheCounter.com November 2008 resolution data)

Screen Resolutions
Device	Resolution (pixels)	Notes/Source
Nokia n95	240×320 (can be portrait or landscape)	Nokia n95
Nintendo DS	256×192 (dual screen; total viewable 256 x 384 across both). Not an especially common device for web browsing, but it is out there.	Wikipedia - DS
Sony PSP	480×272 (16:9 ratio)	Wikipedia - PSP
Apple iPhone	480×320 (can be portrait or landscape)	Apple - iPhone specs
Nintendo Wii	608×456 (pictured); or 1024×500 on 16:9 ratio TVs; may vary depending on TV/settings.	Web design guide for Opera Browser on Wii & update
Eee PC	7 inch - 800×480; or 8.9 and 10 inch 1024x600	Wikipedia - Eee PC
Average monitor	1024×768 is still the most popular browser window size at 45% share; and 1280×1024 is second at 31%.	The Counter global stats, November 2008
20 inch monitor	1600×1200	Average specs found on hardware sites.
22 inch widescreen	1680×1050	Average specs found on hardware sites.

So what difference does it all make? Didn't fluid layouts solve all our problems? Well, unfortunately, no they didn't.

bigger and... broken?!

There's nothing like a real-life demonstration to illustrate how much your monitor can change your browsing experience.

A few months ago I finally upgraded to a 22 inch widescreen LCD from my trusty old 17 inch Sony Trinitron CRT (which lasted ten years). At work I use twin 1280×1024 LCDs, so widescreen is a new frontier for me. I still occasionally feel like I'm watching tennis.

One reason I lingered at 1024×768 was the reality check - amazingly it's still the most popular screen resolution out there. The share is falling, but having dropped just 5% in the past year (from 50% to 45%), it's not going anywhere just yet.

So we keep supporting 1024×768 and I had generally thought that larger monitors wouldn't have any problems. But when I switched over, I was surprised to discover that many sites which work nicely at 1024×768 effectively "break" at 1680×1050.

what's bad at high resolution?

Fixed width + left-aligned sites
100% width + fluid layout
Tiny text

The single biggest annoyance for me is sites that are left-aligned and fixed-width. That means they're way off to the side on a widescreen monitor, so I'm either looking off to one side or I have to start messing around resizing my browser.

Fluid layouts don't solve everything, since line lengths can get completely out of control. Would you set a line length of 19 inches in print? Not for body copy, I'm sure. But that's basically what happens on my screen at 100% width - and it's incredibly hard to read.

The other major issue at higher resolution is text size - it's just too damn small! I'm forever zooming the page or even disabling styles completely. Designers, please, set larger text!

what's ok at high resolution?

Elastic layouts
Fixed width + center aligned

Elastic layouts do fare quite well, so long as they have intelligent minimum and maximum widths set up to preserve line length. Some go too far and end up being as bad as a fully fluid layout, but the good ones subtly adjust to use some more space. Bonus points for bumping up the text size for very wide screens (and I can only think of one here: props to nickcowie.com).

Fixed width, center-aligned sites are great, since they put the content front and centre and keep line lengths readable. At smaller resolutions it looks basically the same as left-aligned sites, so centre-aligned design adds a nice experience for people viewing at wide resolutions without causing any trouble on smaller screens.

so how do you choose a resolution?

With all this in mind, how do you decide on a base resolution to support? Even if everybody browsed with maximised windows it's not a straight call. You end up having to choose a middle ground - no resolution is perfect for every last screen.

Besides that, what does it even mean to "support" a resolution these days? So let's start by defining what we mean by "supporting a resolution".

define support levels

I'm suggesting a graded support system, the same way most of us treat browsers:

Direct support: A resolution where the user can view the default rendering of the site without horizontal scrolling, loading alternative stylesheets or some other form of modification. The design does not have excessive whitespace. Something that works at both 1024×768 and 1280×1024 would mean direct support for both.
Oversize support: A resolution where the design works even if it has a large amount of whitespace, eg. a fixed width, centred design.
Cut down support: A resolution where the primary content is on screen without scrolling, but the user scrolls to see secondary content (eg. having your main content area fit at 800px wide, but the sidebar etc requires scrolling).
Alternative support: A resolution supported via an alternative stylesheet, resolution detection, alternate template, device detection or some other modification from the default.
No support: You leave it to the user (or their device) to sort it out if they are using that resolution.

I'm sure we all have something like this in our heads anyway, but it's better to be precise and definite - particularly when the boss asks you to explain why the site was cut off on his Wii.

use your own stats to make decisions

Nobody's statistics are as relevant as your own, so you should always pay attention to them. Look to global statistics for trends, then apply those trends to your current state.

When I redesigned this blog I found that about 5.8% of visits were at 800×600, 18.6% on 1024×768, 23.5% on 1280×1024. The other 52.1% were at various large and widescreen resolutions above 1280px wide.

I set the minimum cutoff point for direct support at 1024×768 (minimum width 950px). At 800×600 you see the main content and middle column, but have to scroll for the third column.

Then I decided to use oversize support for large screens, capping max width at 1200px.

There's only 250px play between the min and max width; so the line length doesn't change by too much. I could just as easily have set a fixed width, but I prefer to let the design breathe a little.

I currently don't have extra stylesheets for mobiles and other small screen devices. Some random testing shows the site seems to hold up ok anyway. Essentially I'm leaving them in the "no support" category (I might be more interested if mobiles supported the handheld media type).

the process

So basically the process I suggest for choosing a resolution is this:

Look at global stats for trends
Look at your own stats for current numbers
Consider what the trends mean for your stats
Allocate major resolution market shares to support categories (create a support matrix)
Build to meet the requirements of your support matrix
- Build your default site to suit the min and max widths of your Direct Support resolutions
- Support slightly-smaller resolutions with Cut Down Support
- Support massive resolutions with Oversize Support
- Where there's a need, build niche stylesheets or templates for Alternative Support resolutions
Periodically review your support matrix

That's a very formal way to describe the process, of course. Really what it boils down to is making some conscious decisions; and considering what you want to happen at all the potential resolutions out there.

conclusion

There are a lot devices out there with a crazy array of resolutions. The good news is you don't have to support every last resolution directly.

There's no imperative to fill up the entire screen at massive resolutions; and it's not the end of the world if someone needs to scroll a lot on a tiny-screened device.

Statistically speaking, the majority of people are still using a reasonably standard size monitor to view your content. Widescreen monitors just mean there's more real estate than you actually need to present your content.

So, create a coherent, legible design and don't be scared of whitespace. A good design sitting in the middle of a big space is a better experience than a clever-but-unreadable fluid design.

Of course, next thing you know someone will bring out some new device that changes the whole situation...

it's barcamp season...

2008-11-19T21:41:00.003+11:00

Hot on the heels of barcampsydney, it's time for Queenslanders to get their barcamp on! BarCampGoldCoast 2 has just been announced. It's being held at Griffith Uni's Gold Coast campus on 29th November 2008. Registrations are open now; head on over and sign up.

They're also looking for sponsors - it's incredibly cheap ($150-300) to sponsor a barcamp, yet it puts your brand in front of some seriously bright people. So it rates very high on the 'bang for your promotional bucks' scale. [/pitch] ;)

Not only but also... word on the street is that there are barcamps coming up for Canberra and Adelaide. Keep an eye on http://barcamp.org/#Australia for details.

get your barcamp on

2008-10-29T21:01:00.002+11:00

BarCampSydney 4 has just been announced for the 15th of November. For details, head on over to BarCampSydney | BarCampSydney 4 - Let’s do it!!.

web standards group sydney, 2008.10.07

2008-10-07T23:27:00.002+11:00

The WSG Sydney October 2008 meeting was held at the Australian Museum tonight, at the rather nice 4th floor/balcony venue. These are my notes from the event.

Chris Khalil – Ambient Personalisation

What is ambient personalisation? It's like Homer's ass groove in the couch. He didn't change any settings, he didn't actively change anything. He just used the couch and it slowly conformed to his needs.

It's intuitive and it's set and forget. It should never be groundhog day where you have to redo everything every time you visit. Low barrier to entry – no opt in, no complex tricks to learn.

It's like the site having your footprints. You don't think about it, they just happen.

Why use the ambient approach instead of giving your users all the options and letting them choose? Feedback suggests they think it will be time consuming and too hard. There's a risk of making them feel a bit stupid. They want the effects of personalisation but they don't want to do it.

news.com.au (soon to be relaunched)

News is personal – people might be keen on news and sport but HATE entertainment/gossip. Or they might like entertainment and travel but hate business. Everyone has their own news preferences, likes, dislikes.

Testing showed that users want choice, convenience and control. No matter how strong someone's preferences are, they are likely to change over time.

People like local content. They want to know what's happening in their city, their suburb, even their own street if it can be done.

[My aside: simple newsworthyness values still apply online – local news tends to be more compelling than global news.]

Problem during testing – 90%+ of people didn't know or understand the paradigms of personalisation. They didn't think to click and drag, drag and drop etc. So news.com.au created friendly messages in a handwritten “callout” style to explain things simply. The simpler the better – instructions got down to one word – click, drag, etc. Part of the trick was to make the instructions clearly different from ads.

www.chriskhalil.com

Lachlan Hunt – New Stuff in Web Standards

Talking about new stuff that's actually being implemented in browsers.

Design principles

Include, but not restricted to...

Browsers must remain compatible with existing content. New features must degrade gracefully. Don't reinvent the wheel – even if something is proprietary.
Pave the cowpaths – look at use cases, what do authors already do and then improve as required. Evolution, not revolution. Solve real problems – ensure the work is relevant.
Theoretical purity is not the priority. Users are the top priority.
Minimise differences between HTML and XHTML. Allow scripts to work with both if possible.
Handle errors – the spec must define what to do when things go wrong.
Accessibility – built in, not added on.

What's new?

HTML

New structure and semantics. Looked at the class names that people were using repeatedly; hence elements like header, footer, nav, article, aside, footer.
Impelementation – there's no native support for these new elements, but you can still style them in most browsers and use a createelement() hack in IE. In other browsers you just use CSS to set the new elements to display block.
New multimedia elements – video, audio, canvas.

CSS

Transforms: scale, rotate, skew...
animations (proposed by apple)... transitions, duration, etc...

DOM

Selectors API... Document and element interfaces – eg querySelector()
getElementsByClassName() - hooray!
Offline web applications – gears-esque.

Development tools

HTML5 conformance checker (note that it's more than just a validator). Checks for things like table integrity, not just tag formation.
Parsing libraries to reduce reliance on regex hacks.

Q&A

Q: are the screen reader makers involved or buying in?: A: screen readers are less of an issue than the browser vendors, as the screen readers are told about the document by the underlying browser. Eg. what level heading is it? The browser tells the screen reader.
Q: Why did you not add a generic heading, despite adding <section> and other new elements?: A: basically due to degradation. Old browsers can handle <h1> better than <h>.
Q: Why are elements like <section> ok but <h> is not?: A: section and other new tags degrade and act basically the same way as <div> tags.
Q: re: the use of h1 instead of h – what will Google make of that?: A: Google are involved in HTML5 work but they won't reveal exactly where they are up to with HTML5 support (or plans to support it). So, we don't know.

http://lachy.id.au/slides

wds08: the stream

2008-10-06T23:20:00.001+11:00

What follows is Web Directions South 2008, as seen on my flickr and twitter streams. With some annotations where I felt it was appropriate. I kind of like the picture that emerges :)

Day Zero

counting down to end of work, which coincidentally marks the start of my #wds08 festivities... 05:10 PM September 24, 2008 from web

going to have dinner with L, then head to port80 in a little bit. don't drink *all* the beer ;) 07:31 PM September 24, 2008 from web

back from pre #wds08 #port80 - great night! but definitely time for sleep :) 12:20 AM September 25, 2008 from web

Day One

Opening Keynote - Lynne D Johnson: New Media...New Rules

playing "spot the wordle graphic" at #wds08 ;) 09:26 AM September 25, 2008 from web

@RuthEllison eeepc reducing the average size of laptop though ;) 09:34 AM September 25, 2008 from web in reply to RuthEllison

Two notable toy trends: iPhones and little laptops/"netbooks" (Eee PC, Aspire One). In previous years, the trend was "mac laptops as far as the eye can see".

noting that #wds08 is a trending topic on search.twitter.com 09:51 AM September 25, 2008 from web

@trib nah the esquire cover was just the fucking BLINK tag done in print ;) #wds08 10:07 AM September 25, 2008 from mobile web in reply to trib

The whole Esquire cover thing... it just blinks, which is annoying. I don't want my magazines to blink at me (I don't want any media to blink at me). I don't particularly want magazines to "update over 30 days" either - if I want that I'll go look at your website.

personally i think magazines won't die until monitors look as good as high quality print. #wds08 10:10 AM September 25, 2008 from mobile web

librarians... they're information brokers, right? books or otherwise! #wds08 10:13 AM September 25, 2008 from mobile web

@madpilot yeah and they don't run out of battery on long flights! 10:14 AM September 25, 2008 from mobile web in reply to madpilot

simplistic comment about "will their politics become ours". what, everyone thinks like rupert? what bullshit! #wds08 10:17 AM September 25, 2008 from mobile web

I forget the precise wording of the question, but it was something about Google's potential dominance of media meaning that Brin and Page's politics would "become our politics". That's just too simplistic - all publications have bias, whether people adopt that bias comes down to how much they think and how much they just absorb.

media consumers don't think for themselves any more or less based on the source. some people analyse, some don't. #wds08 10:19 AM September 25, 2008 from mobile web

Derek Featherstone - Accessibility beyond compliance

boo to the doorbitch who wouldn't let us in with coffees! missed the start of derek's talk. we're geeks, need 'feen! #wds08 11:12 AM September 25, 2008 from mobile web

I should mention that I refer to anyone doing any form of door duty as "doorbitch". It's not a derogatory term and I've done doorbitch duties myself.

But seriously, who denies geeks caffeine? :)

just realised i mentally associate @feather 's voice with Dragon Naturally Speaking commands. #wds08 11:22 AM September 25, 2008 from mobile web

This is true. When I describe how users give commands to Dragon Naturally Speaking, I probably do a slight Derek impression.

@feather: “oooh, that's evil. Popup windows bad.” #wds08 11:33 AM September 25, 2008 from mobile web

Grant Young – social media

Grant Young just had a moment of terror, realising he didn't check what he'd bookmarked on delicious before he took a screenshot... #wds08 12:10 PM September 25, 2008 from mobile web

loving the room's reaction to Will It Blend iphone episode... it's just a fucking phone, people! #wds08 12:20 PM September 25, 2008 from mobile web

second wordle graphic spotted! #wds08 12:41 PM September 25, 2008 from mobile web

JS libraries

laughing at the geek sledging in the js libraries session. #wds08 01:57 PM September 25,2008 from mobile web

would it be snotty to mention you can swap an image on hover using css? ;) 02:17 PM September 25, 2008 from mobile web

.... *snort* apparently not, cam just mentioned it :) 02:18 PM September 25, 2008 from mobile web

"where did you get this from?" "google. i felt lucky!" #wds08 02:21 PM September 25, 2008 from mobile web

switching to typography with jeff croft. #wds08 02:45 PM September 25, 2008 from mobile web

Jeff Croft

Jeff made a comment that came across as wanting to ignore accessibility concerns (although he said later that wasn't his intention). It didn't go down so well on the back channel...

man we need to solve this px font resizing issue. will IE ever come to that particular party?? 02:59 PM September 25, 2008 from mobile web

@tuna it's a common designer atttitude - ahhhhh nah nobody who reads MY site has low vision... see also: small grey text syndrome. #wds08 03:04 PM September 25, 2008 from mobile web in reply to Tuna

@ocean ie6 and firefox2 both. ff2 holds back inline-block. ie6, well we know the shopping list of reasons... 03:08 PM September 25, 2008 from mobile web in reply to ocean

pondering making my twitter stream public for the duration... twitter search *should* reveal tweets to followers, but doesn't. 03:09 PM September 25, 2008 from mobile web

@ocean yes, but all target audiences can and do include people with vision issues, who'd like to resize. 03:12 PM September 25, 2008 from mobile web in reply to ocean

@ocean ie6, ie7, ie8 all have the problem; although 7 and 8 have the zoom function. so, they have a workaround of sorts. 03:15 PM September 25, 2008 from mobile web in reply to ocean

nice simple explanation of vertical grid though. #wds08 03:19 PM September 25, 2008 from mobile web

hmmm. hanging bullets look wrong to me. just habit from websites? #wds08 03:28 PM September 25, 2008 from mobile web

Later on, there was some discussion about how many typography rules have been or should be rewritten for the web. Croft did mention the issues around the choice of serif vs. sans-serif, where the rules were essentially reversed online.

August de los Reyes

@ruthellison reckon surface could be microsoft's wii or ipod? 04:19 PM September 25, 2008 from mobile web in reply to RuthEllison

going open for the duration of #wds08 04:24 PM September 25, 2008 from mobile web

philosophy and it - it's an underrated combination. but then i would say that. 04:32 PM September 25, 2008 from mobile web

(I have a degree in Journalism and Philosophy, but work in IT. So... yeah :))

i can see the future with microsoft surface. ms diversifies into a lurcrative windex sideline... #wds08 04:47 PM September 25, 2008 from mobile web

excellent closing presso, great conceptual mix. can forgive the prevalence of promo reels ;) #wds08 05:10 PM September 25, 2008 from mobile web

@scttw should we underestimate the under-served raver computing market? :) #wds08 05:13 PM September 25, 2008 from mobile web in reply to scttw

Day One drinks

Webjam 8

Day two

Jeff Veen – Designing through data

my wifi and the slide system came back up at the same time. coincidence? or something more sinister? *wiggles eyebrows significantly* #wds08 09:21 AM September 26, 2008 from web

now after...what... a three year wait... i'm about to see @veen speak again :) #wds08 09:23 AM September 26, 2008 from web

thanks for all the birthday wishes, guys :) so far thankfully 30 hasn't felt too different from 29... here's hoping that lasts ;) 09:41 AM September 26, 2008 from web

Yes, it was my 30th on day two. Not a bad way to spend your birthday, really.

ahhhhh, hay net, an old friend. have hay or need hay? have borrowed that example many times. @veen #wds08 10:06 AM September 26, 2008 from mobile web

Link: veen.com/wds08.pdf

Note - connectivity issues ensued.

Jina Bolton – sexy stylesheets

Michael(tm) - HTML5

Miles Eftos – openid, oauth

finally got some sweet sweet connectivity back :) in miles' openid presso #wds08 01:45 PM September 26, 2008 from mobile web

I should mention the wifi was great given all the restrictions. At some points I strongly suspect there were a few people abusing the network with high-bandwidth stuff (probably photo/video uploads).

heheh miles explaining what 200ok means... hopefully plenty of you already knew ;) #wds08 02:01 PM September 26, 2008 from mobile web

switched to burka's presso, double-dipping sessions ;) 02:31 PM September 26, 2008 from mobile web

Daniel Burka

Surface and afternoon tea

Mark Pesce

behind you, mark, behind you! #wds08 04:20 PM September 26, 2008 from mobile web

i think it's fair to say i just got a LOL :) 04:27 PM September 26, 2008 from mobile web

all done bar the after party :) #wds08 04:54 PM September 26, 2008 from mobile web

after party

grabbing some food before heading on to the shelbourne. 06:30 PM September 26, 2008 from web

Lmao as the dancefloor fills to rick astley #wds08 11:23 PM September 26, 2008 from txt

I love yous guysss ;-) #wds08 01:36 AM September 27, 2008 from txt

The day after...

heheheh boy do i have some classic photos from last night.... :) 11:20 AM September 27, 2008 from web

now off for brunch with an old friend (and to see their new place!). 11:22 AM September 27, 2008 from web

getting ready for drinks and food with the perth crew, at the kirk. #port80 #wds08 06:26 PM September 27, 2008 from web

Sunday

feeling the bittersweet #wds08 comedown. it's awesome having so many wonderful people come here! but the buggers always leave afterwards ;) 02:53 PM September 28, 2008 from web

wds08: the notes

2008-10-06T23:19:00.005+11:00

In the tradition of my "big stonking posts", these are my notes from WDS08 - basically unfiltered for the most part (so, effectively they are "liveblog" in tone). Anything [inside square brackets] is an aside, my own thoughts rather than something the speaker said. I did think about putting these into the stream post, but it was just getting insanely long :)

Day One

Lynne D Johnson: New Media...New Rules

Discussing Marshall McLuhan's work – the medium is the message.
“print is a dying a breed... it's not dead yet, but it will serve a new purpose...”
“What has become of print?”
Tom Foremsi – google cheated newspapers by commoditising content
Does it matter where you get content from? Shouldn't producers just work out how to get along with new ways to deliver content? - Yes. There are plenty of new ways to make money!
Users still trust experts on factual information, so that still means they trust old media sources. They go to friends for reviews of hotels, electronics, etc...
But... younger users, 12-24, are starting to trust unknown peers more than experts. They have a totally different approach to media – including the fact they may want to pay for content. They don't care where the content comes from, they just want to aggregate as much as possible.
Discussing japanese book market – it's all on mobile phone, including some books written on mobile. Non-book sales also went up while mobile sales grew. [my though – the more people read, the more they buy...]
Should print be scared of Google? Well for a start newspapers are about to “get into bed” with google by letting them wear the cost of digitising newspapers.
What should newspapers do? Get niche, shorter stories, more stories, in depth coverage of niche content, have a distinct voice, hyperlocalism, mashups with localised content.

Derek Featherstone – accessibility beyond compliance

I was a little late into this session after being barred at the door due to having a coffee in hand. So, I drank it (too fast) and then scurried in...

Keyboard users can be really disadvantaged by AJAX because they get sent back to the top of the page all the time – they lose context.
Small barriers to general users can be major barriers to other users... but also a small improvement for us can be a massive improvement for others!
[2008 and we still have to point out that accessibility is not just about blind people and screen readers...]
“Links go places, buttons do stuff.” reason to use buttons and not links for in-page controls. Buttons also focussable by default.
“...we're getting a little meta here...” talking about metadata for a book about tagging.
Inline editing – you can't get into editing mode on flickr's editable regions. It's mouse-only. So flickr created an edit link, which takes you to another page which is preset to make everything editable. Issues: bad placement, it shouldn't be at the end of the page, after all editing is likely to be one of the first things you want to do. Also the link label is too brief.
Technical term: nubbin. Derek likes it because he can say “expose the nubbin”.
“oooh, that's evil. Popup windows bad.”
Use the principle of proximity: things that are related to each other should be close to each other. Insert info next to relevant location.

Grant Young – social media

Social media is conversation – you need to remember that. Imagine ads jumping up between people in the pub...
Trust barometer – who do people trust?
Control vs influence – what you lose in control you gain in influence.
Book recommendation: flipping the funnel, by seth godin
Social media buiding blocks: identity, presence, relationsihps, trust, groups, conversations, sharing.

[Is it a buzzword to say you'll “unpack” a term later?]

Grant Young having a moment of terror, realising he didn't check what he'd bookmarked on delicious before he took a screenshot...

[Discussing ambient intimacy... noting exactly why I love twitter. It keeps me in contact with friends in a way no other tool has ever managed to do.]

Powerhouse photo collection – more hits in 4 weeks on flickr than in the entirre previous year on their own site. Go where the people are!
Discussing the power of the Will it Blend? videos – incredibly cheap to make, but reaches an audience as big as a tv audience.
My place or yours?
- If I go to the community will it be appropriate and will I be welcome?
- But if I set up my own network will people be sufficiently motivated to come and join?
“Start small. Fail early, learn often...” lurk in networks before you launch official branded profiles.

[Single biggest thing is if you don't participate you should not attempt to market in that space. Because you don't know how it works.]

Doc Searls: the because effect. Make money because of something, not with something.
It's not just about eyeballs – it's not how many people you get, it's the quality of the relationship.
Second wordle spotted!
“I am not a 'target market'”
http://zum.io/wds08

Javascript Libraries panel

To be honest I was really just there for the fun of it. I know plenty of serious Javascript hackers and they pretty much agree as follows:

Ideally you should learn to write your own Javascript
Frameworks have their place
If you're going to use a framework, use jQuery. Or at the very least, don't use !#%&ing GWT.

So, that's what I do.

Back at WDS08 however... The sledging in the session was awesome, even if it's a bit scary that the Naked Man In Blue photo keeps turning up.

Jeff Croft - typograhy

“it's not about picking a cool font”
Book recommendation: The Elements of Typographic Style by Robert Bringhurst
Before you can size text on the web, you really need to understand how to size text in general.
- An em refers to the em square, not the character size.
Set up a typographic scale and stick to that scale.
- Comparison to music – using a note out of the chosen scale will sound wrong; using a font size outside the scale will have the same effect.
Discussing the 62.5% font sizing trick, by Richard Rutter. Set your baseline to 1em = 10px, 1.1em = 11px etc. ok except inhertiance messes it up.
Croft ultimately goes with px font sizing to make life easier, considers it a classic geek holy war.
He also suggests avoiding extreme contrast as it can be a bit hard on the eyes.
“The measure” = the length of a single line of text. 45-75 characters is optimal, using 1 char = 2/3 of an em. So, 30-50 ems is a good line length.
Strong recommendation to add more leading to your site's body text.
Vertical rhythm – basically, set base line height and make sure everything adds up to the same value. Including padding and so on. Double it for h1, etc...
Justified text just doesn't work on the web; largely because hyphenation really doesn't work.
“Yes, there's a shortage of fonts. Quit bitching about it.”

[So what about the whole back channel anger about his comments on accessibility vs. px sizing? I think the way to think about it is that Jeff Croft may not intend to sound dismissive about accessibility, but he does sound dismissive about accessibility. It was the same thing when his new blog design was launched with extremely low contrast.

The px font sizing thing is a real problem though - we should be able to use px and yes it is a hell of a lot easier. I have had some discussions about this at work and it is very hard to say no to px sizing in a real-world context. Microsoft: get your shit together.]

August de los Reyes - interface/Microsoft Surface

Discussing the way humans experience emotion; the role of play in life; and ultimately merging philosophy and IT theory. Emotion and design.
NUI – natural user interface, which is the space where the ms surface product sits.
Command line -> GUI -> NUI
Command line is directed and you use recall for commands. GUI is exploratory and uses recognition. NUI is contextual and uses intuition.
Core idea is that work and play are not opposites or mutually exclusive; and there is joy in doing things as well as joy in the results.
Three pillars: social, seamless, spatial. Bring people together, blur the lines between the real and virtual/technical, tap into spatial memory and 3D concepts. This should result in strong emotional connections and responses to the interactions around Surface.
What comes after NUI? XUI – X ui... something organic?

Day two

Jeff Veen – Designing through data

1974 as the conceptual end of the sixties... hippie values became mainstream.
Veen had an epiphany... he saw Pong for the first time, and realised he could control what was on the screen. He could participate instead of just watching!
Key concept: Tools for partipation combined with the scale of data.
Every minute people upload 13 hours of video to youtube.
“the problem with data is it makes me feel dumb.” ...but the truth is when data makes you feel dumb, someone has failed in design to make it understandable.
Using the pump vs. deaths example, the soho pump...
Harry Beck – designer of the london tube map. The inspiration was to apply circuit board design onto the tube layout.
Let people find the story in the data. Provide the tools and let people navigate through it.
Wore tshirt to google: “math is easy. Design is hard.” apparently that didn't go down so well...
Taking a concept from zeldman – start with the user, but know yourself. Veen tweaks to know yourself, then understand the user.
Close the gap between who we are and the people we serve.
Homework – read steven johnson's “the ghost map”
veen.com/wds08.pdf

Jina Bolton – sexy stylesheets

Running through the core stuff... Write it clean, keep it clean. Clarity is beautiful (use descriptive class names etc). Comments are your friend.
Cross reference between stylesheets – particularly between IE stylesheets and general stylesheets. /* redefined: ie6.css line 25 */
CSS3 ... Has taken a long time...! note that it's broken up into modules, it's not a single spec as such.
Backgrounds and borders... one of the most exciting things. Being able to attach multiple images will be awesome....
Multi column layout – issue, the columns aren't actual nodes so you can't select them. Jina hopes it gets fixed at some point.
Grid layout – float-offsets and using gr (grid units) as measurement unit.

[The lack of css3 selector support has played a massive part in the markup standard i've just created. We had to include classes like odd and even on table rows; and our backend guys created a scheme of positional class names that wouldn't be required if we had nth-child selectors. Browser makers... get on with it!!!]

[My thoughts: We can apply progressive enhancement approaches to CSS, use what's available. It's available in many browsers and we can add all the cruft for IE in conditional stylesheets.]

Michael™ - HTML5

What works now? Canvas (only one major browser doesn't support it...), video and audio, validation without js. API for offline web applications. APIs for client side data storage (replacing cookies). Native getElementsByClassName (hoo-fucken-ray).
When did this journey really begin? December 1997 – when HTML4 was published as a recommendation. It was really fast, and “that can never happen again” because you need implementations before you can have a recommendation.

[OK, should that still be the way we go? Can't we have a recommendation based on a proof concept implementation in, say, opera or webkit?]

Value proposition for HTML5: it makes life better and easier for web developers. It increases interoperability and reduces the need for UA sniffing.
So what does html5 consist of? Html5 spec; support for some features in 4 major browser engines; html5 parsing libraries; validator.nu html5 validator.
“[the html5 spec is] A wee bit overloaded.”
The spec focuses mostly on specifying conformance criteria for browsers. It's not especially aimed at web developers in that sense. But it does also include the info we do need as web developers.
If we want the web developers version, we need to make noise about it! Blog about it, get on the html email list.
So much of html5 is based on this: the spec shows what authors should do; then tells browser makers what to do when authors do the wrong thing anyway. HTML5 has decided to avoid draconian error handling.
“don't get hung up on syntax.” html5 defines html as an abstract language with more than one syntax parsing method.... [?]
There's only one standard in-memory way to represent stuff and that's the W3C DOM.
Simplify where we can. eg. Most of the doctype is ignored by browsers, which is why they went with <!DOCTYPE html>. You have to set that to avoid “screwed up mode... fucked up mode... what is it lachlan? Ok, quirks mode.”
Similarly the character encoding tag is overly complex, so they bring it back to <met charset=”utf-8”>
demos: http://www.whatwg.org/demos/2008-sept/

[note to presenters: vim + presentations = bad]

As ever, legal shit gets in the way of video. MS and Apple refuse to implement ogg; firefox won't implement proprietary codecs; etc.
“ARIA is more of a stopgap than a permanent solution; but it's support – it's a success story.” (paraphrase)
Accessibility is built in to [ARIA]. ...it's baked in to the html5

Daniel Burka - usability/digg

Interesting comments about digg users – they can be quite immature, but they asked for real feedback and got it. So he says you should still give your users credit ;)

feedback, feedback, feedback - get lots of feedback
follow how people actually use your site
subtraction is iteration too
measurable goals are crucial
avoid announcing timelines

slides on slideshare/dburka

book recommendation: “how buildings learn” by stewart brand

Mark Pesce - this, that and the other thing

I've learned that if you're taking lots of notes in one of Mark's keynotes, yr doin it wrong. So although I had the laptop out, it was mostly just for keeping an eye on the back channel. We are hyperconnected after all.

The only notes I wrote were:

Key statement: We behave like crowds when we really ought to be organising like communities.
With a new idea – ask youself... will it help people think for themselves?

That said, I'm glad I had wifi. Mark had the backchannel up on screen through much of his talk. With freakishly good timing, my tongue-in-cheek tweet popped up:

behind you, mark, behind you! #wds08

Mark was steadfastly refusing to look, but the crowd laughed so much I guess he couldn't resist a peek.

opera web standards curriculum updated

2008-09-29T21:20:00.002+10:00

The second batch of articles has been released at the Opera Web Standards Curriculum. This update really gets the curriculum up to a full head of steam - students can now learn everything they need to know to create a valid, accessible, fully styled website. The next update will see the Javascript articles added.

I contributed two articles to this round... styling lists and links; and styling tables. They were chunkier topics than we originally imagined, as it turns out... :)

Anyway, if you haven't checked out the Opera Web Standards Curriculum already, head on over and take a look.

lgwebnetwork 2008 podcasts are up

2008-09-28T22:13:00.003+10:00

One of the great things about our industry is being around people who are passionate and motivated. People who take ideas and make them real.

A few weeks ago I was fortunate enough to be part of the first Local Government Web Network conference - We Believe in Community - run by Diana Mounter and Reem Abdelaty.

Colin and I met Diana at Web Directions South 2007. The three of us traded war stories about building developer networks within large organisations - we'd done it at Griffith University, while Diana was working to connect local government web developers across NSW. Anyone who thinks that sort of thing is easy probably hasn't tried it!

It's great to see how well the LGWebNetwork has come together in the past year. We Believe in Community was a slick, professional conference with greate energy amonst the attendees and speakers. I was particularly chuffed to be asked to do the second day's opening keynote.

(Photo by Ruth Ellison)

In my talk I discussed some of the lessons learned trying to achieve change in large organisations. I think I also increased sales for the coffee shop outside, after extolling the virtues of espresso as a social networking tool...

You can now listen to podcasts of all the talks via the LGWebNetwork speakers and pressos page (if you're really keen you can go straight to the podcast of my talk).

More about the event:

I also feel compelled to mention the bright red swag bag was one of the coolest conference bags I've ever received; and the speakers' gift was a knockout - a custom engraved red iPod Shuffle. Talk about the joy of the unexpected! :)

adventures in blogger's openid support

2008-09-10T22:25:00.006+10:00

Webjam 8 is announced. Awesome!

Need to register with OpenID. OK, well I signed up for one of the OpenID services a couple of years ago, but it was the least memorable URL in history and well, I can't even remember which service it was.

I do have a Blogger account though, which I can remember and should work for OpenID now: Blogger in Draft: New feature: Blogger as OpenID provider.

Awesome! My blog already has OpenID meta tags, so I bang in the URL.

Your blog is not supported for use as an OpenID URL. Please check the following: Is your blog externally hosted? OpenID is only supported for blogs hosted on Blogger...

Not awesome. I host my blog on my own domain. But wait! I can delegate to any blogspot-hosted blog: Blogger in Draft: Using Blogger’s OpenID with any URL

OK, so I need to make an extra blog on blogspot just for open ID. Not awesome, but hey it's their infrastructure. Hopefully they'll sort out the problem later anyway and I can delete it.

Add delegation meta tag to my real blog. Republish. Now my real blog is my OpenID URL.

Awesome.

shiny chromey new things

2008-09-03T22:10:00.008+10:00

It's not every day a whole new browser comes out. It's even less common for that new browser to make lead story status in mainstream media outlets*. But today both happened as Google released their browser, Chrome.

Initial impressions are that its 'innovative features' are essentially an amalgam of other browsers; plus it uses bits of Safari, Firefox and IE (settings panel) so it's kind of Frankenstein's browser. But no matter what you think of its pedigree it does feel fast.

[*] Chrome's release was top story news at The Australian and news.com.au, for those of you playing at home. It might have been top story on other sites too, I didn't have time to look around. Standard disclaimer: I work for News Digital Media.

how fast is it?

Precisely how fast it is depends on who you ask. Naturally if you ask Google they'll tell you it's the fastest browser that has ever existed; although they tend to just talk about the Javascript engine rather than overall performance. Google's own Javascript benchmark yields the unsurprising result that Chrome is far quicker than the others.

Let's face facts, companies choose whichever benchmark makes their product look best. Other tests show different results:

Slickspeed JS Test Results › drewrobinson.id.au. Short version: Opera and Safari win comfortably, Chrome and Firefox are runners up, IE7 loses a lot. I also get cited as an Opera fanboy (it's a long bow to draw).
PannonRex » Shining Chrome: Browser Speed Tests. Short version: IE's really slow, Chrome narrowly beats the others.

So the only consistent result is that everything is faster than IE. I'm rather partial to Lifehacker: Speed Testing the Latest Web Browsers, where nobody won across the board :)

So, is Chrome fast? Forget the numbers, everyone says it feels fast and that's pretty much what counts at the end of the day. It's more of an emotional measurement. It's quick. Paint it red.

security and rendering flaws

Along with Webkit's benefits, Chrome also inherited its first security flaw: Serious Security Flaw in Google Chrome - ReadWriteWeb. It's not even listed as a product on Secunia yet..!

Interestingly there are also some rendering inconsistencies: Google Chrome vs Safari 3.1 on Flickr (some CSS properties not working, border-radius not anti-aliased...).

privacy controversy

It really was a big first day for Chrome, with the first privacy concerns blogged within hours: Does Google Have Rights to Everything You Send Through Chrome? - ReadWriteWeb. Matt Cutts responds that all is above board: Preventing paranoia: when does Google Chrome talk to Google.com?

Let's cut to the chase. Google can do whatever it wants with any information you enter or reveal while using their products. There is nothing to stop them. So the real question is not can they do it - yes, they can - but do you trust them not to?

Do you trust Google?

odd name

I have to say the name does seem like an odd choice to me. For anyone who didn't know, the interface elements of a browser are called the 'chrome'. So we could end up having to talk about Chrome's chrome at some point.

More to the point though, chrome is generally shiny but non-functional bling; and 'chroming' is another name for petrol or glue sniffing. Neither association seems like something you'd want with your new product. Interestingly, Wikipedia has already been updated to include a reference to 'chroming' meaning 'to browse with Google Chrome'. I didn't realise things like that became canonised in a day, but hey ;)

I guess it's not like Opera, Firefox or Mozilla are the most immediately obvious names anyway (compare that with Navigator, Explorer, Safari - all related to finding things and travelling around). So who's to judge? :)

Anyway, so far I haven't seen an explanation from Google for the name. No doubt it's out there somewhere. Maybe it was buried somewhere in that cartoon (I haven't been able to get through the whole thing, I have to admit).

a bit of fun

Google threw a lot of geeky fun into Chrome. Options are labelled with things like 'stats for nerds'; entering about:internets into the address bar reveals a fun easter egg; and some of the error messages are a bit... unconventional:

OK, so actually I could have lived without my browser saying 'Aw, snap' to me before I had my coffee ;) I do wonder if this sort of geekyness will put off mainstream users - time will tell I guess.

so why is google doing this?

There's heaps of speculation going around regarding Google's motivation for releasing a browser. After all they don't need to do it, since people are having no trouble finding Google as far as I can tell...

I think the explanation probably goes back to a message that was loud and clear at Google Developer Day (literally, they openly said this): Google wants to be synonymous with everything you do on the web.

They want all their services' names to become verbs, I guess ;) Google it. YouTube it.

Basically Google are in a position that's probably unique: the more people use the web, the more money they make (from their ads). Literally, that's as specific as it needs to get for Google. So long as we're online, they make money. I don't think there are any other companies that can say something quite so broad and still be serious.

the google gloss

We'd had the first 'do we support Chrome?' question before we'd had lunch; and it wasn't just the tech staff that were talking about Chrome. People certainly do notice Google products.

Personally, I don't think Chrome is about to sweep the world and take over the entire browser market (that said, anything's possible). There's a big novelty factor right now, but it's not so fundamentally different from any other browser that you simply can't live without it.

It's fast, it's multi-threaded, it has tabs. Umm, just like most other browsers. Even the Wikipedia entry for Chrome is littered with 'like Opera' and 'like Firefox' references. There's even a 'like IE8' in there.

So it's probably not going to cruel the other 'alternative' browsers from the market. I do think it's a legitimate danger to IE though. It's the only other browser from a company the average punter has actually heard of.

Think about that - a lot of alternative and open source products get smashed by FUD tactics. "They're too small", "how do you know it's made properly" and that sort of crap. But it's harder to get that sort of FUD going over a product from a company as widely recognised as Google.

last thoughts

Google might attract conspiracy theorists as fast as geeks, but nobody thinks they're a flash in the pan. People who wouldn't try an open source product like Firefox might just give Chrome a go (they probably won't even notice Chrome's open source). People who've never heard of Opera won't know where they can already get speed dial and top placement of tabs. Lots of things that geeks think about simply won't matter.

I can see a lot of people trying Chrome even though they've always used IE. Quite a few of them will probably like what they see, too. It's a pretty good browser and it'd certainly be new and shiny after years of IE. That, or people will just stick with whatever they're already using, since habits don't change easily.

One thing is for sure - it's going to be interesting to see what happens next.

...

Update 2008.09.07 - It has come to light that Chrome does not support even basic accessibility features in its first release: Google Chrome Accessibility - The Paciello Group Blog. Google has a terrible track record for accessibility, so it's discouraging to see Chrome start badly in this regard.

Obviously it remains to be seen whether accessibility features are incorporated as the browser progresses. A comment at the Paciello Group Blog post suggests that Google do plan to incorporate accessibility features, they just didn't put them into the initial release. Here's hoping that's true.

ie8 not defaulting to ie8 rendering after all

2008-08-30T17:04:00.013+10:00

A while back, Microsoft stunned the standards world by responding to developer objections and agreeing to have IE8 render like IE8 by default (and yes there are many things in that sentence that should be wrong, but aren't).

Nobody could quite believe that Microsoft would really do something that genuinely supported web standards, especially when they were reluctant to do it.

Sadly the disbelief was justified - Microsoft have now done a backflip on their backflip. IE8 won't always default to rendering in standards mode after all, interoperability principles notwithstanding.

The latest idea is that IE8 will render in IE8/standards mode by default for general web pages; put a "broken page" icon on the toolbar when in IE8/standards mode; default to IE7 mode for intranets; and let the user change the defaults if they want to.

Because that's so much simpler than having IE8 render like IE8 unless explicitly told to do otherwise.

A couple of links if you hadn't heard:

IEBlog : Introducing Compatibility View, which is an odd mix of technical detail and rampant marketing spin. Watch out for the term "IE7 capable", which I think means "breaks in IE8".
Comment: Microsoft breaks IE8 interoperability promise | The Register where Opera's CTO rakes them over the coals for marking standards-compliant pages with a 'broken page' icon.

broken page icon?

OK, so technically the broken page icon means "go into compatibility view". It replaces the more accurately-named "Emulate IE7" button from the previous beta. But that's not really what it looks like:

That looks like "broken page" to me. Which is particularly annoying as it will only be shown when the page is being rendered in standards mode; and it will be placed in the address bar rather than somewhere like the "Tools" menu.

it's all about the intranets

Obviously I am not surprised by this development in the saga. I said last time around that X-UA-Compatible is all about 'not breaking bad web apps' and this just confirms my suspicions.

The only sites that will render in IE7 mode by default are those accessed by local URLs like http://intranet/. Of course if you can access your intranet using both http://intranet/ and http://www.intranet.real.domain/ then you're going to see it in two different rendering modes.

So I guess you're going to have to forward one to the other or set the meta tag/HTTP header with the correct rendering mode. Which begs the question why this change was useful in the first place, if intranet developers still end up having to modify settings somewhere along the line. Why not leave things as they were - get intranet developers to just set X-UA-Compatible and be done with it?

But instead Microsoft decided to modify IE8's rendering mode selection process again.

Ok, so it's just intranets. This isn't so bad, right?

Not quite.

the defaults aren't

The nasty little rider in this latest announcement is the fact that users can now 'apply compatibility view' for all websites:

That user choice (and display of the broken page icon) can be overridden by developers using the meta tag or HTTP header. That makes sense, since the developer should know for sure if their site will work in IE8 or not.

But... think that through for a moment, and you'll realise we're back to square one. We now have to modify all our sites, all the time, since users can override our chosen rendering mode if we chose the default rendering (that is, we wanted IE8 to render as IE8 like Microsoft promised last time around).

If we build a site that works in IE8 and then leave things to the default, IE8 users with 'display all websites in Compatibility View' selected will see the site rendered like IE7.

Awesome, isn't it?

confusing for users

I really do wonder what the average user is going to make of this.

I can't fathom why Microsoft thinks the average user is going to know when to click the busted browser button. It's essentially asking the user to understand the finer points of standards compliance and rendering modes, when most users still seem barely aware that the blue e icon on their desktop is not actually "the internet".

Average users shouldn't need to select rendering modes! They should be able to just browse, letting developers and browser makers sort out the details.

But if the user is presented with the option at some point I can them going for the "safe" sounding option of enabling "compability view" for all websites. After all... it sounds kind of like a good thing, right? Compatibility is good, yeah?

so where does this leave developers?

Well, we have two options if we want to build sites that work in IE8, in IE8 rendering mode:

Leave things to the defaults, and ignore users who've set IE7 mode to be on all the time.
Explicitly set our sites to render in IE8 mode, even though we did the right thing and shouldn't have to fart around with X-UA-Compatible.

Logically I think most of us will go with Option 2, since you don't want a user to think your site is broken because they're seeing the "broken site" icon; or worse still have the page actually break because the user is applying the wrong rendering mode.

no real surprises

We are back to what Microsoft wanted to do in the first place. We have to specifically choose a rendering mode for IE8, since there's no reliable default under this new model.

But Microsoft can still say that by default an internet page will render in IE8 mode. They can still pay lip service to interoperability, even if they're not really getting into the spirit of the thing.

It's not a hard equation really: Microsoft makes money off intranets, but doesn't make money off web standards. So, they're always going to protect their intranet interests over web standards considerations.

It's a little sad, since for a while there it looked like Microsoft was actually responding to developer feedback. But it's not surprising to find out that you can't trust a multinational corporation to keep a promise it didn't want to make in the first place.

speaking gigs coming up

2008-07-27T22:54:00.004+10:00

For those of you who don't obsessively read my sidebar (and my goodness I've no idea how you can be so lax ;)) I have some speaking gigs coming up (including one this coming week!):

Open Publish 08, Sydney, 30-31 July - I'm speaking on day two (Thursday). Fellow speakers include Russ Weakley, John Allsopp and Rod Peno.
Local Government Web Network Conference 08, Sydney, 21-22 August - I'm really excited to be doing the opening keynote on day two. The speaker list is awesome for this grassroots event - it's going to rock! (technical term ;))
Edge of the Web, Perth, 6-7 November. Really looking forward to this one; and hoping we can get a good Sydney posse together. After all the Perth crew have crossed the nation many times to come to Sydney - it's about time we returned the favour :)

adding opera buttons for dragonfly and cache reload

2008-07-11T21:46:00.006+10:00

Opera has some great features buried in its menus, so I make a couple of buttons to add them to the standard toolbars.

The first one I use is Reload From Cache, which does exactly what it says. It reloads the page entirely from cache, which is really useful when you combine it with the ability to view source in your choice of text editor. You can view source, make some test changes, reload from cache and see if it worked. It's less twitchy than inline editing since it only reloads when you're ready; and it's far less aggravating than trying to do serious edits in a tiny window with no syntax highlighting.

The second is bleeding obvious - a button on your toolbar to load Dragonfly. I'm sure they'll add one as standard once it's out of beta, but who's that patient? :)

So anyway, here are the buttons. Click the links and they'll get added to your custom buttons; then you can drag them onto whichever toolbar you like.

full instructions

Either click and drag the link to the toolbar of your choice, or...

Click the link and then ok to add it to your buttons
Right click a toolbar and select Customise
Go to the Buttons tab and select My Buttons at the bottom left
Drag the button to the toolbar of your choice
Click ok and you should have a new button on your toolbar

to make more buttons

If you want to make more buttons of your own, check out the Opera Custom Button & Command Creator.

opera web standards curriculum

2008-07-08T21:52:00.003+10:00

I've often been asked if I know of a good, comprehensive set of standards-based web development tutorials. Something to give a student or keen newbie so they can learn the right way to build websites from the ground up, instead of learning outdated techniques they'll just need to replace.

Sadly, I've often been at a bit of a loss. Most of the tutorials I could find out there either taught old methodologies or they jumped straight to an intermediate or advanced level. Or, they simply couldn't cover the entire topic of standards-based web development.

I've also been frustrated at the slow pace of change at many universities, where students are still being taught techniques that are well past their use-by date. Don't get me wrong here. I know academia is not the easy life that popular opinion would have you believe. So I think the industry should do its best to support academics, as they are training the next group of bright young developers.

So with all these things in mind, I was really happy to be one of the authors for the Opera Web Standards Curriculum (WSC). It's a comprehensive resource for students, teachers, corporate trainers and developers. The first 21 articles have just been released; and there are about 30 more in the pipeline to be released soon.

Check it out! I hope you find it useful. Head on over to the WSC homepage or jump straight to the WSC table of contents if you're keen to dive right in. If you have any feedback the best way to go is to get in touch with Chris Mills, the mastermind of the project. There's also a WSC forum if that is more your style.

wordle meme

2008-06-15T12:15:00.000+10:00

Meme: Go to your blog/website/whatever. Select-all (ctrl-a) and copy. Then head to Wordle, paste your clipboard into the text area and voila!

Wordle takes a block of text and extracts keywords into a tag cloud. The cool thing is you can drop in any text. A fun exercise for the reader... compare the homepages of your favourite media outlets ;)

the problem with light grey

2008-06-03T22:12:00.005+10:00

Colour contrast is not just about accessibility for people with poor vision. Recently I've had a great example of contrast issues caused by LCD screens.

My machine at work has problems with light grey. During a site build I once had our designer enquire when I was going to put the background into a column - only to be a bit taken aback when I said there wasn't one.

Me: What background?
Her: Err... the one in the right-hand column. There's a gradient.
Me: No there isn't. Not in the mockup you sent me.
Her: There really is, I'm checking the file now.
Me: *pause while I hit the offending column with magic wand*; Hmmm.; Ummm. OK, it's there, but I can't see it.
Her: You realise that doesn't make sense, right?

Eventually we compared monitors - on hers it was clear as day, on mine it was invisible. I tried tweaking the settings and no combination of brightness and contrast was acceptable (I suspect there's a gamma setting hidden somewhere in the labyrinthine driver settings, but I'm yet to find it). By the time I could see the greys, everything else was looking insane.

In the end, I implemented that gradient flying blind. I knew it was there, Magic Wand could find it. So I cut up the image and we tested on someone else's machine. These days I have a second monitor which shows things a little bit better.

having not learned...

I got caught out again while redeveloping this blog. I decided to put a nice, subtle, light-grey quote mark on the block quotes. It was fine on my home machine. But then I checked the test site on my work machine and did a double-take, thinking the images had broken somehow. The quote just wasn't there.

This is what should have been there. Note the quote mark to the left of the indented blockquote:

This is what I saw:

The only way I could tell the images hadn't broken was to take a screen shot and take a stab with my good friend the Magic Wand:

So in the end I cranked the grey up to a darker grey. It's not quite as aesthetically pleasing, but at least you can see the bugger on most monitors. Even so, it still isn't a fully accessible shade of grey; but it is a decorative image (and the large indent also indicates quotation) so on this occasion I'm living with it.

it's laptops too...

I've been using an old laptop during meetings and it has the same problem. In fact it's not just grey, it's any light colour.

In Gmail, the read/unread background colour difference is invisible. The only way you can tell which emails are unread is the fact they're bold.

This is what I normally see:

This is a rough simulation of the laptop screen:

Lucky Gmail does the bold/normal weight change as well. Remember the checkpoint - do not indicate meaning with colour alone? That's why.

so, always test contrast

None of this should come as a surprise - we know that colour combinations need sufficient contrast for all kinds of reasons. Had I tested my quote marks with the Contrast Analyser I would have picked it up sooner.

But it serves as yet another demonstration that accessibility requirements benefit just about everyone at some stage. Jump onto my workstation or an old laptop and suddenly you have a low-contrast vision impairment.

blogger tips for web developers

2008-05-25T22:24:00.002+10:00

I've been using Blogger since 2001, so I'm pretty familiar with how it works (or doesn't, in some cases). I thought I'd share a few tips for anyone who might be using Blogger for the first time.

initial configuration

There are couple of key things to be aware of when you start:

You definitely need to go through [Settings → Formatting] thoroughly.
- It sets the timezone and timestamp format, for a start.
- It also lets you set up a "post template", some preset markup to appear when you start a new post.
Blogger has two templating systems: the newer "layouts" and the older "classic templates". Layouts are only available if you host on blog*spot, either with a blogspot.com URL or by using a custom domain name. If you host your site on your own server, you cannot use layouts - you can only use templates. Since I host my own sites, all the following instructions relate to templates.
The blog design is controlled by one single template (HTML with some "blogger tags"), with conditional code for different page types.
Get to know the conditional Blogger tags.
- They let you change display for the homepage, post pages and archive pages.
- Note that label index pages (tag pages) get the homepage template.
Change or disable the Blogger NavBar in the Template tab.
- You can choose a suitable colour or turn it off.
- You can only turn it off if you are hosting on your own site.
Some tags only work inside the <blogger></blogger> tags, others work anywhere.

better titles

Blogger's default <title> choices aren't to everyone's taste:

Main/index page: Name of blog
Post/item page: Name of blog: title of post
Archive page: Name of blog: Month YYYY

The homepage isn't really an issue, but for post pages I prefer the post title first and then the blog name. That is, put the most specific information first - it's more readable and better for SEO. I'd prefer to follow that scheme for archive pages too, but the date is only available in the preset format. The best you can do is add the word "archive" to clarify things a bit. This solution is adapted from Blogger Meta Tags:

<mainpage><title><$BlogTitle$></title></mainpage> <ArchivePage><title><$BlogPageTitle$> Archive</title></ArchivePage> <itempage><title><blogger><$BlogItemTitle$></blogger> | <$BlogTitle$></title></itempage>

This will produce:

Main/index page: Name of blog
Post/item page: Title of post | Name of blog
Archive page: Name of blog: Month YYYY Archive

You can use the same solution to control the contents of meta tags.

avoid indexing of duplicate content

Blogger's archive pages include the entire post. What that tends to do in Google is return sometimes-bizzare combinations of keywords, or your archive page will rank more highly than the specific relevant post.

I do two things to try to stop this. First, I use rel="bookmark" in links to posts; and I include relevant robots instructions on archive pages:

<ArchivePage><meta name="robots" content="noindex,follow" /></ArchivePage>

This seems to work, but YMMV.

control inserted code

Out of the box, Blogger will top and tail your posts with <div style="clear:both;"></div> and <div style="clear:both; padding-bottom:0.25em">. This is primarily to enable float-based positioning of uploaded images, without forcing your average blogger to learn float layouts. For similar reasons, line breaks are converted into <br /> tags.

To disable these settings, go into [Settings → Formatting]. The options are "enable float alignment" and "convert line breaks" respectively. If you disable the line breaks option, note that you will have to add paragraphs yourself. This doesn't bother me as I generally don't use the inline editor to write long posts anyway.

whitespace

Whitespace isn't ideal - Blogger does mess around with it a little. One thing to be aware of is that conditional code will leave whitespace. So if you have three options on three lines, you will always get three lines in your source code. Only the relevant lines will render anything. If this bugs you, put all the options onto one single line.

Also, only the first line of your post body will be indented correctly. All following lines will be flush left. This doesn't happen to comments so I assume the whitespace rules expect one big div or paragraph with break tags. I don't think this one can be fixed.

annoying things you can't change

There are some things I've not yet found a way to change.

Tags are called "labels" and are appended to your post in their own paragraph: <p class="blogger-labels">Labels: <a rel='tag' href="URL">tagname</a></p>
Label index pages show the full text of every single post. So, if you publish a lot with that label, that page is massive. It needs pagination, or an option for summary view.
Line breaks in comments are converted to uppercase breaks - <BR/>
Comment attribution comes with a hard-coded icon indicating the commenter's authentication method and their supplied name (or "anonymous") as in this example: <span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="http://www.blogger.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span> <span class="anon-comment-author">Anonymous</span> ... well ok, you can "change" this by using display: none; and inserting your own chosen code. But, the original will still be in the markup.
If you upload an image through Blogger's interface, it displays at 400px wide and links to the larger image. Of course, if you want your images to be 400px wide this is a brilliant feature! ;) Personally when this is an issue I just upload images manually, or use Flickr.

If any of those are deal-breakers for you, Blogger might not be the right tool. Personally I've decided I can live with them - although yes, that does mean I had to accept my post pages won't validate when comments have line breaks. That's an annoying validation error, but not one which causes actual problems. So I've decided that yes I can live with it.

a gripe about support

Blogger is massively popular. While that's cool and all, it does mean that the support system is basically designed to avoid tens of thousands of low-expertise users spamming their inbox. It's all done by volume, near as I can tell - you vote for features and you effectively vote on bug priority. It's understandable, but you still feel a bit like you are shouting into a void when you try to send feedback.

conclusion

I've never claimed Blogger is a perfect tool. There are plenty of things I'd change, but overall it's pretty good and you can produce a good quality site - break tags in comments aside :)

In a way, the thing to accept with Blogger is that - like most popular blog tools - it's aimed more at the mass market than professional web development. That does introduce a few limitations, but overall it's still a well-featured tool that's really easy to use.

exposing microformat content in the browser

2008-05-23T21:57:00.003+10:00

It has been noted, over at the relaunched Webmonkey, that Microformat support seems to have dropped out of Firefox 3.

What has actually happened is that FF3 has an API for microformatted content but no UI to display it. There was a concern about how to alert the user and then how to let them access the data.

The short story is that even with Firefox 3, you'll need to install an add-on like Operator to take advantage of microformats data on the web. The reason the user interface is missing is because, as Kaply says, "there was never any agreement as to how to expose (microformats)".

Mozilla and the Firefox developers variously considered a sidebar or a toolbar, but decided that both would take up too much screen real estate.

Is this really such a difficult question? Why not just display the microformats logo next to the RSS logo in the address bar?

It's extensible - after clicking you would get a list of available microformatted items, just like you get a list of available feeds. It follows an existing paradigm set up by the RSS logo, specifically that the data on screen is available in another format. It takes up a tiny amount of screen real estate.

Opera already adds a logo in this manner when the content is available as a widget:

It's hardly a stretch to imagine a Microformats icon as well (ignoring the fact that I'm no icon designer :)):

It feels pretty natural and you're already used to the RSS icon appearing in that location. Obviously there's an upper limit on how many logos you'd want, but that issue applies to the RSS icon too.

The security and maintenance issues of how to process the data do remain, of course. How do you update the processing routines, for instance? But even that seems like a minor issue when you consider how often Firefox updates get pushed out.

Updates seem like even less of an issue when you consider the frequency of new microformats being released - ie. not very often. Seriously, plenty get discussed but the list of actual "specification" grade microformats has barely changed in the past 18 months. In fact, off the top of my head I don't think it actually has changed in the past 18 months.

So, my suggestion to browser makers could be summarised like this:

When microformat content is identified in the page, display a microformat icon in the same way the browser displays the RSS icon.
Only support those microformats designated "specifications". Or even just support hCard and hCalendar, which are the ones most likely to be useful to the user in a browsing context.
When the specs change, include the parsing changes in your next update.

It's just a thought. At any rate, the lack of UI to access the Microformat API in Firefox just means that nothing changes for the time being. People who want to use Microformats use something like the Operator extension. Sometime in future the UI issue will no doubt get resolved one way or another.

new look for the 200ok weblog

2008-05-22T22:34:00.002+10:00

After three years, I thought it was about time to launch a new look for this site. Although I liked a lot of features of the old design, it just wasn't hanging together any more.

So I've gone down the path of "realign, not redesign". I've kept the garden theme, but changed the layout around and properly incorporated the stamp. I've made the bookmarks a bit more prominent and dropped the out-of-date linkroll (haven't decided if I'll bring it back later, and if so how/what format). In general, I've just updated it to a fresher look.

A couple of functionality changes...

Tags will now go to post index pages instead of Technorati (older posts will slowly get converted to the new system)
I've added a combined feed with both the posts and bookmarks. The posts-only feed is still available too, of course.
The old "extras" feed will keep working but I'm retiring it from the site (it was never a particularly logical combination of content).

Some quirks do come through from strange hard-coded Blogger restrictions.

Tags are called "labels" and they come hard-coded with their own description and paragraph tag.
The logo on label index pages doesn't link back to the homepage, because it seems to apply the homepage template.
Comments display the authentication method of the user, although I can live with that (show us yer Openid ;)).
Pages with multi-paragraph comments won't validate thanks to Blogger's love of uppercase break tags.

So anyway, that's where I'm up to :) Feel free to comment or email with feedback (or you spot any bugs).