responsive & responsible web design in dnn
DESCRIPTION
DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!TRANSCRIPT
![Page 1: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/1.jpg)
Responsiveand
Responsible
web designin
DNN
![Page 2: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/2.jpg)
PLAN & DESIGN
![Page 3: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/3.jpg)
KNOW What A Responsive WebSITE is
A fluid layout and flexible images adapted with media queries
![Page 4: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/4.jpg)
Responsive vs. Adaptive
A fluid grid layout
Additional changes applied with Media Queries
Multiple fixed width layouts
Layout changes at set breakpoints (with Media Queries)
MISUSe the TERM
![Page 5: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/5.jpg)
Mobile users are not just “on the go”
Many people have mobile devices as their primary internet access
The lines between mobile/tablet/desktop are becoming blurred
Alternative to native mobile apps
LIMIT MOBILE CONTENT
![Page 6: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/6.jpg)
Do a content audit and prioritization before any layout or design
Prioritize Content
![Page 7: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/7.jpg)
... but you don’t HAVE to develop mobile first
Consider:
If it isn’t needed on mobile, is it even
needed on desktop???
Think “mobile first”
![Page 8: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/8.jpg)
USE HTML wireframes
http://foundation.zurb.com Example
![Page 9: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/9.jpg)
.....
BANISH PHOTOSHOP
![Page 10: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/10.jpg)
expect pixel-perfect matching code
![Page 11: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/11.jpg)
Design with dev in mind
Pay attention to order and flow
Limit large or complex graphics
Know what CSS can do
![Page 12: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/12.jpg)
Create a style Guide
• Show available design elements
• Code modular HTML/CSS building blocks
• Include baseline typography, UI elements
(buttons, form constructs, etc)
• Easier to test and improve workflow between
multiple team members
24ways.org/2011/front-end-style-guides
Front end styleguide collection: bit.ly/IR3lHF
![Page 13: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/13.jpg)
DEVELOP
![Page 14: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/14.jpg)
<div class=”row”> <div id="ContentPane" runat="server" class=”col two-third” /> <div id="SmallRightPane" runat="server" class=”col third” /></div><div class=”row”> <div id="LeftPane" runat="server" class=”col half” /> <div id="RightPane" runat="server" class=”col half” /></div>
Use a fluid grid
![Page 15: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/15.jpg)
.half { width: 50%; }
.third { width: 33.333333333333%;}
.two-third { width: 66.66666666667%;}
.fourth { width: 25%; }
.three-fourth{ width: 75%; }
.fifth { width: 20%; }
.two-fifth { width: 40%; }
.three-fifth { width: 60%; }
.four-fifth { width: 80%; }
.col { padding: 10px; float: left; box-sizing: border-box; }
Use a fluid grid
![Page 16: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/16.jpg)
New box model:
Padding & border subtracted from width/height
box-sizing: border-box
Use the new box model
Standard box model:
Padding & border added on to the width/height
box-sizing: border-box
![Page 17: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/17.jpg)
#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
Set fixed-width spacing
![Page 18: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/18.jpg)
DO a lot of math
Widths set with percentage are relative to their container element
![Page 19: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/19.jpg)
#ContentLeft { float: left; width: 60%; padding-right: 40px; box-sizing: border-box; }
#ContentRight { float: left; width: 40%; box-sizing: border-box; }
Keep it simple
![Page 20: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/20.jpg)
Media queries serve different CSS based on your browser size or type.
In your Skin CSS file, define regular (desktop)
styles, then:
• @media (max-width: 900px) { }• @media (max-width: 720px) { }• @media (max-width: 480px) { }• @media (max-width: 320px) { }
use media queries
![Page 21: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/21.jpg)
Or, go “mobile first”:
• @media (min-width: 480px) { }• @media (min-width: 720px) { }• Etc…
Better for performance!
use media queries
![Page 22: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/22.jpg)
USE pre-determined, Specific breakpoints
Set breakpoints when you need them!
![Page 23: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/23.jpg)
@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
use browser fallbacks
![Page 24: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/24.jpg)
• html { font-size: 62.5%; }
• body { font-size: 14px; font-size: 1.4rem; }
• h1 { font-size: 24px; font-size: 2.4rem; }
• Can change body size % in @media to adjust all site fonts
set font sizes with rem’s
![Page 25: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/25.jpg)
Fittextjs.com: for text headlines that dynamically fit the width of its surrounding element.
create scalable headlines
![Page 26: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/26.jpg)
USE ICON FONTS
Always crisp, no pixelization or multiple
image sizes needed
Easily change size, color, and shadows
using CSS
IcoMoon.io Pictos.cc MORE (css-tricks.com/flat-icons-icon-fonts)
![Page 27: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/27.jpg)
Ensure media does not break outside of set container:
• img, object, embed, iframe, video { max-width:100%; }
Set media max-widths
![Page 28: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/28.jpg)
Do not set height or width of images or media in the DNN editor
Do not upload media larger than the maximum size that you want it to display
set inline media sizes
![Page 29: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/29.jpg)
Fitvidsjs.com: for fluid width video embeds
create scalable video
![Page 30: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/30.jpg)
display:none
• Hide unnecessary content for mobile
• Add mobile only content with display:none in the regular CSS
Use Sparingly! Don’t limit content
OVERuse display:none
![Page 31: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/31.jpg)
Important Note:display:none hides content but (generally) does not improve performance!
Hiding images:Setting parent element to display:none will prevent the image from being loaded.
OVERuse display:none
![Page 32: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/32.jpg)
Menu modules that use unordered lists can be made responsive<nav> <ul> <li><a href="/”>Home</a></li> <li><a href="/About.aspx">About</a> <ul> <li><a href=”/About/Bio.aspx”>Bio</a></li> </ul> </li> <li><a href="/Speaking.aspx">Speaking</a></li> <li><a href="/Contact.aspx">Contact</a></li> </ul> </nav>
Use menus that use unordered lists
![Page 33: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/33.jpg)
Choose responsive menustrategy carefully
OPTIONS:
Resize & Reposition
Switch Horizontal to Vertical
Dropdown (Select) Menu
Toggle Menu Button
Left Slideout Menu
![Page 34: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/34.jpg)
1. RESIZE & REposition (aka “do NOTHING”)
![Page 35: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/35.jpg)
1. RESIZE & REposition
What a horizontal unordered list will naturally do
Can hide submenu dropdowns (If accessible elsewhere)
• nav ul li ul { display:none; }
Use media queries to shrink fonts and margins before, or to avoid, breaking to multiple lines
![Page 36: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/36.jpg)
Tutorial: http://designshack.net/articles/css/code-a-responsive-navigation-menu
1. RESIZE & REposition
![Page 37: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/37.jpg)
When to use it?
Submenus don’t need to be accessed
Items will fit on one or two lines
Items not expected to change often
A solution without Javascript is desired
Minimal effort desired
1. RESIZE & REposition
![Page 38: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/38.jpg)
2. Switch horizontal to vertical
![Page 39: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/39.jpg)
2. Switch horizontal to vertical
Regular 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 accessible elsewhere)
• nav ul li ul { display:none; }
![Page 40: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/40.jpg)
Tutorial to include dropdown submenus: http://ejhansel.com/a-responsive-drop-down-navigation-menu
• Based on Suckerfish dropdowns
• Uses :hover to expand submenus
2. Switch horizontal to vertical
![Page 41: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/41.jpg)
When to use it?
Few main menu items
Longer page names
Can choose whether to include submenus
A solution without Javascript is desired
Minimal effort desired
2. Switch horizontal to vertical
![Page 42: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/42.jpg)
3. dropdown (select) menu
![Page 43: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/43.jpg)
Uses efficient native mobile controls
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
3. dropdown (select) menu
![Page 44: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/44.jpg)
![Page 45: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/45.jpg)
Similar 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
3. dropdown (select) menu
![Page 46: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/46.jpg)
When 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 Javascript solution
3. dropdown (select) menu
![Page 47: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/47.jpg)
4. Toggle menu button
![Page 48: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/48.jpg)
Similar to switching a horizontal menu to vertical, with the addition of hiding the menu until clicked/touched
The markup:
<nav>!! ! <a href="#" class=” show-mobile">Main Menu</a>! <ul><li>…</li></ul>!</nav>
4. Toggle menu button
![Page 49: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/49.jpg)
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>
4. Toggle menu button
![Page 50: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/50.jpg)
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
4. Toggle menu button
![Page 51: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/51.jpg)
When 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 Javascript solution
4. Toggle menu button
![Page 52: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/52.jpg)
5. Left slideout Menu
![Page 53: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/53.jpg)
Tutorials:• jPanelMenu - jQuery plugin:
jpanelmenu.com• PageSlide - jQuery plugin:
srobbin.com/jquery-plugins/pageslide• CSS-only solution:
css-tricks.com/off-canvas-menu-with-css-target
5. Left slideout Menu
![Page 54: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/54.jpg)
When to use it?
Want mobile menu to fit in a small area
Want a sleek mobile menu option
More menu items and/or longer page names
Ok with more advanced coding
Ok with Javascript (or CSS with limited browser support)
5. Left slideout Menu
![Page 55: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/55.jpg)
Ensure mobile browsers will scale to view your site correctly
Include in the <head> :
<meta name="viewport" content="width=device-width”>
remember the viewport
![Page 56: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/56.jpg)
CHoose modules wisely
Choose modules that are have template systems and easy-to-modify layouts.
Download demos and test
Avoid modules that use table layouts, inline styling, and lack stylable classes and IDs
Expect to customize module layouts and allow time for testing
![Page 57: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/57.jpg)
Resources
• Responsive Web Design (A Book Apart 4):Ethan Marcotte
• Implementing Responsive Design: Tim Kadlec
• This is Responsive: Patterns, resources, newshttp://bradfrost.github.io/this-is-responsive/
• http://bdconf.com/newsletter • MediaQueri.es
![Page 58: Responsive & Responsible Web Design in DNN](https://reader038.vdocuments.mx/reader038/viewer/2022110115/54c7ee244a795916268b4686/html5/thumbnails/58.jpg)
Amelia Marschall-Miller
Gravity Works Design + DevelopmentPartner & Creative Director
GravityWorksDesign.com
AmeliaMarschall.com
@MimiAmelia
Questions?