The Mobile Web - keep up if you can!


Published on

Slides for parallel session at IWMW2009, July 2009.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • IWMW2009 The Mobile Web - Keep up if you can! Sharon Steeples, University of Essex (July 2009)
  • IWMW2009 The Mobile Web - Keep up if you can! Sharon Steeples, University of Essex (July 2009)
  • The Mobile Web - keep up if you can!

    1. The Mobile Web - Keep up if you can! Please ensure all mobile phones are TURNED ON but set to SILENT If your phone can connect to a WIRELESS NETWORK please connect now DO NOW! On a post-it note write down one thing you are hoping to get from this session Then stick it to the wall!
    2. The Mobile Web - Keep up if you can! Sharon Steeples University of Essex IWMW2009 29 July 2009
    3. Question…
    4. Video…
    5. My first phone…
    6. Mobile phone capabilities
    7. The mobile browsing experience… <ul><li>3 volunteers please… (with working phones!) </li></ul>
    8. The mobile browsing experience <ul><li>“ Mobile” refers to the user and not to the device or the application </li></ul><ul><li>“ The mobile user experience is miserable” - Jakob Neilson, 2009 </li></ul><ul><li>Only a 53% success rate </li></ul>
    9. Desktop Vs Mobile <ul><li>Liberal screen space </li></ul><ul><li>Fast and reliable web access </li></ul><ul><li>Data input by keyboard and mouse </li></ul><ul><li>User is focussed </li></ul><ul><li>Mains powered </li></ul><ul><li>Small screen </li></ul><ul><li>Intermittent connectivity </li></ul><ul><li>Data input by numeric keypad, joystick, stylus or finger touch </li></ul><ul><li>User often distracted </li></ul><ul><li>Limited battery life </li></ul>
    10. Mobile data connectivity <ul><li>Remember: data costs! </li></ul><ul><li>Wireless and 3G for the minority… …sloooooooooow data for the majority </li></ul>
    11. Why bother ? “ What sells the mobile Web is not how it is similar to the desktop web, but how it differs” - Mobile First, Web Second by Gaddo F Benedetti Personal Mobile Always on Proliferation Location aware
    12. Know your enemies <ul><li>Feature phones </li></ul><ul><ul><li>tiny screen </li></ul></ul><ul><ul><li>numeric keypad </li></ul></ul><ul><ul><li>vast majority of the market </li></ul></ul><ul><li>Smartphones </li></ul><ul><ul><li>typically with a mid-sized screen </li></ul></ul><ul><ul><li>full A-Z keypad </li></ul></ul><ul><li>Touch-screen phones (eg iPhone) </li></ul><ul><ul><li>nearly device-sized screen </li></ul></ul><ul><ul><li>UI driven by touch gestures </li></ul></ul><ul><ul><li>market increasing rapidly </li></ul></ul>
    13. Group icebreaker <ul><li>Who I am </li></ul><ul><li>Who I work for </li></ul><ul><li>Which mobile I own and for how long </li></ul>
    14. Sites to open <ul><li>PCs: </li></ul><ul><li>Keep the facilitate site open! </li></ul><ul><li> </li></ul><ul><li> (winksite) </li></ul><ul><li> (question form) </li></ul><ul><li>Phones: </li></ul>
    15. Demand &quot;Demand for the mobile web exists not because it complements existing means of access, but rather because it replaces them.&quot; - Opera's chief executive, Oct. 2008
    16. The mobile Web is growing…FAST <ul><li>March 2009: Estimated 4.1 billion mobile phones worldwide – about four times more than the number of PCs. -The Guardian </li></ul><ul><li>There are 405 million mobile internet users worldwide, and within four years this number is expected to double. - Google </li></ul><ul><li>Mobile devices will be the primary connection tool to the internet for most people in the world in 2020. - Report: The Future of the Internet III </li></ul>Photograph: Alamy
    17. Top mobile browsers
    18. Top browsers in the UK
    19. Four choices… <ul><li>Do nothing </li></ul><ul><li>Reduce images and styling </li></ul><ul><li>Use handheld style sheets (CSS) </li></ul><ul><li>Create mobile optimised content </li></ul>
    20. 1. Do nothing <ul><li>Pros </li></ul><ul><li>Mobile browsers shoulder the burden of reformatting content </li></ul><ul><li>No additional effort required by web dev team </li></ul><ul><li>Users have access to the same content, and possibly the same experience, available from a desktop PC </li></ul><ul><li>Cons </li></ul><ul><li>Does not address the contextual relevance of mobility </li></ul><ul><li>Does not exploit the unique capabilities of mobility </li></ul><ul><li>Users with zoom-enabled devices are not the majority of the global market share </li></ul>
    21. 2. Reduce images and styling <ul><li>Third party options: </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>… or make your own mirror </li></ul>
    22. 2. Reduce images and styling <ul><li>Pros </li></ul><ul><li>Relies on the implicit hierarchy in the HTML markup of desktop site </li></ul><ul><li>Readily viewable by a number of devices </li></ul><ul><li>Generally a faster download </li></ul><ul><li>Many mobile browsers override a lot of styling anyway </li></ul><ul><li>Cons </li></ul><ul><li>Still ignores the contextual relevance of mobility </li></ul><ul><li>File size may still be excessive </li></ul><ul><li>InstantMobiliser will cost you </li></ul>
    23. 3. Use Hand-Held Style Sheets <ul><li>Pros </li></ul><ul><li>Handheld stylesheets are inherent in CSS </li></ul><ul><li>Developers maintain only one additional stylesheet </li></ul><ul><li>Users are presented with a single, unified web address </li></ul><ul><li>Cons </li></ul><ul><li>Still ignores the contextual relevance of mobility </li></ul><ul><li>Media=“handheld” support on mobile devices is inconsistent and unreliable </li></ul><a link href=”mobile.css” rel=”stylesheet” type=”text/css” media=”handheld”>
    24. 4. Create Mobile Optimised Content <ul><li>Pros </li></ul><ul><li>Contextually relevant – addresses first how content is consumed, second what it looks like </li></ul><ul><li>Pages are usually leaner, so users are spared excessive data costs and browsing is faster </li></ul><ul><li>No need to zoom </li></ul><ul><li>Cons </li></ul><ul><li>Denies content to user based on assumptions about their mobile device </li></ul><ul><li>Developers may need to maintain 2 sets of files (desktop & mobile) </li></ul><ul><li>Alternate web address required </li></ul>
    25. Mobile URLs <ul><li>Users expect one of: </li></ul><ul><li>m. </li></ul><ul><li> /mobile </li></ul><ul><li> .mobi </li></ul>
    26. WML is Dead! <ul><li>WAP 1.0 = WML WAP 2.0 = XHTML </li></ul><ul><li>Nearly all devices sold anywhere in the world today support WAP 2.0 </li></ul><ul><li>XHTML Mobile Profile (XHTML-MP) </li></ul>It's a stiff bereft of life, it rests in peace. It has expired and gone to meet its maker. WAP 1.0 is an ex-protocol!
    27. Beyond XHMTL-MP <ul><li>ASP.Net, Java and PHP frameworks </li></ul><ul><li>RSS and APIs </li></ul><ul><li>Mobile AJAX </li></ul>
    28. Weighing up mobile AJAX <ul><li>Pros: </li></ul><ul><li>Good for speeding up download times and keeping down data costs </li></ul><ul><li>increases responsiveness of your application. </li></ul><ul><li>Supported by any mobile browser that supports JavaScript and XMLHttpRequest </li></ul><ul><li>Cons: </li></ul><ul><li>JavaScript enabled phones do not represent the full market of devices </li></ul><ul><li>Can drain a battery quickly due to the continuous server connections </li></ul><ul><li>Sloooooow network connections really show up latency issues </li></ul>
    29. Complimentary Technologies <ul><li>Location based services (GPS) </li></ul><ul><li>Contactless technologies (QR codes) </li></ul><ul><li>SMS short codes </li></ul><ul><li>Bluecasting </li></ul><ul><li>Cashless financial transactions </li></ul>
    30. Tips for QR codes <ul><li>Maximum of 40-60 characters </li></ul><ul><li>Leave empty white space on each side </li></ul><ul><li>Black and white (avoid colour) </li></ul><ul><li>Minimum of 2cm wide </li></ul><ul><li>Publish on posters, websites, t-shirts, prospectuses etc. (example: ) </li></ul><ul><li>Make your own for free: </li></ul>
    31. SMS Short Codes <ul><li>“ To ignore messaging is to ignore the largest slice of the consumer pie. More than 10 billion text messages are sent worldwide every month.” </li></ul><ul><li>Text ‘ESSEX’ to 800800 </li></ul><ul><li>Express an interest in a product or service </li></ul><ul><li>Request information to be sent instantly by SMS </li></ul><ul><li>Request a priority call back </li></ul><ul><li>Receive picture, music, or video content </li></ul><ul><li>Receive search results </li></ul><ul><li>Request a brochure </li></ul><ul><li>Receive a promotional voucher </li></ul><ul><li>Pay for goods or services </li></ul><ul><li>Vote, enter a competition or answer a quiz </li></ul>
    32. Bluecasting <ul><li>Proximity marketing and content delivery via Bluetooth </li></ul><ul><li>Users ‘opt-in’ by making their mobile devices discoverable </li></ul><ul><li>Controversial because delivery of unwanted “Bluetooth SPAM” is possible </li></ul>
    33. Cashless financial transactions <ul><li>SMS driven and instant! </li></ul><ul><li>To park at St Botolphs Car Park in Colchester for three hours: text ‘7820 3’ to 65565 </li></ul><ul><li>Send money via PayPal to anyone with an email address or a mobile phone number </li></ul>
    34. Cutting edge ‘cool stuff’ <ul><li>Braille iPhones </li></ul><ul><li>Speech recognition: </li></ul><ul><ul><li>The voice enabled web </li></ul></ul><ul><ul><li>Voice authentication </li></ul></ul><ul><li>Augmented reality </li></ul>
    35. OK…So? <ul><li>Question: Has this raised the expectations of our stakeholders? </li></ul><ul><li>Answer: Almost certainly! </li></ul><ul><li>Question: And is the education sector being left behind? </li></ul><ul><li>Answer: Almost certainly! </li></ul>
    36. Who microsites (verb) well? <ul><li>Brainstorm which companies or organisations have a mobile specific website that you know about, or use? </li></ul><ul><li>Write ’em on the walls! </li></ul>
    37. Pleasing your stakeholders <ul><li>“ Any mobile web strategy must begin with an understanding of the target audience and what they want… </li></ul><ul><li>Ask yourself, what is relevant to my users and the tasks, problems, and needs they may encounter while being mobile? Begin answering that question and you’re guaranteed to start on the right foot.” - Mobile Web Design, Cameron Moll </li></ul>
    38. Pleasing your users <ul><li>Internal: </li></ul><ul><li>Academic staff </li></ul><ul><li>Non-academic staff </li></ul><ul><li>Current students </li></ul><ul><li>Researchers </li></ul><ul><li>External: </li></ul><ul><li>Prospective students </li></ul><ul><li>Media/Press </li></ul><ul><li>Parents </li></ul><ul><li>Visitors </li></ul><ul><li>Job hunters </li></ul>
    39. Reaching your demographic market… <ul><li>Generation Y, and the Millennials: </li></ul><ul><li>Born between 1986 and 2001 </li></ul><ul><li>Digital natives with a high level of IT skills </li></ul><ul><li>9 out of 10 have a mobile phone </li></ul><ul><li>Short attention span </li></ul><ul><li>Impatient </li></ul><ul><li>Environmentally conscious </li></ul><ul><li>Highly mobile </li></ul><ul><li>Spends more time online than with family </li></ul>
    40. Generation Y & The Millennials
    41. Mobile site trend setters
    42. Question… <ul><li>What information and services do our institutions’ stakeholders want to consume on the move from a microsite? </li></ul><ul><li>Ask yourself, what is relevant to my users and the tasks, problems, and needs they may encounter while being mobile? </li></ul>
    43. University of Warwick Survey
    44. Cambridge m-library study M-Libraries: Information use on the move (May 2009)
    45. Take a look at some sites… <ul><li>… Via Winksite </li></ul><ul><li>PC: </li></ul><ul><li>Phones: </li></ul>
    46. What are the barriers/challenges? <ul><li>Time </li></ul><ul><li>Money </li></ul><ul><li>Management </li></ul><ul><li>Designing for mobile devices </li></ul>
    47. If we don’t do it?
    48. What are the opportunities? <ul><li>Enhancing the user experience </li></ul><ul><li>Increasing income </li></ul><ul><li>Saving time </li></ul><ul><li>Reaching ALL of your audiences – on-demand </li></ul><ul><li>Keeping ‘em happy! </li></ul>
    49. If you build it…they will come
    50. Formulate a design strategy <ul><li>Accommodate device limitations </li></ul><ul><li>Accommodate lower-end phones </li></ul><ul><li>Keep it simple </li></ul><ul><li>Keep it compact </li></ul><ul><li>Keep it relevant </li></ul><ul><li>Expect differences in rendering </li></ul><ul><li>Take inspiration from other sites </li></ul><ul><li>Get found </li></ul>
    51. To sniff or not to sniff? <ul><li>To divert all mobile devices automatically from your desktop site to your mobile site </li></ul><ul><ul><li>people only need to remember a single URL </li></ul></ul><ul><ul><li>Blocks access to full desktop site </li></ul></ul><ul><ul><li>Need to update sniffer “daily” </li></ul></ul><ul><li>Sniffing to know what mobile device your user has, and then displaying a site optimised to the maximum of their capabilities. </li></ul><ul><ul><li>HUGELY resource consuming </li></ul></ul><ul><ul><li>Still need to update sniffer “daily” </li></ul></ul><ul><li>WURFL - Wireless Universal Resource File ( ) </li></ul>
    52. Coding selectable phone numbers <ul><li>XHTML </li></ul><ul><li><a href=&quot;tel:+01206 876000&quot;>01206 876000</a> </li></ul><ul><li>WTAI (wireless telephony application interface) </li></ul><ul><li><a href=&quot;wtai://wp/mc;01206876000&quot;>01206 876000</a> </li></ul><ul><li>TO ADD TO ADDRESS BOOK <a href=&quot;wtai://wp/ap; 01206876000;University of Essex Switchboard&quot;> [Add to Ph.Book]</a> </li></ul>
    53. Test, test, and test again <ul><li>“ Nothing short of emulators and testing on multiple devices will lead to the successful deployment of a mobile website or application.” - Cameron Moll </li></ul>
    54. Test, test, and test again <ul><li>Small screen browsers: </li></ul><ul><ul><li>- Opera Mini ( ) </li></ul></ul><ul><ul><li>- Mobile Firefox ( ) </li></ul></ul><ul><li>Try User Agent Switcher extension for firefox + user agent strings from </li></ul><ul><li>Mobile phone emulators (online & downloadable) </li></ul><ul><li>Try online validators </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Blow the budget: </li></ul><ul><li>Get hold of real devices (between 5 and 10 should be enough) </li></ul>
    55. Dangers of widgets and apps <ul><li>Specific to one or a few devices </li></ul><ul><li>Require storage space on device </li></ul><ul><li>User may not have time or inclination to download </li></ul><ul><li>Incurs data costs </li></ul>
    56. Question… What can we do NOW ?
    57. Any Questions? <ul><li>“If we treat the mobile web as its own environment rich with possibilities, rather than a crippled extension of the desktop experience with restrictive limitations, we begin to understand how to embrace and even exploit these possibilities.” - Mobile Web Design, Cameron Moll </li></ul>