Jun
05
Sports Illustrated Magazine – HTML5
By
A collaboration between TWF, Google, and SI for the Google I/O 2010 Keynote Presentation.
Narrated by SI Editor, Terry McDonell
Developed in HTML5 using:
CSS Animation
Embedded Fonts
Drag & Drop
HTML5 Video
Geolocation
Web Workers
App Cache
Web DB
Feeds
Google Maps API
Google Buzz API
Rails
Lazy Loading Pages
(And no Flash)
Duration : 0:3:22
@ …
@Elroyisspaceboyzoom I was thinking the same thing. I see the inhouse Time inc staff adopting a CMS for all magazine sites & apps. I wonder if @thewonderfactoryny will be setting it up for them
Wow! So hope this …
Wow! So hope this kind of interface becomes the norm for magazines. Sadly I am not interested in sport but if my favourite tech mags are published like this for the ipad… i’m laughing… and even enjoying the ads!?!
HUH – i want to see …
HUH – i want to see REAL – on a tablet, fingers no mouse… not over slick , just REAL without all the prepped vaporware feel WF does. Its been months of this and showcase videos are still what we get? C’mon guys. We :Love SI. Get ‘er done.
@ …
@fishdashtrackdotcom I agree with you, anyway this is a nice app.
Most epic voice ever
Most epic voice ever
hopefully we reach …
hopefully we reach paper-free media in my lifetime. this will probably help
@ …
@fishdashtrackdotcom Every article uses the new HTML5 elements for structure: section, article, aside, et al. We’re also using drag and drop (both built-in and custom), geolocation, web workers, video, app cache, and a lot of neat tricks to speed everything up. The app performs significantly faster in HTML5 because we don’t have to rely on Javascript to animate objects or Flash to embed beautiful typography.
What specifically …
What specifically about this app is HTML5? At first glance there is nothing here that couldn’t be done before HTML5. What parts of HTML5 are being displayed?
This is a great …
This is a great example of HTML5 and “print media” from Sports Illustrated. Showing the intersection of HTML5 and print media content is much needed.
Reading a printed magazine is a luxury, it can be a non-multitasking refuge from our online selves. Soon, the content of the magazine industry will be opposite of static; it will be multimedia and links to other places. All on and blinking. Searchable.
I’ll take my print subscription at home for refuge, and add online for reference.
where?
where?
@Nocturnox65 you …
@Nocturnox65 you are a kid really?
Is this a web site …
Is this a web site meant to run in a browser, or is it an app? I’m assuming the former because he says it’s for “laptops, netbooks, and tablets”. And why are desktops left out?
Preview of HTML5 …
Preview of HTML5 version of Sports Illustrated for the iPad
Flash ruleeeess ! …
Flash ruleeeess ! HTML 5 is hard to lean !
-
-
I dint like the …
I dint like the narrattors voice for this video.
@Nocturnox65 You …
@Nocturnox65 You mean like the billions of downloads from the iTunes Store?
really amazing
really amazing
this will fail cuz …
this will fail cuz noone pays for anything on the internet
Both a great video …
Both a great video in the way it’s done and presented. And, last but not least a great product!
or you can just buy …
or you can just buy the magazine…
How on earth would …
How on earth would they be able to populate content in a layout like this month to month in a cost effective manner. Will the magazine construction move from traditional layout to a web development project. It seems to nuanced for a CMS to handle.
cool!!
cool!!
It’s funny how the …
The Wonder Factory and SI doing their thang again.
It’s funny how the comments are focused (so far) on the awesomeness of the ads. Which is right I think. Will we see the ads get into the editorial photos for instance? No reason you cant make Shaq’s shoes clickable…
Furbe, we agree …
Furbe, we agree with you. The ability to create advertising that is USEFUL is one of the things that excites us the most about HTML5. Hopefully this work will inspire advertisers and their agencies to step up.
I think what I’m …
I think what I’m perhaps most excited about in that demo is the dynamic and interactive advertising. That camera ad really demonstrates where e-Commerce is going.