Responsive design in ten minutes

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

description

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

Transcript of Responsive design in ten minutes

Page 1: Responsive design in ten minutes

School of somethingFACULTY OF OTHER

Responsive design in ten minutes

Mobile Learning Network

Rich Ashby 19 June 2013

Page 2: Responsive design in ten minutes

Background

Multi-device world

Page 3: Responsive design in ten minutes

Background

Exponential growth of mobile

Page 4: Responsive design in ten minutes

Background

Poor user experience

Page 5: Responsive design in ten minutes

Background

Responsive design began in 2010

Page 6: Responsive design in ten minutes

Benefits of responsive design

Helps us reach the widest audience

Page 7: Responsive design in ten minutes

Benefits of responsive design

Radically enhances user experience

Page 8: Responsive design in ten minutes

Benefits of responsive design

Competitive parity

Page 9: Responsive design in ten minutes

Benefits of responsive design

Platform agnostic

Page 10: Responsive design in ten minutes

Benefits of responsive design

Flexible and future-proof

Page 11: Responsive design in ten minutes

Benefits of responsive design

Improved search rankings

Page 12: Responsive design in ten minutes

Building blocks

HTML5 and CSS3

Page 13: Responsive design in ten minutes

Building blocks

Viewports

Page 14: Responsive design in ten minutes

Building blocks

Media queries

Page 15: Responsive design in ten minutes

Building blocks

Fluid grids and breakpoints

Page 16: Responsive design in ten minutes

Building blocks

JavaScript and jQuery

Page 17: Responsive design in ten minutes

How does it all work?

Media queries detect device

Page 18: Responsive design in ten minutes

How does it all work?

Fluid grid layouts served to devices

Page 19: Responsive design in ten minutes

Challenges

Retro-fitting can be difficult

Page 20: Responsive design in ten minutes

Challenges

Images need to work with fluid grids

Page 21: Responsive design in ten minutes

Challenges

Images need to work with fluid grids

Page 22: Responsive design in ten minutes

Challenges

Images need to work with fluid grids

Page 23: Responsive design in ten minutes

Challenges

Images need to work with fluid grids

Page 24: Responsive design in ten minutes

Challenges

High pixel density displays

Page 25: Responsive design in ten minutes

Challenges

Browser support

Page 26: Responsive design in ten minutes

Challenges

Planning process

Page 27: Responsive design in ten minutes

Challenges

Additional testing

Page 28: Responsive design in ten minutes

Challenges

Much greater focus on typography

Page 29: Responsive design in ten minutes

Good news

Full support in Jadu and WordPress

Page 30: Responsive design in ten minutes

Thank-you

Questions and demo