the 200ok weblog

how to structure html headings and titles

2010-03-12T00:16:00.004+11:00

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:

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

Site headings:

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

Page titles across the site:

The homepage simply gets the site name
Moving into the site, increasingly specific information is added to the start of the title
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:

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.

Add more-specific information to the start of the title as you move deeper into the site.

Consistency is absolutely the key here. Always

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!

Notes from WSG Sydney 2009.11.11

2009-11-12T00:46:00.004+11:00

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)

Principles
Form	Shape
Colour	Figure
Shape	Ground
Size	Proximity

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

hacking government data

2009-11-02T22:25:00.003+11:00

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.

WDS09: the notes

2009-10-26T01:00:00.004+11:00

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

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.
Captions and audio descriptions [missed details]
Audio control – pause/stop needs to be at the start of the page so screen reader users can turn things off quickly and easily.
Exceptions – eg. Specifying alt=”” for decorative images; live video has concessions
Colour contrast [missed details]
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.
On focus/on input – don't change things based on focus, eg. Dropdowns fire when keyboard users are trying to use them.
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).
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.
Keyboard operability – more extensive than WCAG 1

Top 10 things you might not have noticed...

Group of images and alt – allows for a set of images to just have one alt between them.
Combine link and image when they are one and the same, or use null alt
longdesc must be referred to in alt text
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
Stop blinking content on page refresh – if the user can stop content blinking by refreshing the page, that complies
Changing presentation of text must be described in text
Changing decorative images must be keyboard controllable
onkeypress should be avoided – problem with onkeypress is it can fire when you don't want it to
All data tables must have captions and summaries – this could be a bit strange in HTML5 where the summary attr is deprecated.
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.

accessibility vs. alpha transparency

2009-09-09T19:09:00.004+10:00

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.

Testing alpha transparency - black text on white
rgba	Hex	Example	CCA Luminosity Test
rgba(0%, 0%, 0%, 1.0)	#000000	Example	Passes
rgba(0%, 0%, 0%, 0.9)	#1A1A1A	Example	Passes
rgba(0%, 0%, 0%, 0.8)	#323232	Example	Passes
rgba(0%, 0%, 0%, 0.7)	#4C4C4C	Example	Passes
rgba(0%, 0%, 0%, 0.6)	#666666	Example	Fails 1/4 tests
rgba(0%, 0%, 0%, 0.5)	#7E7E7E	Example	Fails 3/4 tests
rgba(0%, 0%, 0%, 0.4)	#999999	Example	Fails
rgba(0%, 0%, 0%, 0.3)	#B3B3B3	Example	Fails
rgba(0%, 0%, 0%, 0.2)	#CDCDCD	Example	Fails
rgba(0%, 0%, 0%, 0.1)	#E5E5E5	Example	Fails
rgba(0%, 0%, 0%, 0)	#FFFFFF	Example	Fails

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.

Coffee Theory

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

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

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

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

Large organisations only survive because people drink coffee.

It’s all about people

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

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

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

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

Communication Problems

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

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

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

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

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

So how does coffee help?

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

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

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

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

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

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

Extend your social network

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

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

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

Don’t get carried away…

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

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

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

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

The coffee shop is not a boardroom!

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

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

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

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

“But I don’t like coffee…”

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

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

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

What about beer?

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

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

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

To the coffee shop!

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

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

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

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

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

Now, who’s up for a coffee?

proudly naked

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

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

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

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

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

putting ie6 out to pasture

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

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

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

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

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

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

why now?

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

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

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

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

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

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

just how old is ie6, again?

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

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

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

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

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

Internet Explorer 8 Business FAQ (PDF)

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

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

options for "not supporting" ie6

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

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

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

So, here are some options:

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

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

arguments and questions

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

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

last thoughts

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

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

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

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

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

Review: Asus Eee PC 1000H

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

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

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

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

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

price and portability

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

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

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

battery life

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

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

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

keyboard

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

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

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

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

touchpad

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

screen

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

performance

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

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

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

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

glitches

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

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

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

summary

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

Good:

cheap
light
extremely good battery life

Bad:

annoying battery LED
right-hand shift key in wrong place

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

microsoft virtual pc tips

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

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

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

Moments of Connection

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

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

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

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

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

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

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

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

...

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

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

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

the net keeps me connected

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

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

connected moments

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

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

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

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

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

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

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

L-R: me, Derek, Chaals.

And that's the really good stuff :)

...and you?

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

What's your moment of connection?

Choose your resolution

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

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

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

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

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

(Statistics from TheCounter.com November 2008 resolution data)

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

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

bigger and... broken?!

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

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

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

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

what's bad at high resolution?

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

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

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

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

what's ok at high resolution?

Elastic layouts
Fixed width + center aligned

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

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

so how do you choose a resolution?

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

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

define support levels

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

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

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

use your own stats to make decisions

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

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

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

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

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

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

the process

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

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

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

conclusion

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

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

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

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

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

it's barcamp season...

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

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

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

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

get your barcamp on

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

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

web standards group sydney, 2008.10.07

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

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

Chris Khalil – Ambient Personalisation

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

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

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

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

news.com.au (soon to be relaunched)

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

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

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

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

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

www.chriskhalil.com

Lachlan Hunt – New Stuff in Web Standards

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

Design principles

Include, but not restricted to...

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

What's new?

HTML

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

CSS

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

DOM

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

Development tools

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

Q&A

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

http://lachy.id.au/slides

wds08: the stream

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

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

Day Zero

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

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

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

Day One

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

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

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

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

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

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

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

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

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

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

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

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

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

Derek Featherstone - Accessibility beyond compliance

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

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

But seriously, who denies geeks caffeine? :)

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

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

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

Grant Young – social media

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

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

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

JS libraries

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

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

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

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

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

Jeff Croft

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

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

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

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

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

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

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

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

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

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

August de los Reyes

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

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

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

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

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

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

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

Day One drinks

Webjam 8

Day two

Jeff Veen – Designing through data

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

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

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

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

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

Link: veen.com/wds08.pdf

Note - connectivity issues ensued.

Jina Bolton – sexy stylesheets

Michael(tm) - HTML5

Miles Eftos – openid, oauth

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

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

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

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

Daniel Burka

Surface and afternoon tea

Mark Pesce

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

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

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

after party

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

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

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

The day after...

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

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

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

Sunday

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

wds08: the notes

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

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

Day One

Lynne D Johnson: New Media...New Rules

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

Derek Featherstone – accessibility beyond compliance

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

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

Grant Young – social media

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

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

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

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

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

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

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

Javascript Libraries panel

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

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

So, that's what I do.

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

Jeff Croft - typograhy

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

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

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

August de los Reyes - interface/Microsoft Surface

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

Day two

Jeff Veen – Designing through data

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

Jina Bolton – sexy stylesheets

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

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

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

Michael™ - HTML5

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

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

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

[note to presenters: vim + presentations = bad]

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

Daniel Burka - usability/digg

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

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

slides on slideshare/dburka

book recommendation: “how buildings learn” by stewart brand

Mark Pesce - this, that and the other thing

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

The only notes I wrote were:

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

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

behind you, mark, behind you! #wds08

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

opera web standards curriculum updated

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

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

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

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

lgwebnetwork 2008 podcasts are up

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

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

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

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

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

(Photo by Ruth Ellison)

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

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

More about the event:

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

adventures in blogger's openid support

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

Webjam 8 is announced. Awesome!

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

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

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

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

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

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

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

Awesome.

shiny chromey new things

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

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

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

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

how fast is it?

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

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

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

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

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

security and rendering flaws

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

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

privacy controversy

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

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

Do you trust Google?

odd name

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

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

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

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

a bit of fun

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

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

so why is google doing this?

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

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

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

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

the google gloss

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

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

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

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

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

last thoughts

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

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

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

...

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

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

ie8 not defaulting to ie8 rendering after all

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

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

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

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

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

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

A couple of links if you hadn't heard:

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

broken page icon?

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

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

it's all about the intranets

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

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

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

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

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

Not quite.

the defaults aren't

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

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

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

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

Awesome, isn't it?

confusing for users

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

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

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

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

so where does this leave developers?

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

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

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

no real surprises

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

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

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

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

speaking gigs coming up

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

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

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

adding opera buttons for dragonfly and cache reload

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

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

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

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

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

Reload from cache (text button)
Reload from cache (refresh icon)*
Dragonfly (text button)
Dragonfly (widget icon)*
Toggle Dragonfly (widget icon)*

* = as suggested in comments. Thanks guys! :)

full instructions

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

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

to make more buttons

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

opera web standards curriculum

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

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

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

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

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

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