Responsive Design - Planning, Execution, Management with Bootstrap 3

Eric Carlisle
Eric CarlisleUI Developer, UX Designer en Eric Carlisle Consulting
responsive design
Planning	
   Execution 	
  + 	
   + 	
  Management	
  
With
 OOTSTRAP 3
h#ps://github.com/ecarlisle/responsive-­‐design-­‐pem	
  @eric_carlisle	
  
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?”
Perhaps the desktop site is
becoming a better default fit
for (some) mobile?
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 phone?
25%
mobile first – market forces
What percentage of web usage is mobile?
What percentage of adult internet users
own a smart phone?

25%

80%
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%
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)
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)
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%
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
practices for most types of web production.
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	
  
content focus
CONTENT OUT
CONTENT FIRST
Selective,
prioritized
content delivery.
THIS IS THE MOST
IMPORTANT
THING I HAVE TO
SAY.
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?
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	
  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?
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.
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	
  from	
  complex	
  to	
  simple.	
  
(SubtracFve)	
  
Progressive	
  Enhancement	
  
Control	
  compaFbility	
  from	
  simple	
  to	
  complex.	
  
(AddiFve)	
  
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.
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
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.
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)
execution
bootstrap 3
Awesomeness:
§  Ease of use, quick ramp-up
§  Fantastic grid system
§  Customization
§  Cross-browser consistent
§  Components & Plugins
§  Documentation & Community
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://getbootstrap.com/customize/
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
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 */
}
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.	
  
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!	
  
Offsets
<div class=“container”>
<div class=“row”>
<div class=“col-[size]-[count]
col-[size]-offset-[count]”>
</div>
</div>
</div>
MOAR	
  code	
  examples!	
  
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!	
  
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…	
  
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!	
  
management
responsive workflows
§  No more silos or assembly lines.
§  Smartly iterate over the production process.
§  Avoid premature fidelity.
(Agile)	
  
Eek, the traditional workflow!
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
PROJECT &
ACCOUNT
MGMT.
CUSTOMER /
STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
Agile	
  of	
  Waterfall?	
  
Eek, the traditional workflow!
DISCOVER DESIGN
DEVELOP
(AGILE?)
DEPLOY
PROJECT &
ACCOUNT
MGMT.
CUSTOMER /
STAKEHOLDER
APPROVAL APPROVAL APPROVAL APPROVAL APPROVAL
IT’S	
  A	
  
WATERFALL!!	
  
responsive workflows
§  Stay iterative, agile.
§  This isn’t easy!
Risks:	
  
•  Beauocracy	
  
•  Work	
  InjecFon	
  
•  Groupthink	
  
•  “Oops,	
  we’re	
  not	
  actually	
  agile.”	
  	
  
responsive workflows
§  Stay iterative, agile.
§  This isn’t easy!
Risks:	
  
•  Beauocracy	
  
•  Work	
  InjecFon	
  
•  Groupthink	
  
•  “Oops,	
  we’re	
  not	
  actually	
  agile.”	
  	
  
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 better when starting from scratch
§  Matching user expectation is trickier!
§  Higher cost
Questions?
Eric Carlisle
@eric_carlisle
eric@ericcarlisle.com
Not	
  very	
  creaMve,	
  is	
  he?	
  
1 de 66

Más contenido relacionado

Destacado(18)

10 Building Blocks to Business Success10 Building Blocks to Business Success
10 Building Blocks to Business Success
Entrepreneur Accreditation & Resource Network1K vistas
10 Building Blocks for Enterprise JavaScript10 Building Blocks for Enterprise JavaScript
10 Building Blocks for Enterprise JavaScript
Geertjan Wielenga616 vistas
Bootstrap [part 2]Bootstrap [part 2]
Bootstrap [part 2]
Ghanshyam Patel893 vistas
BootstrapBootstrap
Bootstrap
Jadson Santos31.3K vistas
10 CES 2015 Highlights10 CES 2015 Highlights
10 CES 2015 Highlights
iTawy Community8K vistas
Responsive webdesignResponsive webdesign
Responsive webdesign
Bart De Waele4.7K vistas
Inspiring Quotes by Female DesignersInspiring Quotes by Female Designers
Inspiring Quotes by Female Designers
Logo Design Guru23K vistas
NarcissismNarcissism
Narcissism
Steve Bishop1.2K vistas
Introduction to Twitter Bootstrap 3.0.3Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3
Liang-Hsuan Lin3.7K vistas
Blind Spots in Persuasive DesignBlind Spots in Persuasive Design
Blind Spots in Persuasive Design
Sebastian Deterding5.5K vistas
Intro to Wireframing, HCD & Design ThinkingIntro to Wireframing, HCD & Design Thinking
Intro to Wireframing, HCD & Design Thinking
Priya Dandawate15.6K vistas
Sex AddictionSex Addiction
Sex Addiction
jaymundy61.4K vistas

Similar a Responsive Design - Planning, Execution, Management with Bootstrap 3

170424 isaca lux slides170424 isaca lux slides
170424 isaca lux slidesHenri Kuiper
126 vistas70 diapositivas
Pitch deck premiumPitch deck premium
Pitch deck premiumenergiadeportugal2015
418 vistas71 diapositivas
Web typographyWeb typography
Web typographyIdan Gazit
3.1K vistas46 diapositivas

Similar a Responsive Design - Planning, Execution, Management with Bootstrap 3(20)

170424 isaca lux slides170424 isaca lux slides
170424 isaca lux slides
Henri Kuiper126 vistas
Pitch deck premiumPitch deck premium
Pitch deck premium
energiadeportugal2015418 vistas
Empowering users to reclaim their PrivacyEmpowering users to reclaim their Privacy
Empowering users to reclaim their Privacy
Operando Consortium300 vistas
Pitch Deck Premium ClassicPitch Deck Premium Classic
Pitch Deck Premium Classic
Improve Presentation1.6K vistas
Web typographyWeb typography
Web typography
Idan Gazit3.1K vistas
Getting Value out of Customer InteractionsGetting Value out of Customer Interactions
Getting Value out of Customer Interactions
Rahul Abhyankar284 vistas
Drupal camp DUBAI 2013Drupal camp DUBAI 2013
Drupal camp DUBAI 2013
thedeeper811 vistas
Anstest1Anstest1
Anstest1
Carolina Souza76 vistas
Harnessing the Power of the VisualHarnessing the Power of the Visual
Harnessing the Power of the Visual
Kathleen A. Paris15 vistas
Sample PresentationSample Presentation
Sample Presentation
cacurtis123301 vistas
digital-marketing.pptxdigital-marketing.pptx
digital-marketing.pptx
CARLOS infante9 vistas
Operando Presentation in Athens 2018Operando Presentation in Athens 2018
Operando Presentation in Athens 2018
Operando Consortium222 vistas
Alexander GraebeAlexander Graebe
Alexander Graebe
CodeFest245 vistas
week3_garst_107357_mockupv1week3_garst_107357_mockupv1
week3_garst_107357_mockupv1
Ashley Garst101 vistas
Business Model InnovationBusiness Model Innovation
Business Model Innovation
KR Krishna CBAP, PMP678 vistas

Último

Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdfAtiqur Rahaman
15 vistas30 diapositivas
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptxAmir Ansari
49 vistas77 diapositivas
evidence .pptxevidence .pptx
evidence .pptxnpgkddpbpd
9 vistas4 diapositivas
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.docssuserc40b91
6 vistas3 diapositivas
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdfhjksa
16 vistas5 diapositivas

Último(20)

Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman15 vistas
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari49 vistas
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 vistas
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 vistas
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 vistas
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe239 vistas
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear8 vistas
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 vistas
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28213 vistas
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper216 vistas
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 vistas
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts14 vistas
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen7 vistas
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris80 vistas
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media12 vistas
polarispolaris
polaris
scribddarkened352233 vistas
Viking passive.pdfViking passive.pdf
Viking passive.pdf
Matis Velt15 vistas
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 vistas
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 vistas

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
  • 9. responsive? Responsive to what? device type (screen width) Phablets (Big-Ass Phones)
  • 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?
  • 15. responsive? (...and is only reflects the consumer market) IOTthe internet of things
  • 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.
  • 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)
  • 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!  
  • 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
  • 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