WatchOS 5 adds support for web content rendering

Apple recently announced updates to the core software on all of their hardware platforms with various interesting new features.

One feature that jumped out when looking through it all was support for displaying web content in watchOS 5, it’s important to clarify that they haven’t added a standalone Safari app to watchOS but instead it enables any links sent via Mail or Messages to be accessed and then displayed right on the watch.

To get a quick overview it is worth taking a few minutes to watch the “Designing Web Content for watchOS” video on the WWDC2018 videos site as it gives a good overview.

Here’s a few thoughts and info about key aspects that I picked up from watching the video:

User navigation / interaction

  • You can scroll using the Apple Watch’s digital crown or via pan gestures
  • Double-tap to zoom in / out on the page content
  • Back/Forward navigation is controlled either via an overlay UI brought up via a  firm press on the screen or by swiping back and forward from the edges of the screen.

Web browser feature support

Content is optimised for display on the Apple Watch so certain features are not supported in watchOS 5:

  • Video playback
  • Service workers
  • Web fonts

If the web content being accessed is responsive then it treats the content as being 320px wide, the same width as if on an iPhone SE (iPhone 5 or older width). So text may be smaller but at least it will basically render the smallest breakpoint content, so it doesn’t require any new even smaller breakpoint to be catered for.

This is done by overriding the “initial-scale” value and provides a viewport with the dimensions 320px by 357px and reports a media query size of 320px. So existing responsive content will render on the Apple Watch without requiring any changes – at least from a layout perspective, worth noting the lack of support for Web fonts as this will likely have some rendering impact as it falls back to alternative fonts in the font stack do display.

Optimising content for Apple Watch

Even though responsive content will be rendered quite well by default it is possible to optimise content for display on Apple Watch.

The above image shows the standard responsive content being displayed on the Apple Watch, basically just the same as it would be on an iPhone SE (minus any web fonts of course!).

Responsive Layout on Apple Watch

Using a media query it is possible to modify this layout to display as a single column. There is an example given in the video which obviously won’t apply for all uses, but basically it uses “min-width: 320px” as the baseline for showing the content as two columns, so any content below that would render as a single column. Again, how this works specifically for your layouts will vary, but there will be some methods to use for frameworks like Foundation or Bootstrap etc.

“Disabled-adaptations” meta tag

The important addition to using a media query though is a new meta tag which disables the default adaptations that the Apple Watch makes when rendering content by default:

<meta name=”disabled-adaptations” content=”watch”>

With this meta tag in place the device width will be treated as the real width of Apple Watch’s screen. This again has similarities to how content was handled when the iPhone originally came out, existing content is displayed as best as possible but there are ways to optimise for the device if you want to.

Form controls on watchOS

Making use of HTML5 form control types is really important on watchOS, setting the type attribute to “email”, “tel” etc will bring up a specific, full screen UI to allow interaction.

Additionally making use of labels, placeholder or aria-label attributes enhance the context given when interacting with these controls. Hopefully you’re using these already but here’s another reason to do so.

Safari Reader on watchOS

This is a feature found on iOS and macOS which basically formats pages to show a more readable version of web page content. It’s a little unclear from the video but it sounds like pages that are “text heavy” will get displayed using Reader, although I’m not 100% sure how that would be determined exactly if so. Perhaps this is a way to handle big pages that might have a lot of adverts on it? Reader view is an option that users can choose by firmly pressing on any page to bring up the navigation overlay, so even if content is displayed normally a more readable version can be accessed.

Semantic markup in Reader view on watchOS

Reader view makes good use of semantic markup, using the “article” tag helps the display of content, and attributes like “item-prop” and other semantic tags like “strong”, “em”, “blockquote” etc enhances the display of content in Reader on watchOS.

Open Graph meta tags

Using Open Graph meta tags is something that makes sharing content around the web such as into Facebook, Twitter etc look better by providing specific preview content such as images, titles etc. watchOS makes use of these Open Graph meta tags to make the previews for any shared links look as good as possible.


That’s a quick overview of some aspects of watchOS 5’s support for web content, there’s definitely a few things to consider in there but if you’re building pages using responsive layouts and using semantic HTML then things should work fairly well without having to do anything.

The biggest issue I see initially is the lack of support for web fonts, that seems like it could cause some display issues due to the fallback to alternative fonts in the stack or if web fonts have been used for icons etc.

I’m also interested to know what the impact on battery life on the watch is like when loading and rendering multi-megabyte web pages which are not uncommon these days, I think Reader view is going to be an essential feature for viewing web content on Apple Watch.

HTML 5 Application Cache device storage limits – Jan 2014

Update 22/Dec/2017: AppCache is now technically deprecated. Additionally I found far too many issues cross-browser to ever use it for final production code. The newer Service Workers  appears to be a lot more powerful, and is supported at the time of this update (Dec 2017) in Chrome 47+, Firefox 45+,  Opera 48+, Edge 17, and in Safari Technical Preview.

A large project I’m working on just now requires some offline capability so I’ve been doing a lot of research into the various HTML5 technologies available. One thing I found is that a lot of the information out there about storage limitations of browsers and devices was often quite old (2 years being quite old in this context!), so I’ve performed a range of tests to establish more up-to-date information, so as of Jan 2014 this is hopefully accurate!

Tests were performed using the AppCache test page at www.der-schepp.de/appcache-default-size/ apart from the Firefox results as that test page wouldn’t work at the time of testing, Firefox tests were performed using my own internal test page instead.

The tests were mostly performed using the online testing tool Browserstack, items marked with † indicate results when tested on actual devices or simulators / emulators.

Notable weird behaviour is on iOS devices where prompts to increase the available storage space to a limit of 50MB appear, however it seems that an actual limit of 16MB or 20MB occurs when running the test. Also note slightly weird behaviour with the IE10 and IE11 results on Windows RT.

Please leave comments if you see any different results than I have posted or if you have any additional results for devices.

* The AppCache test only tests a maximum of 256MB so ‘unlimited’ means at least 256MB can be stored. Please note that although limits are per each application cache manifest there is likely a maximum amount of storage space available which would limit how many much data overall can be stored, at this time I these limits are unknown but I hope to do some testing in this area in the near future.

Browser Version OS Platform Device Default max (0 = unlimited*, -1 = Unsupported) Max (with prompts) Comments
Internet Explorer 6,7,8 Win XP PC -1
Internet Explorer 9 Win 7 PC -1
Internet Explorer 9 Windows Phone 7.8 HTC HD7 -1
Internet Explorer 10 Win 7 PC 10 52
Internet Explorer 10 Win 8 PC 10
Internet Explorer 10 Desktop Win 8 PC 10 52
Internet Explorer 10 † Win 8 RT Surface RT V1 10 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 4MB as the default maximum here but using my own test confirmed 10MB which is what IE10’s default prompt level is set to. See notes for Win 8.1 RT tests.
Internet Explorer 10 Desktop † Win 8 RT Surface RT V1 10 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 2MB as the default maximum here but using my own test confirmed 10MB which is what IE10’s default prompt level is set to. See notes for Win 8.1 RT tests.
Internet Explorer 11 Win 7 PC 10 52
Internet Explorer 11 Win 8.1 PC 10 52
Internet Explorer 11 Desktop Win 8.1 PC 52
Internet Explorer 11 † Win 8.1 RT Surface RT V1 4 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 4MB as the default maximum here but using my own test 8MB was cached without a prompt appearing, IE 11 on Win RT 8.1 has 10MB set as the default level to prompt to exceed storage limits but trying 9MB or higher triggered the prompt.
Internet Explorer 11 Desktop † Win 8.1 RT Surface RT V1 4 20 Prompt asking to “exceed the storage limit on your computer”. Interestingly using the ‘der-schepp.de’ test was giving 4MB as the default maximum here but using my own test 8MB was cached without a prompt appearing, IE 11 on Win RT 8.1 has 10MB set as the default level to prompt to exceed storage limits but trying 9MB or higher triggered the prompt.
Safari 4.0 OSX 10.6 Mac 0
Safari 5.0 OSX 10.6 Mac 0
Safari 5.1 Win 8 PC 0
Safari 5.1 Win 8.1 PC 0
Safari 5.1 OSX 10.6 Mac 0
Safari 5.1 OSX 10.7 Mac 0
Safari 6.0 OSX 10.7 Mac 0
Safari 6.1 OSX 10.8 Mac 0
Safari 7.0 OSX 10.9 Mac 0
Chrome 31 Win XP PC 0
Chrome 31 Win 7 PC 128
Chrome 31 Win 8 PC 75
Chrome 31 Win 8.1 PC 0
Chrome 31 OSX 10.9 Mac 0
Chrome 32 Beta Win XP PC 0
Chrome 32 Beta Win 7 PC 0
Chrome 32 Beta Win 8 PC 56
Chrome 32 Beta Win 8.1 PC 0
Chrome 32 Beta OSX 10.8 Mac 0
Chrome 32 Beta OSX 10.9 Mac 0
Chrome 33 Dev Win XP PC 0
Chrome 33 Dev Win 7 PC 0
Chrome 33 Dev Win 8 PC 60
Chrome 33 Dev Win 8.1 PC 0
Chrome 33 Dev OSX 10.8 Mac 0
Chrome 33 Dev OSX 10.9 Mac 0
Mobile Chrome 31 – iPad † iOS 7.0 iPad 3rd Gen 20
Mobile Chrome 31 – iPhone † iOS 7.0 iPhone 5 20
Firefox 26 Win XP PC 0
Firefox 26 Win 7 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 Win 8 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 Win 8.1 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 OSX 10.6 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 OSX 10.7 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 OSX 10.8 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 † OSX 10.9 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta Win XP PC 0
Firefox 27 Beta Win 7 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta Win 8 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta Win 8.1 PC 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.6 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.7 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.8 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 27 Beta OSX 10.9 Mac 0 No prompt but instead gave a notification that the site was using over 50MB of storage.
Firefox 26 for Android Android 4.1.2 Nexus S 20
Opera 18 Win XP PC 0
Opera 18 Win 7 PC 0
Opera 18 Win 8 PC 57
Opera 18 Win 8.1 PC 0
Opera 18 OSX 10.6 Mac 0
Opera 18 OSX 10.7 Mac 0
Opera 18 OSX 10.8 Mac 0
Opera 18 † OSX 10.9 Mac 0
Opera 19 Next Win XP PC 0
Opera 19 Next Win 7 PC 0
Opera 19 Next Win 8 PC 42
Opera 19 Next Win 8.1 PC 0
Opera 19 Next OSX 10.6 Mac 0
Opera 19 Next OSX 10.7 Mac 0
Opera 19 Next OSX 10.8 Mac 0
Opera 19 Next OSX 10.9 Mac 0
Opera 20 Dev Win XP PC 0
Opera 20 Dev Win 7 PC 0
Opera 20 Dev Win 8 PC 46
Opera 20 Dev Win 8.1 PC 0
Opera 20 Dev OSX 10.6 Mac 0
Opera 20 Dev OSX 10.7 Mac 0
Opera 20 Dev OSX 10.8 Mac 0
Opera 20 Dev OSX 10.9 Mac 0
Opera Mobile † Various Opera Mobile Emulator 0
BlackBerry Browser † BlackBerry 10 (10.2.0.1155) BlackBerry 10 Device Simulator 0
BlackBerry Playbook Browser † BlackBerry Playbook 2.1 (2.1.0.1032) BlackBerry PlayBook Device Simulator 0
Mobile Safari – iPad iOS 3.2 iPad 1st Gen 5
Mobile Safari – iPad iOS 4.3.2 iPad 2nd Gen 2 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad iOS 5.0 iPad 2nd Gen 2 20 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 20MB max.
Mobile Safari – iPad iOS 5.1 iPad 3rd Gen 2 20 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 20MB max.
Mobile Safari – iPad iOS 6.0 iPad 3rd Gen 10 16 Prompt for 25MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad iOS 6.0 iPad Mini 1st Gen 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad iOS 7.0 iPad 3rd Gen 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad † iOS 7.0 iPad 3rd Gen 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPad † iOS 7.0 iPad Mini Retina 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 3.0 iPhone 3GS 5
Mobile Safari – iPhone iOS 4.0 iPhone 4 5
Mobile Safari – iPhone iOS 5.1 iPhone 4S 2 20 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 6.0 iPhone 4S 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 6.0 iPhone 5 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone † iOS 7.0 iPhone 5 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Mobile Safari – iPhone iOS 7.0 iPhone 5S 10 16 Prompts for 10MB, 25MB and 50MB appeared but the test only managed to store 16MB max.
Android Browser † Android 4.1.2 Nexus S 32
Amazon Silk 3.8 † Android 4.0.3 Kindle Fire 0
Android Browser Android 4.0.3 Kindle Fire 2 48
Amazon Silk 3.4 † Android 4.0.3 Kindle Fire HD 8.9 0
Android Browser Android 4.0.3 Kindle Fire HD 8.9 48
Android Browser Android 4.1.2 Google Nexus 7 10
Android Browser Android 4.0.4 Samsung Galaxy Note 10.1 10
Android Browser Android 4.0.4 Samsung Galaxy Tab 2 10.1 10
Android Browser Android 4.2.2 LG Nexus 4 8
Android Browser Android 4.1.2 Samsung Galaxy SIII 10
Android Browser Android 2.3.3 Samsung Galaxy Note 10

Download as a PDFDownload as a CSV

Adobe Edge Preview 5

I wrote a post "My thoughts on Adobe Edge" back in August last year which looked at Edge Preview 1 where I was mainly interested in seeing how the output of Edge compared with Flash in capability, size and efficiency.

Since then Adobe have been regularly updating the Preview releases for Edge and have just released Adobe Edge Preview 5, since the initial Preview 1 release – which was pretty bare bones in regard to functionality – they have added a lot of new functionality.

In particular two things I’m pleased to see in Preview 5 are "Publish to Web" which brings code minification and "Down-level Stage for non-HTML5 Browsers" which provides a way to set fallback content for non-HTML5 browsers:

  • Publish to Web — Optimize your content for deployment by specifying if jQuery should be packaged with the composition, or downloaded from a CDN to improve caching.Edge also transforms the _edge.js file, and minifies both the _edge.js and _edgeActions.js files, resulting in significantly smaller files.
  • Down-level Stage for non-HTML5 Browsers — Use the new down-level stage to design static (non-animated) compositions that are compatible with older non-HTML5 browsers such as Internet Explorer 8 and below.

It’s good to see the minification capabilities added as this definitely helps deal with the size issue that I highlighted in my Preview 1 post. I think there’s probably still a load of work to do in minimising file sizes as this is especially important for mobile devices.

I’m keen to see what new features are added in future Preview releases, one issue is in regard to responsive web layouts and how content created in Edge can possibly adapt to the dimensions of the device / browser window that it is viewed in, again for mobile access this is very important.

One other feature that would be very good is some way to reproduce the masking capabilities that is possible in Flash, in particular the ability to apply a non-square mask over some content. It is possible to clip content but this uses rectangular clipping by limiting the overflow of a containing div to be hidden. I can’t see how non-square cropping would be possible with the limitations of current CSS3 capabilities, I’d happily be proven wrong on this though.

Here’s a preview video published on Adobe TV which introduces the updated features in Beta 5:

My thoughts on Adobe Edge

Today Adobe published on their Adobe Labs website a public preview of a new application called Edge, which is described in their own words as:

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

Having previously done a little comparison between the output contents and file size of their previously released Wallaby ‘Flash to HTML5’ conversion tool and that of Flash itself then I thought it would be good to do the same thing for Edge. However, the problem at the moment is – being only the first preview release – Edge has a fairly limited featureset with animation methods such as rotation, location (X / Y axis movement), opacity, scaling and skewing. Essentially some of the basic animation tools that you’d find in Flash. The problem with trying to do a comparison along the lines of the Wallaby test that I did is that I used a shape-tweened animation for that test, something which just isn’t possible at this time within the capabilities of Edge.

So, in lieu of being able to do a really exact comparison I have instead made a simple animation using one of the original SVG source graphics that I used for my Wallaby test. The main outcome of doing this test is just to see what the output of Edge is like – how many files does it create, how big is each file individually and in total. If you haven’t read the previous Wallaby post prior to this then in a nutshell the Flash output was far more efficient in both number of files and file size. Again it has to be said that a shape-tween animation is probably the most complex type of animation you could aim to do in this context, so I did set the bar fairly high there. But as tools like Edge and Wallaby are an attempt to try and bring Flash-esque timeline based animation creation to the world of HTML5/CSS/JS/SVG then it’s fair to expect that beyond some simple x/y movement and rotation that shape-tweening is something that people – especially those from a Flash background – will want to create.

‘Edge Case’ sample: Rotating an SVG in Adobe Edge

So, here’s the simple animation I created in Edge. I imported an SVG file which I had used for the Wallaby test and applied a simple 360 degree rotation to it, a lot simpler than the Wallaby test but I thought it was worthwhile bringing in an SVG file to see what Edge did with it.


View Edge’s Output in new Window
Download the Edge Assets as a Zip

Adobe Edge’s ouput HTML, CSS, JS etc

Here are all the files that Edge created for this example:

  • edge-case.html: 1kb
  • edge_includes/jquery-1.4.2.min.js: 72kb
  • edge_includes/jquery.easing.1.3.js: 8kb
  • edge_includes/edge.0.1.1.min.js: 32kb
  • edge_includes/edge.symbol.0.1.1.min.js: 29kb
  • edge-case_edge.js: 5kb
  • edge-case_edge.css: 1kb
  • images/noun_project_182.svg: 1kb

Total: 149kb

So, to get that basic rotation animation of an SVG file we get almost a 150kb payload in order to make that work. I haven’t bothered creating a Flash (or video) version of this animation as I think it’s fairly clear that it would be possible to get a smaller file size using Flash to create it. Edge and tools like it have obviously got their work cut out here, especially with the huge use of mobile devices then file sizes and number of separate files in a site (i.e. minimising server calls etc) is an important issue.

We’ve definitely got to cut Edge some slack though here, as small as Flash files can be it’s important to remember that the entire runtime for Flash is a plugin whereas as HTML / CSS / JS etc is supported by the browser’s native features, Also the JS files used by Edge are providing a kind of runtime in the form of some Javascript functions which gets added to every animation that you create with it. Presumably this could be alleviated by having this file be published only once and then referenced, or better yet by being hosted by Google’s CDN and referenced that way along with jQuery which Edge also includes with each animation.

Adobe Edge: Just a tool for Flash-ers or true HTML based creation?

It’s hard to say at this point how these tools will be used, a big area will surely be a replacement for Flash-based interactive / animated advertising, again file size is very important here as Flash banner ads often have a maxmimum payload for ad networks of about 40kb, so Edge is not competitive here.

I think my biggest concern about these tools is that they simply become a swap-in replacement for Flash and that people start to use them purely from a visual perspective and not considering the structure and semantic meaning which underlies all HTML pages. It is *HTML*5 after all, even though that term is often used as a buzzword to include JavaScript effects, technologies such as Canvas, SVG etc. It is extremely important to remember that semantic meaning is at the core of HTML. As such animations created with tools like Edge should keep that at heart and include a workflow that encourages this fact, not just enabling ways to make things move around the screen etc. So I’ll be interested to see how things progress with Edge.

Despite that concern it is still great to see tools like Edge and Sencha Animator being released, the uptake of complex JavaScript based interaction and animation is certainly hindered most by the lack of capable IDE’s to make the process quicker to do. Hand coding jQuery animation and interaction is fine but a good IDE would enable you to keep on top of the code being used but also make it much quicker and efficient to develop using these technologies.

Anyway, that’s my thoughts having played around with Edge, I’ll have to go catch up with some reading online and see what other people are saying, feel free to comment with your own thoughts!

Adobe Labs release Wallaby Flash to HTML5 converter

Adobe have released an interesting experimental tool called ‘Wallaby‘ over on Adobe Labs. It’s basically an app that tries to convert Flash FLA source files into ‘HTML5’ compatible animations. Note I’m using ‘HTML5’ in quotes as usage of the term here is more in the overall grouping of HTML5 and related technologies such as CSS3, JavaScript / jQuery, SVG etc. It’s worth reading over the Release Notes to get an idea of the current limitations, the biggest issues at the moment being WebKit browser support only and no conversion of actionscript or sound within FLAs.

I just happened to be playing around with Flash this morning messing around doing a little shape tweening with a couple of symbols I found over on The Noun Project website so I thought I’d use that FLA file and see how Wallaby coped with it.

Running Wallaby:

After starting Wallaby you get a very simple interface, a file select field that you use to select the FLA file and a large Status area that shows any errors and warnings encountered whilst converting your file. There are also Preferences that can be set which at the moment include automatically opening the converted file in your default browser and enabling logging.

After selecting my FLA file I clicked ‘Convert’ and after a few seconds it happily converted my file without any errors or warnings. I was interested to see what it would make of the shape tweened animation that I had made in Flash as this seemed like quite a challenge to convert.

Wallaby’s HTML output:

The conversion process results in quite a few files being exported as the animation is recreated using a combination of HTML, CSS and jQuery / JavaScript, here a screenshot of the files I got:

It turns out that to make an HTML version of our tweened FLA animation we need two JavaScript files, one CSS file, one HTML file and a folder containing 246 SVG frames. I think it’s fair to say that tweened animations are a bit of a challenge! Looking at the Release Notes it does state that it creates an SVG file for each frame of a shape tween. As a result the approximate sizes of the exported files look like this:

  • Energy-html.html: 75kb
  • Energy.css: 49kb
  • Energy.js: 2kb
  • jquery-1.4.2.js: 70kb
  • Energy_assets: 176kb

That’s a total of 372kb in order to recreate the tweened animation in HTML / CSS / JS / SVG.

Flash’s output:

So how does this compare with the files output by Flash? Well, not very well when you look at both the amount of files required and their file size:

  • Energy-flash.html: 2kb
  • Energy.swf: 4kb

A grand total of 6kb when it’s rendered as Flash swf output. That’s quite a difference in size, although admittedly Flash’s default HTML file doesn’t use any JavaScript such as SWFObject to embed the file which is generally common practice, so I would argue that the Flash output should really have the following additional SWFObject files added to it’s output:

  • swfobject.js: 10kb
  • expressInstall.swf: 1kb

Even with that it’s still only a total of 17kb, about 1/20th the total size of the files that Wallaby outputs.

Why not use video instead?

This particular animation is obviously a challenge for Wallaby to convert into anything closely competing in file size, so perhaps in this case it would be a better option to use a video clip to provide a non-Flash version of the animation? The same animation can be output as an H.264 video at the same frame rate and it comes in considerably smaller at 192kb:

  • Energy-video.html: 1kb
  • Energy.mov: 192kb

That’s about half the size of the Wallaby output. It’s also likely to playback much better on mobile devices such as iPhone / iPad / iPod touch as Adobe warn that the output of shape tweened animation can result in playback performance difficulties on iOS devices.

In the interest of being consistent I should of course add some additional JavaScript video embedding option such as JWPlayer as again this is common practice when it comes to adding video on web pages. Using JWPlayer would add the following additional files:

  • jwplayer.js: 104kb
  • player.swf: 96kb
  • yt.swf: 1kb

This adds 201kb to the total file size required so that brings it to about 393kb, almost the same as Wallaby’s HTML5 output. I’m sure there are possibly slimmer options compared to JWPlayer for embedding that could reduce that down a bit but I reference JWPlayer as I consider it to be one of the best cross-platform methods of embedding video on website.

Of course I haven’t mentioned anything about delivering video in alternative codecs such as Ogg Theora or WebM to serve browsers like Opera, Firefox and Chrome, this would further increase the files and sizes involved. However, given that Wallaby is trying to provide a way for animated content created in Flash to be output and made playable on devices such as the iPad and iPhone it could also be considered that providing any kind of Flash fallback for video is unnecessary, so we could ignore the JWPlayer / JS completely and just use the regular HTML5 <video> tag and a single H.264 video, so we’d be back to a considerably smaller size than Wallaby’s output in this instance.

In Closing…

Overall Wallaby looks to be a pretty handy tool for people that are struggling to find a way to get their content viewable on the millions of devices that don’t (and likely never will) run Flash. For animation that doesn’t involve shape tweening I think the resulting file sizes will be a lot more favourable and it will be a reasonably efficient way to create animated content using standards-based technology.

I would say that the primary target user for Wallaby, at least at first, is for people doing online advertising. This is an area that is seeing a lot of activity with tools like Sencha Touch appearing, there’s definitely opportunity for a ‘killer app’ that makes creating banner advertising using all of these new emerging web technologies in a way that people are used to doing in the Flash IDE. There’s a lot of challenges in there technically, as well as a lot of issues such as accessibility, graceful degradation etc, but I think a lot of companies are focusing on this challenge now, so it’s good to see that Adobe is thinking about various ways of providing tools for the job.

Sample Animation files:

I have included the HTML5 output as an iframe and also links to each animation in HTML5, SWF and H.264 formats. There is also a link to download all the assets of Wallaby’s output in a zip archive:

Wallaby’s HTML5 output:

View Wallaby’s HTML5 Output in new Window
Download the Wallaby HTML5 Assets as a Zip

SWF output:
View SWF Output in new Window

Video output:
View Video Output in new Window

Review: Adobe Dreamweaver CS5

Dreamweaver CS5 iconAdobe have just announced the new version of their Creative Suite software, CS5 adds a whole range of new features across the whole range of their applications.

As a web designer / developer it’s the updates to Dreamweaver CS5 that I’m most interested in. I’ve used Dreamweaver as my main development environment for years even though I’ve used it in a very code oriented way and haven’t relied much on the Design view mode in the application.;

Part of the reason I haven’t relied on the Design view aspect is that historically it was pretty poor at rendering more up to date HTML / CSS techniques. It was also unable to render the custom PHP code used in my own PHP applications or in any other PHP based CMS apps like WordPress, Drupal etc.;

Dreamweaver CS4 did bring some improvements with the addition of the WebKit framework as the rendering engine for Design view and Live view which solved a lot of the HTML / CSS rendering issues and added support for many of the CSS features that WebKit supports.

Improved PHP Code Hinting and Introspection, Live View

Dreamweaver CS5 takes those steps a good deal further and now adds greatly improved PHP Code Hinting which can discover your own PHP functions and classes as well as those in CMS frameworks WordPress, Drupal and Joomla. The major benefit of this for the Design view and Live view is that instead of a jumbled mess of un-renderable PHP and HTML code you get the actual site running right inside Dreamweaver.

Dreamweaver CS5 custom code introspection

When you combine this with the new Inspect mode you get the ability to inspect elements on your page and see the CSS properties used, it’s very similar to some of the features offered by the Firebug add-on for Firefox or Web Inspector inside Safari.

The combination of these features together make it a huge leap forward for code-based designer / developers like myself. If you’ve previously been put off by the rendering aspect of Dreamweaver before then it’s definitely worth checking out again.

What about HTML5, CSS3, Web font support?

There’s been a lot of noise about HTML5, CSS3 and Web Fonts (@font-face) in recent months, not least because of the prominent debate over Flash support on iPhone OS devices. A lot of people might expect Dreamweaver to add support for HTML5 and CSS3, however, at first glance you might be a bit disappointed.

David Powers over on the FoundationPHP blog wrote a great writeup of Dreamweaver CS5 in which he makes a valid point about the lack of prominent support for HTML5 and CSS3. The HTML5 and CSS3 standards are still evolving so it’s difficult for any IDE to add support for them without the risk of something changing or breaking, especially with the HTML5 standard.

Dreamweaver CS5 does however offer support for using the HTML5 doctype for your documents, also the WebKit framework used in Design view and Live view will also render many of the CSS3 features that the WebKit framework supports, so if you’re writing code by hand then you can still use and preview many of these CSS properties.

Dreamweaver's Live View rendering of Suburbia.org.uk

(The screenshot above shows https://qreate.co.uk viewed right inside Dreamweaver’s Live View, note the TypeKit fonts rendering happily inside Dreamweaver’s WebKit based Live view).

Web Fonts are still a hot potato in many ways so as yet there is no direct support for adding those within Dreamweaver, but again WebKit will render them so adding the @font-face code by hand will get you there.

CSS3 Code hintsThe good news for CSS3 and Font-face etc is that Dreamweaver can be extended very easily to add support for, even better news is that I have already written a couple of Extensions for Dreamweaver which can be downloaded for free from the Dreamweaver Exchange, you can also read a bit more about them on the Projects page of this site.

I’m hoping to write on to add support for HTML5 tags too, with these extensions you’ll get code hinting support for adding these into your code. Please try them out and give me feedback as to how they can be improved and I’ll see what I can do to make them better. David Powers has also written an extension for adding / converting RGBa colour values too which is another handy tool, you can download it and other useful DW extensions from his Extensions and Tools page.

Improved Subversion support

Subversion version control support was added with Dreamweaver CS4, however I wasn’t very keen on how it was implemented and it lacked many features so I’ve continued to use alternative standalone apps for managing version control on OSX. Subversion support has been improved in CS5 though so it looks to be a more viable option now, I will try and give it a fresh comparison to see how it compares to the standalone alternatives now. One major difference in CS5’s support I believe is that Subversion can be upgraded without Dreamweaver itself having to be updated so this will help keep it more up to date.

BrowserLab integration

Adobe BrowserLab logoI’ve written about BrowserLab before, BrowserLab is a great way to test web pages in different browsers and Adobe has continued to improve it by adding more target browsers to the list as well as the ability to save local copies of the rendered previews as jpeg images.

The integration of BrowserLab in CS5 along with all of the improved Live view rendering improvements makes for a great development environment. BrowserLab has been a free service so far as part of Adobe’s Labs beta program, it will however ultimately be a paid service but purchasers of CS5 software will get included access for a year. Standalone pricing has yet to be announced.

Recommended upgrade

All in all Dreamweaver CS5 is a great step forward, it’s definitely got some genuinely useful improvements to offer my own code-centric workflow especially that I’m now using WordPress for many projects. I’d definitely recommend giving it another look if you haven’t been using Dreamweaver for any of the reasons I’d previously mentioned.