29
Why Responsive Design isn't enough (by itself)

Why responsive design isn't enough

Embed Size (px)

DESCRIPTION

Responsive Design is all the rage right now, but honestly, is it the solution to most of our problems? My answer is no, BUT, that also depends on how you define Responsive Design. Is it using @media queries? Partly, yes. In this presentation I discuss a more holistic approach to responsive design.

Citation preview

Page 1: Why responsive design isn't enough

Why Responsive Design isn't enough

(by itself)

Page 2: Why responsive design isn't enough

Nathaniel Schweinberg@nathanielks

Page 3: Why responsive design isn't enough

What Problems are we trying to solve?

Serving optimized experiences across devices/browsersHaving only 1 website

Maintaining 1 codebase

Page 4: Why responsive design isn't enough

@media queries are great!

A Good Start

Page 5: Why responsive design isn't enough

Legacy BrowsersContent Delivery

Who gets What and How

What issues are we facing?

Page 6: Why responsive design isn't enough

The Underlying issue?

Page 7: Why responsive design isn't enough

Websites got Big Asses

Page 8: Why responsive design isn't enough

Images!

Page 9: Why responsive design isn't enough

Request Headers!

Page 10: Why responsive design isn't enough

Why "Responsive Design"isn't enough

Page 11: Why responsive design isn't enough

http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

Page 12: Why responsive design isn't enough

What is Responsive Design?

Page 13: Why responsive design isn't enough

Good ContentDesign

DevelopmentMaintenance/Testing

Responsive sites are made up a few things

Page 14: Why responsive design isn't enough

Keep things simple

Content Creation

Page 15: Why responsive design isn't enough
Page 16: Why responsive design isn't enough

320 & Up

Base css is simplified mobile, customise for IEAll major browsers support @media

Page 17: Why responsive design isn't enough

Adaptive ImagesNo end all solution yet

Image Handling

Page 18: Why responsive design isn't enough
Page 19: Why responsive design isn't enough

Media QueriesAdapt/Responsive.js

Mustache

Content Delivery

Page 20: Why responsive design isn't enough

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

Page 21: Why responsive design isn't enough

MobbleWURFL

Optimized Scripts

Page 22: Why responsive design isn't enough

Be Responsible Developers, not responsive developers

Page 23: Why responsive design isn't enough

Adapt.jsRespond.jsRetina.jsLESSBootstrapFoundationA bajillion other frameworks

Client Side ResourcesRuby gems:

SASSSusy

BourbonNeat

Codekit

Page 24: Why responsive design isn't enough

MustacheAdaptive ImagesWURFLMobbleWP Fluid ImagesWP Retina 2x

Server Side Resources

Page 25: Why responsive design isn't enough

Real World Scenarios

Page 26: Why responsive design isn't enough

Theatre Francais

Page 27: Why responsive design isn't enough

https://kippt.com/nathanielks/responsive-resources

Resources:

Page 28: Why responsive design isn't enough
Page 29: Why responsive design isn't enough

Nathaniel Schweinberg@nathanielks