Responsive Web Design for DotNetNuke

6,151 views
5,943 views

Published on

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 DotNetNuke. Learn how to design and plan your responsive site, develop your skin with a fluid grid, integrate modules into your responsive site, and test to ensure your site looks great on tons of devices!

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,151
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
108
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design for DotNetNuke

  1. 1. Amelia Marschall-MillerGravity Works Design + DevelopmentRESPONSIVE WEB DESIGN FORDOTNETNUKE
  2. 2. What? Why? How?l  What is responsive web design?l  How to create a responsive layoutl  How to ensure all site elements work in that layoutl  Setting breakpoint changes with Media Queriesl  Responsive menu options
  3. 3. What is Responsive Web Design?l  A fluid layout and flexible images adapted with media queriesl  Ultimate Goal: A single site, optimized for every screen size
  4. 4. Responsive vs. Adaptivel  A fluid grid layout l  Multiple fixed width layoutsl  Additional changes applied l  Changes layout at set with Media Queries breakpoints (with Media Queries)
  5. 5. Basic Components1.  A flexible, grid-based layout2.  Flexible images and media3.  Media queries for specific adjustments
  6. 6. Hybrid Approachesl  Fluid on smaller screens + fixed maximum sizel  One column flexible + one column fixed
  7. 7. Let’s Get Started!
  8. 8. Set a Fluid Gridl  Fluid wrapper: –  #page { !
 width: 90%; !
 max-width: 960px;!
 margin: 15px auto; }!-or- –  #page { 
 width: 960px; 
 max-width: 90%;
 margin: 15px auto; }!
  9. 9. Set a Fluid Gridl  Float columns: –  #LeftColumn {
 float: left;
 width: 70%; }! –  #RightColumn {
 float: right;
 width: 30%; }!
  10. 10. Set Fixed Margins (psst! It’s Ok!)l  Use Box Sizingl  Standard box model: –  box-sizing: content-box ! –  Padding & border added on to width/heightl  New box model: –  box-sizing: border-box ! –  Padding & border subtracted from width/height
  11. 11. Set Fixed Margins (actually, Padding)l  #LeftColumn {
 padding: 10px 20px; 
 ! -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box; !
 box-sizing:border-box; }!l  #RightColumn {
 padding: 10px; 
 ! -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box; !
 box-sizing:border-box;
 border: 1px solid #627A7E; }!l  IE Polyfill: (Natively supported in IE8+) https://github.com/Schepp/box-sizing-polyfill
  12. 12. Nested Columnsl  Widths set with percentage are relativel  target / context = resultl  #dnn_ContentLeft {
   float: left;
 width: 60%;
 padding-right: 40px;
 box-sizing: border-box; }!l  #dnn_ContentRight {
    float: left;
 width: 40%;
 box-sizing: border-box; }!
  13. 13. Make Changes with Media Queriesl  Media queries serve different CSS based on your browser size or typel  Include directly in your skin CSS file, at the endl  Define regular (desktop site) styles, then: –  @media (max-width: 900px) { }! –  @media (max-width: 720px) { }! –  @media (max-width: 480px) { }! –  @media (max-width: 320px) { }!
  14. 14. Make Changes with Media Queriesl  Or, go “mobile first”: –  @media (min-width: 480px) { }! –  @media (min-width: 720px) { }! –  Etc…l  We primarily use desktop first. Why?l  Bottom line: Choose direction and set breakpoints wherever it makes sense
  15. 15. Example Site Queriesl  @media (max-width: 900px) { !#dnn_ContentLeft, #dnn_ContentRight { ! width:100%;! !
 padding:0; }
 }!
  16. 16. @media (max-width: 900px)!
  17. 17. Example Site Queriesl  @media (max-width: 730px) { 
 #LeftColumn, #RightColumn { ! ! ! width: 100%; ! !
 !}
 
 #dnn_FooterLeft, #dnn_FooterMiddle, !#dnn_FooterRight { ! !
 width: 100%; ! !
 margin: 0 0 20px 0; }
 }!
  18. 18. Example Site Queriesl  @media (max-width: 650px) {
 #primary .show-mobile { ! !
 ! display: block; ! !
 padding: 20px 20px 20px 64px; ! ! background: url(images/mobile- ! ! menu.png) no-repeat #8CC8D8;! !}
 }!
  19. 19. Example Site Queriesl  @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%;!}
 }!
  20. 20. Media Queries & IEl  @media { } only works in IE 9 +.l  Javascript polyfill for IE 8 and below –  https://github.com/scottjehl/Respond –  Adds support for media queries set with min-width/max-widthl  For wider media query support: –  http://code.google.com/p/css3-mediaqueries-js/!
  21. 21. Hide Contentl  display:none! –  Hide unnecessary content for mobile –  Add mobile only Panes with display:none in the regular CSS –  Note: hides content but does not improve performance
  22. 22. Set (or don’t set) Media Sizesl  Ensure media always stays within column widths: –  img, object, embed, iframe, video { max-width:100%; }!l  Do NOT set inline height and width of images or media when adding in DNNl  For video, unless actually using the <video> element: –  Fitvidsjs.com!
  23. 23. Set Font Sizesl  Set font sizes in ems: –  body { font-size: 100%; } /*16px*/ –  h1 { font-size: 1.5 em } /*24 / 16px = 1.5*/ –  Change body size in @media to adjust all site fontsl  For scalable headlines that fit the width of its surrounding element: –  Fittext.js!
  24. 24. Responsive Menu Optionsl  Use 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>!
  25. 25. 1. Flow the menu onto two lines
  26. 26. 1. Flow the menu onto two linesl  What a horizontal unordered list will naturally dol  Can hide submenu dropdowns (If accessible elsewhere) –  nav ul li ul { display:none; }!l  Use media queries to reduce font sizes before breaking to two lines
  27. 27. 1. Flow the menu onto two linesl  Tutorial: http://designshack.net/articles/css/ code-a-responsive-navigation-menu
  28. 28. 1. Flow the menu onto two linesl  When 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
  29. 29. 2. Switch a horizontal menu to vertical
  30. 30. 2. Switch a horizontal menu to verticall  Regular CSS: –  nav ul li { float:left; }!l  Mobile-size CSS: ! –  @media (max-width: 480px) { 
 nav ul li { float:none; width:100%; }! }!l  Can hide submenu dropdowns (If accessible elsewhere) –  nav ul li ul { display:none; }!
  31. 31. 2. Switch a horizontal menu to verticall  Tutorial to include dropdown submenus: http://ejhansel. com/a-responsive-drop-down-navigation-menul  Based on Suckerfish dropdownsl  Uses :hover to expand submenus. (Works on mobile, but some potential issues)
  32. 32. 2. Switch a horizontal menu to verticall  When to use it? –  More menu items –  Longer page names –  A solution without Javascript is desired –  Can choose whether to include access to submenus –  Minimal effort desired
  33. 33. 3. Switch to an expandable menu button
  34. 34. 3. Switch to an expandable menu buttonl  Similar to switching a horizontal menu to vertical, with the addition of hiding the menu until clicked/touchedl  The markup:<nav> ! ! !
 <a href="#" class=”
 show-mobile">Main Menu</a> ! 
 <ul><li>…</li></ul> !
</nav>!
  35. 35. 3. Switch to an expandable menu buttonl  Regular CSS: .show-mobile { display: none; }!l  CSS to show the button and hide the menu for mobile: @media (max-width: 768px) { ! !
 nav .show-mobile {
 display: block; }
 nav ul { !
 display: none; } }!l  jQuery for the menu toggle:<script> ! !
jQuery(".show-mobile").click(function () { 
 jQuery("nav ul").toggle("fast"); !
});
<script> !
  36. 36. 3. Switch to an expandable menu buttonl  An 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
  37. 37. 3. Switch to an expandable menu buttonl  When to use it? –  Want mobile menu to fit in a small area –  Want a highly stylable, flexible option –  More menu items –  Longer page names –  Can choose whether to include access to submenus –  Ok with requiring Javascript –  Ok with an “extra click” before selecting
  38. 38. 4. Switch to a dropdown (select) menu
  39. 39. 4. Switch to a dropdown (select) menul  Uses efficient native mobile controlsl  Use 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
  40. 40. 4. Switch to a dropdown (select) menuSimilar options that switch <ul> to <select>:l  TinyNav.js: –  Uses jQuery, small file size –  https://github.com/viljamis/TinyNav.jsl  Responsive Menu: –  Uses jQuery, supports submenus, lots of settings –  https://github.com/mattkersley/Responsive-Menul  SelectNav.js: –  Inspired by TinyNav, Independent (no jQuery), supports submenus –  http://lukaszfiszer.github.com/selectnav.js
  41. 41. 4. Switch to a dropdown (select) menul  When to use it? –  Want mobile menu to fit in a small area –  Want native controls for the mobile menu –  More menu items –  Longer page names –  Want submenus included –  Ok with requiring Javascript –  Ok with an “extra click” before selecting
  42. 42. Remember the Viewportl  Ensure mobile browser will scale to view your site correctlyl  Include directly in all skin ascx files: <meta name="viewport" content="width=device-width”>!
  43. 43. Working with Modulesl  Choose modules with easy to edit templatesl  Avoid modules that use table layouts –  Form Modules Issues: -  Set labels on top -  Avoid too many columns -  Most customizable options: Xmod, Form & Listl  Responsive Rotators: –  TouchFlexi Slider: http://bit.ly/Tajueo –  Responsive Content Rotator: http://bit.ly/OMLwBq –  EasyDNN Rotator: http://bit.ly/VC4ITU
  44. 44. Resourcesl  Responsive Web Design (A Book Apart 4) Ethan Marcottel  MediaQueri.esl  http://bradfrostweb.com/responsive-web-design- newsletterl  http://zomigi.com/blog/essential-considerations-for- crafting-quality-media-queries!
  45. 45. Questions?Amelia Marschall-MillerGravity Works Design + DevelopmentPartner & Creative DirectorGravityWorksDesign.comAmeliaMarschall.com @MimiAmelia

×