The Changing Landscape For HTLM5 Design

Motion and Interaction Design for HTML5

Adobe Edge Preview is a new Web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

The initial version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.

Click here to download your own copy of this free beta and examine the samples for yourself. With them, you can be up and running in only a few minutes, or click here to see an image of one of these samples that I've run on my desktop, or click here for one video that shows Edge in use and/or here for another.



{ Click on the image above for a larger view }

As much as we can give Apple credit for getting the HTML5 ball rolling, Adobe's decision to offer an HTML5 design tool is unlikely the result of Adobe giving in to Apple. It is a reasonable business decision that answers to a global trend - a decision that is driven rather by opportunity than surrender.

Few of us paid attention to this new format before Apple said it would deny Flash access to its iOS platform for performance, security and power consumption reasons (while others claim it is really the closed platform approach that killed Flash on iOS).

Within two years, HTML5 has evolved from an Apple thought process to a global movement with the conviction that HTML5 will be the future standard of how Web applications will be developed. It is a conviction that is shared by those who follow corporate interests as well as those who have the open Web in mind, such as Mozilla. Whether we like it or not, HTML5 will become a powerful application layer for the Internet within a few years - the first application layer that will enable Internet applications and services that will look and feel like desktop applications today.

Adobe sees Edge as a tool designers can use along with its Creative Suite applications such as Photoshop and Dreamweaver (discussed on a few of my earlier posts to this blog), although direct import support isn’t available yet. Adobe does, however, have plans to add import support as development continues.

Edge-created content is viewable on any HTML5-aware browser, such as Safari, Firefox and Chrome, and works on mobile devices such as the iPhone, iPad, HP’s WebOS, and Android-based smartphones.

The beta is still in its early stages, so it isn’t feature complete yet, and Adobe plans to use feedback from customers in the development process.

If you look at the market share for browsers, you will find that less than half the browsers in use are HTML5 compatible at this point. That percentage is certain to rise rapidly over the next couple of years, but a substantial share of the browser market will require an alternative to HTML5 for the foreseeable future. Companies will still need to be backwards compatible for older browsers at a minimum and will employ Flash for this.

In addition to raw browser support, HTML5 lacks a number of features that Flash offers. Most notably, Flash includes digital rights management (DRM) features, while in HTML5, users can quickly save videos to their own machines. That may not sound like such a bad thing for users, but for developers and content owners, it's a serious problem. A number of DRM schemes are currently under consideration for HTML5, but the issue is far from resolved. The best-fitting software depends on your use case. Many projects will benefit from technologies like Flash that are not browser controlled, for some time to come.

Adobe to Capitalize on The Rise of HTML5

While Flash has been the dominant technology used to create interactive, animated content, its market share has been decreasing as HTML5 gains ground. Apple refused to support Flash on the iPhone and the iPad citing performance issues (as noted above), which led many developers to move to adopt HTML5.

With PC sales dropping and tablet sales showing tremendous growth, many developers will eventually move on to HTML5 to create content as it is compatible with most platforms and doesn’t need any special plugins.

With Adobe Edge, Adobe plans to capitalize on this shift to HTML5. With Edge, Adobe can recapture some of its lost market share and improve sales of its Creative Suite software bundle, which currently has more than a 40% share of the global market.

HTML5 - its support in Dreamweaver CS5, Internet Explorer 9 and elsewhere - Part II

There's been a lot of discussion lately about whether or not the HTML5 video tag is going to replace Flash Player for video distribution on the Web.

Consensus: While the video tag is a big step forward for open standards, the Adobe Flash Platform will continue to play a critical role in video distribution.

Click here for a discussion of this topic in the YouTube context (a pretty significant one).

HTML5 (and CSS3) are works in progress. While some parts of these specs are finished or stable, other parts are still under development or have no current browser support.

Nonetheless, leading development tools, e.g., Adobe's Dreamweaver, have begun to support these technologies. To wit, specs that are stable or that have some level of browser implementation are now seen in the new Dreamweaver CS5 HTML5 Pack. Select the Product Details tab.

While the official specifications are still not yet complete, they are now supported to varying degrees by a number of different desktop browsers – and more importantly by all smartphones using Webkit-based browsers (e.g. iPhone, Android, Nokia WRT, Blackberry OS). Given the recent surge of interest around HTML5, Dreamweaver CS5’s compatibility with HTML5 and CSS3 was updated so you can begin exploring their potential today.

Electronic Health Records (EHR) & the Need for Cross-Browser Compatibility

Cross-Browser Problems/Solutions

Back when I did software development work (secure, data-intensive, interactive Web applications -- .NET and J2EE), I would finish debugging a project on my PC and then deploy the app to a test server from which it would be downloaded by every manner of user. Most of them were running Internet Explorer, some Firefox or Safari, and a few were running some other browser. The problem was that some of these users, users not using the same browser as me, discovered that the app didn't render as expected.

Today, unfortunately, writing dynamic web applications is still a tedious and error-prone process; some developers spend up to 75% of their time working around subtle incompatibilities between web browsers and platforms.

With the widespread adoption of Electronic Health Records (EHR) imminent, the likelihood that a given Web app will be downloaded by someone using a browser other than the one(s) used to develop and test the app will only increase.

But help may be on the way: cross browser Web development may be getting easier and more efficient with the upcoming version of Google Web Toolkit (GWT) version 2. Google claims that GWT applications will automatically support Internet Explorer, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing within your code in most cases.

Shown in the figure below is the GWT implementation of an app that would not be expected to render exactly the same in Internet Explorer and Firefox.

Note: A few examples of cross-browser incompatibility appear in the figures of my 2005 article ASP.NET & Multiplatform Environments (a link to it is provided in the bibliography at the bottom of this blog).



GWT is an interesting platform that allows you to write Java code that automatically gets converted into JavaScript by the GWT compiler. This allows for a simple way to create AJAX apps, using Java. Google also created a plug-in for Eclipse to make debugging and deploying very easy.

With Ajax, Web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax has led to better quality of Web services [see my June 28 post] due to the asynchronous mode.

The core language of the World Wide Web

Until recently, most simple browser applications were created in HTML 4.1, which could be enhanced with JavaScript and CSS. For Web applications that were as rich as desktop applications, developers had to embed Adobe Flash or, more recently, Microsoft Silverlight apps in their HTML code. But, a new version of HTML, HTML 5, which is the fifth major revision of the core language of the World Wide Web, is bringing this same rich functionality to the browser without the need for Flash or Silverlight.

A good summary of the major features of HTML 5 is in Tim O'Reilly's blog post about it.

http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html

However, there is still a problem. Currently HTML 5 compliant browsers are only 60% of the market. Quite a few enterprises are still on Internet Explorer 6. So, Flash, which has the distinct advantage of working on older browsers and has about a 95% market penetration, is still very popular. However, some expect that HTML 5 will be as popular as Flash by 2011.

Even though HTML 5 is not yet a finished standard, most of it is already supported in major browsers: Firefox 3, Internet Explorer 8, and Safari 4. This means that you can create a HTML 5 application right now!

Note: Flex, like ActiveX, Silverlight, and Java Applets before them are, in a sense, replacements for the browser. But, each replaces the web browser in a proprietary way.

HTML 5 is right around the corner

While the entire HTML 5 standard is years or more from adoption, there are many of its powerful features available in browsers today. In fact, five key next-generation features are already available in the latest (sometimes experimental) browser builds from Firefox, Opera, Safari, and Google Chrome. Microsoft has announced that it will support HTML 5, but as Vic Gundotra, VP of Engineering at Google has noted, "We eagerly await evidence of that."

GWT meets HTML 5

Google Web Toolkit is a really good way to "easily" design a flashy HTML/CSS/JavaScript application that works as expected across different browsers and operating systems.

{click for larger view}