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?