Slide 1
Slide 1 text
Post-modern
Web Design
with your guide
Kevin Suttle
Slide 2
Slide 2 text
FAIR W
ARNING
Flash, canvas,
audio, and
video will not
be covered.
Slide 3
Slide 3 text
mY GOAL
To bring us up to speed
Slide 4
Slide 4 text
MY MOTIV
ATION
Slide 5
Slide 5 text
Onl
y two things are infinite, the universe and human
stupidity, and I'm not sure about the former.
- Albert Einstein
Slide 6
Slide 6 text
"Anytime I see a movie or a TV show where there
are people from the future or another planet,
they're all wearing the same outfit. Somehow
they all decided, 'All right, that's enough. From
now on, this is going to be our outfit: one-piece
sil
ver jumpsuit with a V-stripe on the chest and
boots. That's it. We're going to start visiting
other planets and we w
ant to look like a team.'"
- Jerry Seinfeld
Slide 7
Slide 7 text
We're just a fold-up briefcase fl
ying car a
w
a
y
from being the Jetsons.
We have robot maids, video phones, and instant meals in packets.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
2006
five years ago
Slide 10
Slide 10 text
2006
five years ago
Slide 11
Slide 11 text
The next generation
Slide 12
Slide 12 text
Living document
Dropping the 5
Slide 13
Slide 13 text
the year 2022
A bit of a miscommunication
Slide 14
Slide 14 text
breaking it down
Little by little
Slide 15
Slide 15 text
Why should i care?
Because it matters right now
Slide 16
Slide 16 text
the new hotness
Let’s dig in
Slide 17
Slide 17 text
the new hotness
Doctype
Old and busted
Fresh
Doctypes are for validators, not people, and not browsers.
Slide 18
Slide 18 text
the new hotness
Meta tags
Old and busted
Fresh
Slide 19
Slide 19 text
the new hotness
JavaScript and CSS
Old and busted
Fresh
HTML(5) is a huge step forward in web development user experience.
Old and busted
Fresh
Slide 20
Slide 20 text
the new hotness
Root element
Old and busted
Fresh
Slide 21
Slide 21 text
the new hotness
Choice of syntax
This can be good or bad. Just be consistent.
![]()
![]()
![]()
![]()
Slide 22
Slide 22 text
the new hotness
Nesting elements inside links
360 Flex Denver
360 Flex Denver
Check out the event details!
Old and busted FreshSlide 23
Slide 23 text
the new hotness
Semantics
Slide 24
Slide 24 text
the new hotness
Nav tag
Text
Navigation
Main navigation intended for a single page.Slide 25
Slide 25 text
the new hotness
Article tag
Text
The Very First Rule of Life
If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.
...
Self-contained composition, intended to be individually distributed.Slide 26
Slide 26 text
the new hotness
Aside tag
Text
Switzerland
Switzerland, a land-‐locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.
Content separate from the main content (typically sidebars)Slide 27
Slide 27 text
the new hotness
Content models
Text
Sectioning elements: “Content that de nes the scope of headings and footers.”
Sectioning “roots”:
Slide 28
Slide 28 text
the new hotness
Header and footer
“A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents, a
search form, or any relevant logos.”
![]()
Mike’s Mechanics
Free quotes!For when all you need is a miracle.
Like us on Facebook Copyright © 2011, Mike’s MechanicsTell your friends
“When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”Slide 29
Slide 29 text
the new hotness
*Multiple hierarchies in the form of Content models
Text
-‐
can be used multiple times in a single document using is the delimiter “The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections.”
Slide 30
Slide 30 text
the new hotness
*Multiple hierarchies in the form of content models
Text
produces the following in browsers that respect the outline algorithm
My favorite music
Artists
Bands and artists who make up my collection.
DJ Shadow
The godfather of modern instrumental hip-‐hop
Prefuse-‐73
The man of many aliases. All of them great.
My favorite music -Artists - DJ Shadow - Prefuse-73Slide 31
Slide 31 text
the new hotness
Links for understanding the new content model
Text
http://gsnedders.html5.org/outliner/
http://chrispederick.com/work/web-developer/
http://code.google.com/p/h5o/
http://www.456bereastreet.com/archive/201103/
html5_sectioning_elements_headings_and_document_outlines/
http://www.w3.org/TR/html5/sections.html#outline
Slide 32
Slide 32 text
ACcessible rias
More semantic means more accessible
role="search"
(search
form)
role="banner"
(masthead)
role="contentinfo"
(footer)
ARIA Roles
Slide 33
Slide 33 text
The best approach
How to know if you can use the new bits right now
Slide 34
Slide 34 text
detect features
There’s no such thing as detecting ‘HTML5’
The good news: using HTML5 bits is possible, even in older browsers
The bad news: It requires JavaScript
Slide 35
Slide 35 text
http://modernizer.com
Slide 36
Slide 36 text
modernizr
Feature detection > Browser snif ng
if
(Modernizr.canvas)
{
//
create
some
cool
canvas-‐y
stuff
}
else
{
//
canvas
not
supported
}
Slide 37
Slide 37 text
HTML5shim
a.k.a “HTML5shiv”
https://code.google.com/p/html5shim/
Slide 38
Slide 38 text
There is so much more
Thankfully the web exists
local
storage
offline
storage
HTML5
databases
(indexDB)
history
APIs
undo
APIs
web
forms
viewports
microdata
and
granular
semantics
drag
and
drop
geolocation
messaging
web
workers/sockets
Slide 39
Slide 39 text
There is so much more
Thankfully books exist
http://diveintohtml5.org/
http://introducinghtml5.com/
http://www.abookapart.com/products/html5-‐for-‐
web-‐designers
Slide 40
Slide 40 text
Css3
Learn it. Love it. Live it.
Slide 41
Slide 41 text
lessening reliance
On images, JS, and system fonts
Slide 42
Slide 42 text
new hotness
Lots to love in CSS3
Slide 43
Slide 43 text
Borders
Who knew they could be so exciting?
border-‐color
border-‐image
border-‐radius
box-‐shadow
Slide 44
Slide 44 text
Border-color
Who knew they could be so exciting?
border:
8px
solid
#000;
-‐moz-‐border-‐bottom-‐colors:
#555
#666
#777
#888
#999
#aaa
#bbb
#ccc;
-‐moz-‐border-‐top-‐colors:
#555
#666
#777
#888
#999
#aaa
#bbb
#ccc;
-‐moz-‐border-‐left-‐colors:
#555
#666
#777
#888
#999
#aaa
#bbb
#ccc;
-‐moz-‐border-‐right-‐colors:
#555
#666
#777
#888
#999
#aaa
#bbb
#ccc;
padding:
5px
5px
5px
15px;
Slide 45
Slide 45 text
Border-image
Picture this
border-‐image:
border-‐top-‐image
border-‐right-‐image
border-‐bottom-‐image
border-‐left-‐image
border-‐corner-‐image:
border-‐top-‐left-‐image
border-‐top-‐right-‐image
border-‐bottom-‐left-‐image
border-‐bottom-‐right-‐image
border-‐image:
url(border-‐image.png)
25%
repeat;
Slide 46
Slide 46 text
Border-image
Example
Slide 47
Slide 47 text
Rounded borders
It’s about time
.colophon
{
-‐webkit-‐border-‐radius:
10px;
-‐moz-‐border-‐radius:
10px;
border-‐radius:
10px;
}
border-‐bottom-‐left-‐radius,
border-‐bottom-‐right-‐radius,
border-‐top-‐left-‐radius,
border-‐top-‐right-‐radius
Slide 48
Slide 48 text
Rounded borders
Examples
Slide 49
Slide 49 text
SHADOWs
Box-shadow
#colophon
{
-‐moz-‐box-‐shadow:
10px
10px
5px
#999;
-‐webkit-‐box-‐shadow:
10px
10px
5px
#999;
box-‐shadow:
10px
10px
5px
#999;
}
Slide 50
Slide 50 text
SHADOWs
Text-shadow
#colophon
a:link
{
text-‐shadow:
10px
10px
5px
#999;
}
Slide 51
Slide 51 text
attribute Selectors
Lookout regex and jQuery
p[title*="bout"]
{background:
blue;}
p[title^="con"] {background: red;}
p[title$="g"] {background: black;}
Slide 52
Slide 52 text
Multiple backgrounds
Again, it’s about time
header
{
background:
url(image1.png)
no-‐repeat
top
left,
url(image2.png)
repeat-‐x
bottom
left,
url(image3.png)
repeat-‐y
top
right;
}
Slide 53
Slide 53 text
the rest of the new hotness
Lots of CSS goodness
opacity
background:
rgb(255,
235,
0)
;
opacity:
0.5;
background:
rgba(255,
235,
0,
0.5);
-‐moz-‐column-‐count:
3;
-‐moz-‐column-‐gap:
1em;
-‐moz-‐column-‐rule:
1px
solid
black;
-‐webkit-‐column-‐count:
3;
-‐webkit-‐column-‐gap:
1em;
-‐webkit-‐column-‐rule:
1px
solid
black;
option
2
-‐moz-‐column-‐width:
13em;
-‐webkit-‐column-‐width:
13em;
-‐moz-‐column-‐gap:
1em;
-‐webkit-‐column-‐gap:
1em;
Color properties
Multi-column layouts
Slide 54
Slide 54 text
the rest of the new hotness
A little bit more obscure
text-‐overflow:
ellipsis-‐word;
word-‐wrap:
break;
Text properties
Slide 55
Slide 55 text
the rest of the new hotness
A little bit more obscure
box-‐sizing
-‐moz-‐box-‐sizing
-‐webkit-‐box-‐sizing
Layout UI
content-‐box
(default)
border-‐box
Allows you to calculate the non-content boxes inside the content area size
Values
Slide 56
Slide 56 text
the rest of the new hotness
A little bit more obscure
.box
{
width:
100px;
height:
100px;
border:
1px
solid;
resize:
both;
Layout UI
horizontal
vertical
both
inherit
Values
Slide 57
Slide 57 text
the rest of the new hotness
A little bit more obscure
#voice-‐volume
{
-‐xv-‐voice-‐volume:
x-‐soft;
-‐xv-‐voice-‐balance:
right;
}
#voice-‐balance
{
-‐xv-‐voice-‐balance:
left;
}
#speech-‐cue
{
cue-‐after:
url(ding.wav);
}
#voice-‐rate
{
-‐xv-‐voice-‐rate:
x-‐slow;
}
#voice-‐family
{
voice-‐family:
female;
}
#voice-‐pitch
{
-‐xv-‐voice-‐pitch:
x-‐low;
}
#speech-‐speak
{
speak:
spell-‐out;
}
Speech
Wonderful for accessibility, great for screen readers
Slide 58
Slide 58 text
web fonts
You don’t have to rely on Arial and Times New Roman
@font-‐face
{
font-‐family:
Delicious;
src:
url('Delicious-‐Roman.otf');
}
@font-‐face
{
font-‐family:
Delicious;
font-‐weight:
bold;
src:
url('Delicious-‐
Bold.otf');
}
You DO, however, have to deal with licensing if you don’t own the font
Slide 59
Slide 59 text
web fonts
Slide 60
Slide 60 text
web fonts
Slide 61
Slide 61 text
web fonts
http://code.google.com/webfonts
Slide 62
Slide 62 text
web fonts
How to know when a site uses them
Slide 63
Slide 63 text
web fonts
How to know when a site uses them
Slide 64
Slide 64 text
When you can use css3
Right friggin’ now
We can start using many of these techniques today.
Not 2022, not 5 years from now. Today.
Vendor pre xes like -‐moz and -‐webkit are a good thing, relatively speaking.
We have the box model to thank.
The spec doesn’t work like you think. Browsers push the implementations
individually.
Slide 65
Slide 65 text
what if they don’t look the same?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Slide 66
Slide 66 text
responsive web design
Hail media queries
Slide 67
Slide 67 text
responsive web design
The answer to all our problems?
Fact: Media queries were not introduced in CSS3
Ethan Marcotte (@beep) is credited as popularizing this technique of
dealing with varying screen sizes.
/*
Smartphones
(portrait
and
landscape)
-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐
*/
@media
only
screen
and
(min-‐device-‐width
:
320px)
and
(max-‐device-‐width
:
480px)
{
/*
Styles
*/
}
/*
Smartphones
(landscape)
-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐
*/
@media
only
screen
and
(min-‐width
:
321px)
{
/*
Styles
*/
}
/*
Smartphones
(portrait)
-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐
*/
@media
only
screen
and
(max-‐width
:
320px)
{
/*
Styles
*/
Slide 68
Slide 68 text
responsive web design
The answer to all our problems?
Slide 69
Slide 69 text
Buckle up
Lecture time
Slide 70
Slide 70 text
responsive web design
The answer to all our problems?
"Do we just adhere to the original article and serve the largest
images to all devices, scaling as needed?
Do we use a server technology and serve multiple images based on resolution?
There are 3 major problems with both of these as solutions.
1. Bandwidth intensive for mobile
2. They're hacks at best.
3. I'll come back to this
Slide 71
Slide 71 text
a question of context
Should it be “one web”?
There are 2 sides: those who believe there should be separate sites
and domains for each context and the RWD "one web" group who believe
there is no such thing as "mobile web" anymore.
Slide 72
Slide 72 text
a question of context
What about mobile?
Bottom line: mobile rst.
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
dispelling myths
It’s not just Webkit
6% U.S. market share for iPhone, < 4% globally
“The most popular devices don’t necessarily translate to the most used devices.”
-@bryanreiger
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://gs.statcounter.com
OperaMini is more widely used than any other because it’s a proxy browser,
making it usable on older devices
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
dispelling myths
It’s not just Webkit
6% U.S. market share for iPhone, < 4% globally
“The most popular devices don’t necessarily translate to the most used devices.”
-@bryanreiger
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://gs.statcounter.com
OperaMini is more widely used than any other because it’s a proxy browser,
making it usable on older devices
Slide 77
Slide 77 text
back to media queries
Is RWD the answer?
Slide 78
Slide 78 text
global guidelines
Mobile- rst +
Slide 79
Slide 79 text
be sensible
Look at the hard data
Use technologies for what they were meant to do.
Keep things performant, limit HTTP requests.
Check your analytics, do user research.
By this new frontier of web design, web language professionals can push
the limits of creativity and work with browser vendors in tandem,
helping the new era of web design evolve.
Slide 80
Slide 80 text
thank you
image credits:
DryRoastedBlend.com