Embed Size (px)
DESCRIPTION
Talk I co-presented with Andy Rutledge, at the Dallas Society of Visual Communications... http://dsvc.org/events/working-lunch/11/2010
Citation preview
of VISUAL COMMUNICATIONS
DALLAS SOCIETY
WHAT YOU MUST KNOW WHEN DESIGNING FOR THE WEB
Andy RutledgePrincipal, Unit Interactive
http://unitinteractive.com
http://andyrutledge.com
Nathan SmithUX Designer / Developer
http://sonspring.com
http://960.gs
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! :)
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! :)
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
http://www.gestalten.com/motion/new-york-times
VIDEO of STEVEN DUENES – GRAPHICS DIRECTOR – THE NEW YORK TIMES
— 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...
THINK BEYOND
“THE FOLD”
Scrollingis okay! :)
http://video.google.com/videoplay?docid=1020647662203348823
http://www.filamentgroup.com/dwpe/
IMAGE SPRITE = SEVERAL IMAGES IN 1 FILE
http://smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
http://www.alistapart.com/articles/responsive-web-design/
http://www.hicksdesign.co.uk/
“RESPONSIVE” LAYOUT — HICKS DESIGN
LIFECHURCH.TV — 2 SITES FOR MOBILE + DESKTOP
http://m.lifechurch.tv/ & http://www.lifechurch.tv/
— 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...
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
http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
BE CONCISE, ESPECIALLY FOR MOBILE...
http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
FIGHT EVIL INFORMATION OVERLOAD...
http://www.sencha.com/products/touch/
— 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 usingeach font legally. Not all foundries allow it.
TYPOGRAPHICAL POSSIBILITIES
http://www.gestalten.com/motion/new-york-times
VIDEO of ARCHIE TSE – GRAPHICS EDITOR – THE NEW YORK TIMES
So basically, be aware of the “rules”
but break them when the situation
calls for it. Design freely. Play jazz!
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
