• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design: From Mobile To Desktop, And Beyond
 

Responsive Web Design: From Mobile To Desktop, And Beyond

on

  • 1,865 views

As mobile device usage continues to expand, the variety of screen sizes, resolutions, and capabilities of mobile phones and tablets is becoming more and more diverse. It's possible, and important, to ...

As mobile device usage continues to expand, the variety of screen sizes, resolutions, and capabilities of mobile phones and tablets is becoming more and more diverse. It's possible, and important, to ensure your site provides an optimal experience for whatever device your audience is using. Responsive web design allows your site to seamlessly adjust and fit the screen its viewed on, and can easily be implemented in most major CMS systems. Learn how to design and plan your responsive site, develop your layouts with a fluid grid, and test to ensure your site looks great on tons of devices!

Statistics

Views

Total Views
1,865
Views on SlideShare
1,864
Embed Views
1

Actions

Likes
2
Downloads
43
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design: From Mobile To Desktop, And Beyond Responsive Web Design: From Mobile To Desktop, And Beyond Presentation Transcript

    • What? Why? How? What is responsive web design? How to create a responsive layout How to ensure all site elements work in that layout Setting breakpoint changes with Media Queries Responsive menu options
    • What is A Responsive WebSITE?A fluid layout and flexible images adaptedwith media queries
    • Responsive vs. AdaptiveA fluid grid layout Multiple fixed width layoutsAdditional changes Layout changes atapplied with Media set breakpointsQueries (with Media Queries)
    • Basic Components A flexible, grid-based layout Flexible images and media Media queries for specific adjustments
    • Hybrid ApproachesFluid on smaller screens+ fixed maximum sizeOne column flexible+ one column fixed
    • Let’s Get Started! AmeliaMarschall.com
    • Set a fluid gridFluid wrapper: #page { !
 width: 90%;!
 max-width: 960px; !
 margin: 15px auto; }!or #page { 
 width: 960px; 
 max-width: 90%;
 margin: 15px auto; }!
    • Set a fluid gridFloat columns: ! #LeftColumn {
 float: left;
 width: 70%; }! ! #RightColumn {
 float: right;
 width: 30%; }!
    • Set Fixed Margins (really, It’s Ok!)Use CSS Box SizingStandard box model: New box model:Padding & border Padding & borderadded on to width/ subtracted fromheight width/heightbox-sizing: box-sizing:content-box! border-box!
    • Set Fixed Margins (Actually padding)#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-polyfill
    • Nested ColumnsWidths set with percentage are relative totheir container element!
    • Nested Columns#dnn_ContentLeft {
  float: left;
 width: 60%;
 padding-right: 40px;
 box-sizing: border-box; }!
#dnn_ContentRight {
   float: left;
 width: 40%;
 box-sizing: border-box; }!
    • 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)”>!
    • 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) { }!
    • Make Changes with Media QueriesOr, go “mobile first”:•  @media (min-width: 480px) { }!•  @media (min-width: 720px) { }!•  Etc…!Better for performance!
    • Make Changes with Media Queries
    • Media Queries & IE@media only works in IE 9 +•  Javascript polyfill for IE 8 and below: –  https://github.com/scottjehl/Respond –  Adds support for media queries set with min-width/max-width•  For wider media query support: –  http://code.google.com/p/css3-mediaqueries-js•  Or use conditional comments to link to IE CSS
    • Example Site Queries@media (max-width: 900px) { !#ContentLeft, #ContentRight {! 
 ! ! width:100%; !
 ! padding:0; ! !}
}!
    • @media (max-width: 900px)!
    • Example Site Queries@media (max-width: 730px) { 
 #LeftColumn, #RightColumn { ! ! ! width: 100%;! !
 !}

 #FooterLeft, #FooterMiddle, ! ! #FooterRight {! !
 width: 100%; ! !
 margin: 0 0 20px 0; ! ! !}
}!
    • Example Site Queries@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@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%;!}
}!
    • Set Font SizesSet font sizes in em’s:•  body { font-size: 100%; } 
 ( 16px )•  h1 { font-size: 1.5 em } 
 ( 24px / 16px = 1.5 )•  Change body size in @media to adjust all site fontsUse Fittext.js for scalable headlines that fitthe width of its surrounding element.
    • 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 of images or media•  Use Fitvidsjs.com for video (unless actually using the <video> element)
    • 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-scaled versions of embedded HTML images.•  No mark-up changes needed.•  Original PHP by Matt Wilcox. Ports for .NET and Cold Fusion, Plugins for Wordpress and Drupal.
    • Hide Contentdisplay:none!•  Hide unnecessary content for mobile•  Add mobile only content with display:none in the regular CSSImportant Note:With no “link to full site”, don’t hide too much!
    • 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.
    • 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>!
    • 1. Flow the menu onto two lines
    • 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
    • 1. Flow the menu onto two linesTutorial: http://designshack.net/articles/css/code-a-responsive-navigation-menu
    • 1. Flow the menu onto two linesWhen to use it? Submenus don’t need to be accessed Items will fit on two lines Items not expected to change often A solution without Javascript is desired Minimal effort desired
    • 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: 480px) { 
 nav ul li { float:none; ! ! ! width:100%; }! }!Can hide submenu dropdowns (If accessibleelsewhere)•  nav ul li ul { display:none; }!
    • 2. Switch a horizontal menu to verticalTutorial to include dropdown submenus:http://ejhansel.com/a-responsive-drop-down-navigation-menu•  Based on Suckerfish dropdowns•  Uses :hover to expand submenus
    • 2. Switch a horizontal menu to verticalWhen to use it? More menu items Longer page names Can choose whether to include submenus A solution without Javascript is desired Minimal effort desired
    • 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 menu until clicked/touchedThe markup:<nav> ! !
 ! <a href="#" class=”
 show-mobile">Main Menu</a> ! 
 <ul><li>…</li></ul> !
</nav>!
    • 3. Switch to an expandable menu button•  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 buttonAn in-depth, mobile-first menu tutorial:•  http://azadcreative.com/2012/07/ responsive-mobile-first-navigation-menu•  Uses a mobile menu button toggle, and includes submenus expanding on click/ touch
    • 3. Switch to an expandable menu buttonWhen to use it? Want mobile menu to fit in a small area Want a highly stylable, flexible option More menu items and/or longer page names Can choose whether to include submenus Ok with an “extra click” before selecting
    • 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 href=“#”>…</a></li> 
 </ul>
</nav>
-to-<nav>
 <select> 
 <option value=“#”>…</option>
 </select>
</nav>!From: http://css-tricks.com/convert-menu-to-dropdown!
    • 4. Switch to a dropdown (select) menuSimilar 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.js
    • 4. Switch to a dropdown (select) menuWhen to use it? Want mobile menu to fit in a small area Want native controls for the mobile menu More menu items and/or longer page names Want submenus included Ok with an “extra click” before selecting
    • Remember the ViewportEnsure mobile browsers will scale to viewyour site correctlyInclude in the <head> : <meta name="viewport" content="width=device-width”>!
    • Resources•  Responsive Web Design (A Book Apart 4) Ethan Marcotte•  MediaQueri.es•  http://bradfrostweb.com/responsive-web- design-newsletter•  http://zomigi.com/blog/essential- considerations-for-crafting-quality-media- queries!
    • Questions?Amelia Marschall-MillerGravity Works Design + DevelopmentPartner & Creative DirectorGravityWorksDesign.comAmeliaMarschall.com @MimiAmelia