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.
What? Why? How?What is responsive web design? Andwhy should you use it?How to create a responsive layoutHow to ensure all ...
What is A Responsive WebSITE?A fluid layout and flexible images adaptedwith media queries
Responsive vs. AdaptiveA fluid grid layoutAdditional changesapplied with MediaQueriesMultiple fixed widthlayoutsLayout cha...
WHY GO Responsive?No good reason to limit mobile contentMany people have mobile devices as theirprimary internet accessThe...
Basic ComponentsA flexible, grid-based layoutFlexible images and mediaMedia queries for specific adjustments
Fluid on smaller screens+ fixed maximum sizeHybrid ApproachesOne column flexible+ one column fixed
Plan at least 3 size layoutsCreate responsive wireframes:http://foundation.zurb.comExamplePay attention to order and flowDe...
Let’s Get Started!AmeliaMarschall.com
Fluid wrapper:#page { !
width: 90%;!
max-width: 960px; !
margin: 15px auto; }!or#page { 
width: 960px; 
max-width: 90%;
ma...
Float columns:!#LeftColumn {
float: left;
width: 70%; }!!#RightColumn {
float: right;
width: 30%; }!Set a fluid grid
Set Fixed Margins (really, It’s Ok!)Use CSS Box SizingStandard box model:Padding & borderadded on to width/heightbox-sizin...
#LeftColumn {
padding: 10px 20px;!
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;!
box-sizing:border-box; }!
#...
Nested ColumnsWidths set with percentage are relative totheir container element!
Nested Columns#ContentLeft {
  float: left;
width: 60%;
padding-right: 40px;
box-sizing: border-box; }!
#ContentRight {
  ...
Make Changes with Media QueriesMedia queries serve different CSS basedon your browser size or typeInclude directly in your...
Make Changes with Media QueriesDefine regular (desktop site) styles, then:•  @media (max-width: 900px) { }!•  @media (max-w...
Or, go “mobile first”:•  @media (min-width: 480px) { }!•  @media (min-width: 720px) { }!•  Etc…!Better for performance!Make...
Make Changes with Media Queries
@media only works in IE 9 +•  Javascript polyfill for IE 8 and below:–  https://github.com/scottjehl/Respond–  Adds support...
Example Site Queries@media (max-width: 900px) {!#ContentLeft, #ContentRight {! 
! ! width:100%;! !
padding:0; !!}
}!
@media (max-width: 900px)!
@media (max-width: 730px) { 
#LeftColumn, #RightColumn { ! !! width: 100%;! !
!}

#FooterLeft, #FooterMiddle, !! #FooterRi...
@media (max-width: 650px) {
#primary .show-mobile {! !
! display: block; ! !
padding: 20px 20px 20px 64px;! ! background: ...
@media (max-width: 470px) { 
!#page {! !
width:96%; ! !
margin:5px auto; } !!#branding hgroup { !
width: 100%; } ! !
#prim...
Set Font SizesSet font sizes in rem’s:•  html { font-size: 62.5%; } !•  body { font-size: 14px; 
font-size: 1.4rem; } !•  ...
Set (or don’t set) Media SizesEnsure media always stays within set columns:•  img, object, embed, iframe, video{ max-width...
Load Specifically-sized imagesUse mobile-first media queries to only loadlarger images once neededOr use Adaptive Images: a...
Hide Contentdisplay:none!•  Hide unnecessary content for mobile•  Add mobile only content withdisplay:none in the regular ...
Hide ContentEXTRA Important Note:display:none hides content but(generally) does not improve performance!Hiding images:Sett...
Responsive Menu OptionsUse unordered list menu layouts:<nav> 
<ul> 
<li><a href="/”>Home</a></li> 
<li><a href="/About.asp...
1. Flow the menu onto two lines
1. Flow the menu onto two linesWhat a horizontal unordered list willnaturally doCan hide submenu dropdowns (Ifaccessible e...
Tutorial: http://designshack.net/articles/css/code-a-responsive-navigation-menu1. Flow the menu onto two lines
When to use it?Submenus don’t need to be accessedItems will fit on two linesItems not expected to change oftenA solution wi...
2. Switch a horizontal menu to vertical
2. Switch a horizontal menu to verticalRegular CSS:•  nav ul li { float:left; }!Mobile-size CSS:•  @media (max-width: 480p...
Tutorial to include dropdown submenus:http://ejhansel.com/a-responsive-drop-down-navigation-menu•  Based on Suckerfish drop...
2. Switch a horizontal menu to verticalWhen to use it?More menu itemsLonger page namesCan choose whether to include submen...
3. Switch to an expandable menu button
3. Switch to an expandable menu buttonSimilar to switching a horizontal menuto vertical, with the addition of hidingthe me...
•  Regular CSS:.show-mobile { display: none; }!•  CSS to show the button and hide the menu for mobile:@media (max-width: 7...
An in-depth, mobile-first menu tutorial:•  http://azadcreative.com/2012/07/responsive-mobile-first-navigation-menu•  Uses a ...
When to use it?Want mobile menu to fit in a small areaWant a highly stylable, flexible optionMore menu items and/or longer p...
4. Switch to a dropdown (select) menu
4. Switch to a dropdown (select) menuUses efficient native mobile controlsUse jQuery to dynamically swap:<nav>
<ul> 
<li><a...
Similar options that switch <ul> to <select>:•  TinyNav.js:–  Uses jQuery, small file size–  https://github.com/viljamis/Ti...
When to use it?Want mobile menu to fit in a small areaWant native controls for the mobile menuMore menu items and/or longer...
Remember the ViewportEnsure mobile browsers will scale to viewyour site correctlyInclude in the <head> :<meta name="viewpo...
Resources•  Responsive Web Design (A Book Apart 4):Ethan Marcotte•  Implementing Responsive Design:Tim Kadlec•  MediaQueri...
Amelia Marschall-MillerGravity Works Design + DevelopmentPartner & Creative DirectorGravityWorksDesign.comAmeliaMarschall....
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
Prochain SlideShare
Chargement dans…5
×

Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)

5 635 vues

Publié le

Publié dans : Technologie, Design
  • Soyez le premier à commenter

Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)

  1. 1. What? Why? How?What is responsive web design? Andwhy should you use it?How to create a responsive layoutHow to ensure all site elements workin that layoutSetting breakpoint changes withMedia QueriesResponsive menu options
  2. 2. What is A Responsive WebSITE?A fluid layout and flexible images adaptedwith media queries
  3. 3. Responsive vs. AdaptiveA fluid grid layoutAdditional changesapplied with MediaQueriesMultiple fixed widthlayoutsLayout changes atset breakpoints(with Media Queries)
  4. 4. WHY GO Responsive?No good reason to limit mobile contentMany people have mobile devices as theirprimary internet accessThe lines between mobile/tablet/desktopare becoming blurredAlternative to native mobile apps
  5. 5. Basic ComponentsA flexible, grid-based layoutFlexible images and mediaMedia queries for specific adjustments
  6. 6. Fluid on smaller screens+ fixed maximum sizeHybrid ApproachesOne column flexible+ one column fixed
  7. 7. Plan at least 3 size layoutsCreate responsive wireframes:http://foundation.zurb.comExamplePay attention to order and flowDesigning Responsively
  8. 8. Let’s Get Started!AmeliaMarschall.com
  9. 9. Fluid wrapper:#page { !
width: 90%;!
max-width: 960px; !
margin: 15px auto; }!or#page { 
width: 960px; 
max-width: 90%;
margin: 15px auto; }!Set a fluid grid
  10. 10. Float columns:!#LeftColumn {
float: left;
width: 70%; }!!#RightColumn {
float: right;
width: 30%; }!Set a fluid grid
  11. 11. Set Fixed Margins (really, It’s Ok!)Use CSS Box SizingStandard box model:Padding & borderadded on to width/heightbox-sizing:content-box!New box model:Padding & bordersubtracted fromwidth/heightbox-sizing:border-box!
  12. 12. #LeftColumn {
padding: 10px 20px;!
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;!
box-sizing:border-box; }!
#RightColumn {
padding: 10px;!
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;!
box-sizing:border-box;
border: 1px solid #627A7E; }!IE Polyfill: (Natively supported in IE8+)https://github.com/Schepp/box-sizing-polyfillSet Fixed Margins (Actually padding)
  13. 13. Nested ColumnsWidths set with percentage are relative totheir container element!
  14. 14. Nested Columns#ContentLeft {
  float: left;
width: 60%;
padding-right: 40px;
box-sizing: border-box; }!
#ContentRight {
   float: left;
width: 40%;
box-sizing: border-box; }!
  15. 15. Make Changes with Media QueriesMedia queries serve different CSS basedon your browser size or typeInclude directly in your CSS file, at the end:@media (max-width: 900px) { }!!Or link separate CSS files from your HTML:<link rel=“stylesheet” type=“text/css” href=“style.css” media=“alland (min-width: 481px)”>!
  16. 16. Make Changes with Media QueriesDefine regular (desktop site) styles, then:•  @media (max-width: 900px) { }!•  @media (max-width: 720px) { }!•  @media (max-width: 480px) { }!•  @media (max-width: 320px) { }!
  17. 17. Or, go “mobile first”:•  @media (min-width: 480px) { }!•  @media (min-width: 720px) { }!•  Etc…!Better for performance!Make Changes with Media Queries
  18. 18. Make Changes with Media Queries
  19. 19. @media only works in IE 9 +•  Javascript polyfill for IE 8 and below:–  https://github.com/scottjehl/Respond–  Adds support for media queries set withmin-width/max-width•  For wider media query support:–  http://code.google.com/p/css3-mediaqueries-js•  Or use conditional comments to link to IE CSSMedia Queries & IE
  20. 20. Example Site Queries@media (max-width: 900px) {!#ContentLeft, #ContentRight {! 
! ! width:100%;! !
padding:0; !!}
}!
  21. 21. @media (max-width: 900px)!
  22. 22. @media (max-width: 730px) { 
#LeftColumn, #RightColumn { ! !! width: 100%;! !
!}

#FooterLeft, #FooterMiddle, !! #FooterRight {! !
width: 100%; ! !
margin: 0 0 20px 0; !! !}
}!Example Site Queries
  23. 23. @media (max-width: 650px) {
#primary .show-mobile {! !
! display: block; ! !
padding: 20px 20px 20px 64px;! ! background: url(images/mobile-! ! menu.png) no-repeat #8CC8D8;!!! }
}!Example Site Queries
  24. 24. @media (max-width: 470px) { 
!#page {! !
width:96%; ! !
margin:5px auto; } !!#branding hgroup { !
width: 100%; } ! !
#primary {! !
margin: 0 0 10px 0;! !
width:100%; }
#primary .show-mobile { ! !
width:100%;!}
}!Example Site Queries
  25. 25. Set Font SizesSet font sizes in rem’s:•  html { font-size: 62.5%; } !•  body { font-size: 14px; 
font-size: 1.4rem; } !•  h1 { font-size: 24px; 
font-size: 2.4rem; } !•  Can change body size % in @media toadjust all site fontsUse Fittext.js for scalable headlines that fitthe width of its surrounding element.
  26. 26. Set (or don’t set) Media SizesEnsure media always stays within set columns:•  img, object, embed, iframe, video{ max-width:100%; }
!•  Do not set inline height and width ofimages or media•  Use Fitvidsjs.com for video (unless actuallyusing the <video> element)
  27. 27. Load Specifically-sized imagesUse mobile-first media queries to only loadlarger images once neededOr use Adaptive Images: adaptive-images.com•  Detects screen size.•  Automatically creates, caches, and delivers re-scaledversions of embedded HTML images.•  No mark-up changes needed.•  Original PHP by Matt Wilcox. Ports for .NET and ColdFusion, Plugins for Wordpress and Drupal.
  28. 28. Hide Contentdisplay:none!•  Hide unnecessary content for mobile•  Add mobile only content withdisplay:none in the regular CSSImportant Note: Use Sparingly!-  Don’t limit content
  29. 29. Hide ContentEXTRA Important Note:display:none hides content but(generally) does not improve performance!Hiding images:Setting parent element to display:nonewill prevent the image from being loaded.
  30. 30. Responsive Menu OptionsUse unordered list menu layouts:<nav> 
<ul> 
<li><a href="/”>Home</a></li> 
<li><a href="/About.aspx">About</a></li> 
<li><a href="/Speaking.aspx">Speaking</a></li> 
<li><a href="/Contact.aspx">Contact</a></li> 
</ul> 
</nav>!
  31. 31. 1. Flow the menu onto two lines
  32. 32. 1. Flow the menu onto two linesWhat a horizontal unordered list willnaturally doCan hide submenu dropdowns (Ifaccessible elsewhere)•  nav ul li ul { display:none; }!Use media queries to reduce font sizesbefore breaking to two lines
  33. 33. Tutorial: http://designshack.net/articles/css/code-a-responsive-navigation-menu1. Flow the menu onto two lines
  34. 34. When to use it?Submenus don’t need to be accessedItems will fit on two linesItems not expected to change oftenA solution without Javascript is desiredMinimal effort desired1. Flow the menu onto two lines
  35. 35. 2. Switch a horizontal menu to vertical
  36. 36. 2. Switch a horizontal menu to verticalRegular CSS:•  nav ul li { float:left; }!Mobile-size CSS:•  @media (max-width: 480px) { 
nav ul li { float:none; ! !! width:100%; }!}!Can hide submenu dropdowns (If accessibleelsewhere)•  nav ul li ul { display:none; }!
  37. 37. Tutorial to include dropdown submenus:http://ejhansel.com/a-responsive-drop-down-navigation-menu•  Based on Suckerfish dropdowns•  Uses :hover to expand submenus2. Switch a horizontal menu to vertical
  38. 38. 2. Switch a horizontal menu to verticalWhen to use it?More menu itemsLonger page namesCan choose whether to include submenusA solution without Javascript is desiredMinimal effort desired
  39. 39. 3. Switch to an expandable menu button
  40. 40. 3. Switch to an expandable menu buttonSimilar to switching a horizontal menuto vertical, with the addition of hidingthe menu until clicked/touchedThe markup:<nav>! ! !
<a href="#" class=”
show-mobile">Main Menu</a> ! 
<ul><li>…</li></ul> !
</nav>!
  41. 41. •  Regular CSS:.show-mobile { display: none; }!•  CSS to show the button and hide the menu for mobile:@media (max-width: 768px) { ! !
nav .show-mobile {
display: block; }
nav ul {!
display: none; } }!•  jQuery for the menu toggle:<script> ! !
jQuery(".show-mobile").click(function () { 
jQuery("nav ul").toggle("fast"); !
});
<script>3. Switch to an expandable menu button
  42. 42. An in-depth, mobile-first menu tutorial:•  http://azadcreative.com/2012/07/responsive-mobile-first-navigation-menu•  Uses a mobile menu button toggle, andincludes submenus expanding on click/touch3. Switch to an expandable menu button
  43. 43. When to use it?Want mobile menu to fit in a small areaWant a highly stylable, flexible optionMore menu items and/or longer page namesCan choose whether to include submenusOk with an “extra click” before selecting3. Switch to an expandable menu button
  44. 44. 4. Switch to a dropdown (select) menu
  45. 45. 4. Switch to a dropdown (select) menuUses efficient native mobile controlsUse jQuery to dynamically swap:<nav>
<ul> 
<li><a href=“#”>…</a></li> 
</ul>
</nav>
-to-<nav>
<select> 
<option value=“#”>…</option>
</select>
</nav>!From: http://css-tricks.com/convert-menu-to-dropdown!
  46. 46. Similar options that switch <ul> to <select>:•  TinyNav.js:–  Uses jQuery, small file size–  https://github.com/viljamis/TinyNav.js•  Responsive Menu:–  Uses jQuery, supports submenus, lots of settings–  https://github.com/mattkersley/Responsive-Menu•  SelectNav.js:–  Inspired by TinyNav, Independent (no jQuery),supports submenus–  http://lukaszfiszer.github.com/selectnav.js4. Switch to a dropdown (select) menu
  47. 47. When to use it?Want mobile menu to fit in a small areaWant native controls for the mobile menuMore menu items and/or longer page namesWant submenus includedOk with an “extra click” before selecting4. Switch to a dropdown (select) menu
  48. 48. Remember the ViewportEnsure mobile browsers will scale to viewyour site correctlyInclude in the <head> :<meta name="viewport"content="width=device-width”>!
  49. 49. Resources•  Responsive Web Design (A Book Apart 4):Ethan Marcotte•  Implementing Responsive Design:Tim Kadlec•  MediaQueri.es•  http://bradfrostweb.com/responsive-web-design-newsletter•  http://bdconf.com/newsletter!
  50. 50. Amelia Marschall-MillerGravity Works Design + DevelopmentPartner & Creative DirectorGravityWorksDesign.comAmeliaMarschall.com@MimiAmeliaQuestions?

×