Dn nfor mobile_download_en

3,355 views
3,287 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,355
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
156
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 1st SmartPhone
    The 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 station
    Besides 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

    1. 1. DNN for Mobile An 1-hour remake
    2. 2. Beatriz Oliveira
    3. 3. the mobile jungle
    4. 4. mobile devices
    5. 5. simon
    6. 6. 1024 x 768320 x 480 320 x 240176 x 220128 x 16096 x 65
    7. 7. 320 x 240 QVGA 360 x 480248 x 480 320 x 480 HVGA most common mobile screen sizes for recent devices
    8. 8. mobile OS / browsers
    9. 9. 60% 19% 10% 2% 9% iPhone (MacOS) Android Blackberry (RIM) Windows Mobile Others Operating system share of mobile web by end 2009 (source Quantcast)
    10. 10. you can’t eat (support) everything
    11. 11. you don’t need to support everything
    12. 12. strategy
    13. 13. Do nothing Mobile-friendly design Mobile-specific design Multi-serving content
    14. 14. target mobile browsers
    15. 15. specific css for mobile (media types) targeting mobile browsers Tip #1
    16. 16. <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" />
    17. 17. @media rule targeting mobile browsers Tip #2
    18. 18. @media screen { /* rules for computer screens */ } @media handheld { /* rules for handheld devices */ } Add to screen.css Add to handheld.css
    19. 19. CSS Behavior PC Browsers Handheld.css OpenWave, Nokia lite-web, Netfront, Motorola Handheld.css + screen.css Palm’s Blazer, Nokia S40 (before 6th ed) Screen.css iPhone’s Safari, Android, Opera Mobile, Opera Mini, BlackBerry, WebOS Symbian S60, Internet Explorer Screen.cs s ✔ ✔ ✔ Handheld.css ✔ ✔
    20. 20. media queries targeting mobile browsers Tip #3
    21. 21. <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) {...}
    22. 22. skin.css screen.css handheld.css @import url("screen.css"); @import url("handheld.css") handheld, only screen and (max-device-width:480px);
    23. 23. @import url(”antiscreen.css") handheld, only screen and (max-device-width:480px); skin.css screen.css handheld.css @import url("screen.css”) antiscreen.cs s @import url("handheld.css") handheld, only screen and (max-device-width:480px);
    24. 24. CSS Behavior PC Browsers Handheld.css OpenWave, Nokia lite-web, Netfront, Motorola Handheld.css + screen.css Palm’s Blazer, Nokia S40 (before 6th ed) Screen.css w/ media queries iPhone’s Safari, Android, Opera Mobile, Opera Mini, BlackBerry, WebOS Screen.css no media queries Symbian S60, Internet Explorer Screen.cs s ✔ ✔ ✔ ✔ Handheld.css ✔ ✔ ✔
    25. 25. mobile styles
    26. 26. basic mobile styles mobile styles Tip #1
    27. 27. html, body { background: #fff; color: #000; margin: 0; padding: 0; }
    28. 28. html, body { background: #fff; color: #000; margin: 0; padding: 0; font: 12px/15px sans-serif; } Do not rely on support of font related styling
    29. 29. no width content mobile styles Tip #2
    30. 30. * {width: auto;}
    31. 31. setting the viewport mobile styles Tip #3
    32. 32. Device Screen Document Viewport
    33. 33. <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(scr ipt); </script> In DNN, add to default.ascx <meta name=”viewport” content=“width=device-width”/> Add to <head> section
    34. 34. careful with floats mobile styles Tip #3
    35. 35. * {float: none;}
    36. 36. keep it simple mobile styles Tip #4
    37. 37.  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?
    38. 38. display only the essential
    39. 39. Header Main Navigation Content Footer .leftpane, .rightpane { display: none; }
    40. 40. top navigation (vertical) mobile styles Tip #5
    41. 41. .mi, .mi .txt {display:block !important; text-align:left; margin:0 !important;}
    42. 42. control image width mobile styles Tip #6
    43. 43. #content img {max-width: 250px;} or img {max-width: 250px;}
    44. 44. slim headings mobile styles Tip #7
    45. 45. h1, h2, h3, h4, h5, h6 {font-weight: normal;}
    46. 46. links mobile styles Tip #8
    47. 47. a:link, a:visited { text-decoration: underline; color: #0000CC; } a:hover, a:active { text-decoration: underline; color: #660066; } Highlight links <a href=“tel:+1999999999“>Call us!</a> Use the tel: de facto standard Avoid target=_blank
    48. 48. forms mobile styles Tip #9
    49. 49. ✔ Minimum input ✔ Do not use tables for layout ✔ Use definition lists (dl, dt, dd)
    50. 50. Other do’s and don’ts mobile styles Tip #10
    51. 51. ✔ keep URIs of site entry points short www.example.org/example.html accept example.org/example ✔ careful with color contrasts ✔ use (minimum) web standards XHTML 1.0 / HTML 4.01 / XHTML-MP, CSS 2.1, DOM 1, ECMAScript 3 ✔ always specify a doctype ✔ use standard media types Static: JPEG, GIF, PNG / Dynamic: 3GP, AVI, WMV, MP4
    52. 52. × 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
    53. 53. W3C Best Practices http://www.w3.org/TR/mobile- bp/summary
    54. 54. put it all together
    55. 55. 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;}
    56. 56. How to target devices that read screen, but do not support media queries?
    57. 57. javascript
    58. 58. server-side UA detection
    59. 59. MobileCSSInject
    60. 60. >90%
    61. 61. testing
    62. 62. use emulators testing Tip #1
    63. 63. • iPhone simulator http://developer.apple.com/iPhone/program/ • Android emulator http://code.google.com/android/reference/emulator.html • BlackBerry simulator http://www.blackberry.com/developers/downloads/simulators/index.shtml • Windows Phone 7 http://create.msdn.com/ • Opera Mini simulator http://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
    64. 64. use real devices when possible testing Tip #2
    65. 65. 5 Steps Know your users Define a strategy Target selected devices Styles for mobile Test
    66. 66. books
    67. 67. Contacts www.bind.pt Twitter – bindskins beatrizoliveira@bind.pt http://dnnblueprint.codeplex.com
    68. 68. questions?

    ×