Flipboard and 60fps

What is Flipboard

Flipboard (https://flipboard.com/ ) has been around for a while now. It appeared around the time of the first iPad and was the first app that I felt really showed the potential of this new medium. Craig Mod (http://craigmod.com/) was the lead designer and the interface reflected his innovative approach and love of clean and almost zen like UI. It came as a revelation to me that content could be ‘scrapped’ from various sources, stripped of its design and aggregated to create an entirely new experience. The native iPad app was a thing of beauty and a joy to use, but over the years other personalised content ‘magazine’ apps have appeared and although they are less beautiful the content they deliver seems more appropriate to me. However I still go back to Flipboard and its shareable magazine idea has become something that I have started to use. Technology savvy teachers are big fans of it for collating content that they can share with pupils.

The ultimate selling point for Flipboard is its beautiful and slick UI and the big challenge for the engineering team is creating a web interface that can reflect this. So I was interested to read a blog post from them this weekend talking about the new mobile web interface they had developed. http://engineering.flipboard.com/2015/02/mobile-web/

The approach they have taken has caused a fair amount of controversy as they have ignored the Browser DOM completely and built the entire app within a <canvas> tag. So I should explain the previous sentence as its important to understand what the DOM actually is and why ignoring it is potentially bad.

DOM and <canvas>

Firstly all browsers use an open Document Object Model. This allows us to write HTML, use CSS and write javascript that (mostly) works cross-platform and is accessible by all. It was standardised by the Web Consortium and has gone through some major iterations as the web has developed. Its prime concern is making the internet available to all and to create a seamless experience for users no matter where or what they are using to access it. However what its not good for is creating high level animations and interactions that feel as fluid as native IOS or Android apps. This is where 60fps comes in and why the DOM was not good enough for Flipboard as they wanted the web app to feel like a native app. Scrolling and interactions had to be fast and fluid, something that can only happen with very high frame rates.

So Flipboard have ignored the DOM completely and built everything inside a <canvas> tag in the webpage. The canvas tag is part of the HTML5 specification and was created to allow fast rendering of graphics, text and animation. The problem is anything inside the canvas  is invisible to the browser. This means that none of it is accessible or indeed indexible, effectively hidden from view from the rest of the internet. This is the trade-off that Flipboard has decided to make to ensure they get the slick content animations they wanted. John Gruber (well know Apple fan boy and IOS proponent) wrote a post  http://daringfireball.net/   that applauds the Flipboard team, essentially blaming the WC3 for their lack of foresight and being old stick in the muds when it comes to supporting the new whizzy animations that native IOS apps enjoy as standard.

Missing the point

The web is the ultimate democracy but this is in danger. The WC3 have not set the standards for a small set of the digital elite. The standards are there to support users all over the world not matter what their connection speed or device. They are design to support Blind users and users with poor motor skills. If there was a Maslow’s hierarchy of needs for the internet then 60fps animation would not be at the bottom of the pyramid. But the Flipboard engineering team used this as they core development principle. To be fair to Flipboard they have said that they will now start working on accessibility but if you have to reverse engineer it back into the browser then you have not built it correctly in the first place. It reminds me of trying to build accessibility into Adobe Flash applications during the bad old days,  as it never worked. The reason I liked Flipboard was its content relevance, however over the years I have found other apps who seem to be able to dynamically deliver more appropriate and timely content to me. I’m a big fan of Zite and this is my goto content aggregator these days. Not because it has flashy animation at 60fps but because it works and its ironic that its now owned by Flipboard.

So by all means care about creating beautiful and well crafted animated UI’s, but in the end the content and accessibility are the important things and indeed what a web service will live or die by.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s