1. 1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director

2. 2 Company Confidential 2 So you want a mobile website?

3. 3 Company Confidential Which technique to use? Dedicated Mobile Website Pros:  Better performance  More perfected mobile UI Cons:  Higher development cost  Have to maintain two sites Responsive Mobile Website Pros:  Maintain one website only  Quick to implement  Can improve desktop UI Cons: Weaker performance Older browsers (<IE8) don’t support Some layout restrictions

4. 4 Company Confidential We’ll cover responsive sites… Ideal for DNN sites because:  Content management kept in one place  Skinning system makes implementation easy* *As long is your skin and containers are built with DIVS not TABLES!

5. 5 Company Confidential …created with CSS Media Queries Media queries work by serving different CSS based on your browser size or type. Media queries allow us to change our layouts based on device properties without changing content.

6. 6 Company Confidential What About DNN 6.1? DNN 6.1 facilitates development for dedicated mobile websites with:  Mobile site template  Mobile detection and redirection (Professional/Enterprise) Media queries can be applied sitewide to existing content, no redirection needed

7. 7 Company Confidential 7 Getting Started

8. 8 Company Confidential Target browsers By Media Type:  Screen  Print  Handheld  TV  all By Media Feature:  Aspect-ratio  Device-aspect-ratio  Device-height  Device-width  Height  Width  Orientation  Resolution

9. 9 Company Confidential Find the right combination Can use and, not, only My favorite for a basic mobile site: @media all and (max-width: 480px) {… } You can also target small desktops or tablets: @media all and (min-width:480px) and (max-width: 800px) {… } Or widescreens: @media all and (min-width:1400px) {… }

10. 10 Company Confidential Link to your Media Queries From the Skin.ascx file: From the Skin.css file: @import url("mobile.css") handheld; Or include directly in the Skin.css file: @media handheld { /* Mobile styles go here*/ }

11. 11 Company Confidential Remember the Viewport Put this in your skin file to make sure the browser will scale to your mobile website size correctly.

12. 12 Company Confidential And IE Fix Javascript is needed for media queries to work in Internet Explorer 8 and below.

13. 13 Company Confidential 13 Adding Mobile Styles

14. 14 Company Confidential Everything happens in CSS! The Regular CSS > < The @Media CSS

15. 15 Company Confidential Hide and Show display:none is your friend!  Hide unnecessary content for mobile  Add mobile only Panes with display:none in the regular CSS

16. 16 Company Confidential Testing (made easy) Simply shrink your browser below the set max-width, and the site will instantly change!  Works if media queries are defined for “all” media, not “handheld”  Also can use “User Agent Switcher” Firefox plugin

17. 17 Company Confidential Some Recommendations Simplify the Header  Keep the logo. Hide search, slogans, etc.  Hide the contact info unless it would be especially important for mobile users to access quickly (restaurants, retail stores)  Pay attention to the menu (but there is no single best solution) Hide sidebar content  It’s often repeated on many pages  Except, retain inside menus Make images display smaller img { max-width:100%; }

18. 18 Company Confidential Some Limitations  You can’t change the order that elements appear in your Skin.ascx file For example: if you have a left side menu on inside pages, you can’t have the menu appear after the page content on mobile. It must load in order before the content if the menu div comes first.  Browsers still load hidden content using display:none  Full-size images still load when using max-width You might not be able to get everything *perfect*, but you will still end up with a great mobile site!

19. 19 Company Confidential 19 Let’s Walk Through an Example: www.gravityworksdesign.com www.gravityworksdesign.com

20. 20 Company Confidential Taking it Further Fully Responsive Website Designs  Set font sizes in em ’s  Set layout and pane widths with percentages

21. 21 Company Confidential Another Example You can change menu appearance, headers, and make the site look completely different!

22. 22 Company Confidential More Media Query Examples dconstruct.org hicksdesign.co.uk colly.com bostonglobe.com mediaqueri.es : a collection of sites using media queriesmediaqueri.es

23. 23 Company Confidential Questions? Amelia Marschall Partner & Creative Director @MimiAmelia amelia@gravityworksdesign.com