or Connect
AppleInsider › Forums › General › General Discussion › Apple revamps its public website using HTML5
New Posts  All Forums:Forum Nav:

Apple revamps its public website using HTML5

post #1 of 86
Thread Starter 
Apple has relaunched its entire website with a new design using HTML5, adding a darker, glossy navigation bar and speedy new animated page layouts for Mac and iPod pages.

The redesign officially upgrades the site from "HTML 4.01 Transitional" to the latest HTML5, enabling such elements as a dynamically resized search field in the navigation bar that enlarges to accommodate search terms, as well as adding richer support for mobile features.

The new Mac section debuts a new "product slider" interface, which animates a series of icons depicting the families of Mac products, Apple's desktop applications, accessories, and server related products.

A similarly animated iPod section presents iPod models and accessories, as well as a panel of "iTunes and more," which includes links to download iTunes, purchase gift cards, and special sections for Nike+iPod, (Product)RED, MobileMe, and headphones.



Apple goes HTML5

Apple has been a big proponent of HTML5, with the company's supported WebKit open source project not only working to follow the specification but actively contributing toward it as well.

Last week, the World Wide Web Consortium (W3C) introduced a new HTML5 logo (depicted above) intended to promote visibility of the next generation of web technologies now being rolled out in modern browsers, using the "HTML5" brand to refer both to the HTML5 specification itself as well as serving as a "general-purpose visual identity for a broad set of open web technologies, including CSS, SVG, WOFF and others."

This announcement was received with scorn by many web purists who were upset that the public might be further confused by the semantic and technical blurring of simplified branding, rather than knowing the actual role played by each different web technology. This prompted the W3C to restate that the new logo "represents HTML5, the cornerstone for modern Web applications."

HTML5?

Within the same news cycle, the Web Hypertext Application Technology Working Group (WHATWG), a team designated by the W3C to maintain the emerging HTML5 specification, announced that it would now be referring to HTML5 as simply HTML, because the specification would now be regarded as a "living specification" that constantly evolves, rather than being a designated version number going through a much more formal process of drafts and recommendations.

This change erupted in more controversy from those who saw it as either a feud between the two groups or a simply a confusing miscommunication on overall strategy. However, the HTML5 brand actually has little to do with the way HTML is presented as a specification.

Additionally, those complaining about the lack of an ongoing version number seem to assume that the WHATWG is compiling a specification that browser makers follow. In reality, such an effort would fail just as many other attempts by standards bodies to tell the industry how to work have, including the ISO's Open Systems Interconnection (OSI) protocol suite (rejected in favor of the industry lead and more practical TCP/IP) or the W3C's own XHTML 2.0, an intellectual exercise maintained between 2002 and 2009 and virtually ignored by browser makers.

When the W3C started over to create a more practical, precise and functional new version of HTML, it began working closely with Apple, Mozilla, Opera, Google, Microsoft and the parties to make sure the standard reflected what vendors wanted to and were willing to do, rather than trying to mandate impractical ideas that would never be supported by the browsers people actually used.



It's Already Been Broughten!

The result, HTML5, was originally scheduled to publish a "candidate recommendation" by 2012, with at least two "100% complete and fully interoperable implementations." Ian Hickson, editor of the HTML5 specification, once said HTML5 was likely to be finished around 2022. These dates were frequently used by opponents of portions of HTML5, including Flash maker Adobe, to create fear, uncertainty and doubt about whether HTML5 would ever be completed, with the suggestion that everyone should just remain content with using Flash to build dynamic content.

The new shift in viewing HTML5 as simply the latest iteration of HTML means there's no reason to wait around for perfect compliance from every browser, something that still has yet to happen for even the decade old HTML 4.01. Instead, it motivates browser makers and web developers to use the specification that now exists to build real products, constantly evolving both along with the specification to deliver the best technologies as they become available.

In addition to redesigning its public site in HTML5, Apple has also used HTML5 and related technologies to craft native appearing web platforms for its mobile devices (including PastryKit and AdLib), create a self contained mobile ad experience platform (iAd), construct desktop-class web apps for MobileMe (using SproutCore), build dynamic web apps for its retail operations (via Gianduia), and create interactive iTunes bonus content that can be packaged with "LP" albums and movie "Extras".
post #2 of 86
And yet not a single page passes HTML5 validation... I guess this is "standards compliant" right?
post #3 of 86
Go Apple! This is an awesome way to show how powerful HTML5 implementation can be. Proper execution the Apple way.
post #4 of 86
Yeah, I love how the nav bar at apple.com now floats below the background and mashes into the "points of interests" launch divs. #HTML5UpdateFAIL

update: As expected, Apple's web staff have fixed the problem (or does Steve do server side work, too). A reload of the page now renders correctly. Just surprising how that glitch got put into production when making their HTML5 debut.
post #5 of 86
so with no version there is no way to ever know what browser supports what or if your site will work with one version of a browser or not. So it will be exactly like the disaster we have today.

Rather than fix the problem by versioning the spec, like all specs are versioned, and moving html to a strict format like xhtml, they do nothing. Browser makers will have nothing to test, and nothing to aim for. So we will realistically have a situation worse than today. Every browser will support HTML while no one will support anything and there will be no way to tell what browser supports what.

What a joke. A standard with no versioning is not a standard, it is a disaster.
post #6 of 86
Quote:
Originally Posted by blurpbleepbloop View Post

Yeah, I love how the nav bar at apple.com now floats below the background and mashes into the "points of interests" launch divs. #HTML5UpdateFAIL

Interesting... this does not happen when I open the same page in firefox or chrome.
post #7 of 86
So this is what the NC data farm was for...
Emailing video from iPhone to Apple TV , sort of..
Reply
Emailing video from iPhone to Apple TV , sort of..
Reply
post #8 of 86
Quote:
Originally Posted by blurpbleepbloop View Post

Yeah, I love how the nav bar at apple.com now floats below the background and mashes into the "points of interests" launch divs. #HTML5UpdateFAIL

No problems here with Safari viewing the site, it looks great.
post #9 of 86
Not completely. If you look:

the meta tags are self-enclosed which is an xhtml requirement.

HTML 5 eliminates them.

Why? It's a Void Element.

http://www.w3.org/TR/html-markup/meta.name.html

Quote:
Tag omission #
The meta element is a void element. A meta element must have a start tag but must not have an end tag.

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The following is a complete list of the void elements in HTML:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Therefore:

This:

Code:


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Author" content="Apple Inc." />
<meta name="viewport" content="width=1024" />



Should be this:

Code:


<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Author" content="Apple Inc.">
<meta name="viewport" content="width=1024">



Also the XHTML Namespace gives a clue:

Code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">



In straight HTML5 [now just HTML] with language set to US English and the xml language attribute:

Code:


<html xml:lang="en-US" lang="en-US">



The added XHTML Namespace is definitely for a fall back. If you view this in Firefox 3.6.13 the Snappy Menu action of selecting the Search Text field doesn't work.

So instead of serving completely separate versions of the Site [One for XHTML and the other for HTML 5] they are serving a mixed site that has functionality only available for the HTML 5 version when the Client supports it. That's a browser header sniff there.
post #10 of 86
I know it is just a minor change visually, but I hated the old look. This is much nicer. I don't know the first thing about website creation so I will not comment on the code, but to me it works fine and looks great.
post #11 of 86
Quote:
Originally Posted by andyljohnson View Post

I know it is just a minor change visually, but I hated the old look. This is much nicer. I don't know the first thing about website creation so I will not comment on the code, but to me it works fine and looks great.

It's definitely slick. The menus flying in and expand/contract search field is cool.
post #12 of 86
Quote:
Originally Posted by andyljohnson View Post

I know it is just a minor change visually, but I hated the old look. This is much nicer. I don't know the first thing about website creation so I will not comment on the code, but to me it works fine and looks great.

They changed the menu bar and the product page highlight areas. That's it.

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply
post #13 of 86
Quote:
Originally Posted by Tallest Skil View Post

They changed the menu bar and the product page highlight areas. That's it.

If you select Mac or iPod you see the reorganization controls up top.

It's a transitional move to an all HTML 5 site.

For instance, http://www.apple.com/pro/

It's still the older look.
post #14 of 86
Quote:
Originally Posted by mdriftmeyer View Post

If you select Mac or iPod you see the reorganization controls up top.

That's what I said. Given that's all they changed, hating the "old look" means he hates the current site as well.

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply
post #15 of 86
Quote:
Originally Posted by blurpbleepbloop View Post

Yeah, I love how the nav bar at apple.com now floats below the background and mashes into the "points of interests" launch divs. #HTML5UpdateFAIL

Not on safari, chrome, firefox, camino or opera it doesn't - no rendering issues here at all.
post #16 of 86
Quote:
Originally Posted by bullhead View Post

so with no version there is no way to ever know what browser supports what or if your site will work with one version of a browser or not. So it will be exactly like the disaster we have today.

Rather than fix the problem by versioning the spec, like all specs are versioned, and moving html to a strict format like xhtml, they do nothing. Browser makers will have nothing to test, and nothing to aim for. So we will realistically have a situation worse than today. Every browser will support HTML while no one will support anything and there will be no way to tell what browser supports what.

What a joke. A standard with no versioning is not a standard, it is a disaster.

It is not yet a standard, not ratified and still a work in progress. You're criticising a draft proposal.
post #17 of 86
Quote:
Originally Posted by Tallest Skil View Post

That's what I said. Given that's all they changed, hating the "old look" means he hates the current site as well.

No, that's not what it means. It means he likes the direction it's headed and from what is visible, it's slick as he hated the older look.

Unless you want to split hairs and discuss degrees of gray, that's your prerogative. He likes the Mac section and hates the Pro Section.

Either way, the end result isn't that he hates the current site.

In 5 days the entire site will have the transition look. Should we wait until there is no area with any of the old look for you to concur that he no longer hates what he can't hate?
post #18 of 86
Quote:
Originally Posted by acorn.alert View Post

And yet not a single page passes HTML5 validation... I guess this is "standards compliant" right?

Do you know anything. at all. about web development?

How can you ratify to a standard which still isn't ratified.

How can you rely entirely on html5 when browser support isn't universal.

You need to tweak, add haxies, fixes, call it what you will in order to ensure a consistent viewing experience across browsers. This is down to browser developers, not web developers.

Your comment is basically naive.
post #19 of 86
The article implies that there will not be a clear ratified standard in the future, only a murky html that is in constant flux. There needs to be a defined html5 standard to work towards.

Quote:
Originally Posted by nkhm View Post

It is not yet a standard, not ratified and still a work in progress. You're criticising a draft proposal.
post #20 of 86
The new design is very similar to the Mac App Store. The background image is exactly the same.
post #21 of 86
What software can be used to create HTML5 web sites?
post #22 of 86
Quote:
Originally Posted by bdkennedy1 View Post

What software can be used to create HTML5 web sites?

TextEdit.

Anything that you can use to write text can make HTML files. I do all of my coding in TextEdit because of its clarity and simplicity.

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply
post #23 of 86
Quote:
Originally Posted by andyljohnson View Post

I know it is just a minor change visually, but I hated the old look. This is much nicer. I don't know the first thing about website creation so I will not comment on the code, but to me it works fine and looks great.

All that matters.
post #24 of 86
Quote:
Originally Posted by Tallest Skil View Post

That's what I said. Given that's all they changed, hating the "old look" means he hates the current site as well.

Just shut up. All you ever do is make this ^ exact type of childish argumentative post. It's old. Knock it off.
post #25 of 86
Quote:
Originally Posted by mdriftmeyer View Post

No, that's not what it means. It means he likes the direction it's headed and from what is visible, it's slick as he hated the older look.

Unless you want to split hairs and discuss degrees of gray, that's your prerogative. He likes the Mac section and hates the Pro Section.

Either way, the end result isn't that he hates the current site.

In 5 days the entire site will have the transition look. Should we wait until there is no area with any of the old look for you to concur that he no longer hates what he can't hate?

Thats way too many sentences in response to this flame-baiting nonsense spewer.
post #26 of 86
.....
post #27 of 86
Quote:
Originally Posted by bdkennedy1 View Post

What software can be used to create HTML5 web sites?

I hope Apple is working on the next iWeb as we speak - full HTML5.

WONDERFUL!
post #28 of 86
Quote:
Originally Posted by nkhm View Post

Not on safari, chrome, firefox, camino or opera it doesn't - no rendering issues here at all.

Really? Your FF works fine? FF on my PC at work is having an awful time of it. No image at all on the apple.com home page, just a bit empty grey square. And I get this lovely rendition of the MAC page. So they revamped their store so it only works on Safari?? That'll increase sales.


post #29 of 86
It looks like the navigation bar has different animations to no animation when written. On Store page it just appears. On the iPad page it appears from the bottom. On Startpage it appears from the top. Purposeful or some oversight?

I do like the new way the Mac and iPod page icons appears. I never liked the scroll bar to find products within each of those categories. Is that animation mainly JS?
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
post #30 of 86
Now if they could just rework iWeb to support HTML 5!
post #31 of 86
Quote:
Originally Posted by mdriftmeyer View Post

Not completely. If you look:

the meta tags are self-enclosed which is an xhtml requirement.

HTML 5 eliminates them.

Why? It's a Void Element.

http://www.w3.org/TR/html-markup/meta.name.html



Therefore:

This:

Code:


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Author" content="Apple Inc." />
<meta name="viewport" content="width=1024" />



Should be this:

Code:


<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Author" content="Apple Inc.">
<meta name="viewport" content="width=1024">



Also the XHTML Namespace gives a clue:

Code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">



In straight HTML5 [now just HTML] with language set to US English and the xml language attribute:

Code:


<html xml:lang="en-US" lang="en-US">



The added XHTML Namespace is definitely for a fall back. If you view this in Firefox 3.6.13 the Snappy Menu action of selecting the Search Text field doesn't work.

So instead of serving completely separate versions of the Site [One for XHTML and the other for HTML 5] they are serving a mixed site that has functionality only available for the HTML 5 version when the Client supports it. That's a browser header sniff there.

Thanks, good info to know.
Enjoying the new Mac Pro ... it's smokin'
Been using Apple since Apple ][ - Long on AAPL so biased
nMac Pro 6 Core, MacBookPro i7, MacBookPro i5, iPhones 5 and 5s, iPad Air, 2013 Mac mini.
Reply
Enjoying the new Mac Pro ... it's smokin'
Been using Apple since Apple ][ - Long on AAPL so biased
nMac Pro 6 Core, MacBookPro i7, MacBookPro i5, iPhones 5 and 5s, iPad Air, 2013 Mac mini.
Reply
post #32 of 86
Quote:
Originally Posted by bdkennedy1 View Post

What software can be used to create HTML5 web sites?

You hit the nail on the head ... iWeb 11 and iWeb Pro please! Is anyone listening at Apple?
Enjoying the new Mac Pro ... it's smokin'
Been using Apple since Apple ][ - Long on AAPL so biased
nMac Pro 6 Core, MacBookPro i7, MacBookPro i5, iPhones 5 and 5s, iPad Air, 2013 Mac mini.
Reply
Enjoying the new Mac Pro ... it's smokin'
Been using Apple since Apple ][ - Long on AAPL so biased
nMac Pro 6 Core, MacBookPro i7, MacBookPro i5, iPhones 5 and 5s, iPad Air, 2013 Mac mini.
Reply
post #33 of 86
Quote:
Originally Posted by pmz View Post

Just shut up. All you ever do is make this ^ exact type of childish argumentative post. It's old. Knock it off.



Ignore list if you don't want to have arguments about meanings of words, please.

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply

Originally posted by Relic

...those little naked weirdos are going to get me investigated.
Reply
post #34 of 86
Quote:
Originally Posted by johnmcboston View Post

Really? Your FF works fine? FF on my PC at work is having an awful time of it. No image at all on the apple.com home page, just a bit empty grey square. And I get this lovely rendition of the MAC page. So they revamped their store so it only works on Safari?? That'll increase sales.



Restart your browser and/ or PC. You're probably cached.
post #35 of 86
Quote:
Originally Posted by johnmcboston View Post

Really? Your FF works fine? FF on my PC at work is having an awful time of it. No image at all on the apple.com home page, just a bit empty grey square. And I get this lovely rendition of the MAC page. So they revamped their store so it only works on Safari?? That'll increase sales.

Someone tells you it works fine for them in FF and then you try and say it only works in Safari... real nice...

BTW - it works fine in FF for me.
na na na na na...
Reply
na na na na na...
Reply
post #36 of 86
Anyone else notice the AppleTV shows up under iPod? Hint at the App Store coming soon?
post #37 of 86
deleted
post #38 of 86
Quote:
Originally Posted by johnmcboston View Post

Really? Your FF works fine? FF on my PC at work is having an awful time of it. No image at all on the apple.com home page, just a bit empty grey square. And I get this lovely rendition of the MAC page. So they revamped their store so it only works on Safari?? That'll increase sales.



Looks to me like you have a caching issue. Your screenshot has the "mac, applications, accessories, server" menu bar words in the wrong order than they are now, the horizontal slider doesn't exist any more and your top menu is the old style.
post #39 of 86
Quote:
Originally Posted by Tallest Skil View Post

TextEdit. I do all of my coding in TextEdit because of its clarity and simplicity.


Got to love the auto completion, colored syntax and the auto indent. Not to mention the code look up feature.

Life is too short to drink bad coffee.

Reply

Life is too short to drink bad coffee.

Reply
post #40 of 86
the new design must really be something for the 0.00000001% of people who realize it is an implementation of HTML5.

for the rest of us...slightly new layout.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: General Discussion
AppleInsider › Forums › General › General Discussion › Apple revamps its public website using HTML5