[PPT] - Tim Berners-Lee Long Live the Web print print print System + PowerPoint Presentation

SLIDE 1

Te primary design principle underlying the Web’s usefulness and growth is universality. Te 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—fom a silly tweet to a scholarly paper.

And it should be accessible fom 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 3

print

SLIDE 4

print

SLIDE 5

print

SLIDE 6

Grid System + The Page

rder constraint

control

SLIDE 7

web

SLIDE 8

control web

SLIDE 9

Table Layout The Browser

rder constraint

control +

SLIDE 10

CSS

The Browser

rder constraint

control +

SLIDE 11

The Browser

unknown

SLIDE 12

SLIDE 13

speed

unknown

capability

size

SLIDE 14

size

640 x 480 800 x 600 1024 x 768

fixed

SLIDE 15

flexible

%

SLIDE 16

Te control which designers know in the print medium, and ofen 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

WYSIWTF

SLIDE 18

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 first things that designers show them is a carefully crafed static design made in Photoshop or Fireworks.”

—Andy Clarke

Time to stop showing clients static design visuals “

SLIDE 19

SLIDE 20

speed capability

size unknown

SLIDE 21

mobile web desktop tablet

SLIDE 22

ne web

flexible

SLIDE 23

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

clarification

SLIDE 25

SLIDE 26

SLIDE 27

SLIDE 28

SLIDE 29

mobile first

SLIDE 30

content first

SLIDE 31

presentation

behaviour

content

SLIDE 32

SLIDE 33

SLIDE 34

SLIDE 35

SLIDE 36

SLIDE 37

SLIDE 38

SLIDE 39

SLIDE 40

SLIDE 41

[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 43

SLIDE 44

SLIDE 45

SLIDE 46

if ($(document).width() > 640) { ! $.get('path/to/html', function(data) { ! ! $('[role="complementary"]').append(data); ! }); }

SLIDE 47

SLIDE 48

SLIDE 49

SLIDE 50

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 fom a canvas in. We need to flip it on its head, and create layouts fom the content out.”

—Mark Boulton A Richer Canvas

“

SLIDE 51

web apps?

SLIDE 52

it depends

SLIDE 53

context first?

SLIDE 54

Mind reading is no way to base fundamental content decisions.”

—Mark Kirby Te Mobile context

“

SLIDE 55

SLIDE 56

SLIDE 57

SLIDE 58

My love for responsive centers around the idea that

my website will meet you wherever you are

—fom mobile to full-blown desktop and anywhere in between.”

—Trent Walton Fit To Scale

“

SLIDE 59

SLIDE 60

ne web