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...
- 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
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
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.
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
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
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
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
- 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
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?
(or just google me)
these slides available at speakerdeck.com/tapps