Responsive Web Design
Download as PPT, PDF1 like1,952 views
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.
Responsive Web Design
- 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