Future Proof

Chris Corwin

Future Proof

Web Design

(hi)

It’s basically awful.Billions of internet documents are a hodgepodge of messy code.

Future Proof

Can’t we just beat them?A internet made of of websites made of pages like this is hard to keep happy.

Future Proof

O NOEZ! CLOGGY TUBEZ!The pages eat bandwidth, making the internet slow.

Future Proof

It’s not like a

truck.

I know I saw it here somewhere.They are hard for search engines to index.

Future Proof

*blink*They use too much code to provide too little meaningful information.

Future Proof

EPIC FAILThey break in old browsers.

Future Proof

SuboptimalThey break in newer browsers.

Future Proof

Sheesh.I mean, come ON.

Future Proof

Parse this.Useless, presentational instructions are mixed with actual, useful, information.

Future Proof

Remember PageMaker?Text to be read by the user is thrown in anywhere, in order to make it be in the right place on the page.

It should be where it makes sense in the document’s flow.

Future Proof

I’m supposed to USE this?Information that could be used gets all mixed in with useless presentation markup.

Future Proof

One day, all of this will die.And the web will be teh awsum.

But it will take developers like you and I to do it.

Future Proof

Some examples you already know.

bold text

does not equal

strong emphasis

Future Proof

italic text

does not equal

light emphasis

Future Proof

Some examples you already know.

Today I’m going to address steps you can take, this year, to try and make the internet better in three years, and beyond.

If you don’t, it will suck more later.

Just sayin.

Future Proof

What I’m going to address today.

We’ll talk just a bit about how we got this mess.

Future Proof

Where we’ve been

Dear Al Gore,

Bite me.

We’ll do spend some time in deep thought about how the mess might get cleaned up.

Future Proof

Where we are going

And we’ll talk a bit about what happens when the internet learns to think and retroactively becomes god and wipes us all out over that whole “goatse” thing.

Future Proof

The very long term

Future Proof

History

(get it? huh? get it? edit history! hahaha!)

Future Proof

It used to be more simple

The world wide web used to walk uphill, both ways, to get to school.

Future Proof

It used to be more simple

(but it was still a menace)

Gosh!

Future Proof

Unfortunately, no one can be told what bad HTML is...

We had no choice but to “abuse” HTML, if we wanted pages that looked okay.

Future Proof

Those pesky buggers

And clients increasingly demanded “good looking” web pages.

Future Proof

Browser Wars

And then the bad old days where no two browsers showed you the same thing.

Ugh.

Future Proof

Then, web developers got religion

Along came the “web standards” movement.

Future Proof

A brief history of web design.

We banded together in glorious harmony, unanimous in voice, and the browser developers almost instantly brought out fantastic tools that all behaved marvelously.

Or, um, something like that.

Snarky snark snark.

Future Proof

It got all complicated

Building a website became more like building a house than building a brochure.

Future Proof

Shiny is good!

One day, seemingly overnight, AJAX showed up and we were all making “web apps” instead of “web pages.”

Future Proof

Blargs

There’s also the blog thing.

Lots of, um, people “publishing” lots of information in, well, less than optimal ways for search engine optimaliness.

Future Proof

It’s just too big

There is too much information on the internet for it to be found easily.

In the future, our searches will work better.

Future Proof

Wanted: Wisdom

Basically, what we should strive for is a web that knows about itself, and which can put the stuff we want in front of us, intelligently.

Future Proof

Wanted: Wisdom

Basically, what we should strive for is a web that knows about itself, and which can put the stuff we want in front of us, intelligently.

(ideally without, like, destroying us all)

Future Proof

Wanted: Wisdom

When we ask the Google for a bit of information, it’d be best if the Google had a clue what it is we meant.

Future Proof

Wanted: The Semantic Web

Eventually, search engines should glean wisdom from our pages.

We can start to give them clues, today.

Future Proof

It’ll take a miracle

Good Standards

Semantic Markup

Presentational CSS

Future Proof

Side Effects

Accessibility

Intelligently Designed Apps

World Peace

Future Proof

Standards

(if you can read this, you’re upside-down)

Future Proof

Standards: Doctypes

Short version: XHTML considered evil bad harmful inadequate dumb passé.

Start using HTML 5’s doctype.

Future Proof

Standards: Doctypes

Short version: XHTML considered evil bad harmful inadequate dumb passé.

Start using HTML 5’s doctype.

(gloss over the controversy)

Future Proof

Sad:

This was originally written in September 2002 in the context of this Web log entry:

http://ln.hixie.ch/?start=1031465247&count=1

It has since been regularly updated to correct errors that have been brought up in various mailing lists and other discussion forums. As of 2007, it is still just as relevant as when it was originally written.

Future Proof

HTML 5 Is the New Hotness

It’s got better forms, it’s got a built-in database, vector animations, media tags, and it allows semantic markup in sexy new ways.

If HTML 5 were a

person...

Future Proof

HTML 5 WILL SAVE THE UNIVERSE

AND you can begin to use parts of it now.

(!)

No really! It’s safe!

Future Proof

HTML 5 Doctype

“What's nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode - even though they don't implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.”

— John Resig

<!DOCTYPE html>

Future Proof

HTML 5: Forms

This form won’t break

now.

And will “just work” in HTML 5

Required!

Valid typing!

Future Proof

HTML 5: Forms

And you’ll be able to style

based on validation

rules.

Future Proof

HTML 5: Forms

How it looks now.

Future Proof

HTML 5: Forms

How it could in HTML 5

Microformats

Future Proof

Standards

(sensing a theme?)

Future Proof

Microformats

A microformat is a web-based approach to semantic markup that seeks to re-use existing XHTML and HTML tags to convey metadata and other attributes. This approach allows information intended for end-users (such as contact information, geographic coordinates, calendar events, and the like) to also be automatically processed by software.

http://en.wikipedia.org/wiki/Microformat

Wait, what?

Future Proof

Geo

It’s human readable.

It’s machine readable.

FTW.

Future Proof

vCard

It’s human readable.

It’s machine readable.

FTW.

Future Proof

vEvent

It’s human readable.

It’s machine readable.

FTW.

Future Proof

A Bulleted List:

• Tagging

• Relationships between people

• Lists

• Instructions for page-rank weighting

• Calendaring

Marking up for semanticism.

Future Proof

Semantics

(yes, that’s a real word. yes i made it up. all words are made up)

Future Proof

It’s way more than just semantics

Scripts and search engines will be able to glean information about your content, if you take the time to mark it up well.

Future Proof

4

Future Proof

5

Future Proof

<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer></body>

Future Proof

Tables are not evil

Tables are fine to use.

They’re perfect for tabular data.

Future Proof

You must unlearn what you have learned.

Use a table if you would display the stuff in a spread sheet.

That’s what they’re for.

(yeah, but will it blend?)

Future Proof

You can, like, quote people:

Future Proof

Things that are not paragraphs.

Unordered lists are the single most flexible tool in your markup belt.

Future Proof

Lists do it better

The UL should be your navbar.

There, I said it.

Future Proof

I %@#$ING HATE FORMS

But even they should be semantic.

Future Proof

I %@#$ING HATE FORMS

But: they can be pretty and semantic, without tables.

No, really.

Future Proof

Boiling it down

Make your markup describe your content.

There’s a point?

Future Proof

When you’re contenting:

Do not mark up for where it sits on the page.

Do not even think about where it sits on the page.

Future Proof

Think semantic

Put tags around your junk to tell computers what your junk is.

Future Proof

Think long term

Your great grand children’s kids will thank you for it.

Even Harrison Ford got old.

NOW you can put it somewhere.

Future ProofPresentational CSS

(A Møøse once bit my sister...)

Future Proof

Using CSS Properly

You can do it.

Future Proof

Use a framework

Any framework will do.

Future Proof

Stick with it

Unless you hate the framework you settled on, keep at it.

Future Proof

Yeah yeah yeah

I have heard it before.

There are gobs of reasons why you haven’t gotten around to writing valid, semantic, HTML and used only CSS to style it.

So?

Future Proof

Don’t be stupid

Do not try to re-invent a layout system every time you start a new site.

That’s stupid.

Future Proof

Grids are Good

A grid-based layout is not always the best solution to your layout problem.

But you should probably try to force fit it anyway, unless you have a really good reason not to.

Future Proof

Which grid?

There’s lots of them.

Do your own bleeping research.

Future Proof

I’m not the first person to tell you this.

At this point, you should probably just go get the “Grids are Good” paper.