Creating the OneRiot HTML5 Concept Application for the Launch of Microsoft’s IE9 – A Perspective

On September 15th, Roundarch participated in the launch of Microsoft”s Internet Explorer 9 Beta. As most of the industry is now aware, IE9 has been designed from the ground up by Microsoft to be the most compliant HTML 5 browser available, with a lot of additional features including a new, simplified user interface (sans browser chrome), and hefty performance improvements thanks to real hardware-backed graphics acceleration and a fully rebuilt JavaScript engine.

Because of our experience with Rich Internet Application design and development and our existing expertise with HTML5, Roundarch was approached by Microsoft to design and develop a demo application that would leverage the new features of IE9. Microsoft suggested that our team partner with OneRiot, a realtime advertising service, which archives and makes searchable news, videos and blogs being discussed on the social web, all ordered to reflect current social relevance.

Working with Microsoft and OneRiot, we decided to develop a purely conceptual trending news viewer application with the goal of demonstrating both form and function, leveraging a variety of technologies to make a rather complex experience seem deceptively simple, fast and useful.

The Demo Concept

The concept of the application is quite simple, and I”ve included videos below to help you visualize things.

The application allows a user to view current and historical trending news topics (and associated links), as these topics are made popular on social networks and across other Web sites. Not only can users view trending content, but do so in a manner that provides a way for users to visualize changes in the trending topics over time.

Because of IE9″s strict adherence to specifications, the application is 100% standards-compliant HTML5, but still demonstrate user experience patterns that have historically only been possible by leveraging a multimedia-enabling plugin.

The OneRiot “AdBubbles” demo represents trending topics as translucent, physics-driven bubbles – for which color represents whether or not a trend is heating up or cooling off, and which with their size represents the total number of online articles/posts that referenced that trending topic.

To help the user visualize the change in trending topics, the “bubble tank” refreshes itself once each minute, loading the most current trending topic data which causes a visual transformation of the size and color of the currently displayed “bubbles”.

Rather than trying to explain the full application in writing, let”s just take a look at the video clips:

Application Loading

When the application loads, the bubbles fall in from the top. The color of the bubbles represent whether or not the trending topic is cooling down or heating up (cool = blue / hot = red). The size of the bubbles represents the amount of online chatter.

Digging Into a Trending Topic

The bubbles in the user interface all represent trending topics from the RealTime Web. Double clicking a bubble will load a modal window with the latest article results from OneRiot”s partners.

Ignoring and Following Trending Topics

Since trending topics will refresh over time, and a user might want to view a topic in the future that is no longer part of the trends, we”ve allowed the user to drag or toss bubbles at either the “following” or “ignore” containers that are present on the screen. Should a user choose to follow a subject, it will remain available for them to recall the latest OneRiot partner articles. If a user doesn”t care about a particular trending topic, they can toss it towards the “ignore” container, which will prevent this topic from refreshing within the user interface.

The Timeline Viewing Trending Topics and Changes Over Time

To make the most out of the trending topics visualization, we thought it important to be able to view the changes in popularity for topics over time.
The 24-hour timeline allows a user to navigate across time to view how the trends have changed. When a user clicks on a new point in time, the application will compare the current trends with the historical data, and the bubbles on screen will transform accordingly.
Should the topics not exist in both data sets, they will simply dissolve and disappear from the interface and new topics will drop in from above to fill the gap. Should topics exist in both data sets, the bubbles will change size and color, based on their popularity and trending meta data.

“Auto Play” Mode

If the user does not actively use the interface for a set period of time, the software will go into “autoplay” mode. When this happens, the application will randomly cycle through the trending topic bubbles, and display an associated article headline and short description in large typographic text. This is displayed behind the canvas control / physics engine bubble chamber.

The Technology Behind the Experience

I am not going to get too far into the technology here, as Jeff Karova, the lead interactive developer on the project has broken things down in this recent post that discusses the technology behind the demo application.

I will, however, summarize our approach: To drive the user experience, we created an Azure application, hosted on Microsoft”s Azure cloud infrastructure. This application regularly connects to, parses and archives data in Azure SQL from the OneRiot API, which is later accessed by the
HTML5 demo via Web service requests.

There are really two types of data: Trending topics and articles/posts related to them. Each time the application requests a new set of trending topics and/or articles, they are stored in the Web browser”s local database, allowing for an experience that remembers your previous sessions, and gives users the ability to navigate between current and historical sets of data.

The user interface, which relies most heavily on the HTML5 canvas tag, features both a physics simulation to help render the bubbles / trending topics and a timeline component to that gives users the ability to explore trending topics as they change over the course of the last 24 hours.

Introducing the Concept of Time-Release Design

The application also has a very purposeful design feature, that will most likely be taken for granted by users until they”ve had the opportunity to use the application over the course of time. The interface was designed and developed with the concept of “time release” experience in mind.

What in the world does that mean?

Just like it sounds, a “time release” experience is one that becomes more valuable to a user that uses the application over a longer time period. We sometimes use this as a way to introduce novice users to more advanced features within a software application, revealing functionality as the user becomes more familiar with how the software they are using works.

Clearly, this isn”t applicable to all types of software. But for a casual news discovery application… why not?!

The concept works quite well, and the more that you interact with the OneRiot “Adbubbles” demo, the more interesting and valuable the experience becomes.

The application provides a new, unique and experimental way to discover interesting news items. Time and again, we”ve heard feedback from users about how they”ve found interesting content using OneRiot that they probably wouldn”t have found any other way, based on their browser habits.

Some Thoughts on HTML5 and Impact on RIA Design & Development

Working with the great people at OneRiot, as well as with the IE9 team at Microsoft was a great experience. The Microsoft IE9 beta is the most robust and HTML5 compatible browser available for Windows computers, and it”s performance is extraordinary, especially when compared to Microsoft”s previous incarnations of their hugely popular Web browser.

At Roundarch, we”ve gained a lot of experience related to HTML5, as many of the current and recently launched projects that our teams are working on take advantage of the new HTML specification, as well as what is now available using CSS. HTML5 shows great promise, and plays an role as another important tool in the developer toolbox.

There is a lot of talk about HTML5 being the end of other RIA technologies. With our experiences, that doesn”t seem to be the case, as there are many examples where HTML5 just can”t do what other technologies can. In time, as browsers incorporate WebGL and relative technologies as well as the ability to run applications that allow for native/compiled code execution, HTML and Javascript have their place, as do more robust technologies like Adobe Flash and Microsoft Silverlight.

Another consideration for HTML5 for complex RIAs right now must be that developers must still rely on users viewing their applications and content using one of many different browsers. It seems that the competing browser technologies and companies behind them simply can”t seem to align across the board on how features are implemented, and what priorities are in their overall product-feature roadmap. This means the potential for a repeat of 1996 and the original browser wars. This means that the amount of testing and tweaking required for HTML5 RIAs should not be underestimated when planning projects.

HTML5 shows great promise, and the next year or two should be quite interesting as more feature-rich browsers are offered up to consumers and as the HTML5/CSS3 specification continues to mature.

Do you want to know more about HTML5 and how it can be leveraged to create standards-based, desktop-like applications that run solely in the browser? Drop me an email, or reach out to our team at Roundarch.

For more information on Microsoft”s Internet Explorer 9, and to see how it”s helping make a more beautiful Web, check out

To learn more about OneRiot, and their perspective on the HTML5 Demo application developed by Roundarch, see their blog post on the topic.

If you want to experience the OneRiot HTML5 Application, .