creating a specialized mobile ui
DESCRIPTION
In this presentation we’ll have a look at a few real-world examples of successful mobile sites and what they do right and wrong. We’ll explore how the mobile Web fits into the larger stack of data that you already control. By modeling the Apple 3-tier approach, iTunes store (in the cloud), iTunes (desktop app), and iPod (mobile), you can use your company’s strengths to create a mobile site that complements your existing presence. By the end of this presentation you will understand some of the basic technologies used to target mobile devices and platforms, how to improve the user-experience and interaction with page elements such as forms, and generally what the mobile Web is and where it is heading in the near future—plus a bit of cheese slicing history thrown in for good measure. If your company is interested in getting involved in the mobile space or want to take your basic site to the next level, then this presentation is ideal for you.TRANSCRIPT
![Page 1: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/1.jpg)
Creating a specialized Mobile UI
Brian Sudahttp://suda.co.uk
![Page 2: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/2.jpg)
Thor Bjørklund
![Page 3: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/3.jpg)
Talking Heads
![Page 4: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/4.jpg)
It is about the lifestyle
![Page 5: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/5.jpg)
Full fat vs. Fat free
![Page 6: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/6.jpg)
Types of Users
![Page 7: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/7.jpg)
Repetitive Now
Types of Users
![Page 8: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/8.jpg)
Types of Users
Bored Now
![Page 9: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/9.jpg)
Urgent Now
Types of Users
![Page 10: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/10.jpg)
![Page 11: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/11.jpg)
Types of Devices
Nokia 1100 Apple iPhone
![Page 12: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/12.jpg)
~14 Million by the end of 2008
200+ Million so far
Nokia 1100 Apple iPhone
Types of Devices
![Page 13: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/13.jpg)
Browser Sniffing
![Page 14: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/14.jpg)
Tel protocol
<a href=“tel:+123.456.7890”>call me</a>
![Page 15: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/15.jpg)
Downcasting
á → aö → o
![Page 16: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/16.jpg)
Downcasting
Résumé→ Resume
![Page 17: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/17.jpg)
Downcasting
Rauðalækur
![Page 18: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/18.jpg)
Downcasting
RauðalækurRaudalaekur
![Page 19: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/19.jpg)
T9 and URLs
Activation Code: ABA2C
![Page 20: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/20.jpg)
T9 and URLs
Activation Code: ADA3C
![Page 21: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/21.jpg)
Dropdowns vs. Lists
![Page 22: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/22.jpg)
Seek time vs. choices
http://www.37signals.com/svn/posts/1128-learning-from-bad-ui
![Page 23: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/23.jpg)
Command Line Interfaces
![Page 24: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/24.jpg)
![Page 25: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/25.jpg)
3 tiered approach
![Page 26: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/26.jpg)
2D barcodes
![Page 27: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/27.jpg)
1D Barcodes
1D barcodes
![Page 28: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/28.jpg)
2D barcodes
![Page 29: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/29.jpg)
Train Timetable
2D barcodes
![Page 30: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/30.jpg)
2D barcodes
![Page 31: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/31.jpg)
![Page 32: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/32.jpg)
Best Practices
kurafire
![Page 33: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/33.jpg)
Core Phones
![Page 34: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/34.jpg)
TEST TEST TEST
![Page 35: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/35.jpg)
Conclusions
![Page 36: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/36.jpg)
Questions?
![Page 37: Creating a Specialized Mobile UI](https://reader033.vdocuments.site/reader033/viewer/2022051610/5492c122b47959794d8b46ac/html5/thumbnails/37.jpg)
Real World Examples