RESPONSIVE DESIGNBasic concepts and implementation

WHO ARE YOU?Mario Noble

WHAT IS RESPONSIVE DESIGN?

• Responsive design is a technique that uses fluid grids, media queries and flexible images.

• A strategy/tool.

•Not a cure for all ills.

• http://www.abookapart.com/products/responsive-web-design

I WANT TO SEE SOME EXAMPLES.

WHY SHOULD I DO IT?

FOR THE MONEY, OF COURSE!

CHANGING EXPECTATIONS.

FRUSTRATION

VARIOUS CONTEXTS

NOT JUST MOBILE

THE GOLDEN MEAN

PROGRESSIVE ENHANCEMENT

BACK TO THE FUTURE

PURE FLUID VS. RESPONSIVE

•Fluid stretches but doesn’t deliberately arrange.

•Adaptive is break point based

•Responsive is range based.

•There is overlap. Semantics overlap.

•Both are an extension of Universal Design.

HOW DO YOU DO IT?

DESIGN

FOCUS, FOCUS, FOCUS

MODULE APPROACH

CODINGaka the Boring Part, depending on who you are...

TARGET ÷ CONTEXT = RESULT

NOOOOO!!!!!! MATHHHHHH!!!!!!

900 ÷ 960 = 0.9375becomes 93.75%

#MAIN {  MARGIN: 0 AUTO;  WIDTH: 93.75%; /* 900 / 960 */}

650 ÷ 900 = 0.7222222272.222222%

215 ÷ 900 = 0.238888or 23.8888%

#main-content {  float: left;  width: 72.222222%; /* 650 / 900 */}

#sidebar {  float: right;  width: 23.8888%; /* 215 / 900 */}

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"

href="shetland.css" />

@media screen and (max-device-width: 480px) { .column { float: none; }}

media only screen and (min-width:321px) and (max-width:481px) {.two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin-left: 0; margin-right: 0;}.region-sidebar-first, .region-sidebar-second, .region-sidebar-first .block, .region-sidebar-second .block {width: 100%;}.region-sidebar-second {width: 100%;}.content-inner,.region-sidebar-first,.region-sidebar-second {float: none;}.region-sidebar-first, .region-sidebar-second {clear : both;}.container {width: 100%;}}/* Tablet portrait one-col-vert */@media only screen and (min-width:481px) and (max-width:800px) {.two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin-left: 0; margin-right: 0;}.region-sidebar-first {width: 100%;}.region-sidebar-second {width: 0%;}.one-sidebar .sidebar {width: 100%;}.region-sidebar-first, .region-sidebar-second {overflow: hidden; margin-top: 20px;}.region-sidebar-first .block, .region-sidebar-second .block {width: 100%;}.container {width: 90%;}}

Scalable Imagesusing

max-width: 100%;and various other solutions

like filament

Beware IE and explicit dimensions

Embrace Modernizr/Respond.js

HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS?

PROS

MONEY + TIME

MORE PEOPLE + PLACES

•More adaptable.

•Design once, deploy everywhere

•Maintains aspect ratios

•Saves time in long run

•More future proof

•Less time and money over the long haul

CONS

TIME + MONEY

ADAPTING EXISTING SITES

• Can be difficult to port over to existing complex sites

• Need to breakout of the one-off mindset

• Not necessarily supported cross browser

• Serving up media can be challenging.

• Potential bandwidth issues.

• May be more time up front (particularly at first)

• Addressing non-responsive plug-ins

• Navigation

• Tables and forms

• Sidebars

• Selling stakeholders on the process

• Advertising

RUBBER PEG

ALTERNATIVES

•Fat Finger Design

•User Agent Sniffing

• Javascript sniffing

•Design for lowest common denominator

•Fluid design

TO RESPOND OR NOT?

HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE

TO MAKE A SITE RESPONSIVE?

• It all depends on your time, money and energy.

• Is your orientation primarily desktop or mobile?

•Most of all your clients/organization and customers/visitors.

• It all depends on the complexity of your site.

• Advertisers

• Third party plug ins

IS IT WORTH IT?

MARIO’S TRICKS AND OPINIONS

TAKE IT WITH A GRAIN OF...

TRICKS• Start with mobile first if

doing from scratch

• Small usable Fat Finger changes for pre existing complex sites

• Fix worst offending problems anyway that you can in different contexts.

•Display tables inline or reformat as spans or divs

OPINIONS

•Don’t leave things out.

• Give the visitor more actual control.

• Allow to choose the context or task

• Load media on demand (images, slideshows, galleries, videos)

TOWARDS A NEW MINDSET

• Pay now or pay later.

• Responsive design may not work for you. But you will need to find something that does.

• Responsive design is less a technique than a mindset.

• Instead of pixel perfect, priority perfect.

• Eyes on the prize - Usability and Engagement.