Responsive design presentation

RESPONSIVE DESIGN Basic concepts and implementationTuesday, July 24, 12

WHO ARE YOU? Mario NobleTuesday, July 24, 12

WHAT IS RESPONSIVE DESIGN? • Responsive design is a technique that uses ﬂuid grids, media queries and ﬂexible images. •A strategy/tool. • Not a cure for all ills. • http://www.abookapart.com/ products/responsive-web- designTuesday, July 24, 12

I WANT TO SEE SOME EXAMPLES.Tuesday, July 24, 12

WHY SHOULD I DO IT?Tuesday, July 24, 12

FOR THE MONEY, OF COURSE!Tuesday, July 24, 12

CHANGING EXPECTATIONS.Tuesday, July 24, 12

FRUSTRATIONTuesday, July 24, 12

VARIOUS CONTEXTSTuesday, July 24, 12

NOT JUST MOBILETuesday, July 24, 12

THE GOLDEN MEANTuesday, July 24, 12

PROGRESSIVE ENHANCEMENTTuesday, July 24, 12

BACK TO THE FUTURETuesday, July 24, 12

PURE FLUID VS. RESPONSIVETuesday, July 24, 12

• 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.Tuesday, July 24, 12

HOW DO YOU DO IT?Tuesday, July 24, 12

DESIGNTuesday, July 24, 12

FOCUS, FOCUS, FOCUSTuesday, July 24, 12

MODULAR APPROACHTuesday, July 24, 12

STYLE TILESTuesday, July 24, 12

CODING aka the Boring Part, depending on who you are...Tuesday, July 24, 12

TARGET ÷ CONTEXT = RESULT NOOOOO!!!!!! MATHHHHHH!!!!!!Tuesday, July 24, 12

900 ÷ 960 = 0.9375 becomes 93.75%Tuesday, July 24, 12

#MAIN { MARGIN: 0 AUTO; WIDTH: 93.75%; /* 900 / 960 */ }Tuesday, July 24, 12

650 ÷ 900 = 0.72222222 72.222222%Tuesday, July 24, 12

215 ÷ 900 = 0.238888 or 23.8888%Tuesday, July 24, 12

#main-content { ﬂoat: left; width: 72.222222%; /* 650 / 900 */ } #sidebar { ﬂoat: right; width: 23.8888%; /* 215 / 900 */ }Tuesday, July 24, 12

Ouch! Do I need to Calculate all this all the time?Tuesday, July 24, 12

This is where SASS or LESS can help. http://sass-lang.com/tutorial.html http://lesscss.orgTuesday, July 24, 12

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%;} }Tuesday, July 24, 12

Scalable Images using max-width: 100%; and various other solutions like ﬁlamentTuesday, July 24, 12

Beware IE and explicit dimensions Embrace Modernizr/Respond.jsTuesday, July 24, 12

USEFUL TOOLSTuesday, July 24, 12

Cateorizr http://www.brettjankord.com/2012/01/16/categorizr-a- modern-device-detection-script/ Slider Fixes http://www.woothemes.com/ﬂexslider/ Video Fixes http://www.tjkdesign.com/articles/how-to-resize-videos-on- the-ﬂy.asp Table Approach to tables https://github.com/thepeg/MediaTableTuesday, July 24, 12

USEFUL RESPONSIVE FRAMEWORKSTuesday, July 24, 12

HTML5 Boilerplate / Modernizr / Twitter Bootstrap http://twitter.github.com/bootstrap/ Foundation http://foundation.zurb.com/ 320andup http://stuffandnonsense.co.uk/projects/320andup/ Responsive - Wordpress http://wordpress.org/extend/themes/responsiveTuesday, July 24, 12

HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS?Tuesday, July 24, 12

PROSTuesday, July 24, 12

MONEY + TIMETuesday, July 24, 12

MORE PEOPLE + PLACESTuesday, July 24, 12

• More adaptable. • Design once, deploy everywhere • Maintains aspect ratios • Saves time in long run • More future proof • Less time and money over the long haulTuesday, July 24, 12

CONSTuesday, July 24, 12

TIME + MONEYTuesday, July 24, 12

ADAPTING EXISTING SITESTuesday, July 24, 12

• Can be difﬁcult 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 ﬁrst) • Addressing non-responsive plug-ins • Navigation • Tables and forms • Sidebars • Selling stakeholders on the process • AdvertisingTuesday, July 24, 12

RUBBER PEGTuesday, July 24, 12

ALTERNATIVESTuesday, July 24, 12

• Fat Finger Design • User Agent Snifﬁng • Javascript snifﬁng • Design for lowest common denominator • Fluid designTuesday, July 24, 12

TO RESPOND OR NOT?Tuesday, July 24, 12

HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE TO MAKE A SITE RESPONSIVE?Tuesday, July 24, 12

IS IT WORTH IT? • 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 insTuesday, July 24, 12

MARIO’S TRICKS AND OPINIONSTuesday, July 24, 12

TAKE IT WITH A GRAIN OF...Tuesday, July 24, 12

TRICKS • Start with mobile ﬁrst 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 divsTuesday, July 24, 12

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)Tuesday, July 24, 12

TOWARDS A NEW MINDSET • Pay now or pay later. • Responsive design may not work for you. But you will need to ﬁnd 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.Tuesday, July 24, 12

Responsive design presentation

by marionoble

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Responsive design presentation Presentation Transcript