Responsive design presentation

  • 1,358 views
Uploaded on

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

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
No Downloads

Views

Total Views
1,358
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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

Transcript

  • 1. RESPONSIVE DESIGN Basic concepts and implementationTuesday, July 24, 12
  • 2. WHO ARE YOU? Mario NobleTuesday, July 24, 12
  • 3. 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
  • 4. I WANT TO SEE SOME EXAMPLES.Tuesday, July 24, 12
  • 5. WHY SHOULD I DO IT?Tuesday, July 24, 12
  • 6. FOR THE MONEY, OF COURSE!Tuesday, July 24, 12
  • 7. CHANGING EXPECTATIONS.Tuesday, July 24, 12
  • 8. FRUSTRATIONTuesday, July 24, 12
  • 9. VARIOUS CONTEXTSTuesday, July 24, 12
  • 10. NOT JUST MOBILETuesday, July 24, 12
  • 11. THE GOLDEN MEANTuesday, July 24, 12
  • 12. PROGRESSIVE ENHANCEMENTTuesday, July 24, 12
  • 13. BACK TO THE FUTURETuesday, July 24, 12
  • 14. PURE FLUID VS. RESPONSIVETuesday, July 24, 12
  • 15. • 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
  • 16. HOW DO YOU DO IT?Tuesday, July 24, 12
  • 17. DESIGNTuesday, July 24, 12
  • 18. FOCUS, FOCUS, FOCUSTuesday, July 24, 12
  • 19. MODULAR APPROACHTuesday, July 24, 12
  • 20. STYLE TILESTuesday, July 24, 12
  • 21. CODING aka the Boring Part, depending on who you are...Tuesday, July 24, 12
  • 22. TARGET ÷ CONTEXT = RESULT NOOOOO!!!!!! MATHHHHHH!!!!!!Tuesday, July 24, 12
  • 23. 900 ÷ 960 = 0.9375 becomes 93.75%Tuesday, July 24, 12
  • 24. #MAIN {   MARGIN: 0 AUTO;   WIDTH: 93.75%; /* 900 / 960 */ }Tuesday, July 24, 12
  • 25. 650 ÷ 900 = 0.72222222 72.222222%Tuesday, July 24, 12
  • 26. 215 ÷ 900 = 0.238888 or 23.8888%Tuesday, July 24, 12
  • 27. #main-content {   float: left;   width: 72.222222%; /* 650 / 900 */ } #sidebar {   float: right;   width: 23.8888%; /* 215 / 900 */ }Tuesday, July 24, 12
  • 28. Ouch! Do I need to Calculate all this all the time?Tuesday, July 24, 12
  • 29. <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
  • 30. This is where SASS or LESS can help. http://sass-lang.com/tutorial.html http://lesscss.orgTuesday, July 24, 12
  • 31. <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
  • 32. 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
  • 33. Scalable Images using max-width: 100%; and various other solutions like filamentTuesday, July 24, 12
  • 34. Beware IE and explicit dimensions Embrace Modernizr/Respond.jsTuesday, July 24, 12
  • 35. USEFUL TOOLSTuesday, July 24, 12
  • 36. 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
  • 37. USEFUL RESPONSIVE FRAMEWORKSTuesday, July 24, 12
  • 38. 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
  • 39. HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS?Tuesday, July 24, 12
  • 40. PROSTuesday, July 24, 12
  • 41. MONEY + TIMETuesday, July 24, 12
  • 42. MORE PEOPLE + PLACESTuesday, July 24, 12
  • 43. • 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
  • 44. CONSTuesday, July 24, 12
  • 45. TIME + MONEYTuesday, July 24, 12
  • 46. ADAPTING EXISTING SITESTuesday, July 24, 12
  • 47. • 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
  • 48. RUBBER PEGTuesday, July 24, 12
  • 49. ALTERNATIVESTuesday, July 24, 12
  • 50. • Fat Finger Design • User Agent Sniffing • Javascript sniffing • Design for lowest common denominator • Fluid designTuesday, July 24, 12
  • 51. TO RESPOND OR NOT?Tuesday, July 24, 12
  • 52. HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE TO MAKE A SITE RESPONSIVE?Tuesday, July 24, 12
  • 53. 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
  • 54. MARIO’S TRICKS AND OPINIONSTuesday, July 24, 12
  • 55. TAKE IT WITH A GRAIN OF...Tuesday, July 24, 12
  • 56. 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
  • 57. 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
  • 58. 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