Squiz IUC 2010 - 2.2 Mobile Presentation

701 views

Published on

Squiz International User Conference 2010

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

  • Be the first to like this

No Downloads
Views
Total views
701
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Squiz IUC 2010 - 2.2 Mobile Presentation

  1. 1. W3C mobile design Raena Jackson-Armitage—Squiz 1
  2. 2. Shhhh... Please, silence your mobile phone 2
  3. 3. Hello Itʼs a pleasure to meet you! 3
  4. 4. Todayʼs talk 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 4
  5. 5. Todayʼs talk 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 5
  6. 6. 1. Why is this important? Chris Limb: http://www.flickr.com/photos/catmachine/3826156707/ 6
  7. 7. 1. Why is this important? Put your hand up if you... • have a mobile phone? • have an internet-capable phone? • use it often? 7
  8. 8. 1. Why is this important? Thatʼs your audience. 8
  9. 9. 1. Why is this important? By 2013, mobile phones will overtake PCs as the most common web access device worldwide. Gartner's Top Predictions for IT Organizations and Users, 2010 and Beyond: A New Balance http://www.gartner.com/resId=1268513 9
  10. 10. 1. Why is this important? Mobile traffic will double every year through 2014. Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2009-2014 http://tinyurl.com/cisco-mobile 10
  11. 11. 1. Why is this important? Right now, 24% of Australian mobile users visit websites on their phones every day. AIMIA Mobile Phone Lifestyle Index (Survey 6) October 2010 http://www.aimia.com.au/ampli 11
  12. 12. 1. Why is this important? OMG! 12
  13. 13. 2. What makes a great mobile site? 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 13
  14. 14. 2. What makes a great mobile site? Question: What makes the mobile browsing experience different? 14
  15. 15. Ed Yourdon: http://www.flickr.com/photos/yourdon/4189598119/ 15
  16. 16. Ed Yourdon: http://www.flickr.com/photos/yourdon/4064143718 Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/ 16
  17. 17. Ed Yourdon: http://www.flickr.com/photos/yourdon/2675323741 Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/ 17
  18. 18. Annie Mole: http://www.flickr.com/photos/anniemole/4751556485/ 18
  19. 19. 2. What makes a great mobile site? Question: What makes the mobile browsing experience different? 19
  20. 20. 2. What makes a great mobile site? Answer: The context—why, when, and where. 20
  21. 21. 2. What makes a great mobile site? 21
  22. 22. 2. What makes a great mobile site? Ten top tips http://www.w3.org/2007/02/mwbp_flip_cards 22
  23. 23. davepatten: http://www.flickr.com/photos/davepatten/124418044/ Tip 1: Design for one Web. 23
  24. 24. 2. What makes a great mobile site? Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people. 24
  25. 25. Tip 2: Rely on Web standards. itspaulkelly:http://www.flickr.com/photos/itspaulkelly/3002829791 25
  26. 26. 2. What makes a great mobile site? In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability. 26
  27. 27. Tip 3: Stay away from known hazards Sebastian Bergmann: http://www.flickr.com/photos/sebastian_bergmann/1565541837 27
  28. 28. 2. What makes a great mobile site? Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices. 28
  29. 29. Tip 4: Be cautious of device limitations. shrk: http://www.flickr.com/photos/shrk/197956858/ 29
  30. 30. 2. What makes a great mobile site? When choosing to use a particular Web technology, consider that mobile devices vary greatly in capability. 30
  31. 31. Tip 5: Optimise navigation. Arthur Chapman: http://www.flickr.com/photos/arthur_chapman/3885136559/ 31
  32. 32. 2. What makes a great mobile site? Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth. 32
  33. 33. Tip 6: Check graphics and colours. isriya: http://www.flickr.com/photos/isriya/5040793064/ 33
  34. 34. 2. What makes a great mobile site? Images, colours, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats. 34
  35. 35. Tip 7: Keep it small. Martin Kingsley: http://www.flickr.com/photos/coyotejack/1812312679 35
  36. 36. 2. What makes a great mobile site? Smaller sites make users happier by costing less in time and money. 36
  37. 37. Tip 8: Use the network sparingly. Dave & Karin: http://www.flickr.com/photos/dnk_uk/3525103502 37
  38. 38. 2. What makes a great mobile site? Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies. 38
  39. 39. Peyri: http://www.flickr.com/photos/peyri/462244646 Tip 9: Help & guide user input 39
  40. 40. anakenal: http://www.flickr.com/photos/akanekal/1117805343/ Tip 9: Help & guide user input 40
  41. 41. 2. What makes a great mobile site? Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them. 41
  42. 42. Tip 10: Think of users on the go. Ed Yourdon: http://www.flickr.com/photos/yourdon/3979323453/ 42
  43. 43. 2. What makes a great mobile site? Web users on the go want compact information when time is short and distractions many. 43
  44. 44. 2. What makes a great mobile site? Itʼs about being user-centric. 44
  45. 45. 2. What makes a great mobile site? Letʼs look at some examples. 45
  46. 46. 3. How do I put one together? 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 46
  47. 47. 3. How do I put one together? Planning is everything. 47
  48. 48. 3. How do I put one together? What best serves your mobile visitors? • Directions, addresses? • Contact details? • Event details? • Fast facts? 48
  49. 49. 3. How do I put one together? Design follows function. 49
  50. 50. 3. How do I put one together? • Simple • Fast • Considerate 50
  51. 51. 3. How do I put one together? Turn it into HTML, CSS, images 51
  52. 52. 3. How do I put one together? Nifty tricks for mobile users— • Viewport-based meta tags & CSS • Triggers and image varieties for resizing images 52
  53. 53. Start testing now. 53
  54. 54. 3. How do I put one together? • iPhone Simulator • Adobe DeviceCentral • Browser-based tools 54
  55. 55. 3. How do I put one together? Test with real devices. 55
  56. 56. 3. How do I put one together? Plug it in to your CMS. 56
  57. 57. 3. How do I put one together? Construct your mobile site in the CMS. 57
  58. 58. 3. How do I put one together? Bump in your mobile design. 58
  59. 59. 3. How do I put one together? (Stop me if youʼve heard this before...) 59
  60. 60. 3. How do I put one together? Test it again! 60
  61. 61. 3. How do I put one together? Detect mobile browsers 61
  62. 62. 3. How do I put one together? RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop| iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi| re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda| xiino [NC,OR] RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo| s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )| avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm| cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em (l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)| gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu (aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro| jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e /|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)| mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0| 2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a| d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07| 12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h -|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it| t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)| tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5 [0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)| wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-) [NC] RewriteRule ^$ http://example.com/mobile [R,L] 62
  63. 63. 3. How do I put one together? RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop| iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi| re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda| xiino [NC,OR] RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo| s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )| avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm| cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em (l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)| Detect Mobile Browser gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu (aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro| jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e http://detectmobilebrowser.com/ /|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)| mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0| 2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a| d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07| 12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h -|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it| t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)| tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5 [0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)| wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-) [NC] RewriteRule ^$ http://example.com/mobile [R,L] 63
  64. 64. 3. How do I put one together? Test it again! 64
  65. 65. 3. How do I put one together? • Define the content and IA • Build a design • Create a site, fill with content 65
  66. 66. 3. How do I put one together? Thatʼs all there is to it! 66
  67. 67. Letʼs recap 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 67
  68. 68. Letʼs recap Seems easy, right? 68
  69. 69. Letʼs discuss Questions 69
  70. 70. Itʼs been a pleasure Thank you for your attendance! 70

×