1. MWD3002 Multiplatform Applications Week 5 – Designing for Mobile

2. MWD3002 Multiplatform Applications Topics  Capabilities  Mobile Browsers  Design Considerations

3. MWD3002 Multiplatform Applications Phone Capabilities

4. MWD3002 Multiplatform Applications What can the phone do?  Most phones have some sort of internet access  Exact capabilities vary widely –Screen size –Interface –Browser Version –Languages Supported

5. MWD3002 Multiplatform Applications Samsung G600  Screen: QVGA (240x320)  Browser: WAP and HTML  Interface: D-Pad + Softkeys

6. MWD3002 Multiplatform Applications Nokia 2610  Screen: 128 x 128  Browser: WAP only  Interface: D-Pad + Softkeys

7. MWD3002 Multiplatform Applications Apple iPhone  Screen: 320 x 480  Browser: Safari Web Browser  Interface: Touch screen + Multi-touch

8. MWD3002 Multiplatform Applications Screen Size  Clearly has an impact on design  Possible to get small screen like 128x128 but not often heavy web users  QVGA (240 x 320) is common – usually portrait orientation  Some smartphones have larger screens e.g. iPhone

9. MWD3002 Multiplatform Applications Interface  Touchscreen is easy to cope with –Tend to be higher-spec phones –Larger size –Click on a link by tapping –Scroll around screen using finger or stylus –Can support clicks, but no equivalent to mouseOver event in JavaScript code

10. MWD3002 Multiplatform Applications D-Pad  On keyboard-only phones have a four-way directional pad + enter button + two softkeys  Action for softkeys indicated at bottom of screen  To navigate user has to click downwards to step through all the links on a page  Once the right link is highlighted – click on softkey or enter button to proceed

11. MWD3002 Multiplatform Applications Design Considerations  Tend to keep pages narrow (240)  Avoid top and left navigation –Tend to implement brief nav at foot of page  Keep information in summary form at high level  Add detail on lower level pages  Easy on the graphics – people pay by the MB

12. MWD3002 Multiplatform Applications Mobile Browsers

13. MWD3002 Multiplatform Applications Common Browsers  Opera Mobile –Widely deployed, cross platform  Obigo Browser –Common in US phones, embedded, WAP and HTML  Safari –Apple and others (including Nokia)  IE Mobile

14. MWD3002 Multiplatform Applications Detecting Browser  Standard was is to detect value of User-Agent variable passed by browser  Strings can be complex…

15. MWD3002 Multiplatform Applications User Agent Strings  LG/KU990-Orange/v10f Browser/Obigo- Q05A/3.6 MMS/LG-MMS-V1.0/1.2 Java/ASVM/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1  Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X ;en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version 3.1.1 Mobile/5F137

16. MWD3002 Multiplatform Applications Sample Code  Try to match parts of string rather than parse whole line  Can obtain fuller links to detailed spec of devices and code accordingly

17. MWD3002 Multiplatform Applications Other Headers  Browser passes other headers to server  HTTP-ACCEPT includes document MIME types that the browser can handle –May include text/html or text/vnd.wap.wml  HTTP_X_WAP_PROFILE contains url of xml doc with details of phone profile  Visit http://tinyurl.com/mwd3002 on your phonehttp://tinyurl.com/mwd3002