Please Design Responsively (2014 version)

Slides from tracy apps' talk on responsive web design.

Outline & links:

1. Please Design Responsively

2. Obligatory “who is this person talking” slide

3. But enough about me...

4. Responsive?
- what does it mean?

5. “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)” – Wikipedia

6. “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.” - Me

7. “Responsive web design (RWD) is pretty much the coolest thing. ever.” - Me

8. For example
- fistofangst.com

9. The HTML code is exactly the same

10. but the CSS Uses media queries to display the elements differently when the browser width is different

11. "if this... then do this..."

12. @media #mediaqueryallthethings
- 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
**link: www.w3.org/TR/css3-mediaqueries/

13. ok, ok. that’s a lot. i get it. so now how do i Design responsively?
- here’s ten tips for you.

14. one: Actually use your mobile device
- and take notes.

15.

16. be aware of hard to reach spots on the phone. notice these “blind spots” change depending on how you hold the device. now pretend this is a fun puzzle. yay. #puzzlesarefun
- UXmatters » How do users really hold mobile devices
**link: http://uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

17. two: Kill trees.*
- or use a chalkboard if you like trees.

18. two: Draw it out
- new tools helping us get back to sketching
- AppSeed: https://www.kickstarter.com/projects/appseed/appseed-turn-sketches-into-functioning-prototypes
- SketchBook® Pro (tablet app): http://autodesk.com/products/sketchbook-pro
- etc.

19. three: Get away from the computer.
- here’s that excuse to buy a hammock. you know... for business purposes.

20. four: Start simple. Build up.
- start simple with mobile. go crazy afterwards

21.

22. five: Organize instead of hiding...
- remember your “mobile only” users. don’t just hide content under the bed.
- use display:none; only when necessary

23. five.2: ...unless done correctly
- consider data rates and connection speed. hiding stuff still loads it.

24. Some Resources for the nerds in the room
WordPress Plugins:
- WP Mobile Detect: http://wordpress.org/plugins/wp-mobile-detect/
- Detector: http://wordpress.org/plugins/detector/
- WP-ress: https://github.com/jcasabona/wp-ress
Other server side detection:
- Mobile Detect: http://mobiledetect.net/
- Adaptive Images: http://adaptive-images.com/
- WURFL Cloud (subscription based): http://scientiamobile.com/cloud
Articles on RESS (responsive design with server-side components)
- Lightening Your Responsive Website Design With RESS (Smashing Magazine): http://smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
- Getting started with RESS (Creative Bloq): http://www.creativebloq.com/responsive-web-design/getting-started-ress-5122956

25. six: Present styles not pages
- style tyles, style guides. stylin’

26. six: Present styles not pages
- Style Tiles: http://styletil.es

27. seven: Don’t rely on hover states.
- there is no spoon hover (on mobile)

28.& 29. eight: Focus.
- a cluttered mind leads to cluttered design

30: nine: Push back.
- Challenge client’s requests. They might be wrong.

31. highlight their initial goals

32. explain how your solution solves them

33. ... PROFIT!

34. ... no really. it’s ok to say no

35. ten: Watch someone use your site
- and don’t help them

36. #thisonegoestoeleven

37. eleven: Keep learning.
- trends, best practices & methods are always changing. be a student for life.

38. here’s some good resources to get you started:
- This Is Responsive (tons of Patterns, Resources and News by Brad Frost.): http://bradfrost.github.io/this-is-responsive/
- Mobile Web Best Practices: http://mobilewebbestpractices.com/
- ResponsiveDesign.is: http://responsivedesign.is/
- codrops: http://tympanus.net/codrops/
- Smashing Magazine: http://www.smashingmagazine.com/
- CSS tricks: http://css-tricks.com/
- tuts+: http://tutsplus.com/
- Treehouse: http://teamtreehouse.com/
- Lynda: http://www.lynda.com/
- the google

39. Any questions?

Thank you!
tracy apps
twitter: @tapps
web: http://about.me/tapps
(or just google me)

these slides available at speakerdeck.com/tapps

Transcript

2. 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
3. But enough about me… BLAH BLAH BLAH
4. Responsive? WHAT DO ES I T ME A N? #D OU BLERAIN BOW BOM B
5. – 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)”
6. – 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.”
7. – M E “Responsive web design (RWD) is pretty much the coolest thing. ever.” #ERMAHGERDRESPONSIVEDESIGN
8. 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
9. T H E H T M L C O D E is exactly the same
10. 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
11. 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 …
12. @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
13. 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.
14. one: Actually use your mobile device A N D TA K E N OT E S .
16. 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
17. 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.
18. 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.)
19. 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 .
20. 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
21. 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
22. 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;}
23. 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.
24. • 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
25. 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 ’
26. STYL E TIL .E S
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
33. 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!
34. 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
35. ten: Watch someone use your site A N D D O N ’ T H E L P T H E M
36. #THISONEGOESTOELEVEN
37. 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 .
38. 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
39. Any questions tracy apps twitter: @tapps web: about.me/tapps (or just google me) ! ! ! ! these slides available at speakerdeck.com/tapps