27 Sep 2007 10 am eastern

Say hello to web standards

There’s something new at Apple’s online store: web standards and accessibility.

Apple.com has never lacked for panache. It has always looked more stylish, more elegant, more beautifully designed than most business sites. The site’s combination of utility, seduction, and understated beauty is practically unique—in keeping with the company’s primary point of product differentiation.

But while its beauty and usability have always run ahead of the pack, its underlying source code has not always kept pace. Now the online Apple Store’s inside is as beautiful as its exterior—and as far ahead of the mainstream in web development as a company like Apple needs to be.

One day, all sites will be built like this. View Source for an inspiring glimpse of how semantic and accessible even a grid-based, image-intensive, pixel-perfect site can be.

And next time your boss, client, or IT director annoyingly proclaims that you can’t have great looks and good markup, point them at store.apple.com. Who knows? They might buy you an iPhone or MacBook as a token of thanks.

Opinions are no longer being solicited, but you can read the 101 comments that were shared before we closed the iron door.

[tags]apple, css, markup, accessibility, webstandards, jinabolton, aneventapart, aeasf07[/tags]

Filed under: Accessibility, An Event Apart, business, Design, Redesigns, San Francisco, Standards

106 Responses to “Say hello to web standards”

  1. Nate Klaiber said on

    The new apple store looks beautiful outside and under the hood. It doesn’t stop with the looks – the architecture and structure of everything makes the site easier to locate, browse, and search for just what you are looking for.

    This is a big move for the online store – and in perfect timing for the Christmas season. he.

    Again, congrats to Jina and the rest of the team.

  2. Paul D. said on

    I’m just waiting for Apple to announce Web Pro, a professional application that does for websites what Final Cut Pro does for filmmaking.

  3. Trevor Davis said on

    I noticed in the source code that they have star ratings for all of the staff picks that they have set to display: none;. When I removed that property, each product breaks out of their box. It’s interesting that they have that coded but not showing.

  4. Jeffrey Zeldman said on

    It doesn’t stop with the looks – the architecture and structure of everything makes the site easier to locate, browse, and search for just what you are looking for.

    Absolutely. But I’ve always found that to be true. One way I taught myself information architecture was by watching how Apple did it. And I’m still learning from what they do. For instance, they violate the ancient IA commandment about maintaining absolute navigational consistency from page to page and section to section. But this bothers no one, because the site’s structure is fluid and intuitive.

  5. Jay Selway said on

    No skip nav or accesskey?

  6. Stef A. Spijkerman said on
  7. Joe said on

    I’m not sure I totally agree. The main navigation has no text inside the anchor tags. When viewed without CSS, you get an empty list bullet.

    How does a text-only, or screen-reader pick up on their top navigation bar?

    Other than that, it looks pretty good so far.

  8. killerog said on

    What webstandards? It’s doctype isn’t even valid…

  9. Oliver said on

    does not validate. a big step ahead definitely, but hey, there are still a few teasers left over that could have been made into a list also. i’m not sure if i should be all that impressed.

  10. Jeffrey Zeldman said on

    What webstandards? It’s doctype isn’t even valid…

    It looks to my eye like correctly authored XHTML 1.0 Strict, atop which an incorrect HTML 4.01 DOCTYPE has been inserted via CMS. I would imagine that this DOCTYPE insertion occured post-launch, and that someone will speak to someone else about it soon.

    Little SNAFUs like that are almost inevitable when markup and CSS get updated in a major section of a huge site. They are especially inevitable when markup and CSS get updated on a large, highly visible public site.

    I don’t know, but I strongly suspect, that this will get fixed fairly quickly.

  11. Jay Selway said on
  12. Erwin Heiser said on

    While I absolutely love the redesign, as far as web standards there’s still plenty of room for improvement. The site does not validate but the fixes for that are very minor, I’m sure they’ll be fixed in the days-weeks to come. Come on, how hard can it be to add an alt attribute to every image and to provide some acceskeys and skiplinks? Other than that a great job!

  13. Fyrd said on

    Hi web standards…bye styles?

    For some reason on Opera 9.2/Mac I just see unstyled content. Seems a bit early for CSS naked day. Anyone else seeing this? apple.com itself looks fine.

  14. Niels Matthijs said on

    While design-wise, the site is way too blocky for my liking (how many lines can one stand), ctrl + did the trick again. Some alignment probs in IE, some dubious semantics (p-tag with just an a-tag inside) and some rather obtrusive javascript here and there.

    But looking at the competition, they did a good job.

    Topic title made me go “apple zealots” though ;)

  15. Richard Earney said on

    Weren’t you helping Apple at one point?

  16. blake scarbrough said on

    Great design on all fronts. Even text sizing works decently and that is always a bit tricky with sites like these.
    For accessibility sake, I would probably suggest using a bit more descriptive alternate text on some images (for example: this image only says ‘iMac’ ).

    I also would like to hear why the empty anchor tags for the primary navigation. I imagine it is to make the site more accessible for browsers that don’t use the all of CSS files. Certainly an interesting approach.

  17. Jeffrey Zeldman said on

    @Jay Selway, see my comment of 11:24.

    @Richard Earney, at one point, some years back, a project was discussed, but we ended up not doing it. All the more reason it pleases me to see Apple hiring smart standardistas and letting them do their thing.

  18. killerog said on

    @Jeffrey: I think your right, because the source looks pretty neat when I scroll through it. Only a bit much whitespaces.

  19. Josh Stodola said on

    Beautiful markup my ass. There is enough whitespace in there to cover a football field. Seriously, the body tag is like 150 lines deep. That’s absurd. And what exactly is the purpose of this:

    [if this does not display, it's a completely empty script tag]

    //

    They didnt even use EM units for fonts, so the font size is totally fixed. Yeah, thats really accessible. How about the extensive use of alt=”” on many of their images. Oh yeah, gotta love that, it sure is nice to know that you are advocating this practice! But we all know you would never say anything bad about Apple… for some unknown reason (fetish?).

    And next time your boss, client, or IT director annoyingly proclaims that you can’t have great looks and good markup, point them at store.apple.com

    No thanks!

  20. Thomas Higginbotham said on

    It wouldn’t validate as XHTML 1.0 Strict either. One reason being the search form in the top right that contains inline elements as direct descendants of the form element. An easy fix but it caught my attention, nonetheless. The use of the CDATA comments suggests that the website was intentioned to be well-crafted XHTML despite the HTML doctype, but, when you have a lot of people working on something, you have to expect things like this to happen.

    Still, it’s nice to see a major website that’s catching up with the times.

  21. Jason Friesen said on

    @ Mr Stodola

    Steps in the right direction are still steps in the right direction. I’m tickled that we’re arguing over skiplinks and access keys and whitespace in the markup, instead of moaning over table-based layout and font tags. It just makes the “Why Web Standards” question much easier to sell to those who don’t care that it’s the Right Thing to Do.

  22. Vincent Murphy said on
  23. Simon Jessey said on

    I am glad I am not the only commenter who thinks this is all rather peculiar. The Apple Store website is a clean-looking site, but it is far from “beautiful” in my opinion. It’s a pretty basic layout with some pictures of some of Apple’s products in it. Understated perhaps, but not exactly seductive and certainly not “far ahead of the mainstream in web development” by any stretch of the imagination.

    Others have already pointed out the validation failures, so I see no point in repeating what is already obvious. Frankly, I’m rather puzzled by this blog post of yours, Jeffrey. Perhaps after the iPhone price cut debacle you thought Apple’s ego needed a good stroking?

  24. Jeffrey Zeldman said on

    @Josh Stodola, Markup your ass?

  25. Alan Bristow said on

    It may not validate, it may use some empty tags, it may have a wrong DOC type. But, thanks for highlighting it Jeffrey, it’s excellent to see such a prominent, large site go, essentially, Web standards, with content marked up to describe itself and CSS to make it look all Apple-y.

    Yum.

  26. tre said on

    @Simon Jessey, not agreeing with Zeldman’s post re: the apple store design doesn’t make it puzzling. it makes it an opinion you don’t agree with.

  27. Jeffrey Zeldman said on

    Empty tags are often the result of a legacy insert via CMS.

    The site isn’t perfect, I grant you. I trust that most people who are complaining about its flaws have had experience bringing standards-compliant design to large websites, and that their efforts to do so have always come off without a hitch.

    In my experience, though, unless you have control over all parts of the site, including the back-end, little things do break immediately after launch, and then months later. It takes constant vigilance (or enterprise-wide cooperation) to attain and keep perfection.

  28. Juan Pechiar said on

    Beautiful.

    Just missing body.background-color I believe.

  29. Jason Kratz said on

    Honestly what is the big deal about white space? Aside from making the document a bit harder to read I don’t see the issue. I have yet to see a dynamic site that doesn’t have the same problem.

  30. Event Horizon said on

    And next time your boss, client, or IT director annoyingly proclaims that you can’t have great looks and good markup, point them at store.apple.com. Who knows? They might buy you an iPhone or MacBook as a token of thanks.

    I might just try that! Fingers crossed…

  31. Mr. Strudel said on

    Is the veeeeeeery reliable accesskey so crucial?

  32. michael switzer said on

    why an invalid doctype, and unnecessary (for html 4) cdata tags around scripts?

    sure it’s an improvement, but it’s still not right.

  33. Keith LaFerriere said on

    Having had a great deal of experience trying to accomplish some modicum of standards-based development (creative direction role) at larger e-commerce firms like Staples, there are always things both personnel and software-related that will take you away from the goal kicking and screaming.

    I love the degree to which Apple’s store (and Jina and her team) have taken the site into new territory. I’m impressed because I know, without question, even a supporting organization allows itself some bad apples (pun most certainly intended, much to your chagrin).

  34. Jeffrey Zeldman said on

    No skip nav or accesskey?

    @Mr Selway, accesskey has fallen out of favor with many accessibility advocates and experts. The omission of accesskey should not be construed as lack of accessibility.

    As for “skip nav,” why would you want to skip it? A site like this is about navigating to the item you most want. Placing the nav first in the source seems exactly the right thing to do.

    why an invalid doctype, and unnecessary (for html 4) cdata tags around scripts?

    @michael switzer, please join @Jay Selway in viewing my comment of 11:24 am.

  35. Keith LaFerriere said on

    The team at Staples went through a great deal of challenge trying to bring standards to their e-commerce. Using a combination of statistical packages and IBM’s back-end didn’t help, since neither of these things were very accepting (or created using) standards-based code. I think what Apple has done is a giant leap forward and I’m glad they got as far as they did (which is, to be honest, very far).

  36. Keith LaFerriere said on

    Sure… what’s one more post when you think the other two didn’t surface.

    In the immortal words of Mr. H. Simpson… D’oh.

  37. Shogo Yahagi said on

    I too noticed that whitespace is an issue with dynamic sites. In J2EE environments that I’ve worked on, my JSTL gets bloated with whitespace too. But for my own personal projects, I use Smarty as a templating language to hook into dynamic sites. And its got this cool feature that “strips” whitespace and control your carriage returns so that your source code output is PERFECT!

  38. Filosof said on

    Hi Jeffrey,
    I love your posts, but I don’t think this is a very good example of accessible site.. in fact, I don’t think it’s accessible at all.. for example try to hide images.. where is name or main navigation? Disable styles.. search fields without SEARCH buttons? Have you tried to navigate only with keyboard? Web standards based sites don’t need to validate, but they are not neccesarilly accessible.. and Apple’s store simply isn’t (imho)..

    btw. Usability? All links look like normal text to me.. no underlines, no color.. just a little hover effect :-/ Yes – I like the fresh Apple design, but this really isn’t good example I’d like to show to my clients..

  39. Josh Stodola said on

    That was lame, Jeffrey. Didn’t see that coming at all. Snore!

    If you wanna see impeccable markup, look no further.

    You got me disappointed today, Jeffrey…

  40. Jeffrey Zeldman said on

    Usability? All links look like normal text to me.. no underlines, no color.. just a little hover effect

    We define usability differently, I guess. I’ve never had a problem knowing what’s a link on that page.

    On a site that’s mostly written content with a few in-context links, links must be visually differentiated in a consistent way. But on a store site like this — all product shots and tiny clickable word clusters — such differentiation isn’t required. It’s obvious that all those little product shots are links.

    You got me disappointed today, Jeffrey…

    Well, you disappointed me by beginning your comment as follows: “Beautiful markup my ass.” How is that kind or helpful?

    If you wanna see impeccable markup, look no further.

    Josh, marking up a personal blog semantically is of course commendable, but it doesn’t compare to the challenge of bringing web standards to a multi-million-dollar website powered by all kinds of system that predate web standards. Your blog is great. But web standards cannot be limited to personal sites. And a newly launched site that greatly improves on a former non-semantic table layout should not be disdained for reasons of purity.

    Happy Cog’s templates are semantically pure when integrated into backend systems. But I guarantee, if you look at some of our client work, you will find validation errors created by third-party systems, or little bits of nonsemantic cruft inserted by a content person on the client side who doesn’t understand markup and didn’t study the style guides we provided.

    Some of the sites we created for clients are still pure, but others have these little errors in them, and we can’t always get the errors fixed. Agency or in-house, when working on a huge site, you’re fighting an uphill battle. I believe we need to encourage each other and commend organizations that adopt standards. Pointing out small errors is useful if you’re trying to help a friend improve the site. But pointing fingers discourages others from adopting standards. Why should they bother if someone reading a blog post will insult their work because a third-party content stream causes a validation error?

  41. Todd Zaki Warfel said on

    @Simon Jessey, the site is beautiful for an ecommerce site. When considering what constitutes beautiful, you should consider the goal. The goal of this site is to sell product. And they do a fantastically beautiful job at showcasing that.

    @Filosof, as for usability and text links on the home page, well, first of all, if you’ve done any work and testing on ecommerce sites, you know that customers select the product images to go to a product, not the title of the product. So, the images linking to the product make it more usable and functional. Second, the text links do have a different color treatment for the products below the primary featured products – they’re blue. As for the text links at the left, well, those are actually navigation and should look like text links, they should be visually distinguished to indicate that they are distinct from the body text links, as they are.

  42. Thom said on

    awful lot of “onclick” handlers for a modern standards based site. Also using some trickiness on the backend could reduce all of those calls for style sheets. It is a good site, but as long as it is rife with calls to handlers and unnecessary requests I wouldn’t want to use it as an example for my students.

  43. Thom said on

    dang… meant to add:
    Especially when they could fix those issues with relative ease.

  44. Mr. Strudel said on

    If you wanna see impeccable markup, look no further.

    @Josh Stodola:
    Such a big ego, eh?
    If you wanna see an exhaustive description of your behavior look no further

  45. Filosof said on

    @Todd and Jeffrey – ok, no problem – I’m still learning.. :-) but my comment was primarily about accessibility (because THAT was the point of Jeffrey’s post).. so whatabout accessibility issues I mentioned?

  46. Jeffrey Zeldman said on

    @Thom, I too would like to see the “onclick” handlers go away in the next update. Less inline scripting, more separation of behavior from structure and presenation, would be good. But the site has come miles from where it was, and the developers get my support and thanks for what they’ve achieved so far.

  47. Anthony Piraino said on

    The perfect is the enemy of the good.

  48. Garrett Dimon said on

    I agree that they’ve done an excellent job and taken this a step further than most sites. It’s a shame that some people can’t see the forest through the trees. Of course the site isn’t perfect, I’m not personally aware of any large sites that are. However, the progress here is significant and undeniable, and that’s worth bringing attention to.

  49. Ricky Irvine said on

    There sure are a lot of a-holes in our industry. While not perfect (my website is far from it!), Apple’s new store pages are a huge step forward, and that is undeniable.

  50. Vlad Alexander said on

    Jeffrey, I was one of the developers of the first Apple Store in 1997. The markup behind the site has greatly improved since then but I would not call it standards-compliant or even accessible.

  51. Patrick said on

    For all the nit picking nellies in the crowd, how many of you have worked on a site visited by millions of users? I have. And let me tell you – a few things such as invalid XHTML (or HTML) and extra white space in the code are bound to happen. Why, you might even get a tag!

    As Zeldo pointed out, there are a lot of either pre-existing CMS systems in place or internal frameworks programming teams have set up for these sites that sometimes have legacy markup. Relaunching a site to standards compliance isn’t an all or nothing deal – one careless tag does not an inaccessible or poorly designed site make. There is time to clean up these little atrocities later. Sometimes, as has been my experience, the company prefers to launch the site first then let us code monkeys fiddle about with the ‘behind the scenes’ details, such as validation, cleaning up deprecated tags, etc. That’s not really my preference, but I am not the one calling the shots.

  52. Brian Warren said on

    I like it. Sure it’s not perfect, but it’s a great example of a giant site, with tons of legacy content, done really well.

    You can nitpick your way through it, finding errors and stuff here and there, but if you think those nitpicks keep this site from being anything other than a laudable achievement, then you’re dead wrong.

  53. Mr. Strudel said on

    I think (and hope) that web standards are more than validation, skip links and that “mine-is-bigger-than-yours” attitude that always creeps out when a big one redesigns.

    Why always so negative? There’s a big picture that waits to be seen.

  54. Chris Harrison said on

    Wow, if something isn’t 100% perfect, people sure get their panties in a bunch don’t they? It’s a step in the right direction, and the team of developers and designers at Apple should be applauded for their efforts on the revamped Apple Store site.

  55. Ara Pehlivanian said on

    @Josh: As someone who works on multi-million dollar websites, I know first hand that you can’t lock down control over all of the site’s markup when dealing with a CMS/Database driven site of that scale. You do your best, as I’m sure you did with your own site. But I mean, even your own about page contains inline styles and inline JavaScript.

  56. Thom said on

    @Jefferey you’re certainly right that they deserve praise. Most developers haven’t had to deal with a site of this magnitude, I’ve been close, but not that big. I can’t imagine what it must’ve felt like to have that spec handed in. The complexity of the layout alone would’ve given me nightmares.

    There is always room for improvement, but yeah, they’re doing great to be where they are.

  57. Todd Austin said on

    I tend to lean towards something Jesse Bennett-Chamberlain of 31three wrote: “Progress is a much better goal than perfection”.

  58. Josh Stodola said on

    OK, ok, ok. I have read what I said and in my last comment I indeed came off as a pompous jackass. And yeah, I definitely did not start out my original comment as I should have. For these things, I sincerely apologize (I’m still a youngster, give me time, my fingers tend to talk more than my brain).

    You’re right, Jeffrey, a site that huge finally making a valiant effort to conform to web standards is certainly noteworthy. And it was rather egotistical for me to link to my own blog’s about page and refer to it as impeccable. Sorry for being so vain, but it’s just that when I read this post for the first time I thought “Oh damn, that markup over there at the Apple Store must be ungodly clean” but I was quickly befuddled when it took me 150 lines to find the body tag. I guess that was how I reacted to that – childishly. I guess I am not so disappointed after all.

    By the way, how did you type up that lengthy reply in 3 minutes flat?! Daaaayum!

    @ Mr. Strudel : Looks like you probably have a point. I will read that later! Thank you.
    @ Chris Harrison : When Zeldman finds it remarkable, YES!
    @ Ara : Thanks!! It’s still a beta, I will work on those issues.

    Best regards, everyone…

  59. Ryan Joy said on

    Re: Vincent & Juan on background color:
    I see nothing wrong with omitting the background color for this site. Browsers offer the ability to customize the background colors of websites you visit and this site takes that into account (like yahoo’s). Now, had they relied on the assumed body background being white and had their content blocks inherit, it would have cause problems. As it is now, I could set my background color to black and still be able to read their site.

  60. Ian Lloyd said on

    As others have said, it’s not perfect, but it’s an improvement and despite what some have said there are some nice things in there where accessibility is concerned.

    The lack of skipnav and accesskeys is not a bad thing. Accesskeys clash with too many other key assignments, and skipnavs are not required when the document is marked up using headings and lists – a screen reader user, for example Jaws, can jump from section to section using those methods.

    The document is well structured (or at least seems to be at face value) and would be no problem to navigate. Here is the heading/document structure:

    http://tinyurl.com/2nmosu

    Where images have empty alts, switching off images does not appear to affect usability, as the text equivalent is right there next to the image:

    http://tinyurl.com/2pf3kw

    As for navigating by jumping from list item to list item, each red box here represents a list, and hence a potential jump point:

    http://tinyurl.com/2jneu9

    There was one section of the page that was missing alt attributes entirely (rather than an empty alt) which is shown here:

    http://tinyurl.com/2n85ed

    I suspect that is oversight, rather than CMS limitation, and hence can be fixed, but even so I would not class it as a big failure, as once again there is text above and below the imagery.

    I have note run this through a screen reader but did a quick keyboard navigation test using an accessibility toolbar that mimics the behaviour of screen readers, and I could jump through large chunks of the page very quickly.

  61. Scott Ahten said on

    Having worked with web development framework used by the Apple store, I’d say this is a huge accomplishment.

    While WebObjects is a very powerful framework, it’s remained in the dark ages in regards to web standards, unobtrusive Javascript, etc. If I remember correctly, the latest version WebObjects still doesn’t officially support anything beyond than HTML 4.0.

    This is in addition to years of legacy content that must be migrated to the new architecture.

    Given the constraints they had to work under, they could have simply punted and slapped on a new coat of paint. Instead, they’ve decided to push the limitations of the framework.

  62. Joe said on

    @zeldman-

    I know what it’s like to deal with a CMS that doesn’t let you control markup, so I understand. But I can’t see how hard it would be, if you can get the link of the page, to get the name to put in the tag.

    My company uses DotNetNuke, which has been getting better about compliant markup.

  63. Ethan said on

    To all the iCritics, what’s more helpful: Discussing issues the standards-aware team is most likely painfully aware of, or offering insight as to how they (and, by extension, the rest of us) might solve some of these issues?

    Slinging mud just gets us all dirty.

  64. Steve Ganz said on

    I happen to have a little bit of insight into the kinds of challenges that were overcome to bring the Apple Store closer to standards compliance and accessibility than ever before. I wouldn’t wish the legacy that they’ve had to deal with on my worst enemy. What they have accomplished is a testament to their passion and their commitment to making the Web a better place.

    This is a giant step forward and only the beginning of what’s to come, I’m sure. Kudos to Jina, Faruk and the entire Apple Store team for getting the party started. Keep up the great work!

  65. Vincent J. Murphy said on

    @Ryan Joy, actually, the links at the bottom of the page depend on a background color: grey on grey (my current background) means unreadable text for those links. So they are assuming a white background, since they’ve specifically styled those links to be grey. Whenever defining a foreground color, you should define a background, or make sure the inheritance is working. In this case, it isn’t.

    It’s a personal pet peeve, though. Seems more and more that designers are assuming a white background, but don’t want to bother defining it.

  66. Bartek said on

    Wow, this looks really good. Hell, it just IS really good! The markup is awesome, altough it could produce less validation errors :-).

    I don’t know why it’s not usable at all in IE 4.0. Yes, I know. I don’t think it should look in that browser even remotely similar to what we see in standards-compliant browsers, but we could see a not-styled-at-all version. But maybe it’s because of my IE4 (I use multiple IEs). They used @import in their stylesheets, so the browser should not see any sheets as far as I know… and it hangs my browser even with JS off. Strange.

    But to hell with IE4. The site is great and looks extremely good even in IE5. That’s a huge achievement ;-)

    I also think they could have added a Search button in the search box. I’ve seen people who weren’t sure what to do if they didn’t see such button.

    These are all very minor problems of course (and I may be wrong on them, it’s surely possible). Apple once again showed us a very good site.

    PS. Jeffrey, I bought your book today — ‘Designing with web standards’. I just wanna say that it’s great. I like the fact that it’s quite long. I like good reading. I recently bought a book on usability and wasn’t too happy that it was short. The author, Steve Krug, said he wanted to respect the reader’s time, but I think that reading a good book, even a ‘technical’ one, isn’t a waste of time and can be very enjoyable. (Yeah, I’m a geek, but who of us isn’t?) So thanks for over 400 good pages, I can’t imagine the effort you put into it. I can only say that it sure was worth it!

  67. Jared Peterson said on

    Man, some of you folks commenting here are crazy. Last time I checked the Apple Store was not exactly “Hello World” being crafted in your editor of choice. This is a HUGE site, with tons of content, being generated dynamically, that has just taken a GIANT step in the right direction. Sure, it’s not perfect, but come on folks. How many of you have actually worked on a large dynamic site? I have, and sometimes things like whitespace are a freakin fact of life. Get over it! Congrats Apple and team!

  68. xian said on

    While I agree in the main (and what would it matter if I did not?), I am struck by the creation of little headings with

    <strong>Mac Pro</strong>

    I suppose an argument could be made that they are words being emphasized, but I find that strong is the new bold. (I just blogged about this, so it’s on my mind.)

  69. Ian Fenn said on

    Zeldman:

    In my experience, though, unless you have control over all parts of the site, including the back-end, little things do break immediately after launch, and then months later. It takes constant vigilance (or enterprise-wide cooperation) to attain and keep perfection.

    Hear, hear!

  70. Jacob Rus said on

    My favorite part is the <ul id="sosumi"> at the bottom. :)

  71. Mike K said on

    Ditto Ian Fenn & Jared Peterson .

    Some of you commenting here, must live in a dreamworld of small shops. When you do this stuff in real CMS’, none of this Open Source BS, then you’re really doing it. It’s huge step to even get close to valid with a lot of corporations. Congrats Apple

  72. Greg said on

    Thanks for the thoughtful post, as always Jeffrey.
    @Josh – you are awfully full of yourself for someone so young, who has barely been alive as long as Zeldman has been working (sorry Jeffrey). Nice to see, however, that you are grown up enough to see it and own up to it.

  73. Name said on

    i liked it better before… a bit too blocky and spread out now. Web-standards or not, if the site isn’t well designed, it just doesn’t matter.

  74. The Reverend Doctor said on

    @josh

    I run a site that is ridiculous. I mean, it has no purpose at all. It’s about college football, and it’s a humor site at that.

    That being said, I’ve been making amateur websites for years…and all this time, I’ve been reading the words of Zeldman. Why? Because the man knows of what he speaks.

    He’s a man that knows what he “preaches” isn’t as easy as snapping his fingers. He knows it take time. He knows it takes work. He knows it’s harder than RUNNING A PERSONAL BLOG.

    You’ll learn this….someday.

    THE REV DOC

  75. Filosof said on

    Hi again.
    Jeffrey – I have never build such a large website – my largest has just a few thousand people a day and about 15k products.. so – can u tell me where’s the problem with these accessibility issues (so I can learn from your experience)?

    – font is not resizable in IE (CondComments are great, so why not to redefine the text size in ems in them?)
    – you can improve accessibility for keyboard only users by adding :active, :focus to all links.. is it a problem?
    – main menu hasn’t got text in links, so without stylesheet is just inaccessible.. even 4 Google.. why?
    – whatabout hidden images / enabled css users?
    – links needen’t be underlined everywhere but.. try to scroll down this http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/wa/RSLID?nnmm=browse&mco=3587D033&node=home/shop_ipod/family/ipod_shuffle page and tell me WHICH are the links and are not without hovering them with mouse.. is underline such a problem for Apple folks?
    – and finally webstandards – I agree completely with you, that maintain such a big site is a problem and it needn’t always validate.. but – the most important warning from validator is “No Character Encoding Found!” – so why not just add one line of code?

    I’m still a little bit dissapointed – if u have written a post that said HEY, we improved AppleStore and it’s better now, i’d said YES. But accessibility and standards? Happy Cog is a top webcompany, so the website must be top notch.. even if it has such a large audience.. or not?

  76. Asbjørn Ulsberg said on

    While I definately appreciate the new and semantic markup, I still think pages without any use of CSS is a bit dull. It works much better now than previously (with the non-semantic markup), but I’d still prefer some styling. Just to be clear: Opera 9.23 renders it completely CSS free. I’m not sure we can blame Opera for that.

  77. Anonymous said on

    ““No Character Encoding Found!” – so why not just add one line of code?”

    Have you ever considered that this site is translated in many, many countries, and maybe it’s a challenge they’re working on?

  78. Bartek said on

    @Filosof

    About the not-underlined links:
    I suspect that it was a design issue. Links without underline look simpler, lighter, more minimalistic. It just works very well with Apple’s design. Yes, from usability point of view links should be underlined or at least blue ;-), but hey, I’m glad that apple.com doesn’t look like useit.com. Apple Store site is beautiful and there probably had to be many issues like ‘usability vs. good looks’.

    About the main menu:
    Yeah, I wonder why they didn’t provide link text and use some image replacement technique. Google is not very important right here in my very humble opinion, but what about screen reader users?
    What’s good is that they do have very nice href attributes, so that you can understand where the link goes fairly easily. I also suspect that for example JAWS will speak the url when there is no link text. But why listen to the ‘http://apple.com/’ when they could have provide you with link content and you would get just ‘iPhone’, for example?

    About the ‘hidden images / enabled css users':
    We all know it’s a pain in the @$$ :). Only a few image replacement techniques would give you good results here. And as far as I know, only one of them is semantic (using IMGs with alt text… which maybe shouldn’t be called an image-replacement-technique in first place).

    I also think that they couldn’t make the site 100% standard-compliant because they had to keep the site look nice in IE5, and I’m talking about IE 5.0 for Windows. That’s one explenation.

  79. Matt Sephton said on

    Lucida Grande renders really badly on a PC in Internet Explorer and Firefox. Though n Safari on a PC, and on a Mac in general, it looks beautiful.

    Also, do they develop this stuff in-house I wonder?

  80. Daniel Carvalho said on

    Yeah, I must agree, it’s really great to see large corporations moving over to standards. Especially considering it costs them money and they don’t have if they don’t want to.

    Every step forward be it big or small, is a step forward. This is a rather massive one. As you’ve mentioned, I find little errors inevitably will find their way into massive sites, especially post production. With those errors in mind, it’s still a big win. Kudos to Apple.

    I must say, I found it amusing when someone compared their blog to a such a large company’s merchant site. Considering a website is not made up of code alone, should we compare design as well?

    – Daniel Carvalho

  81. Ben Kendall said on

    Being someone who likes to view source and sometimes run random validation tests on good looking sites I’ve checked under the hood of the Apple store more than a few times, and this update to it is a major leap forward from last time I looked. The entire web team deserves some major kudos and probably a nice paid vacation, then they can come back and work on tackling the last problems when properly refreshed from the major work they just did.

    It’s not perfect yet, but they’ve come a long way towards it and that’s impressive on a site as large as they’re working on. The great design on the outside is now starting to be as great on the inside.

  82. michael switzer said on

    @Jeffrey:
    Yes, I realize that many CMS push invalid code in at times, but this is a doctype, it’s the easiest thing to switch in the world, and most CMS I’ve used allow you to control the doctype when you publish your page.

    @Patrick:
    I’ve worked on sites that have had millions of users hit them. Notice I didn’t complain about whitespace, or items like that. Mere;y the easily fixable doctype, which is like web design 101.

    Apple has made a huge improvement over their previous incarnation. But I don’t see this as worthy of bringing out as a model to follow, yet. I’m sure the team will continue to make improvements, and at some point the site will be something other developers should learn from. Just not yet.

  83. Keith LaFerriere said on

    I’ll bring up another issue with large-scale development: you can create the most wonderful, well-written code with the best intentions of having it implemented, to see it handed off to a back-end developer (not a systematic approach, mind you) who doesn’t really care all that much about your evangelical approach to web design and development.

    The development team should signing a charter (stop laughing) at the beginning of the project to do everything they can to make their sites both standards-based and accessible.

    This will, of course, not fix all of the issues (now I *am* referring to systematic issues that get overlooked), but it’ll take it up a level and get everyone to buy in before the process begins.

  84. Shogo Yahagi said on

    I’ve read Zeldman’s book in early 2004 (the orange edition) and attempted to educate and influence 2 companies ever since 2004 to move to web standards. I failed miserably. In the past two companies over the past 4 years, no engineer, web developer or web designer agreed to support web standards or ever heard of Wasp, w3.org, Jeffrey Zeldman’s orange (and green) books, etc. I take that back. There was just one guy I met over the past 4 years that is a fanatic about web standards. Everyone else dumps junk in quirksmode, has divitus, classitis, (deadly web developer diseases, read Zeldman’s books) or has no care in web standards. To make matters worse.. I had to code in “Sin” when working on a templating system to generate html email.. and we know how wonderful email clients support web standards right?” –to be continued..

  85. Josh Stodola said on

    OK… for the record… I was definitely not trying to compare my wimpy little beta blog to the Apple Store, so quit laughing about that! I have worked with very large web apps that have thousands of concurrent users, and I know what it takes and how difficult some things can be, especially when you are not in control of all the code. I was simply pointing out what my expectations were when the grand marshall labels something as “beautiful markup”.

    @ Daniel Carvalho – I would love to hear your feedback!

  86. Tanner Christensen said on

    I was looking through the code of the Apple store days before they updated, and noted how horrible the markup was.

    It’s great to see the update not only carry beautiful code, but also a beautiful code structure. Would you not agree?

  87. Daniel Granström said on

    Am I seeing a rennnessance here or am I really just in a better mood? Cause my love of you Jeff is slowly showing itself again. Maybe it’s just that my “halcyon stynishhh philosophy” days are here again. Who, what, where?

    Well. I’m still tired of the “corporate, institutional, functional web”, and the (as i see it) fading independents web that I’m a bit concerned people who are introduced to the web now will barely have up for consideration. But I’m partially not looking around. And issues to deal with are good to have when time and imagination is all you got.

    PS. Ice is still hot of course. Cause it burns the skin. And perception is everything.

    Signed with love,

    Sarcosos, Julie Roswell, whatever. Someone who’s got great things to do again?

  88. Daniel Granström said on

    And insubordination is still my only school of course. But. Still.

    The Apple store works, but it’s got too many requests and too much redundant code for my kind of connection and pleasure. And the steps to strip away downloading unwanted functionality (turning off scripts, images, flash, et cetera) are still retarded from the combination of code architecture and available browsers. But. Of course. It’s not for me, it’s for richer people. So I don’t really care, but I can see the plague spreading where I’ll have to go flatrate again to get the content I want infrastructurally distributed in a way that is 10000% redundant.

  89. Daniel Granström said on

    Did I say that using my hotmail is hopeless these days? A billion “smart” requests that aren’t good for every connection and browsing tool. And just an example that depending on the corporate web can be a bad choice.

  90. Pat Fortino said on

    Let’s bend over and take it for Apple! I am always amazed how Apple zealots suck up the tripe produced by Apple marketing. Sure, Apple has a nice site, but so do hundreds of other large corporations.

    Get real people: Apple is a CORPORATION that sells expensive things that make you think that you “think different.” You’re just sheep following the herd. Or more like it, you’re following blind faith: If Apple says it’s cool, it must be.

  91. Jim Whitten said on

    @Pat – do they owe you a refund for something? If you have a realistic sense of design and an open mind, you’d see that even a person who doesn’t want to purchase their products can benefit from the usable interfaces, the sleek marketing (and it really is very sleek) and the strength of their brand identity.

    I won’t bleat or baaa, but I will most certainly be man enough to take their design, usability or branding cues in an effort to understand a very successful case study and apply the things that make a difference.

  92. Ionut said on

    It’s still not enough… it doesn’t validate

  93. Pat Fortino said on

    Hi Jim,

    I don’t see anything new, innovative, thrilling or “sleek” in the Apple store design. In fact, it looks suspiciously a LOT like Adobe.com, which is also a nice site. Like many online stores and portal sites, there is way too much going on; there is NOTHING easy about navigation this site. If they made an effort to use css to build the site, good for them. But I just can’t jump up and down and say “Oh Boy, Apple reinvented the web site!”

  94. Joe said on

    I wish everyone who is bitching about validation would READ THE COMMENTS that have already been posted about this. You can’t always CONTROL validation especially with large sites that, no doubt, use content management tools.

    Validation is not the END ALL of web development. The web site still meets customer expectations, provides quality experience, and succeeds in completing Apple’s goals. The web site has added value all across the board.

    oh boo hoo validation. get off your damn high horses and code in the real world.

  95. Joe said on

    Sorry for double post, but I should have included this article:

    Tools Do Not a Designer Make, by Jeff Croft

    You can bitch about standards all day but when it boils down to it, they won’t make you a better web developer than the guy who finished the project under budget and beyond client expectations.

    This isn’t to say standards aren’t important. They are. But if that’s your ONLY argument against the Apple Store right now, you need to go troll IRC or some lame forums, and shut up here.

  96. Tanner Christensen said on

    lonut: but it is a step up from where they were, don’t you agree?

    The really funny thing about the validation errors is that most of them look like thye are easy to fix – just a few characters deleted, adding a few “alt” tags here and there, and viola, validation.

  97. Simon Cox said on

    I have a huge amount of sympathy for Apple – looks like they really have tried to get the standards right but have been side swiped by their CMS. I have exactly the same problem on the global site I run. All the designs are built using valid mark up, the functional specifications I spend hours writing for the development teams all declare that valid mark up must be used, my team spend ages perfecting the templates and when we try to shoehorn the content into the CMS it just falls to bits – every time new limitations are found in the CMS! We get judged on the site using an enterprise version of Silktide’s Sitescore, so code quality is important to me – and its a standard that we can work to but is hard to achieve in reality. We spend a lot of time dreaming up creative solutions to get around our CMS’s limitations (can’t change the CMS as it is our strategic platform for eth next few years…).

    The Apple team have done a great job – don’t knock them.

  98. Shawn said on

    I’m just waiting for Apple’s stock to go down so I can buy it. Including the online store, they seem to do no wrong. Can they release some negative press once in a while?

  99. Lydia Mann said on

    @ the cranks and kvetches:
    Spirit of the law, not letter of the law, is what differentiates reality from philosophical twaddle and great, real-life design from thumb-twiddling twaddle.

  100. Don Ulrich said on

    WOW Jeffrey you have hot to be kidding….
    Who did this piece of embarrassing work?
    The visual design is OK but there is absolutely NO development value what so ever.
    Come on man are just looking for a reaction? You know BETTER.
    Not only a mis-matched DTD but incorrectly written as well?
    LOL LOL LOL
    A class for body? A bit redundant isn’t it.
    Then there are script tags nested inside script tags?
    LOL LOL LOL LOL
    Worse yet you all these sheeple agreeing with you, even making excuses for it.
    Oh the nested divs now i’m rolling on the floor laughing!
    This document has more ‘class’ than the Donald!
    Do they know at Apple that there are more than just id and class selectors?
    The design blows up if text size increases.
    The non semantic use of definition lists are classic.

    This was not NOT done by a web developer there is HUGE difference between
    development and design. I just can’t believe you are serious. For those of you who defended this tripe you set web development back 10 years.

    This design was the result of attempting to reach a sum and not a product.
    Which is impossible. As reference just look up the word Gestalt.

    “a structure, configuration, or pattern of physical, biological, or psychological phenomena so integrated as to constitute a functional unit with properties not derivable by summation of its parts”

    Yup it has function, just not organizational product.

    As someone who develops for the web i’m appalled agas and just plain F$#@ing
    amazed that this passes as acceptable. Web designers need to grow up!

  101. Jeffrey Zeldman said on

    Enough.

  102. MacUser: September 2007 Archives said on

    [...] Apple’s online store got a very nice redesign recently. We’re a fan of its clean looks and the use of blue (color my eyes, so it must be good). While it’s beautiful to look at, the code behind it is also gorgeous. [...]

  103. New Apple Online Store www.apple.com/au/ - Mac - Apple said on

    [...] Well it appears that the freshened up look is more than just skin (pixel?) deep.www.zeldman.com/2007/09/…w-at-apple-store [...]

  104. Aaron Mentele, Charisma 18 » The unicorn’s horn looks crooked said on

    [...] The comments remind me of those coming from trolls on Zeldman’s post regarding the Apple store redesign. [...]

  105. Daring Fireball Linked List: September 2007 said on

    [...] Say Hello to Web Standards ★ [...]

  106. MetaGer, Suche nach: well this is embarrassing firefox said on

    [...] [...]

Comments off.