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:
- the three bullets in the upper left corner
- the rounded upper corners
- the title bar
- the corner at the right bottom
- the background
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.
AppLaunch Home →
Other Resources
–
hosted at
–
