Post on 01-Jul-2015
description
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.flickr.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 Balancehttp://www.gartner.com/resId=1268513
9
1. Why is this important?
Mobile traffic will double every year through 2014.Cisco Visual Networking Index:Global Mobile Data Traffic Forecast Update, 2009-2014http://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 2010http://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.flickr.com/photos/yourdon/4189598119/
15
Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/Ed Yourdon: http://www.flickr.com/photos/yourdon/4064143718
16
Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/
Ed Yourdon: http://www.flickr.com/photos/yourdon/2675323741
17
Annie Mole: http://www.flickr.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 tipshttp://www.w3.org/2007/02/mwbp_flip_cards
22
davepatten: http://www.flickr.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 flexibility, and reaches the needs of more people.
24
itspaulkelly:http://www.flickr.com/photos/itspaulkelly/3002829791
Tip 2: Rely on Web standards.
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
Sebastian Bergmann: http://www.flickr.com/photos/sebastian_bergmann/1565541837
Tip 3: Stay away from known hazards
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
shrk: http://www.flickr.com/photos/shrk/197956858/
Tip 4: Be cautious of device limitations.
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
Arthur Chapman: http://www.flickr.com/photos/arthur_chapman/3885136559/
Tip 5: Optimise navigation.
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
isriya: http://www.flickr.com/photos/isriya/5040793064/
Tip 6: Check graphics and colours.
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
Martin Kingsley: http://www.flickr.com/photos/coyotejack/1812312679
Tip 7: Keep it small.
35
2. What makes a great mobile site?
Smaller sites make users happier by costing less in time and money.
36
Dave & Karin: http://www.flickr.com/photos/dnk_uk/3525103502
Tip 8: Use the network sparingly.
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.flickr.com/photos/peyri/462244646
Tip 9: Help & guide user input
39
anakenal: http://www.flickr.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
Ed Yourdon: http://www.flickr.com/photos/yourdon/3979323453/
Tip 10: Think of users on the go.
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
Design follows function.
3. How do I put one together?
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
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]
3. How do I put one together?
Detect Mobile Browserhttp://detectmobilebrowser.com/
63
3. How do I put one together?
Test it again!
64
3. How do I put one together?
• Define the content and IA
• Build a design
• Create a site, fill 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