Submit A Tip Alternative Tip Form

HTML5 ‘Ribbon’ Interface for Web Apps In The Works

The ‘Ribbon’ interface Microsoft introduced with Office 2007 provided an innovative approach to the use and layout of toolbars in applications.

Following the release, OpenOffice toyed with the idea of creating a similar ‘tabbed toolbar’ concept for use with its own office suite. Whilst the mock-ups and discussions never bore much in the way of fruit for OpenOffice the idea of a ‘ribbon’ for use in open-sources apps hasn’t beenabandoned.

Reader George T mailed in to share a project he’s working on thatimplementsthe “Ribbon” interface inHTML5/CSS3/Javascript for web app developers, should they wish, to use in their applications.

The project is only “half way there” at present, but George told us that it should be “100% completed” within a month or so, at which time the source code will be released.

Work so far

Being built on open standards, and being open-source itself, the ‘Ribbon control’ looks the same in a web-browser on Linux as it does in a web-browser on Windows: -

George brieflyexplains a bit more about the ideaon his blog: -

“I have been working on this portion for about two months, trying to find the best way to write a Desktop Web Application, it is basically a Desktop Application that runs inside the browser instead of Xaml or Windows Forms.

And the most important is all of the html mark-up are custom tags, easy to understand.

Custom html tags to create a Ribbon

Aping Mad

The aping of anything linked to Microsoft will irk a minority, but the beauty of freedom means if you don’t like something you don’t have to use it. Personally, I look forward to seeing what kinds of web apps make use of George’s Ribbon control…