The Mobile Web - keep up if you can!

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