This document discusses responsive web design. It explains that responsive design uses CSS media queries and the same HTML and content across all devices. By detecting screen size and orientation, media queries change the layout and styles for different devices like phones, tablets, laptops and desktops. Responsive design allows a single code base and content source for any device, provides flexibility for unique device experiences, and improves page load times compared to separate mobile sites. The document provides tips on implementing responsive design including starting with a mobile-first approach and using breakpoints and device classes.

1. Responsive Web Design
Dawn Wentzell
@saffyre9
Dawn Wentzell | @saffyre9

2. One URL
• Bing: March 2012
• Google: June 2012
Dawn Wentzell | @saffyre9

3. WHY ONE URL?
Dawn Wentzell | @saffyre9

4. Google: It’s easier for us
• Easier for users
• Easier on crawl
efficiency
• Easier for link
algorithms
Dawn Wentzell | @saffyre9

5. Bing: It’s easier for you!
• Not splitting
ranking
• Less crawler
bandwidth
• Less maintenance
Dawn Wentzell | @saffyre9

6. Dawn Wentzell | @saffyre9

7. WHAT IS RESPONSIVE WEB
DESIGN?
Dawn Wentzell | @saffyre9

8. CSS Media Queries
• Uses the same:
– HTML
– Content
Dawn Wentzell | @saffyre9

9. NOT CSS2 Media Types
Dawn Wentzell | @saffyre9

10. CSS3 Media Queries
Dawn Wentzell | @saffyre9

11. “Rather than looking for a type of device
they look at the capability of the
device” – Smashing Magazine
bit.ly/PPYxad
Dawn Wentzell | @saffyre9

12. WHY USE RESPONSIVE DESIGN?
Dawn Wentzell | @saffyre9

13. Single Content Source
Dawn Wentzell | @saffyre9

14. Single Code Base
Dawn Wentzell | @saffyre9

15. Any Content, Any Platform
Dawn Wentzell | @saffyre9

16. Device Agnostic
Dawn Wentzell | @saffyre9

17. WHY NOT USE RESPONSIVE
DESIGN?
Dawn Wentzell | @saffyre9

18. Unique Device Experiences
Dawn Wentzell | @saffyre9

19. Planning
Nightmares
Dawn Wentzell | @saffyre9

20. Page Load Times
Dawn Wentzell | @saffyre9

21. WHICH SHOULD I USE?
Dawn Wentzell | @saffyre9

22. Dawn Wentzell | @saffyre9

23. CAN I USE BOTH?
Dawn Wentzell | @saffyre9

24. Yes!
RESS: Responsive Web Design +
Server Side Components
bit.ly/SX7vAF
Dawn Wentzell | @saffyre9

25. “…optimizing what we send to any
given device is taken care of on
the server.”
– Luke W
Dawn Wentzell | @saffyre9

26. HOW DO I MAKE MY SITE
RESPONSIVE?
Dawn Wentzell | @saffyre9

27. Start Fresh
Dawn Wentzell | @saffyre9

28. Mobile First
Dawn Wentzell | @saffyre9

29. Device Classes
Dawn Wentzell | @saffyre9

30. Breakpoints
Dawn Wentzell | @saffyre9

31. CSS3 Media Queries
Dawn Wentzell | @saffyre9

32. Resources
• One URL: bit.ly/QDOTJL
• Responsive Design: bit.ly/VfVQBA
• RESS: bit.ly/Rt20wO
Dawn Wentzell | @saffyre9

33. Thank You!
Dawn Wentzell
dawn@dawnwentzell.com
@saffyre9
Dawn Wentzell | @saffyre9