Please Design Responsively

A2769f5bf01a40a449c370fced88e9a2?s=47 tapps
September 29, 2015

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

A2769f5bf01a40a449c370fced88e9a2?s=128

tapps

September 29, 2015
Tweet