Responsive Web Design for DotNetNuke

download Responsive Web Design for DotNetNuke

of 49

  • date post

  • Category


  • view

  • download


Embed Size (px)


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!

Transcript of Responsive Web Design for DotNetNuke

  • 1. Amelia Marschall-MillerGravity Works Design + DevelopmentRESPONSIVE WEB DESIGN FORDOTNETNUKE

2. What? Why? How?l What is responsive web design?l How to create a responsive layoutl How to ensure all site elements work in that layoutl Setting breakpoint changes with Media Queriesl Responsive menu options 3. What is Responsive Web Design?l A fluid layout and flexible images adapted withmedia queriesl Ultimate Goal: A single site, optimized for everyscreen size 4. Responsivevs.Adaptivel A fluid grid layout l Multiple fixed width layoutsl Additional changes appliedl Changes layout at setwith Media Queriesbreakpoints (with MediaQueries) 5. Basic Components1. A flexible, grid-based layout2. Flexible images and media3. Media queries for specific adjustments 6. Hybrid Approachesl Fluid on smaller screens + fixed maximum sizel One column flexible + one column fixed 7. Lets Get Started! 8. Set a Fluid Gridl Fluid wrapper: #page {! width: 90%; ! max-width: 960px;! margin: 15px auto; }!-or- #page { width: 960px; max-width: 90%;margin: 15px auto; }! 9. Set a Fluid Gridl Float columns: #LeftColumn { float:left; width: 70%; }! #RightColumn { float:right; width:30%; }! 10. Set Fixed Margins (psst! Its Ok!)l Use Box Sizingl Standard box model: box-sizing: content-box ! Padding & border added on to width/heightl New box model: box-sizing: border-box ! Padding & border subtracted from width/height 11. 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+) 12. Nested Columnsl Widths set with percentage are relativel target / context = resultl #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 Queriesl Media queries serve different CSS based on yourbrowser size or typel Include directly in your skin CSS file, at the endl 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 Queriesl Or, go mobile first: @media (min-width: 480px) { }! @media (min-width: 720px) { }! Etcl We primarily use desktop first. Why?l Bottom line: Choose direction and set breakpointswherever it makes sense 15. Example Site Queriesl @media (max-width: 900px) { !#dnn_ContentLeft, #dnn_ContentRight { ! width:100%;!! padding:0; }}! 16. @media (max-width: 900px)! 17. Example Site Queriesl @media (max-width: 730px) { #LeftColumn, #RightColumn { ! !! width: 100%;!!!} #dnn_FooterLeft, #dnn_FooterMiddle,!#dnn_FooterRight { !!width: 100%; !!margin: 0 0 20px 0; }}! 18. Example Site Queriesl @media (max-width: 650px) {#primary .show-mobile { !! ! display: block; ! ! padding: 20px 20px 20px 64px; ! ! background: url(images/mobile- !! menu.png) no-repeat #8CC8D8;! !}}! 19. Example Site Queriesl @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%;!}}! 20. Media Queries & IEl @media { } only works in IE 9 +.l Javascript polyfill for IE 8 and below Adds support for media queries set withmin-width/max-widthl For wider media query support:! 21. Hide Contentl display:none! Hide unnecessary content for mobile Add mobile only Panes with display:none in theregular CSS Note: hides content but does not improveperformance 22. Set (or dont set) Media Sizesl 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 mediawhen adding in DNNl For video, unless actually using the element:! 23. Set Font Sizesl 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 fontsl For scalable headlines that fit the width of itssurrounding element: Fittext.js! 24. Responsive Menu Optionsl Use unordered list menu layouts:

  • Home
  • About
  • Speaking
  • Contact

! 25. 1. Flow the menu onto two lines 26. 1. Flow the menu onto two linesl What a horizontal unordered list will naturally dol Can hide submenu dropdowns (If accessible elsewhere) nav ul li ul { display:none; }!l Use media queries to reduce font sizes before breakingto two lines 27. 1. Flow the menu onto two linesl Tutorial: 28. 1. Flow the menu onto two linesl When to use it? Submenus dont 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 29. 2. Switch a horizontal menu to vertical 30. 2. Switch a horizontal menu to verticall 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; }! 31. 2. Switch a horizontal menu to verticall Tutorial to include dropdown submenus: Based on Suckerfish dropdownsl Uses :hover to expand submenus. (Works on mobile,but some potential issues) 32. 2. Switch a horizontal menu to verticall 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 33. 3. Switch to an expandable menu button 34. 3. Switch to an expandable menu buttonl Similar to switching a horizontal menuto vertical, with the addition of hidingthe menu until clicked/touchedl The markup:! !! Main Menu !

!! 35. 3. Switch to an expandable menu buttonl Regular { 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: