This document discusses the benefits and challenges of responsive web design, which uses fluid grids and media queries to automatically adjust webpages to display well on different screen sizes. Responsive design improves the user experience across devices, helps websites reach wider audiences, and is more future-proof and search engine optimized compared to separate mobile sites. While retrofitting existing sites can be difficult, responsive design is supported by modern browsers and content management systems.

1. School of something
FACULTY OF OTHER
Responsive design in ten minutes
Mobile Learning Network
Rich Ashby
19 June 2013

2. Background
Multi-device world

3. Background
Exponential growth of mobile

4. Background
Poor user experience

5. Background
Responsive design began in 2010

6. Benefits of responsive design
Helps us reach the widest audience

7. Benefits of responsive design
Radically enhances user experience

8. Benefits of responsive design
Competitive parity

9. Benefits of responsive design
Platform agnostic

10. Benefits of responsive design
Flexible and future-proof

11. Benefits of responsive design
Improved search rankings

12. Building blocks
HTML5 and CSS3

13. Building blocks
Viewports

14. Building blocks
Media queries

15. Building blocks
Fluid grids and breakpoints

16. Building blocks
JavaScript and jQuery

17. How does it all work?
Media queries detect device

18. How does it all work?
Fluid grid layouts served to devices

19. Challenges
Retro-fitting can be difficult

20. Challenges
Images need to work with fluid grids

21. Challenges
Images need to work with fluid grids

22. Challenges
Images need to work with fluid grids

23. Challenges
Images need to work with fluid grids

24. Challenges
High pixel density displays

25. Challenges
Browser support

26. Challenges
Planning process

27. Challenges
Additional testing

28. Challenges
Much greater focus on typography

29. Good news
Full support in Jadu and WordPress

30. Thank-you
Questions and demo