School of something
FACULTY OF OTHER
Responsive design in ten minutes
Mobile Learning Network
Rich Ashby
19 June 2013
Background
Multi-device world
Background
Exponential growth of mobile
Background
Poor user experience
Background
Responsive design began in 2010
Benefits of responsive design
Helps us reach the widest audience
Benefits of responsive design
Radically enhances user experience
Benefits of responsive design
Competitive parity
Benefits of responsive design
Platform agnostic
Benefits of responsive design
Flexible and future-proof
Benefits of responsive design
Improved search rankings
Building blocks
HTML5 and CSS3
Building blocks
Viewports
Building blocks
Media queries
Building blocks
Fluid grids and breakpoints
Building blocks
JavaScript and jQuery
How does it all work?
Media queries detect device
How does it all work?
Fluid grid layouts served to devices
Challenges
Retro-fitting can be difficult
Challenges
Images need to work with fluid grids
Challenges
Images need to work with fluid grids
Challenges
Images need to work with fluid grids
Challenges
Images need to work with fluid grids
Challenges
High pixel density displays
Challenges
Browser support
Challenges
Planning process
Challenges
Additional testing
Challenges
Much greater focus on typography
Good news
Full support in Jadu and WordPress
Thank-you
Questions and demo
Upcoming SlideShare
Loading in …5
×

Responsive design in ten minutes

676 views
624 views

Published on

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

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • October Version 2
  • Responsive design in ten minutes

    1. 1. School of something FACULTY OF OTHER Responsive design in ten minutes Mobile Learning Network Rich Ashby 19 June 2013
    2. 2. Background Multi-device world
    3. 3. Background Exponential growth of mobile
    4. 4. Background Poor user experience
    5. 5. Background Responsive design began in 2010
    6. 6. Benefits of responsive design Helps us reach the widest audience
    7. 7. Benefits of responsive design Radically enhances user experience
    8. 8. Benefits of responsive design Competitive parity
    9. 9. Benefits of responsive design Platform agnostic
    10. 10. Benefits of responsive design Flexible and future-proof
    11. 11. Benefits of responsive design Improved search rankings
    12. 12. Building blocks HTML5 and CSS3
    13. 13. Building blocks Viewports
    14. 14. Building blocks Media queries
    15. 15. Building blocks Fluid grids and breakpoints
    16. 16. Building blocks JavaScript and jQuery
    17. 17. How does it all work? Media queries detect device
    18. 18. How does it all work? Fluid grid layouts served to devices
    19. 19. Challenges Retro-fitting can be difficult
    20. 20. Challenges Images need to work with fluid grids
    21. 21. Challenges Images need to work with fluid grids
    22. 22. Challenges Images need to work with fluid grids
    23. 23. Challenges Images need to work with fluid grids
    24. 24. Challenges High pixel density displays
    25. 25. Challenges Browser support
    26. 26. Challenges Planning process
    27. 27. Challenges Additional testing
    28. 28. Challenges Much greater focus on typography
    29. 29. Good news Full support in Jadu and WordPress
    30. 30. Thank-you Questions and demo

    ×