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