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

1. RESPONSIVE DESIGN
Basic concepts and implementation
Tuesday, July 24, 12

2. WHO ARE YOU?
Mario Noble
Tuesday, 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-
design
Tuesday, 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. FRUSTRATION
Tuesday, July 24, 12

9. VARIOUS CONTEXTS
Tuesday, July 24, 12

10. NOT JUST MOBILE
Tuesday, July 24, 12

11. THE GOLDEN MEAN
Tuesday, July 24, 12

12. PROGRESSIVE ENHANCEMENT
Tuesday, July 24, 12

13. BACK TO THE FUTURE
Tuesday, July 24, 12

14. PURE FLUID VS. RESPONSIVE
Tuesday, 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. DESIGN
Tuesday, July 24, 12

18. FOCUS, FOCUS, FOCUS
Tuesday, July 24, 12

19. MODULAR APPROACH
Tuesday, July 24, 12

20. STYLE TILES
Tuesday, 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.org
Tuesday, 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 filament
Tuesday, July 24, 12

34. Beware IE and explicit dimensions
Embrace Modernizr/Respond.js
Tuesday, July 24, 12

35. USEFUL TOOLS
Tuesday, 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/MediaTable
Tuesday, July 24, 12

37. USEFUL RESPONSIVE
FRAMEWORKS
Tuesday, 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/responsive
Tuesday, July 24, 12

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

40. PROS
Tuesday, July 24, 12

41. MONEY + TIME
Tuesday, July 24, 12

42. MORE PEOPLE + PLACES
Tuesday, 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 haul
Tuesday, July 24, 12

44. CONS
Tuesday, July 24, 12

45. TIME + MONEY
Tuesday, July 24, 12

46. ADAPTING EXISTING SITES
Tuesday, 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
• Advertising
Tuesday, July 24, 12

48. RUBBER PEG
Tuesday, July 24, 12

49. ALTERNATIVES
Tuesday, July 24, 12

50. • Fat Finger Design
• User Agent Sniffing
• Javascript sniffing
• Design for lowest common denominator
• Fluid design
Tuesday, 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 ins
Tuesday, July 24, 12

54. MARIO’S TRICKS AND
OPINIONS
Tuesday, 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 divs
Tuesday, 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