SlideShare a Scribd company logo
1 of 66
Download to read offline
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?	
  

More Related Content

Viewers also liked

Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013  Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013 Sander Potjer
 
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Code Basic
 
10 Building Blocks for Enterprise JavaScript
10 Building Blocks for Enterprise JavaScript10 Building Blocks for Enterprise JavaScript
10 Building Blocks for Enterprise JavaScriptGeertjan Wielenga
 
59 Responses to “What’s the Best Business Advice You’ve Ever Received?”
59 Responses to “What’s the Best Business Advice You’ve Ever Received?”59 Responses to “What’s the Best Business Advice You’ve Ever Received?”
59 Responses to “What’s the Best Business Advice You’ve Ever Received?”Constant Contact
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignBart De Waele
 
Inspiring Quotes by Female Designers
Inspiring Quotes by Female DesignersInspiring Quotes by Female Designers
Inspiring Quotes by Female DesignersLogo Design Guru
 
Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3Liang-Hsuan Lin
 
Designing experiences nobody cares about
Designing experiences nobody cares aboutDesigning experiences nobody cares about
Designing experiences nobody cares aboutAdam Morris
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
Blind Spots in Persuasive Design
Blind Spots in Persuasive DesignBlind Spots in Persuasive Design
Blind Spots in Persuasive DesignSebastian Deterding
 
Intro to Wireframing, HCD & Design Thinking
Intro to Wireframing, HCD & Design ThinkingIntro to Wireframing, HCD & Design Thinking
Intro to Wireframing, HCD & Design ThinkingPriya Dandawate
 
Sex Addiction - The Secret Obsession
Sex Addiction - The Secret ObsessionSex Addiction - The Secret Obsession
Sex Addiction - The Secret ObsessionSACAP
 
Sex Addiction
Sex AddictionSex Addiction
Sex Addictionjaymundy6
 

Viewers also liked (18)

10 Building Blocks to Business Success
10 Building Blocks to Business Success10 Building Blocks to Business Success
10 Building Blocks to Business Success
 
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013  Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
Responsive websites with Joomla 3 & Bootstrap - Joomla!Day UK 2013
 
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
 
10 Building Blocks for Enterprise JavaScript
10 Building Blocks for Enterprise JavaScript10 Building Blocks for Enterprise JavaScript
10 Building Blocks for Enterprise JavaScript
 
Bootstrap [part 2]
Bootstrap [part 2]Bootstrap [part 2]
Bootstrap [part 2]
 
59 Responses to “What’s the Best Business Advice You’ve Ever Received?”
59 Responses to “What’s the Best Business Advice You’ve Ever Received?”59 Responses to “What’s the Best Business Advice You’ve Ever Received?”
59 Responses to “What’s the Best Business Advice You’ve Ever Received?”
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
10 CES 2015 Highlights
10 CES 2015 Highlights10 CES 2015 Highlights
10 CES 2015 Highlights
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Inspiring Quotes by Female Designers
Inspiring Quotes by Female DesignersInspiring Quotes by Female Designers
Inspiring Quotes by Female Designers
 
Narcissism
NarcissismNarcissism
Narcissism
 
Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3Introduction to Twitter Bootstrap 3.0.3
Introduction to Twitter Bootstrap 3.0.3
 
Designing experiences nobody cares about
Designing experiences nobody cares aboutDesigning experiences nobody cares about
Designing experiences nobody cares about
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Blind Spots in Persuasive Design
Blind Spots in Persuasive DesignBlind Spots in Persuasive Design
Blind Spots in Persuasive Design
 
Intro to Wireframing, HCD & Design Thinking
Intro to Wireframing, HCD & Design ThinkingIntro to Wireframing, HCD & Design Thinking
Intro to Wireframing, HCD & Design Thinking
 
Sex Addiction - The Secret Obsession
Sex Addiction - The Secret ObsessionSex Addiction - The Secret Obsession
Sex Addiction - The Secret Obsession
 
Sex Addiction
Sex AddictionSex Addiction
Sex Addiction
 

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

170424 isaca lux slides
170424 isaca lux slides170424 isaca lux slides
170424 isaca lux slidesHenri Kuiper
 
Empowering users to reclaim their Privacy
Empowering users to reclaim their PrivacyEmpowering users to reclaim their Privacy
Empowering users to reclaim their PrivacyOperando Consortium
 
Web typography
Web typographyWeb typography
Web typographyIdan Gazit
 
Getting Value out of Customer Interactions
Getting Value out of Customer InteractionsGetting Value out of Customer Interactions
Getting Value out of Customer InteractionsRahul Abhyankar
 
Drupal camp DUBAI 2013
Drupal camp DUBAI 2013Drupal camp DUBAI 2013
Drupal camp DUBAI 2013thedeeper
 
TCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customers
TCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customersTCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customers
TCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customersTCUK Conference
 
UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...
UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...
UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...UTICamp
 
Why would we want to talk to customers or them to us? TCUK 2012
Why would we want to talk to customers or them to us? TCUK 2012Why would we want to talk to customers or them to us? TCUK 2012
Why would we want to talk to customers or them to us? TCUK 2012Ian Ampleford
 
Harnessing the Power of the Visual
Harnessing the Power of the VisualHarnessing the Power of the Visual
Harnessing the Power of the VisualKathleen A. Paris
 
Free digital marketing strategy template presentation
Free digital marketing strategy template presentation Free digital marketing strategy template presentation
Free digital marketing strategy template presentation Dylan Miller
 
Sample Presentation
Sample PresentationSample Presentation
Sample Presentationcacurtis123
 
digital-marketing.pptx
digital-marketing.pptxdigital-marketing.pptx
digital-marketing.pptxCARLOS infante
 
Operando Presentation in Athens 2018
Operando Presentation in Athens 2018Operando Presentation in Athens 2018
Operando Presentation in Athens 2018Operando Consortium
 
Alexander Graebe
Alexander GraebeAlexander Graebe
Alexander GraebeCodeFest
 
week3_garst_107357_mockupv1
week3_garst_107357_mockupv1week3_garst_107357_mockupv1
week3_garst_107357_mockupv1Ashley Garst
 
Bring Your Own Policy: Internet Use/BYOD Policy by consensus
Bring Your Own Policy:  Internet Use/BYOD Policy by consensus Bring Your Own Policy:  Internet Use/BYOD Policy by consensus
Bring Your Own Policy: Internet Use/BYOD Policy by consensus Michael Scheidell
 

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

170424 isaca lux slides
170424 isaca lux slides170424 isaca lux slides
170424 isaca lux slides
 
Pitch deck premium
Pitch deck premiumPitch deck premium
Pitch deck premium
 
Empowering users to reclaim their Privacy
Empowering users to reclaim their PrivacyEmpowering users to reclaim their Privacy
Empowering users to reclaim their Privacy
 
Pitch Deck Premium Classic
Pitch Deck Premium ClassicPitch Deck Premium Classic
Pitch Deck Premium Classic
 
Web typography
Web typographyWeb typography
Web typography
 
Getting Value out of Customer Interactions
Getting Value out of Customer InteractionsGetting Value out of Customer Interactions
Getting Value out of Customer Interactions
 
Drupal camp DUBAI 2013
Drupal camp DUBAI 2013Drupal camp DUBAI 2013
Drupal camp DUBAI 2013
 
TCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customers
TCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customersTCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customers
TCUK 2012, Ian Ampleford and Peter Jones, Why would we want to talk to customers
 
UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...
UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...
UTICamp-2020. Size Does Matter, or Is the translation Industry Restructuring ...
 
Anstest1
Anstest1Anstest1
Anstest1
 
Why would we want to talk to customers or them to us? TCUK 2012
Why would we want to talk to customers or them to us? TCUK 2012Why would we want to talk to customers or them to us? TCUK 2012
Why would we want to talk to customers or them to us? TCUK 2012
 
Harnessing the Power of the Visual
Harnessing the Power of the VisualHarnessing the Power of the Visual
Harnessing the Power of the Visual
 
Free digital marketing strategy template presentation
Free digital marketing strategy template presentation Free digital marketing strategy template presentation
Free digital marketing strategy template presentation
 
Sample Presentation
Sample PresentationSample Presentation
Sample Presentation
 
digital-marketing.pptx
digital-marketing.pptxdigital-marketing.pptx
digital-marketing.pptx
 
Operando Presentation in Athens 2018
Operando Presentation in Athens 2018Operando Presentation in Athens 2018
Operando Presentation in Athens 2018
 
Alexander Graebe
Alexander GraebeAlexander Graebe
Alexander Graebe
 
week3_garst_107357_mockupv1
week3_garst_107357_mockupv1week3_garst_107357_mockupv1
week3_garst_107357_mockupv1
 
Bring Your Own Policy: Internet Use/BYOD Policy by consensus
Bring Your Own Policy:  Internet Use/BYOD Policy by consensus Bring Your Own Policy:  Internet Use/BYOD Policy by consensus
Bring Your Own Policy: Internet Use/BYOD Policy by consensus
 
Business Model Innovation
Business Model InnovationBusiness Model Innovation
Business Model Innovation
 

Recently uploaded

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (20)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

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