Please Design Responsively

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: http://appseed.ca
- 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. five.2: ...unless done correctly
WordPress Plugins:
- WP Mobile Detect: http://wordpress.org/plugins/wp-mobile-detect/
- 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: 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

1. View Slide

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
   

   View Slide

3. But enough about me…
   BLAH BLAH BLAH
   

   View Slide

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

   View Slide

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)”
   

   View Slide

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.”
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
    

    View Slide

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 …
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide

15. View Slide

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
    

    View Slide

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.
    

    View Slide

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 (appseed.ca) SketchBook® Pro (tablet app)
    (etc.)
    

    View Slide

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 .
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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;}
    

    View Slide

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.
    

    View Slide

24. • WordPress Plugins:
    • WP Mobile Detect (wordpress.org/plugins/wp-mobile-detect)
    • WP-ress (github.com/jcasabona/wp-ress)
    • Other server side detection
    • Mobile Detect (mobiledetect.net)
    • Adaptive Images (adaptive-images.com)
    • WURFL Cloud (subscription based: scientiamobile.com/cloud)
    • 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
    

    View Slide

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 ’
    

    View Slide

26. STYL E TIL .E S
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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

    View Slide

36. #THISONEGOESTOELEVEN
    

    View Slide

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 .
    

    View Slide

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 (bradfrost.github.io/this-is-responsive)
    • Mobile Web Best Practices (mobilewebbestpractices.com)
    • ResponsiveDesign.is
    • codrops (tympanus.net/codrops)
    • Smashing Magazine (smashingmagazine.com)
    • CSS tricks (css-tricks.com)
    • tuts+ (tutsplus.com)
    • Treehouse (teamtreehouse.com)
    • Lynda (lynda.com)
    • the google
    

    View Slide

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

    View Slide