the 200ok weblog

ARIA (sydjs lightning talk)

2013-03-24T21:24:00.003+11:00

Last week I did a five-minute lightning talk about ARIA, at Sydjs. The main point was to illustrate a secondary benefit to using ARIA, beyond the primary purpose of accessibility: taking advantage of the standardised definition of state.

If you already have to define state and declare element relationships for your JavaScript, why not use ARIA attributes instead of generic classes or data attributes?

The technique of using ARIA to attach behaviour is something we've been trying in the Atlassian frontend team. We have some components (and component options) which only work when the required DOM states and relationships are declared using ARIA. Leave out the ARIA attributes and they simply don't work. To put it another way: ARIA is part of the API.

Note this is an experimental technique, the main downside is if we need to modify our ARIA implementation we are effectively changing the API. Of course that's no different to changing any other attribute- or markup-based API and we use templating to lessen the impact. I'm simply calling out the point as maintenance impacts should be considered before you decide to roll out any technique in your own scenario! Also you must remember that including ARIA attributes doesn't guarantee accessibility - you must still test it works (and re-test after changes).

If you have an established API, you are of course totally free to add ARIA in your scripts. For example, if you already declare an equivalent to aria-owns, you should add in aria-owns when your JavaScript processes it. It's a small cost to pay for making your rich internet application accessible.

Anyway, here are the slides from the lightning talk, plus a more detailed transcript than the one generated by Slideshare.

Slides

(View ARIA (SydJS lightning talk) on slideshare)

Transcript

Slide 1

ARIA
SydJS lightning talk, 2013.03.20
Ben Buchanan / @200okpublic weblog.200ok.com.au

Slide 2

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee, 1997

Notes

You've probably seen this quote before. It gets used a lot because it demonstrates the fact Tim Berners-Lee's vision for the web has always been one of inclusivity.
Quote source: http://www.w3.org/Press/IPO-announce or http://www.w3.org/standards/webdesign/accessibility if you prefer.

Slide 3

(Photo of "This is for everyone" tweet from Olympics opening ceremony.)

Notes

During a recent speaking tour, he said accessibility has come a very long way (when considered over a decade-long period – big picture). But he also warned that JS-heavy applications were a great risk to that progress.
Image source: http://www.pocket-lint.com/news/46694/sir-tim-berners-lee-olympic-tweet
TimBL paraphrased from a Q&A session at UNSW, 2013.02.01

Slide 4

This is relevant to your interests.

Notes

As the people writing those JS-heavy applications, this is relevant to your interests...
For a long time, accessibility was touted as a bluntly JS-on or JS-off dichotomy. That misled many people into thinking accessibility was too hard; or that if you wanted to do cool stuff you were excused from accessibility.
That of course is bullshit. You can do all the JS ninja stuff you want and still make it accessible.

Slide5

ARIA

Accessible Rich Internet Applications
Enhances the DOM
Describes richer interactions

Notes

The basics are still pretty easy: test the keyboard, check the colours, ensure there's alt text. It's the richer DOM work that is harder: updating the DOM, linking elements, elements behaving like other elements. The problem with screen readers they were built to meet a load once, render once paradigm; but DOM changes weren't picked up. ARIA describes the state of the DOM in ways assistive tech can read, basically bolting accessibility back on where it had fallen off.

Slide 6

Reasons to use it

Obviously, because a11y is good
But also its freakin useful

Notes

The cool thing though is you should also think about using ARIA purely because it's frickin useful.

Slide 7

State reinvented over and over and over

class="disabled" class="enabled" class="on" class="off" class="ticked" class="checked" class="focus" class="active" class="hidden"

Notes

People reinvent state, over and over and over. Disabled, enabled, on, off, active, hidden...

Slide 8

...and over

data-my-awesome-namespace="disabled" data-my-awesome-namespace="enabled" data-my-awesome-namespace="on" data-my-awesome-namespace="off" data-my-awesome-namespace="ticked" data-my-awesome-namespace="checked" data-my-awesome-namespace="focus" data-my-awesome-namespace="active" data-my-awesome-namespace="hidden"

Notes

No matter how you're bunging this stuff into the DOM, you're still having to define and implement it all; and document it for the next person.

Slide 9

"What meaningful properties does this object have at this time?" - http://www.w3.org/TR/2010/WD-wai-aria-primer-20100916/#properties

Notes

What's interesting is all this information is the same information assistive technology needs. In order to describe rich interaction, ARIA had to define it.

Slide 10

Description requires definition

Notes

This gives us a standardised list of common interaction states, element attributes and roles... AND it makes that accessible to assistive technology.

Slide 11

Link elements
Bad:
<a>Trigger</a> <div class="tooltip" id="foo">Not announced</div>

Notes

A quick example here is a tooltip. The second element is often generated from title text, but the title has to be suppressed to avoid double up. So once you turn it into a tooltip it's no longer available to assistive tech. There is no link between these two elements in the DOM, the DIV is commonly appened to BODY and positioned with JS.

Slide 12

Link elements
Good:
<a aria-describedby="foo">Trigger</a> <div role="tooltip" id="foo">Announced</div>

Notes

Simply by changing the class to a role; and using described-by, you can solve these problems. The elements are linked in the DOM and assistive tech knows that random DIV is actually tooltip (which is a defined widget type). I can vouch this works as I've tested it, while creating a pull request that's been ignored for going on six months now... (we've since forked that library).

CAVEAT: presumes there is a role="application" or "document" higher up the DOM.

Slide 13

Side by side
Bad:
<a>Trigger</a> <div class="tooltip" id="foo">Not announced</div>

Good:
<a aria-describedby="foo">Trigger</a> <div role="tooltip" id="foo">Announced</div>

Notes:
And just a quick side by side to make it easier to see how similar the code is. While ARIA can be a little verbose, it's quite readable.

Slide 14

Dont overdo it...
Use core HTML where valid: <input type="checkbox" disabled />
ARIA fills in the gaps: <span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>

Notes

The ARIA spec itself is very clear on this: use ARIA when there is a gap that needs to be fixed. That includes gaps you've put in yourself ;) Checkbox code from https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role

Slide 15

Separate your functional CSS

DOM:

aria-hidden="true"

CSS:

[aria-hidden="true"] { display: none; }

Notes

What's interesting is once you start using ARIA states like this, you can separate the CSS that's not concerned with how things look. Many widgets have a small amount of functionality-related CSS; so you can attach that to the same attributes you're using for behaviour.

Slide 16

Support (chart showing good cross-browser support)

Notes

Screenshot from http://caniuse.com/#feat=wai-aria

Slide 17

Careful! Browsers may rock at ARIA, but suck at assistive tech. eg. Firefox + NVDA = good Chrome + NVDA = bad

Notes

Just be aware that not all combinations are equal. This is not cause to panic, just test with the right stuff. Webaim have a great guide for this: http://webaim.org/articles/screenreader_testing/

Slide 18

To summarise: Rejoice! ARIA means Javascript no longer kills kittens!

Notes

You already define state and manipulate the DOM. Use ARIA to do it and make your stuff accessible!

(this was the end of the actual lightning talk, more info slide just for sharing)

More info

Notes

One little home truth about ARIA is the specs are really hard to read. Seek out these dev-friendly options instead of the raw specs!

wds12, the big stonking post™

2012-10-23T22:40:00.001+11:00

The speaking is done, the blankets packed away to save us from the freezing aircon again next year, drinks consumed and planes have returned our friends to various corners of the globe.

It must be time for the Web Directions South 2012 Big Stonking Post™.

(photo by webdirections)

These are my rough notes hammered out on a laptop (to aid my own recall) and posted here in case they're useful for you too.

The usual notes: they're done in a hurry, if you need exact quotes check the videos later. Presume everything is a paraphrase rather than a quote.

Jump menu is old school but hey it's a big post.

Day One
Day Two

Josh Clark: Beyond Mobile – Where no geek has gone before

We are hurtling into an era of science fiction... right now! But what's keeping Josh up at night is what's next? What's going to happen post-mobile?

Let's look into the future and think about what it means for the work we do and the way we work...

First where are we now? Mobiles were the first truly personal computer – not just because they're always on us, but they know so much about us and they have so many sensors about what's happening to us. GPS, audio, video, motion detector, gyro... yet mobile is often considered the "companion" or light computing experience.

The question is not how to strip down an experience – not to do less on a mobile, but how do we do more on a mobile? How can we push the boundaries? How can we make use of information ghosts – all the information about us, about the events we're in.

We need to think beyond proximity – mapping things that are nearby has been a big focus so far. How else can these devices help us in our lives?

eg.

"Shopper" app which rearranges your shopping list according the store you're in.

"Into_Now" is like Shazam for TV, so you can figure out which season and episode you're watching.

Then there's augmented reality, where we can add visuals to things around us. So far it's been fairly gimmicky in its implementation, but there have been some compelling examples, eg. Skinvaders which makes your face into the game environment.

"Word Lens" is a little more practical, which uses OCR to live translate signs into different lanuages – even keeping the font.

This is really significant because it moves the interface off the device. The UI has to be designed for the environment around us, rather than the device screen.

"Table Drum" turns any surface into a drum kit. These apps are replacing more traditional input methods.

"Anytouch" uses the camera to turn anything into a game controller.

Of course anyone with a Kinect knows you don't even need objects to be controllers. Sometimes the best touch interface is no touch at all. There are other sensors that offer a more natural interaction than touch – touch is just the first mature sensor. Voice controls are still early days – but they are just around the corner, we can see them coming. Siri has opened up expectations.

Then there are the combinations to consider – we tend to think of designing for touch, OR speech, OR gesture... but they will develop together. Perhaps we will use a gesture to tell a device to listen to what you say next.

Gesture + Speech = MAGIC

Then there is the truly free-form world of custom inputs and sensors. The medical world is doing a lot in this area. There are experiments going on with embedding blood pressure sensors in the body, even trying to download their collected data via touch (that is, put your finger on a sensor and the data is transferred).

You can get a sensor that turns plants into touch inputs! Although it seems kind of crazy, why not access your calendar using the bamboo on your desk?

Farmers are trialling monitors on cows that detect when they're in heat and texts the farmer. Cue the jokes...

Mirroring – sharing data between devices – turns dumb devices into smart ones. Link your sensor-laden phone with your traditional television. Then you have things like the Samsung TV that uses voice and gesture instead of a remote control.

"Everything around us could potentially become smart devices – it's always toasters and fridges for some reason – but what I really don't want is all of them on different OSes with different UIs to learn. I don't need more devices and OSes in my life!"

We get into the era of remote control.

Games often lead the way in this area – eg. Games that turn your ipad into a controller for what's happening on the TV. ("metal storm" plane game)

Innovation is going on in proprietary zones, standards bodies are terrible places for innovation... but lots of things are being done that way before they get standardised (which will help them spread without fragmentation..?)

Microsoft is almost an underdog but they understand the importance of the ecosystem, so they're doing things like "Smart Glass" which makes your phone into a controller.

Then pushing further into the future – migrating interfaces. Where the interface adapts to where you are. The most common example is plugging your phone into the car, so the call comes through your car... but you can unplug the phone and continue your call just on the phone. The phone was handling the call all the while, but its control surface migrated to the car.

Putting a Siri button on steering wheels, while a sad example of being stuck in proprietary solutions... is a sign we're moving towards more powerful migratory interfaces.

Corningware makes all the glass on touch devices... they made a concept video where they really tried to make it real; and show how it really would work in your life. Example of a bedroom mirror that's a huge display for your tablet.

This is what Microsoft is trying to do with Windows 8 – make an OS that works across a wide range of devices. This is something we will all have to design for in the next few years, it's a challenge that's waiting for us to tackle it.

Much of Corningware's video is just not possible due to the cost of the materials. But higher demand usually leads to lower cost; so when might we really see this in the world?

Bill Buxton says 20 years from conception to widespread use. So the things we'll be using in five years have been in the lab for fifteen years! So we can look into the future now...

(slides stop showing.... "uh, we've lost my slides – this is also part of the future!")

Flipping contexts becomes very fun, very sexy! You can use a grab gesture at your tv and a touch on your phone, and it feels like you're putting screenshots onto the phone – it brings natural physical gestures to our devices.

"Siftio" game cubes are little devices that are aware of each other and also connect back to your main PC.

Just in time, not just in case.

Our PCs are just in case – everything is on there just in case we need them. Even our phones are like that with apps. But Siftio cubes just download the little bit of software they need at the time, then discard that to make room for the next thing. Think of The Matrix where you download the knowledge you need right there and then.

(shows Matrix clip of downloading the ability to fly a helicopter)

"Gratuitous Matrix clip.... you're welcome"

Next we get passive devices. Things that are smart enough to just do what they do, passively – that is, without your direct intervention. An example is the "Nest" thermostat which is smart enough to detect you're home, use wifi to check the weather, etc. It's a smart-dumb device.

The device itself is very simple, fairly dumb, but connects to smarter devices when they are available. We think devices are going to get ever more powerful; but the truth is we're going to have a lot more dumb devices, that do less. That do one simple thing.

How do we design for this future? We can't be future proof, but we can be future friendly.

"metadata is the new art direction" - Ethan Resnick @studip101

We need to use metadata as one of our most important tools. We need to structure our data well, describe it well, set up an API for our content. Let the robots do the work! Metadata gives the machines information about how to format the content appropriately.

Example: newspaper. We know the importance, the editorial judgement, based on the layout. But how do we get that information out of the InDesign file? Do you just have an Editor for every possible stream and device? The Guardian did it with metadata. They put the editorial priority into their content and let each stream order appropriately – the iPad edition could be an entirely different layout but show the priority well for that stream.

Presentation deprecates! Our work goes out of date, yet that's what we tend to focus all our attention on... as tom coates would say "your product is not a website!". The individual containers of our services and content are not the product.

We need to look beyond the application we're working on today, to look at the big picture.

As Designers we need to work together across the whole stack; backenders need to design the content storage to cope with multiple displays.

What do we do?

Push sensors – push the web to use things like cameras and other sensors and get access to things everywhere, not just on phones in native apps
Think social
Think about your ecosystem – you're not building an app or website, you're building an overall system that has to keep up with a multi-device future
We're all cloud developers
Mind your metadata – data is for everyone to design, you need to know you can get at your content and display it properly to any device
Think about new input methods – we think too visually right now, we think about "pointing at stuff" too much. For those of you who've been designing for screen readers, you're ready for when speech becomes the interface!
The future is here! Bill Buxton's 20 year rule tells us the labs are full of the future!

"We have the best jobs in the world! The coolest jobs in the world in the most exciting time in the history of technology!" Think about the near future as well as how to bring this to your current work. Make something amazing!

@globalmoxie

Charlie Gleason: How to go from Design to Dev

"Who is this talk aimed at? Me! It's stuff I wish people had told me as a designer starting to do development." Charlie is a designer/dev.

He loves code and highly encourages designers to learn it.

But wait whut, he wasn't good at maths and stuff... so why do this? You are not a bad designer if you don't code, but you'll be a better one if you do.

Disclaimers and uke chord warnings for the lolcats in the presentation. "Everyone wins, nobody throws fruit at me!"

"If you stuck around to do honors, or as I thought of it 'more wine and less growing up'..."

He was inspired to make postofficebox16, an art sharing project. He designed it but was frustrated he couldn't build it. So he tried to ask for help from a dev.

"How not to talk to developers 101"... a placement's art project isn't a high priority.

Learning how to learn – also important to ask "why to learn". Not everyone has to learn to develop... the question really is "do you have something to build"? ...and if not, maybe just make up something to build.

Embrace your ideas – the tram is never on time, so how could the internet help with that? Charlie once made a website for a cafe he liked. 5/10 it's a bad idea. 4/10 someone's already built it. The other 1/10 you won't be able to get the domain name. But that's awesome, it means you are working up to something great.

If you build it, they might come, but at least you learned something. Charlie built the 98 against partly because he wanted to learn how to screen scrape.

The internet is full of people who will helpfully and/or snidely answer your questions. So the only thing you really need is boundless enthusiasm for getting annoyed at your computer!

What to learn? HTML, CSS, JS. Maybe some PHP, it doesn't have such a high learning curve. Python is very hip. Or ruby – check out Why's (Poignant) Guide To Ruby. Don't get hung up on what people think of the languages, just start.

Be forewarned about languages: everyone hates every one of them. Every language is hated. Everyone hates everything. Haters gonna hate. If it works it works. Find out what your friends use, what your employer uses, what you find easy to pick up.

As long as you're thinking about it, writing it and enjoying it then it doesn't really matter.

Charlie likes ruby+sinatra+haml+sass+git+github. Loves the fact the goal of Ruby is to make people happy.

Be ready for the fact you will get bad feedback. Do whatever to make YOU happy. If people say your choice of language is bad, or your ideas are bad, or your content is bad... don't let that deflate you and your enthusiasm. Not all criticism is constructive!

Tools to learn? The Internet! With an exclamation mark! (get list of specific resources from site)

"Everyone has to start somewhere."

There are sites, blogs, tutorials, books... ask your friends that make stuff! If you don't know people that make stuff, there are meetups for people who do; coworking spaces; podcasts...

Coworking spaces - "the best way to get involved in a community is to start living in that community".

OK so you've started making things and you broke it:

You can walk away! Get away from the angry. Walk around the block, google lolcats. Charlie's office has a swing - "it's quite hard to be angry on a swing"
Google it
ask a friend, noting they will tell you to Google it
ask Stack Overflow – but ask a sensible, detailed question
find a mentor - "I'm yet to find one who couldn't be swayed with cake"
ask on IRC, but it's terrifying...

(Digression into colour theory – every other movie poster is orange and teal. Love how Charlie distracted us with colour theory then showed us how to install stuff on the command line! Bait and switch for designers? ;))

Soapbox: we need you, ladies! Don't be put off by crap like Brogramming memes. We need more female coders.

Four things to take away:

Plan ahead – not planning is a recipe for disaster, doesn't have to be big. But write down what you want to do and how it would work.
Design to build – learning to build makes you better at designing things that have to be built. It helps when you want to advocate things like A/B testing... "If all we have is data, let's look at data. If all we have are opinions, let's go with mine." - Jim Barksdale (Former CEO of Netscape)
Less is more – build mobile first...
Ask more questions – get onto Stack Overflow, get onto blogs, share what you learn

http://wds12.charliegleason.com/

@superhighfives

Mark Boulton – Responsive Design

Talking about content and business: the technical side is really the simple bit of the equation – but the business needs to change and it hurts. This talk will be cathartic, it will be about pain and you can all nod knowingly to each other...

(film clip – alice down the rabbit hole from The Matrix. You are living in a prison for your mind. Take the red pill and stay in wonderland and see how deep the rabbit hole goes...)

John Allsopp's article A Dao Of Web Design showed us, long ago, that the web is not a medium of control. The first page ever made on the web was fluid, it was responsive, it adapted to whatever it was viewed on. Then we broke the web. But now we have finally taken the red pill.

Quote from Bobby Solomon (Disney) – that they're bored of talking about responsive design; it's how self-respecting websites should behave in 2012. But that's ok for Disney, who are huge and don't have clients the same way as designers! For the rest of us this has been hard.

Designers have been making books for a long, long time. You can make a beautiful, legible, readable thing. Text block based on the object (shows an example of a canon) start with the page and work in to set the grid. Responsive design turns that upside down. We can no longer design from the edge inwards any more, because we no longer know what the edges are!

Centuries of knowledge about creating grids... that's a lot of baggage to discard. That's a lot of knowledge to throw away. It's painful. We're already trying to force pages back into responsive design with breakpoints.

But what happens in between the breakpoints? That's where it needs to be fluid and we need to be designing in that fluidity.

So how does responsive design affect and challenge businesses?

It costs more. Perhaps 30-50% more time than a traditional fixed website design. Because it's hard and we're still freaking out about it. We don't have a good body of knowledge about it yet. This costs money, so how do you convince the client to pay more? Well certainly don't pitch two options where responsive is more expensive... they'll pick the cheaper one or the one they at least understand. Instead sell the usefulness, sell the ways it will win them more customers/business, say you'll build something that adapts to different devices (don't say "responsive"!). Use distraction techniques! Talk about sustainable design...

Advertising. "Advertising has been ruining the design of content websites for 20 years" - Roger Black. Elephant in the room! It can make things into a non-starter. When big display ads bring in the cash, the sales teams will say no. Technically speaking serving responsive ads would be fairly straightforward; but the way ads have been made and sold has been set for a long time. People buy slots and put known ad sizes into them. Including those massive takeovers. How do you make crap like that responsive? You can't really. The cultural shift required is to stop people buying "a slot" and start buying a set of slots; the same ad in different contexts/breakpoints/etc. But that's not what really kills it dead is mobile sites (m sites, m.foo.com) with their own teams and revenue streams. So going responsive kills an entire team and revenue stream. That can kill responsive dead. Dead in the water. It's difficult but not impossible to solve... but it's a big bit of business pain.

Process challenges. ("Google 'bob ross squirrel', I'm not going to say why..."). Bob Ross always turned little mistakes into something in his paintings. "Everyone has a game plan until you punch them in the face." - Mike Tyson. Responsive design is a right hook to design process. Mark spends much more time sketching now; and more of the time with clients. Good clients can handle it... you get more honest feedback. Some get a bit freaked out by the design process, they thought they were buying a pretty picture. But it works to get them involved. The old design processes don't work – wireframes don't work, are you going to multiply your work by the number of breakpoints? Prototypes work, get into the browser sooner. It gets you into the environment sooner - it gets the client into the Content Problem(tm) sooner (and they all have a content problem they don't want to deal with...).

Teams – specifically, silos. Break the silos, get people sitting together, you will learn heaps from each other. Work in product teams (not discipline teams) and iterate quickly.

"Does this work in X browser?" isn't really a question you can even answer any more. X browser in X resolution at X size......

"Responsive design forces a focus on content that many organisations don't understand" - @baskwalla ...Mark would say "don't want to understand".

Editorial process. News, for example. A news story starts as a little seed of content, it could be one single sentence when news breaks. More content comes in from the wire, from leads and contacts, other news organisations. The story coalesces, snowballs, picks things up on the way. The story, the content, is not a page! It has quotes, blogs, tweets, videos, links... this big snowball of stuff is the story. The content is not the page. The story is the link – the links between all that content. The story is the metadata.

We're the only people who resize their browser. (mimes us waving the browser window back and forwards) Only we do this!

The web is made of HTTP, links, files. But what is our content made of?

Talking about CERN – they have the LHC, but they also just invent things to solve their unusual problems. They have brilliantly interesting stories that aren't being told. They think boring graphs are awesome content. Mark had to develop a guide to "what is the wonder of this content"? Mapped out the comprehension levels from scientist to general public. Got the great visualisations instead of boring graphs.

We need to have good content with good metadata, so we can put it together into great things.

We've taken the red pill, it's an incredibly exciting time. We're changing design theory of thousands of years. It's up to us to push this forward, to push the tools forward, to challenge the way things are done.

@markboulton

Cam Adams: Opening Credits - behind the scenes

Creative coding – having an idea and the ability to implement it.

First off, why have an opening titles roll at a web conference? It sets up the event... inspirations for Cam include Saul Bass title designs; Catch Me If You Can titles; Se7en titles (which sparked a renaissance in title design).

Brainstorming – the title designs for WDS are quite visual, there's no speaking. Cam sketches ideas, works out what will work together, get the ideas down and work out how to fit them together.

Also for WDS being a web conference... it "behooves you to USE web technology". Video might be better for Cam's heart rate; but using web tech will push some new ideas onto your process.

Live video = the web + the real world. Developed the theme for the credits.

Flow – key aspect of the title. How do I get from one idea to another. Can be a technically complex problem – but the answer is "use a lot of duct tape".

Specific inspirations:

Chemical Brothers film clip for Star Guitar. Everything visually syncs to the music.
Waveform from Joy Division Unknown album cover
"really bad 3d glasses" to get the red/blue blur effect
video called "Replica" art installation

Technical breakdown:

Joy Division opening – the landscape is from the music waveform (frequency and volume) grabbed with the Web Audio API (really good API with a clear metaphor driving it, that of a producer's physical studio – hooking things up). Take colour values from the webcam (with WEBRTC); and apply those colours to the lines. Put that into 3.js (webgl).
3D lettering: CSS3. Didn't do text in WEBGL as that's a pain in the arse. CSS3 is great with text; even if the performance isn't so great.
Bridged CSS3 to WEBGL for the 3D shapes.
MASH IT UP! Moving from CSS to WEBGL is not neat, don't dig into that code too much.
3D shapes formed into letters with canvas and random generation of shapes mapped to on/off pixels mapped from the original text.
Forest scene – layered PNGs for the screen; CSS3 text and text shadow for blurring.
Sliced video was a canvas manipulation. (Note for anyone who skipped the first video, the colours were from Cam waving glow sticks at his laptop!)

@themaninblue

Tim Gleeson – Music Mash Up

Web Audio API – included in HTML5 media set. Currently in editorial draft with the W3C. Support is not great, but it is emerging technology so let's hold out for it.

At the base of the API is the audio context, which is currently webkit prefixed (yey). You can load audio a few ways; it depends what you are loading – long or short soundtracks.

(The demo gods strike! No audio coming through!)

You can pass your audio signal to things like gain. Create a gain node; then you have access to change the gain value. gain_node.gain.value = 0.5;

Compression: compressors can take different sources and normalises the volume.

Filters allow you filter out frequencies based on filter type – there are 8 in the API. First in the default is Lowpass, which lets you get a bassier audio track. Highpass brings out treble. Panning controls the direction/position.

(DEMO GODS!! Panning not working... friendly sound guy helps out ;))

Finally – frequency analysis, which gets data which can be rendered as waveforms and so on. But use this wisely! Do not play audio when your website loads!

@timjgleeson

Dmitry - Animation

("next up is Dmitry, if you don't know his surname you haven't been paying attention")

What is animation for? It's for clarity, not to have fun. Make it easier for people to understand what the heck is going on. If you move things around with no animation or transition it's hard to follow what's going on. Sometimes the initial and final states look the same; so you might not even know something changed.

So, animation is important.

What is animation on the web? Usually we have a value; change it over a duration; and if we're luck we have easing; extra lucky we have iterations; and delay. That's the anatomy of web animation. That sucks! It's very primitive! But nobody complains.

Easing – we just have cubic-bezier. This is not enough! Why are you not complaining about this stuff? I'm not happy with this stuff!

Discrete animation – common example is a spinner – this is not as easy as it should be.

Reusing animation – you can't do it! You have to make multiple animations even if the result is the same. But then you can't apply multiple animations to one element.

Getting and setting animation status – you can't do that!

Want custom animation! I want to be able to write things that maybe my browser doesn't know about. Would prefer if the browser just did it...

There is hope! Web Animations 1.0 is an emerging web standard from the W3C. Only problem is it could be done wrong, of course.

Dmitry is one of the editors of the spec so he is trying to put his money where his mouth is.

So why is he talking to us? We should be complaining about the state of animation!

"Being happy and smiling all the time is not productive! We should be productively unhappy!"

If we don't complain it means you're happy; if you're happy nothing needs to change; then progress won't happen. Developers are too happy to talk about how good things are – but only seem to complain about javascript for some reasons... ("I think it's perfect.")

Be productively unhappy, change the world.

@DmitryBaranovsk

John Allsopp: What we talk about when we talk about the web

"Warning: you will get nothing practical and useful out of this! It's a philosophical discussion."

Reference "what we talk about when we talk about love" in which two couples discuss love. You'd think even if we couldn't define it we would know it when we saw it. But in the book people disagree deeply.

So how does this apply to WDS? Well, what is the web?

The proverb of the blind men and the elephant teaches us observation is important... but the web is constantly changing whether we observe or not; it does not exist as an object; it is the product of our minds.

But as a city is more than its buildings and roads and places, the web is more than specs and implementation.

To understand we need to look back and understand where we came from.

Precambrian web

TimBL built the web – the protocols and the tools. But they were very simple, links for example were one-directional, non-annotatable hyperlinks. It was very simple and not extensible.

Sometimes it's the things which don't change that are interesting. The principles of the web haven't changed. TimBL later wrote 'the web and the web of life' which clearly links real world philosophical principles to the principles driving the web. Decentralisation, invention expecting the results to be good but unpredictable. Tolerance – a tolerant protocol is robust. Interoperability.

"try to find screenshots of websites from the early nineties..."

In the early days even the conversations were difficult – Microsoft had a conflicting definition of what a "link" was ("embed here" not "go there"). There was no W3C, just a rough working consensus of code – and the consensus was often very rough.

Cambrian explosion

There was a great deal of innovation going on – IMG, FONT even the allegedly-meant-as-a-joke BLINK. Speaking about things like accessibility and cross-browser support was often referred to as holding things back.

Creating Killer Websites was a massive book; and the website was...well...we'd consider it terrible but people were so excited about it!

From this era things like the Web Standards Project were born, where people were trying to sell the standards-based approach. They'd been talking about a better way to build things.

Triassic

Then IE5 for mac and IE6 for windows happened... and they introduced doctype switching so you could move forward without breaking the old; and they supported CSS quite well.

The 2002 Wired redesign was news; and the CSS Zen Garden showed what was possible.

The conversations about the web change the web. We do need to take time to think about what we do, not just spend all our time on implementation.

But a lot of talking was referring to the past; and redoing things better.

Around this point the name AJAX appeared; which encouraged people to talk about an idea that had been around for a while. Giving things a name changes things because it enables people to talk about it.

Generally people talked about Web 2.0. (a term used in Darcy DiNucci's "Fragmented Future" article)

Now

The current discussions around HTML5 "readiness" remind John of the Making Killer Websites conversations. We focus on what's bad (eg. peformance) and not enough about the great things we can do with it.

Scott Jensen describes native apps as a remnant of the Jurassic period of the web.

Many discussions now are focussing on minutiae and not so much about where we are going. Talking about how things look; how we can make them... important discussions but not the only ones to have.

Walter Benjamin – Theses on the Philosophy of History; pictures the angel of history having his face turned to the past.

We should think of ourselves standing on the beach of a vast ocean with continents beyond the horizon; talking about how best to ride waves back to shore. We should think about going forwards too.

"I want to walk about a web that isn't just a two point oh." How can it augment us, how can it help us know ourselves better, know our society better, know our world better. How can it help stop us killing ourselves and our planet – to understand the true cost and result of our actions.

What will this web look like? That's what John wants to talk about when we talk about the web.

Of course we will still design interactions and they will still be interesting interactions. We will still be using all the techincal pieces and talk about those things; but we need to rediscover the unpredictability that made the web grow. We need to look into the future and not focus on history, look ahead not behind.

"So that's what we should talk about when we talk about the web: we should talk about the future."

Questions...

Miles E: is Win8 the dream, of the web being "native"?

John: it's not the first time we've seen this, there have been other implementations using web technology as their native technology. Win8 is probably the most ambitious attempt to date. It's a lot of the way there. At the moment though it's not 100%, the capabilities exposed to a Win8 app still aren't all made available to the browser. But we're still thinking about apps, discrete packages of code – silos of functionlity. But what about decoupled things, small pieces loosely coupled.

This is not all to say we're talking about the wrong things – just that we should ask "what else should we be talking about".

Chaals: one of the reasons why we build apps is because we can sell them. In the future where does the money go?

John: it's kind of a miracle that the money's in apps. If you are not in the top 250 apps in the iOS store you will not make enough money to support two developers...

Really we are building services, not apps. Users engage with that service (netflix, amazon) not the specific apps. Business is in service. Some people make a lot of money making apps; but so too some people make a lot of money gambling. We're success-biased.

@johnallsopp

Ben Hammersley: The flower, the field and the stack

No slides – possibly a Web Directions first!

"You may not know this, but the Normals are freaking out."

They are losing their minds about the things we do – the web, technology, digital design... they are completely losing it.

Pretty much every country in the world has a law or push to attempt to "record everything on the web and monitor and censor it"... he worries politicians have shares in hard drive companies.

Recently Britain had some "rather rubbish" riots; and in response the PM wanted to be able to turn off social media during times of crisis. "this is the level of discussion we have..."

We can be outraged or simply confused why anyone would think this was a good idea... but before we can have any real debates with politicians we need to understand why people outside this room (WDS12) is confused and worried and scared.

Without understanding the social context of the work we do, we can't do the really good stuff or answer criticism from people who don't like what we're doing.

Moore's Law – every year or so computing power doubles for the same price. We already know this, it's why our devices are rubbish as soon as we've bought them. What you might not be aware of is this is the first time in the history of humanity to have this phenomenon. Swords did not get twice as sharp, horses did not get twice as fast. We live under Moore's Law and this breaks many things; modifies politics and so on.

We also never used the same tools to make the next tool – swords did not make swords.

While we, developers, are used to a fast cadence, other people are not. Politicians are used to making laws to last 10, 20 years.

In ten years our phones will be radically more powerful; or the equivalent device will be 1/64th the cost. How do you come up with a policy that still makes sense in ten years time, even though you don't understand the iphone in your pocket now?

We don't know what technology will even look like in 2040, but people try to predict what will be happening; and it's incredibly hard to predict.

We have careers other people don't understand. But every generation before had a simple career path with careers that lasted their whole lives and didn't change much.

This all adds up to the social undercurrent of what's going on right now.

"You may not have realised this, but you are all slightly rubbish cyborg." Our phones are our robot brain. We all have one, it's rarely more than three feet away and we love them. If you lost your laptop you'd be upset and looking forward to buying a new one; but if you lost your phone you would freak out. We don't remember stuff, we use our phone to remember things. Scientific studies show we are using part of our brain to monitor our phone – even if it's turned off.

Everyone feels phantom vibration, heavy social media users have been known to feel phantom vibration even while holding the phone in their hand.

It's become part of our emotional mind. If you have been on social networks long enough you have learned to monitor the general state of mind of people you connect with. If their pattern or style changes or stops, you will start to notice their absence and you will reach out.

This is all freaking out the Normals.

The internet also came into business like Godzilla into Tokyo. It destroyed things – the media industry, education... - and rebuilt them in its own image.

Some people may be thinking "fuck em, we won". We spent years being teased by the jocks and we have finally finally won after centuries of being beaten down. We just have to wait for the old guys to die out.

"Well yeah, but the thing is they're not dying out fast enough. Moore's Law also applies to medical technology..."

This is also a repeat of the renaissance, where a few thousand people in specific cities around the world – in many respects – control the culture. "You lot. You guys. And your friends and peers and heroes." This tiny group controls the culture of millions.

We've tried to do this. All the big buzzwordy technologies have been about getting into the psyches of people around the world. The nerds controlling the minds of millions. Making sites more sticky, campaigns and apps more viral... it's all about controlling how people deal with technology.

There comes a time in every expressive technology where people stop wondering how they were going to do things, and starting wondering what they should be doing and why. Because if they build the wrong thing, they can really hurt the people who are affected.

"Smart cities... put this in your CV now!"

It turns out sensors are cheap and so is the technology to connect them to the internet. So now cities can be measured. People can use the data to optimise their lives. In many cities public transport has GPS giving people real time access to information about when the bus really will arrive. You can decide if you have time at the pub for another beer.

But this movement is being driven by technology companies who will be selling things. They optimise for things like an efficient commute. But the university city of Orhuse(sp?), "one fifth hipster", decided that was a problem. It's optimising for what IBM wants to sell. They wanted to optimise not for an efficient commute, but for the beauty and serendipity of the commute.

Every city in the world is now being pushed up against technology made somewhere else – somewhere entirely outside the social context of its use. The people who create hardware and software need to be mindful of what it's doing.

Software is political. Facebook is the Zuckerbergian vision of the world made real. It is designed to make everyone into Zuckerbergian thought monsters. It pushes the political ideal that there should not be any privacy, everything should be open. Every decision that is made at Facebook is influenced to strengthen Zuckererg's vision. The same goes for Twitter, Microsoft, everything.

If we agree that we have become good at this stuff and the technology has become very intimate – it's in our daily lives – and we want people to use it all the time... then we have to admit to ourselves that our culture will be imposed on our users. The time is now to be mindful of this.

The world is still run by grey haired baby boomers who really don't understand what's going on. We have unfortunately elected people to drive our future who are very confused by our present.

If you can remember not having a phone, your social duty now is to translate. We need translators. We need people to guide the CEOS, the ministers, the senior professionals into the modern day. If we don't, they will continue to legislate against modernity. They will continue to enact legislation that is pointless or harmful and we will continue to have the same tired debates.

There are changes we've not remarked upon.

Ubiquity of reviewing is a huge change – we can now review anything we do. You no longer have to spend years become a restaurant critic, you just need to go to a review website and write something. There are sites to review everything. We have become used to the idea that we should be able to slag them off online and expect a quick response.

(reference to J Curve theory of revolution) the speed of change isn't as fast as people expect it to be.

We've also changed the speed of group forming – no matter what you're into you can find other people online who are into it to. It's become impossible to be alone if you don't want to be.

These are huge social drivers. We are coming to a point where we could bring about massive change for the better. But if we continue to make things blindly, maximising simply for income or hype; or continue to blindly consume things; then we'll never be able to use the revolutionary properties of the web to change the world for the good. But if you do, you are living in a great time to change the world.

It is an awesome responsibility and an awesome power.

@benhammersley

Tom Coates: An animating spark

"I've decided to come up with a hash tag for this talk, here it is! #besttalkever"

Interested in how connecting things makes new possibilities, how a network of data and services can transform what we produce.

The possibility space for new products is defined by how many data sets are connected, mashed together... take multiple data sources and elements and you multiply the product possibility space.

New product possibility space: (all technologies + all data data sources)n

(n being the number of ways you can put them together)

Talking about mundane things receiving the spark of creativity, the spark of animation, similar to the spark of electricity bringing Frankenstein's monster to life. Of day to day objects receiving a small amount of intelligence and agency... and how you will feel about it? This is not a vision of the future – this is a vision of now.

How do we get things out of the labs and into the shops?

Tom has a theory that when people explore new technologies have one main goal... it's to articulate why the technology is interesting. We're trying to sell it and impress... which gets people excited but over-sells and sets up big expectation. Also while selling things the examples are exaggerated and crazy to get attention and prove the project should be funded. Especially as early technology can be relatively expensive – during development, Kinect-equivalent tech cost closer to $10,000 than something priced to attach to your television.

An uncharitable theory: the way we think about the future is betraying our present.

Tom wants us to think about tangible and real application of ubiquitous computing, what the "internet of things" – being the same internet after all – can really do. We can look at everyday devices in our homes and see what extra value we could add to them, considering how cheap it is to add network functionality to them.

LCD clocks were initially expensive but demand for them increased to such an extent they became cheap. Then LCD clocks were stuck all over the place, even in places they didn't really add value.

"What was once expensive is now trivial. This opens up opportunities."

Raspberry Pi is a fully functional computer that's as powerful as the computer Tom used through university... and you can buy it for about $25.

Kindle with permanently-on free worldwide 3G – a few years ago would have seemed impossible and yet there it is.

"Hundred dollar devices" with the ability to connect to the internet – what doors does that open?

Mundane Computing – a term by Chris Heathcote – most of the time life is routine; and Chris was interested in how technology can make some of those daily moments better. It's not bad, just think of it as not chasing a unicorn but instead doing something useful.

Example of the problem: washing machines that beep. Tom is "obsessed with machines that beep". When the machine is done it beeps at you. It doesn't respect the fact you're doing something else, it just keeps on beeping. And that's infuriating! It's like GPS devices that are disappointed in you when you take a wrong turn.

These devices should chill out! The problem could be fixed with a network connection and an app – devices could talk to an app that you could tie in to your more-polite-than-beeping notification systems.

Muji – sells lovely minimal, elegant things. Why aren't ubiquitous computing devices packaged so nicely? "Able to be invited into the home"... something which makes you want it in your life.

Mujicomp online taps into this idea.

Although "mundane computing" doesn't make a sexy buzzword it allows us to think about daily things. How can you take a "boring problem" and push it to the limit. The "Nest" thermostat is one example; Twitter could be thought of as SMS pushed to its limits.

Fighting the futurists... fuckyeahinternetfridge.tumblr.com (want to get really meta?)... you'd be surprised how many network-enabled fridges are being pitched and made right now. It doesn't make sense to have Twitter on your fridge – who has an expensive fridge and DOESN'T have an iPad or some other more suitable device for reading twitter and playing music?

It's a misunderstanding of what "connected to the internet" means – it doesn't mean it has to have a browser. Don't add cost by adding a screen, for $5 you can network it without a screen. Increasing the cost is not helping things become useful.

The average life cycle of a fridge is over fifteen years. Imagine if you'd got an internet enabled fridge fifteen years ago... it'd have windows 95 on it! So actually you really want as little as possible on the device. Otherwise your appliances become hopelessly out of date much faster than before.

(referring to the Corningware vision) Do we really want every surface around us to be a screen? How often do you refit your kitchen? Do you really want to be using your bathroom mirror to bash out email? Do you keep every surface that pristine clean? Actually it's a bit gross!

Stewart Brand's home shearing layers (from "How Buildings Learn") shows us that the structure changes far too slowly to put technology directly into them.

Matt Rolandson, Ammunition Group, made the point – use the network to amplify the tool's core purpose, not to be another web browser or Twitter client. The internet != web browser. A network enabled coffee machine should be better at being a coffee machine.

Ideas to make things more useful....

Make it easy to set up
Make sure it works when it's offline (it just works better when it's online)
Put the bulk of the intelligence online, not in the device (helps the upgrade cycle)
The interface for the device isn't embedded in the device, it's wherever you need it.
The best way to enhance an object is to make it easer to control or understand.
Devices should be polite (? not sure I got this point right)

Mundane computing: what if all devices over $100 had an API that said...

where are you
who do you belong to
what are you doing right now
how have you been used/usage and error log
how much power have you used/are you using
how well are you functioning

You should be able to...

control (safe) basic functions
receive alerts when there's a problem
receive alerts when a job is completed

@houseofcoates is a feed of everything in Tom's house.

Anthropomorphising things can make them fun. Race your Scooba against other peoples Scooba. When we engage with things this way we intuit motives – your device doesn't need charging any more, it's feeling tired.

"We always overestimate the change that will occur in the next two years, and underestimate the change that will occur in the next ten years." - Bill Gates

Having a history of a device changes purchasing, maintenance, even the way we buy or rent them in the first place. Being able to track ownership and location – what does that mean for ownership and theft?

The infrastructure is there, if devices are tapping into it, we're already bootstrapped and the spark required is creativity. Ideas for things that can happen when things are brought into the domain of the internet. People who manufacture things often have no idea about the internet – this is where our responsibility comes in as designers and developers.

Raymond Loewy thought the goal of industrial design was MAYA: Most Advanced Yet Acceptable. This is a good way to think of mundane computing.

We also have a responsibility to bring the general public with us into the future. Make it friendly to everyone.

(books at the end: Bruce Sterling's "Shaping Things", Adam Greenfield "Everyware", Mike Kuniavsky "Smart Things". John also calls out Aussie startup, Ninja Blocks.)

@tomcoates

Lea Verou – more css tips

Following the 2011 "10 secrets talk" (worth reviewing) this is another ten secrets.

shadow that gradually appears – used in Google Reader via JS but can be done with pure CSS. Background-attachment: local; … combined with multiple gradients you can make a shadow that only appears when you scroll down.
fixed width, fluid background – using calc on a parent can remove the need to add wrapper divs for fixed width designs
using transitions to avoid js for things like lightbox effects (also showed using a big box shadow instead of a blanket div)
lined background that snaps to text using a linear gradient and background size. Uses background-origin:content-box so the background doesn't move away when the padding changes. You can also use the technique to create zebra striping.
Opposite transitions to keep a child element positioned normally while the parent is rotated or skewed etc. you can create an image slider/comparison with CSS transforms.
Clockwise animation of an element, using keyframes and a cancelling animation to keep the element horizontal (smiley face kept upright but moving in a circle)... however it does require an extra element. Better way from Aryeh gregor uses the frame-by-frame nature of transforms to get the same effect as attaching two origins to a single element.
Alternative to box-shadow proposed by Adobe, "filter" to use SVG filters on all elements. Gives box shadow effect on speech bubbles created with pseudo elements. Currently only in Chrome; and obviously the name "filter" is a problem for IE.
Pseudo element set to absolute position zero all 'round and copy of background image... you can hack together a background blur effect. It's hacky and messy and it works.
Hyphens:auto – good but still patchy support
frame-by-frame animation using a sprite and keyframes and steps(n) to prevent smooth transitions which aren't giving us animation. This gives us access to alpha transparency, which animated gifs don't do. Credit: simurai.com. IE9+

(Plug for webplatform.org – vendor neutral documentation platform, to bring together the currently-separate efforts being made by all the browser companies.)

http://lea.verou.me/more-css-secrets

@leaverou

Douglas Crockford – Programming Style & Your Brain

The two topics:

programming style, the stuff which is ignored by the compiler/parser and why it's still important
your brain, the big squishy thing you carry around and how it is linked to your code

There is an idea in economics that people work towards their own interests... but it is in fact not true. Humans do not always work in their own interests.

We have two systems: head and gut. Your gut is fast and you can't turn it off. Your brain can lie to you! Look at a Edward H Adelson's checkerboard illusion – your brain can be tricked.

Advertising knows this! They have been crafting messages that work on the gut for years. The head knows $199 is not a lot less than $200 but our gut says differently.

This is all important because our head and gut are in play when we make code. Code, programming, is some of the most complex stuff humans make... and we are still doing it entirely by hand, because AI isn't advanced enough to do it for us. We can't express what we want in small enough pieces for a computer to calculate it all for us.

Our primary tool is the programming language. We write the language, the computer can transform it into something that can be executed by the machine.

The thing that makes programming so hard is that is requires perfection, because if it's not perfect, the machine has license to do the worst thing possible – not work correctly. But we can't actually achieve perfection; and even if we did achieve it we have no way to recognise it. We can't hold software back to be perfect, we'd never release it. That's why we release things early so we can find problems quickly.

We have the brains of hunters and gatherers. Nothing in our evolution has prepared us for writing programs.

Programming makes use of head and gut. There are tradeoffs. Doug "I have no evidence at all that gut is involved... but my gut says it's true!"... but the gut doesn't really have the data it needs to make rational decisions, that's the head.

…

Good and bad code... naturally the examples are in JS.

JS has good and bad parts; which is why Doug wrote JSLint, to tell him when the code is using a bad part.

WARNING: JSLINT WILL HURT YOUR FEELINGS! Doug "It really does, it hurts me too!"

People have an emotional reaction to the results of JSLint. Rationally they went to a code quality tool and asked for advice; but they don't like the advice.

Braces on the same line ("on the right") or on a new line ("on the left"):

foo { } foo { }

If someone is told to go between the systems, they get upset. The gut dislikes it so the head tries to rationalise it.

In JS though, you can actually break stuff due to automatic semicolon insertion:

return { ok: false; }

SILENT ERROR! Because ASI has put a semicolon after "return". So in JS there is a very good reason to say put the brace on the right. So you should prefer forms that are error resistant.

Switch statement fallthrough hazard. It kind of persists the problems of goto. While there is a problem, DC initially decided not to create a warning as it would lose some elegance to avoid an error that hardly ever happens. But then the next day it was proved he had that error in JSLint!

"I had a moment of enlightenment." Elegance for its own sake is worthless.

Also saying "that hardly ever happens" is the same as saying "it happens".

Code style should not be about personal preference, it should be about making more robust code, something closer to perfection than we could do otherwise.

While the Romans WROTEINUPPERCASEWITHNOPUNCTUATIONORSPACES people who had to copy it later introduced lowercase, word breaks and punctuation because it reduced the error rate, it removed ambiguity.

Programs must communicate clearly to people, not just to the compiler. People are important. Use elements of good composition where applicable. For example, use a space after a comma, not before.

We want people to focus on the substance and not the formatting.

Good rule: no space between a function name and the first bracket; one space everywhere else. But then you get to Immediately Invocable Function Expressions...

(function () { ... })();

...but then you have the extra brackets floating around in the middle of nowhere. DC feels this is more readable:

(function () { ... }());

Never rely on ASI! This breaks:

x = y (function () { ... }());

So put the semicolon in!

x = y; (function () { ... }());

Don't use the with statement. It's useful but never not confusing. Confusion must be avoided, it creates bugs!

Always use === as the result of == is hard to anticipate. "It turns out you don't need double equal...". If there is a feature of a language that is sometimes problematic and another feature that's reliable, use the reliable form.

Multiline string literal example – breaks when there's a space after the \ ...you can't see the problem, but it's there.

Make your programs look like what they do!

Declare all your vars at the top; declare all functions before you call them. Because of hoisting.

for (var i) {}

...i is not scoped to the loop, it gets hoisted too!

let is coming and that will have block scope. When that's available DC's advice will change. Unless of course you need to support IE in which case stick to var.

Global vars are evil but sometime necessary; they should be rare and stick out like a sore thumb so DC's advice is to write them in UPPERCASE.

New prefix – forgetting new can clobber globals. To help avoid problems, name constructor functions with TitleCase (?)

Write in a way that clearly communicates your intent.

++ … "this will be controversial. Controversial does not equal wrong."

The value of ++ is to reduce large amounts of code to one line; but that's a bad trade as it becomes incomprehensible. DC eventually just stopped using it. When he has to add one to something he adds one.

++ vs. x += 1

You can get subtle off by one errors if you use ++ and DC has even seen two instances of ++x when x += 2 would have worked.

Who are the bad stylists? DC identifies four groups:

Under educated – just picked up bad habits
Old school – came to JS from other languages, would rather be writing A Man's Language and there's no way I'm going to learn JS properly!
Thrill seeker – the ones who are just willing to take chances.
Exhibitionist – they have read the spec and found all the weirdest ways to write the code and show how smart they are

Designing a programming style is not about selecting features because they are liked, disliked or pretty. It's about avoiding the abyss. It's about avoiding broken code, avoiding debugging.

Devs can do this because we are optimists – we know we can go down into the abyss and come out with a fix. It's why we can't schedule (estimate) for CRAP.

If we want to be more efficient, it's not about saving keystrokes it's about avoiding time spent in the abyss of debugging.

Forms that can hide defects are considered defective.

Language subsetting - "only a madman would use all of C++" - liberate yourself from the parts that don't work, that will trip you up and cause you pain.

"There will be bugs. Do what you can to move the odds to your favor."

Good style is good for your gut.

Q&A

Coffeescript – good to learn from, exposes good parts and not too many bad parts; but has bad parts of its own and not great tooling yet... not recommended for production.

What does DC think about the comma first style? "I think it's stupid." Main benefit appears to be saving a few keystrokes, are people truly that feeble?

jslint.com

Chaals – Beyond HTML5

Where are we?

HTML5 "plan 2014" - it's gunna be ready soon(er than 2022)!
- ...and they did that by saying anything that wasn't ready didn't go into 5.0, it went to 5.1
W3C is working on HTML 5.1
WHAT-WG keeps going on their living standard
The web is more than HTML

W3C HTML

In feature freeze and wanting to patch WHATWG bugs; they're making extension specs for 5.0.5.1/... controversial things are being postponed. That's problematic because accessibility features are being deemed controversial if they don't work 100% of the time – problem is most accessibility stuff doesn't work 100% of the time. HTML5 has to go through a Last Call 2, for patent issues.

WHAT-WG

The living standard is huge, 6meg of HTML is truly gigantic. In fact it's too big to read. Almost nobody has read it end to end; not even the editors.

While WHAT-WG is problematic it is still the biggest source of ideas at the moment.

HTML EXTENSIONS

Proposed:

Encrypted media (DRM)
Media Source (adaptive streams)
Responsive Images
Headers/Outlines
<maincontent>
@longdesc

If you want to influence these decisions, get involved and give feedback. Tell the editors what works for you as a developer. It turns out the people in the room have a lot more say than those who aren't saying anything; and things move faster when the editors aren't guessing.

Outside HTML:

hypervideo – allowing videos to link to other videos more akin to html
Audio API – commonly demonstrated
Speech API – not so commonly demonstrated, people do talk to their devices!
Sensors, Near Field Communications, gamepad
getUserMedia()
Push API, RTC

Inside:

Web Intents – revolutionary, came from google, going to work out how to do plugins on the web. This time, instead of actual software plugged in; you'll use a service on the web to do what that downloaded plugin would have done.
Web components – ability to make your own markup, much like XHTML used to be extensible, except this time to make it actually work. Ability to collapse common features down to custom markup that shorthands whole sets of CSS and JS.
Web Animation
Fullscreen
Clipboard
3D (and printing)

Getting input:

pointer events
gesture
speech
IMEs

DOM 3 events almost done.

Where does all this lead? To making an Operating System! The web can be an operating system, and that's where all this work is heading.

But there are a few curious issues – eg. The web has no concept of a file system. Things the web runs on have file systems but the web itself does not.

Building a network hits i18n issues like multilingual web – even just getting keyboard shortcuts to map to different layouts turns out to be very very poorly done and flaky.

Identity on the web is still a pain point – we don't have a good, single solution. Currently people mostly just re-use a specific service login (Facebook, Twitter). The useful case is wanting to vote online – you need some way to be reasonably sure each vote really came from one person.

"What we do with Moore's Law is what we do with freeways – we build more of them!" We download much higher-resolution images of cats. We forget that we will fill the capacity doing the same thing with bigger files.

Ecommerce is curious – you can almost but not quite get a whole homeloan online; you can do small payments, but not a genuine micropayment of less than $1 without an ongoing relationship. In developing countries with low incomes this is a really big problem. The ability to transfer phone credit between phones has led people in Kenya to think of a mobile-phone based bank.

When lots of money starts getting passed around in a visible form in such a nation, the government can – often for the first time – start to tax their population's cash flow. Which suddenly puts the government into peoples lives, when previous they were largely decoupled. Then, people start reacting to the government... and when that happens, you can get genuine revolution.

That's the exciting – and scary – part of where technology is taking us... it can change the world.

[My writeup doesn't do justice to the conclusion. You had to be there.]

@chaals

Josh Clark – Buttons are a hack

"I hate the ipad back button with the fire of a million suns"

Fitt's Law – roughly, the smaller and further away a target it is, the harder it is to hit. Also we have issues with accessibility and discoverability... not everyone can even use a touch screen (he met a cabbie with a hook instead of a hand...) and even if they can how do they know what to do.

Gestures are the keyboard shortcuts of touch. They are patterns that are more forgiving, they can be done anywhere on the screen; they don't require as much precision.

Buttons are a hack – an inspired hack, but still a hack. Even in the physical world they're a hack – a button over there for a light up there is not intuitive.

The internet is not the browser – we have been reminded many times here at WDS12.

The web (browser) is inside of every application instead of every application being inside the web (browser). - Luke Wroblewski

You can do some touch stuff in browsers; but a lot of gestures have already been reserved by the browser itself. So for the time being the greatest/richest level of gestural interface design is going on in native apps.

App demo – quick prototyping with Adobe Proto. Would't work all that nicely on desktop but it's perfect for an ipad.

Also showed Clear – really good exploration of touch driven interface, inspired by playing a musical instrument.

Discoverability...

How do you find what you can't see? Especially when there's no prior familiarity to fall back on? How do we get to the stage we're at for keyboards – muscle memory.

"There's no such thing as an intuitive interface. Everything is learned, there's no such thing as intuitive."

UIs are social conventions, we can't truly rely on them. Many can get solid; but you can design to remove uncertainty. Example: salt and pepper shakers, the very best is the one with glass that lets you see what's inside. The content itself tells you what's happening.

Design the content as the interface. We may finally get to a point where the message is actually the medium.

Many apps still give you a complete set of instructions when you start them; which asks people to become experts before they're novices. Front loading the instructions makes it seem complex even if it's not.

Besides, nobody reads the manual. We all have incomplete knowledge of the tools we use, because we don't read the manual. It drives us nuts when our users don't read the manual, but we know they really don't.

But people watch TV, maybe a screencast will work? Example video: Al Gore introducing an app, but it's a very dry, boring video.

So what else? We don't have to give people an instruction book.

Nature doesn't have instructions, even though it has a pretty complex interface. We all spent years learning the interface to the world. We've got it now, which is great, but it took work.

Some people use skeumorphism to tap into prior knowledge, but if you don't follow the metaphor all the way through you make a much worse situation. Eg. Apple Calendar is skeuomorphic but for the first 18 months you couldn't "turn the page".

When you're teaching things to users, think of the patience and tolerance you would show to children. They don't know things yet and we accept that. When an interface is unintuitable, why expect people to get things instantly?

To learn great ways to teach people how to use a UI... play more games! Games use...

coaching
levelling up
power ups

...to great effect.

Some sites and apps use little popups/inline dialogs... but we are haunted by the ghost of Clippy past, where the terrible content and persistence despite dismissal drove us nuts.

If you add a hint or callout, make sure you stop showing it once the user has actually done it – when they know, you don't need to tell them. If they've done the gesture or said ok, stop hassling them.

Provide visual cues for custom gestures. A suitcase without a handle is useless; a gesture with no affordance is useless.

The best time to give a hint is when people need it – games may pause and tell you how to block when you're getting heavily attacked.

Apple took it a step further and forced people to learn to scrollin in OSX Lion – you had to scroll before you got a continue button, it was just that important.

Power ups in games give you super powers – they let you shortcut things and reward you for effort. They can be used by anyone but are especially effective when used by experts.

If people are doing a slow version of an interaction, after the tenth time you can offer a hint about a quicker way. You can even require them to do it to proceed.

Even so this all shows we don't have conventions. We don't have enough commonality to form standards. So talk to each other, be generous. Ask people why they built something the way they did.

@globalmoxie

Jon Kolko: A means to an end

Two parts to the talk – Means, and Ends.

Means...

(mesmerising time lapse of Jon making a clay pot)

Jon learned how to make ceramics from a very young age and it took him a long time to appreciate craftsmanship, that the goal is to get things right not do them fast.

EXPERTISE: CRAFT, MATERIAL, PROCESS, VOICE

source: slide deck (pdf)

Craft is about engagement and quality.

What happens when you gain expertise? You learn what the medium can and can't do; you gain patience; you slowly gain understanding. You learn what the medium wants to do, how it wants to work.

"Art resides in the quality of doing, process is not magic." - Charles Eames.

There is a message to creation, there is a wider reason for making things in the first place.

Where do we choose to aim our mastery of craft, material, process and voice?

What problem do we solve?

Ask these three questions...

Should I make things?
What things should I make?
For whom should I make these things?

Your selection of subject matter is a complex political decision which always has consequences.

If you do a wonderful job of designing a McDonald's website, did you cause the rise in diabetes? Probably not. But did you amplify something that was already happening?

Ends...

Ethonography around homelessness in Austin, TX...

His students set up a sign at a gathering saying "hi can we ask you a question?" and they asked "what do you want to have happen by the end of the day".

They realised homeless people are a lot more like them than they realised. They have phones, they have Facebook accounts... they just don't have homes. They realised self-actualisation was important to them. What if they were teaching something?

So they set up HourSchool; and an online platform for people to teach things. "We believe that when people teach, they gain self-worth; and that empowers them to take control and change their situation." (inexact transcription)

Notion of a social entrepreneur – someone who takes on risk and reaps a reward in a social context. They can still make money, they can still be financially successful, without sacrificing positive social impact.

Design is now getting into the boardroom; it's not longer a service to the business, it's part of the entire strategy.

Three ways to control the subject matter:

build a theory of change
become a social entrepreneur
run the show – get into the boardroom

http://wickedproblems.com/

@jkolko

End...

(Once again, the end of Web Directions has arrived so fast your head spins.)

WDS11, the big stonking post™

2011-10-17T00:30:00.012+11:00

Welcome to the Web Directions South 2011 Big Stonking Post™, my rough notes hammered out on a laptop (to aid my own recall) and posted here for your enjoyment.

The usual notes: These are very raw notes - excuse typos, and if you need an exact quote please check the podcast as some of my quotes end up more like paraphrases (I can only type so fast...). Anything marked "Aside:" is my own thought and not something the speaker said.

Since it's so big I've gone old school and added a jump menu.

A 21st Century Bestiary - Anne Galloway
Designing for change - Simon Wright, Scott Bryant
Scalable JS Design Patterns - Addy Osmani
A Dao of the Web - John Allsopp
Using the world as a canvas - Martin Tomitsch
Long after the thrill - Stephen P. Anderson
Design [in|for|and] the age of ubiquitous computing - Mike Kuniavsky
All the small things - Relly Annett-Baker
Interaction Design Bauhaus - Rahul Sen
The origins of magic - Dmitry Baranovskiy
CSS3 Transforms - Greg “Wickedly Cool” Rewis
Waving at the machines - James Bridle

Day one.

A 21st Century Bestiary - Anne Galloway

The concept of a bestiary is ultimately about how we relate to the world, allegories for life.

We use pets as a way to understand who we are, understand our place in the world. Pets are good to think with because so many of us choose to have them. We can take lessons from pets in terms of how humans relate to non-animals. Remember pets and computers both fall into this category!

LOLcats demonstrate our shared understanding – we understand cats, we understand the idea that monorail cat could “become obsolete” because we also understand technology.

We can look at how we treat pets for an idea how we might treat people in future.

If we have an etag on a cat door to stop the wrong cats getting in, we might well do the same thing to people.

(Aside: we already do, really – think swipe cards to get into your office or carpark.)

We try ideas out on animals before we would do it to people – having tracking devices on them, implanting locator chips and so on. Over time we try them on people too.

Poultry Internet – remote care device for looking after a chicken. The idea could be extended to having your cat wear a jacket that lets you pat it by remote.

Comparison: Cow Clicker vs a real national farm “game” where people had a say about the running of a real farm. She learned far more about farming from the real game.

“Why not an internet of cows?” If we can have an internet of things, why not an internet of cows? Or is that the Internet Fridge of today?

The best way to think of it is looking at cases with real data, like Teat Tweet which gives people some level of real insight into life on a farm.

“The cow gave 12kg of milk? That's a lot of milk! I didn't know...”

Across the world lots of data is being collected, including things like a company called Spark that tracks cows and their health. Each cow generates around 200megs of data per year... but then the question comes up about jurisdiction over that data. Who has the right to it? Who owns it? Do animal rights laws get involved?

Technology enables connections to things, to people, to other locations. There is a system (wheresyoursfrom.com) which prints a number on eggs so you can look it up and see where it came from, even see a photo of the farmer.

Icebreaker added “baacodes” to their products so you could look up the story of the sheep. Although it's a bit spurious, since any one item of clothing will probably use wool from half a dozen sheep. But people don't really mind since they just wanted to match back to a farm. Since Icebreaker trade somewhat on the idea that they are ethical from beginning to end, letting people check in gives that message some credibility. This is not technology doing the tracing, it's really marketing giving a view into the process to reinforce the brand. There is no real way to actually check up on it.

Sidenote from Anne: Why do we insist on bad puns and general infantilisation of anything to do with animals and farming? Although they are fun, it's unclear why we don't treat farmers like adults.

Moving further from humans... pets, to livestock, to wildlife... everyone uses this spectrum.

People love watching wild animals – we have heaps of webcams in zoos, they popped up really fast as the web took off.

The ability to watch and follow animals runs the risk of us reading human ideas and values into it, rather than observing what the animals are really doing. We tend to use animals as a reflection of humans and human values.

Pigeonblog – people are collecting air quality data from homing pigeons. Notion of “citizen science”, where people can get data in creative new ways.

CYBORGS.... looping back, imagining new ways to think about people, animals and technology. This is the beastiary's role in challenging our understanding of who we are.

Mouse Match – dating site for people who breed mice. Talk about a niche!

Luka, The Wifi Dog – a much friendlier way to explore the ideas presented in Minority Report. Notions of freedom, privacy and so on are easier to discuss around a dog than a human.

The military – especially the US military – is big on the idea of cyborg animals. The US have robotic beetles they can quite literally control by remote.

“While I would love to have a cyborg beetle, what I don't like is the US military having them” (rough quote)

Corrupted C#N#M# (angelo vermeulen) used hissing cockroaches to disrupt video signals – what if the next denial of service is done by roaches?

Project: Respiratory Dog. Explored the idea that ex-racing greyhounds could power respirators for humans. Both the dog and the human get to keep living!

Even freakier: Dialysis Sheep, a combined-DNA sheep that could replace dialysis machines. The human and sheep DNA are recombined in a way that makes them compatible; so the sheep processes the human's blood overnight, instead of a dialysis machine.

Technology is enabling significant new ways to connect humans and animals. Who do we become if we avail ourselves of these new connections?

@annegalloway, designculturelab.org

(Top)

Designing for change - Simon Wright, Scott Bryant

News.com.au does about 5m unique browsers per month for 130m page impressions... so fairly intimidating numbers.

With their relaunch they added features they expected people to find as they explored – to surprise and delight them.

They needed to give editorial staff lots of ways to present the content; and to let the writers express more personality through the design.

Typography was a big deal, which is why they used an embedded font – to make type a hero of the page.

In the presso: sharing some feedback as they go... negative stuff tends to be quite funny because people rant. The positive stuff tends to be quite straightforward.

Classic feedback: suggestions the design was done by schoolkids or people with crayons.

So what do we really mean by disruption? CHANGE. Not just to users but to internal processes.

Si: hates it when supermarkets move things around, it's really frustrating and stressful. It disrupts your flow, distracts you from achieving your goals. Frustration taps into our emotions – anxiety, surprise, anger, delight...

We may not be changing entire industries – most of us will not launch an iPhone – but we're still disrupting our users.

Don't redesign, realign – make small changes rather than blow everything up at once. Although blowing it up is fun for designers it's not great for users.

However when realign just isn't enough... you still do have to blow things up.

They started with wireframing but it wasn't stretching things enough and it wasn't resonating with users in testing sessions. Realised the big picture had changed – realign wasn't enough.

There's still an obsession with getting things above the fold – but because it's so prevalent users tend to expect it on news sites. But elsewhere people scroll and this should eventually come across.

One key thing to remember is ads push design trends because people have to accommodate the same three primary ad sizes. This is why news sites in australia look so “same-y”. The three-col design is prevalent because it accommodates the ads.

Change vs Innovation. Stakeholders constantly say “we need to be innovative!” but you don't automatically have to do that. You need to balance that desire for innovation against the users' desire for stability and familiarity.

There are really innovative designs out there for displaying news – but could you really whack your banner at the top and give them to users? They'd freak out!

In a previous redesign they'd introduced drag and drop, and the ability to move content modules around and expand the ones you're interested in reading. What emerged is people loved the idea, but only a really small number of people actually did it. Ultimately you have to decide if the cost of maintaining that feature is truly worth it.

Decided to explore realigning with the younger 18-39 age group that is news.com.au's prime audience. Looked at the way users were getting news through facebook or twitter – found people thought it was valuable to have their friends' input and curation.

Having decided to redesign, take a moment to ask... what are we actually designing? Check your requirements and user stories (although it's hard to say “as a user I want to see advertising!”). Get the big first list then simplify that list. They worked with key stakeholders that could determine the list of five measures that would give the definition of “done”.

Key things: differentiate from competitors, engage users who tune out sections, more opportunities for top stories traffic, appeal more to target market, address the gender imbalance (avoid the usual male focus of australian news websites).

People tune out sections on quite blunt demographic lines (eg. males ignore entertainment) – but then they miss stories that they would actually find interesting, just because they're categorised a certain way.

So what does success look like for design/ux? What were the design objectives, in design language, rather than business goals.

Si was quoted: “It should feel like a website today interacts. You shouldn't be able to print it out. Made for the medium, made for the web.” ….this quote was kept through the whole process afterwards, even when Si tried to throw out that piece of butcher's paper.

Content, not design, is the hero. How can we elevate content and retain a good user experience? That's how they ended up with what is really a quite simple and minimalist design (particularly in the News Ltd stable).

Photo by Simon Wright

Black Ops... or stakeholder hide and seek. For several weeks, they snuck around the building and stole meeting rooms. Every second day they'd arrange a stakeholder catch up to see progress, answer questions and give feedback. Constant iterative process. The earlier investment in requirements made the stakeholders feel happy that things were on track, so they were largely “left alone”.

Sidenote: the Daily Mail is simply a massive website, printout went from ceiling to floor and still had to be rolled up.

They did a lot of sketching through the process – right through to the end, not just something that was done at the start. But they didn't just sit in photoshop the whole time.

Kept the rolling set of iterative printouts on the wall – last four or five printouts in a row, so stakeholders could see the progression of ideas and the response to feedback.

After every stakeholder meeting, they'd pack up and move to another meeting room – it became a really fun part of the process. People would start scouting to find them ahead of the meeting. Also kept Si happy as he got to see all the different chairs in the building (chair afficionado in an office full of different chairs..).

However the moves also helped them reset and refocus every other day, to help keep the process going. It also stopped anything becoming a blind spot – printouts that sit on the wall start fading out, but moving around stopped that happening.

Simply sketching things BIG on butcher's paper helped people think about it; and adding post it notes to simulate interactions. They kept the huge roll of discarded paper (even though it's taped shut at this point) as an artefact of the creation process and a reminder that “building websites kills a lot of trees”.

It was important to give confidence to the stakeholders; so they decided to do some focus groups to try out some real interactions. Got some internal, non-developer users to try things out so they could give some cross-checking and reassurance to stakeholders. It also meant they could get people back to try things again later.

Tools: sketching, Photoshop, Axure, HTML/CSS (especially to do rapid prototyping with CSS transitions).

Noting that the major information architecture didn't really change. Also there were no CMS changes, the entire change was done by the awesome frontend dev team.

When it gets big, having those big goals helps keep things on track. Being flexible is important as you must respond to changes in requirements and environment – eg. Not getting stressed as they had to swap things around in the top right corner.

Feedback – remember that getting any feedback in the first place is a measure of success, because people are noticing and engaging with it. The craziest, nastiest feedback happens in the first 36 hours during the shock of the new; then it changes. Some people even come back and comment that they're getting used to it.

Feedback from lots of sources – keep track of where it's coming from. Twitter gives you very quick, but cryptic feedback; so take it as a rough gauge. Facebook gives more details but is by far the angriest (the theory is those users feel very close to the site, but did not feel close to the redesign process); email gives even more detailed and long feedback. Internal feedback cuts through all your filters.

Naturally there was a “bring the old news.com.au back” facebook group – Si: “I kind of feel like we've made it now we have a 'put it back' facebook group”.

Big part of the feedback process was having a blog post - “Honey, we blew up the website”. One suggestion is to try putting that up ahead of time to prepare users for the change, rather than putting it up at the same time.

When you get the feedback storm – take a deep breath. Keep it in perspective, you will get negative feedback. Is it actually coming from your target market? Use the medium to ask follow-up questions and explore the problems? They instinctively used personal twitter accounts, but it did make it more human. Also, you do just need to let things go sometimes. You don't know what is going on in their world and sometimes you just won't make sense of their reaction.

Know where you fit into their lives. For news.com.au it's 9am starting the day - “don't mess with routine” rule.

Best bit of feedback ever comes from the 2008 relaunch:

Best rule of website feedback: it's just a website, don't take it too seriously!

@diversionary @ScotTheLot

(Top)

Scalable JS Design Patterns - Addy Osmani

Most empires start out quite small, then grow (imagine adding ships to a fleet). Each of the pieces need to talk to each other, which is easier when things are small.

You can solve this issue by introducing a central control – a Death Star in the middle. Everyone talks to the single entity which communicates back out.

Also you want the fleet to keep working even if one ship is lost or swapped out. However you also want the flexibility to move to a whole new death star if you need to, in case IT blows up.

Part I: Patterns, a New Hope

Design Patterns, JS, Scalable Application Architecture.

We all do things differently and we try to address scalability differently. Small differences in syntax and approach. But that doesn't work when you scale, it leads to problems.

“We search for some kind of harmony between two intangibles....” - Christopher Alexander – father of design patterns.

These patterns are solid and reliable, they've proved themselves in the past. Some of the patterns which emerged 20 years ago still apply now to JS!

Patterns are reusable, they give us a vocabulary for expressing solutions elegantly. It's easier than describing deep details – they are problem agnostic. They ultimately prevent minor problems which turn into big problems down the line.

Part II: JS Strikes Back

Common pattern is the anonymous self- and immediately-executing function. It has problems with privacy, so you use modules to make things private within the module.

It's very flexible, it's a very old pattern. You can apply this to jQuery, YUI, Dojo, ExtJS.

Better pattern: Asych Module Definition (AMD). It's a stepping stone from the module system. Has define() and require() methods, conventions for declaring dependencies and so on.

An alternative is CommonJS, does similar things.

ES Harmony Modules: a module format proposed for EcmaScript Harmony.

“There are people who do things right, there are people who do things wrong, then there are people who write Google Dart.”

Facade Pattern – gives a limited, readable API and doesn't directly expose the underlying code. The exposed API can differ greatly from the underlying modules.

Mediator Pattern – the death star from earlier. It acts as a mediator to handle disparate things. It's the air traffic control – the planes don't talk to each other, they talk to the tower. Modules broadcast or listen, without being too tied to specifics. Pub/sub on a central mediator.

Scalable Application Architecture: strategies for decoupling and future-proofing large apps.

Possible problems: how much is reusable? Can a single module exist on its own? Can a single module be tested independently? How much do modules depend on each other? If one part fails, will the whole thing still function?

Think long term. You may decide to switch libraries somewhere down the track.

The secret to building large apps is never build large apps, build small pieces that fit together.

Acknowledge from the start that you don't know how it's going to grow, so you design defensively.

Putting it together.

Components communicate with the facade, which communicates with the mediator. Components do not communicate directly with the mediator.

Some people call the facade a “sandbox controller”. Same concept.

Application core manages the module lifecycle – when is it safe to start, when should it stop, when they should be restarted. Modules should execute automatically when started.

Modules should inform the app when something interesting happens – publish events. This includes errors, when something goes wrong it should publish a useful error.

Useful example is the Gmail chat widget can restart and recover without stopping you checking your email.

Aura preview – a framework he's building at AOL to provide a boilerplate for one way to approach implementing this architecture. It will be open source.

gituhub: addyosmani – todomvc, a “to do” list example shown in a variety of libraries.

@addyosmani

(Top)

A Dao of the Web - John Allsopp

Aside: John's original Dao of the web article on A List Apart is one of the most influential posts ever written about modern web development. I can not immediately think of any other post I still reference more than a decade later. It is required reading! If you have not read the article, you should.

Photo by Web Directions

John has been thinking back over the past ten years and what he has learnt since writing the original Dao article.

Quoting from Tao Te Ching (“It's not religious, don't worry! Give it a go!”)

The power of the web is not complacency, it's from the tremendous efforts of individuals. There is also something profound about the web itself and the way it's built.

If you'd told John in 2000 people would still be talking about the Dao article ten years later, he'd have thought you were crazy.

In 2000, most designers were coming from a print background – a context of control, which brought the expectation of fine-grain control (colour, fonts, etc). They thought the web was broken because they didn't have the same control. The new way was to consider that “bug” a feature – John called it adaptability. Users could change things so the web would work better from them.

The web was a user-centric medium, possibly for the first time.

But there's a risk of replacing old dogmatic approaches with new ones.

...

John asks himself now... do the ideas still hold up? The web has changed amazingly in the past ten years.

Now we have people talking about having control when you use the web, but losing control when we move into building native apps. (Brian Fling example quote)

But we have Joe Hewitt talking about how native apps have the “right” kind of scrolling; and how it's hard to do on the web.

Hewitt, Wired and others suggests we might stop using the web in favour of apps. John notes “There's a cottage industry in declaring that the web is dead.”

John: “I love the web for what it has done for our world. We have wonderful careers as developers and a lot of what we do makes peoples' lives better.”

The web is hard to master – but John feels this is a feature, not a bug. "When people say they want it be more native, they mean 'iOS'. Let's be honest.”

Developing for iOS is like designing for paper – there are basically four screen sizes: phone or tablet, in portrait or landscape. There is one way to input – just touch. We can presume people with these devices have a reasonable network for connectivity. There are a small number of interaction design patterns. Then Apple puts huge energy into making things nice (online, to make things work brilliantly we need to do the work ourselves).

Yin and Yang comes from the Tao Te Ching. Things define their opposites, things are defined in response to what's around them and what they are not.

So the constraints of iOS are features because it's nice to build and nice to use. But the other side of that is censorship and control over what you can publish, how you can publish it, how much money Apple will take. Innovation is a function of the people who own the platform – you have to wait for Apple to add new things to the system.

The matrix of possibilities we create for on the web is more complex than iOS, but it is not constrained in the same way.

In absolute numbers, the takeup of the web is much higher than that of iOS. It has huge reach.

Universality is not a bug of the web, it's a feature.

The fundamental approach to innovation on the web is to be open – people create things like jQuery and Coffeescript, build a collaborative web. There's nobody at the gate stopping them putting it online, the way Apple can stop you putting things in the app store if they don't like the way you built it. That's the great power of what we are doing. That's why it's better than a closed platform – no matter how wonderful that platform may be, how much fun it is to build and use.

As professionals, stopping progress would in fact make our lives easier – even if things are limited, they're not a moving target. This is probably why platforms have such appeal – it's like working in a simpler time, with less divergence, less variables to handle.

Everything is fragmenting, everything is diverging, but this creates new times and ways to use devces. There is no way John would ever go jogging with a laptop, but his iPhone can track miles and upload data later.

Divergence is still a problem. It is hard to do what we do. It is a problem, but it is OUR problem as developers and designers to solve it for users.

Scott Jensen describes the current focus on apps as “jurassic”. That it's ultimately a myopic view and something we will move past in time. So if we live in the jurassic age of apps, what will the cretaceous look like?

One of the web's great powers is to remove friction and flatten hierarchies. In 25 years we've gone from air mail letters taking a week, to having email and social networks to talk easily and immediately with absent friends.

Cam's “play” app had no friction: we went to a URL and started playing. Had that been done with apps we'd have had to go into app stores, seach for things, provide credentials, give money, wait out the bandwidth......

“App stores and platforms sound like paper in 1999. We have gone backwards in time, to a past that's really kind of over – certainly for the user.” (paraphrase)

John thinks the web needs custodians, not owners. People who will nurture it, grow it, engage with it, people who love it.

The success with the web is due to the people who have been building with it.

The strength of native apps is regaining control, but the strength of the web is building to cope with the lack of control.

We should nurture and enable the web, not try to own it or control it. Trying to control the future is like trying to take the master carpenter's place – when you handle their tools, chances are you will cut yourself.

We should nurture the web's adaptability, the thing which makes it universal. It's taken us on a long and amazing journey so far, and hopefully that journey is actually the first step on a journey of a thousand miles.

@johnallsopp

(Top)

Using the world as a canvas - Martin Tomitsch

What happens when you integrate digital displays into a neighbourhood? They tried using blackboards as a rapid prototype – neighbourhoodscoreboards.com

Focus for today... “Ubiquitous computing”

Years ago the idea that we would have multiple computing devices on and around us at all times seemed unlikely, but we have that now – phones, tablets, etc and public devices like screens showing information in public spaces.

In 1991 Mark Weiser suggested ubiquitous computing would “help overcome information overload”.

[U]biquitous computers will help overcome the problem of information overload. There is more information available at our fingertips during a walk in the woods than in any computer system, yet people find a walk among trees relaxing and computers frustrating. Machines that fit the human environment, instead of forcing humans to enter theirs, will make using a computer as refreshing as taking a walk in the woods.

Putting information into the periphery may allow us to focus more on what's in front of us. Ambient display of remote information can connect people – ambient intimacy, similar to twitter. (example of one table having a projection of what's on another, so you can tell someone at the other end is having their morning coffee)

If you have objects that don't look like computers, would you incorporate it differently into your life? eg. Small glowing ball that indicates data with colour, it could sit in places like the bedroom that you wouldn't have a computer display - because it doesn't look like a computer, even though it accesses data.

With the drop in cost of screens, people are deploying them in an incredible amount of new places – on buildings, on buses, on hand dryers! ...although sadly, often just for advertising.

Smartphones can be quite isolating – people get immersed in a small screen experience and ignore what's happening around them. Augmented Reality may combat this by merging the two – make the device more aware and immersed in the reality of the place you're in.

Personal projectors and AR devices open up a new avenue for personal broadcasting and expression. Early examples are projections over buildings – mapping the phyiscal so you can project over the top of it. Lots of examples on youtube.

@martintom

(Top)

Long after the thrill - Stephen P. Anderson

Photo by Web Directions

How do we get people to fall in love with our applications? ...leads to the next question: How do we get people to stay in love with our applications?

Can we do this by making things more gamelike? ...with the caveat that Stephen thinks it's not really about game mechanics, it's about psychology and what motivates people. Motivation is a better place to start the conversation.

Humans have an inherent tendency to seek out novelty and challenges, to extend and push themselves. It's wired into us.

Three attitudes to teaching:

The “apply yourself” approach: This stuff is boring. I'll make the best of it but you'll have to work and apply yourself.
The “sugar coating” approach: This isn't all that interesting, but I've added some activities to make this more fun for everyone.
The “finding the joy” approach: This stuff is really quite interesting! I'll show you why it's important, but first I've got a challenge for you...

games and challenges + goals and rewards = game

Note if you just add the rewards, it's not a game. That's badgification, not gamification. There's a difference between making things fun and finding the joy in the topic itself.

…

Exercise with the audience:

Think of a game
Why does it work?
How could you apply that to a web project - how would a time tracking application look/work if it shared the characteristics that made the game successful?

I thought of a game which unlocks items and features in the game based on challeneges; then when you're done you can do the challenges again on another play-through (armed with your experience).

This gives continual progression and mastery. Each time you “win” and hit the top level, you unlock a whole new level to work through (and it gets harder each time).

So what would a time tracking application look like if it shared these characteristics?

Completing time faster and more accurately earns points, you can level up as a time tracker. Unlock abilities to block out larger groups of time, at first you can only enter time at the end of one day and not do multiple days, get badges or mods for accruing certain amounts of time against a project.

…

The exercise is good to see a design from a different perspective; and move beyond simple points and badges games.

Farmville + time tracking = entering time several times during the day keeps your farm going.
Bubble wrap + time tracking = pop bubbles to enter time.

...spot the problem though? Adding game mechanics tends to fall into the “sugar coating” category and they add only a short term layer of fun. They don't keep you interested long term.

Instead, how do we find the joy? Figure out what really makes games work. Figure out why it's important in the first place. Try using intrinsic motivations instead of extrinsic rewards.

Do the “five whys”/laddering. Ask “why?” five times. Eg “why do I even want to track my time?”

The “aha” moment was that Stephen wanted to get better at estimating time to have a more balanced life. He started doing an estimate of the time that would be used that day; then compare against the reality and work out an accuracy rating.

Motivators: challenge, curiosity, control, fantasy, competition, cooperation, recognition, self expression...

The bad news about games: they eventually end. Even World of Warcraft had to be blown up and started over. So if you make things more game-like, they will eventually lose novelty. The honeymoon phase ends.

“Delight, unfortunately, doesn't last.” - Ralph Koster, game designer

Stephen put out a question on Quora – what web apps have you used more than three years, and why? The answers: apps like twitter, facebook; reasons for continued use were things like “it does a decent job”, “it works and they improve it”, etc. But there was no love.

He asked a question about which services continue to delight them? Response: crickets.

So ultimately you can get people to stick around by providing a service that is trustworthy and valuable.

Kano Model – comes from industrial design. Two axes: low to high satisfaction; and not implemented to fully implemented. You have basic needs – features you simply have to build to be in the space. Then you have delighters – things that are not required, but when added they bring value (however over time they stop delighting people).

Social Proof - “all my friends use Facebook”. People go where there friends are, even if there's a better tool somewhere else.

Personal Narratives – stories. People have stories in their head that inform what they are doing.

Getmentalnotes.com

@stephenanderson

(Top)

Day Two.

Design [in|for|and] the age of ubiquitous computing - Mike Kuniavsky

Talk based on Mike's experience designing experiences for things other than computers – gasp!

Looking at the history of technology... papyrus was disruptive: it changed society in ancient Egypt because writing suddenly became orders of magnitude easier... then more people wrote, the scribes gained a huge amount of power, people started having ideas and asking questions like “why is it only the pharoah that goes to heaven?”

To protect power, the pharoah made scribes into a higher role in order to control them – they reported only to the pharaoh. Control was re-established. There was no clear intention from the people who created papyrus that they were trying to threaten the order of their society... it just happened.

The lesson from this is that technology always has unintended consequences. We may feel like we can predict it but we are mostly looking at the small pieces that make up the whole.

We're on the upslope of a change now – that of ubiquitous computing.

In 1989 a 486 chip cost $1500, in 2011 it's fifty cents. The cost has plummeted and the power has gone vastly up. (Moore's law)

Saying the cloud is good for having your data and processing done elsewhere (thin clients) is like saying steam engines are good for pumping water out of mines. Sure, steam engines were good for that – but they were also good for creating the industrial revolution.

We are getting used to the idea of “information as a material” - we are comfortable putting chips and connectivity into everyday things. It no longer seems crazy. BlendTec have – for a long time – had a programmable blender. The blender can have knowledge about making things programmed in. This means it can have buttons that reproduce a series of blending actions determined in a food lab – smoothie chains don't have to teach their staff all the finer points.

Modern small aircraft controls now look rather like a flight simulator... that flies. But more importantly small computers have replaced mechanical parts, which means they can act in more sophisticated ways – they can react to data.

Connecting the real world and the information world has been hard – we have restaurants, we have ratings services. But we end up with stickers on the door telling people they can make use of the rating service. To put it another way, the sticker is telling people their current location has an information shadow.

Having access to services on our devices breaks down the online/offline view. We don't think online or offline, we think “use YouTube”... on pc, phone, tablet. Mike names this a move to devices being avatars for services. Your phone becomes a convenient way to take your Flickr photos with you.

Kindle has the “buy once, read anywhere” approach – they don't care what device you use, because they know you're simply accessing their service. The Kindle Fire can be considered a physical representation of Amazon's entire digital inventory – it's incidentally an iPad competitor.

This all makes the service design a key challenge. Designing a service that works across all these service avatars – all the devices/ways/places people will access the core service.

Mike suggests ubiquitous computing really “started” in 2005 (updated roombas, elmos, etc). This makes the movement really young, it's really early days. So we can barely understand even the shape of the elephant in the room.

We don't have a good mental model for how we relate to things linked from virtual to physical. Examples:

Germany's “call a bike” service where you ring a bike to book it, and when you're done and lock it up the time spent is billed to the bike. You don't own a bike, you own the possibility of using a bike when you want to.
Fashion rental/subscription services (eg. Bag, Borrow or Steal) operate on the idea of paying for the possibility space of “whatever the fashionable bag is right now” instead of owning any one bag. Maybe in the future we'll simply subscribe to brands and access whatever's suitable for where you are at the time, even across cities and climates.

Perhaps the most profound effect is our increasing reliance on embedded logic and services. We are generally happy for Google Maps to give us a route to get somewhere – allowing for the odd time it gets it hilariously wrong. San Francisco has implemented sfpark.org which senses the presence of a car in a space. The data is then used to locate open parking spaces; it pays for itself by telling parking rangers where there's a car parked by an expired meter; but it also has a self-updating pricing algorithm to charge more in high-demand areas.

“Quantified self movement” - using devices to monitor themselves and their lives, so you can optimise your body and your life. Fit Bit monitor, body meters, sleep sensor by Zeo... devices to monitor your life at a very personal level. The devices are all built with the assumption of being connected to things – they are not useful on their own. They introduce extrinsic rewards for doing things, but they're based on algorithms rather than what we consciously want. Critically though we have to trust the objectivity of the devices.

Water Pebble – a little device that times your showers, then slowly reduces the time it allows. The idea is to reduce water uses. However it reduced beyond what Mike could keep up with, so in the end it stopped helping change behaviour and simply “sat there blinking red, mocking my inability to change”.

We end up negotiating with devices – we want to reason with them, to explain we can't shower in that short amount of time after all and give us a break.

Things have unintentional consequences. Social media and mobile phones provided a disruptive technology that led to massive social change in Egypt – this year! Any technology which can be used to share cute cat pictures can also be used to overthrow a government.

While we have a responsibility to keep working and designing new things, we must not forget things have unintended consequences.

@mikekuniavsky

(Top)

All the small things - Relly Annett-Baker

Little details are important but often get ignored.

A caveat: this talk should not need to exist! In a perfect world all projects would have dedicated copywriters (“ha ha ha!”).

Another caveat: Relly does not code or design, so if she says something dumb please excuse it! She's made a career of asking stupid questions from smart people – it lets her take on that wisdom.

(I cannot match the way Relly tells the story of a man trying buy a drink at a bar and being bounced around with lack of instructions – forced to extract every last painful detail, then told to go buy the same gin in another room... much like “paypal will handle your transaction...over there...good luck...”)

People who are trying to use the web and buy things want things to be easy and understandable. This is essentially why music piracy took off in the early days – it was just so much easier. Itunes had a lot of success by being easy to use.

“Even the internet wants to get paid on fucking Fridays” - Dave McClure

Although the internet started out with a few geeks connecting some computers... someone said “I know, let's connect a BANK to this and we can SELL shit!” Now it's developers' jobs to build things, but it's often devs who end up writing instructional copy.

We can learn a lot from game design when we approach interaction copy. Games teach you to play: Super Mario Brothers, level one, teaches you need to dodge the mushroom-esque Goombas, or you'll die – in fact most of us died this way at least once:

But you also need to get the actual mushrooms for power-ups. So the power up mushroom is almost impossible to dodge, so you get hit by it... and discover it's a power up.

You didn't feel like you were learning, you felt like you'd succeeded. Then when you killed the goombas a little score number popped up inline – which was revolutionary at the time. You learned you were building a score.

Example: the Huffduffer signup form, which is done in “madlibs” style rather than a big form. Everyone can fill out this form, it's conversational and understandable.

To explain instructional copy, look at text games – get lamp, light lamp, etc. Whole games were based on text instructions and four-line descriptions of places... and this sparseness has persisted to the modern web: “make it shorter, clip it, put a picture there instead...”

Text adventures have now evolved into “interactive fiction”. eg. “Violet” by Jeremy Freese. Also “The Big Orb” which is quite silly but shows how to write instructions, you know how to use it “...which is more than you can say about most websites”.

404 pages: “Welcome to the abyss, only the back button can save you now!” Hitting errors is like death – and the more you die, the less you want to keep trying.

People don't like explaining things – they think it's boring, doesn't look good, etc... but actually explaining things increases trust in your site and your brand. Trust is hugely important. People will keep using businesses they trust, even if things go wrong – we trust them to fix it.

Example where a bank released an iphone app, but staff in local branches couldn't confirm if it was a legitimate application. One staff member said "oh, well it must be ours it has our logo on it..."

The bank should have been prepared for enquiries – they had only done part of the job. “You want inbox zero, not inbox shit-ton”... doing a half-arsed job of fixing something is only a short term fix, it's a bad shortcut. It results in emails because things go wrong.

Try buying things out of your comfort zone – see what the experience is like. It's mostly terrible! ...and the users hate you for it! Businesses like Amazon only have to be marginally better than others to be successful.

Surely we can shoot for something more than Marginally Better.

Start with forms...

Book recommendation: “Forms That Work”

Helper text is good - “Enter Your Billing Address” is a bit obscure, but adding “Where is your credit card information sent?” explains the form field in a simple, understandable way. People don't say “billing address” but they know where they live.

“Use text that describes the user's goal.” - (source missed...) eg. If the button sends the form, simply say “Send” don't mess about with icons and pictures of letters.

Also be audience specific, eg. a UK site with an older average age has “I wish to make my purchase” buttons instead of “check out”... this is language that makes sense to the user. UK shoppers don't "check out".

Save users time by pre-filling fields if you can do it – ask “have you purchased through this site before” rather than telling them “go log in”.

“Don't make me bugger about!” - Relly

Give people good feedback on failed form submission – do it inline, contextual help is better than a big list way back up at the top.

Back to 404s... Smashing Magazine held a competition to design a 404 page and the winning entries were mostly terrible, in fact some were less useful than the default apache error message which at least attempts to explain what 404 even means.

“It's not enough for your website to be usable. That's like saying a meal should be edible.” - Cennydd Bowles

404 pages should give people options to proceed – show people the prime content they are probably looking for anyway, explain what to do next. Don't make it a dead end.

Site recommendations: Abtests.com, bokardo

Best slide: “When all else fails, crowbar the fucker”

Don't try to ram inappropriate copy into places it doesn't fit! Write it properly.

Error messages... don't give cryptic messages with no hints on how to correct the problem. You can use some friendlier language, you can provide pathways to help right where things have hit a problem.

Passwords and logins... try to remember your users aren't like you, have some empathy for your users. Relly changed an error message from “oh no something has gone wrong!” to “oh dear, we have a problem. Let's fix it.” Being alarmist will make users stressed, being friendly helps them get on with fixing the situation.

Terrible example: “passwords with the letter I in the third position are not supported” ….WTF?!

Take away:

State the error
Explain the error
Create a path to resolution

Easy!

Legalese and Ts and Cs... iTunes has 90 pages of T&Cs, this is terrible, people don't read that.

If you don't have a content strategy you need one. Get a copy of “Content Strategy” by Kristina Halvorsen.

Toolkit:

Good placeholder copy. It might end up online...
Have a style guide – how should things sound? What tone should it have?

Take the time to test and the time to write. You can absolutely ruin your site with a bad form at the end. You need to be less annoying than Barney the dinosaur – surely you can manage that!

@RellyAB

(Top)

Interaction Design Bauhaus - Rahul Sen

What history can teach us,
While designing our digital futures
For people

Rahul's background is about interaction design with products, rather than the web. His thoughts about this talk began when he was using Spotify on Windows Phone... he fell in love with the Windows Phone "Metro" design language. It made him question the ideas of what we consider “beautiful”.

As a designer it made Rahul challenge and question the user experiences he was working with.

Metro recap:

clean, light, open and fast.
Celebrate typography.
Alive in motion.
Content, not chrome.
Emphasises “authentically digital”.

Specifically avoids skeuomorphism, eg. from the guidelines:

Favor Practical Operation over Realism.

Generally speaking, applications should not have custom controls that seek to mimic real life. For example, the FM Radio feature in the preloaded Zune application does not use a dial, knob, or series of buttons to control the choice of station.

(Implementing Windows Phone Application Design)

Difference between evolution and revolution... think of revolution as a circle, disrupted. Something that sends things onto a different trajectory. Evolution becomes revolution at a point when a conscious choice and effort is made to do something different.

We don't just have known revolutionaries, history is full of faceless revolutionaries and people who were recognised after their time. Look back from Apple to Dieter Rams, what happened in the past informs what happens now and next.

Aside: interesting how people have to put huge disclaimers ahead of critiquing anything about Apple. We should not make it so hard to discuss things that are just products.

iOS5: why did they put embossed leather design in? Isn't interaction design rebelling against this? Aren't we trying to design authentically digital experiences?

Idea of Shiva as an agent of “proactive destruction” - clearing the old to make way for the new.

Let pixels BE pixels. Let's not make pixels look like leather!

We also still inhabit physical places, although the physical and digital aspects of our lives are converging. We live in Sydney, but also on Facebook. They're not perfect but we stay there.

We inhabit built spaces which have scripts. Things like facebook are simply objects.

Book: What Technology Wants – Kevin Kelly

Technology is an extension for ourselves, new forms of containers and shelters. Our devices connect us to people. But we are still nostalgic when we design for these devices, as though we are still envious of the physical objects and need to pretend to be physical even though we are working in the digital.

Very similar to the industrial Bahaus before, we are in an IxD Bauhaus.

Rewind to the 1800s...

In that time, there was a great deal of nature envy – buildings mimicked nature, cathedrals mimicked forests. This climaxed with art nouveau – everything was flowy, floral, nature inspired. There was an envy of nature apparent in design of spaces.

Enter Mies van der Rohe - “less is more”. This led to exploration of what an “honest space” should be... example: Barcelona Pavilion. It was fresh and clean; celebrated light and openness; had plain walls. This challenged the notion of “what is architecture”. Then the Internation Style emerged, celebrating structure – there is no “makeup” on features, they are simply and cleanly what they are - unadorned.

The Bauhaus freed people from history and started a clean slate. Reduction, purity, production, order.

Some people did react negatively to it – some felt it didn't resonate, it was too clinical and they didn't feel comfortable there. Movie “Playtime”, 1967... critique of Bauhaus and how uncomfortable people felt in these new, neat, clean spaces.

Criticisms of Bahaus were that it was monotonous, inhuman, sterile, elitist.

The next movement was Post-Modernism, which attempted to look back and include history as well as move forward. Wit, reference, deconstruction, ornament.

Aside: I never ever like to write down any thought or idea about Post-Modernism. It's too bloody hard to avoid arguments about what “is” postmodern(ist)(ism)...

Progress from 1800 to 2000: Nature envy → functionalism → wit, ornament, reference.

History is rhyming: Mondrian placed next to Windows Phone – clean lines and boxes!

Realism Envy: desktop UI with “notebooks”, fake bookshelves on book readers... physical mimicry, skeuomorphism. Web progress since the 70s: Early GUI → real world desktop metaphors → “the web look” → skeuomorphism....

Rahul observes the IXD Bahaus as a way to move past skeuomorphism. A return to purity and honesty in visual interaction experiences. (full quote too long to transcribe)

We should embrace the new opportunities offered by technology in addition to the old. A networked, digital, interactive copy of a book is in some ways more than the book on paper alone. So why don't interfaces reflect this?

“I say that flat is the new black; that 2D is the new avant-garde; that a surface doesn't have to be ashamed of being a surface.”
Stephen Poole

We get carried away by “material resolution”. Plastic, concrete, paint, pixels... whenever we have been given a new tool, the first works or iterative uses are always over-the-top. Things are initially used to the absolute limit, before we pull back...

But we start by mimicking things:

plastic → wood
concrete → nature
paint → realism
pixels → objects

Drivers for construction: modular, prefab, abstraction... for pixels, what will it be?

Moving forward requires re-learning, like learning escalators after stairs. Staircases are an international standard... and yet no two staircases are the same. They have their own context, they can be different but remain functional.

Fundamental difference between the build and digital architecture: built architecture decays with time, digital architecture grows with time. (Aside: arguable, see the concern that we are in a period that will be a Digital Dark Age.)

The fact we are dealing with time and content suggests an inevitable growth.

Pyramid of user experience: three layers. Physical, Cognitive, Emotional (at the top). Start with simple functionality, move up to things which are usable and convenient, finally reaching things which are meaningful and pleasurable to use.

“Let's rid ourselves of this excessive baggage of skeuomorphism.”

Five principles:

Think lateral.
Avoid literal.
Be true to material.
Let content speak.
“Brutally reduce”.

…

Q: how do you think this relates to children using devices? Will Metro struggle bridging that gap?

A: When we worked with architecture, Bauhaus architecture specifically, the parapets were simple frames of steel. People asked what would happen when children came to the building? They'd walk right through and fall! But treat minimalism and the bauhaus as a beginning and work out which user groups which need to be brought back into a different frame. We need to go through this phase of putting down the rucksack, remove the burden, then put back what we really need into that rucksack. Find what needs to go back and put it back, rightly so.

…

@rahulsen79

(Top)

The origins of magic - Dmitry Baranovskiy

“This is my first non-technical talk, so it's probably going to suck. I don't know why you came.”

The internet is awesome, it's amazing. But what's more amazing is us – the developers, who create the web. To people outside, we look like magicians already.

It's a magical process: start with nothing → end with something.

People grumbling about it is the same as grumbling about long haul flights... when YOU'RE FLYING!

Dmitry's favourite magician is Einstein.

I have no special talent. I am only passionately curious.
Albert Einstein

To Dmitry what Einstein did is magic, none of it makes sense to him but it works.

Would break web devs into two big groups: there are the tradesmen, the plumbers, who turn up and do thing and go away. Then there are people who are passionately curious, they are trying to make things that other people think are impossible... and when they achieve, we are all richer.

Three parts to a magic trick: the pledge, the turn, then the prestige.

The pledge: take something ordinary. HTML, CSS, JS...
The turn: make something people don't expect.
The prestige: view source. Show how it's done, unlike magic tricks.

The more tricks we reveal, the more we expand what's possible, we push the boundaries. That's how the web evolves.

What does it take to be a magician? Skills? Bullshit! Skills are good, they help, but it's not skills that make people magicians – it's curiosity.

Most people say that is is the intellect which makes a great scientist. They are wrong: is is the character.
Albert Einstein

What do you have to do to become a magician?

Fight demons. You fight them, you win, you can make magic. What demons?

“All those guys are way smarter than me...” But how do you know? You don't know, so why do you think they're smarter? Fuck it, just do it! Don't compare yourself with anybody.
“Will it bring me money?” Most success is an accident. A planned, prepared accident. They prepared but it could just as easily fail as succeed. Dmitry didn't expect anything from Raphael – first day he put it on his blog, he got 8000 hits and it killed his hosting. Secret to success is to do the right thing all the time, until the right time comes along – that match is success. That's hard, but it's worth it.
“What if I fail?” Web dev you do for yourself is cheap – it really only loses you time. But you still gained experience. Maybe you didn't become successful, famous, whatever. But it's not a reason to no try. If you don't try, you are losing by default. If you are trying, you have a chance to win. So wouldn't you take the change?
“I am too old for this.” Younger people have no kids, no responsibility, lots of time... when Dmitry created Raphael he was thirty, had a wife, kid, full time job. He created Raphael on the train on a laptop. "There is all this time. There's all this excuses... fuck them!"

These are demons inside, you have to fight them. When you fight them you become free and you find there is a source of energy you didn't know about. Magic happens. You make something.

Then you release it and you will encounter a new demon: trolls. They will tell you that you suck. This is really hard. They want to kill you, kill your magic – because they are not magicians and they suck. You have to fight them. Either don't reply, or hit back so hard they simply don't come back.

And don't be a troll yourself. Don't stop others' magic, create your own. Old russian proverb: some people raise by growing up above others, other people raise by pushing others down. We do it sometimes, Dmitry points out even he does it sometimes, but we should not.

Most of the time we suck at something it's not because we are bad. It's because we are looking for excuses not to do things.

Everyone wants to be fit, but we don't do the work. Everyone can do 100 pushups in a year, but very few people actually do it.

"Enough excuses. Excuses, excuses, excuses, excuses, excuses, stop it! Stop sucking."

Don't worry about how big an impact you make. The internet means you can broadcast to anyone. You tweet something 100 people read, it's more people than in this room.

“Anyone who has never made a mistake has never tried anything new.”

People tend to forgive your failures and celebrate your successes.

You can help people in many ways and you receive positive energy back... which helps you make more magic.

Normal things are magic for people who don't know how they work. It's fun to do magic for people who already think you're a wizard, but it's more fun to do magic for magicians.

(Showed the hilarious movie clip from Your Highness, finishing with “magic, motherfucker”)

Nothing prevents you doing this, except you. So go and do magic... motherfucker.

@dmitrybaranovsk

(Top)

CSS3 Transforms - Greg “Wickedly Cool” Rewis

Transforms

What are transforms? The same thing as scale, rotate, skew in Photoshop! Plus there's another called translate, which wasn't as immediately familiar.

Transforms... can be applied to anything, they are applied immediately at the time the page is rendered, they apply to all children of the transformed element (pars in a rotated div will also be rotated), you can apply them to generated content and pseudo selectors.

So, you can get things to scale on load, or you can get things to scale on :hover.

Remember to put vendor specific prefixes first and non-prefixed version last. If you aren't sure about prefixes, use a service like CSS3 Prefixer.

Scale, skew, rotate – does what they say. Note some things need units of measure and other don't. Translate: means move. You give it x and y and move things.

Example for syntax:

.foo { transform: scale(2) rotate(45deg);
}

This example will happen together, instantaneously.

By default all transforms occur around the centre of the object, which is the origin. You override this with...

transform-origin: 100% 100%;

(100% on both x and y. You can also use keywords like top, left, etc)

Note the CSS3 tranform property does not affect the box model, even if it appears to change the stacking order.

Remember... if you can, you should! (actually no, he's kidding!). So you can go crazy! ...but you want to be sure things are going to render. Do feature testing.

Start with a simple check, where you remove no-js with Javascript:

<html class=”no-js”>

...add Modernizr to check what's working. You can then style according to what's available. You can also add filters for IE, but really only feed the dinosaur if you really have to – filters are slow, sluggish, bad to use.

Transitions

“IE10 is a modern browser, IE9 is just a wannabe... at least in terms of transitions.”

What are transitions? Basically a smoother version of the old way of changing colours and states eg. background colour on hover.

Only “animatable CSS properties” can have transitions. While that means almost everything, a notable gap is background images. They don't work.

Anatomy of a transition: start keyframe, end keyframe, with tweens rendered by the browser between the two. Familiar ground for Flash developers.

This translates to the style for the initial element design, then a second style for the transitioned result. You specify which properties you will transition, with transition-property. Note if you do a transition on something which affects the box model (eg. padding), other elements will be affected.

You can set a duruation:

transition-duration: 2s;

transition-duration: 500ms;

...note these are not precise, the actual elapsed time will vary across browsers.

Don't just think about transitions being about hovers – you can trigger them with things like media queries. (example with the page changing from morning, afternoon, evening in response to window width)

Transition speed is linear by default, but you can modify that with transition-timing-function, which adds easing options like ease, ease-out, etc. Try using Ceasar (easing tool) to try out the properties to see how they look (plus it gives you the code).

By default transitions play immediately. You can override with transition-delay, with a seconds or miliseconds delay.

“...oh by the way, don't ever do that to your navigation!”

You can rack up multiple durations, delays etc. Tranforms accept multiple comma-separated values and they map between properties. You can also write it all into one huge shorthand transition:.

“Raise your right hand and repeat after me, I will never do the following...” (crazy example)

You can apply this to ::before and ::after, :focus etc.

Animations

“Like transitions on steroids!” Not hugely supported yet, but quite cool... but remember many mobiles are using webkit so that adds some possibilities.

With animations you set an iteration count (number or infinite) and direction (normal or alternate). Remember that backwards moves count as iterations. Three iterations won't finish where you started!

The full animation has a name, duration, timing, iteration-count, direciont, delay, fill mode. You can also specify keyframes.

"Animation fill mode...... what?" This tells the browser what to do before and after the animation. Setting backwards means “show the first keyframe”, forwards means the last keyframe, both means show first one if you haven't played it and the last if you have played it.

Cool example: solar system diagram, particularly useful to show the effect of moving the origin outside the element.

Neat tool: animate.css – sets up common animations so you just add a class.

Note animations are a processor hog. There is a trick to accelerate them...

-webkit-transform: translateZ(0)

-webkit-transform: translate3d(0,0,0)

...which will pass the animation to the GPU. But please be careful, you can really thrash the battery of your mobile users!

3D transforms – more like 2.5D – adds a Z axis to use for transforms. A positive number moves towards the user, negative moves away.

Perspective... by default all children of a transformed element are flattened into the parent element. However using -webkit-transform-style lets you do separate things to the child elements - “the children can live in their own world, just like our real kids...”

Great blog post: Natural Object-Rotation with CSS3 3D

(Finished with examples of CSS shaders, a proposal being given to the W3C)

@garazi

(Top)

Waving at the machines - James Bridle

(an aspect of the robot-readable world, aka “it's 2011 and I have no idea what anything is or what it does any more” - Tom Taylor)

Introduced the "render ghosts" – those people who live in the rendered world that hasn't been built yet. They live in imaginary places, like renderings of proposed buildings. If you look closely enough, these places they live in are pixelated because our vision of the future is digital.

But now we are getting curious crossovers – a pixelated cushion, which has come out of the digital and entered the real world. Once you notice this style, you start seeing it everywhere. Things that might have been gingham in the past might be pixelated now.

We are creating a new aesthetic, creating digital things in the real world.

When you create things in the real world that made sense in a game world, you question the rules of both; the ethics of a strawberry milk cow that comes from Farmville open questions about genetic engineering.

Telehouse West “is to blame for this talk”... it's a data centre, but not the usually anonymous building:

Data centres usually don't get built to stand out – “The cloud is a lie, the cloud looks like sheds.” This is what the network looks like in the real world.

(on strange pixellated art effect) “It started out as something weird... now you get it in Beyonce videos.”

Our understanding of the border between the digital and the physical has changed.

Computers allow us to see through time – satellites recorded data even when people weren't paying attention, we can go back and look at what was there. Similarly before and after photos showing the effect of disasters... people did not take the “before” photos with the intention of showing the effect of disaster.

Meanwhile we've decided computers are better at making decisions about sporting results than the humans who are actually doing it – Hawkeye in cricket, which means the entire crowd stops watching the people and starts watching a computer-game-esque reconstruction of what just happened, and the computer essentially decides what just really happened. “….....what?!”

Computers are now looking at us, trying to work out what we're thinking. Cameras recognise faces, try to recognise blinking. Security cameras in airports read moods of people as they go through security checks.

James created a book: “Where the f**k was I?” using the stored location data on his iPhone.

It was basically a reminder to himself, to remind him where he'd been. However he discovered what I had really mapped was his position on the network, not actual locations. This is not where the fuck was I, it's where the fuck the phone thought I was!

We start using real systems to view fake things. There is a whole city from Grand Theft Auto set up in google street view... Maps have “trap streets” - fake streets added by cartographers to catch people pirating their work. “the sky above trap street” finds satellite photos of those locations.

Google street view is weird – it's the view from a multi-lensed machine 6 feet above the street. We're looking through the robots' eyes.

Then there are gaps – places in google earth that are blacked out, places in street view blurred out or removed with the Photoshop mosaic filter.

Urban Camouflage.... ghillie suits for Ikea!

Splinter camouflage for planes – it turns out that pixellated camouflage works for hiding things, because nothing “really looks like that”. It's also great for hiding things in other spectra – there is IR-resistant cammo! Tanks can use active heat signature cammo to look like a car to IR.

Tagmenot.info → a way to stop things going into google street view. "QR codes are awful... we should make pretty things, not ugly things."

CAPTCHAs are forcing us to continually prove to systems that we are humans.

The Kinect calibration pose is us waving at the machines. It's a way for us to identify ourselves to computers, to the machines. This is increasingly the world we live in.

Technology wants to be like us, and we want to be more like it. We are going through a period now of incredible uncertaintly. But the essence is that we now live in a world we share with the render ghosts. We want this. We want to live together with these new beings.

The message is that some of this is awesome, we should go out with some willingness to engage, while understanding how they change our behaviours.

It's going to be exciting, please make it exciting.

@jamesbridle

(Top)

(fin)

Once again, the conference seemed to be over just a few seconds after it started. Two days can fly past so quickly you can barely believe it happened.

It's likely that speakers will release slides and other materials in coming days, over at http://south11.webdirections.org/

one script, seven ways

2011-06-14T22:52:00.005+10:00

It's one thing to write code from scratch, but quite another to edit and improve existing code. It's also quite something to have your code dissected in front of a crowd...

Refactoring

In its purest form, refactoring is changing code without changing its functionality - work done purely to make the code faster, more robust or maintainable.

Most of the time work described as "refactoring" ends up being more of a rewrite, as few people can resist the opportunity to change functionality. Rewriting can be a time blowout though, so the strict scope of pure refactoring can be useful.

If it ain't broke...

A fair question is of course if it's not broken, why fix it? Why change code that works?

Yes, if the code in question is fast, bug-free and easy to update then you may be better off leaving it alone. But in the real world very little code falls into this category on the first version, particularly if it's written by someone who doesn't expect to maintain it (the joy of outsourcing...).

No matter who writes it, most code is written to a deadline. The compromises made to ship it on time usually come back to bite you in maintance - you never get it for free, you just choose when to pay.

Even if you wrote it and you weren't under a deadline, the second version of your code may still be better than the first. Why? Because you learned about the task when you wrote it the first time, so you rewrite it armed with specific experience.

This is one reason iteration works; and one reason a quick spike or prototype can be a great investment even when you throw the code away.

Refactoring is also an effective way to share knowledge, particularly if you pair with someone more experienced while you do it. The goals are already defined and understood - you can see how it works, so you'll know when the new version does the right thing.

Which leads me to Refactor Wars...

Sydjs refactor wars

At the May Sydjs I took the daunting step of having four people refactor one of my scripts. As a recent convert to Javascript, my code is definitely newbie code. So why have it dissected in front of the JS Ninja-laden Sydjs crowd?

It goes back to a classic problem of user goups: how do you share knowledge from the ninja to the n00b? If you just show newbie code, people get bored. If you just show ninja code, the newbies aren't really progressing.

Refactoring is one way to bridge the gap, so I organised overhauls of Is it laksa time yet? - a simple script which shows different messages as the user's system time approaches Friday noon (aka laksa time!). I wrote it quickly as a bit of fun for the Sydney web laksa crew.

You can see my intro slides and the four refactored scripts at Is It Refactor Wars Time Yet?. Since then I've done some basic analysis of the presented code.

Head to head

The original script used functional but flawed jQuery. The following approaches were used to refactor it:

Improve the jQuery
Replace jQuery with Zepto (a bit of an experiment since Zepto's aimed at mobile webkit rather rather than the desktop)
Remove jQuery (ie. convert to straight Javascript)
Write a reusable library (without jQuery)
Rewrite in Coffeescript
Although it wasn't presented on the night I've included my own update, which removed jQuery and stripped out some ultimately pointless abstraction.

Remember to take these numbers with a grain of salt, as the tests and measurements were not taken in a hermetically sealed laboratory by trained professionals - I just did them on my home PC. They simply give a rough idea of the results.

	Original	Lindsay	Chris (Zepto)	Chris (no jQuery)	Steve	Gabe	Mine
Summary	jQuery	Better jQuery	Replaced jQuery with Zepto	Removed jQuery	Removed jQuery, wrote library	Rewrote in Coffeescript	Removed jQuery
Requires	jQuery 1.4	jQuery 1.6	Zepto	none	none	jQuery 1.4, Coffeescript	none
LOC	67	56	67	50	108	CS: 64 JS: 71	40
Page weight (kb)	34.2	38.3	8.2	2.8	4.2	32.7	7
Execution time (ms)	0.041932	0.038928	0.100244	0.005836	0.034735	0.027839	0.006083
Execution +/- (%)	0	-7%	+139%	-86%	-17%	-33%	-85%
Notes	Written quickly.	Check out the mad ternary version!	Breaks in Firefox (uses innerText)		Steve says it needs a refactor.	With tests: LOC 154/141. Exec time 0.157247 (+275%)	2.3kb without the ascii art!

Notes for the curious:

Execution time is the average of 1,000,000 repetitions in Chrome.
Page weight is non-gzipped (it's not enabled on the laksa site), plus the gzipped weight of jQuery and Zepto (since jQuery is loaded from a CDN).
For Gabe's option, the weight and execution time used the generated javascript. For execution time, tests were disabled.
For Gabe and Steve's options, I had to add a wrapper function to enable testing. So in production execution would be faster/cheaper by one function.

Conclusions

What do we learn from these numbers and the refactoring exercise in general?

First up, several people observed that in a production scenario they probably wouldn't bother refactoring the script. It only executes every ten seconds and even the slowest version takes less than one millisecond.

Yes, it was definitely flawed; but it didn't really matter... and just to highlight the fact it's not risk-free to change things, when I refactored it myself I introduced a bug!

However when viewing this as a learning exercise, it's worth noting a few things:

Every option except Zepto improved the performance of the script.
Improving the jQuery option's performance by 7% could be quite signficant in a real world scenario.
While jQuery's weight looks bad on paper, it can load off the CDN faster than the base page.
Simple things like caching selectors can make a huge difference, whether you're using a library or not.
If you don't need jQuery, don't use it. For a page this small, all it was doing was element selection and $(document).ready - easily replaced with document.getElementById and moving the script to the end of the document.
Don't guess about performance, test it. Even my dodgy little profiling script gives far better information than guessing.
Lines Of Code can be a very misleading metric, unless you see an extreme change it probably isn't worth worrying about. While readability is subjective and hard to evaluate, LOC is not a substitute.
Remember most things are a trade off:
- jQuery is fast and easy to write, but adds weight and is slower than straight Javascript.
- Writing a library creates more lines of code but changes a one-off script into something reusable.
- Porting to Coffeescript adds a significant dependency but would make sense if your team is more productive using it.
Ascii art adds a surprising amount of page weight. But it's fun.

Refactoring for fun and profit

The best thing about presenting Refactor Wars at Sydjs was showing some very different approaches to the same scenario.

The clearest result was that no single approach will always be right - each one would be the most appropriate option in a different situation. You need to understand your current task's priorities and work to them. But, remember you're always making a tradeoff; for example if you ship fast, you'll almost certainly incur a higher maintenance cost.

The exercise probably also made the laksa script one of the most heavily-refactored joke sites in history, not to mention taking out the record for the largest amount of actual code shown in a single Sydjs! Hopefully everyone got something out of it.

(That link again, if you want to see the scripts see Is it refactor wars time yet?)

a website build in thirty seconds

2011-06-08T22:24:00.019+10:00

Sometimes a simple demo can bring a dry process to life.

So what's the story?

Back in 2007, I was on the NDM team that rebuilt The Australian and Aus IT websites.

As part of the project we did a presentation to some of The Australian's editors/managers, showing the design and development process that had gone into creating the new site.

With Design and UX you can show mockups and wireframes; but demonstrating the progression of Frontend work was a bit of a challenge. Raw technical details were not particularly engaging for the non-developer audience, so I decided to include a short illustration of the build process.

I took a series of screenshots during the build, then created an animated GIF file with the results (you've probably seen similar demos before). I thought it would just be some visual filler while I was talking, but people were so focused on the GIF I shut up and let them watch the process unfold. I was pleasantly surprised by the reaction.

Although the audience had experience evaluating completed websites, they hadn't seen the raw stages of a build. Being journos they knew all about turning a blank page into an article, but they'd hadn't seen the moment a blank slate becomes a website. It helped bring the technical story to life.

If there's any real point other than sharing a fun image, it's simply this: remember to keep some record of your work. Take screenshots, keep final mockups and don't forget to take "before" screenshots to give context to the "after" shots (I really wish I'd done that!). You never know when it will come in handy.

I should note The Australian has been rebuilt since then, using an extended version of the markup behind this build. But that's another story.

the html5 switch

2011-04-22T23:19:00.010+10:00

Depending on who you talk to, you should have been using HTML5 months, nay years ago; or it's something you might be using in 2022. As usual the truth is somewhere between the glib extremes.

There's no one-size-fits-all answer to questions of platform choice: you have to consider the benefits for your own scenario. But with HTML5 I'd say if you haven't switched yet, for most people it's probably time - there's a form of "switching" that will work for you.

Some people seem caught up on the problem that many features have very poor support across browsers; or are simply put off by the thought of redoing their entire code base.

Really though, you don't have to rebuild everything, nor use everything in HTML5 for it to be worthwhile switching your doctype now.

Over the past few months I've switched a large application and a few small sites to run the HTML5 doctype. Most have been seamless, with just one website exploding on contact with HTML5 - it will remain XHTML until it can be overhauled.

So what have I learned doing this? Basically, the decision to switch comes down to:

What do you mean by "use HTML5"?
Which doctype are you running now?
Is there any value to switching?

Seriously, that's it.

Defining "using html5"

I'd suggest considering three basic options for "using HTML5":

Switch the doctype, but change basically nothing else.

This is a "readyness" move - you're not changing anything now, you're just paving the way. This option is mostly useful for organisations where technical changes are slow and/or political.
Generally it should morph into Option 2 reasonably quickly but might be a required stop-off point.

Switch the doctype, then use a subset of the new features.
- This is what most people are doing right now - cherry picking those things which give you immediate value without too much overhead. Usually this translates to using features with usable levels of support or where it's easy to provide fallback options.
- This option is good for iterative change, particularly where you can't easily or quickly replace your entire UI code base.
- For the average dev shop it's probably the best balance of "new and shiny" and "works within budget".
Full switch: replace your UI entirely with HTML5, using all the features (including new elements).
- So far this option is most popular with blogs and new or small apps.
- For many projects it's just not viable - it doesn't matter what flavour of markup is in use, they're not getting redeveloped right now.
- This option will require bridge solutions like HTML5 shiv - that is, you'll be relying on Javascript for rendering.

Option 3 negates the need to ask the next question, but Options 1 and 2 really need to ask...

Which doctype are you running now?

If you're switching doctypes on an existing code base, you need to consider what that is actually going to do. The most relevant differences are:

The rendering mode it sets
The rules the W3C validator will apply

Doctypes also tell humans what kind of code should go in the document, but since it doesn't enforce your actual house style it's a relatively intangible benefit.

Rendering Mode

HTML5 will set strict rendering mode. If your site or app is currently being rendered in strict mode, happy days. However if it's in quirks mode it's going to hurt; and if it's in almost-standards mode, it's a roll of the dice.

Going from almost-standards to standards mode might be a painless change. Most of my sites were painless; another broke quite badly - particularly because strict rendering made the Cufon headings blow up (beware of the shrink wrap).

I will stress that if you are running in almost-standards mode, you should still try the switch. Do not be put off HTML5, just go ahead with your eyes open.

For more information see:

24 ways: Transitional vs. Strict Markup
strict vs. transitional doctype and rendering differences
For the tale of how almost-standards mode came to be, check out Eric's Archived Thoughts: Almost Target and the linked Images, Tables, and Mysterious Gaps - MDC Doc Center.

Validation

Curiously, if you have a lot of validation errors already you might find HTML5 actually lowers the number of errors - it's extremely forgiving. Personally I think it's far too forgiving; and it repositions the validator as a tool only for finding gross errors like unclosed divs. For actual code quality you'll need to move away from straight validation and try a tool like HTML Lint.

Also be aware that currently if you use the x-ua-compatible meta tag, the validator considers it to be an error (aside: I've raised this as a bug with the validator team). This means if you support IE with the meta tag, you will never get a green test result. If you are reliant on automated testing this could be an issue.

The value of switching

It's a basic question, but you should ask "will (insert shiny new technology here) actually help me build stuff"? Even if you are convinced already, your boss or clients probably aren't; so you need be able to answer the question.

Personally I think it's unlikely that any web-based project would get zero value from migrating to HTML5, although some might not get as much as they'd imagined.

Web applications get the greatest benefits as HTML5 is extremely app-focused. Also many apps already rely on Javascript, so the JS-based solutions for enabling new features and fallbacks don't change their support profile.

Websites with lots of content will probably get more benefit long term, as support improves for the content-focused stuff like new semantic elements (and associated document outline system). Short term, there are some questions about best-practice usage and how search engines will cope with the new document outline. Also you might not be willing to rely on Javascript just to get your content to render.

A few other points to consider...

It's a great base for progressive enhancement and can reduce your maintenance load.
- eg. common form validation can be handled by HTML5 elements, so you only have to maintain a JS-based fallback for IE... and you can use conditional comments so you only serve it to IE too.
- Multiply this out and you can make your apps faster and lighter for an increasing proportion of the market.
Flipping that around, HTML5 elements make excellent fallback content.
- eg. I use a Flash audio player on one site; and <audio> gives me a functional fallback on browsers without Flash (including iOS devices). Previously the fallback was a link to the mp3 file. (Jeremy Keith has a great post about using this approach)
- This approach also removes pushback against using variably-supported features as your core solution - sure it might not be as intellectually satisfying as ditching IE and Flash content users, but it's probably got a greater chance of client acceptance.
The simplified syntax is nice to write.
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> or <meta charset="utf-8" /> ...I can remember only one of these off the top of my head, how about you? :)
Curiously, HTML5 seems to open a new development mindset - switching can be a catalyst for using a swathe of new standards. Sure, it's smoke and mirrors, but you might even be able to push a couple of crap browsers off the bottom of your support chart too.

Last thoughts

In its purest form, a platform change decision comes down to how much value you get (or the cost of not changing) vs. the cost of the change. For most people the cost of switching to HTML5 will be trivial, so the long-term benefit of merely being ready to use more features is enough payoff.

If you are kicking off a project today and building from scratch, you should definitely use HTML5 - even if it's mostly plain old (X)HTML despite the new doctype. If you're maintaining an existing app, you may as well switch out the doctypes so you can start legitimately cherry picking new features as you have time and opportunities.

I have no idea what we'll be using in 2022. It probably won't be HTML5 any more. But in 2011, I'm using HTML5.

wds10, the big stonking post™

2010-11-05T09:42:00.002+11:00

Roll up roll up roll up, for my Web Directions South 2010 Big Stonking Post™. A yearly wander through my impressions of WDS, hammered into an EEEpc and posted here for your enjoyment.

The usual notes: These are very raw notes - excuse typos, and if you need an exact quote I recommend checking the podcast. Anything marked "Aside:" is my own thought and not something the speaker said. Unattributed photos are mine.

Scott Thomas – Designing Obama

(Photo by JJ Halans)

The Barack Obama campaign early on had no real design coordination so they hired people in to handle this. They were having simple problems like losing the white in the centre of the logo, which flipped the rising sun to a dark star – not cool, not good for the candidate.

Time – time pressure for everything. "we were truly building an airplane while in flight", what needed doing immediately was done immediately.

They created order in the chaos by setting clear and concise messaging:

Focus on "we" rather than the "he", make it the person's voice and not Obama's voice. This is unusual for political campaigns.
Keep the message of hope while dismantling the notion of being aloof.
Communicate the historic atmosphere by pulling from imagery of the past.
Establish a consistency and balance to exemplify stability and experience.

The old Obama website had no real consistency, "about 43 typefaces", not well directed. When they approached the website, they initially focused entirely on one page - the homepage - to get that sorted out first.

On the wireframe they set out a plan for what the real estate needed to accomplish – persuade, raise campaign funds, activate, localise, etc.

Very little space was devoted to social networks, because people who connect that way connect on those networks and not on the www site.

The website evolved to make it easier to access user-specific features/information. People did a simple login and then got a toolbar added on the top of the page. my.barackobama.com

A small team on the ground was the liason for the web team who were stuck in one place, in Chicago, and not on the road with the campaign.

One big challenge was getting people not only to read the site and know about Obama, but to actually register and vote. This is a major point of friction in the American system. So they set up the Vote For Change site to help get people registered. Instead of an obscure form, it was a series of plain english questions – one at a time. Although this perhaps doesn't gel with everyone's idea of usability, it was an attempt to ask questions the way humans do – one at a time, in a friendly way.

Layers of strategy – guiding people to register to vote in the contested states where they go to uni, rather than the blue/already-won state they originally come from.

"Of course doing anything simply requires a lot of complex though... lots of nights digging into post-it notes and eating burritos."

All of this helped make the election about the peoples' voice.

Aside: love the grid layout created on top of a photo of the Whitehouse!

Whitehouse.gov had huge amounts of legislation and restriction which made it hard to communicate in a modern way. They were not originally allowed to post videos on non-whitehouse servers – no youtube!

Scott finds himself asking, what do I do next?

Scott realised he wanted to capture the artwork created during the campaign, to create a book to make an artifact in history. He used kickstarter(.com?) to fund the project. He didn't want to go through the usual publishing process, because he didn't like that process...

As it happens the process was a ton of work, but the experience was priceless; and Scott controlled every part of the puzzle and realised the creative goal without interference.

You can read the book online at designing-obama.com

Q&A

Q: Did Obama ever get involved?: A: No, he was too busy. But they trusted the people they hired and that's how it worked. "It wasn't up to Barack Obama to select a shade of blue..."
Q: Does raising the bar for campaign design risk a blowback where it gets harder to repeat?: A: The message was authentic and that's why it worked... people trying to copy the process aren't doing it with an authentic, clear message so it's not just a matter of using Gotham...
Q: Were all the staff real Obama supporters or were some just there as professionals?: A: One of the final, key question in interviews was "what do you think about Obama?" and if they couldn't talk much about that, they didn't get hired. Scott believes that everyone involved honestly wanted to get Obama elected. When people started to follow the message they knew it was working...
Q: Did you get metrics back from the non-digital parts of the campaign?: A: They had field organisers reporting back into the online metrics system, to get the offline information into the system. They needed the numbers to be online to be able to use them quickly enough.
Q: What was your biggest failure during the campaign? ...and do red buttons work better than blue buttons?: A: Someone came and said they wanted a foam presidential seal and put the Obama seal on the shield. They knew they could do it, but the question was should they do it? Nobody was quite sure who could approve it, but they did it and put it in front of Obama at a press conference. People went off on a tangent thinking "Obama thinks he's already won, he's already forming a government..." Repercussions all the way through to it being brought up in the presidential debate. Big mistake! ...and actually red was superior to any other colour, it stood out on the page, it was their highlight colour.
Q: What do you think about how the current parties are putting out their message, including the tea party?: A: "I love the tea party, we needed comedy back in politics! ...but really, I'm not a political person, I'm a designer." Scott actually avoids consuming too much media, he tends to prefer political comedy to political news. It's more entertaining when Jon Stuart makes a joke and you get a little bit of news at the same time.

@simplescott

Silvia Pfeiffer – audio and video

Running the presentation in browser – "eating my own dogfood... but if anything breaks that's because we're on the leading edge of technology!"

Video: unfortunately you need to encode in at least two formats, mp4 and webm recommended.
Audio: same deal, mp3 and ogg. There are other formats supported in some browsers, but you can get coverage with the two.

How to encode these files? Open source ffmpeg command line tool is good; there are some GUI option as well, but it's also good for setting up a transcoding pipeline (it's what youtube uses, although their pipeline is quite complex)

Supporting older browsers... you must support the legacy browsers, but it's easy as you can put fallback content inside the audio and video elements. Browsers that don't support the elements will effectively ignore them.

You can use canPlayType() to check for codec support and use that to tailor the experience as well.

For live streaming on http use m3u8.

Video has a good js API – load, play, pause, move forwards and back through the video, change playback speed etc. You can create a rich set of custom controls and get a lot of information back from the video element. You can find out the buffered range; is it muted; is it seeking; etc. You can use video events and state as triggers – that allows things like custom progress bars.

Video + SVG demo – a custom control floating over a masked video. However SVG and video is very much a mixed bag due to inconsistent browser support. eg. Opera supports video inside SVG but others don't.

Video + canvas demo – can pull out tiles from a video being played. Similar to the exploding video demo. Also able to get an average colour from the video as it plays and change the surrounding background colour. Search for "ambient video" to see some neat demos. You can do reflections with the canvas; really the only current way to do it and ensure they are in sync.

Video + Web Workers – making use of the ability to throw a heavy/slow function to an independent thread – demo: face detection simply by finding the usual range of skin tones. It is a little slow because it's going to a delegated thread and that can create a noticeable delay.

Video + accessibility, <track> - track element goes inside the video element and you can place timed subtitles, chunked metadata etc. This is in the html5 spec, not finished yet and not ready for production but it is a standardised way to mark up audio and video captions. This will not only help accessibility it will be visible for SEO purposes. The controls also open up a space for chapter selection, multiple language caption support. Also you can provide audio descriptions for the blind. Being able to do this direct to screen readers is a new option compared with the older way of recording another audio track. Creating a textual transcript is easier than multiple audio tracks; and users can control the reading speed for the text descriptions to whatever they are comfortable with.

WebSRT is the baseline format for captions and audio descriptions. Intentionally similar to SRT files; yet a little different. The choice of format is still under discussion in the standardisation process.

@silviapfeiffer

Ben Shwarz – HTML5; building a better web

[Aside: I did the full workshop so my notes are a little brief.]

Kicking off with the timeline – going back to HTML 2 back in 1995 and a lot of browser development at the same time. But then things slowed down... and Ben realised he'd used the same markup standard for his whole professional life. In the same time he'd had about four computers and seven phones... why the lack of progress in the markup space?

Basically disillusionment with XHTML 1.1's practicality led to Ben and many others going back to HTML 4.01 and staying there. And then.... nothing happened. Until finally html5 came along.

W3C has a really hard job and do great work. However they're not people who build websites every day, with clients and deadlines. So they're concerned that the specs are acts of fiction. We have people who aren't designers building and promoting design features.

The WHATWG was largely a reaction to this. People from Opera/Apple/Moz got together and formed the WHATWG and went through the HTML5 spec to define and document it better. They also opened up the revision process and noted on each change who needs to take notice of the change – browser vendors, validators, editors. The revision history tool is a very powerful tool.

Specifications are very big, very detailed, very hard to read. They're built for browser vendors and not developers. HTML5 has a web developer edition, maintained by Mike(tm) Smith. This brings it down from 300k words to about 160k, which is much more approachable.

Frustrated even with the design, Ben and his business partner redesigned the spec pages to make them much nicer to read. Within four hours Paul Irish had forked the code and contributed a patch. Then it all went quiet for a long time, until he was put in touch with Mike Smith. They had a meetup and decided to push out the restyled edition – and Mike pushed it live during this presentation!

It's off brand for the W3C and if Ben and Mike aren't taken out by W3C Ninja, next week hopefully it will be official.

→

Feedback to the hashtag #html5author

Discussing Modernizr – good way to help you roll out html5 and know which features are supported. The classing system allows per-feature support, eg. restyle according to whether columns are supported or not.

Discussing the various session and offline storage... application cache, ApplicationCache.status returns 0-5, which is a set of status codes for things like uncached, idle, etc. Websql pretty much stalled out; but localStorage is pretty cool. Note that a) everything has to be stored as strings; and b) any browser with local storage has a native JSON parser; so you'll probably use stringify a lot...

You can also detect and bind events according to whether the browser is online or offline.

@benschwarz

Dan Rubin – html5 and css

Pimping up the developments in html and css, but particularly browser support. Even IE is getting exciting with IE9 shaping up to be a really good browser.

Patch support into legacy browsers with modernizr and selectivizr.

Media queries – best done in the CSS, many of the queries will only be needed for small adjustments and that's not worth the extra http hits. You can chain queries to meet quite specific needs, right up to checking for high resolution screens.

Aside: the hot technique buzzword is definitely responsive design.

Demo of really slick looking html5 podcast site - http://thebox.maxvoltar.com/ - including nice looking audio player...

Responsive design really isn't hard if you plan for it. Build it into your designs, anticipate the differences and make designs that are flexible.

Http://realworldcss3.com/resources/

@danrubin

Steve Souders – even faster websites

(Photo by JJ Halans)

It baffled Steve that there was a whole lot of quantified data about how to make things faster but people weren't really getting into it.

Testing showed drops of satisfaction and clicks once search pages went past 2 seconds load times. Not only that but it also reduces operating costs if your code doesn't need as much hardware, bandwidth etc.

Q: Should you run Yslow or Page Speed? A: Both. They both check things you should know but neither one does everything.

The "number one take away today": webpagetest.org/test

Steve suggests an easy term to describe performance improvement... WPO: web performance optimisation. Drives traffic, improves ux, increases revenue, reduces costs.

What makes sites feel slow? Most websites don't practice progressive rendering. You get nothing until you get everything. Demo video shows sites racing each other, some sites are taking seriously long times to load.

Why focus on js? Because most browsers are blocking all other downloads and execution while each js file downloads and executes. Newer browsers are starting to download more in parallel but even then they're not downloading it all at once.

More annoying: a lot of js being loaded isn't used until after the page loads. That is, it could be lazy loaded. Page Speed can give you a list of functions that weren't loaded, which is a good guide to finding code that could be lazy loaded.

Several techniques to lazy load: XHR Eval, script DOM element, iframed js, defer js, document.write... but each has their own drawbacks.

Did a review of the top ten US sites and how they load js... 6.5 get a thumbs up.

Mobile and wifi give different profiles again. Mobile particularly gets weird as carriers are doing transcoding, intermediate js, image resizing, all kinds of stuff... and it's slow.

@souders

Josh Williams – where are we going

Started the presentation with an anecdote about proposing to his wife, using a series of letters to get her to go around a series of locations which were in some way significant to their relationship. She then created a scrapbook of the day so she could share the experience.

So now he's building Gowalla which is the same kind of thing – a way to share places of significance.

Josh created pixel art for icon factory, moved on through other projects to create Blinksale – "a billing solution we'd actually use ourselves" that had a sense of fun as well as solving a problem. It provided a "game like wrapper" to a fairly dry service.

Later created IconBuffet, a site which gave away some icons but in sets – some people got one set, others got another set... it became a game to trade the icons to get the full set and collect badges, which increased exposure – "tell your friends". They later found out fewer than 15% of the users actually used the icons for anything. They realised most people were just there for the community, not anything practical.

Causes uses game mechanics to encourage people to give to charity. Over $25m raised. But of course the question is should something serious be done via game mechanics? In any case it seems to work, at least enough to take notice.

PackRat – a game that expected users to play 1 hour a day... but they discovered to their alarm that people were spending 6-10 hours a day playing a virtual trading card game!

Then Farmville happened... they asked themselves if that was what they wanted to grow into. So they asked what to do next. At that point the iphone happened...

Josh had a moment where he rang his dad to rib him that he was at Lake Tahoe and his dad was stuck in Texas. That was the lightbulb moment where he imagined a checkin system that would track places and make a game style mechanic around exploring and connecting in the real world. If they could motivate people to sit in a chair for hours on end, could they motivate people to go out and explore the world?

Another source of inspiration was a charm bracelet his late mother created during a european tour when she was a student. A charm for each city and a story for every charm. His mother could recount the tales of the trip by pulling out the charm bracelet. So could that be done with an app?

They started putting in landmarks, sports stadiums, airports, places people could go to and share the story and take a picture.

Gowalla.... add go to a wallaby. No really! Inspired by the film Australia and the desire to have a cute mascot, and despite the "questionable quality" of the film... "but the cinematography was great!"

Gowalla, Josh acknowledges, was in the right place at the right time... hype is nice but the real world is better. They have to grow the service and work on it. He cautions against placing your trust in the future as described by great blogger social media gurus and visionaries... how do you separate fads from the future?

Fads like checking in, game mechanics, badges, geo-buzzwords. Josh advises to be careful not to look them as the answer to the web's problems, they're more like outcroppings of services being built right now.

We also face overload. There was so much info being shared, Twitter was noticeable when you were cut back to 140 characters and reduced the overload. Checking in however reduced it even further, to just saying where you were at the time. Very low friction.

Now people are checking in to tv, books, movies, games, even intangibles like checking in to states of mind. There is a very real risk of check in burnout. Now the question is how to bring value to the experience? An easy one is that if you check in you could win an ipad.

Badges and game mechanics are neat, but not new and they are subserviant to the service's actual value. People aren't going to respond to a meaningless email just to gain a badge.

What people are really into is social validation. They don't want a badge, really, but they like to brag to their friends that they visited another country. We like people to reply, comment, retweet, favourite our stuff.

Interesting service: Quora. Question and answer site with direct feedback... "it lights up as people respond.... it's like crack!"

Location in and of itself is boring – context and value matter. Checking in is a temporary solution to a more complex problem, the best we have right now. Similarly game mechanics aren't special sauce that makes everything tasty.

Mobile is the future of the web. Getting people to get up, go outside and yet take the web with them... it's a huge deal. Background services and passive applications are going to be a big part of how the web grows.

@jw

End of day one... whew!

Michal Migursky – let's see what we can see

From Stamen design, who did the digg visualiser and lots of other data/visualisation projects.

Data as choices – accepting data shaped by someone else's choices is a tacit acceptance of their world view (quote frmo mitchell whitelaw http://sta.mn/gb)

Dataviz can illustrate a problem – eg. of comprehension – as well as clarify a concept.

Problems vs. Messes – problems have solutions, but messes can only be managed.

Twitter has given people "permission to speak" in many contexts that were previously closed – MTV awards ceremonies, the olympics... pulling out the keywords from twitter gives a new perspective and voice. You can see what people are really saying and what issues are causing discussion (norweigan crazy pants at the curling...).

Showing a visualisation can reveal patterns and change the way people react to an event – anecdote about korean pop star Rain not getting into the top 12 in an awards visualiser taken from twitter keywords. His fans were complaining that he couldn't get in, so they bumped up the visualiser to top 13 to let him in. The fans then formed crazy theories about how it could have happened......

A challenge of visualisation is presenting combinations of information – including communicating data sets with variable precision. eg. Sea level measurement is not as accurate at all measurement locations, some just don't have the same precision. How do you include that into a visualisation? And how do you make combined data sets approachable, human, understandable? How do you make it personally relevant within a time scale that makes them comprehensible?

50% is the number that people can naturally and easily visualise, because it's the line between "ain't gonna happen" and "probably going to happen".

Crime trackers are popular because it's local information. However crime data can be skewed by the way the police report it – or don't. Example of a guy who reported an assault from home after the fact; and the crime was mapped to his home and not where the assault occurred. (Oakland crime tracker)

Data is the public good. http://sta.mn/qk5

How do you get data? How do you create it? ...use what's there. Use the information and technology people already have to create and gather more.

Crowdsourcing maps – OpenStreetMap, Walking Papers (where people print maps, draw and write on them then scan them back in)

http://sta.mn/gm

Data is messy but you can create ways to get useful data from the mess, guide and control the creation of the mess.

Last three points...

Know and choose where you get your raw material
problems and messes: know the differences, embrace the messes
look for the interesting in the merely complicated

Q&A

Q: How do you deal with responsibility, ie people using the data for the wrong reasons?: A: Generally quite lightly, they place a fairly high level of trust in people to do the right thing or at least be responsible.
Q: How do you deal with the ethical implications of presenting data in a certain way?: A: Biggest ethical consieration goes into the tidal gague information mapping... the ethical implications is to talk to the source of the data, to understand the limitations of the data and what level of accuracy it has.
Q: have you encountered privacy breaches due to the higher degree of granularity?: A: with the crimespotting project they essentially offload that to the police, to only make suitable data available. They don't show domestic or sexual crimes, for example; and they fuzz the location – they'll say "the hundred block of Main Street" and not a specific number. With the twitter stuff it's almost the opposite, since the start it's supposed to have been public – so it's a huge group of people that has been promised what they're doing is broadcasting to the public. They don't use Facebook data because it is ecumbered by the problems of starting private and drifting public.
Q: crime mapping could be useful to ciminals too... do you have a comment on that?: A: one of the things they saw early on was quite bizarre... most crime reports are based on the type of crime. They found with prostitution data there was an inversion... dead silence, then a series of arrests. You could see the times the squad went out and made arrests – literally across the space of a couple of hours. If you had access to that minute by minute, you might well know that you should run away. However with paperwork delays it comes through at least 24 hours later so it's not fast enough to be helpful.
Q: how are traditional media reacting to dataviz efforts?: A: actually really well. The producers of TV shows are reacting to the fact of the conversations taking place, and working it into their shows. They have to have some level of control for various reasons; but they're responding and reporting it even if it's broad "Rhianna is trending heavily on twitter right now".
Q: what was it like working with MTV and similar companies with regard to dealing with negative feedback/messages coming through?: A: actually quite well. They actually have a TJ (TwitterJ) in the pre-show reporting on twitter trends. They're finding the times through a broadcast that they'll allow negative comments to be broadcast in the actual show, although they're still less willing to push any of the negative stuff through.
Q: any roll on effects from the crime mapping? Do people scurry home at 9pm?: A: the biggest effect is how people relate to the police. People were going to meetings with the community beat officer informed by the data from the site. They were prepared to have a more informed discussion with the police.
Q: do you find that people come to you with an outcome in mind, or do they give you the data for you to sift through?: A: depends on the client. Some definitely have a message in mind, an idea they want to push and promote. Others, like MTV, just want "excitement" and information they can use during their show. Although generally they don't work with ad agencies and other groups with super-specific outcomes in mind. It's not really an ethical choice, just reflects the client base.
Q: do you have any ideas about ways to encourage governments to release data is in consistent/better formats/: A: probably the best way is to do useful things with what's already available, so they can see some value. If they release stuff and nobody does anything with it, they tend to be a bit discouraged and think nobody cares about the data. So we should use the data even if it's a bit inconvenient at this point. By demonstrating usage the sources may see the value and start releasing it in a more useful format.

@migursky

Mike Smith – html5 report card

Progress report on HTML5. Evaluating html5 (mike's grades are overall, some things are better, some worse):

ancillary materials (mike gives B-)
tools support (mike gives C+)
features specced
features implemented
accessibility

Ancillary materials

Some recommended resources:

http://w3.org/TR/html5-diff
http://html5rocks.com/
Books by Jeremy Keith, Bruce Lawson & Remy Sharp, Mark Pilgrim (diveintohtml5.com)
http://html5doctor.com/
the html5 "edition for web authors" tweet and respond to #html5author ...you can also fork it from benchwarz on github.
Sidenote: ecmascript spec, http://sideshowbarker.github.com/es5-spec ...working to allow annotations.
New resource! http://www.html5accessibility.com/ - a chart of html5 features which are currently accessible, plus workarounds for the ones which don't.

Tools

http://validator.nu (stable) also at http://w3.org/html/check (unstable, mike's workspace code – so more up to date, features not yet committed upstream to validator.nu)
The more usual w3c validator does do html5 but Mike's keen for feedback so use the unstable and let him know what's going on.
http://modernizr.com
http://html5boilerplate.com/
Adobe dreamweaver and illustrator cs5 now have html5 packs.
http://html5readiness.com/
http://caniuse.com/

HTML5 "the good parts"

syntax simplifications
html5 parsing algorithm
mathml and svg
new elements and attributes
new apis for scripting

Mike gives A+ to all of these.

design principles
maintain xhtml support

[Aside: Good simplification is the doctype – although a number would have been nice – short meta tags for encoding, etc. Bad simplification is sloppy syntax like unquoted attributes.]

Little known feature – context menus (eg. For right click). "Don't feel bad if you didn't know... even people on a browser project didn't know about it... I won't name which one..."

Related APIs: geo, device orientation/motion, files, selectors, audio

@sideshowbarker

html5 panel

I didn't take notes in this as it was a freeform session, although I will say if you missed it it's worth checking the podcast for a vintage John Allsopp rant!

Dmitry Baranovskiy - Raphaël

[Aside: get ready for some quotable quotes!]

You shouldn't really talk about Raphael... you should do things with Raphael.

"This is a great example... I would do it better of course..."

Why Raphael? Why was it created, why would you use it? We've heard lots about the awesome new features of html5, css3 etc... but welcome back to the real world, were IE6 is still alive and will be for a while.

If you want to create really amazing stuff with lots of interactivity, motion, rich media... Flash is generally considered the answer. But it has two big problems: you have to know quite a lot of stuff about it and you have to buy the software. Then of course you'll run into iphones and ipads...

Raphael meanwhile uses SVG, backed with VML in IE.

"I want you to remember this. Raphael doens't use canvas. Raphael doesn't use bloody fucking canvas!"

"VML is like the grandfather of SVG.... it's an amazing stinking pile of garbage."

However SVG and VML together work very well as a solution; they have a similar ideology even if the technology is different. Dmitry was able to bridge SVG and VML with Javascript. Raphael however can only support the crossover features that are in both SVG and VML.

Raphael is free, MIT license and will be forever, that's never going to change.

Android doesn't support SVG because it would make Webkit 1meg bigger. ....what?! "But if they can't do something the iphone guys can do... then I guess Android sucks!"

Using Raphael...

create canvas/paper, three ways to do it but you must create it to create things in it
then you can draw primitives – circle, rect, ellipse, image, text – and each of them has a set of attributes and functions
you can use attr with an object to do this in a more convenient way
you can then animate things, eg. From point to point; shape to shape
- with the latest version of Raphael you can now chain animations without callbacks
- there is a new syntax for animation now! W00t!

Next... you can create paths. Simple! ...but path strings are quite long and annoying. They represent points and paths to create shapes. M – move to, then a number for X and Y to move to; then L means line. Lowercase means relative, uppercase means absolute.

But much easier than doing things manually, you can pull paths out of any .svg file created in an editor.

In the new version of Raphael you can create custom attributes, which is a way to do unusual animations... although you do need to know some maths :(

Plugins... Raphael is pluggable, you can extend the paper or elements.

So, you can use Raphael. What can you actually do with it?

Charts!

"The computers are ruining our peoples." Since it became easier to print stuff, things aren't beautiful any more.

Charts are the same. Look at this chart... it's awful! It's terrible, but it was so easy to create. It's 3D, so can you tell the difference between segments at the top and bottom? The perspective distortion means you can't actually read it. "This is crazy chart. This chart makes no sense. Picture of Tom Cruise would be better."

If you draw it flat you can actually read it, which is what is was for! Maybe it doesn't look as fancy.... "fuck that!"

(showing a round colour picker) "There is nothing stopping you doing this. Just you! Because you still think in squares and rectangles."

Raphael site doesn't use any images... is that just for the sake of it? No, it's because the SVGs are smaller than the images would have been. Plus, they scale when you zoom in! ...and they look awesome if you print them, no pixelation!

(raphael icon set available for free)

Huge shout out to Lachlan for encouraging Dmitry to continue with Raphael.

"Web is not rectangular any more. Break this habit, take the red pill. Take two red pills."

Q&A

Q: I have a design background rather than js... how long would it take to get started, where should i go?: A: You should really learn js, but if you can pick up jQuery you should be able to pick up Raphael.
Q: is it accessible?: A: any screen reader that can read SVG will be ok, but that means we need screen readers to read SVG... but since it's a standard it should come through.

@RaphaelJS

Tim Harrison - Designers, designers, designers

(Photo by JJ Halans)

Two things to remember: rainbows and number twos! These are the only two things you need to know about to do good design.

Tim went to the same art college as Joe Strummer... he figured if it was good enough for punk rockers, it was good enough for him.

Design became so easy that he thought... "even cavemen could do it". But then he realised humans have been designing things since cave men started chipping out stone tools.

Looking back from stone tools, to the wheel, to electricity, to the web, to the mobile web... the time between major steps is compressing. What's going to be next? ...and how soon?

In the list of top 100 inventions of all time, the iPhone was 8, over number 9 the flushing toilet. There's some priorities for you.

Tim worked on the iphone launch... hilarious photo of the iphone on a pedestal with people worshipping it... but the iphone did bring a different level of design quality to the mainstream – in terms of being a wildly successful product that was intentionally Well Designed.

"Design Thinking" as a standford university d.school principle... example of an ipad app that was rapid prototyped and highly successful in the marketplace.

So, should we be taking this stuff seriously? Yes.

McDonald's are starting design exercises to improve customer experience, and the stock price is going up in anticipation of the results.

The rainbow is all about experiences. (played the double rainbow video - "What does it meeeeeeeeeean?")

In the bigger picture we should be working out how to make things we build more exciting, life changing... more double rainbow. It's the ultimate user experience.

Design challenge at apple: designing mini-stores, to give the "full experience" in a very small space; and still have a functional store. Also there wasn't room for a window display; so they made the front all glass and put up backlit photos inside the store that you could see as you walked past.

The little stores took off so well, they amped it up to the bigger stores. They took the backlit photos through into the larger stores.

"What I'm talking about here is considering the impact of the WHOLE." Every detail of the experience is part of the experience.

Anecdote about challenging assumptions and attitudes – he was sent out with an art college assignment to draw pets/animals. Came back with nice sketches of pets and the tutor said no, no, go out and challenge your thinking. Draw your dog taking a dump instead, look for something a little more challenging.

We don't like to be challenged, we like to stay in our comfort zone. Fear is a strong motivator, both for action and inaction. Showed examples of quite disturbing anti-AIDS posters done in france, with people having sex with spiders and scorpions. It certainly got people to pay attention.

But the other way is Honda's hybrid, the second generation came out after the Prius was a success... and it looked exactly like the Prius instead of finding its own design path.

Some principles...

Pay attention to the details
Simplify - remove the crap
Focus – make it great
Cult-ivate – embed ethos

Odd attitudes and promotion points:

in .au things are labelled "fully imported"
in .uk things are just made in china.
UK's favourite word is no, US is yes... where's australia on that spectrum?

So now you know the secret formula...

rainbows + shit = awesome

Do you really need $2.4b to do things? No, you really don't, you need to be creative. (example – the safety dance, which probably cost $2 for an itunes track)

[At this point, the EEEpc reminded me I forgot to charge it at lunchtime and it gave up...]

And that brings us to the end of day two... where does the time go?!

Need more?

Official resources and podcasts: http://www.webdirections.org/events/#south10

From what I've heard since, I regret missing this one: James Bridle – Wrangling Time: The Form and Future of the Book | Web Directions ...here's hoping James comes back to WDS sometime!

Also, finally, a huge shout-out and thank you to Campaign Monitor for giving away an iPad... 64gig 3G no less... to me! Hell of a way to finish the conference! :)

design pixels aren't frontend pixels

2010-09-01T01:23:00.015+10:00

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

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

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

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

how big's the image?

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

No problems, right?

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

What the?

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

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

Font sizes

"How big is the text on that page?"

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

Huh?

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

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

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

Firebug:

Photoshop:

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

Spacing

"Put a 20px margin in there."

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

What the hell?

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

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

So... who's right?

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

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

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

How to avoid problems...

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

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

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

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

Conclusion

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

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

Browser Testing With Windows 7 XP Mode

2010-08-20T00:13:00.013+10:00

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

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

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

The goal

The setup I currently need:

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

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

Steps to get there

Download and install XP Mode, Virtual PC and the XP Mode Update.

Don't fight it: use IE to download these packages. It makes the activation step much easier.

Start XP Mode
- Start → All programs → Windows Virtual PC → Windows XP Mode
- You'll end up with a Windows XP SP3 instance up and running.
Note this is a proper XP instance. Treat it like a real machine because that's basically what it is. That does mean you have to...
- Install OS updates
- Install your usual firewall and antivirus apps
Run Windows Update as many times as required to get up to date - just be careful not to install a new version of IE during the updates.

I actually installed a firewall on the source image, although it's not clear if that could cause problems.

The colour level is initially limited to 16bit, which really isn't adequate for.... well, anything I do with VMs. So...
- To enable 24-bit without disabling integration features (hat tip for technique goes to the Sitepoint article about XP Mode and differencing):
  - Tools → Disable Integration Features
  - Log back in to XP Mode
  - Start → Run → mmc
  - File → Add/Remove Snap-in
  - Select Group Policy Object Editor, click Add then Finish, Close and OK.
    Go to Local Computer Policy → Computer Configuration → Administrative Templates → Windows Components → Terminal Services
  - Select the Limit Maximum Color Depth setting, select Enabled and set Color Depth to 24-bit
  - Close the console.
  - Set the desired resolution on the virtual desktop
  - Tools → Enable Integration Features.
- To enable 32-bit colour, you need to disable integration features [Tools → Disable integration features]. So unless you really must have 32 bit colour, I'd stick to 24-bit colour.
If you have any standard system tweaks you like to do (Folder Options spring to mind) now's the time to do them. Remember that any settings you change here will be done for all the subsequent test VMs.
When you have your initial image patched, shut it down (don't hibernate it).
- Note that you won't be running or using this image directly after this, but the VMs access it as their source image. Modifying the source image will break the variations, so it's recommended you don't touch it at all (set it to read only to be really sure).
Create a new VM using differencing:

Start → Programs → Windows Virtual PC → Virtual Machines → Create virtual machine
I named the first one "XP Mode IE6"
Give each VM at least 256 megs (I give mine 512 and they're pretty happy).
In the "Add a virtual hard disk" step, choose "Create a virtual hard disk using advanced options".
Choose the "differencing" option and when you reach the "Specify a parent..." tab, point to "Windows XP Mode.vhd" which is the XP mode disk you just created. It will probably be in C:\Users\YOURUSERNAME\AppData\Local\Microsoft\Windows Virtual PC\Virtual Machines ...to find this, you may need to change your folder settings to show hidden files. I also found it useful to copy the location into clipboard then go back to the VM setup.
Repeat this step at least once to get an image with IE7.

You should now see at least three VMs when you go to your Virtual Machines directory - the original Windows XP Mode, plus the new ones.
Out of the box the images have IE8 blocked in Windows Update, so...
- To keep IE6, basically just do nothing.
- To install IE7, you'll have to download the IE7 installer and set it up manually.
- To install IE8: run Windows Update → Custom → Restore hidden updates → select the IE8 update → Install Updates.
IE6 and IE7 don't come with the developer toolbar installed, so you'll need to download the IE Developer Toolbar and install it on those VMs.
On each VM, change the Computer Name to avoid networking clashes.

Go to System Properties → Computer Name → Change → enter a new computer name.
In a corporate environment I'd suggest you use some derivative of the host machine's name, in case your network guys ever need to find this extra "machine" they're seeing.

Reminder... if you haven't set up security measures on your VMs, go do it now!

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

OS integration

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

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

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

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

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

performance

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

The limited performance does mean details of your interaction animations - fades, slides etc - aren't smooth. A simple jQuery fade in IE7 on XP Mode steps through a short series of shades rather than an actual fade.

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

Performance on my work machine, however, ranges from ok to slow motion. That is probably because I also run a Java IDE and full application instance; and it seems that can cripple pretty much any machine.

resource usage

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

I would guess that there's some level of system cost being absorbed by other, less obviously named processes. But even with a lot of applications running at once, the VMs don't seem to take up huge amounts of RAM or peg processors (YMMV).

what about Virtual PC?

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

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

getting files on and off the vm

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

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

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

conclusion

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

review: wacom bamboo pen and touch

2010-06-30T23:09:00.012+10:00

For the past few months I've been using a Wacom Bamboo Pen + Touch tablet, replacing the original Bamboo I reviewed a while ago. I've given a pretty good workout on both Windows XP and Windows 7, so it's about time to review this one too.

Disclosure: the Pen + Touch was a freebie from Wacom, since a local rep saw my original review and wondered if the new one addressed the concerns I'd raised.

quick background

I use the tablet as a mouse replacement/alternative, for ergonomic reasons. I still have a mouse for gaming and the occasional time when I just can't manage a hover interaction with the pen (tooltips for tiny icons are the worst).

I've previously used an Intuos3 at work and an old Bamboo at home. The old Bamboo was good, although not perfect - in particular the "touch ring" simply didn't work for me, which mean I couldn't easily scroll pages up and down using the Bamboo.

Scrolling by clicking and dragging the scrollbar was one thing that still put a lot of strain onto my hand (not to mention a decent dint in the surface along the edge of the tablet). That was a bit of an Achilles Heel, but otherwise it was a nice little tablet (especially for the price). I did wish at times they'd included a touch strip like the one on the Intuos3.

pen + touch = nice!

The Bamboo Pen and Touch is a next step that probably should have been obvious, but I never thought of it - the whole tablet is also a touch pad. So you can switch between using the pen and using your fingertips (multi touch).

What's interesting is that at work I still have an old Bamboo, and people regularly try to use it as a touch pad. I think our input paradigms have shifted a bit!

In any case my immediate thought about the combo was... "can I use the touch to scroll and the pen for everything else?"

The short answer is yes. It's not always perfect, with the occasional bit of lag when switching between the pen and touch modes; and touch-scrolling could definitely be snappier. But in general it works well.

pen

The new pen is a slightly different shape (flat down one side); and feels a little different on the tablet surface. However it has a nice feel, retaining the surprisingly-good precision of the first Bamboo.

The pen is a little small when you use it all the time, the thicker pen on the Intuos3 was more comfortable for extended use. It's a minor difference but all the same if Wacom offered a bigger replacement pen for the Bamboo I'd buy it. Sadly from what I've heard the Bamboo and Intuos pens are not interchangeable.

It is interesting to note that the default click method has switched from Hover Click to Click & Tap - apparently I'm not the only one who was switching that around. It's a far more precise and less error-prone way to set up the tablet.

no pen stand

One strange decision with the new Bamboo was leaving out a pen stand. The manual says this is because storing the pen in a stand could damage it, which is weird when all other Wacoms I've used had a stand.

Instead, when you're not using the pen, you're supposed to stick the pen in the red loop attached to the side of the tablet.

I type a lot so I'm always putting the pen back in its stand, which means it's just not viable for me to put the pen back in the loop over and over again. To solve this issue I use the old Bamboo's stand - if that hurts the stylus, c'est la vie.

Depending on your work style, this might not be an issue. For example if you do long stretches with the stylus, putting the pen in the loop occasionally might not be a problem.

touch and multitouch

Touch is obviously all new. The Bamboo is nice to use in touch mode, with precise movement and no accidental flick when you pick your finger back up.

All the expected touch gestures are here - two fingered scrolling, pinch zoom, flick forwards and back, etc. The settings panel has animated demos in case you're not familiar with a touch interface:

Realistically though if you've used a multi-touch tablet or touch pad before it's pretty much what you'd expect. There's not much more to say, really - it's multitouch, and it works!

windows xp and windows 7

Under Windows XP the drivers were pretty standard, no big tricks. Windows 7 has a lot of extensions for tablet PCs, which would be great for an actual tablet PC. However since I'm on a desktop, I found that I really didn't make much use of them.

This is not a fault with the tablet features in Windows 7, in fact if I had a tablet PC there's no doubt I'd use at least some of them. But the hand-eye disconnect is too much for me on a desktop. Besides, you don't want to attempt to read my handwriting anyway ;)

windows 7 driver instability

One frustration has been tablet driver stability under Windows 7. Ocasionally the pen is too erratic to use on first boot; or it will start randomly clicking. I've learned to check tablet function on boot and immediately reboot if it's flaky.

Since I didn't have these problems on Windows XP, and friends with Macs don't report the same issue, I am pretty sure this is a driver problem or some form of system setup clash.

Some research suggests it may have something to do with Win7's file system permissions setup; but so far the suggested solutions haven't resolved the issue. I'm hoping a Wacom driver update or Win7 service pack will resolve this.

Thankfully this problem doesn't occur too often so it's not a deal breaker. Mind you if it started happening daily, it would be a very different story.

in the box...

I should quickly cover the extras included:

Extra pen nibs and a nib removal tool
Photoshop Elements and other support software

These are pretty good inclusions, assuming that nib removal tool works (haven't worn out a nib yet). Having seen some pretty dodgy bundled software over the years, it's nice to see something like Photoshop Elements which would actually be useful to many home users (eg. for simple photo edits).

summary

Good	Bad
Pen+touch is a great combination Multi touch capability Good tablet for a low price	Some lag switching modes and scrolling No pen stand Stability issues in Windows 7

Driver issues aside, this is another good tablet in the Bamboo range. The pen and touch combination is awesome and I hope they keep offering it in future Bamboo lineups. Being able to use multi-touch on my desktop is nice after getting used to it on laptops.

The multi-touch scrolling makes up the gap left by the old Bamboo's touch ring, with only the lag issues preventing full marks.

My wishlist for future models would be to go back to a separate pen stand; and offer a range of premium stylus/pen options. Or possibly to see the pen+touch idea migrate to the Intuos range.

Update 2011.07.17

Driver stability has continued to be a huge issue under Windows 7 with v5.2.1-6a of the drivers. One workaround I've found is that if pen input is erratic on startup, restore your preferences via the Pen Tablet Preferences File Utility. That seems to restart the driver or at least do something that gets things under control. Obviously you have to make a backup first, so you can restore it later. Wacom do seem to be updating the drivers at last, will see if that improves matters however since they're marked RC I'm not sure they are stable.

I've also found you will probably want to tune (or simply disable) some of the Win7 features aimed at tablet PCs which kick in when it detects the tablet. First off, hit the Tablet PC Settings if you find context menus opening to the wrong side of the cursor (see the left/right handed settings):

Open Local Group Policy Editor (Run gpedit.msc)
Go to User Configuration → Administrative Templates → Windows Components → Tablet PC → Cursors
Enable the Turn off pen feedback setting.

(Found this tip in the Win7 forums)

If you, like most people, hate the little animated rings that appear when you're trying to click and hold you can get rid of those. Go to Pen and Touch settings → Pen Options → Settings → disable press and hold for right-clicking.

It shouldn't be that hard, but hey at least you can get rid of them.

no flash? use standards? the game hasn't changed

2010-05-24T00:06:00.001+10:00

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

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

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

none of this is actually new

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

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

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

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

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

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

as you were

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

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

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

how to structure html headings and titles

2010-03-12T00:16:00.008+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!

Update 2011.11.08: A quick note on <h1> usage

The Webaim Screen Reader Survey #3 produced a surprising result regarding pages with two h1 elements within a single page. While 37.1% preferred "One first level heading that contains the document title", 50.3% preferred one h1 for the page heading in addition to one h1 as the site heading.

It is important to note that the majority did not like sites with a single h1 as the site heading and no other first level headings. Also, it is not clear if the preference for two h1 elements is a strong preference; nor whether the one h1 per page model actually creates difficulties. Hopefully future surveys will dig deeper into this area to see if a better understanding can be gained.

This basically means you should definitely still ensure the page title is an h1, but it's probably acceptable to leave your site header as an h1.

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.014+11:00

If you're running Windows 7, you might also like to look at Browser Testing With Windows 7 XP Mode.

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