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