Something I've observed is frontenders and designers often sound like they're talking about the same thing, while actually talking about different things.

That wouldn't matter so much if the two roles didn't work together a lot. When you hit the Design QA phase, you don't want to discover the hard way that pixels and padding are counted very differently by different people (and machines, for that matter).

In essence, design pixels are different from frontend pixels. Photoshop and Firebug will tell you different stories; and the humans using those tools will describe things in particular ways which meet their discipline's rules, but don't necessarily meet in the middle.

What am I on about? Well, let's run through some examples from my work life... dimensions have been changed to protect the innocent.

how big's the image?

Frontenders said an image could be 100px wide. When asked, they said of course it could have a 1px border and a 1px space between image and border.

No problems, right?

Well, frontenders thought that meant an a 100px image with an overall element size of 104px wide. Designers thought the image would be 96px wide, plus borders, with an overall size of 100px.

What the?

Well, designers assumed "the image" included the borders. Frontenders on the other hand assumed "the image" was literally the image, not including the padding and border added with CSS.

Both sides of this misunderstanding were gobsmacked that the other would think differently about something so obvious.

Font sizes

"How big is the text on that page?"

Seriously, does that sound hard? Well, it turns out... people said it was 13px, Firebug calculated the size as 13.333333px (good on ya, Firebug) and screenshots taken by the designer "showed 10px".

Huh?

On further investigation, it turns out this particular designer was measuring font size from baseline to cap height. Whereas web fonts are more commonly measured by the height of the em square, that is, including the descenders as well (technically I think the em square goes from the top of the ascender rather than the cap height, but in this case it made no difference).

At any rate, the descenders accounted for the missing three pixels; and after a brief head scratch moment about where the other habit came from, fonts were measured including descenders and everyone was happy.

Sometimes you still don't get a neat solution, as some font settings will report a calculated size that doesn't match the rendered font. Don't believe me? Go make a test file with 12px Arial text and compare Firebug and a screenshot in Photoshop. I get 12px in Firebug, and 11px actual size in Photoshop.

Firebug:

Photoshop:

So, if in doubt about font sizes... check a screenshot. Don't take a code inspector's word for it.

Spacing

"Put a 20px margin in there."

We had two elements on the page, the top one finishing with a border; the one below it starting with text. The frontenders, having been instructed to put 20px margin in, set margin: 20px; and moved on - only to have the spacing come back from design QA.

What the hell?

Well, the designers measured the gap from the border to the cap height, which added up to more than 20px. The frontenders measured to the element, not the text. The designers didn't really want a 20px margin per se, they wanted a total space of 20px from the bottom border to the top of the text in the next element.

Once a single method was agreed, Design QA got faster and smoother.

So... who's right?

Who cares? Basically both sides are right. When they are working in their discipline, both sides will discuss things in the manner appropriate to their job. That's how stuff gets done.

But when design and frontend are working together, neither side is right or wrong. It's good for both to understand the other, but it is not necessary or productive to expect one or other side to rewire their heads.

What matters is for people to agree on a vocab for the task at hand, because that's how you'll get what you want in the browser.

How to avoid problems...

Avoiding these problems isn't rocket science. The simplest thing is for design and frontend to talk to each other - crazy idea I know - and define the ways things will be measured. Plain and simple - don't assume, specify.

Even without an agreed way to measure things, you can always cross check spacing and font sizes by comparing mockups and screenshots. Zoom right in there and check what's actually going on - it's a different picture than what you'll get from code inspectors.

Many designers learn to use Firebug, so they can check what the browser thinks is going on; so they can work out the discrepancy between mockup and reality. Similarly, frontend and design can be extremely effective as a pair programming team - instead of Design QA going back and forth, try sitting together and tweaking things live. It might be quicker.

Meanwhile if you're setting out a style guide for the web, it can't hurt to specify how things are measured. If you were going to write "12px; black; Arial, Helvetica" it's not hard to specify "12px (em square height); black; Arial, Helvetica".

Conclusion

Design and frontend need a common language, which can only happen if both sides accept that it's better to check the obvious than make assumptions. It's often the simple things that really trip you up, because they're so obvious nobody ever thought to check them.

The short version of all this is you need to forge a good working relationship between frontend and design. It doesn't matter what measurement system is used, so long as everyone knows what's going on.

For the past few years I've used Microsoft Virtual PC (with the free test images) for testing browsers that won't coexist on a single machine (IE in particular). It's effective, although the image expiry makes things a bit tedious at times.

Windows 7 has changed the picture by including "XP Mode" - which is not really a "mode", but a virtual Windows XP instance. I was initially discouraged to find you can't run up multiple instances of XP Mode, but thankfully you can run up multiple variations of your XP Mode instance.

The effect is the same, so I can only presume it would take some licensing guru at Microsoft to explain the reasons we have to jump through some hoops to set up a multiple-IE test environment.

The goal

The setup I currently need:

• One VM kept at IE6 (plus Firefox 3.0)
• One VM upgraded to IE7 (plus Firefox 3.5 and Safari 4)
• IE8 and latest Opera, Firefox, Safari, Chrome on the host system

In future I'll need to run up another VM with IE8, to allow for IE9 on the host system. I also tend to run up another image for use with beta and preview browsers.

Steps to get there

1. Download and install XP Mode, Virtual PC and the XP Mode Update.
• Don't fight it: use IE to download these packages. It makes the activation step much easier.
2. Start XP Mode
   • Start → All programs → Windows Virtual PC → Windows XP Mode
   • You'll end up with a Windows XP SP3 instance up and running.
3. Note this is a proper XP instance. Treat it like a real machine because that's basically what it is. That does mean you have to...
   • Install OS updates
   • Install your usual firewall and antivirus apps
4. Run Windows Update as many times as required to get up to date - just be careful not to install a new version of IE during the updates.
• I actually installed a firewall on the source image, although it's not clear if that could cause problems.
5. The colour level is initially limited to 16bit, which really isn't adequate for.... well, anything I do with VMs. So...
   • To enable 24-bit without disabling integration features, see the Sitepoint article about XP Mode and differencing. Unless you really must have 32-bit colour, I'd recommend this option.
   • To enable 32-bit colour, you need to disable integration features [Tools → Disable integration features].
6. If you have any standard system tweaks you like to do (Folder Options spring to mind) now's the time to do them. Remember that any settings you change here will be done for all the subsequent test VMs.
7. When you have your initial image patched, shut it down (don't hibernate it).
   • Note that you won't be running or using this image directly after this, but the VMs access it as their source image. Modifying the source image will break the variations, so it's recommended you don't touch it at all (set it to read only to be really sure).
8. Create a new VM using differencing:
• Start → Programs → Windows Virtual PC → Virtual Machines → Create virtual machine
• I named the first one "XP Mode IE6"
• Give each VM at least 256 megs (I give mine 512 and they're pretty happy).
• In the "Add a virtual hard disk" step, choose "Create a virtual hard disk using advanced options".
• Choose the "differencing" option and when you reach the "Specify a parent..." tab, point to "Windows XP Mode.vhd" which is the XP mode disk you just created. It will probably be in C:\Users\YOURUSERNAME\AppData\Local\Microsoft\Windows Virtual PC\Virtual Machines ...to find this, you may need to change your folder settings to show hidden files. I also found it useful to copy the location into clipboard then go back to the VM setup.
• Repeat this step at least once to get an image with IE7.
9. You should now see at least three VMs when you go to your Virtual Machines directory - the original Windows XP Mode, plus the new ones.
10. Out of the box the images have IE8 blocked in Windows Update, so...
    • To keep IE6, basically just do nothing.
    • To install IE7, you'll have to download the IE7 installer and set it up manually.
    • To install IE8: run Windows Update → Custom → Restore hidden updates → select the IE8 update → Install Updates.
11. IE6 and IE7 don't come with the developer toolbar installed, so you'll need to download the IE Developer Toolbar and install it on those VMs.
12. On each VM, change the Computer Name to avoid networking clashes.
• Go to System Properties → Computer Name → Change → enter a new computer name.
• In a corporate environment I'd suggest you use some derivative of the host machine's name, in case your network guys ever need to find this extra "machine" they're seeing.
13. Reminder... if you haven't set up security measures on your VMs, go do it now!

If you don't like the differencing method, there is an alternative method where you copy and edit the virtual machines. I've found the differencing method was pretty low-fuss in practice so I haven't tried the copy/edit method.

OS integration

On my machine I've found XP Mode VMs work like any other application... it's just that one window happens to be an entire instance of Windows XP.

There's no appreciable lag switching to the VM window even using Aero Flip (windows+tab) and you can move the window around on the screen with no issues.

Resizing the window or toggling full screen mode is an exception to the overall illusion that the VM is just another window. The VM treats the resize as an actual resolution change, with a 2-3 second pause while it resets itself. So far I haven't found that to be much of a problem since I very rarely resize my VM windows.

Going into full screen mode takes over the whole screen, same as for any remote desktop connection.

It's worth noting you can shut down the VMs and run virtualised applications like normal windows on the host machine, I just prefer running the VMs to keep the virtualised browsers together.

performance

I've been pleasantly surprised by the performance of XP Mode on my home machine. The virtual machines are responsive enough even when debugging with the IE Developer Toolbar. There's some lag, but nothing unmanageable so long as you accept that VMs are not performance machines.

The limited performance does mean testing details of your interaction animations - fades, slides etc - isn't smooth. A simple jQuery effect in IE7 jumps through a noticeable series of shades rather than a normal fade.

So the VM will be fine to do things like confirm a dropdown menu works and a fade effect occurs, but not to check that the fade is really slick. If you need high fidelity this solution probably isn't for you. Mind you, I've never seen a truly smooth VM for that kind of work.

Performance on my work machine isn't as snappy, since I also run a Java IDE; and it seems that can cripple pretty much any machine.

resource usage

My dev machines have plenty of RAM available, so I give each VM a potential 512megs to play with. But it's not like they're massive memory hogs - right now Task Manager is reporting a total of 50megs RAM used up by VPC and two VMs.

I would guess that there's some level of system cost being absorbed by other, less obviously named processes. But even with a lot of applications running at once, the VMs don't seem to stress or be stressed by the host system.

what about Virtual PC?

Setting up XP Mode includes installing Virtual PC, which implies that Virtual PC will work the same as it always did. However in my experience that's not true. I don't get a Virtual PC console and the browser testing images from Microsoft don't work very well - the integration features won't work and the VMs trap the mouse rather than behaving like a window.

If you really don't want to mess around with differencing and you rarely have to look at IE6, the free Virtual PC test images might be a solution for you. But I wouldn't want to use them all day every day.

getting files on and off the vm

Once you have your XP Mode VMs up and running, there are a few ways to get your files into the VM for testing (presuming you can't just point the browsers at a local web server).

• The easiest option is to simply share the hard drives on the host machine (requires integration features)
  • Right-click the VM file → Settings → Integration Features → Drives. You'll need to restart the VM (not hibernate) for the new drives to show up.
  • All shared drives will appear in the VM as network drives and work accordingly.
• Set up windows file sharing, the same as between two physical machines. Works much the same way as the first option, but is theoretically more secure.
• Attach a USB drive to the VM, then detach and access it from the host. It's pretty low tech, but requires zero setup.
  • Use the "USB" menu in your VM to attach and release drives.
  • Note each USB drive will only be available to one machine at a time.
• In some configurations, you might be able to copy and paste files between the VM and the host system. However even when it works, it really only copes with small files and it was very slow when I tried it (a 15meg file was painful and I gave up before a 100meg file had copied successfully). I don't know why it's so slow, but based on my experience I wouldn't recommend this option.

If you rarely need to copy or access host files from the VM, the USB option isn't too bad. I test a lot of flat files, so I go with the shared hard drives.

conclusion

Hoop jumping aside, XP Mode really is a pretty nice virtualisation system. It avoids the annoyance of expiring test images and integrates neatly into the host system. While I wouldn't switch to Windows 7 just for XP Mode, it's certainly a key feature for developers.

I've felt torn watching the current spat between Apple and Adobe. On the one hand, it might move a few people away from building Flash sites. On the other hand, it bothers me to have people act like it's suddenly a game-changer - it means they just aren't paying attention.

As an aside it also bothers me to have Steve Jobs talking about open standards, because it's unsettling to have your agenda pushed by someone who most likely doesn't give a crap about it.

With any luck, he'll get away with it. Better that than standards-based development getting smeared if this blows up in Apple's face. But anyway...

none of this is actually new

It's important to remember the game hasn't changed just because Steve Said So. All he's done is bring some unusually mainstream attention to the nuts and bolts of the web.

One specific device's lack of Flash support does not change whether Flash is a good way to build something, no matter how magically-promoted that device might be.

To generalise: Flash is heavy, slow, reinvents-and-breaks interaction paradigms, requires a plugin and isn't accessible. Sure it's possible to create light, fast, accessible, usable Flash - but in the real world, almost nobody does. As an aside, I've seen some great Flash-based art; but precious little in the way of actually-good websites in Flash.

Regardless of the quality, choosing Flash has always meant choosing interoperability limits. Flash content has only ever been available to devices with the Flash plugin installed and enabled (that second one's important too).

Adobe say that's 99% coverage, although in my experience it's lower than that - usually 90-95% and currently down to 84% on one of my sites.

The iPad doesn't really change those stats, it's simply a very high-profile member of the "no flash" contingent that was always there. Interesting that people didn't seem to care as much when it was the iPhone.

as you were

The game hasn't changed: if you want a website that will work across the maximum number of devices, don't build it in Flash.

For years standardistas have said a standards-based frontend was a better option than Flash. More flexible, ready for cross-platform development and simpler for maintenance. It's no more or less true now than it was ten years ago.

It's still up to you whether you want to follow that advice, but you'll find standards-based sites don't look like a piece of blue lego on your iPad.

A perennial question on discussion lists, and in fact at work, is how to handle heading hierarchies in pages and title structure across sites.

While there's a fair bit of opinion to be had, when people focus on creating a valid document structure the same rules consistently appear. These rules not only match up to the high-minded ideals of specification, but also serve the prosaic requirements of the daily development grind.

the rules, condensed

Page headings:

1. Only one h1 per page - it should define the one overall topic of the current page
2. All subheadings are h2; all sub-subheadings are h3; etc
3. No skipping levels (no, you can not go from h1 straight to h3)

Site headings:

1. On the homepage the site name is the h1
2. On a section/index page the site name becomes a strong, and the section name is h1
3. On a content page the article title is h1 and the site and section name are both strong

Page titles across the site:

1. The homepage simply gets the site name
2. Moving into the site, increasingly specific information is added to the start of the title
3. The names are consistently separated with a neutral character like a pipe

Putting it all together:

Homepage:

"Name of Site"

Section:

"Section Name | Name of Site"

Content page:

"Title of content which does tend to be longer | Section Name | Name of Site"

the rules, explained

what are headings and titles for, really?

Broadly speaking, headings and title structure help make your site accessible and your documents readable. They have other functions too, but these are their prime purpose.

The title should be an accurate statement of context; the h1 should clearly define what the page is about; and the heading levels should assist all users as they determine the structure of your content.

If you skip levels, if you repeat titles, if you pepper your page with h1s, if you randomly skip up and down heading levels... then you are making life hard for people who were just trying to read what you've written.

Even you don't care about people that much, if you confuse the humans you're not helping search engine bots either.

headings in a page

Page headings introduce and define the content that follows immediately after them. They set out the discrete sections of content, so the user can quickly understand what they're reading and how the sections of content relate to each other.

Subheadings group logical subsets of the content, sub-sub headings divide the content further, and so on. This sets up the document's fundamental structure. The headings relate to each other in a specific order, which needs to be maintained to avoid miscommunication.

It can help to consider how a table of contents for the page would look, since that will also reflect the page outline. For example:

• h1: Dogs
  • h2: Working dogs
    • h3: Sheep dogs
    • h3: Sniffer dogs
  • h2: Pet dogs

When you see the structure laid out this way, it is clear that Working dogs and Pet dogs are logically set at an even level. However you wouldn't group Working dogs, Sheep dogs and Pet dogs, since they are not all on the same level - sheep dogs fit within the working dogs category.

Being consistent with heading levels also pays off for maintenance. If you use headings randomly, I'm willing to bet sooner or later you'll end up trying to restyle h3 elements on one page to look like h2 elements on other pages - or something along those lines.

headings across a site

Ideally there should only be only one page per site with a particular h1, or at the least you should avoid having the same h1 on every single page (which really doesn't make sense). That rules out using an h1 for the logo on every page.

Of course on the homepage the h1 can enclose the site's name and logo; your homepage's h1 should not be "home"!

Together with a complementary title scheme you should end up with a fairly natural site hierarchy and avoid large numbers of pages all using the same h1 contents (which is misleading and confusing). The occasional double-up can be salvaged by well-written titles.

duplicate page headings

If you have two pages with the same name in two different sections, the title scheme comes to the rescue:

• "About us | Web Development | YourCorp"
• "About us | Marketing | YourCorp"

It's still a bit confusing, so it would be better to have something like:

• "About the web team | Web Development | YourCorp"
• "About the marketing team | Marketing | YourCorp"

...but since you may not control both pages, it's good to have a title scheme that can survive common issues like this.

titles across a site

Titles really need to be unique, to provide context and disambiguation. A reasonably robust system goes as follows:

1. Start with the site name on the homepage.
• If you have to add a tag line, append it after a colon ("Sitename: clever tag line for the site") but don't put it on every page across the site.
2. Add more-specific information to the start of the title as you move deeper into the site.
• Consistency is absolutely the key here. Always
3. Use a consistent, neutral separator character.
   • I use pipes (vertical bars). Although they're a bit verbose in screen readers, they're semantically pretty neutral and they are used so commonly they've taken on a sort of de facto meaning as a generic separator.

Why add the more-specific information to the start of the title?

• Screen readers start with the most relevant information, rather than starting by telling the user which site they're on for the fifteenth FRICKING time.
• Depending on screen resolution and browser, the end of the title may well be cut off in the user's interface. So you want the most contextually-important information to remain available.
• Similarly, titles tend to get truncated in search results. Get the unique stuff in first.
• SEO people - the good kind, that I trust ethically - tell me it's the way to go for good ranking. This point is intentionally last.

If you have more than one section level you have to make a discretionary call about whether to include them all or not. Too many levels in the title is just going to be overload; and you're probably best off with a proper in-page breadcrumb trail at that point.

If you just have a couple of logical steps you might get away with it. But if in doubt, just include the the immediate section name and then go straight to the site name. Basically: don't bung your breadcrumbs into the title or vice versa. They're different things, craft them as such.

the separator characters problem

pointy characters

Although it's common to see separator characters chosen because they "look a bit pointy", it's a flawed practice since most of them turn out to have a very specific meaning. Sometimes it's mathematical (<, >, etc), sometimes grammatical (», ›, etc ).

Using characters with a specific and irrelevant meaning ensures at least some people will see something that just doesn't make sense. For example, the » character is a quote mark in some languages. That means your title would read "Page Name Closing Quote Site Name", or perhaps "Page Name right double angle bracket Site Name".

To put that another way: your title is essentially gibberish. You might as well just put in "Page name MONKEYS! Site Name", at least it'd be original.

Then of course if someone gets the implementation wrong, you're going to get broken characters in your title - or for extra fun, raw HTML of encoded characters. Best just to steer clear!

greater than...?

While the greater-than and less-than signs can arguably be used to define higher and lower levels of content, I think it's ultimately too much cognitive load.

• Does greater-than imply denser content, or a higher level in the site structure (ie. lower density content)?
• Does it mean one's more important than the other?
• Are they breadcrumbs?

Ultimately it's just too much thinking, it's just getting in the way.

conversational titles

Alternative ways of handling titles are to use conversational language, "Article Name at Site Name" and "Article Name in the Section Name at Site Name". Systems like this can work pretty nicely on a small site, but do tend to collapse on bigger sites. It also sets also a more-friendly, less-formal tone that is unlikely to be popular with serious corporate clients.

relevant punctuation

You could use hyphens or colons to indicate depth... "Sitename: Article Name". If your site only has two levels this might work, but for bigger sites it's going to break. Sooner or later you'll have a page name with a hyphen or a colon, and the whole system just doesn't work.

just use pipes, already!

Regardless of what you choose, it's worth considering how many people will have to maintain and comply with the system. Especially consider how many people who don't care will have to do it. Best to keep it simple, to have a better shot at consistency against the odds.

So when all's said and done, the simplest "one rule" is to use pipes.

common questions and statements...

"But h2s are too big, I just want to use h4s."

Bad. No. If you're convinced your h2s are too big, write some CSS rather than screwing up your document structure. Besides, if you need to accommodate all six levels, you quickly discover why the higher level headings tend to be big...

"I used nothing but h5s all the way through... that's ok isn't it?"

That is at least better than jumping around, but you still should have used an h1 and some h2s.

"It doesn't matter if I skip from h1 to h3!"

Yes it does. You're implying that your document is incomplete, that there was a sectional marker left out. This could be very confusing to someone trying to follow a complex document. Think of headings like replies in a set of threaded comments: if you skip a level you make it look like something's missing. Valid structure is important for meaning.

"I'm just using h2 when the sections are bigger, the rest of the time I just use h3s."

Swap the other way around. Add in the h3s when you need the extra subheadings.

"I think it's fine to use multiple h1s in a single page..."

Some people do feel that's a valid way to go; but I just don't think so. Pages need at least one top-level heading, which logically has to be h1. That means any subsequent heading has to be a subheading, ie. an h2. If you have a page with significantly different sets of content, you don't "fix" it by using h1 all over the place - you're better off writing an h1 which explains why the disparate content is on one page in the first place. If there's no reason at all, your content structure probably needs a rethink.

"Calling them sub-sub-sub-- headings is just silly, users don't get that."

Well fair enough, so don't label them that way. In your interface, label h2 as "Subheading level 1", then h3 as "Subheading level 2" or something along those lines. Do some workshops with your users and see what actually works for them. But remember that what you do under the bonnet doesn't matter to users. They just want to get their work done. If they only have five heading levels at their disposal, plus a document title, they probably won't notice what's going on. But you'll have handled the structure for them.

last thoughts

Heading levels, title separators and so on should be chosen according to their function and not for aesthetics. Headings aren't defined by their font size, they're elements with specific (and useful!) meanings.

Using a consistent, semantically-valid scheme for headings and titles makes your site more readable and easier to navigate. It's also easier to maintain and better for search engines. It's well worth the effort to get your headings and titles in order!

Event: November Sydney Web Standards Group meeting 2009

Note... I took notes on paper (rather than with the netbook) and also missed the first few minutes of Jessica's talk, so this is not comprehensive :)

Visual design principles for electronic forms - Jessica Enders

• Visual design requirements for text tending to match up with standard accessibility practice - ie. good contrast, decent text size, etc.
• Don't worry about simple forms being "boring" or not pretty enough, just concentrate on making them easy to use.
• Adding design elements does not always help - eg. overly bright/colourful zebra striping can cause unnecessary cognitive load and actually make it harder to process the lines of the form.
• The busier the page/form, the more there is for people to mentally process.
• Figure/Ground principle - form elements are figures (shapes) in the foreground, on a background.
• Humans recognise shapes, including understanding negative space - we're attuned to shapes. So when it comes to standard form inputs, don't mess with them! Keep radio buttons round, keep checkboxes square. (Showed an example with radio buttons made into oblong shapes, really looked confusing)
• Pay attention to proximity - proximity suggests things are related, and can make things like form labels much easier to read (eg. in a vertical form, right-align the text in the labels so they are closer to the inputs)

[Scribbled this diagram down in a hurry, not 100% sure I got it right. Anyone else get it?]

The final take-homes:

• Visual design is communication
• Apply knowledge of visual perception - make informed design choices
• Anything more than the minimum is a burden

@formulate / http://formulate.com.au/articles/

Bringing PAX to the people - Mikkel Bergmann

Mikkel presented his Javascript framework, PAX. This included an explanation of the principles and purpose of PAX; and a feature tour.

• Compact but feature-complete framework
  • less than 50k for the framework (gzip and minified)
  • no need for extended set of plugins to build common features
  • core contains a considered set of features
  • there are some plugins for less popular features, to keep the core light as possible
• Out of the box, PAX gives you a set of common/standard widgets for web apps/interactions
  • form validation
  • date picker
  • autocomplete
  • tabber/tab set
  • datagrid
  • etc
• The default versions are extremely simply styled, as the expectation is you'll be customising the look and feel anyway. The aim is to encourage restyling and not get in the way while you do it.
• "It's not for everybody"... it's built to the specific purpose of building web apps
• Would love to see people get involved to make some nicer-looking examples, the current examples are aimed at showing functionality rather than being awesome designs.
• PAX is open source.

Q&A

• Does it include ARIA support? Not yet, but if there's enough interest it would absolutely be added (jump on the forum and ask for it).
• What version/status is it up to? It's technically still not final (next release is 0.9), however it is being used commercially already.
• Will the widgets keep working in future after upgrades etc? Yes, that's a big part of PAX. You should just be able to drop in the updated JS.
• Is there documentation? Yes, lots!

http://paxjs.com/

On Friday Canberra welcomed an influx of web geeks, inviting them to mash up government-supplied data in interesting and useful ways. I'm not sure anyone really knew what to expect, least of all the hosts!

The fact GovHack happened at all is a good sign, as is the existence of a Government 2.0 Taskforce (forgive them the buzzword).

It's hard to think of any organisation that's a) sitting on more data than the government, or b) less likely to stay up all night creating cool mashups with that data. So it's a smart move to bring in a group of developers who are willing to spend 24 hours getting a mashup to proof-of-concept stage.

Although I didn't attend, it was amusing follow the tweets of the increasingly sleep-deprived geeks who did go to the all-night hackfest... but it was even more interesting to see what they produced.

There's a press release about the event here: Media Release 74/2009 - Govhack Finds New Uses for Public Sector Information... however I think the best measure of the event is to have a look at the mashups chosen as standouts.

• LobbyClue was judged 'best mashup'.
• My personal favourite is Know Where You Live (works best in webkit browsers); although I may be biased since I know the guys, I think it's the slickest and most engaging mashup.
• It's Buggered, Mate (think: strine take on FixMyStreet)
• Rate-a-Loo

If you think these are cool and would like to get involved, there are more events coming up this weekend in Sydney and Melbourne. Hit the GovHack website for details.

In the tradition of my "big stonking posts", these are my notes from WDS09 - basically unedited (expect typos ;)), unfiltered for the most part (so they are a bit liveblogish in tone). Stuff [inside square brackets] is an aside, my own thoughts rather than something the speaker said. Sketch notes taken from Waferbaby's awesome sketch notes (under CC license).

Some random observations about the conference:

• Tech toy trend: Flip and other "little video camera" devices.
• Braindump trend: sketch notes.
• Topics that kept coming up: burnout, Doug Englebart's mother of all demos, computer games as inspiration.
• Coffee: excellent, free, on site. Praise be to John, Maxine and Toby's Estate.
• Back channel: weirdly quiet, were we actually paying attention or something?
• My favourite take-home of the entire conference: the concept of yoyu.

day one

Matt Webb - Escalante

• Discussing science fiction and ideas; and hiking as a spiritual and hippy experience... and that's how he wants to speak about design.
• “Design is about cultural invention.” - Jack Schulze
• Example of process: drawing a radio in various stages of evolution – not random brainstorming, a true process. “What emerges is the discovery of what it is about that original radio that persists, in spite of violent evolution.”
• Flicking through a catalogue, looking at toy hamsters and the two selling points attached to them: Hilarious sounds! Artificially intelligent! ...in something that cost nine pounds. The whole thing is dominated by budgeting considerations and there is a brilliance in the fact they're putting AI into something that has a chip that cost seven cents.
• "The three chief virtues of a programmer are laziness, impatience and hubris" Larry Wall
• Then you look at the way that the iphone app store (and things like it) disrupt the old world of needing big businesses to act as middlemen. It levels the playing field so that independents compete directly with big business, and they can win if their product is good.
• MakerBot – 3d printers that can print more printers! They had a supply problem and asked previous customers if they'd print a part for $1.
• Fanufacture is the alternative to big manufacturing. It's what you get when you outsource/take away all the boring stuff and let people do what they're passionate about. It's applying the web model to the manufacturing world.
• Macroscope – something that helps us see what the aggregation of many small actions looks like when added together. - John Thackara
• 1959 (two years before JFK's speech that sent people into space) there was a committee of congress investigating food in space, and they were interviewing a witness from the department of agriculture. Congressman Fulson [sp?] was getting frustrated with their lack of vision and imagination... and he said: "Possibly in space, the approach to vegetables might be different. Did it ever strike you that ... in space you might get a two-dimensional tomato? It might be one million miles long and as thin as a sheet of paper, aimed towards the sun?" There was a long silence, then the witness said “it is an interesting thought...” and they just moved on.
  • No gravity! When things change so much you have to rethink even simple things.
• Stuart Brand (author of How Buildings Learn) created a campaign in the sixties “why haven't we seen a photograph of the whole earth yet?” ... because he felt people didn't act like we all lived on the same planet. In 1972 NASA supplied the "blue marble" photo. The message became clear: we're in this together and we should start acting like it.
• We need macroscope ideas, like the tomato, because when the world changes what we create has to change too or it won't be relevant.
• Doug Englebart basically invented the personal computer – look this guy up!
• 
  Story – looking for the Grand Staircase-Escalante National Monument in america... after a day of driving they realised that it wasn't somewhere that you arrived at, they'd been driving through it. You couldn't get there, you could only travel through it.
• “We're at the end of a series of staircases that happened so slowly we didn't notice they were there. ... the question is what the web is at the start of.”
• “The future is here, if you care to take it.”

opened #wds09 w. a hike though fanufacture, science fiction, social capital, cybernetics, and neptune. i had fun :-) escalante!

Twitter / Matt Webb / 6:25 PM Oct 7th from web

mark boulton – web fonts

• “With typographic design, regardless of typeface, you can't not communicate.”
• How do we think of typography? Do we think of original sources, beautiful type, or a world of Arial and Verdana?
• Noted the mountain climbing process of having a base camp and doing a series of ascents and descents to more camps, before the final ascent all the way to the peak...
  
• Fonts are only one part of the picture – just one part of the typographic structure.
• Mark worked at the BBC and only worked with three typefaces for four years... it forced him to work with typography in a different way – no choosing fonts.
• Core issue with web typography is needing more fonts designed for use on screen – we have a lot of typefaces created decades or centuries ago that were never intended for use on the web.
• The foundries need to invest in more web-suitable fonts – properly hinted, designed for legibility on the screen... although they also need to put more realistic prices on the font families.
• In the tools people produce for use on the web, we should provide smarter, better defaults. Reducing the number of choices is good, help people make better design decisions rather than muddling through without guidance.
• Reduce it to a simple choice – choose a heading typeface, Georgia or Helvetica. Then, based on that choice, fill in the rest of the choices with complementary typefaces. Put a smart default together.
• We need to be careful not to get distracted by the shiny. Don't rush headlong into using @font-face just because you can. Designers need to keep the whole process in mind, all the pieces of the grid of good typography.

Q&A

Q: What do you think about free fonts?

A: Generally not too good... but they cost so much to produce, perhaps companies with money and interest might start investing in/sponsoring development of good new fonts. Create a sort of extended core font set.

ben galbraith - the state of developer tools

No notes, just need a link list for this session!

accessibility and new media

• New media offers a range of new opportunities, like usnig skype video to sign if you're deaf. However many challenges remain – captioning and subtitling are still very limited. Also some areas are still simply unknown – how accessible will cloud computing apps actually be?
• Interesting finding: assistive tech users were surveyed and found to be persistent and savvy, willing to fight through barriers to get the information and results they want. This means the investment of time and energy from developers is well spent and appreciated.
• How do people actually use assistive technology? Very commonly it's a combination of several things, usually not one single device or technology. This includes using the surprisingly extensive features built into the OS, then add something like a screen reader or magnifier.
• Macs actually have a superior set of assistive features than windows; but voiceover doesn't work with the MS Office suite (although openoffice works pretty well) and has some hit and miss problems with Safari.
• There are a lot of changes afoot, eg windows 7 includes screen magnifier and predictive text on-screen keyboard. This apparently works well on netbooks which lowers cost barrier. Combine this with free screen readers and you're getting low cost solutions.
• Also the iphone 3gs has voiceover built in!
• Changes on the development front: WCAG 2 had a more user-task-focussed approach than the code compliance focus of WCAG 1. WCAG 2 took seven years and attracted quite some argument – joe clark “to hell with wcag 1” vs the responding article “to hell with joe clark”.
• WCAG - “pour” perceivable, adjustable, understandable, robust.
• Online video – perception vs. reality.
  • Perception is that online video can't be accessible; but the reality is that the common format all support closed captions; most support alternative/multiple audio tracks.
  • Perception is that it's too hard and time consuming. However there are tools to make it easier, eg. CaptionTube for YouTube videos.
  • Perception that there's no point, hardly anyone's doing it... sadly kind of true, but it can be done. The BBC does captions and audio; and if the video was already captioned for broadcast it is relatively easy to caption for the web.
• AWAREe – www.aware.org.au – each month they put five government websites on the site and get the public to share their thoughts on those five sites. The hope is to break down commmunication gap between government and users of the site; get feedback to the government. Over time the hope is to identify not just specifics, but overall patterns as well which can assist government to make things better.

earl carseldine – jquery

[This was perhaps the maddest presentation of the conference. Not sure if we actually learned anything about jQuery, but nobody cared about that really...]

• Looking at the industry... we have issues of burnout, people being bored and unhappy. Earl thinks we should get back to the old school where the normals did not dictate what got built and how.
• Jquery – earl's choice of library because it makes things quick. Much as he likes to do things from scratch, jquery lets you get things done faster.
• Stealing from the past – remember Doug Englebart gave the mother of all demos way back in 1968!
• Fitt's Law – the amount of time required to hit a target, based on size of target and distance away. Useful for interface design stuff...
• Meanwhile the OS and the web are merging and blurring together – UI effects going from OS to web and vice versa.
• Looking at early video games – there were some brilliant ideas, but there was also a lot of crap.
• “It's our job to figure out what's useful.”
• Plagiarism for a better tomorrow. Classic one – sprites! We nicked that from games. Also grabbing physics stuff from games – bouncing, exaggeration, acceleration.
• “when fads happen god they happen hard!”
• It's not just tech – we can steal concepts from games. Learn as you play, site as a game with most commented charts and so forth. But quite simply games are fun, and we should make our stuff more fun to use.
• “your homework is to go and watch some old movies with computers in them... and rip off the ideas. eg. Password prompts with huge text and massive user feedback......! well maybe not.
• Go to the library and read books on game theory, make stuff up, make fun things!
• Reclaim the web.

cam adams – making waves

• Thick value – something that actually delivers a great result, something that adds value for the user and makes their life better in some way.
• Value judgement about adding a feature – discoverability vs efficiency. You want both but often can't have both.. and context can make a feature work for one thing but absolutely fail elsewhere.
  • eg. fwd/back buttons worked on a cd player with about ten tracks to deal with, but failed for an mp3 player with thousands of tracks. Hence ipod using the jog wheel similar to a roland 303.
• How do you user test something unfamiliar?
• “Change is good. And change makes us angry.” - Ben Parr, Mashable
  
• “If I had asked my customers what they wanted, they'd have wanted a faster horse.”- Henry Ford
• The wave team had a few features that they wouldn't budge on... but even then strong enough opposition could still win out if it became clear the problem was insurmountable.
• Googlers aren't really the same as the public so the best user testing is when it starts going out to the public. Also people use their products in ways they never imagined.
• “the future is other wave clients. And that's scary to me because someone could build a better client... but realistically the protocol and the client are intertwined.”

day two

kelly goto - workFLOW

• People go through an AHA moment, but also get into a “stuck phase”. How do you get past that to the transcendent phase?
• It's about staying in the flow where time is just passing, work is effortless, you find the balance between skill and challenge.
  • Low skill, high challenges = anxiety
  • high skill, low challenges = boredom
  • low skill, low challenges = apathy
  • high skill, high challenges = FLOW
• Flow fundamentals (the things we need): vision and purpose, support and buy in, knowledge and ability, collaboratoin and synergy, tools and framework, attitude and fearlessness, progress and results.
• In the end if you're not fearless and having fun, you won't be unstuck and in the flow.
• Not every project can allow you to reach the unstuck state... lots of factors including project type, levels of autonomy etc. It's not “one process fits all”.
• Hybrid process might include waterfall requirements gathering, followed by some sprints/iterations. Find a balance between user centred design and agile.
  
• Designers and coders – if you don't have cross skilled people, you will need to work out how to communicate between the roles. Standups/scrums can help.
• User experience and agile development combined = unstuck.
• Shoshin – beginner's mind. It's ok to be a novice, it's ok to think about things in a new way.
• Yoyu – the space in between things, time between things... do you have any yoyu time? We need to slow down, if you want to stop it's ok.
• Let's practice slow twittering... it's 140 characters, but how insightful, how thoughtful can you be?
• Final slide – fortune cookie: Exceed expectations and take vacations.

gian wild – wcag 2

• HREOC still requires you to follow WCAG 1 (ie. hasn't changed yet). However WCAG 2 will be endorsed, it's just a matter of when. May be a few months away.
• It is expected that WCAG 2 will be endorsed at the A level, encourage AA and expect AAA from sites with specific known needs.
• Gian demonstrating the massive pile of documents that comprise WCAG 2 – makes a satisfying thud when dropped on a table... not the easiest thing to read though.
• Gian really pulled these documents apart... Her recommendation: just read the Success Criterion and Techniques, or at least read those first.
• Some other resources not specifically endorsed by W3C but useful:
  • Webaim WCAG 2 tech list
  • Migrating to WCAG 2 by Roger Hudson
• Important to note that WCAG 2 decided that anything which is a an “obvious usability principle” should not be included in WCAG 2. [That seems to go against more general industry wisdom that the two are so tightly coupled that it's counter productive to force them apart.]
  • That dropped some things which would have assisted people with cognitive disabilities. eg. Clear and simple language was left out.
• In addition to A AA and AAA, there are “sufficient techniques” and “advisory techniques”.
  • Gian recommends meeting the advisory techniques as well, since they contain some good and important stuff.
• Conformance requirements – to state that you meet the conformance level you must conform completely; and whole sites must conform. That means if you have an accessible site but one feature is not accessible, the whole site fails. [Remember this doesn't mean you should blow off accessibility, it just means to assert compliance you really really have to comply. Not ticky-box comply. ]
• There are new requirements around sound and animation – you must be able to pause, stop or hide them.
  • eg. You can't have endlessly looped music/jingles that prevent a screen reader user hearing the page being read out;
  • you can't have animations if you don't give some way to disable the animations.
• “Accessibility supported” makes an allowance for using technologies that aren't accessible, by saying if it has no accessibility features you can't use those features. [That seems like an odd loophole to leave in..?!]

Top 10 changes from WCAG 1 to 2

1. CAPTCHA – always been an accessibility challenge. WCAG 2 says there are two things – first you need to describe the purpose of the CAPTCHA; and you need to provide another CAPTCHA in a different modality.
2. Captions and audio descriptions [missed details]
3. Audio control – pause/stop needs to be at the start of the page so screen reader users can turn things off quickly and easily.
4. Exceptions – eg. Specifying alt=”” for decorative images; live video has concessions
5. Colour contrast [missed details]
6. Sensory characteristics – you can't say “click the button in the bottom right corner” as the user's device/settings/etc may mean it's not actually in the bottom right corner.
7. On focus/on input – don't change things based on focus, eg. Dropdowns fire when keyboard users are trying to use them.
8. Timing – you need to be able to extend timeout periods (up to ten times). There are some realtime exceptions eg. Online auctions; and you aren't required to add ten times more time for an exam, perhaps double the time would be fine (some practicality and discretion applies).
9. Pause/stop/hide – moving, blinking, scrolling content needs controls. There are some concession when it's not parallel content, so scrolling status bars on a video are accepted as part of the primary content.
10. Keyboard operability – more extensive than WCAG 1

Top 10 things you might not have noticed...

1. Group of images and alt – allows for a set of images to just have one alt between them.
2. Combine link and image when they are one and the same, or use null alt
3. longdesc must be referred to in alt text
4. It is preferred to use an image of a glyph than an ascii character – eg. Better than using an asterisk to mark required fields on a form. If you use an image of an asterisk it's often bigger and can have useful alt text
5. Stop blinking content on page refresh – if the user can stop content blinking by refreshing the page, that complies
6. Changing presentation of text must be described in text
7. Changing decorative images must be keyboard controllable
8. onkeypress should be avoided – problem with onkeypress is it can fire when you don't want it to
9. All data tables must have captions and summaries – this could be a bit strange in HTML5 where the summary attr is deprecated.
10. title=”” can be used instead of <label for=””>

elliot jay stocks – progressive enhancement

• Lots of arguments against using CSS3 - have to wait for 100% support, have to wait for IE6 to drop out, have to give the same thing to every user... "These arguments are complete and utter bullshit!"
• We're talking about enhancements and not features – give the sexy stuff to people who will see it.
• It all comes back to the old question: do web sites need to look the same in every browser? NO. websites will never look consistent across all browsers! Too many factors/variables/rendering engines. So stop trying to reach the unreachable.
• webtypography.net
• Enhancement = reward. Intentional degradation = punishment, the removal of a treat.
• “The designer giveth and the designer taketh away!”
• eg. malarkey's site being black and white in IE6, but being done absolutely intentionally.
• Usability vs. aesthetics – usability and functionality are important, and although making it look nice is not quite as critical it should not be underrated. A pleasing visual design leads too a more fulfilling user experience.
• Variety in web design. I can haz it?
• What elliot sees: BORING (huge slide)
• Vanquish the boring! (slide goes up in flames)
• Validation is irrelevant - “yes yes bear with me” - don't be put off using a new technique just because it doesn't validate. Validation is still useful as a code checking method. One suggestion is that the validator could handle new properties differently – eg. Highlight with a warning rather than an error, or mark it as experimental.
• ...and validation doesn't truly mean conformity with standards anyway.
• Suggests we should speak in positive terms – talk about adding enhancements instead of saying we can't make it the same for everyone. We can make a good experience for most, and a great experience for some.
  
• This is not just about making things look pretty, it's also about making a future-proof site. 10% of users today are 100% of users tomorrow – the number of people seeing the enhancements will grow, not shrink. New features won't become mainstream if we don't start using them.
• Elliot's typographic journey: Describes an early experience as a young designer being confused that dreamweaver offered all the fonts on his machine without explaining you couldn't use all of them. When he realised he couldn't he became enamoured of flash and invested time learning that. But he came back to the standards way... but frustration pushed him into techniques like image replacement, which had their own problems. Sifr worked but should be treated as a stopgap measure until something better comes along... hopefully that's @font-face
• 2009: the year web typography started to grow up
• New sites to offer embeddable fonts: typkit, fontdeck, kernest; also some foundries have their own bespoke solutions.
• .webfont - “this is where it gets exciting”... proposal for a new, open standard with anti piracy stuff in an attempt to make it viable etc... however not a reality yet. Font file plus xml rights expression doesn't really protect against piracy but may be enough to mollify the foundries.
• [Alternatively the foundries could price realistically and make it possible to actually support them without sending yourself broke]
• [Selectors really aren't “small stuff”! The effect of css3 selectors on markup will be massive. Ability to move heaps of required-for-presentation classes out of markup will really clean things up. The key is getting rid of ie6 to allow multi selectors.]
• Finishing with a great definion of progressive: favouring or advocating progress, change... [look up slides]
• Don't fear degradation: plan for it.
• Aim for the stars: you might reach the moon. [I absolutely agree with this philosophy!]
• Slides at elliotjaystocks.com/speaking/ or http://www.slideshare.net/elliotjaystocks/stop-worrying-get-on-with-it-progressive-enhancement-intentional-degradation

Q&A

Q: How will foundries cope with the web when their licencsing and prices are ridiculous?

A: Some are coming around when they see the potential benefit.

Q: View on using ie filter hacks for IE?

A: It comes down to the sense of how far you're prepared to hack to achieve the result – if it won't cost too much time and you have a big ie6 audience it's ok.

christian crumlish – designing social interfaces

Five principles

• Principle: Pave the cowpaths
  • eg. The twitter @reply syntax was made up by the users and they ran with it.
  • Another one – dogster and catster where people share personal information in the voice/pov of their pet. The services were originally intended as photo sharing, but the users focussed and they ran with it.
• Principle: talk like a person
  • Don't drone like a lawyer, be conversational; self-deprecating error messages; ask questions; your vs my; no joking around – or at least be very careful, as it's very easy to use a joke that people don't get. Let the users tell each other jokes, but don't do it yourself.
• Principle: play well with others
  • Be open, use open standards, leverage what's already out there. Share data, accept external data, support two-way interoperability.
• Principle: learn from games
  • Games are often on the leading edge of interfaces and social interaction. Games set up a space in which play is possible; and then they make up what the final experience actually is. You have to give up some control for this to work.
  • Example of evolution: Game Neverending, which eventually evolved into Flickr...!
• Principle: respected the ethical dimension
  • On some level you are literally playing with peoples' lives. If you are going to get a business benefit from users' interaction then you have a responsibility to look after those people as best you can.
  • Spamming people's address book is an example of NOT respecting the ethical dimension.

96 Patterns

• Social spaces with three buckets – self, community, activities.
• Picking a few of these...
• Pattern: give people a way to be identified
  • They have to be in the system, need to have a way to identify themselves and personalise how they are shown.
• Pattern: What's your social object?
  • Objects draw attention and allow us to relate as human in a way we might not otherwise be inspired to do.
  • Give people something to do.
• Let the community elevate people and content they value.
• Public vs. private conversation... you need to be aware of this.
• Enable a bridge to real life events – people connect better after they have met.
• Using more geo information is helping this.

5 anti patterns

• An anti pattern is something that seemed like a good idea at the time... but it turns out to cause more problems than they solve.
• Anti Pattern: cargo cult
  • Imitating a form or function without understanding it.
• Anti pattern: don't break email
  • It's tempting to use email as a broadcast-only medium, usually with noreply emails... which means when they use email the way they've used it for years before you were around, it doesn't work. A better way is to work out how to cope if someone does reply.
• Anti pattern: the password anti pattern
  • Getting users to give their password away creates some big problems elsewhere
• Anti pattern: ex boyfriend bug
  • “the people you should know” list on facebook is actuallya list of people you hate. - rex sorgatz (twitter)
  • Services that keep suggesting you might want to add someone are a problem... you need to let the user say stop showing that option to me.
• Anti pattern: potemkin village
  • Story goes that a russian tzarina wanted to see the happy peasants, so they faked villages and gave her a fake tour.
  • On the web a classic example is setting up a forum – don't set up empty rooms, just start with one single place to talk. Make more rooms when the users define what they want to see created.

Q&A

Q: why are youtube comments so full of hate?

A: they were never moderated to set some boundaries.

javascript testing

• Reasons to test are pretty obvious, reasons to automate not quite as obvious but clear: testing needs to be quick and easy enough to avoid undue cost, time or reluctance to release as often as you need/want.
• End to end tests: big, powerful, convincing... but slow, inexact, high maintenance.
• Unit tests: small, quick, focussed, resilient... but limited, no integration testing.
• Healthy test pyramid: lots of unit testing, some in between, some end to end, very little manual testing.
• Using browser emulators and browser drivers have some advantages but do rely on the emulator getting it right. Safer than it used to be, but still not perfect.
• Lot of activity going on with javascript unit testing frameworks. They sit alongside your code and execute test scripts. Jsunit has been around for a while but there are some new ones coming out.
• selenium demo
• Testability:
  • coherent js modules
  • coherent tests
• unobtrusive js
• write the tests first
• Build integration is very tool-specific. Trickiness – stopping and starting servers and browsers.
• Testswarm – server which takes tests scripts, fires up browsers as workers, tests are farmed to the browsers and results aggregated. Anyone can provide computing power, seti-at-home style.
• Delicious.com/mdub/javascript+testing

dan hill – 15 years in

[On a few occasions during this closing keynote, I realised I'd stopped taking notes because I was engrossed. It's hard to do it justice with the brief notes that result.]

• Design = multidisciplinary; or an approach rather than a single discipline.
• Strategic design – redesigning your surroundings
• Eliel Saarinen: “Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.”
• Artefacts from the future: Dan Hill discussing the use of fake/spec mockups to inspire and guide clients facing a design challenge. Mockups of a future edition of a magazine the decision makers read; mockups of a magazine an organisation might put out; websites that could be built.
• Data visualisation takes dry data about a city and shows it as a living, breathing thing. It makes so much more sense to see things played out in real time.
• Fantastic discovery at the state library of Queensland – people with their own net access go there to use the net because it's a great space to use the net. It's a useful public space that attracts new people.
  • [my thought: people don't want to spend all their time at home online, even just being in a shared or different space is attractive.]
• ...so they looked at what people were doing with the wifi. Extracted keywords, destinations... looked at where is the wifi signal the strongest.
• Also simply asked people what they were doing – found people programming and committing code, uploading photos, working out of the office. Also facebook, but hey.
• Discussion needs to be taken from “what could we do” and then into “what should we do”.
• 
  The internet changes things, interactive environments change what happens there. Expectations change, the way people use the space will change. If you can be online and immersed in useful information, your experience will be totally different than before.
• Innovation and development is not dependent on a massive population, it's about culture. We need to nurture creativity.
• Redesign the culture, redesign the oceans. Redesign our surroundings.

When we get new toys, we use them... and use them... and use them... Sometimes the problem with new toys is reminding ourselves when not to use them.

Web development is no different. Support for new CSS features means we can start using things like rounded corners, font embedding and proper transparency/opacity - straight from our stylesheets.

New toys, in other words.

Some of these will create merely aesthetic issues (ready for ten-font websites?), but transparency can easily create accessibility problems for your site.

Using transparency has the side effect of reducing contrast; and for some reason it just feels like low-contrast thresholds kick in a little earlier than they do with straight colours. I'm sure it's just the "I wanna use the new toy!" factor, but there it is all the same.

contrast testing after transparency

So how fast do we hit trouble? I did a quick contrast check of black-on-white text with alpha transparency (using rgba colour). I started with opacity 1 (not transparent) and stepped through in 10% increments. Opacity 0 is included purely for the sake of completeness.

So with this simple test, applying 0.6 opacity means you're already into trouble; and 0.5 and below is an accessibility failure. There's only a completely "safe" zone of three steps down from fully opaque - and that's using black and white.

Keep in mind you will hit problems much faster with colours that are closer together. Watch out for the corporate favourite blue-on-blue.

what about backgrounds?

The colour issues are the same for backgrounds, but in practice there's a good chance you'll also be revealing an underlying graphic.

In that case you have to check your foreground colour against several sample points in your background - make sure you get both the lightest and darkest regions.

You also need to consider legibility - is the image interfering too much? Admittedly that's subjective, all I can suggest is it's likely we can't show our nifty background nearly as much as we'd like.

every old problem is new again

It's true that contrast problems aren't new, and there have been clumsy ways to use transparency for quite a while as well. However rgba and hsla colour are easy to use and now available in all good browsers (plus a hack for IE).

Growing acceptance of progressive enhancement is also fuelling the desire to use new features and push web design forwards.

So now that it's easier to implement, it's reasonable to expect an increase in designers and developers experimenting with layering colour and images. That means we need to be sure we catch the potential issues.

solving the problem

No matter how you build a site, you should check the final colour combinations carefully. Even if you already do this, you need to check your tools as not all of them can evaluate transparency.

For example the Juicy Studio Firefox extension read all ten transparencies in my test as pure black, incorrectly giving them all a pass for contrast. Although it's convenient for quick checks of basic colour, the extension currently doesn't evaluate transparency or check the colours in images.

To avoid these issues I recommend using the Paciello Group's Colour Contrast Analyser which is based on the same contrast standards, but offers an eyedropper selection tool. That way you are certain that you're testing the actual output, regardless of the technology you're using.

One good thing about contrast checks is they're not even slightly subjective - use a contrast checker, it will give you an answer (even when your monitor is screwing up your colours). It's a good point to remember when your designer is disappointed they need to change their design - it's not opinion, it's a simple fact.

last thoughts

It's easy to get caught up in the moment when trying something new, but we need to keep a level head and make sure the final product still works. There is nothing stopping us using hsla and rgba, so long as we don't throw out basic accessibility along the way.

The purpose of web pages is to convey information, and accessibility guidelines are there to make sure we do that for everyone. There's no point putting together a technically clever site if the content disappears into a low-contrast mess.

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?

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!

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:

1. 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.
2. 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.
3. 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.
4. 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).
5. 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!

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.

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.

PeteL's Blog : Running Multiple Versions Of IE On The Same Box digs a bit further into potential issues with "frankenbuild" solutions (great term :)).

So anyway, 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.
• If you have restricted access your main machine's localhost, remember that the Virtual PC should be treated liked a physically separate machine (with its own IP) and you'll need to update your settings accordingly.

Using it:

• Don't forget, you will need to hit the main machine by IP address to view any localhost/test server that you're running on it.
• Alternatively you can access files directly on your main machine by adding a shared folder (right-click the folder icon at the bottom left of Virtual PC window, then click Add Folder). The folder will show up as a drive on the virtual machine.
• 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...

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?

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)

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:

1. Look at global stats for trends
2. Look at your own stats for current numbers
3. Consider what the trends mean for your stats
4. Allocate major resolution market shares to support categories (create a support matrix)
5. 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
6. 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...

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.

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

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

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

See also: WDS08 - the notes.

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!!!]

• css3.info
• sushiandrobots.com

[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.

See also: WDS08 - the stream.

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.

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:

• Local Government Web Network Conference 2008 writeup — RuthEllison.com
• Local Government on the Open Web - LachStock.
• Flickr photos tagged lgwn08 (including my photos from lgwn08)

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! :)

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.

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.