Slide 1
Slide 1 text
e primary design principle underlying the Web’s
usefulness and growth is universality.
e Web should be usable by people with disabilities.
It must work with any form of information, be it a
document or a point of data, and information of any
quality— om a silly tweet to a scholarly paper.
And it should be accessible om any kind of
hardware that can connect to the Internet:
stationary or mobile, small screen or large.
—Tim Berners-Lee
Long Live the Web
“
”
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
print
Slide 4
Slide 4 text
print
Slide 5
Slide 5 text
print
Slide 6
Slide 6 text
Grid
System
+ The
Page
order constraint
control
Slide 7
Slide 7 text
web
Slide 8
Slide 8 text
control
web
Slide 9
Slide 9 text
Table
Layout
The
Browser
order constraint
control
+
Slide 10
Slide 10 text
CSS The
Browser
order constraint
control
+
Slide 11
Slide 11 text
The
Browser
unknown
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
speed
unknown
capability
size
Slide 14
Slide 14 text
size
640 x 480
800 x 600
1024 x 768
fixed
Slide 15
Slide 15 text
flexible
%
Slide 16
Slide 16 text
e control which designers know in the print
medium, and o en desire in the web medium, is
simply a function of the limitation of the printed page.
We should embrace the fact that the web
doesn’t have the same constraints, and
design for this exibility.”
—John Allsopp
A Dao of Web Design
“
Slide 17
Slide 17 text
WYSIWTF
Slide 18
Slide 18 text
One of the main reasons why many people cling to
the expectation that a web design should look the
same across every browser is that one of the rst
things that designers show them is a carefully cra ed
static design made in Photoshop or Fireworks.”
—Andy Clarke
Time to stop showing clients static design visuals
“
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
speed
capability
size
unknown
Slide 21
Slide 21 text
mobile web
desktop
tablet
Slide 22
Slide 22 text
one web
flexible
Slide 23
Slide 23 text
Rather than tailoring disconnected designs to each of
an ever-increasing number of web devices, we can
treat them as facets of the same experience. We can
design for an optimal viewing experience, but embed
standards-based technologies into our designs to
make them not only more exible, but more
adaptive to the media that renders them.”
—Ethan Marcotte
Responsive Web Design
“
Slide 24
Slide 24 text
clarification
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
mobile
first
Slide 30
Slide 30 text
content
first
Slide 31
Slide 31 text
presentation
behaviour
content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Slide 35
Slide 35 text
Slide 36
Slide 36 text
Slide 37
Slide 37 text
Slide 38
Slide 38 text
Slide 39
Slide 39 text
Slide 40
Slide 40 text
Slide 41
Slide 41 text
[role="main"] {
! width: 61.8034%;
! float: left;
}
[role="complementary"] {
! width: 38.1966%;
! float: right;
}
@media all and (max-width: 60em) {
! [role="main"],
! [role="complementary"] {
! ! width: 50%;
! }
}
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
if ($(document).width() > 640) {
! $.get('path/to/html', function(data) {
! ! $('[role="complementary"]').append(data);
! });
}
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
It’s my belief that in order to embrace designing
native layouts for the web – whatever the device –
we need to shed the notion that we create layouts
om a can as in. We need to ip it on its head, and
create layouts om the content out.”
—Mark Boulton
A Richer Canvas
“
Slide 51
Slide 51 text
web
apps?
Slide 52
Slide 52 text
it depends
Slide 53
Slide 53 text
context
first?
Slide 54
Slide 54 text
Mind reading is no way to base
fundamental content decisions.”
—Mark Kirby
e Mobile context
“
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
My lo e for responsive centers around the idea that
my website will meet you wherever you are
— om mobile to full-blown desktop and anywhere
in between.”
—Trent Walton
Fit To Scale
“
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
one web