Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
responsive design
Planning	
   Execution 	
  + 	
   + 	
  Management	
  
With
 OOTSTRAP 3
h#ps://github.com/ecarlisle/resp...
me, myself, and i
Eric Carlisle
UI / UX Geek @ 
Baltimore, MD 
who?
what?
where?
how?
Agenda
Planning : The Mobile-First Approach
Execution : Introduction to Bootstrap
Management : Workflow, Tooling, Caveats
responsive?
Responsive to what?
device type (screen width)
responsive?
Responsive to what?
Device orientation
responsive?
Responsive to what?
pixel density
responsive?
Responsive to what?
MUCH higher resolutions
responsive?
Responsive to what?
responsive?
Responsive to what?
device type (screen width)
Phablets
(Big-Ass Phones)
responsive?
responsive?
responsive?
Why not just: 
1.  Detect mobile phone?
2.  Navigate to mobile site?
3.  Give option for “Desktop
Version?”
responsive?
Why not just: 
1.  Detect mobile phone?
2.  Navigate to mobile site?
3.  Give option for “Desktop
Version?”
Pe...
responsive?
IOTthe internet of things
responsive?
(...and is only reflects the consumer market)
IOTthe internet of things
responsive?
Responsive	
  to	
  WHAT	
  NOT?	
  
planning
mobile first
Everyone says…
FOCUS ON
MOBILE!
mobile first
Everyone says…
FOCUS ON
MOBILE!
… and they’re right!
(but not just because of the monstrous mobile market)
mobile first – market forces
What percentage of web usage is mobile?
mobile first – market forces
What percentage of web usage is mobile?
 25%
mobile first – market forces
What percentage of web usage is mobile?

What percentage of adult internet users
own a smart ...
mobile first – market forces
What percentage of web usage is mobile?
What percentage of adult internet users
own a smart p...
mobile first – market forces
What percentage of web usage is mobile?

What percentage of adult internet users
own a smart ...
mobile first – market forces
What percentage of web usage is mobile?

What percentage of adult internet users
own a smart ...
mobile first – market forces
What percentage of web usage is mobile?


What percentage of adult internet users
own a smart...
mobile first – market forces
What percentage of web usage is mobile?

What percentage of adult internet users
own a smart ...
mobile first
“With the mobile market as it is, what other reasons do I need?”
mobile first
“With the mobile market as it is, what other reasons do I need?”
Mobile-first methodologies encourage best
pr...
mobile first
“With the mobile market as it is, what other reasons do I need?”
Mobile-first methodologies encourage best
pr...
content focus
CONTENT OUT
CONTENT FIRST
Selective,
prioritized
content delivery.
THIS IS THE MOST
IMPORTANT
THING I HAVE T...
content focus
CONTENT OUT
CONTENT FIRST
Selective,
prioritized
content delivery.
THIS IS THE MOST
IMPORTANT
THING I HAVE T...
content focus
Though there’s no competing with…
content focus
Lorem Ipsum is the enemy!
content focus
Lorem Ipsum is the enemy!
Nam	
  odio	
  leo,	
  lacinia	
  in	
  
metus	
  non,	
  convallis	
  
elementum	...
content focus
Lorem Ipsum is the enemy!
Nam	
  odio	
  leo,	
  lacinia	
  in	
  
metus	
  non,	
  convallis	
  
elementum	...
content focus
What’s going to happen?
maintainability
Progressive Enhancement
instead of
Graceful Degradation
maintainability
Progressive Enhancement
instead of
Graceful Degradation
Graceful	
  DegradaFon	
  
Control	
  compaFbility...
maintainability
Progressive Enhancement
instead of
Graceful Degradation
Progressive	
  Enhancement	
  
Control	
  compaFbi...
performance
Performance on mobile is critical:
1.  Short attention spans
2.  Competing with the performance of the carrier...
performance
Performance on mobile is critical:
1.  Short attention spans
2.  Competing with the performance of the carrier...
Performance
Load only what you need:
§  Media, libraries, frameworks
§  Shrink, minify, optimize
§  Less-expensive alte...
execution
bootstrap 3
Awesomeness:
§  Ease of use, quick ramp-up
§  Fantastic grid system
§  Customization
§  Cross-browser cons...
the bootstrap misconception
“Every Bootstrap site looks the same.”
They can, but…
the bootstrap misconception
§  Use as much or as little as you need.
§  Change the defaults to anything.
http://getboots...
media queries
Conditional CSS for media types & features.
Example Types:
§  Screen
§  Print
§  Speech
§  TV
§  (All)
...
media queries
Example Formats:
@media screen and (min-width: 992px) {
/* CSS selectors */
}
@media print {
/* Print select...
bootstrap 3 media queries
Mobile first uses “min-width”
(in most cases)




@media (min-width: 768) { ... }
@media (min-wi...
Container, Row, Column
<div class=“container”>
<div class=“row”>
<div class=“col-[size]-[count]”></div>
</div>
</div>
Enou...
Offsets
<div class=“container”>
<div class=“row”>
<div class=“col-[size]-[count]
col-[size]-offset-[count]”>
</div>
</div>...
utility class example – pulls
<div class=“container”>
<div class=“row”>
<div class=“col-xs-12”>
<div class=“pull-left”>Hel...
resets – columns & offsets
<div class=“container”>
<div class=“row”>
<div class=“col-md-6 col-lg-3”></div>
<div class=“col...
resets – columns & offsets
<div class=“container”>
<div class=“row”>
<div class=“col-md-6 col-md-offset-6”
“col-lg-3 col-l...
management
responsive workflows
§  No more silos or assembly lines.
§  Smartly iterate over the production process.
§  Avoid prema...
Eek, the traditional workflow!
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
PROJECT &
ACCOUNT
MGMT.
CUSTOMER /
STAKEHOLDER
APPR...
Eek, the traditional workflow!
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
PROJECT &
ACCOUNT
MGMT.
CUSTOMER /
STAKEHOLDER
APPR...
responsive workflows
§  Stay iterative, agile.
§  This isn’t easy!
Risks:	
  
•  Beauocracy	
  
•  Work	
  InjecFon	
  
...
responsive workflows
§  Stay iterative, agile.
§  This isn’t easy!
Risks:	
  
•  Beauocracy	
  
•  Work	
  InjecFon	
  
...
tools – CSS preprocessors
CSS can get big fast!
Keep it modular & manageable.
tools – automation
Bower
 NPM
 Yeoman
Grunt
 Gulp
Testing!
And	
  many,	
  many	
  others!	
  
responsive caveats
§  Sometimes not the easiest sell to a client
§  Contrary to the way we typically visualize
§  Works...
Questions?
Eric Carlisle
@eric_carlisle
eric@ericcarlisle.com
Not	
  very	
  creaMve,	
  is	
  he?	
  
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Refreshing Your UI with HTML5, Bootstrap and CSS3
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

162

Partager

Télécharger pour lire hors ligne

Responsive Design - Planning, Execution, Management with Bootstrap 3

Télécharger pour lire hors ligne

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.

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?  
  • MarcoVossen

    Aug. 18, 2018
  • markyholic

    Oct. 7, 2017
  • LydiaCrestani1

    Jul. 9, 2017
  • YassinMohamed7

    Apr. 30, 2016
  • MatteoPoile

    Jan. 18, 2016
  • wilsontse88

    Oct. 31, 2015
  • juitao

    Sep. 4, 2015
  • SairamPanigrahi

    Aug. 18, 2015
  • SyamBabuPMP

    Jul. 25, 2015
  • amrsami967

    Jun. 26, 2015
  • jimmiethesun

    Jun. 10, 2015
  • jessicasarto28

    May. 20, 2015
  • JungKim2

    May. 19, 2015
  • debop

    May. 19, 2015
  • JayLan2

    May. 17, 2015
  • brainbertolucci

    May. 12, 2015
  • nathaliacamargo33

    May. 10, 2015
  • Anamariag9151

    Apr. 25, 2015
  • greotutar

    Apr. 22, 2015
  • RuGaL

    Apr. 22, 2015

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.

Vues

Nombre de vues

13 423

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

420

Actions

Téléchargements

527

Partages

0

Commentaires

0

Mentions J'aime

162

×