Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Dn nfor mobile_download_en

on

  • 3,559 views

Bind's technique on how to achieve a better looking DNN website for the mobile web, in less than an hour.

Bind's technique on how to achieve a better looking DNN website for the mobile web, in less than an hour.

Statistics

Views

Total Views
3,559
Views on SlideShare
3,559
Embed Views
0

Actions

Likes
2
Downloads
156
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 1stSmartPhoneThe IBM Simon Personal Communicator was an advanced cellular telephone for its time, created by a joint venture between IBM and BellSouth. Simon was first shown as a product concept in 1992[1] at COMDEX, in Las Vegas, Nevada. Launched in 1993[2] it combined the features of a mobile phone, a pager, a PDA, and a fax machine. After some delays it was sold by BellSouth in 1994 in 190 U.S. cities in 15 states and was originally priced at $899.[3]IBM Simon in charging stationBesides a mobile phone, the major applications were a calendar, address book, world clock, calculator, note pad, e-mail, and games. It had no physical buttons to dial with. Instead customers used a touch-screen to select phone numbers with a finger or create facsimiles and memos with an optional stylus. Text was entered with either a unique on-screen "predictive" keyboard or QWERTY keyboard. The Simon had an optional PCMCIA memory card.The Simon smartphone appeared in the movie The Net.
  • Nowadays nearly 15% of all mobile devices are already smartphones (this roughly represents a target population of nearly 600 million people).In the meantime an incredible variety of models and formats has been growing (and it doesn’t seem to stop!).There are literally hundreds of various device models sold around the world every year, which makes screen sizes far from being standard.
  • The market as a cake to be eaten
  • Market to be targeted
  • List of 60 best practices for mobile
  • Market we can now target

Dn nfor mobile_download_en Dn nfor mobile_download_en Presentation Transcript

  • DNN for Mobile
    An 1-hour remake
  • Beatriz Oliveira
  • the mobile jungle
  • mobile devices
  • simon
  • 1024 x 768
    320 x 480
    320 x 240
    176 x 220
    128 x 160
    96 x 65
  • 320 x 240 QVGA
    360 x 480
    248 x 480
    320 x 480 HVGA
    most common mobile screen sizes for recent devices
  • mobile OS / browsers
  • Operating system share of mobile web by end 2009 (source Quantcast)
  • you can’t eat (support) everything
  • you don’t need to support everything
  • strategy
  • Mobile-friendly
    design
    Mobile-specific
    design
    Multi-serving
    content
    Do nothing
  • target mobile browsers
  • specific css for mobile(media types)
    targeting mobile browsers
    Tip #1
  • <link rel="stylesheet" href="http://domain.tld/screen.css" type="text/css" media="Screen" /><link rel="stylesheet" href="http://domain.tld/handheld.css" type="text/css" media="handheld" />
  • @media rule
    targeting mobile browsers
    Tip #2
  • Add to screen.css
    @media screen {
    /* rules for computer screens */
    }
    @media handheld {
    /* rules for handheld devices */
    }
    Add to handheld.css
  • CSS Behavior
    PC Browsers
    Handheld.cssOpenWave, Nokia lite-web, Netfront, Motorola
    Handheld.css + screen.cssPalm’s Blazer, Nokia S40 (before 6thed)
    Screen.css
    iPhone’s Safari, Android, Opera Mobile, Opera Mini, BlackBerry, WebOS
    Symbian S60, Internet Explorer
    Screen.css



    Handheld.css


  • media queries
    targeting mobile browsers
    Tip #3
  • <link rel="stylesheet" href="handheld.css"
    media="only screen and (max-device-width:480px)"/>
    @import url(handheld.css) only screen and (max-device-width:480px);
    @media only screen and (max-device-width:480px) {...}
  • screen.css
    handheld.css
    skin.css
    @import url("screen.css"); @import url("handheld.css") handheld, only screen and (max-device-width:480px);
  • screen.css
    antiscreen.css
    handheld.css
    skin.css
    @import url("screen.css”)
    @import url(”antiscreen.css") handheld, only screen and (max-device-width:480px);
    @import url("handheld.css") handheld, only screen and (max-device-width:480px);
  • CSS Behavior
    PC Browsers
    Handheld.cssOpenWave, Nokia lite-web, Netfront, Motorola
    Handheld.css + screen.cssPalm’s Blazer, Nokia S40 (before 6thed)
    Screen.cssw/ media queries
    iPhone’s Safari, Android, Opera Mobile, Opera Mini, BlackBerry, WebOS
    Screen.css no media queries
    Symbian S60, Internet Explorer
    Screen.css




    Handheld.css



  • mobile styles
  • basic mobile styles
    mobile styles
    Tip #1
  • html, body {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 0;
    }
  • html, body {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 0;font: 12px/15px sans-serif;
    }
    Do not rely on support of font related styling
  • no width content
    mobile styles
    Tip #2
  • * {width: auto;}
  • setting the viewport
    mobile styles
    Tip #3
  • Device Screen
    Document Viewport
  • Add to <head> section
    <meta name=”viewport” content=“width=device-width”/>
    In DNN, add to default.ascx
    <script language="javascript" type="text/javascript" >
    var script = document.createElement("meta");
    script.name = "viewport";
    script.content = "width=device-width";
    document.getElementsByTagName("head").item(0).appendChild(script);
    </script>
  • careful with floats
    mobile styles
    Tip #3
  • * {float: none;}
  • keep it simple
    mobile styles
    Tip #4
    • What are mobile visitors looking for?
    • What information do they want/need?
    • Do mobile visitors have time/interest in all of my tedious sidebar content?
    • With a barebones stylesheet, which elements are clearly superfluous?
    • Which navigational elements are absolutely necessary? Which are redundant?
    • Are there entire regions of my page that would be better off not displayed?
  • display only the essential
  • Header
    .leftpane, .rightpane {
    display: none;
    }
    Main Navigation
    Content
    Footer
  • top navigation (vertical)
    mobile styles
    Tip #5
  • .mi, .mi .txt {display:block !important; text-align:left; margin:0 !important;}
  • control image width
    mobile styles
    Tip #6
  • #content img {max-width: 250px;}
    or
    img {max-width: 250px;}
  • slim headings
    mobile styles
    Tip #7
  • h1, h2, h3, h4, h5, h6 {font-weight: normal;}
  • links
    mobile styles
    Tip #8
  • Highlight links
    a:link, a:visited {
    text-decoration: underline;
    color: #0000CC;
    }
    a:hover, a:active {
    text-decoration: underline;
    color: #660066;
    }
    Use the tel: de facto standard
    <a href=“tel:+1999999999“>Call us!</a>
    Avoid target=_blank
  • forms
    mobile styles
    Tip #9
  • ✔Minimum input
    ✔Do not use tables for layout
    ✔Use definition lists (dl, dt, dd)
  • Other do’s and don’ts
    mobile styles
    Tip #10
  • ✔ keep URIs of site entry points shortwww.example.org/example.html accept example.org/example
    ✔ careful with color contrasts
    ✔ use (minimum) web standardsXHTML 1.0 / HTML 4.01 / XHTML-MP, CSS 2.1, DOM 1, ECMAScript 3
    ✔ always specify a doctype
    ✔ use standard media typesStatic: JPEG, GIF, PNG / Dynamic: 3GP, AVI, WMV, MP4
  • × frames
    × tables for layout
    × nested tables
    × image maps
    × graphics for spacing
    × horizontal scrolling
    × do not rely on plug-ins, DHTML behaviors, embedded objects or script
  • W3C Best Practiceshttp://www.w3.org/TR/mobile-bp/summary
  • put it all together
  • html, body {background-color:#fff; color:#000; margin:0; padding:0; font:15px/120% sans-serif;}
    * {width:auto;}
    * {float:none;}
    .RightPane, .LeftPane {display:none;}
    .mi, .mi .txt {display:block; height:auto; text-align:left; margin:0;}
    #Panes img, #Footer img {max-width:250px;}
    h1, h2, h3, h4, h5, h6 {font-weight:normal;}
    a:link, a:visited {text-decoration:underline; color:#0000CC;}
    a:hover, a:active {text-decoration:underline ;color:#660066;}
  • How to target devices that read screen, but do not support media queries?
  • javascript
  • server-side UA detection
  • MobileCSSInject
  • >90%
  • testing
  • use emulators
    testing
    Tip #1
    • iPhone simulatorhttp://developer.apple.com/iPhone/program/
    • Android emulatorhttp://code.google.com/android/reference/emulator.html
    • BlackBerry simulatorhttp://www.blackberry.com/developers/downloads/simulators/index.shtml
    • Windows Phone 7http://create.msdn.com/
    • Opera Mini simulatorhttp://www.opera.com/mobile/demo/
    • Nokia Qt SDK (Symbian)http://www.forum.nokia.com/info/sw.nokia.com/id/e920da1a-5b18-42df-82c3-907413e525fb/Nokia_Qt_SDK.html
  • use real devices when possible
    testing
    Tip #2
  • 5 Steps
    Know your users
    Define a strategy
    Target selected devices
    Styles for mobile
    Test
  • books
  • Contacts
    www.bind.pt
    Twitter – bindskins
    beatrizoliveira@bind.pt
    http://dnnblueprint.codeplex.com
  • questions?