The Power of the Web 2014
-
Upload
waterstons-ltd -
Category
Technology
-
view
277 -
download
0
description
Transcript of The Power of the Web 2014
![Page 1: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/1.jpg)
The Power of the Web
Paul Burgess & Rob Burgess
17/01/2014
![Page 2: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/2.jpg)
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
![Page 3: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/3.jpg)
The Power of the Web
• Adapting for Mobile Devices• Taking advantage of features• Real time communication
![Page 4: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/4.jpg)
MOBILE WEB
![Page 5: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/5.jpg)
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
![Page 6: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/6.jpg)
Statistics show Mobile Devices will be the primary browsing device in 2014!
Source: comScore
![Page 7: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/7.jpg)
![Page 8: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/8.jpg)
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)
![Page 9: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/9.jpg)
Why is mobile still an afterthought in website
design?
![Page 10: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/10.jpg)
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
![Page 11: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/11.jpg)
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
![Page 12: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/12.jpg)
Ease of Touch InteractionsLuke Wroblewski - http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
![Page 13: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/13.jpg)
How do we solve this problem?
![Page 14: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/14.jpg)
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
![Page 15: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/15.jpg)
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
![Page 16: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/16.jpg)
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
![Page 17: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/17.jpg)
Examples
• http://www.microsoft.com/en-gb/default.aspx• http://www.arsenal.com/
Frameworks:• Foundation• Bootstrap 3• 320 and up
![Page 18: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/18.jpg)
Native App Style
• We can integrate further with mobile devices– Provide home screen icons– Plans to allow notifications and live tiles from
websites
![Page 19: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/19.jpg)
Is now the time for the overhaul?
![Page 20: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/20.jpg)
FEATURE DETECTION
![Page 21: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/21.jpg)
What is Feature Detection?
• Not Just Targeting Browsers/Devices• Determine Support For Features• Enables Providing Fallbacks• Safely Use Newly Available Features
![Page 22: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/22.jpg)
Available Features
• HTML5 Form Inputs• Geolocation• Motion/Orientation• Touch• Voice/Video
![Page 23: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/23.jpg)
Demonstrations
• Form Inputs• Geolocation/Motion/Orientation
http://poweroftheweb.azurewebsites.net/
![Page 24: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/24.jpg)
REAL TIME WEB
![Page 25: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/25.jpg)
What is Real Time Web?
• Persistent Connections• Two Way Communication• Instant "Push" of Data• Enables New Experiences "In Browser"
![Page 26: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/26.jpg)
SignalR
• Microsoft Framework• Abstracts Core Technologies• Reaches Every Customer (cross
browser/device)• Allows Best Case For All
![Page 27: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/27.jpg)
Demos
• Chat Application• Linking Browsers
http://poweroftheweb.azurewebsites.net/
![Page 28: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/28.jpg)
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
![Page 29: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/29.jpg)
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
![Page 30: The Power of the Web 2014](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c264f14a795974748b45ae/html5/thumbnails/30.jpg)
The Power of Big Data 2014
31st January