Presentation for the University of Leeds Mobile Learning Group by Rich Ashby

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