Download - Responsive Web Design for DotNetNuke
![Page 1: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/1.jpg)
RESPONSIVE WEB DESIGN FOR DOTNETNUKE
Amelia Marschall-Miller Gravity Works Design + Development
![Page 2: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/3.jpg)
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
![Page 4: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/4.jpg)
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)
![Page 5: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/5.jpg)
Basic Components 1. A flexible, grid-based layout 2. Flexible images and media
3. Media queries for specific adjustments
![Page 6: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/6.jpg)
Hybrid Approaches l Fluid on smaller screens + fixed maximum size
l One column flexible + one column fixed
![Page 7: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/7.jpg)
Let’s Get Started!
![Page 8: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/8.jpg)
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; }!
![Page 9: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/9.jpg)
Set a Fluid Grid l Float columns:
– #LeftColumn { float: left; width: 70%; }!
– #RightColumn { float: right; width: 30%; }!
![Page 10: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/10.jpg)
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
![Page 11: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/11.jpg)
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
![Page 12: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/12.jpg)
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; }!
![Page 13: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/13.jpg)
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) { }!
![Page 14: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/14.jpg)
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
![Page 15: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/15.jpg)
Example Site Queries l @media (max-width: 900px) {
!#dnn_ContentLeft, #dnn_ContentRight {! width:100%;! !
padding:0; } }!
![Page 16: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/16.jpg)
@media (max-width: 900px)!
![Page 17: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/17.jpg)
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; } }!
![Page 18: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/18.jpg)
![Page 19: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/19.jpg)
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;!!}
}!
![Page 20: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/20.jpg)
![Page 21: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/21.jpg)
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%;!} }!
![Page 22: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/23.jpg)
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/!
![Page 24: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/24.jpg)
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
![Page 25: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/25.jpg)
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
!
![Page 26: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/26.jpg)
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
!
![Page 27: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/27.jpg)
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>!
![Page 28: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/28.jpg)
1. Flow the menu onto two lines
![Page 29: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/29.jpg)
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
![Page 30: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/30.jpg)
1. Flow the menu onto two lines l Tutorial: http://designshack.net/articles/css/
code-a-responsive-navigation-menu
![Page 31: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/31.jpg)
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
![Page 32: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/32.jpg)
2. Switch a horizontal menu to vertical
![Page 33: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/33.jpg)
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; }!
![Page 34: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/34.jpg)
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)
![Page 35: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/35.jpg)
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
![Page 36: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/36.jpg)
3. Switch to an expandable menu button
![Page 37: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/37.jpg)
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>!
![Page 38: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/38.jpg)
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> !
![Page 39: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/39.jpg)
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
![Page 40: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/40.jpg)
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
![Page 41: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/41.jpg)
4. Switch to a dropdown (select) menu
![Page 42: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/42.jpg)
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
!
![Page 43: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/44.jpg)
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
![Page 45: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/45.jpg)
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
![Page 46: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/46.jpg)
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”>!
![Page 47: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/47.jpg)
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
![Page 48: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/48.jpg)
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
!
![Page 49: Responsive Web Design for DotNetNuke](https://reader033.vdocuments.mx/reader033/viewer/2022052618/54c821254a7959b05f8b45a1/html5/thumbnails/49.jpg)
Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director
GravityWorksDesign.com
AmeliaMarschall.com
@MimiAmelia
Questions?