Building a better web

BEN SCHWARZ
presents

BUILDING
a better
WEB

Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML.
This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They
made some good decisions, but poorly executed them. XHTML went nowhere.

95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

2.0
95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

2.0 3.2 4.0
95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

2.0 3.2 4.0 4.01
95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

XHTML1

2.0 3.2 4.0 4.01
95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

XHTML1

XHTML1.1

2.0 3.2 4.0 4.01
95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

XHTML1

XHTML1.1

HTML5

2.0 3.2 4.0 4.01
95

96

97

98

99

00

01

02

03

04

05

06

07

08

09

10
19

19

19

19

19

20

20

20

20

20

20

20

20

20

20

20

Other people had noticed this also, take Mark Pilgrim, the author of diveintohtml5.org (The single best book for HTML that Iʼve read to date)

“The CSS working group
right now is chronically
dysfunctional…”

—Ian Hickson, Google, W3C, WHATWG

Mark isnʼt the only person to notice issues of the organisation that is the W3C. This from Ian Hickson, an invited chair to the CSS working group. (Which is somewhat of an honour to be a
part of)

I saw Bert Bos speak here at web directions around 3-5 years ago. One thing that he said while showing new css3 features was ʻfancy bordersʼ, this really stuck with me, he had no idea
what designers really wanted or needed. This stuck with me until now, although Iʼd never really thought about it

Some of you may have heard of the WHATWG…



An organisation, formed by individuals who work for companies like Opera, Apple and Mozilla

The whatwg go through the html5 spec with a ﬁne tooth comb. Applying use cases and better documenting how browsers should handle elements down to a very detailed level.

Their work mirrors a copy of the html5 spec from the w3c—which is maintained using a version control system (subversion, I believe).
This tracker allows you to track every change to the spec, as it happens.#

If you wanted to keep in touch with developments, you can also check the @whatwg twitter
account#

Changing pace a little. Who knows what a spec is? (70% of the audience held up their hands). Who has read a spec (some hands down)... Like, from page 0—hero (all hands went down,
with the exception of Mike Smith [W3C] and a few others)

I did a word count of HTML4, it was about the size of a small novel that you could read over a weekend.

A common myth of HTML5 is that its a really big awful spec…

How horrible? Well, I couldnʼt copy and paste the text into Pages... my computer crashed for 7 long
minutes.#

I eventually wrote some javascript to get a rough word count. Remembering that this single page version of the spec omits certain pieces of web technology that would be considered
HTML5.

HTML5 is backwards compatible, donʼt break anything in existing browsers.

… but its still pretty hard to read a spec

because theyʼre designed for people who write browser rendering engines… not developers.

Not the millions of web designers and developers around the world, but just a couple hundred people on the face of the
planet.#

Not all is lost. Hixie and others have painstakingly gone through the spec and marked out all the sections that could be omitted… to create a web developer edition of the spec

Leading the charge on this is Mike™ Smith, a W3C representative from Tokyo, Japan. Who just happens to be a good friend of mine now…

Its about 50% of the size, which is much more palatable

FOR THE

LOVE
of
THE WEB

A few months ago, I travelled the country (Australia, if youʼre wondering) and gave a bunch of HTML5/CSS3/Web technology workshops.

During this process of preparing for my workshops, I thought “Who really wants to read something that looks like this?”

“So, I’ve been trying to read [W3C]
specs more than ever. Not only is the
language used some form of
incompressible bullshit, but the
readability of these pages is
abysmal…”

“So, I’ve been trying to read [W3C]
specs more than ever. Not only is the
language used some form of
incompressible bullshit, but the
readability of these pages is
abysmal…”
—Me

“…Why does a page have to look like
that ugly ass bullshit?”

This is taken from an e-mail to my long time friend, and business partner…

“…Why does a page have to look like
that ugly ass bullshit?”

—Me

This is taken from an e-mail to my long time friend, and business partner…

AK. A classically trained chap, typographic genius.

ℜ
ab+c
ab-c.com.au

Together, we are ab+c, weʼre new, expect to hear more from us.

We sat down a bashed out a grease monkey script together, it added stylesheets and javascripts.

So rather than having something like this

We had this.
Within 3—4 hours Paul Irish had forked my code, corrected a cross domain @font-face issue found only in Firefox, then hosted the fonts on his own website.

Pause. Ajaxin.com wrote an article titled “W3C, Hire Ben Schwarz”
http://ajaxian.com/archives/w3c-hire-ben-schwarz-now-making-specs-nice-to-look-at
While this was great for my ego, after a few days of crazy trafﬁc on my website, it died down after about a week. Nothing happened. Until…

I got an email introduction from Oli Studholme, (http://oli.jp, @boblet on twitter), he was the guy who got me in touch with Mike Smith. Without this email, none of the following could occur.
But what occurred?

Today, at Web directions south 2010, Iʼd like to introduce to you…

The all new HTML5, web developer edition. Mike Smith, sitting in the audience just deployed this as I started speaking to you
today#

Boom. The spec styles, only, running on a W3C domain

iPads, iPhones? Yeah we got views for those
too#

If you support this project, have feedback or anything of the sort, use this hash
tag#

"The problem we're facing right now
is there is already a lot of excitement
for HTML5, but it's a little too early to
deploy it because we're running into
interoperability issues,"

—Philippe Le Hegaret,
W3C interaction domain leader

Now, to recent events… Philippe was quoted saying
this#

“W3C: Hold off on deploying
HTML5 in websites”

—infoworld.com

Which was straight away misconstrued by lazy tech writers

“W3C Ofﬁcial: Don't Use HTML5 Yet”

—dzone.com

Still, Iʼm not sure he said this at all. Fear tactics, not for politics, for a fucking web based technology.

<!DOCTYPE HTML>

Here is the HTML5 doctype, its beauiful, simple, sets your browser to use standards mode, and better still, it doesnʼt decide that youʼre using a “Version” of HTML.

Your browser determines the features that you can use, irregardless of which doctype youʼre using

So all these features, how do we know what we can do? Without breaking old browsers or giving them an “empty” experience?

Modernizr

Modernizr 1.7, coming soon with:
http://github.com/Modernizr/Modernizr/issues#issue/103

ş

Written by Faruk,

Paul says the pronunciation is “A-Tesh”. I left this on my slides, I hope I got it right Faruk, you charming looking bastard.

“ hey is this ben schwartz you? <link>
i'm sure there is only one ben schwarz in
this world.
i dated an erica schwartz in 6th grade.
despite our matching necklaces, it turns out
we weren’t Together Forever”

—Paul Irish

Paul is a bit of a character, one day I returned to my computer to collect some missed IM messages from Paul.

Moving on. Modernizr detects support for all of these features

By adding class names to your html
element#

p
{
width:
33em;
}

So I can take my regular width for a paragraph of text (Note, 33em is usually about right for a sane ʻmeasureʼ [the width of the text])

.csscolumns
p
{

width:
auto;

column-‐count:
2;

column-‐gap:
1em;

}

but when I have support for css3 columns, I can set the width to be auto and allow it to break into two short
columns#

.csscolumns
p
{

width:
auto;

-‐webkit-‐column-‐count:
2;

-‐moz-‐column-‐count:
2;

-‐ms-‐column-‐count:
2;

-‐o-‐column-‐count:
2;

column-‐count:
2;

-‐webkit-‐column-‐gap:
1em;

-‐moz-‐column-‐gap:
1em;

-‐ms-‐column-‐gap:
1em;

-‐o-‐column-‐gap:
1em;

column-‐gap:
1em;

}

Sadly, this is really how I have to do it right now

You can achieve something like this—Which I have actually used on my new web site
germanforblack.com#

In a browser without css columns, you can offer the user a slightly different layout

.cssgradients
section
{

background-‐image:

-‐webkit-‐gradient(…,
…,
…,

from(#33ff00),

to(#ff00ff));
}

You could use a css
gradient#

section
{

background-‐image:
url("lame-‐gradient.png");

}

and back down to loading an image (which obviously uses more bandwidth)

HOT
you can go and do aw/(ful|some) things like this. Hot pink to neon green.

Mobile devices are leading the web, we get one every year or two, even your mothers do. This means newer browsers on many devices, sadly the new windows 7 phone is going to also use
the IE7 rendering engine. This means no awesome features (shown following).

CACHE MANIFEST

/
/stylesheets/master.css
/javascripts/application.js

If you have a ﬁle like this, your browser will cache /, master.css and application.js, so when your users are ofﬂine, they can literally type in “website.com” and get the full experience

CACHE MANIFEST

/

NETWORK:
/exchange

We can say when we need network access

CACHE MANIFEST

/

NETWORK:
/exchange

FALLBACK:
/people /unavailable-content

When we want to have something like a custom 404

CACHE MANIFEST

/
/javascripts/*

NETWORK:
/exchange

FALLBACK:
/people /unavailable-content

Even * wildcards for paths

CACHE MANIFEST
# Version 20

/
/images/icons/appicon.png
/images/icons/appicon-x2.png
/images/loading.png
/images/btn-clear.png
/images/btn-clear-x2.png
/javascripts/json.js
/javascripts/dataset.js

NETWORK:

/exchange

Of course, if we updated master.css, by design the manifest will be checked, deemed that nothing has been changed and NOT redownload master.css. Do force a cache refresh, weʼll need
to somehow change the manifest ﬁle (see Version 20?—You could also use the commit hash from your version control system)

<!DOCTYPE HTML>
<html manifest=”site.manifest”>

Add the manifest ﬁle reference to an attribute called “manifest” on the HTML node

Content-Type: text/cache-manifest

Listen: YOU MUST DO THIS
That is, serve your manifest ﬁle with this content-type.

.htaccess

Using a htaccess

.htaccess

AddType text/cache-manifest manifest

Using a htaccess

/etc/mime.types

or editing mime.types if youʼve got access to it

/etc/mime.types

video/fli fli
video/gl gl
video/mpeg mpeg mpg mpe
video/mp4 mp4
video/quicktime qt mov
text/cache-manifest manifest

or editing mime.types if youʼve got access to it

js> applicationCache.status

You can also check the status of your manifest cache..

Idle - Nothing to be done
Checking - Downloading the manifest
Update Ready - The ﬁles have been downloaded, you can call swap cache
Obsolete - The manifest 404ʼd, the cache will be deleted

js> applicationCache.status 0
1
2
3
4
5



js> applicationCache.status 0 Uncached
1 Idle
2 Checking
3 Downloading
4 Update Ready
5 Obsolete



ﬄ

So, weʼve stored our app locally…

Earlier, there was a project called websql, in which we had a sqlite database that could be queried via javascript

The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be
parsed and reentered into another sql database

JSON

The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be
parsed and reentered into another sql database

Like, seriously.
Thankfully, the project has been stalled for well over a year.

localStorage
sessionStorage

So, weʼre going to look at local and session storage, both have the exact same API and 5mb ﬁle size limit per domain. They are like a cookie in that they use a same domain policy for data
access

Here was a video demo that I canʼt extract from keynote, I showed different access to `localStorage`.
Mike Smith blogged a demo of this technology a while back, so check that out if youʼre interested. http://sideshowbarker.net/2009/02/09/examine-html5-localstorage-and-sessionstorage-
data-with-web-inspector/

var
currency
=
{

"AUD":{

"name":"Australian
Dollars",

"symbol":"$",

"rate_usd":0.9876

}
}

So say you had some data like this—Maybe youʼd transferred it over JSON from your web server

localStorage['rate'] = JSON.stringify(currency)

Any browser that has localStorage support also features a native JSON library. Here I turn the JSON into a string representation.

JSON.parse(localStorage['rate'])

and here, from storage I re-create an object

navigator.onLine

We can also tell when our users are “online”

Really though, navigator.online will tell you if your user is (probably) on a plane…

if(navigator.onLine) {
// ajax request
} else {
// maybe pull it from offline storage?
}

But I think we can agree, that we can combine these technologies and come up with interesting results

$(window).bind("offline", function() {
$("body").addClass("offline");
});

body.offline
nav#main
{
opacity:
0.9;
}

like make those navigation items look dulled…

We know what users devices are capable of, so lets offer a holistic experience no matter who they are.
Here I told a story about my girlfriends kid brother, who was my best friend in the world after I brought a brand new PSP in HK a few years ago.

A month later, he had one, a week after that I came over to visit, he said something roughly like: ʻhey, so I downloaded some torrented games, cracked the ﬁrmware, what ﬁrmware are you
on?” Our experiences with new mobile devices are going to change us all, no matter where we come from.

“An interface is humane if it is
responsive to human needs and
considerate of human frailties.”

—Jef Raskin, The Humane Interface

Iʼll leave you with this:

The W3C are documenters, not designers, they have no clients. The HTML5 spec is a modest specification—while they are working hard to ensure it does not become an act of fiction and is
well implemented, we, as designers and developers need to take the web for ourselves and build something truly powerful. As content producers we are some of the most powerful people in
the world, we can influence goverenment, save peoples lives in the case of a natural disaster and communicate like we never have before.

Building a better web

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to Building a better web

Similar to Building a better web (20)

Recently uploaded

Recently uploaded (20)

Building a better web