Tweet
Tweet

Slide 1

Slide 1 text

The primary design principle underlying the Web’s usefulness and growth is universality. The 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—from a silly tweet to a scholarly paper. And it should be accessible from 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

The control which designers know in the print medium, and often 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 flexibility.” —John Allsopp A Dao of Web Design “

Slide 17

Slide 17 text

WYSIWTF

Slide 18

Slide 18 text

No content

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 flexible, but more adaptive to the media that renders them.” —Ethan Marcotte Responsive Web Design “

Slide 24

Slide 24 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 from a canvas in. We need to flip it on its head, and create layouts from the content out.” —Mark Boulton A Richer Canvas “

Slide 25

Slide 25 text

My love for responsive centers around the idea that my website will meet you wherever you are —from mobile to full-blown desktop and anywhere in between.” —Trent Walton Fit To Scale “

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

...squishing down a desktop site.” “ responsive design is...

Slide 28

Slide 28 text

...all about mobile.” “ responsive design is...

Slide 29

Slide 29 text

...a front-end development technique.” “ responsive design is...

Slide 30

Slide 30 text

...fine for documents, but not for web apps.” “ responsive design is...

Slide 31

Slide 31 text

...ignoring context.” “ responsive design is...

Slide 32

Slide 32 text

Mind reading is no way to base fundamental content decisions.” —Mark Kirby The Mobile context “

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

...the only viable approach.” “ responsive design is...