RESPONSIVE WEB DESIGN FOR DOTNETNUKE

Amelia Marschall-Miller Gravity Works Design + Development

What? Why? How? l  What is responsive web design?

l  How to create a responsive layout

l  How to ensure all site elements work in that layout

l  Setting breakpoint changes with Media Queries

l  Responsive menu options

What is Responsive Web Design? l  A fluid layout and flexible images adapted with

media queries

l  Ultimate Goal: A single site, optimized for every screen size

Responsive vs. Adaptive l  A fluid grid layout

l  Additional changes applied with Media Queries

l  Multiple fixed width layouts

l  Changes layout at set breakpoints (with Media Queries)

Basic Components 1.  A flexible, grid-based layout 2.  Flexible images and media

3.  Media queries for specific adjustments

Hybrid Approaches l  Fluid on smaller screens + fixed maximum size

l  One column flexible + one column fixed

Let’s Get Started!

Set a Fluid Grid l  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 l  Float columns:

–  #LeftColumn { float: left; width: 70%; }!

–  #RightColumn { float: right; width: 30%; }!

Set Fixed Margins (psst! It’s Ok!) l  Use Box Sizing

l  Standard box model: –  box-sizing: content-box !–  Padding & border added on to width/height

l  New box model: –  box-sizing: border-box !–  Padding & border subtracted from width/height

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

Nested Columns l  Widths set with percentage are relative

l  target / context = result

l  #dnn_ContentLeft {   float: left; width: 60%; padding-right: 40px; box-sizing: border-box; }!

l  #dnn_ContentRight {    float: left; width: 40%; box-sizing: border-box; }!

Make Changes with Media Queries l  Media queries serve different CSS based on your

browser size or type

l  Include directly in your skin CSS file, at the end

l  Define 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 Queries l  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

Example Site Queries l  @media (max-width: 900px) {

!#dnn_ContentLeft, #dnn_ContentRight {! width:100%;! !

padding:0; } }!

@media (max-width: 900px)!

Example Site Queries l  @media (max-width: 730px) { #LeftColumn, #RightColumn { ! !

! width: 100%; ! ! !} #dnn_FooterLeft, #dnn_FooterMiddle,

!#dnn_FooterRight { ! ! width: 100%;! ! margin: 0 0 20px 0; } }!

Example Site Queries l  @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 l  @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%;!} }!

Media Queries & IE l  @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-width

l  For wider media query support: –  http://code.google.com/p/css3-mediaqueries-js/!

Hide Content l  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

Set (or don’t set) Media Sizes l  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 DNN

l  For video, unless actually using the <video> element: –  Fitvidsjs.com

!

Set Font Sizes l  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 fonts

l  For scalable headlines that fit the width of its surrounding element: –  Fittext.js

!

Responsive Menu Options l  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>!

1. Flow the menu onto two lines

1. Flow the menu onto two lines l  What a horizontal unordered list will naturally do

l  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

1. Flow the menu onto two lines l  Tutorial: http://designshack.net/articles/css/

code-a-responsive-navigation-menu

1. Flow the menu onto two lines l  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

2. Switch a horizontal menu to vertical

2. Switch a horizontal menu to vertical l  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; }!

2. Switch a horizontal menu to vertical l  Tutorial to include dropdown submenus: http://ejhansel.

com/a-responsive-drop-down-navigation-menu

l  Based on Suckerfish dropdowns

l  Uses :hover to expand submenus. (Works on mobile, but some potential issues)

2. Switch a horizontal menu to vertical l  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

3. Switch to an expandable menu button

3. Switch to an expandable menu button l  Similar to switching a horizontal menu

to vertical, with the addition of hiding the menu until clicked/touched

l  The markup:

<nav>! ! ! <a href="#" class=” show-mobile">Main Menu</a> ! <ul><li>…</li></ul> !</nav>!

3. Switch to an expandable menu button l  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> !

3. Switch to an expandable menu button l  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

3. Switch to an expandable menu button l  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

4. Switch to a dropdown (select) menu

4. Switch to a dropdown (select) menu l  Uses efficient native mobile controls

l  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

!

4. Switch to a dropdown (select) menu Similar options that switch <ul> to <select>:

l  TinyNav.js: –  Uses jQuery, small file size –  https://github.com/viljamis/TinyNav.js

l  Responsive Menu: –  Uses jQuery, supports submenus, lots of settings –  https://github.com/mattkersley/Responsive-Menu

l  SelectNav.js: –  Inspired by TinyNav, Independent (no jQuery),

supports submenus –  http://lukaszfiszer.github.com/selectnav.js

4. Switch to a dropdown (select) menu l  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

Remember the Viewport l  Ensure mobile browser will scale to view your site

correctly

l  Include directly in all skin ascx files: <meta name="viewport" content="width=device-width”>!

Working with Modules l  Choose modules with easy to edit templates

l  Avoid modules that use table layouts –  Form Modules Issues:

-  Set labels on top -  Avoid too many columns -  Most customizable options: Xmod, Form & List

l  Responsive Rotators: –  TouchFlexi Slider: http://bit.ly/Tajueo –  Responsive Content Rotator: http://bit.ly/OMLwBq –  EasyDNN Rotator: http://bit.ly/VC4ITU

Resources l  Responsive Web Design (A Book Apart 4)

Ethan Marcotte

l  MediaQueri.es

l  http://bradfrostweb.com/responsive-web-design-newsletter

l  http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries

!

Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director

GravityWorksDesign.com

AmeliaMarschall.com

@MimiAmelia

Questions?