MWD3002 Multiplatform Applications Week 5 – Designing for Mobile

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

MWD3002 Multiplatform Applications Phone Capabilities

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

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

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

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

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

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

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

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

MWD3002 Multiplatform Applications Mobile Browsers

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

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

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/ (KHTML, like Gecko) Version Mobile/5F137

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

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 on your phonehttp://tinyurl.com/mwd3002