Here is Cocoa as web site!

Wow, a Mac in my web browser? Well, it looks only like this, but the impression is not bad, or what do you think? For the real Mac feeling you still have to get one. By the way: The three bullets located in the upper left corner react as known from every MacOS application (except the yellow one).

The Idea

When the time for publishing AppLaunch came I “needed” a cool design for its web site. The first idea I had was to “rebuild” the well-known Cocoa style, but for HTML. While the temporary home page - until I chose the current layout - used this style, I decided to derive a design with less gimmicks. That meant doing it without the title bar and the bullets, but I found the background interesting. To make the layout more colouress the headings where given an orange touch, better then the black ones here.

About this Page's Layout

Sure, it looks like “written” in Cocoa, but it only looks like this. Creating this layout was not so difficult: I opened Interface Builder using the default window for a Cocoa application. After taking a screenshot from the windows preview The Gimp helped me cutting the screenshot in the significant pieces:

If you take a look at this pages sourcecode you can see how I put this pieces together using HTML and CSS.

But note: Although tools like the W3C HTML Validator check this page as valid XHTML, there was very much done using absolute positioning of elements. This may be not portable and this is definitive not what is called usability. For the hover effect of the three bullets above I also had to use JavaScript.

Using this Design

This “Cocoa” Website Style is available at the projects download page. Note that it may be protected by the copyright of Apple Computer, Inc.