Responsive Web Design Tips
by Leland Fiegel
@lelandf
About Me
● WordPress theme developer
● 6+ years
● Theme Lab
● Currently working for digital agency in DC
● Any questions? ...
What is responsive
web design?
“Responsive web design (RWD) is a web
design approach aimed at crafting sites to
provide an optimal viewing experience—eas...
Do you even need
responsive design?
● Check your analytics
● High bounce rate on
mobile?
● Is pinching and zooming
sufficient?
● Apple.com isn’t responsive
Responsive Web
Design Friends
● Media queries
● Percentage widths
● Max widths
Responsive Web
Design Enemies
● Images
● Video embeds
● Anything fixed width
● Internet Explorer
● Images: Widths and auto
height. Bonus: use
WordPress media classes
● Video embeds: Use FitVids
(also for WP)
● IE 8 and ...
● Viewport meta tag makes a
big difference. Prevent
zooming.
● TEST EVERYTHING. Use
BrowserStack or alternative
service.
Questions?
Upcoming SlideShare
Loading in...5
×

Responsive web design tips

394

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
394
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×