Future Proof Web Design
-
Upload
berbercarpet -
Category
Technology
-
view
2.463 -
download
2
Transcript of Future Proof Web Design
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.