Successfully reported this slideshow.
Your SlideShare is downloading. ×

Responsive web design tips

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 13 Ad

More Related Content

Slideshows for you (19)

Similar to Responsive web design tips (20)

Advertisement

Recently uploaded (20)

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?

×