The latest web developments can deliver great benefits to your business, by improving staff productivity and team collaboration, enhancing customer relationships and improving remote learning. Paul Burgess & Rob Burgess will start by discussing how you can improve productivity and maximise accessibility by adapting your existing websites and internal systems to widely support web-enabled devices such as smartphones, tablets, and desktops. They will then shift their focus to some new web technologies including SignalR and WebRTC.

1. The Power of the Web
Paul Burgess & Rob Burgess
17/01/2014

2. The first website - 1991
1992 – The first internet image
The web made publicly available - 1993
1995 – First book sold on Amazon
100 million global internet users - 1997
2004 – Facebook launched
YouTube launched - 2005
iPhone first released - 2007
2005 – 1 billion global internet users
2008 - HTML5 Introduced
First iPad released - 2010
2014 – Release of Google glass?

3. The Power of the Web
• Adapting for Mobile Devices
• Taking advantage of features
• Real time communication

4. MOBILE WEB

5. 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

6. Statistics show Mobile
Devices will be the primary
browsing device in 2014!
Source: comScore

8. 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)

9. Why is mobile still an
afterthought in website
design?

10. 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

11. 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

12. Ease of Touch Interactions
Luke Wroblewski http://mobile.smashingmagazine.com/2013/05/29/the-state-ofresponsive-web-design/

13. How do we solve this
problem?

14. Mobile Site
A separate site for mobile devices
Pros
Cons
• Highly focussed
• Can optimise easily
• Another customer touch
point
• Big companies have used
it for best native
experience
• 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

15. 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

16. 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

17. Examples
• http://www.microsoft.com/en-gb/default.aspx
• http://www.arsenal.com/
Frameworks:
• Foundation
• Bootstrap 3
• 320 and up

18. Native App Style
• We can integrate further with mobile
devices
– Provide home screen icons
– Plans to allow notifications and live tiles from
websites

19. Is now the time for the
overhaul?

20. FEATURE DETECTION

21. What is Feature Detection?
•
•
•
•
Not Just Targeting Browsers/Devices
Determine Support For Features
Enables Providing Fallbacks
Safely Use Newly Available Features

22. Available Features
•
•
•
•
•
HTML5 Form Inputs
Geolocation
Motion/Orientation
Touch
Voice/Video

23. Demonstrations
• Form Inputs
• Geolocation/Motion/Orientation
http://poweroftheweb.azurewebsites.net/

24. REAL TIME WEB

25. What is Real Time Web?
•
•
•
•
Persistent Connections
Two Way Communication
Instant "Push" of Data
Enables New Experiences "In Browser"

26. SignalR
• Microsoft Framework
• Abstracts Core Technologies
• Reaches Every Customer (cross
browser/device)
• Allows Best Case For All

27. Demos
• Chat Application
• Linking Browsers
http://poweroftheweb.azurewebsites.net/

28. 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

29. 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

30. The Power of Big Data 2014
31st January