These screenshots were taken on 2 March 2009 at 23:31 GMT and shows the homepages for the US versions of Microsoft.com and Apple.com. I decided to publish this because I think it shows a striking difference in the way these two high-profile tech companies think about how they are represented on the web. The underlying code is also of interest so I’ll let you, the readers, the experts, the pros, decide what to make of both the design perspective and the underlying code that make up the sum of these two sites.
Above: The Microsoft.com and Apple.com homepages
Above: The code behind Microsoft.com and Apple.com homepages
Tags: Apple.com, Code, Development, HTML, Markup, Microsoft.com, Programming
23 Comments
Microsoft.com has either compressed their code by removing white space or they got some real awful developers working on the site because the code looks horrible. Apple’s on the other hand looks as though it’s been hand-coded or at least gone through some kind of tidy up process.
Save bandwidth is a thing, but both sites have huge audience, so, why Microsfot has this need to save spaces and to save bandwidth??
Just a little bit more to the Apple’s portifolio of “better things” uppon Microsoft ;P
Wow, Microsoft’s markup is god-awful. But Apple should be minifying their JS…
Just one telltale little point as well: look at the scrollbar chiclet size; the microsoft.com site has more pages of this whitespace free code. So, apple.com has less code in this file and more whitespace.
Hmm…I know which one I would rather work on.
You missed a really impressive difference:
MS:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.microsoft.com%2Fen%2Fus%2Fdefault.aspx&charset=(detect+automatically)&doctype=Inline&group=0
Apple:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.apple.com%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654
The one validation error Apple has looks like a small mistake. They are probably aiming for full validation. Impressive indeed!
If you run them through the validator (http://validator.w3.org/), Microsoft scores “180 Errors, 32 warning(s)”, Apple “1 Error”.
I’m surprised no one has commented on the pure aesthetics. I think the difference in code is worthwhile to observe but what is most striking to me is the way in which apple has really come to “own” the color white. From their website to their packaging the air of clean design and sophistication really owes to apple’s ability to use white space so effectively. I really don’t think anywhere near the same can be said about the blue scheme implemented in microsoft’s web presence.
I must say that a screen shot of the markup doesn’t say that much. The w3c validation is another thing thou and MS should fix that of course.
Just to give MS some cred check out this site for their Web platform. That is perfect markup and really good looking design.
http://www.microsoft.com/web/
What a waste. Markup of a website tells me nothing of the code behind it.
Most of the markup on microsofts site is the dropdown menu anyway. If you really think microsoft programmers code with it condensed like the source, you’re an idiot.
I think what makes me laugh most is the number of Errors the MS site throws. I would bet that their very own Internet Explorer goes in to error mode when viewing their site… or …. they had to hack their code so much to make it work for IE that they get tons of errors.
It just goes to show that Apple cares about the little things where MS seems to just “look the other way” on these sort of things.
Apple = nice products, nice code, no problems
MS = bad products, junk code, lots of problems
The code of Microsoft.com looks pretty nasty.
In response to OLA’s comment… If you notice, the Microsoft.com/web/ page is in many ways alot like what apple’s pages look like. Just another example of Microsoft trying their hardest to COPY Apple’s tried and true approach to their whole identity design. I think Apple is way better EVERY single aspect we can think about.
I wonder why Microsoft thinks that we’ll make the effort to read sideways…
they call this code technique MS-XHTML-EF (Epic Fail)
Clearly most people here don’t know very well what they’re saying.
Microsoft’s code is actually better, because it has no superfluous whitespace, and no inlined scripts. Having a inline script is a bad practice.
Also, apple.com relies too much in scripts and if you have script disabled, some of the functionality at apple.com fails with no fallback.
@mors – Aye, Apple’s apparent reliance on JS with no graceful failure could be seen as an error on their part. However, compare Apple’s three errors (no graceful failure of JS, the one single XHTML validation error, and the inline JS) to Microsoft’s wall of failures.
I’m no Apple fanboy (I think the damned things are priced way too highly, and I don’t like not being able to tinker easily with the insides), but in this case, Apple wins hands down.
Yep, Apple wins. @mors, the code is so much better on Apple’s because it was made by people, not machines. Anyway, Apple’s site loads faster than Microsoft, cause it doesn’t have so much crap.
My two cents.
After reading through the code for both pages, and reading through the comments listed above, I have come to the unfortunate conclusion that this is a very biased argument.
I’m a linux user, so I have no wish to support one or the other.
In Apple’s defense, their code is simple and easy to read. However, it looks like almost all of their code is generated using Javascript, which is HORRIBLE. Have you paid any attention to how many js includes exist in their source? Another thing about this, is that the validator will not pick up on Javascript, so any code generated with it, will not be parsed. In reality, their entire page may be filled with errors, validators are never 100% accurate.
In Microsoft’s defense, most of their website seems to have been developed server-side, meaning that the page is most likely cached, saving on server side, and client side CPU cycles. There is however, more in terms of graphics, text, and code, meaning more bandwidth for the user. Also, the fact that they are starting to use Silverlight more and more, just means more plugins for the end-user to download, and maintain with patches.
Now, in criticism of both companies..
Neither page is without errors. I don’t care if one has less than the other, they BOTH have errors. I’m a web developer, and I always aim for clean code. There is also, always a way to do something correctly. Neither company has taken the care to exercise good design. The w3c validator is also, not a good tool for deciding whether a page will work the way it’s meant to. I’ve written w3c compliant code on many occasions, only to find that it didn’t load or function properly in Safari, or IE. The only true way to evaluate the quality of a webpage, is to do so manually, through observation of the code, load speed, memory usage, and browser compatibility.
From an aesthetic standpoint (being a graphic designer), neither website catches my eye. The apple website has followed the same visual formula for YEARS. They got lucky with one design theme, and they’ve stuck with it since. Microsoft’s site looks plain and boring, and an overuse of one colour is a bad habit (eg: blue, blue and more blue).
Just my 2 cents.
Saving bandwith should not be a matter for big companies.
If you’re doing the things well, you use standards, well table-appropriate-use with a little of table-less in web pages, there’s no need to do anything else, you muts tidy your HTML code and not to compress it (that’s my impression) but, it depends on the developers.
Most people here commenting on bandwidth have obviously no idea what they talking about, especially Carlos.
“Saving bandwith should not be a matter for big companies.” – when you’re the Top 5 web site in the world, damn well it is a big matter.
Incoming Links
Leave a Reply