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




5


Chris Limb: http://www.flickr.com/photos/catmachine/3826156707/

6

http://www.flickr.com/photos/catmachine/3826156707/

http://www.flickr.com/photos/catmachine/3826156707/


Put your hand up if you...

• have a mobile phone?

• have an internet-capable phone?

• use it often?

7


Thatʼs your audience.

8


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

http://www.gartner.com/resId=1268513

http://www.gartner.com/resId=1268513


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

http://www.aimia.com.au/ampli



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




OMG!

12





13


Question: What makes the mobile browsing experience different?

14

Ed Yourdon: http://www.flickr.com/photos/yourdon/4189598119/

15

http://www.flickr.com/photos/yourdon/4189598119/


Ed Yourdon: http://www.flickr.com/photos/yourdon/4227578583/Ed Yourdon: http://www.flickr.com/photos/yourdon/4064143718

16

http://www.flickr.com/photos/yourdon/2675323741



Ed Yourdon: http://www.flickr.com/photos/yourdon/2675323741

17



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




Question: What makes the mobile browsing experience different?

19


Answer: The context—why, when, and where.

20


21


Ten top tipshttp://www.w3.org/2007/02/mwbp_flip_cards

22

http://www.w3.org/2007/02/mwbp_flip_cards

http://www.w3.org/2007/02/mwbp_flip_cards

davepatten: http://www.flickr.com/photos/davepatten/124418044/

Tip 1: Design for one Web.

23

http://www.flickr.com/photos/davepatten/124418044/

http://www.flickr.com/photos/davepatten/124418044/


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

http://www.flickr.com/photos/itspaulkelly/3002829791

http://www.flickr.com/photos/itspaulkelly/3002829791


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

http://www.flickr.com/photos/sebastian_bergmann/1565541837

http://www.flickr.com/photos/sebastian_bergmann/1565541837


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

http://www.flickr.com/photos/shrk/197956858/

http://www.flickr.com/photos/shrk/197956858/


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

http://www.flickr.com/photos/arthur_chapman/3885136559/

http://www.flickr.com/photos/arthur_chapman/3885136559/


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


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

http://www.flickr.com/photos/coyotejack/1812312679

http://www.flickr.com/photos/coyotejack/1812312679


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

http://www.flickr.com/photos/dnk_uk/3525103502

http://www.flickr.com/photos/dnk_uk/3525103502


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


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.

42




Web users on the go want compact information when time is short and distractions many.

43


Itʼs about being user-centric.

44


Letʼs look at some examples.

45





46


Planning is everything.

47


What best serves your mobile visitors?• Directions, addresses?

• Contact details?

• Event details?

• Fast facts?

48

Design follows function.


49


• Simple

• Fast

• Considerate

50


Turn it into HTML, CSS, images

51


Nifty tricks for mobile users—

• Viewport-based meta tags & CSS

• Triggers and image varieties for resizing images

52

Start testing now.

53


• iPhone Simulator

• Adobe DeviceCentral

• Browser-based tools

54


Test with real devices.

55


Plug it in to your CMS.

56


Construct your mobile site in the CMS.

57


Bump in your mobile design.

58


(Stop me if youʼve heard this before...)

59


Test it again!

60


Detect mobile browsers

61


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

http://detectmobilebrowser.com/mobile


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]


Detect Mobile Browserhttp://detectmobilebrowser.com/

63



http://detectmobilebrowser.com

http://detectmobilebrowser.com


Test it again!

64


• Define the content and IA

• Build a design

• Create a site, fill with content

65


Thatʼs all there is to it!

66

Letʼs recap




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

Technology

Transcript of Squiz IUC 2010 - 2.2 Mobile Presentation