responsive design in ten minutes
DESCRIPTION
Presentation for the University of Leeds Mobile Learning Group by Rich AshbyTRANSCRIPT
School of somethingFACULTY 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