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)
Upcoming SlideShare
Loading in …5
×

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

5,481 views

Published on

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

No Downloads
Views
Total views
5,481
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
89
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • What really makes a site responsive – there are some misconceptionsGoal will be to have a good understanding of what makes up a responsive website, the basics of how to implement it, and how to choose the right website solution for you and your client.
  • This terminology has really helped me define sites as we worked on them and talked about them, and I’ve tried to stick with it.Discuss dedicatedNot one right approach for all projects. Sometimes adaptive looks and works fine for all users, and saves testing time.
  • - There’s no reason to dumb-down the mobile experience. Anyone on a mobile device could be searching to find the same info they would on a mobile device. No just on-the-go info.Pew Internet Study from last june found: 17% of cell phone users do most of their internet browsing on their phones.Percentage higher for Low income, teens/young adults. Phablet/Lablet- Can create web apps with nearly the same features for less cost, and more reach, than native mobile apps
  • Going to go over the basicsMy website as a simple example
  • Add an imageNote keep it simple
  • I was against this at first. I thought ‘yeah it does not make sense, but that is the standard and we should stick to it’. I thought it was a hack. Could cause problems if you have to work with a site using border box and have to switch thinking for their hack and not using conventions.But for responsive, it REALLY makes sense….When I talk about keeping it simple, this is one of those examples. If you’ve read A Book Apart’s Responsive Web Design, and I recommend you do, they outline a more complex way to setting margins with percentages. And while that works, I don’t think that technique is always necessary. Sometimes I know I want a 10px margin (can set with padding), and that’s that. The measurement I’m used to, and I know if will work. Box sixing allows you to do this without having to adjust your percentage column widths to work with your spacing.
  • Margin as a basic term for spacingUse prefixes – will not have prefixes all througout for space
  • Can keep it simple and round or find exact widths
  • Add more here!
  • Lots of different query options: resolutionMake sure @media comes after regular styles in single CSS sheet – go in order down – I prefer thisDirectly in your file, or link from HTML to base-mobile CSS with media query (only load the css that’s needed, but more annoying to maintain)
  • Don’t feel like you have to use certain breakpoints – follow the points where your design starts to “break” and use media queries to adjust when that happens. Scale your browser down, see where problems occur, and address them.
  • We are starting to move this way. It is better for performance, to load larger background images and code only if a browser is above a certain size. But it’s a challenging process mentally to do this opposed to adding smaller media queries. (google maps example loads a lot of files – just do a map link unless on a large screen)Most of our clients are still coming to us for “a new website”. A mobile or responsive version is still an “add on” that we have to sell them on. It’s the secondary though for clients. They still want to see a shiny photoshop mockup of what their site will look at on a big computer screen. But we have started presenting desktop/tablet/mobile mockups pretty simultaneously in the design phase on some projects.- Also issue where if media queries “don’t work” – is it better to be stuck with a mobile site on desktop, or a desktop site on mobile?
  • Don’t feel like you have to use certain breakpoints – follow the points where your design starts to “break” and use media queries to adjust when that happens
  • Media only works in IE9+ - adds support for queries (using min-width or max-width) Or can use conditional comments to link to an IE specific style sheetWhen these are used only for a mobile site, its not as big of a deal, because there were not widespread mobile/tablet IE devices. Now that is changing, and for a responsive site, you want to make sure it works for all desktop IE browsers, no matter the screen size.I like min/max width, but there is a lot of discussion and experimentation lately for also targeting connection speed etc to better optimize what is served
  • Fix description content layout?
  • Figure out if these need the clears or not (like last example)
  • Will talk about menu later
  • Rems: “root ems”The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.16px is the default for all browsersThe technique modifies the base font-size on the body using a percentage. This adjusts things so that 1em equals 10px, instead of the default 16px. To set the font-size to the equivalent of 14px, set it to 1.4rem.Can set a media query for body { font-size: 90% } and have all site fonts adjust
  • Don’t set media height and width in WYSIWYG – will be fixed and break grid when site is adjusted.Upload media at the maximum size you want it to displayMax width = important??? – override any set widths
  • Adaptive – 2 requests for each image, but still saves resources to load the smaller sized images when needed on mobile. It sucks to load multiple images, this is the direction I want to see things goingLots of discussion and debate over responsive images
  • Create class: hide mobile/hidedesktopNo link to full site fore responsive – responsive should should basically all your actual CONTENT of the full site
  • Parent element – not img element
  • Can use any menu system or module with unordered lists, to access and style with CSS
  • What a horizontal UL will naturally doWorks ok if you can fit everything on two linesWorks ok if you don’t have second level menus (or they can be hidden and accessed on subpages)
  • What a horizontal UL will naturally do – not a lot of code to show hereWorks ok if you can fit everything on two linesWorks ok if you don’t have second level menus (or they can be hidden and accessed on subpages)MI energy experience going back and adjusting padding/font size in media queries each time the menu changed
  • Fixed 8 – 4 – 2 across often is not flexible enough with ability for clients to add or change menu items in CMSMI energy experience going back and adjusting padding/font size in media queries each time the menu changed
  • What a horizontal UL will naturally doWorks ok if you can fit everything on two lines (few pages/short page names)Works ok if you don’t have second level menus (or they can be hidden and accessed on subpages)
  • Big buttons for each
  • Works on mobile, but some potential issues: sometimes :hover is wishy. The menu expand disappears when you move away/scroll, on iphone
  • Most DNN sites need a pretty flexible option
  • Script add the toggle. Media query makes the “main menu” link show or hide
  • Regular CSS: style menu normally and display none on the show mobileScript add the toggle. Media query makes the “main menu” link show or hide
  • New photos – MAMC/MSA
  • Ensure you already are including jquery (DNN auto right?)Is there more to this? When it applies
  • Tinynav.js – does same switches ul li to select options, using jQuerySelect nav: inspired by tinynav, but totally independed (no jquery or other libraries needed), supports multiple levels)
  • If don’t want javascript, could put both menus in html code, but that does not really work with DNN menu options
  • This prevents phones like iPhone from “zooming out” and displaying the full site, forces smaller viewport to activate responsive size.What about different resolutions?
  • Add slides upload linkWE”RE HIRING!!!
  • 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?

    ×