Designing For The Web - Speaker Deck

Slide 1

Slide 1 text

of VISUAL COMMUNICATIONS DALLAS SOCIETY WHAT YOU MUST KNOW WHEN DESIGNING FOR THE WEB

Slide 2

Slide 2 text

Andy Rutledge Principal, Unit Interactive http://unitinteractive.com http://andyrutledge.com Nathan Smith UX Designer / Developer http://sonspring.com http://960.gs

Slide 3

Slide 3 text

Today, we’d like to share a few gotchas that we think are good to keep in mind when making the transition from designing for print, to designing for the web. Note: We’re not print guys. So bear with us if we can’t recite what exactly CMYK stands for! :)

Slide 4

Slide 4 text

Everything we cover today can be thought of like learning to play sheet music. Once you get the basics, then you can break the rules and play jazz. But know how/when to do it! :)

Slide 5

Slide 5 text

DESIGNING FOR THE WEB, IN GENERAL... — Art is meant to be appreciated — Design is meant to be used — Make links distinctive from content — Use color with purpose & meaning — A page is not a “page” but an experience — Consider the file size of images & code — Accept the fact everything is a rectangle — Use “real” copywriting when possible — Lorem ipsum is not real content — Be terse, but also... — Design for discoverability & exploration

Slide 6

Slide 6 text

http://www.gestalten.com/motion/new-york-times VIDEO of STEVEN DUENES – GRAPHICS DIRECTOR – THE NEW YORK TIMES

Slide 7

Slide 7 text

— Don’t focus only “above the fold” — Don’t forget about :hover for links — Resist over-using :hover or animations — Consider placing content on a grid — Be aware users will change things... — Either via text resizing, or — Full-page zooming — Plan for contingencies: form errors, etc. — Plan for both keyboard & mouse navigation DESIGNING FOR THE WEB, ON DESKTOP...

Slide 8

Slide 8 text

THINK BEYOND “THE FOLD”

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Scrolling is okay! :)

Slide 12

Slide 12 text

http://video.google.com/videoplay?docid=1020647662203348823

Slide 13

Slide 13 text

http://www.filamentgroup.com/dwpe/

Slide 14

Slide 14 text

IMAGE SPRITE = SEVERAL IMAGES IN 1 FILE http://smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Slide 15

Slide 15 text

http://www.alistapart.com/articles/responsive-web-design/

Slide 16

Slide 16 text

http://www.hicksdesign.co.uk/ “RESPONSIVE” LAYOUT — HICKS DESIGN

Slide 17

Slide 17 text

LIFECHURCH.TV — 2 SITES FOR MOBILE + DESKTOP http://m.lifechurch.tv/ & http://www.lifechurch.tv/

Slide 18

Slide 18 text

— You cannot rely on :hover — Don’t forget about :active link state — Fetching files taxes the battery — Only present the most pertinent info — Don’t try to emulate “native” 100% — Consider size of user’s fingertip(s) — Compress images — Minify CSS and JavaScript files — Avoid JavaScript animations — JS runs much slower on mobile — position:fixed - doesn’t work — overflow:auto/scroll - doesn’t work DESIGNING FOR THE WEB, ON MOBILE...

Slide 19

Slide 19 text

http://www.trentwalton.com/2010/07/05/non-hover/ Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo- class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone. — Apple Reference Library

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html BE CONCISE, ESPECIALLY FOR MOBILE...

Slide 22

Slide 22 text

http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html FIGHT EVIL INFORMATION OVERLOAD...

Slide 23

Slide 23 text

http://www.sencha.com/products/touch/

Slide 24

Slide 24 text

http://www.jquerymobile.com/

Slide 25

Slide 25 text

— sIFR = Uses Flash for custom fonts — Cufón = Uses JavaScript for custom fonts — CSS3 features — text-shadow — letter-spacing — line-height, etc. — @font-face (font embedding) — Google Font API — Font Squirrel — Typekit With font embedding, be sure you’re using each font legally. Not all foundries allow it. TYPOGRAPHICAL POSSIBILITIES

Slide 26

Slide 26 text

http://code.google.com/webfonts

Slide 27

Slide 27 text

http://www.fontsquirrel.com/

Slide 28

Slide 28 text

http://www.typekit.com/

Slide 29

Slide 29 text

http://www.gestalten.com/motion/new-york-times VIDEO of ARCHIE TSE – GRAPHICS EDITOR – THE NEW YORK TIMES

Slide 30

Slide 30 text

So basically, be aware of the “rules” but break them when the situation calls for it. Design freely. Play jazz!

Slide 31

Slide 31 text

ANY FURTHER QUESTIONS? Andy Rutledge TWITTER: http://twitter.com/andyrutledge CONTACT: http://andyrutledge.com/about.php Nathan Smith TWITTER: http://twitter.com/nathansmith CONTACT: http://sonspring.com/contact GET THESE SLIDES... http://slideshare.net/nathansmith/dsvc-design-talk