HTML5.gov.uk

How government organisations can be cutting-edge

This presentation is for people involved in digital media in large public bodies or government institutions. It leans towards the technical end of the scale.

Government organisations and publicly-funded bodies are generally not known for their ability to push the boundaries of technology.

When you think of a government organisation web site, you usually picture something boxy with lots of text and a little disclaimer running along the footer reading:

"Best viewed at 800x600 on Netscape Navigator 6 or Internet Explorer 5.5"

The reasons for this are usually
"We can't afford to upgrade our systems" or
"A lot of people are still using old browsers" or
"Our site is too goshdarned big to update"

But there's absolutely no reason why, when done properly, the organisation's website can't take advantage of the newest technology and offer the best possible experience to everybody.

I'm not going to cover all the technologies or methodologies available but I will cover the most important ones.

HTML

What is HTML5?

Big umbrella term just like ‘Web 2.0’
Not a particular technology – a word so everyone knows what we’re talking about.

What’s under the umbrella?

HTML

New semantic elements:
New ways to mean what you actually meant to mean

CSS3

Like CSS 2.1 but better

More JavaScript control

New ways to do stuff you couldn’t do before or had to use plugins for

Not everything works everywhere

but that’s okay.

Challenges facing government organisations

Accessibility

Regardless of physical impairments or level of technological ability

Reusability

hard enough to get one piece of content generated and approved – reuse it

Cheap

This covers implementation as well as content reuse.

Why is now the right time to use HTML5?

HTML5 is HTML – you’re already most of the way there.
Most visitors’ browsers can handle most things
JavaScript ‘PolyFills’ can be used to patch the holes

Polyfills

Regressive Enhancement a.k.a. patching the holes.

Old browsers can work just as well as new ones.

If the browser doesn’t support feature X, add it.

But what about users without script?

Look at your actual visitor statistics
Don’t build for your browser, build for your visitors’ browsers
Don’t worry about something that doesn’t exist

This is often the point at which a government organisation would stop.

"We can't implement these features because they wouldn't work in Internet Explorer 6"

"Yes they would, just use JavaScript to patch the holes"

"Then they wouldn't work for visitors with Internet Explorer 6 without JavaScript enabled"

And...end of argument.

Look at your visitor stats – not the number of people in your organisation with IE6, 7 or 8, the number of visitors with IE6, 7 or 8. Or 9. Or 10.

How many of your visitors _actually_ experience your site with IE6 and JavaScript switched off?

Not some imaginary audience segment, actual numbers?

When we were planning the development of the new National Museums Scotland website, we looked at this:

0.17% of visitors use IE6 with JavaScript off.

That in itself shows that it's a tiny audience but even then they still get all the content, they just get it linearised.

It's still structured correctly, it's still hierarchical, it's still got a basic visual styling, it's just missing some of the shine.

On top of that, if these visitors are used to browsing the internet via IE6 without JS, they're used to pages looking and behaving much, much worse than yours ever will.

Why HTML5 is good for government organisations

Accessibility
Usability
Largest audience
Good for mobile browsing (if done right)
Resuable, modular content
SEO Benefits

The solutions to the problems

Accessibility

Marking up content using semantic tags provides an explicit structure to your content. The closer the tags are to the intended meaning, the more obvious the meaning becomes.

If a screenreader looks at your page, it can determine what the relevant content is and present it to the user; a visitor with low vision can use their browser's custom styles to emphasise articles over navigation or hide footers.

Accessibility also includes usability. Content marked up with extra semantics can interact with users' systems in ways that were much harder before.

Events whose location and date are marked up with new address and time tags could be automatically pulled into a user's calendar creating a smooth, usable and ultimately accessible experience.

Value-for-money

Creating content in an inflexible and nonsemantic way may cater for the needs of the lowest common denominator but exclude the higher end.

Some visitors may be put off by the experience, some may be completely unable to use it

If you rely on large images, wide page layouts or plugins for your content, you might by excluding mobile devices with slower connections, smaller screens or no plugins. If these same effects - visual and functional - were reproduced using CSS3 and JavaScript with sensible fallbacks, the content would be available for all.

If your content is marked up correctly, you can reuse it any way you need to or just want to without restructuring it at all.

And an excellent side-effect of this is the Search Engine Optimisation.

Search engines love semantic content.

Being realistic

Back-catalogue

Large organisations have many years of assets.

Might not be feasible to migrate old flash video.

3rd-parties are the best parties

Try and use respectable, reliable 3rd party service providers where possible
Let them deal with the hassle
Pay them for it. ICT policies are more understanding if there’s a contract.

Large organisations = Legacy systems

Sometimes these can’t be updated.

HTML5 doesn’t need to be all or nothing – choose the right doctype and build and improve a bit at a time.

Every step forward is at least one step forward.

Block elements

article, aside, figure, footer, header, hgroup, nav, section, etc.…

Inline elements

time, address, small, meter, progress, etc.…

Styles

box-shadow, text-shadow, border-radius, border-image, transitions, etc.…

Script

Geolocation, canvas, history, offline storage, etc.…

Learn from these people

Dive into HTML5 – thorough overview
HTML5 Boilerplate – best practice
Smashing Magazine – tutorial to get started
HTML5 Doctor – semantic geekery
AlphaGov – government website done right

HTML5.gov.uk

How government organisations can be cutting-edge

HTML

What is HTML5?

What’s under the umbrella?

HTML

CSS3

More JavaScript control

Not everything works everywhere

Challenges facing government organisations

Accessibility

Reusability

Cheap

Why is now the right time to use HTML5?

Polyfills

But what about users without script?

Why HTML5 is good for government organisations

Being realistic

Back-catalogue

3rd-parties are the best parties

Large organisations = Legacy systems

Block elements

Inline elements

Styles

Script

Learn from these people

Go, Make

BY Simon Madine / thingsinjars.com