Your SlideShare is downloading. ×

Squiz IUC 2010 - 2.2 Mobile Presentation

382

Published on

Squiz International User Conference 2010

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
382
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. W3C mobile design Raena Jackson-Armitage—Squiz 1
  • 2. Shhhh... Please, silence your mobile phone 2
  • 3. Hello Itʼs a pleasure to meet you! 3
  • 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. Todayʼs talk 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 5
  • 6. 1. Why is this important? Chris Limb: http://www.flickr.com/photos/catmachine/3826156707/ 6
  • 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. 1. Why is this important? Thatʼs your audience. 8
  • 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. 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. 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. 1. Why is this important? OMG! 12
  • 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. 2. What makes a great mobile site? Question: What makes the mobile browsing experience different? 14
  • 15. Ed Yourdon: http://www.flickr.com/photos/yourdon/4189598119/ 15
  • 16. Ed Yourdon: http://www.flickr.com/photos/yourdon/4064143718 Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/ 16
  • 17. Ed Yourdon: http://www.flickr.com/photos/yourdon/2675323741 Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/ 17
  • 18. Annie Mole: http://www.flickr.com/photos/anniemole/4751556485/ 18
  • 19. 2. What makes a great mobile site? Question: What makes the mobile browsing experience different? 19
  • 20. 2. What makes a great mobile site? Answer: The context—why, when, and where. 20
  • 21. 2. What makes a great mobile site? 21
  • 22. 2. What makes a great mobile site? Ten top tips http://www.w3.org/2007/02/mwbp_flip_cards 22
  • 23. davepatten: http://www.flickr.com/photos/davepatten/124418044/ Tip 1: Design for one Web. 23
  • 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. Tip 2: Rely on Web standards. itspaulkelly:http://www.flickr.com/photos/itspaulkelly/3002829791 25
  • 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. Tip 3: Stay away from known hazards Sebastian Bergmann: http://www.flickr.com/photos/sebastian_bergmann/1565541837 27
  • 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. Tip 4: Be cautious of device limitations. shrk: http://www.flickr.com/photos/shrk/197956858/ 29
  • 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. Tip 5: Optimise navigation. Arthur Chapman: http://www.flickr.com/photos/arthur_chapman/3885136559/ 31
  • 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. Tip 6: Check graphics and colours. isriya: http://www.flickr.com/photos/isriya/5040793064/ 33
  • 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. Tip 7: Keep it small. Martin Kingsley: http://www.flickr.com/photos/coyotejack/1812312679 35
  • 36. 2. What makes a great mobile site? Smaller sites make users happier by costing less in time and money. 36
  • 37. Tip 8: Use the network sparingly. Dave & Karin: http://www.flickr.com/photos/dnk_uk/3525103502 37
  • 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. Peyri: http://www.flickr.com/photos/peyri/462244646 Tip 9: Help & guide user input 39
  • 40. anakenal: http://www.flickr.com/photos/akanekal/1117805343/ Tip 9: Help & guide user input 40
  • 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. Tip 10: Think of users on the go. Ed Yourdon: http://www.flickr.com/photos/yourdon/3979323453/ 42
  • 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. 2. What makes a great mobile site? Itʼs about being user-centric. 44
  • 45. 2. What makes a great mobile site? Letʼs look at some examples. 45
  • 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. 3. How do I put one together? Planning is everything. 47
  • 48. 3. How do I put one together? What best serves your mobile visitors? • Directions, addresses? • Contact details? • Event details? • Fast facts? 48
  • 49. 3. How do I put one together? Design follows function. 49
  • 50. 3. How do I put one together? • Simple • Fast • Considerate 50
  • 51. 3. How do I put one together? Turn it into HTML, CSS, images 51
  • 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. Start testing now. 53
  • 54. 3. How do I put one together? • iPhone Simulator • Adobe DeviceCentral • Browser-based tools 54
  • 55. 3. How do I put one together? Test with real devices. 55
  • 56. 3. How do I put one together? Plug it in to your CMS. 56
  • 57. 3. How do I put one together? Construct your mobile site in the CMS. 57
  • 58. 3. How do I put one together? Bump in your mobile design. 58
  • 59. 3. How do I put one together? (Stop me if youʼve heard this before...) 59
  • 60. 3. How do I put one together? Test it again! 60
  • 61. 3. How do I put one together? Detect mobile browsers 61
  • 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. 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. 3. How do I put one together? Test it again! 64
  • 65. 3. How do I put one together? • Define the content and IA • Build a design • Create a site, fill with content 65
  • 66. 3. How do I put one together? Thatʼs all there is to it! 66
  • 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. Letʼs recap Seems easy, right? 68
  • 69. Letʼs discuss Questions 69
  • 70. Itʼs been a pleasure Thank you for your attendance! 70

×