Squiz IUC 2010 - 2.2 Mobile Presentation

W3C mobile design Raena Jackson-Armitage—Squiz 1

Shhhh... Please, silence your mobile phone 2

Hello Itʼs a pleasure to meet you! 3

Todayʼs talk 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 4

Todayʼs talk 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 5

1. Why is this important? Chris Limb: http://www.ﬂickr.com/photos/catmachine/3826156707/ 6

1. Why is this important? Put your hand up if you... • have a mobile phone? • have an internet-capable phone? • use it often? 7

1. Why is this important? Thatʼs your audience. 8

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

1. Why is this important? Mobile trafﬁc will double every year through 2014. Cisco Visual Networking Index: Global Mobile Data Trafﬁc Forecast Update, 2009-2014 http://tinyurl.com/cisco-mobile 10

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

1. Why is this important? OMG! 12

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

2. What makes a great mobile site? Question: What makes the mobile browsing experience different? 14

Ed Yourdon: http://www.ﬂickr.com/photos/yourdon/4189598119/ 15

Ed Yourdon: http://www.ﬂickr.com/photos/yourdon/4064143718 Ed Yourdon: http://www.ﬂickr.com/photos/yourdon/4227578583/ 16

Ed Yourdon: http://www.ﬂickr.com/photos/yourdon/2675323741 Ed Yourdon: http://www.ﬂickr.com/photos/yourdon/4227578583/ 17

Annie Mole: http://www.ﬂickr.com/photos/anniemole/4751556485/ 18

2. What makes a great mobile site? Question: What makes the mobile browsing experience different? 19

2. What makes a great mobile site? Answer: The context—why, when, and where. 20

2. What makes a great mobile site? 21

2. What makes a great mobile site? Ten top tips http://www.w3.org/2007/02/mwbp_ﬂip_cards 22

davepatten: http://www.ﬂickr.com/photos/davepatten/124418044/ Tip 1: Design for one Web. 23

2. What makes a great mobile site? Content designed with diverse devices in mind reduces cost, increases ﬂexibility, and reaches the needs of more people. 24

Tip 2: Rely on Web standards. itspaulkelly:http://www.ﬂickr.com/photos/itspaulkelly/3002829791 25

2. What makes a great mobile site? In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability. 26

Tip 3: Stay away from known hazards Sebastian Bergmann: http://www.ﬂickr.com/photos/sebastian_bergmann/1565541837 27

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

Tip 4: Be cautious of device limitations. shrk: http://www.ﬂickr.com/photos/shrk/197956858/ 29

2. What makes a great mobile site? When choosing to use a particular Web technology, consider that mobile devices vary greatly in capability. 30

Tip 5: Optimise navigation. Arthur Chapman: http://www.ﬂickr.com/photos/arthur_chapman/3885136559/ 31

2. What makes a great mobile site? Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth. 32

Tip 6: Check graphics and colours. isriya: http://www.ﬂickr.com/photos/isriya/5040793064/ 33

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

Tip 7: Keep it small. Martin Kingsley: http://www.ﬂickr.com/photos/coyotejack/1812312679 35

2. What makes a great mobile site? Smaller sites make users happier by costing less in time and money. 36

Tip 8: Use the network sparingly. Dave & Karin: http://www.ﬂickr.com/photos/dnk_uk/3525103502 37

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

Peyri: http://www.ﬂickr.com/photos/peyri/462244646 Tip 9: Help & guide user input 39

anakenal: http://www.ﬂickr.com/photos/akanekal/1117805343/ Tip 9: Help & guide user input 40

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

Tip 10: Think of users on the go. Ed Yourdon: http://www.ﬂickr.com/photos/yourdon/3979323453/ 42

2. What makes a great mobile site? Web users on the go want compact information when time is short and distractions many. 43

2. What makes a great mobile site? Itʼs about being user-centric. 44

2. What makes a great mobile site? Letʼs look at some examples. 45

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

3. How do I put one together? Planning is everything. 47

3. How do I put one together? What best serves your mobile visitors? • Directions, addresses? • Contact details? • Event details? • Fast facts? 48

3. How do I put one together? Design follows function. 49

3. How do I put one together? • Simple • Fast • Considerate 50

3. How do I put one together? Turn it into HTML, CSS, images 51

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

Start testing now. 53

3. How do I put one together? • iPhone Simulator • Adobe DeviceCentral • Browser-based tools 54

3. How do I put one together? Test with real devices. 55

3. How do I put one together? Plug it in to your CMS. 56

3. How do I put one together? Construct your mobile site in the CMS. 57

3. How do I put one together? Bump in your mobile design. 58

3. How do I put one together? (Stop me if youʼve heard this before...) 59

3. How do I put one together? Test it again! 60

3. How do I put one together? Detect mobile browsers 61

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

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

3. How do I put one together? Test it again! 64

3. How do I put one together? • Deﬁne the content and IA • Build a design • Create a site, ﬁll with content 65

3. How do I put one together? Thatʼs all there is to it! 66

Letʼs recap 1. Why is this important? 2. What makes a great mobile site? 3. How do I put one together? 67

Letʼs recap Seems easy, right? 68

Letʼs discuss Questions 69

Itʼs been a pleasure Thank you for your attendance! 70

Squiz IUC 2010 - 2.2 Mobile Presentation

by Squiz on Nov 10, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 41

Statistics

Squiz IUC 2010 - 2.2 Mobile Presentation — Presentation Transcript

http://squiz.com.au	29
http://www.squiz.com.au	12