• Save
Responsive design presentation
Upcoming SlideShare
Loading in...5
×
 

Responsive design presentation

on

  • 1,861 views

Presentation on responsive design, it's reasons, execution, ramifications and alternatives.

Presentation on responsive design, it's reasons, execution, ramifications and alternatives.

Statistics

Views

Total Views
1,861
Views on SlideShare
1,854
Embed Views
7

Actions

Likes
1
Downloads
0
Comments
1

2 Embeds 7

http://www.linkedin.com 5
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Here's the link to the example montage referred to in the slideshow:
    http://youtu.be/ZWIWRsBrxSU
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Responsive design presentation Responsive design presentation Presentation Transcript

  • 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 fluid grids, media queries and flexible 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 {   float: left;   width: 72.222222%; /* 650 / 900 */ } #sidebar {   float: 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
  • <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />Tuesday, July 24, 12
  • This is where SASS or LESS can help. http://sass-lang.com/tutorial.html http://lesscss.orgTuesday, July 24, 12
  • <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; } }Tuesday, 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 filamentTuesday, 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/flexslider/ Video Fixes http://www.tjkdesign.com/articles/how-to-resize-videos-on- the-fly.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 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 • AdvertisingTuesday, July 24, 12
  • RUBBER PEGTuesday, July 24, 12
  • ALTERNATIVESTuesday, July 24, 12
  • • Fat Finger Design • User Agent Sniffing • Javascript sniffing • 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 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 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 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.Tuesday, July 24, 12