• Like
Responsive web design tips
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Responsive web design tips

  • 213 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
213
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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