Recommandé
Recommandé
Contenu connexe
Similaire à Dn nfor mobile_download_en
Similaire à Dn nfor mobile_download_en (20)
Dernier
Dernier (20)
Dn nfor mobile_download_en
- 1. DNN for Mobile An 1-hour remake
- 11. mobile devices
- 12. simon
- 15. 1024 x 768 320 x 480 320 x 240 176 x 220 128 x 160 96 x 65
- 16. 320 x 240 QVGA 360 x 480 248 x 480 320 x 480 HVGA most common mobile screen sizes for recent devices
- 17. mobile OS / browsers
- 20. 60% 19% 10% 2% 9% iPhone (MacOS) Android Blackberry (RIM) Windows Mobile Others Operating system share of mobile web by end 2009 (source Quantcast)
- 22. you can’t eat (support) everything
- 23. you don’t need to support everything
- 25. strategy
- 28. specific css for mobile (media types) targeting mobile browsers Tip #1
- 29. <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" />
- 30. @media rule targeting mobile browsers Tip #2
- 31. @media screen { /* rules for computer screens */ } @media handheld { /* rules for handheld devices */ } Add to screen.css Add to handheld.css
- 32. 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 ✔ ✔
- 34. media queries targeting mobile browsers Tip #3
- 35. <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) {...}
- 36. skin.css screen.css handheld.css @import url("screen.css"); @import url("handheld.css") handheld, only screen and (max-device-width:480px);
- 37. @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);
- 38. 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 ✔ ✔ ✔
- 40. mobile styles
- 42. basic mobile styles mobile styles Tip #1
- 43. html, body { background: #fff; color: #000; margin: 0; padding: 0; }
- 44. html, body { background: #fff; color: #000; margin: 0; padding: 0; font: 12px/15px sans-serif; } Do not rely on support of font related styling
- 45. no width content mobile styles Tip #2
- 46. * {width: auto;}
- 47. setting the viewport mobile styles Tip #3
- 49. <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
- 50. careful with floats mobile styles Tip #3
- 51. * {float: none;}
- 52. keep it simple mobile styles Tip #4
- 53. 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?
- 55. Header Main Navigation Content Footer .leftpane, .rightpane { display: none; }
- 56. top navigation (vertical) mobile styles Tip #5
- 57. .mi, .mi .txt {display:block !important; text-align:left; margin:0 !important;}
- 58. control image width mobile styles Tip #6
- 59. #content img {max-width: 250px;} or img {max-width: 250px;}
- 61. h1, h2, h3, h4, h5, h6 {font-weight: normal;}
- 63. 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
- 65. ✔ Minimum input ✔ Do not use tables for layout ✔ Use definition lists (dl, dt, dd)
- 66. Other do’s and don’ts mobile styles Tip #10
- 67. ✔ 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
- 68. × 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
- 70. put it all together
- 71. 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;}
- 73. How to target devices that read screen, but do not support media queries?
- 74. javascript
- 76. MobileCSSInject
- 78. >90%
- 80. testing
- 82. • 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
- 83. use real devices when possible testing Tip #2
- 84. 5 Steps Know your users Define a strategy Target selected devices Styles for mobile Test
- 85. books
- 87. Contacts www.bind.pt Twitter – bindskins beatrizoliveira@bind.pt http://dnnblueprint.codeplex.com
- 88. questions?
Notes de l'éditeur
- 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