No content

Obligatory “WHO IS THIS PERSON TALKING” slide Tracy Apps (yes. my last name is apps) @tapps # I USE H A S H TAG SI N E M A I L S

But enough about me… BLAH BLAH BLAH

Responsive? WHAT DO ES I T ME A N? #D OU BLERAIN BOW BOM B

– W I K I P E D I A “Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling— across a wide range of devices (from mobile phones to desktop computer monitors)”

– M E “Responsive web design (RWD) optimizes the site to look the best in whatever device (mobile, tablet or desktop) you’re using… all using the same code.”

– M E “Responsive web design (RWD) is pretty much the coolest thing. ever.” #ERMAHGERDRESPONSIVEDESIGN

For example T H I S W E B S I T E : f i s t o f a n g s t . c o m # FI S TO FA N G ST

T H E H T M L C O D E is exactly the same

but the CSS U S E S M E D I A Q U E R I E S TO D I S P L AY T H E E L E M E N T S D I F F E R E N T LY W H E N T H E B R OW S E R W I D T H I S D I F F E R E N T

U S E S M E D I A Q U E R I E S TO D I S P L AY T H E E L E M E N T S D I F F E R E N T LY W H E N T H E B R OW S E R W I D T H I S D I F F E R E N T ! ! I F T H I S … T H E N D O T H I S … but the CSS I F : I F : I F : T H E N D O T H I S S T U F F … T H E N D O T H I S S T U F F … T H E N D O T H I S S T U F F …

@media types: • aural • braille • handheld • print • projection ! ! • screen • tty • tv • all dimensions: • min-width • max-width • min-height • max-height ! ! • min-device-width • max-device-width • min-device-height • max-device-height orientation: • orientation:portrait • orientation:landscape ! resolution: • min-resolution • max-resolution ! aspect ratio: • aspect-ratio • device-aspect-ratio ! color: • color • min-color-index • color-index • monochrome w3.org/TR/css3-mediaqueries #MEDIAQUERYALLTHETHINGS

Design responsively? OK, OK. THAT’S A LOT. I GET IT. SO NOW HOW DO I #A IN TNO BO DY GOTTIME F ORT HAT HERE’S TEN TIPS FOR YOU.

one: Actually use your mobile device A N D TA K E N OT E S .

No content

BE AWARE OF HARD TO REACH SPOTS ON THE PHONE. N OT I C E T H E S E “ B L I N D S P OT S ” C H A N G E D E P E N D I N G O N H OW YO U HOLD THE DEVICE. NOW PRETEND THIS IS A FUN PUZZLE. YAY. #P UZZ LESA RE FU N ! ! UXMATTERS » HOW DO USERS REALLY HOLD MOBILE DEVICES

two: Kill trees.* O R U S E A C H A L K B OA R D I F YO U L I K E T R E E S . *disclaimer: i actually like trees. but i will always love me some sticky notes. and bacon. always bacon.

two: Kill trees.* Draw it out N E W TO O L S H E L P I N G U S G E T B AC K TO S K E T C H I N G AppSeed (Kickstarter) SketchBook® Pro (tablet app) (etc.)

three: Get away from the computer. H E R E ’ S T H AT E X C U S E TO B U Y A H A M M O C K . YO U K N OW … F O R B U S I N E S S P U R P O S E S .

four: Start simple. Build up. S TA RT S I M P L E W I T H M O B I L E . G O C R A Z Y A F T E RWA R D S

four: Start simple. Build up. S TA RT S I M P L E W I T H M O B I L E . G O C R A Z Y A F T E RWA R D S

five: Organize instead of hiding… R E M E M B E R YO U R “ M O B I L E O N LY ” U S E R S . D O N ’ T J U S T H I D E C O N T E N T U N D E R T H E B E D . .JUNK {DISPLAY:NONE;}

five.2: …unless done correctly C O N S I D E R DATA R AT E S A N D C O N N E C T I O N S P E E D . H I D I N G S T U F F S T I L L L OA D S I T.

• WordPress Plugins: • WP Mobile Detect • Detector • WP-ress • Other server side detection • Mobile Detect • Adaptive Images • WURFL Cloud (subscription based) • Articles on RESS (responsive design with server-side components) • Lightening Your Responsive Website Design With RESS (Smashing Magazine) • Getting started with RESS (Creative Bloq) S O M E R E S O U R C E S F O R T H E N E R D S I N T H E R O O M five.2: …unless done correctly

six: Present styles not pages S T Y L E T Y L E S , S T Y L E G U I D E S . S T Y L I N ’

STYL E TIL .E S

seven: Don’t rely on hover states. T H E R E I S N O S P O O N H OV E R ( O N M O B I L E ) # TH E R E I S N O H OV E R

eight: Focus. A C L U T T E R E D M I N D L E A D S TO C L U T T E R E D D E S I G N

eight: Focus A C L U T T E R E D M I N D L E A D S TO C L U T T E R E D D E S I G N

nine: Push back. C H A L L E N G E C L I E N T ’ S R E Q U E S T S . T H E Y M I G H T B E W R O N G . #GRUMPYWEBDEVELOPER

nine: Push back. C H A L L E N G E C L I E N T ’ S R E Q U E S T S . T H E Y M I G H T B E W R O N G . #GRUMPYWEBDEVELOPER • highlight their initial goals

nine: Push back. C H A L L E N G E C L I E N T ’ S R E Q U E S T S . T H E Y M I G H T B E W R O N G . #GRUMPYWEBDEVELOPER • highlight their initial goals • explain how your solution solves them

nine: Push back. C H A L L E N G E C L I E N T ’ S R E Q U E S T S . T H E Y M I G H T B E W R O N G . #GRUMPYWEBDEVELOPER • highlight their initial goals • explain how your solution solves them • …. • PROFIT!

nine: Push back. C H A L L E N G E C L I E N T ’ S R E Q U E S T S . T H E Y M I G H T B E W R O N G . #GRUMPYWEBDEVELOPER … no really. it’s ok to say no

ten: Watch someone use your site A N D D O N ’ T H E L P T H E M

#THISONEGOESTOELEVEN

eleven: Keep learning. T R E N D S , B E S T P R AC T I C E S & M E T H O D S A R E A LWAY S C H A N G I N G . B E A S T U D E N T F O R L I F E .

eleven: Keep learning. H E R E ’ S S O M E G O O D R E S O U R C E S TO G E T YO U S TA RT E D : • This Is Responsive (tons of Patterns, Resources and News by Brad Frost.) • Mobile Web Best Practices • ResponsiveDesign.is • codrops • Smashing Magazine • CSS tricks • tuts+ • Treehouse • Lynda • the google

Any questions tracy apps twitter: @tapps web: about.me/tapps (or just google me) ! ! ! ! these slides available at speakerdeck.com/tapps