web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that...

32
web design

Upload: others

Post on 27-Jul-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

webdesign

Page 2: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web
Page 3: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

print

Page 4: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

print

Page 5: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

print

Page 6: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

e grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

—Joseph Muller-Brockman

Page 7: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

ough largely forgotten today, methods and rules upon which it is impossible to improe have been developed for centuries. To produce perfect books these rules have to be brought to life.

—Jan Tschichold

Page 8: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

Grid System

+ ThePage

order constraint

control

Page 9: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

web

Page 10: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

control

Page 11: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

TableLayout

TheBrowser

order constraint

control

+

Page 12: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

TheBrowser

no control

Page 13: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

speed

no control

capabilitysize

Page 14: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

size

640 x 480800 x 600

1024 x 768

fixed

Page 15: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

flexible

Page 16: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

e control which designers know in the print medium, and oen 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 AllsoppA Dao of Web Design

Page 17: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

WYSIWYG

Page 18: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

It’s high time we had a grown up User Interface design program, one that understands the nature of the web and the parameters we work under.

—Jason Santa MariaMucking Up the Fireworks

Page 19: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

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 craed static design made in Photoshop or Fireworks.

—Andy ClarkeTime to stop showing clients static design visuals

Page 20: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

contentpresentation

behaviour

Page 21: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web
Page 22: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web
Page 23: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web
Page 24: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web
Page 25: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

CSS hasn’t reolutionised web design. e reason lies not with the technology (which is reolutionary), but with the designers using it. Most designers have simply swapped the old technology (tables and font tags) for the new technology, without fully exploring what’s so completely new.

—Jeremy Keithe Unpushed Envelope

Page 26: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web
Page 27: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

Devices really should be treated as a spectrum (based on capabilities) rather than put into a mobile vs. desktop bin.

—Joaquin Lippincott,Stop! You are doing mobile wrong!

Page 28: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

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 MarcotteResponsive Web Design

Page 29: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

speedcapability

sizeone web

Page 30: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

one web

web silosversus

Page 31: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

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-LeeLong Live the Web

Page 32: web design - adactio.comadactio.com/extras/slides/webdesign.pdf · adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design. speed capability size one web

happybirthday!one web