Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dn nfor mobile_download_en

3,581 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
  • Be the first to comment

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?

×