We're in a heated and prolonged state, where the return of native apps is inspiring both end-users and creative developers, but is also damaging the Web's freedom.
The 'Web vs. Native' argument shouldn't exist. We should be working on a unified solution, mixing the visibility of the Web with the raw power of native applications.
I'm NOT referring to hybrid apps, e.g. PhoneGap/Cordova. It's the exact opposite: websites that are enhanced by the device's UI components. (Something which is not yet possible.)
This is a proposal to create a new W3C specification, for what I refer to as 'UUI' (Unified User Interface) components.
What would it be?
The website would delegate common UI components to the device. For example, for a site's navigation tree, an iPad might render iOS's pop-out menu; whereas a smaller Android tablet may decide to render it as an full-screen menu, with a back button.
Amazon's site using some rough UUI components (next to its native and original web counterparts).
Currently, devices render certain elements from sites, but it's very limited (e.g. iOS touch icons, custom HTML5 form types, and even meta page titles). Here are some ideas on taking this to a new level with UUI components:
- Site-search & filter systems
- Comment threads
- Loading states
- Data grids & item listings
- Inventories (shopping baskets, bookmarks)
- Gesture instructions
- Global login systems
How could this work?
Is any of this possible right now? Of course, you could use browser extensions and hook them up to peripheral APIs. But for UUIs to be useful, we need to embrace standards.
I'm sure a lot of existing technology could be used to create a UUI. Here are the layers that I have in mind:
Base markup - We would start by setting-up our DOM as usual. Headers would be <header>s, Navigation would be <nav>s. Then, it would be progressively enhanced...
UI delegates - We would then notify the device which parts of the interface we're delegating. The components would be part of a new specification, and could possibly utilise HTML5 microdata.
Branding - We could also tell each specific rendering engine how to handle specific sub-components of a delegate. We could reference new pseudo elements in our stylesheets, similar to ::-webkit-scrollbar, for example.
Why do we need this?
The Web might become the OS.
Google's recent attempt of Chrome OS has got huge potential. Whilst it has been overshadowed by native App Stores, a computer that just acts as a gateway to the Web would be extremely pure.
And we need to prepare for this. Whilst I think UI frameworks made with JavaScript are interesting and have offered a high-level of customisation, I believe most of the UI components should be your device's responsibility. Web apps on an Android tablet feel like an Android app, and web apps on an iPhone feel like an iPhone app. (Or, more accurately, become an iPhone app).
The browser is now more aware of its device.
The W3C Device APIs are the best thing to come from the W3C in a long time. They allow the browser to become aware of its device. I believe that we need to extend this concept even further, and take care of specific UI components.
Interfaces should be semantic, too.
We all still love the idea of a Semantic Web: HTML5 Microdata is alive and kicking. But like Nicolas Gallagher recently mentioned, semantics are only relative to their context. To the people who architecting a website, a "horizontal carousel" is actually more semantic than a set of "recipes".
By making an interface semantic, we are increasing the intelligence of the user's device. This leads to all sorts of possibilities.
Imagine a Web where… instead of a shopping cart being just an online form, it's a central location of products you're planning on purchasing, no matter what web page you were on.
Imagine a Web where… bookmarking sites had the flexibility and portability of Pinboard, without the clunkiness of visiting a webpage or 'syncing' your bookmarks.
Imagine a Web where… login boxes and share boxes weren't dispersed randomly around the screen, but were in a unified location, so you always knew where to look.
Where do we take it from here?
This is something I've had on my mind for a while, and it's great to finally get it out of my head and onto the Web. But of course, I might be missing the reason why apps and the Web were so divided in the first place.
So, I would love to hear from people who are actively involved with W3C specifications and working groups. So, please comment on this article and start a discussion about the following:
- Is it a good idea?
- What components should be included in a spec?
- Should we provide shims/polyfills for native components?
- How should aesthetic customisation be implemented?
With design patterns & organic trends, certain parts of the Web are now becoming common-place. I think the next logical step is sitting right under our nose: turning these conventions into something that is native to devices. Every day, iOS users feel the benefit of consistent user interfaces, and this is something that we should be integrating into the Web.
Just like Joe Hewitt said, the Web should never return to its roots as an archive of hyperlinked documents. But we can't deny the fact that devices should be aware of a website's user interface.
Let's take the Web Platform forward, whilst keeping it as open as possible.