Responsive Design

Responsive Design@jboonstra

Joel Boonstra joel@agathongroup.com

How We Design(ed)

Oh Yeah, Mobile!

http://wtfmobileweb.com/post/54912647443/

What Do We Do?

What’s the problem?

http://wtfmobileweb.com/post/55600401786/

http://wtfmobileweb.com/post/54793886495/

What Do We Do Instead?

Responsive Design

How Does It Work?

Responsive Websites Have...

• Flexible Content

Responsive Websites Have...

• Flexible Content

• Dynamic Design

Responsive Websites Have...

Flexible Content

img { max-width: 100%;}

Dynamic Design

/* styles for all screen widths go here */

@media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */}

New Mobile Devices Per Day

http://www.lukew.com/ff/entry.asp?1728

New Mobile Devices Per Day

http://www.lukew.com/ff/entry.asp?1728

2011 2012

1,450,000

New Mobile Devices Per Day

http://www.lukew.com/ff/entry.asp?1728

2011 2012

1,450,000

3,600,000

Worldwide Mobile

http://www.lukew.com/ff/entry.asp?1644

• Over 1 billion smartphones worldwide.

Worldwide Mobile

http://www.lukew.com/ff/entry.asp?1644

• Over 1 billion smartphones worldwide.

• 16 years to reach 1 billion.

Worldwide Mobile

http://www.lukew.com/ff/entry.asp?1644

• Over 1 billion smartphones worldwide.

• 16 years to reach 1 billion.

• Estimated 3 years to reach 2 billion.

Worldwide Mobile

http://www.lukew.com/ff/entry.asp?1644

• Over 1 billion smartphones worldwide.

• 16 years to reach 1 billion.

• Estimated 3 years to reach 2 billion.

• 46% of the population has at least one active mobile device.

Worldwide Mobile

http://www.lukew.com/ff/entry.asp?1644

/* styles for all screen widths go here */

@media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */}

/* styles for all screen widths go here */

@media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */}

/* styles for all screen widths go here */

@media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */}

/* styles for all screen widths go here */

@media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */}

@media screen and (min-width: 1200px) { /* browsers 1200px and wider get these styles */}

Technical Considerations

• Bandwidth

Technical Considerations

• Bandwidth

• Context

Technical Considerations

• Bandwidth

• Context

• Images - https://github.com/scottjehl/picturefill

Technical Considerations

• Bandwidth

• Context

• Images - https://github.com/scottjehl/picturefill

• Maintenance

Technical Considerations

The Future

Further Reading

Further Reading

• http://mediaqueri.es/

Further Reading

• http://mediaqueri.es/

• http://alistapart.com/

Further Reading

• http://mediaqueri.es/

• http://alistapart.com/

• http://www.lukew.com/ff/

Further Reading

• http://mediaqueri.es/

• http://alistapart.com/

• http://www.lukew.com/ff/

• http://aneventapart.com/

Questions

Thanks!@jboonstra

Joel Boonstra joel@agathongroup.com