Future Proof Web Design

80
Future Proof

Transcript of Future Proof Web Design

Page 1: Future Proof Web Design

Future Proof

Page 2: Future Proof Web Design

Chris Corwin

Future Proof

Web Design

(hi)

Page 3: Future Proof Web Design

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

Future Proof

Page 4: Future Proof Web Design

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

Future Proof

Page 5: Future Proof Web Design

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

Future Proof

It’s not like a

truck.

Page 6: Future Proof Web Design

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

Future Proof

Page 7: Future Proof Web Design

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

Future Proof

Page 8: Future Proof Web Design

EPIC FAILThey break in old browsers.

Future Proof

Page 9: Future Proof Web Design

SuboptimalThey break in newer browsers.

Future Proof

Page 10: Future Proof Web Design

Sheesh.I mean, come ON.

Future Proof

Page 11: Future Proof Web Design

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

Future Proof

Page 12: Future Proof Web Design

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

Page 13: Future Proof Web Design

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

Future Proof

Page 14: Future Proof Web Design

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

Page 15: Future Proof Web Design

Some examples you already know.

bold text

does not equal

strong emphasis

Future Proof

Page 16: Future Proof Web Design

italic text

does not equal

light emphasis

Future Proof

Some examples you already know.

Page 17: Future Proof Web Design

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.

Page 18: Future Proof Web Design

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

Future Proof

Where we’ve been

Dear Al Gore,

Bite me.

Page 19: Future Proof Web Design

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

Future Proof

Where we are going

Page 20: Future Proof Web Design

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

Page 21: Future Proof Web Design

Future Proof

History

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

Page 22: Future Proof Web Design

Future Proof

It used to be more simple

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

Page 23: Future Proof Web Design

Future Proof

It used to be more simple

(but it was still a menace)

Gosh!

Page 24: Future Proof Web Design

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.

Page 25: Future Proof Web Design

Future Proof

Those pesky buggers

And clients increasingly demanded “good looking” web pages.

Page 26: Future Proof Web Design

Future Proof

Browser Wars

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

Ugh.

Page 27: Future Proof Web Design

Future Proof

Then, web developers got religion

Along came the “web standards” movement.

Page 28: Future Proof Web Design

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.

Page 29: Future Proof Web Design

Future Proof

It got all complicated

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

Page 30: Future Proof Web Design

Future Proof

Shiny is good!

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

Page 31: Future Proof Web Design

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.

Page 32: Future Proof Web Design

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.

Page 33: Future Proof Web Design

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.

Page 34: Future Proof Web Design

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)

Page 35: Future Proof Web Design

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.

Page 36: Future Proof Web Design

Future Proof

Wanted: The Semantic Web

Eventually, search engines should glean wisdom from our pages.

We can start to give them clues, today.

Page 37: Future Proof Web Design

Future Proof

It’ll take a miracle

Good Standards

Semantic Markup

Presentational CSS

Page 38: Future Proof Web Design

Future Proof

Side Effects

Accessibility

Intelligently Designed Apps

World Peace

Page 39: Future Proof Web Design

Future Proof

Standards

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

Page 40: Future Proof Web Design

Future Proof

Standards: Doctypes

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

Start using HTML 5’s doctype.

Page 41: Future Proof Web Design

Future Proof

Standards: Doctypes

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

Start using HTML 5’s doctype.

(gloss over the controversy)

Page 42: Future Proof Web Design

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.

Page 43: Future Proof Web Design

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

Page 44: Future Proof Web Design

Future Proof

HTML 5 WILL SAVE THE UNIVERSE

AND you can begin to use parts of it now.

(!)

No really! It’s safe!

Page 45: Future Proof Web Design

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>

Page 46: Future Proof Web Design

Future Proof

HTML 5: Forms

This form won’t break

now.

And will “just work” in HTML 5

Required!

Valid typing!

Page 47: Future Proof Web Design

Future Proof

HTML 5: Forms

And you’ll be able to style

based on validation

rules.

Page 48: Future Proof Web Design

Future Proof

HTML 5: Forms

How it looks now.

Page 49: Future Proof Web Design

Future Proof

HTML 5: Forms

How it could in HTML 5

Page 50: Future Proof Web Design

Microformats

Future Proof

Standards

(sensing a theme?)

Page 51: Future Proof Web Design

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?

Page 52: Future Proof Web Design

Future Proof

Geo

It’s human readable.

It’s machine readable.

FTW.

Page 53: Future Proof Web Design

Future Proof

vCard

It’s human readable.

It’s machine readable.

FTW.

Page 54: Future Proof Web Design

Future Proof

vEvent

It’s human readable.

It’s machine readable.

FTW.

Page 55: Future Proof Web Design

Future Proof

A Bulleted List:

• Tagging

• Relationships between people

• Lists

• Instructions for page-rank weighting

• Calendaring

Page 56: Future Proof Web Design

Marking up for semanticism.

Future Proof

Semantics

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

Page 57: Future Proof Web Design

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.

Page 58: Future Proof Web Design

Future Proof

4

Page 59: Future Proof Web Design

Future Proof

5

Page 60: Future Proof Web Design

Future Proof

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

Page 61: Future Proof Web Design

Future Proof

Tables are not evil

Tables are fine to use.

They’re perfect for tabular data.

Page 62: Future Proof Web Design

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?)

Page 63: Future Proof Web Design

Future Proof

You can, like, quote people:

Page 64: Future Proof Web Design

Future Proof

Things that are not paragraphs.

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

Page 65: Future Proof Web Design

Future Proof

Lists do it better

The UL should be your navbar.

There, I said it.

Page 66: Future Proof Web Design

Future Proof

I %@#$ING HATE FORMS

But even they should be semantic.

Page 67: Future Proof Web Design

Future Proof

I %@#$ING HATE FORMS

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

No, really.

Page 68: Future Proof Web Design

Future Proof

Boiling it down

Make your markup describe your content.

There’s a point?

Page 69: Future Proof Web Design

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.

Page 70: Future Proof Web Design

Future Proof

Think semantic

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

Page 71: Future Proof Web Design

Future Proof

Think long term

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

Even Harrison Ford got old.

Page 72: Future Proof Web Design

NOW you can put it somewhere.

Future ProofPresentational CSS

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

Page 73: Future Proof Web Design

Future Proof

Using CSS Properly

You can do it.

Page 74: Future Proof Web Design

Future Proof

Use a framework

Any framework will do.

Page 75: Future Proof Web Design

Future Proof

Stick with it

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

Page 76: Future Proof Web Design

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?

Page 77: Future Proof Web Design

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.

Page 78: Future Proof Web Design

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.

Page 79: Future Proof Web Design

Future Proof

Which grid?

There’s lots of them.

Do your own bleeping research.

Page 80: Future Proof Web Design

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.