Responsive Design - Planning, Execution, Management with Bootstrap 3

10,869 views

Published on

In only the last few years, Responsive Design patterns and paradigms have brought forth spectacular, sweeping changes in UI web production. The demands for device-compliance as well as the always-growing mobile market have made Responsive Design a necessity for many websites and web applications. While taking the Responsive approach may offer incredible opportunities, it also carries a gamut of challenges.

This presentation will cover best practices for the planning, production, and management of Responsive websites. It will also serve as an introduction to Responsive website creation using the Bootstrap 3 framework. We will explore the mechanics of the Bootstrap grid and explore how it may be used to create robust, flexible Responsive layouts. Topics central to the presentation include mobile-first production, content focus, site maintainability and performance.

Published in: Design, Technology
0 Comments
161 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,869
On SlideShare
0
From Embeds
0
Number of Embeds
382
Actions
Shares
0
Downloads
499
Comments
0
Likes
161
Embeds 0
No embeds

No notes for slide

Responsive Design - Planning, Execution, Management with Bootstrap 3

  1. responsive design Planning   Execution  +   +  Management   With OOTSTRAP 3 h#ps://github.com/ecarlisle/responsive-­‐design-­‐pem  @eric_carlisle  
  2. me, myself, and i Eric Carlisle UI / UX Geek @ Baltimore, MD who? what? where? how?
  3. Agenda Planning : The Mobile-First Approach Execution : Introduction to Bootstrap Management : Workflow, Tooling, Caveats
  4. responsive? Responsive to what? device type (screen width)
  5. responsive? Responsive to what? Device orientation
  6. responsive? Responsive to what? pixel density
  7. responsive? Responsive to what? MUCH higher resolutions
  8. responsive? Responsive to what?
  9. responsive? Responsive to what? device type (screen width) Phablets (Big-Ass Phones)
  10. responsive?
  11. responsive?
  12. responsive? Why not just: 1.  Detect mobile phone? 2.  Navigate to mobile site? 3.  Give option for “Desktop Version?”
  13. responsive? Why not just: 1.  Detect mobile phone? 2.  Navigate to mobile site? 3.  Give option for “Desktop Version?” Perhaps the desktop site is becoming a better default fit for (some) mobile?
  14. responsive? IOTthe internet of things
  15. responsive? (...and is only reflects the consumer market) IOTthe internet of things
  16. responsive? Responsive  to  WHAT  NOT?  
  17. planning
  18. mobile first Everyone says… FOCUS ON MOBILE!
  19. mobile first Everyone says… FOCUS ON MOBILE! … and they’re right! (but not just because of the monstrous mobile market)
  20. mobile first – market forces What percentage of web usage is mobile?
  21. mobile first – market forces What percentage of web usage is mobile? 25%
  22. mobile first – market forces What percentage of web usage is mobile? What percentage of adult internet users own a smart phone? 25%
  23. mobile first – market forces What percentage of web usage is mobile? What percentage of adult internet users own a smart phone? 25% 80%
  24. mobile first – market forces What percentage of web usage is mobile? What percentage of adult internet users own a smart phone? How many consumers worldwide own a smartphone? 25% 80%
  25. mobile first – market forces What percentage of web usage is mobile? What percentage of adult internet users own a smart phone? How many consumers worldwide own a smartphone? 25% 80% 1.8 billion (2 billion by 2016)
  26. mobile first – market forces What percentage of web usage is mobile? What percentage of adult internet users own a smart phone? How many consumers worldwide own a smartphone? In the U.S., what percentage of web users are mobile-only? 25% 80% 1.8 billion (2 billion by 2016)
  27. mobile first – market forces What percentage of web usage is mobile? What percentage of adult internet users own a smart phone? How many consumers worldwide own a smartphone? In the U.S., what percentage of web users are mobile-only? 25% 80% 1.8 billion (2 billion by 2016) 25%
  28. mobile first “With the mobile market as it is, what other reasons do I need?”
  29. mobile first “With the mobile market as it is, what other reasons do I need?” Mobile-first methodologies encourage best practices for most types of web production.
  30. mobile first “With the mobile market as it is, what other reasons do I need?” Mobile-first methodologies encourage best practices for most types of web production.  Content  Focus   Maintainability   Performance  
  31. content focus CONTENT OUT CONTENT FIRST Selective, prioritized content delivery. THIS IS THE MOST IMPORTANT THING I HAVE TO SAY.
  32. content focus CONTENT OUT CONTENT FIRST Selective, prioritized content delivery. THIS IS THE MOST IMPORTANT THING I HAVE TO SAY. How compelling can you make a story in the duration of an elevator ride?
  33. content focus Though there’s no competing with…
  34. content focus Lorem Ipsum is the enemy!
  35. content focus Lorem Ipsum is the enemy! Nam  odio  leo,  lacinia  in   metus  non,  convallis   elementum  leo.   Interdum  et  malesuada   fames  ac  ante  ipsum   primis  in  faucibus.   Quisque  dapibus   rhoncus  dignissim.  Class   aptent  taciF  sociosqu.   EFam  ut  lacus  pulvinar,   vulputate  augue  ac,   gravida  enim.  Donec  ac   justo  quis  nisi  suscipit   sollicitudin.  Mauris  nec   mi  preFum,  vulputate   lacus  in,  gravida  justo.   Duis  laoreet  ipsum   hendrerit  cursus.   Lorem  ipsum  dolor  sit   amet,  consectetur   adipiscing  elit.   Suspendisse  libero  sapien,   pharetra  gravida  sapien   id,  aliquam  luctus  risus.   Quisque  et  arcu  ac  enim   lacinia  viverra  et  massa.   Duis  laoreet  ipsum.   Lorem Ipsum Posuere  Massa Hendrerit  Cursus Fusce  quis  mauris  id  est  Fncidunt   aliquet.  Cras  fringilla  elit  augue,   vitae  ornare  turpis  pharetra  in.   Donec  vel  ipsum  non  est  viverra.   Praesent  justo  magna,  vesFbulum  nec  eleifend  in,  consectetur  sit  amet   ex.  Nulla  elementum  venenaFs  auctor.  Phasellus  vitae  sem  mollis,   vulputate  turpis  non,  cursus  ante.  Nullam  mollis,  urna  dictum  Fncidunt   porMtor,  lectus  mi  fringilla  orci,  ac  rhoncus  augue  libero  quis  odio.  EFam   at  iaculis  erat.  Praesent  pharetra  maMs  mauris.  Phasellus  ut  augue   eleifend,  rutrum  sapien  quis,  lacinia  turpis.  Aliquam  quis  ornare  quam.   Fusce  quis  mauris  id  est  Fncidunt  aliquet.  Cras   fringilla  elit  augue,  vitae  ornare  turpis  pharetra  in.   Donec  vel  ipsum  non  est  viverra.  Mauris  dolor  sapien,   gravida  vitae  nisi  ac,  vesFbulum  laoreet  arcu.  Cras   dapibus,  metus  porMtor  sodales  mollis,  velit.   Cras  fringilla  elit  augue,  vitae  ornare  turpis  pharetra   in.  Donec  vel  ipsum  non  est  viverra  faucibus.  Mauris   cursus  bibendum  nisi,  ac  egestas  sapien  euismod  a.   Vivamus  erat  mi,  gravida  ac  vesFbulum  et,  aliquam.   What’s going to happen?
  36. content focus Lorem Ipsum is the enemy! Nam  odio  leo,  lacinia  in   metus  non,  convallis   elementum  leo.   Interdum  et  malesuada   fames  ac  ante  ipsum   primis  in  faucibus.   Quisque  dapibus   rhoncus  dignissim.  Class   aptent  taciF  sociosqu.   EFam  ut  lacus  pulvinar,   vulputate  augue  ac,   gravida  enim.  Donec  ac   justo  quis  nisi  suscipit   sollicitudin.  Mauris  nec   mi  preFum,  vulputate   lacus  in,  gravida  justo.   Duis  laoreet  ipsum   hendrerit  cursus.   Lorem  ipsum  dolor  sit   amet,  consectetur   adipiscing  elit.   Suspendisse  libero  sapien,   pharetra  gravida  sapien   id,  aliquam  luctus  risus.   Quisque  et  arcu  ac  enim   lacinia  viverra  et  massa.   Duis  laoreet  ipsum.   Lorem Ipsum Posuere  Massa Hendrerit  Cursus Fusce  quis  mauris  id  est  Fncidunt   aliquet.  Cras  fringilla  elit  augue,   vitae  ornare  turpis  pharetra  in.   Donec  vel  ipsum  non  est  viverra.   Praesent  justo  magna,  vesFbulum  nec  eleifend  in,  consectetur  sit  amet   ex.  Nulla  elementum  venenaFs  auctor.  Phasellus  vitae  sem  mollis,   vulputate  turpis  non,  cursus  ante.  Nullam  mollis,  urna  dictum  Fncidunt   porMtor,  lectus  mi  fringilla  orci,  ac  rhoncus  augue  libero  quis  odio.  EFam   at  iaculis  erat.  Praesent  pharetra  maMs  mauris.  Phasellus  ut  augue   eleifend,  rutrum  sapien  quis,  lacinia  turpis.  Aliquam  quis  ornare  quam.   Fusce  quis  mauris  id  est  Fncidunt  aliquet.  Cras   fringilla  elit  augue,  vitae  ornare  turpis  pharetra  in.   Donec  vel  ipsum  non  est  viverra.  Mauris  dolor  sapien,   gravida  vitae  nisi  ac,  vesFbulum  laoreet  arcu.  Cras   dapibus,  metus  porMtor  sodales  mollis,  velit.   Cras  fringilla  elit  augue,  vitae  ornare  turpis  pharetra   in.  Donec  vel  ipsum  non  est  viverra  faucibus.  Mauris   cursus  bibendum  nisi,  ac  egestas  sapien  euismod  a.   Vivamus  erat  mi,  gravida  ac  vesFbulum  et,  aliquam.   What’s going to happen? Assumes the size of the content.
  37. content focus What’s going to happen?
  38. maintainability Progressive Enhancement instead of Graceful Degradation
  39. maintainability Progressive Enhancement instead of Graceful Degradation Graceful  DegradaFon   Control  compaFbility  from  complex  to  simple.   (SubtracFve)   Progressive  Enhancement   Control  compaFbility  from  simple  to  complex.   (AddiFve)  
  40. maintainability Progressive Enhancement instead of Graceful Degradation Progressive  Enhancement   Control  compaFbility  from  simple  to  complex.   (AddiFve)   Graceful degradation is often much more complicated than it would seem.
  41. performance Performance on mobile is critical: 1.  Short attention spans 2.  Competing with the performance of the carrier 3.  Mobile is less convenient than desktop
  42. performance Performance on mobile is critical: 1.  Short attention spans 2.  Competing with the performance of the carrier 3.  Mobile is less convenient than desktop Starting with mobile performance first makes us increasingly cognizant of performance for all devices.
  43. Performance Load only what you need: §  Media, libraries, frameworks §  Shrink, minify, optimize §  Less-expensive alternatives (CSS, SVG) §  Conditional loading §  Feature detection (Modernizr) §  TEST, TEST, TEST! (UI & UX)
  44. execution
  45. bootstrap 3 Awesomeness: §  Ease of use, quick ramp-up §  Fantastic grid system §  Customization §  Cross-browser consistent §  Components & Plugins §  Documentation & Community
  46. the bootstrap misconception “Every Bootstrap site looks the same.” They can, but…
  47. the bootstrap misconception §  Use as much or as little as you need. §  Change the defaults to anything. http://getbootstrap.com/customize/
  48. media queries Conditional CSS for media types & features. Example Types: §  Screen §  Print §  Speech §  TV §  (All) Example Features: §  width (display, device) §  height (display, device) §  resolution §  orientation §  color
  49. media queries Example Formats: @media screen and (min-width: 992px) { /* CSS selectors */ } @media print { /* Print selectors */ } @media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { /* Retina selectors */ }
  50. bootstrap 3 media queries Mobile first uses “min-width” (in most cases) @media (min-width: 768) { ... } @media (min-width: 992) { ... } @media (min-width: 1200px) { ... } Since  we’re  mobile-­‐first,  all  default   styles  are  for  the  smallest  targeted   display.  
  51. Container, Row, Column <div class=“container”> <div class=“row”> <div class=“col-[size]-[count]”></div> </div> </div> Enough  slides  already!   Let’s  dig  into  code  examples!  
  52. Offsets <div class=“container”> <div class=“row”> <div class=“col-[size]-[count] col-[size]-offset-[count]”> </div> </div> </div> MOAR  code  examples!  
  53. utility class example – pulls <div class=“container”> <div class=“row”> <div class=“col-xs-12”> <div class=“pull-left”>Hello</div> <div class=“pull-right”>World</div> </div> </div> </div> MOAR,  MOAR  code  examples!  
  54. resets – columns & offsets <div class=“container”> <div class=“row”> <div class=“col-md-6 col-lg-3”></div> <div class=“col-md-6 col-lg-9”></div> </div> </div> Wait  for  it…  
  55. resets – columns & offsets <div class=“container”> <div class=“row”> <div class=“col-md-6 col-md-offset-6” “col-lg-3 col-lg-offset-9> </div> </div> </div> Shazam!  More  Code!  
  56. management
  57. responsive workflows §  No more silos or assembly lines. §  Smartly iterate over the production process. §  Avoid premature fidelity. (Agile)  
  58. Eek, the traditional workflow! DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY PROJECT & ACCOUNT MGMT. CUSTOMER / STAKEHOLDER APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL Agile  of  Waterfall?  
  59. Eek, the traditional workflow! DISCOVER DESIGN DEVELOP (AGILE?) DEPLOY PROJECT & ACCOUNT MGMT. CUSTOMER / STAKEHOLDER APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL IT’S  A   WATERFALL!!  
  60. responsive workflows §  Stay iterative, agile. §  This isn’t easy! Risks:   •  Beauocracy   •  Work  InjecFon   •  Groupthink   •  “Oops,  we’re  not  actually  agile.”    
  61. responsive workflows §  Stay iterative, agile. §  This isn’t easy! Risks:   •  Beauocracy   •  Work  InjecFon   •  Groupthink   •  “Oops,  we’re  not  actually  agile.”    
  62. tools – CSS preprocessors CSS can get big fast! Keep it modular & manageable.
  63. tools – automation Bower NPM Yeoman Grunt Gulp
  64. Testing! And  many,  many  others!  
  65. responsive caveats §  Sometimes not the easiest sell to a client §  Contrary to the way we typically visualize §  Works better when starting from scratch §  Matching user expectation is trickier! §  Higher cost
  66. Questions? Eric Carlisle @eric_carlisle eric@ericcarlisle.com Not  very  creaMve,  is  he?  

×