RIA Design
From the archives- It’s no longer just about Flash. My article in early 2008 for Computer Arts looked at what technologies to create rich media experiences on the internet and develop platform-agnostic apps means for designers
Rich internet applications, or RIAs, are a cross-fertilisation of interactive web design and desktop functionality. The web becomes the platform, rather than users being confined to Mac, Windows or Linux, and the technology offers a range of new possibilities in terms of design and function. Companies including Adobe, Sun and Microsoft want developers to buy into their solutions, and they also have designers in their sights.
The term Web 2.0 has been loosely used to cover the development of these online applications and rich media experiences, mainly delivered as popular sites such as Flickr, Google Maps and Facebook. These provide the features of a desktop app through a browser, enabling users to modify onscreen information, but leaving the data handling to an online server. These user-centred applications have been built using a combination of existing web technologies. Ajax (Asynchronous JavaScript and XML) is one way to build RIAs, while Flash is another, especially with the introduction of ActionScript 3.0.
However, Flash’s traditional animation paradigm doesn’t suit the programming model normally used by application developers. To address this market, first Macromedia then Adobe sought to offer developers a more code-friendly model with Flex. This is a traditional integrated development environment (IDE) that uses MXML (an XML-based language) for building and laying out user interfaces and ActionScript to add interactivity.
“Flex gives you a component framework, in which you can use a text-based language to lay out an application,” says Mike Downey, group manager of platform evangelism at Adobe. “Previously the only way you could do this was to use Flash, which is basically an animation tool.”
It will come as no surprise that Microsoft is also a player in the RIA/connected app game offering Silverlight, a cross-browser, cross-platform plug-in. It’s largely aimed at providing a similarly rich online experience to Flash, though it’s more focused on developers.
“Version 1.0 of Silverlight really majors on rich media,” says John Allwright, Microsoft UK’s Expression product manager. “Silverlight video uses the VC1 codec, the same codec that you’d find in HD DVD, Blu-ray and domestic DVD players – it’s an industry standard. We’re talking to people such as Major League Baseball and broadcasters, who are interested in the video quality that Silverlight can deliver.”
Currently Silverlight uses Extensible Application Markup Language (XAML) to define the components of the rich media interface and JavaScript as the programming model on the client side. “It’s very complementary to Ajax,” says Allwright. “Some of the apps out there overlay HTML controls on top of the Silverlight player to give you a rich internet experience. You can have multiple instances of Silverlight on a page, and you can use Ajax as the transport mechanism to go back to the server.”
Dynamic updating
An example is the site for the 2007 Emmy Awards, which was built in Silverlight by Washington-based agency Identity Mine and Hollywood’s REZN8. “As the awards were being handed out, the team was dynamically updating the site with the winners,” says Allwright. “They didn’t have to upload a whole new binary for the application. All they were doing was changing bits of XML on the fly, which were then rendered on the web page.”
Allwright makes no bones about the fact that Silverlight is a work in progress, but says Microsoft is in it for the long game. The latest versions of its .NET programming framework provide a graphical subsystem called Windows Presentation Foundation (WPF), used in building Vista and driving Silverlight development. Microsoft intends to use WPF more extensively in Silverlight 2.0, as well as encapsulating the whole of .NET in the browser plug-in. The advantages are obvious – if developers are used to creating desktop applications with .NET (Microsoft Visual Studio is commonly used for this), then it should be relatively straightforward to use those apps as a basis for RIAs.
For designers, the present route into Silverlight development is the Expression Suite, a collection of tools for creating and working with the interface assets of sites and RIAs. Currently used for creating XAML components, the next version will have more of a focus on Silverlight and WPF.
To understand the impression that Silverlight will make on the RIA market, it’s useful to speak to a company that has worked with both Adobe and Microsoft technologies.
“Silverlight offers an alternative method of developing rich interfaces for web applications, and given that it’s in a very early incarnation it’s better to look forward to get some assessment of what its impact will be,” says Andy Hood, creative development director of AKQA, an agency with offices in the US, Europe and Asia. “Silverlight 2.0 looks to offer many of the features of WPF and, as such, could become a powerful contender for creating rich application experiences.”
The next stage in the interactive evolution are secure, self-contained applications that exist on the desktop, or even mobile devices, but enable you to work offline and connect online when necessary. And companies are already gearing up to take advantage. Microsoft is set to explore it with WPF and Silverlight, and Sun with JavaFX, while Adobe is developing its own Adobe Integrated Runtime (AIR).
“The first version of Flash created a SWF file that ran in a browser,” says Downey. “Several versions later we allowed you to publish a SWF to a phone. All of a sudden the Flash designer had to think in a different way. It’s the same thing with AIR. Now you have the option to publish SWF projects in a browser, to a phone and as a fully featured desktop application.”
One reason why AIR apps are so attractive is that today’s online apps are felt to underuse the power of the CPU. By moving them to the desktop, the user can save and work on local content and choose when to connect. One example is the Denver-based developer EffectiveUI, which has created eBay Desktop, an AIR application that enables local storage and desktop notifications, as well as faster online use through local caching of eBay’s XML-based category structure. In another example, international consultancy frog design took Disney’s existing travel-agent website and transformed it into a cross-platform desktop application.
“AIR allows for local caching,” says Josh Bloom, design technologist at frog design. “That was a huge portion of the application – storing the most recent and relevant content was an important feature for agents. Dragging and dropping within and from other apps also made things much easier for agents than using paper and ink.”
“Apps such as email, instant messaging, media delivery, collaboration software, client and customer management software can all be built using AIR,” says Sean Christmann, senior developer at EffectiveUI. “Many enterprise applications have been moving into the browser so that they can be written in PHP, JSP and ASPX, and be universally accessible. I would argue that using a Flex/ AIR front-end to those back-ends allows better information flow and better caching solutions, and you retain universal access.”
Owning the user
With the power to completely design the interface and with no dependency on platform design guidelines, such connected apps can be used to extend clients’ branded websites. In today’s market ‘owning’ the user is paramount, and if an application exists online, choice is everywhere and users can click through in seconds. A constant presence on the desktop is an attractive option.
However, creating a completely branded application such as eBay Desktop can be a challenge. “A delicate balancing act was required in taking eBay’s styles and colours and skinning an app that’s simultaneously deployed on the Mac and Windows operating systems,” says EffectiveUI’s chief experience designer Lance Christmann. “The iterative prototyping allowed us to continuously explore and tweak the correct proportions of those three elements.”
From a web designer’s perspective, the key strength of AIR is that you can author apps with software that you’re already using – Flash and Dreamweaver both have exporters available for exporting projects as AIR apps. “When you build a desktop application with AIR, you’re using web technologies – HTML, Flash or Flex,” says Downey. “If you’re a web developer you already know those tools, so with them you can build desktop applications. You can repurpose code from your site and reuse it as a desktop app. You don’t have to learn C++ or Java or any of those other technologies. The other benefit is that it’ll all run on any platform; that’s a huge advantage. Suddenly you’re the most valuable developer out there, because you can build it all.”
Interactive designer Erik Natzke is already using AIR. He agrees with Downey’s claims, but he also has a caveat for designers. “The only unfortunate thing is that the learning curve of ActionScript 3.0 is a bit steeper than it honestly should be, considering the legacy of Flash was as an approachable environment for designers,” he says.
Natzke feels the real promise of AIR is the technology’s ability to reach the masses. “It’s not teams of programmers that will most benefit from the ability to create a desktop app with Flash,” he says. “They could probably already build those types of things in C++. It’s the small groups and the individuals who see new ways to shape the interactive design landscape – and will now have the ability to do so with AIR.”
Hood expects to see a profusion of richer, web-like experiences on the desktop in the future, but he has a warning. “The keyword, however, is relevance,” he points out. “I hope we do not see an explosion of client logos on the desktop purely because it can be done. If we are not careful, the desktop could end up looking like an F1 driver’s jacket.”
It’s only going to get easier for designers to get involved. Still in the Adobe workshop, Thermo is another layer for Flex that adds a graphical UI to the functionality. “So instead of writing a tag to add a button, I can just drag a button control onto the stage and visually reskin it,” says Downey. “Under the seams, Thermo is writing out those same XML tags.”
Adobe knows designers are religious about their tools, so it will be possible to design an interface in Photoshop then drag it into Thermo to ‘wire in’ interactivity. It’s definitely an area that will continue to see innovation. “New technologies are stretching what designers can do, particularly in the realm of application interfaces,” says Hood. “Tools such as Blend and Thermo enable designers to do far more than produce stills of screens, as they may have in the past, moving them into closer collaboration with developers – which has to be a good thing.”
RESOURCES
Adobe AIR
Download the AIR SDK and the Creative Suite Exporters
Adobe Flex
The Flex Builder 3 beta for the coders among you
Ajax Goals
Community site for Ajax
Microsoft Expression Blend 2
The Blend 2 December Preview enables you to create WPF (Windows Presentation Foundation) apps as well as Silverlight-based applications
Microsoft Silverlight
All you need to know about Microsoft Silverlight, with download links, design guides and more
Sun JavaFX
A new product family targeted at the high-impact, rich-content market.
Also found on Computer Arts – Rich internet apps – design and development
