Responsive Web Design for DotNetNuke
-
Upload
gravityworksdd -
Category
Technology
-
view
115 -
download
2
description
Transcript of Responsive Web Design for DotNetNuke
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?