"Old Wine, New Wineskins" - Dundee Web Standards - 7th February 2011

The rise of the HTML5 standard and related web technologies such as CSS3, SVG, Canvas, Geolocation, WebGL etc present a lot of new opportunities for web developers.

However, perhaps we need to pause for a moment and take a lesson from the history of the web before diving headlong into using them?

Transcript

1. Old wine, new wineskins. Rick Curran • Dundee Web Standards • 07.02.11
2. Rick Curran (Skip Intro!) Designing and developing websites for over fifteen years, the last ten of which have been as co-owner of [wideopenspace]. Background in both graphic design and fine art, broad area of interests in digital technology but primarily in front and backend web development.
3. Rick Curran (Skip Intro!) [wideopenspace] is a design practice specialising in web, print and interactive media. Clients include Care Commission, Dundee University, Dundee College, Napier University, Channel 4, Ink Learning, Alliance Trust, Lifetree, The Living Organisation, The Innovation Portal, Strathcairn Medical Practice, and more...
4. Old wine, new wineskins.
5. Old wine, new wineskins. “People don't pour new wine into old wineskins. If they do, the wine will make the skins burst, and both the wine and the skins will be ruined. Rather, new wine is to be poured into fresh skins.” – Mark 2:22
6. The rise of the HTML5 standard and related web technologies such as CSS3, SVG, Canvas, Geolocation, WebGL (NEWT*) present a lot of new opportunities for web developers. However, perhaps we need to pause for a moment and take a lesson from the history of the web before diving headlong into using them? * “New Exciting Web Technologies” – A buzzword coined by Bruce Lawson, as an easy way to refer to all of this new technology (and because every technology needs an acronym!).
7. Recently there has been a lot of discussion on the web about the future and relevance of Flash, both as a web development technology and of the plugin itself. The two biggest reasons behind this discussion are: • Apple’s stance of not allowing the Flash plugin on iOS* devices due to poor performance / bugginess. • The rise of web browsers providing broad support for HTML5 (and the previously mentioned NEWT), along with jQuery and other JavaScript frameworks which enable cross-browser, cross-platform animation and interaction previously only achievable via Flash. * iPhone, iPod Touch and iPad.
8. “Flash is bad, Web Standards are good” Perhaps the loudest opinion coming from within this recent discussion is that creating web content using Flash is bad, and that we should instead be using Web Standards to make websites. What is it about Flash that makes it a bad way to make web content and why are Web Standards better? A good question, so let’s take a quick look back at the historical development of both Flash and HTML.
9. “Those who do not learn from history are doomed to repeat it.” — George Santayana
10. A short history of Flash: • Originally known as FutureSplash Animator • Offered to Adobe but they rejected it • Embraced by MSN and Disney Online • Acquired by Macromedia in 1996 • Macromedia relaunched it as ‘Flash’ • Macromedia itself acquired by Adobe in 2005
11. A short history of Flash: Flash was initially a simple vector-based animation tool that could be used to create animated elements that could be embedded within a web page’s HTML content. Interactivity was added via a simple language called ActionScript, this enabled non-linear interaction in the animations. Users could click or rollover buttons, trigger events, affect the animation etc. Support for video was then added, a welcome feature for web developers due to the difficulty of publishing cross-platform video online.
12. A short history of Flash: Prior to this, web developers had to encode their videos in several formats such as RealVideo, QuickTime and Windows Media so that users on both Windows and Mac OS would be able to view their content. Flash’s ability to play video was widely welcomed by both web developers and the growing web using public. Video support could be considered the reason the Flash plugin became so ubiquitous on desktop computers*. * Adobe claim up to 99% of all desktop users have the Flash plugin installed.
13. A short history of HTML*: • Invented by Tim Berners Lee circa 1990 • First public spec created in 1991 • NCSA Mosaic web browser released 1993 • World Wide Web Consortium founded in 1994 • HTML 2.0 spec published in 1995 • HTML 3.2 spec publish in January, 1997 • HTML 4.0 spec published in December, 1997 • HTML 4.01 spec published in 1999 • HTML 5 First Public Working Draft published in 2007 * HTML is an acronym for HyperText Markup Language
14. A short history of HTML: HTML, HyperText Markup Language was invented circa 1990 by Tim Berners Lee. The first specification included just 20 tags that could be used to markup HTML documents. The purpose of HTML was to enable scientists / researchers to use and share documents between the different computer systems used at various (actually very few systems!) scientific facilities around the world.
15. A short history of HTML: Updated HTML specifications added new markup tags to describe various elements of a document. Images could be added with the use of the IMG tag adding visual content to HTML pages. Form tags enabled submission of data from web pages, enabling the beginnings of more advanced user interaction beyond the humble hyperlink. Support for embedded multimedia, initially Java applets via the APPLET tag, was added to HTML, this tag was replaced with the multi-purpose OBJECT tag to support the increasing amount of plugin formats created to enhance web pages including, of course, Flash.
16. “Flash is bad, Web Standards are good” From that quick look back at the histories of both Flash and HTML we can see that both technologies began with humble beginnings and quickly advanced to support an ever increasing featureset. It could be considered the main difference between the two is that Flash is a proprietary format driven forward as the product of a single company, whereas HTML is an open standard driven forward by the consensus of a steering group consisting of multiple participants including various browser manufacturers. Ok, so why is Flash ‘bad’ and Web Standards ‘good’?
17. Why Flash is “bad”: • Lack of accessibility • Proprietary technology • Not Search-engine friendly • Hard to maintain • Large files, take a long time to load • Few mobile devices support it* • Adobe wants it to be everywhere • Processor Intensive • Inefficient battery life * Most reviews of mobile devices that do support Flash report poor battery life and / or sluggish performance.
18. Why Web Standards are “good”: • Provide a foundation for accessibility • Open technology • Search-engine friendly • Make your markup easier to maintain • Quick to load • Widely supported on mobile devices • Web Standards are everywhere
19. “Flash is bad, Web Standards are good” Why Flash is “bad”: • Lack of accessibility • Proprietary technology • Not Search-engine friendly • Hard to maintain • Large files, take a long time to load • Few mobile devices support it • Adobe wants it to be everywhere • Processor Intensive • Inefficient battery life Why Web Standards are “good”: • Provide a foundation for accessibility • Open technology • Search-engine friendly • Make your markup easier to maintain • Quick to load • Widely supported on mobile devices • Web Standards are everywhere
20. “Flash is bad, Web Standards are good” When you look at the list of Flash’s ‘flaws’ it’s easy to see why opinions of it have become so negative. In contrast everything about Web Standards seems to offer a much more efficient, open way of developing for the web. It’s important to realise that some items on Flash’s list of ‘flaws’ are actually more attributable to bad development practices.
21. “Hard to maintain, take a long time to load” Flash’s origins as a simple animation tool meant that all content was contained within a single Flash SWF file. The rapid improvement in Flash’s featureset meant that its capabilities increased and methods were added to enable more efficient delivery of Flash content. However, developers* did not always embrace these new techniques, this resulted in bloated files, long download times and poor user experiences. * Many designers transitioning from traditional print design saw Flash as an easy way to create content for the web.
22. “Hard to maintain, take a long time to load” Due to this widespread use of bad development practices Flash’s reputation was tarnished: “About 99% of the time, the presence of Flash on a website constitutes a usability disease. Although there are rare occurrences of good Flash design (it even adds value on occasion), the use of Flash typically lowers usability. In most cases, we would be better off if these multimedia objects were removed. Flash tends to degrade websites for three reasons: it encourages design abuse, it breaks with the Web's fundamental interaction principles, and it distracts attention from the site's core value.” — Jakob Nielsen, Flash: 99% Bad, October 2000.
23. Rainbows and Unicorns... Reading all the reasons why Web Standards are ‘good’ it’s easy to think that using them instantly results in accessible websites that are quick to download and work on any type of device. In reality the misuse of these new technologies will result in many of the same ‘flaws’ that were listed in Flash such as lack of accessibility and poor performance.
24. Rainbows and Unicorns... Swapping out the ‘proprietary plugin dominance’ of Flash with the ‘rainbows and unicorns’ of Web Standards-based NEWT is not a magic bullet!
25. Out with the old, and in with the NEWT... One element of NEWT that has been getting a lot of attention is the Canvas element which can be used to create scriptable interactive graphic elements. Many of the demos of Canvas look very much like the early experimental work by Flash developers*. • http://hakim.se/experiments Just like Flash, Canvas has the same potential issues regarding accessibility, resource usage, SEO etc. * Something that many Flash designers have scornfully pointed out!
26. Out with the old, and in with the NEWT... Another key element of NEWT is JavaScript, more specifically frameworks like jQuery and MooTools. One of the benefits of these frameworks is that they abstract away issues of browser incompatibility when writing JavaScript. They also make it easier to create dynamic visual effects such as animation and button interaction. Reading the paragraph above it’s interesting how it could easily be used to describe the benefits that Flash brought to web development when it appeared on the scene a few years ago!
27. Flash or NEWT? Use of NEWT has seen some amazing Web Standards based sites, as such it has increasingly difficult to tell whether a site was created using Flash or NEWT. Let’s take a look at a few examples: Examples of Flash: • http://browserlab.adobe.com • http://www.picnik.com • http://requiemforadream.com • http://pageflip.hu/demo.html Examples of NEWT: • http://280slides.com • https://gomockingbird.com • http://thewildernessdowntown.com • http://www.20thingsilearned.com
28. Out with the old, and in with the NEWT... Issues like performance, processor usage, accessibility, ease of maintenance, SEO are all extremely relevant to HTML5 / NEWT as well. We need to use these new technologies carefully and consider the lessons to be learned from well-made, efficiently implemented Flash content. We also need to learn from the Flash developers who who discovered solutions to challenges such as enabling use of the browser’s back button and deep linking, both of which are issues that can affect content developed using NEWT (specifically AJAX).
29. Pouring new wine into fresh wineskins... We need to take care that we don’t just take the old wine - the bad practices of bad, inefficient Flash based web development - and try to put these into the new wineskin of HTML5 / NEWT based development. If we do we’re just repeating history, and the new wineskins will burst.
30. [thank you!] Rick Curran: Blog: suburbia.org.uk Work: wideopenspace.co.uk