Web 4.0 (or The importance of R&D)
11 likes2,197 views
The document discusses the transition to Web 4.0, emphasizing the importance of adaptability in designs for various devices and the rise of mobile internet usage. It highlights the increasing significance of mobile commerce and applications such as HTML5 and CSS3 in user interface design. The content suggests businesses must evolve to meet changing consumer behaviors and technological advancements.
Web 4.0 (or The importance of R&D)
- 1. Web 4.0 (or, The Importance of R&D) by Russell Cavell – Group Technical Director @russellcavell November 2011
- 4. Why not Google? Searches Google Bing 100% 90% 3% Market Share (http://www.comscore.com/Press_Events/Press_Releases/2008/05/Top_European_Search_Engines)
- 5. Bing-cause things change… Searches Google Bing 100% 65% 30% Market Share (http://www.comscore.com/Press_Events/Press_Releases/2011/5/comScore_Releases_April_2011_U.S._Search_Engine_Rankings)
- 6. Web 4.0? 4? What the !*$# happened to Web 2.0?
- 7. Web 2.0 (Social Islands) & Web 3.0 (Social Data) (http://www.briansolis.com/)
- 8. Web 4.0 – AAA (Anytime, Anyplace, Any device) 30 million members in the UK 1 in 4 minutes online time 40% via a mobile device 20% solely via mobile device (Dec 2010 to January 2011, Facebook )
- 9. Web 4.0 – AAA (Anytime, Anyplace, Any device) The volume of mobile users will outstrip the number of desktop internet users by 2014
- 10. Web 4.0 – AAA (Anytime, Anyplace, Any device) Demand for tablets is likely to reach 100 million by 2012
- 11. Web 4.0 – AAA (Anytime, Anyplace, Any device) In 2011, the US market will own more smartphones than ordinary phones
- 12. Web 4.0 – AAA (Anytime, Anyplace, Any device) In 2009, eBay posted $600 million in mobile commerce revenues. In 2010, it was $1.5 billion.
- 13. OK, so what does this all mean?
- 16. The hockey puck graph of mobile growth (http://www.opera.com/smw/2011/01/ - January 2011, Opera Software & http://my.opera.com/matzeatweb/albums/showpic.dml?album=904567&picture=12372283 )
- 17. The ‘mobile’ has evolved… (http://www.youtube.com/watch?v=8Xm-_gbmcM4)
- 18. Stop thinking solely about these… (http://image.made-in-china.com/2f0j00KCsEjZRWHait/Desktop-Computer-D4300-.jpg)
- 19. …and static designs like these… (Russell Cavell 2011)
- 20. …and start thinking about devices like these… (http://giroapp.com/wordpress/wp-content/uploads/2010/07/ipad-1.jpeg; http://theapplegoogle.com/wp-content/uploads/2011/01/iphone-4-verizon.png; http://cdn7.global14.com/wp-content/uploads/2011/01/motorola- zoom.jpg; http://www.mobiletogoblog.com/wp-content/uploads/2010/08/BlackBerry-Torch-9800_2.jpg; http://www.mrgeekgadgets.com/wp-content/uploads/2010/05/nokia_n8.png; )
- 21. ...so that beautiful creative like this… (http://mediaqueri.es)
- 22. …is viewed perfectly on multiple devices… Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px (http://mediaqueri.es)
- 23. Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px (http://mediaqueri.es)
- 24. Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px (http://mediaqueri.es)
- 25. Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px (http://mediaqueri.es)
- 26. Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px (http://mediaqueri.es)
- 27. Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px (http://mediaqueri.es)
- 32. Web 4.0 – AAA (Anytime, Anyplace, Any device) • UI needs to be designed to be used with fingers, rather than a mouse. • Bandwidth limitations must be considered for the time being. (Jacob Gube, Six Revisions 2011)
- 33. Ok, so AAA will look nice, but what can it do?
- 34. HTML 5 & CSS 3.0 (Legoland)
- 35. HTML 5 & CSS 3.0 (http://www.gatewaybmw.com/wp-content/uploads/2008/03/bmw-logo-history-950x701.jpg)
- 36. HTML 5 & CSS 3.0 (Bon Jovi)
- 37. HTML 5 & CSS 3.0 ?
- 38. HTML 5 & CSS 3.0 (https://mozillademos.org/demos/dashboard/demo.html)
- 39. HTML 5 & CSS 3.0 (https://demos.mozilla.org/en-US/#planetarium)
- 40. HTML 5 & CSS 3.0 (http://www.chromeexperiments.com/detail/webgl-water-simulation/)
- 41. HTML 5 & CSS 3.0 (http://www.thewildernessdowntown.com/)
- 42. HTML 5 & CSS 3.0 (www.publicischemistry.com + http://blog.mozilla.com/tilt/)
- 43. HTML 5 & CSS 3.0 (Russell Cavell, 2009)
- 44. SVG (Scalable Vector Graphics) (http://jsdo.it/event/svggirl)
- 46. eCommerce Evolved Shoppers in the UK spent £4.9 billion online during February 2011, up 20% from February 2010 (NMA)
- 48. mCommerce 23% of UK online consumers conducted some kind of mobile transaction last year (that’s 10,000,000 of us) (NMA)
- 49. mCommerce 41% of retailers expect mobile to be as popular as ecommerce within 2 years (NMA)
- 50. mCommerce 42% have a strategy at various stages of development, and a further 30% plan to develop m-commerce (NMA)
- 51. mCommerce 90% of UK Adults will purchase Xmas shopping online this year. 23% will use a smartphone or tablet (Rackspace Customer Communication 23/11/2011 “Gone in 10 Seconds”)
- 56. CLI (30 years ago) (My Laptop)
- 57. GUI (20 years ago) (http://www.realact.net/wordpress/wp-content/uploads/IntroducingthenewWindows7GUI_D9B6/Windows7DesktopBuild6933.png; http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx101.png)
- 58. NUI (0 years ago) (http://www.microsoft.com/presspass/presskits/surfacecomputing/images/image002.jpg)
- 60. Microsoft Surface (Version 2) (http://www.microsoft.com/presspass/events/ces/images/2011/Samsung_SUR40_product_print.jpg)
- 61. Windows 8 will rule the world. Next year. (probably)
- 62. Windows 8 METRO (across all platforms)
- 63. NUI Demo
- 64. Look mum, no hands! (NUI Demo)
- 65. Putting it all together, with added blue sky thinking to boot.
- 66. In Summary - Things change - Adaptive Design, Cloud, - Platforms – Not just desktops - HTML5 / CSS3 (Cross platform and device) - Different Interactions / Interfaces
- 67. So, why do you think R&D is so important?
Editor's Notes
- #4: If you have any questions – please ask – this is a conversation, not a lesson.
- #5: Why did I choose Bing back there? Simply to illustrate that this graphis the perception that everyone has of Google’s market dominance– except this graph is May 2008
- #6: And this is April 2011 – things change, and that is what we need to bear in mind at all times while working with web technologies.
- #8: Social islands where individual sites, all competing. Web 3.0 was when they all started to work together, such as Bing using social to power it’s search results.
- #17: For a geeky upgrade to a mobile devices, this is an alarming growth curve. 100 million+ downloads, with the majority inside of a year!
- #18: And this is why mobile is growing – because they are no longer just phones – there are the whole internet plus a number of other technological devices in one, in your pocket.(http://www.youtube.com/watch?v=8Xm-_gbmcM4)
- #20: As nice as they are – they do not work on mobiles. We need to stop making web site like these, RIGHT NOW.
- #32: Try it – go to http://www.publicischemistry.com and just make you browser different widths to see adapative design work right there in front of your eye’s
- #33: Your finger is a lot larger than a mouse cursor, so buttons need to be biggerMake sure all site images & video is optimised for various bandwidths, remove large carousels etc.
- #35: IE9 - http://topgear.cloudapp.net/default.aspx
- #36: IE9 - http://www.joydefinesthefuture.com/
- #37: IE9 - http://director.bonjovi.com/
- #38: IE9 - http://www.nevermindthebullets.com
- #39: FF -
- #40: FF - http://mozillademos.org/demos/planetarium/demo.html
- #41: Chrome - http://www.chromeexperiments.com/detail/webgl-water-simulation/
- #42: Chrome - http://www.thewildernessdowntown.com/
- #43: FF – “Tilt” extension demo
- #44: Chrome -http://www.ro.me/
- #45: IE9 -http://jsdo.it/event/svggirl
- #46: So they were all a little bit of fun – how is the real work using mobile and new web development technologies?
- #48: M&S, amongst others, are milesinfront of most major retailers when it comes to mobile.
- #57: CLI – static interface, feels disconnected, simple and unhelpful – you need to be an expert
- #58: GUI – responsive, exploratory, recognition, feel comfortable and you learn quickly. One product flows into another.
- #59: NUI – Evocative, unmediated, contextual, intuitive – based on objects
- #60: This is the point at which Apple went one way and Microsoft the other. The surface was revolutionary only a few years ago – now it’s an antique.
- #61: And Version 2 – due very soon – is more like a tablet on legs – or is it a TV on legs?
- #62: However, I think they have right. This is Windows 8 – it looks just like Windows 7, until…
- #63: Until, you use the same operating system and program on any platform you like, desktop, mobile, tablet. This is the “touch” interface of Windows 8. This same interface will be used on tablets, Windows 8 (and 7) phones, as well as the desktop, and even the Xbox.On the desktop you can switch between the “normal windows” and this interface whenever you wish. In Summary, one OS, one interface, one platform. Use any program anywhere and plug it all together with the cloud.
- #65: At this point I gave a live demonstration using an Xbox Kinect setup as a mouse to drive the rest of the presentation simply by moving my arms, instead of clicking through the slides.The demo also showed off speech control that didn’t require any prior training.
- #66: Things change – mobile devices & their growth, adaptive design with HTML5 & CSS3Windows 8, Kinect and the cloud are all blue sky thinking, but could be a real game changer if it works as we hope it will.