Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive web design tips


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? ● 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?