FUTURE WEB DESIGN MOBILES, TABLETS, TVS & GLASSES About - - PowerPoint PPT Presentation

▶
future web design
SMART_READER_LITE
LIVE PREVIEW

FUTURE WEB DESIGN MOBILES, TABLETS, TVS & GLASSES About - - PowerPoint PPT Presentation

Nov 16, 2023 125 likes •1.1k views

Making the mobile web work James Rosewell - @jwrosewell / @51degreesmobi 51Degrees.mobi FUTURE WEB DESIGN MOBILES, TABLETS, TVS & GLASSES About 51Degrees.mobi Founded 2009 Open Source Project Device Detection

slide-1
SLIDE 1

FUTURE WEB DESIGN – MOBILES, TABLETS, TVS & GLASSES

James Rosewell - @jwrosewell / @51degreesmobi

51Degrees.mobi

Making the mobile web work

slide-2
SLIDE 2

About 51Degrees.mobi

 Founded 2009 – Open Source Project

– Device Detection – Optimisation – Analytics

 Key Metrics:

– 320,000 servers – 690,000,000 devices per month – 5,000,000 detections per second – 99.9% accurate – 12,052 device combinations

slide-3
SLIDE 3

Agenda

 Device Capabilities – Today & Tomorrow  Changing Usage  Consequences for Web Sites  Pace of Change  Today - Solutions

– Real Examples – Role of Responsive Design – A Simple Strategy

 Tomorrow - Considerations  Summary

slide-4
SLIDE 4

vs

slide-5
SLIDE 5

Human

slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

Machines

slide-11
SLIDE 11

Inputs

slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17

Outputs

slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

Capabilities

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31

Timeline

slide-32
SLIDE 32

1984 1990 2000 2005 2010

slide-33
SLIDE 33

Last 5 Years Touch Screen & Location

slide-34
SLIDE 34

Last 2 Years See & Hear

slide-35
SLIDE 35

Mobile has just begun

slide-36
SLIDE 36

Usage

slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43

So What?

slide-44
SLIDE 44
slide-45
SLIDE 45

“Mobile First” = not true for most of us

slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

Pace of Change

slide-54
SLIDE 54

Global Browser Vendors

slide-55
SLIDE 55

Top 5 Mobile Screen Sizes Globally

slide-56
SLIDE 56

Market Differences

slide-57
SLIDE 57

Hardware Vendors Europe December 2012

slide-58
SLIDE 58

India

slide-59
SLIDE 59

Today

slide-60
SLIDE 60
slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63

Vogue TicketsNow Seatwav ee Visa Europe Alaska Airlines Kitbag - Chelsea, Barcelona, Man Utd, F1.com online stores TravelZoo Amex

slide-64
SLIDE 64

Responsive Design

slide-65
SLIDE 65
slide-66
SLIDE 66
slide-67
SLIDE 67

display:none

Top Tip

slide-68
SLIDE 68

One Size Does Not Always Fit All

slide-69
SLIDE 69

Strategy

slide-70
SLIDE 70

Past

Desktop Mouse

Keyboard

slide-71
SLIDE 71

2013

Desktop Mobile Phone Tablet Mouse

 1 1

Keyboard

 1 1

Touch

1 1 1

slide-72
SLIDE 72

A Few Years

Desktop Mobile Phone Tablet TV Mouse

 1 1 2

Keyboard

 1 1 2

Touch

1 1 1 2

Voice

2 2 2 2

Gesture

2 2 2 2

slide-73
SLIDE 73

A Few More Years

Desktop Mobile Phone Tablet TV Glasses Speech Mouse

 1 1 2 3 3

Keyboard

 1 1 2 3 3

Touch

1 1 1 2 3 3

Voice

2 2 2 2 3 3

Gesture

2 2 2 2 3 3

slide-74
SLIDE 74

Current Site vs Mobile Site

Alter Layout Alter Page Content Share Content & Separate Sites

Different Same Same Different

Navigation Page Content

Same Different Same Different

slide-75
SLIDE 75

Current Site vs Mobile Site

Alter Layout Alter Page Content Share Content & Separate Sites

Different Same Same Different

Navigation Page Content

Responsive Design Server Side

Same Different Same Different

slide-76
SLIDE 76

thefonecast.com

slide-77
SLIDE 77

Advertising

One Advert for Mobile “Mobile Ad Revenues Will Top $11.4 Billion In 2013, Up 19% On 2012. India, China And Display Fuelling The Boost” – Gartner Top Tip

slide-78
SLIDE 78

Future - Tomorrow

slide-79
SLIDE 79

Authentication

slide-80
SLIDE 80

Payment

slide-81
SLIDE 81

Location

slide-82
SLIDE 82
slide-83
SLIDE 83
slide-84
SLIDE 84
slide-85
SLIDE 85

Future – A Few Years

slide-86
SLIDE 86
slide-87
SLIDE 87
slide-88
SLIDE 88

Future – A Few More Years

slide-89
SLIDE 89
slide-90
SLIDE 90
slide-91
SLIDE 91
slide-92
SLIDE 92

Summary

slide-93
SLIDE 93

The New “Home Page”

slide-94
SLIDE 94

Summary

 Flexible Content (not

WYSIWYG)

 Business Intelligence  Easy Authentication  Payment  Optimise Organisation

Enablers

There is more change ahead

 Understand User Context  Understand Device  Optimise Process J  Optimise Opportunity $

Design

slide-95
SLIDE 95
slide-96
SLIDE 96

 Device Capabilities – Today & Tomorrow  Changing Usage  Consequences for Web Sites  Pace of Change  Today - Solutions

– Real Examples – Role of Responsive Design – A Simple Strategy

 Tomorrow - Considerations  Summary

Question & Answers