Apple revamps website with HTML5

Apple_navbar

Apple launched a new fresh look to their home page this morning, which replaced all of the existing pages with an updated UI and HTML5.

In recent years, Apple has been on the forefront of the battle over Adobe Flash and HTML5, never crumbling to consumers' demands to allow Flash on the iPhone, iPod touch and iPad. Apple has been very stern about supporting Flash on iOS, claiming the software decreases battery life.

So today, the launch of HTML5 on Apple.com is a very important stepping stone in their support of a flash-free website. The new improvements come with an updated navigation bar. The new darker colours include an expandable search bar to compensate for longer search terms.

search_toggle2

Another noticeable improvement is the product slider. Apple has since ditched the horizontal slider bar and replaced it with animated tabs. This new animation can been seen on the Mac and iPod, and the iTunes tab now includes a new transition in page loading.

The new website looks much better and even feels faster. The website even uses HTML5 video to display their product promotional videos. Note that this site does require a supported HTML5 browser.

apple_html5player

Report a problem with article
Previous Story

Microsoft: 2 million Windows Phone 7 devices sold, app store support soars

Next Story

Android 3.0 SDK preview released, shown off by Google

68 Comments

Commenting is disabled on this article.

Just tried to watch a product video. "You must install QuickTime to view this video"

Sorry, but that's unacceptable. You can't be behind a plugin-less browsing experience, and then require plugins on your company website. Pick a side, Apple...

When they finally drop Quicktime so I can watch trailers and listen to song previews it'll be a newsworthy update for me. This is not.

Can't view the video portions in FF4 and IE9 ... but it looks great in Chrome 9 ... if the videos are using H.264, and Google is dropping support for that codec in future releases of Chrome and moving to WebM (and firefox only supports WebM) ... my question is why doesn't IE9 play the videos while Chrome does? This whole HTML5 thing is getting pretty ridiculous. One shouldn't have to worry about which video codec the HTML5 implementation in their browser supports on which website. It defeats the whole point of "standards." At least Flash worked on every site, with every browser, on every os, every time! Support all three video codecs in your HTML5 implementations or everyone choose a single one and go with that. Why is this so hard?

Lol, it IS using Quicktime. Right click on the video and you'll see that it is running QT.

I even loaded it up into IE and it told me I was required to download quicktime.
Which is why I love FF as I don't even have to have QT installed I just run the plugin for the browser.

Morphine-X said,
Lol, it IS using Quicktime. Right click on the video and you'll see that it is running QT.

I even loaded it up into IE and it told me I was required to download quicktime.
Which is why I love FF as I don't even have to have QT installed I just run the plugin for the browser.


View source and you'll see that even though it's using QuickTime it is in fact an html 5 video element...

FusionOpz said,

View source and you'll see that even though it's using QuickTime it is in fact an html 5 video element...
I really should learn to post these types of comments when I am actually at a computer.. It's not using HTML 5 video element...

FusionOpz said,
I really should learn to post these types of comments when I am actually at a computer.. It's not using HTML 5 video element...
Yeah, it's mobile interface might in fact be using some sort of HTML 5 for it but the embeded source within an actual PC/Mac browser is infact still quicktime.

It's pretty nice looking; so I order a MacPro! With all the fixins' it will cost me over $15,000. That is a lot of money.

Benjy91 said,
Funny how the HTML 5 doesnt work with IE9 Beta.

It's because they're not using HTML 5, they're using -webkit-transform and -webkit-animation CSS extensions.

JonathanMarston said,

It's because they're not using HTML 5, they're using -webkit-transform and -webkit-animation CSS extensions.

And is the CSS 3 spec even final yet? What about all the -moz CSS extensions.

FusionOpz said,

And is the CSS 3 spec even final yet? What about all the -moz CSS extensions.

>.< edited this too late... I hate not having my sub...

Anyways...
it's not apple specific since those -webkit- CSS "extensions" are also in every other webkit based browser... e.g. Chrome...

FusionOpz said,
>.< edited this too late... I hate not having my sub...

Anyways...
it's not apple specific since those -webkit- CSS "extensions" are also in every other webkit based browser... e.g. Chrome...

It is Apple-specific because Apple designed and submitted the spec, and implemented it in Webkit themselves. There has been no work done on it beyond the first working draft submitted by Apple, as can be seen here: http://www.w3.org/TR/css3-animations/. This is no different from what Microsoft did back in the IE4/5 days except Apple wrote up a spec and sent it to the W3C.

Sam said,
Do you have a benchmark for it feeling "faster"?

Thanks to all the new animations, it actually loads much more slowly on Chrome 8 vs IE9 beta on my computer...

Wow! This is going to change everything - websites will never be the same again. Wow. Wow. Wow. It's just so magical and revolutionary. Wowwwwwwwwwww AWESOMMEMJEJEEMEM11!!!!1!!

excalpius said,
+100 for sarcasm

Nah actually not... I've read better jokes on Apple.
Trust me, I might be an Apple fan, but I can laugh heartly over jokes on them...

GS:win

All the videos are Quicktime, and they're just using XHTML and Apple-created CSS specifications that only work on webkit browsers.

The title should read: "Apple continues to side-step the W3C by pushing Webkit extensions on their website"

webm is open source and they recently submitted a spec for it. webm is in chrome 8, firefox 4 and opera 11. chrome will be dropping h264 so only safari and ie9 will have h264 support built-in. therefore apple should either replace h264 with webm or add webm too for their website.

torrentthief said,
they are using h264 on this: http://www.apple.com/ipad/gallery/ads.html

works in chrome 8 but not in Firefox 4 beta 10 as firefox has WebM built-in not h264. Shame apple hasn't supported WebM on their site


why so? webm is private google's standard, just like windows media was. h.264 is general and common. that's just mozilla's devs fault they did not support it.

coth said,

why so? webm is private google's standard, just like windows media was. h.264 is general and common. that's just mozilla's devs fault they did not support it.

WebM is open licensed, and royalty free forever, the standard is currently closed. Anyone can encode and decode WebM forever for free. Edit: it's nothing like windows media.

H264 is not open licensed, will not be royalty free forever (and currently isn't if you are encoding video above a certain threshold), but the standard is open. In reality its not even free to decode, as device manufacturers and service providers do pay a royalty, a cost which is then passed on to you.

You are both wrong, HTML5 doesn't specify any codecs at all.

Currently widely supported are WebM, H264 and Theora.

Ahmadinejad said,
You are both wrong, HTML5 doesn't specify any codecs at all.

Currently widely supported are WebM, H264 and Theora.


This.
With browsers bitching may I add...

GS:win

dotf said,
do they have browser sniffers to keep IE9 beta users out?

I have to agree - it's silly to have to switch browsers just to visit Apple's website - it's as if they don't want my money.

dotf said,
do they have browser sniffers to keep IE9 beta users out?

No. And transitions look better in IE9 than in FF 3.6 (but I suppose FF4 renders them well too)

Jan said,

I have to agree - it's silly to have to switch browsers just to visit Apple's website - it's as if they don't want my money.


Did you actually try it?
Works fine on my end... >_>

tzzz...

GS:win

dotf said,
do they have browser sniffers to keep IE9 beta users out?

Works fine in chrome for me, but IE9 asked me to use quicktime when I went on the site, very slow speeds and the videos didn't show up. Firefox 4 beta works well but still uses Quicktime.

Would be nice if the nav-bar was semi-transparent - so you could see the texture of the background behind it.

Ahmadinejad said,
More accurately: Apple revamps website with CSS3 and HTML5 Video

Even more accurately: Apple revamps website with stuttering, non full screen HTML5 video. 8)

excalpius said,

Even more accurately: Apple revamps website with stuttering, non full screen HTML5 video. 8)

Plays fine on my Mac. No stuttering at all. No fullscreen tho.
Oh and my Mac is 3 years old.

giantsnyy said,

Plays fine on my Mac. No stuttering at all.

So Apple's traded a website that was able to be watched cleanly by 100% of computer users worldwide to one that can be viewed smoothly by 5%...smooooth move, Apple. 8P

giantsnyy said,

Plays fine on my Mac. No stuttering at all. No fullscreen tho.
Oh and my Mac is 3 years old.

Same experience for me, but on a 2007 iMac.

excalpius said,

Even more accurately: Apple revamps website with stuttering, non full screen HTML5 video. 8)

Videos don't even load for me in IE9.

Fail.

Ently said,

An ancient technology used in the building of the pyramids.

Please add this to Google's definition list. This should be taught in schools.

OceanMotion said,
No more quicktime, there is a god!

What do you mean no more Quicktime?

How can you play all the Movie Trailers withouit Quicktime installed?

gate1975mlm said,

What do you mean no more Quicktime?

How can you play all the Movie Trailers withouit Quicktime installed?

Quick time alternative, and even though we never play .MOV files

thatguyandrew1992 said,

Scholars say the actual translation was lost thousands of years ago.

You and Frylock86 just made my day. HA. Good movie.

Videos won't full screen.
Videos stutter (Chrome dev build 10.x).
Navigation bar across the top looks like it was designed in the early 1990s.

One vote for Bleh!

excalpius said,
Videos won't full screen.
Videos stutter (Chrome dev build 10.x).
Navigation bar across the top looks like it was designed in the early 1990s.

One vote for Bleh!

Wasn't sluggish for me at all. Also running the same build of Chrome, but on a Mac.