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!
2. 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
3. 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
4. Responsive vs. Adaptive
l A fluid grid layout l Multiple fixed width layouts
l Additional changes applied l Changes layout at set
with Media Queries breakpoints (with Media
Queries)
5. Basic Components
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries for specific adjustments
6. Hybrid Approaches
l Fluid on smaller screens + fixed maximum size
l One column flexible + one column fixed
12. 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; }!
13. 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) { }!
14. 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
15. Example Site Queries
l @media (max-width: 900px) {
!#dnn_ContentLeft, #dnn_ContentRight {
! width:100%;! !
padding:0; }
}!
23. 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/!
24. 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
25. 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
!
26. 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
!
27. 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>!
29. 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
30. 1. Flow the menu onto two lines
l Tutorial: http://designshack.net/articles/css/
code-a-responsive-navigation-menu
31. 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
33. 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; }!
34. 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)
35. 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
37. 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>!
38. 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> !
39. 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
40. 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
42. 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
43.
44. 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
45. 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
46. 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”>!
47. 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
48. 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
!
