1. Responsive Web Design Tips
by Leland Fiegel
@lelandf

2. About Me
● WordPress theme developer
● 6+ years
● Theme Lab
● Currently working for digital agency in DC
● Any questions? Interrupt me.

3. What is responsive
web design?

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. Do you even need
responsive design?

6. ● Check your analytics
● High bounce rate on
mobile?
● Is pinching and zooming
sufficient?
● Apple.com isn’t responsive

7. Responsive Web
Design Friends

8. ● Media queries
● Percentage widths
● Max widths

9. Responsive Web
Design Enemies

10. ● Images
● Video embeds
● Anything fixed width
● Internet Explorer

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. ● Viewport meta tag makes a
big difference. Prevent
zooming.
● TEST EVERYTHING. Use
BrowserStack or alternative
service.

13. Questions?