The Power of the Web

Paul Burgess & Rob Burgess

17/01/2014

The first website - 1991

The web made publicly available - 1993

1995 – First book sold on Amazon

iPhone first released - 2007

2014 – Release of Google glass?

100 million global internet users - 1997

2005 – 1 billion global internet users

1992 – The first internet image

2004 – Facebook launched

YouTube launched - 2005

2008 - HTML5 Introduced

First iPad released - 2010

The Power of the Web

• Adapting for Mobile Devices• Taking advantage of features• Real time communication

MOBILE WEB

Mobile Devices

• 37% of time spent online in 2012 was from Mobile Devices

• There are over 1.2 billion people accessing the web from their mobile device

• 61% of people have a better opinion of brands when they offer a good mobile experience

• Europe 183% increase over two years

• Tablet users spend 50% more than PC users

sources:

– Trinity Digital Marketing– Latitude– Adobe– comScore

Statistics show Mobile Devices will be the primary browsing device in 2014!

Source: comScore

Why have we seen a change?

• Desktop is Restrictive– Single location– Limits productivity

• Mobile Devices– Always with you, there when you need it– Device for everything (portable office)

Why is mobile still an afterthought in website

design?

Traditional Design Process

• Consider only desktop devices• Assume mobile devices will cope• Leads to an awkward experience on

mobile devices• Risk of disenfranchised potential

customers• Current customers may seek out an

alternative

Challenges with Mobile Devices

• Small Screens– Up to 80% less screen size

• Less Precise Interactions– Touch is clumsy

• Less Power– Mobile devices have slower processors

• Poorer Internet Connection– Could be 3G or worse

Ease of Touch InteractionsLuke Wroblewski - http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

How do we solve this problem?

Mobile Site

Pros

• Highly focussed• Can optimise easily• Another customer touch

point• Big companies have used

it for best native experience

Cons

• Hard to maintain• Need new website for each

device we want to target (Mobile, Tablet etc.)

• = Expensive• Doesn’t make the most of what

is available• Keeping users on right site can

be tricky• = Poor customer experience

A separate site for mobile devices

Responsive Design

• Graceful Degradation• Has been around for a while• We can update our design based on

screen size

• If you want to adapt existing website• Convenient way to support the mobile era

Mobile First

• Progressive Enhancement• We design primarily with the least capable in mind• Keeps design focussed on core content• We address mobile restrictions• Better desktop design

– Additional content compliments our main focus

• If you are willing to invest in overhauling your web presence

• Provide the best experience for your customers

Examples

• http://www.microsoft.com/en-gb/default.aspx• http://www.arsenal.com/

Frameworks:• Foundation• Bootstrap 3• 320 and up

Native App Style

• We can integrate further with mobile devices– Provide home screen icons– Plans to allow notifications and live tiles from

websites

Is now the time for the overhaul?

FEATURE DETECTION

What is Feature Detection?

• Not Just Targeting Browsers/Devices• Determine Support For Features• Enables Providing Fallbacks• Safely Use Newly Available Features

Available Features

• HTML5 Form Inputs• Geolocation• Motion/Orientation• Touch• Voice/Video

Demonstrations

• Form Inputs• Geolocation/Motion/Orientation

http://poweroftheweb.azurewebsites.net/

REAL TIME WEB

What is Real Time Web?

• Persistent Connections• Two Way Communication• Instant "Push" of Data• Enables New Experiences "In Browser"

SignalR

• Microsoft Framework• Abstracts Core Technologies• Reaches Every Customer (cross

browser/device)• Allows Best Case For All

Demos

• Chat Application• Linking Browsers

http://poweroftheweb.azurewebsites.net/

WebRTC

• Video directly in the browser• No plugins required (no java or flash)• Advantages:

– Browser handles the complexity– We just ask for video– Greater connection to customers

• Think Kindle Fire

Remote Classroom

• An example of what is possible for remote learning.

• A real time experience, in browser• Allows a closer experience between tutor

and pupils

http://classroom.cloudapp.net

The Power of Big Data 2014

31st January