Telegram recently released a new feature - Instant View, I looked at the oficial blog, thought it would be worthy a blog to say something about it. Why? Beacuse Facebook launched Instant Articles and Google launched AMP, both in last year and for the same purpose - to offer user a smoother experience. In this article I'll do some simple comparison, and there may be some mistake or too superficial, sorry for that.
2014, Facebook launched Paper, a reading app with mind-blowing UE, well I didn't try that. It got attention all over the world, but mainly from us developers or designers, maybe real users don't seem to care much, I think. June 2016, Facebook stopped Paper.
Well on the other hand, the idea of immersive(don't know if this is the right word) reading, continued in Facebook App, reborned to Instant Articles, which was launched at June 2015
Technical implementation is something like this
In detail, publisher needs to add specific classname & json script to enable certian component, https://developers.facebook.com/docs/instant-articles/guides/articlecreate.
Here is an example from its homepage, we can see classname starting with
'op-*', and video & ads & GA components wrapped in
<figure>(to be honest , it is kind of strange to use
<figure> I think)。It looks complicated but Facebook offers writing tools, so it shouldn't be a problem, I didn't try that though.
<!doctype html> <html lang="en" prefix="op: http://media.facebook.com/op#"> <head> <meta charset="utf-8"> <link rel="canonical" href="http://example.com/article.html"> <meta property="op:markup_version" content="v1.0"> </head> <body> <article> <header> <!-- The title and subtitle shown in your Instant Article --> <h1>Article Title</h1> <h2>Article Subtitle</h2> <!-- The date and time when your article was originally published --> <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time> <!-- The date and time when your article was last updated --> <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> <!-- The authors of your article --> <address> <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a> Brandon is a avid zombie hunter. </address> <address> <a>TR Vishwanath</a> Vish is a scholar and a gentleman. </address> <!-- The cover image shown inside your article --> <figure> <img src="http://mydomain.com/path/to/img.jpg" /> <figcaption>This image is amazing</figcaption> </figure> <!-- A kicker for your article --> <h3 class="op-kicker"> This is a kicker </h3> </header> <!-- Article body goes here --> <!-- Body text for your article --> <p> Article content </p> <!-- A video within your article --> <figure> <video> <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" /> </video> </figure> <!-- An ad within your article --> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe> </figure> <!-- Analytics code for your article --> <figure class="op-tracker"> <iframe src="" hidden></iframe> </figure> <footer> <!-- Credits for your article --> <aside>Acknowledgements</aside> <!-- Copyright details for your article --> <small>Legal notes</small> </footer> </article> </body> </html>
Just check the
<head/> and it is done.
And yes, it is very fast.
Google AMP is a solution offered by Google, which started at mid-late 2015, it is said to be the rival of Instant Article. Its purpose is to make news page displayed faster, by applying some strict rules, details as follows:
This is the same as Facebook Instant Article, but AMP is more complicated & loose, here is an official example: https://ampbyexample.com/introduction/hello_world/
from the code above, we can see a few things:
<amp-img>, with explicit with & height declaration
In a word, amp narrows down the usage of html, by making more strict, it removes some barriers which make webpage slow. amp library js it the core of this, it prevents unnecessary drawing, by showing only visible parts(first view), this is why height&width are needed at
<amp-img>, without it AMP cannot do calculations until images are loaded.
AMP page will be cached by Google if it passes validator, that said what users access are cache from Google CDN, instead of original version.
There will be a Thunder mark for AMP pages in Google search result, just like Facebook Instant Article (just see the gif at the beginning). While the most violent & delicious one is that Google possibly increases the rank of amp-supported pages. wow.
Currently AMP mainly focuses on news and blogs, but I also saw amp pages from review sites.
Instant View looks similar to Instant Articles both from its title & UE. In Telegram, there will be an 'Instant View' mark, to the links which instant view supports, tap it and you will get a native display.
Currently Instant View supports Medium.com, TechCrunch.com and Telegram's telegra.ph. And there still lacks some technical introductions, but since all Medium pages and user-created telegraph pages are support, it is reasonable to assume that publisher are not rquired to create a special version of his contents。
In technical details, it should be similar to Instant Articles, but Instant View does more, it parses the html tags and do the rendering. I created some Medium pages with dynamic widgets, such as jsfiddle iframe, and they cannot be treated as Instant View, which means Instant View supports only static contents, like images & code blocks.
|aspect||Instant Articles||AMP||Instant View||personal opinion|
|UE boost||★★★★★||★★★★||★★★★★||only AMP is pure web solution, but didn't expect too much on web, so give it a four-star|
|publisher extra cost||★★||★★★||★★★★★||only Instant View needs no extra work|
|publisher freedom||★★||★★★★||★★★||AMP is web-based, it is open|
|publisher revenue||?||★★★||?||not sure, from news Instant Articles seems to be struggling, hard to tell if they are plus for revenu. while Google SEO offers real advantages.|
|technical||★★||★★★★||★★★||I'm js-er, not very clear|
|future||★||★★||★★||none of them is promising|
In my personal opinion, if every platform offers a standard, web no longer exists. I understand the good willing from Facebook, to offer users a better reading experience, but by means of cache & better organizing of codes, webview can do much better. As an app, it should provide a fast-boosted webview environment, rather than enforce publishers to create another version of contents, by changing rules. This is why I like Instant View better than Instan Articles.
Instant View is a publisher-friendly solution, Telegram does the dirty work and publisher just keep publishing, not offensive. I'm looking forward to future Instant View, but this is not a adoptable-by-all solution, so only 2-star.