Responsive web design tips

611 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Responsive web design tips

  1. 1. Responsive Web Design Tips by Leland Fiegel @lelandf
  2. 2. About Me ● WordPress theme developer ● 6+ years ● Theme Lab ● Currently working for digital agency in DC ● Any questions? Interrupt me.
  3. 3. What is responsive web design?
  4. 4. “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 desktop computer monitors to mobile phones)” -Wikipedia
  5. 5. Do you even need responsive design?
  6. 6. ● Check your analytics ● High bounce rate on mobile? ● Is pinching and zooming sufficient? ● Apple.com isn’t responsive
  7. 7. Responsive Web Design Friends
  8. 8. ● Media queries ● Percentage widths ● Max widths
  9. 9. Responsive Web Design Enemies
  10. 10. ● Images ● Video embeds ● Anything fixed width ● Internet Explorer
  11. 11. ● Images: Widths and auto height. Bonus: use WordPress media classes ● Video embeds: Use FitVids (also for WP) ● IE 8 and below? Use Respond.js
  12. 12. ● Viewport meta tag makes a big difference. Prevent zooming. ● TEST EVERYTHING. Use BrowserStack or alternative service.
  13. 13. Questions?

×