Arkanis Development


Modern Ambience design prototype


This is just another "I'm sick of practicing and try to chill out with web design" post. But this time there is even more to look at and play around with: the Modern Ambience design prototype.

This is the current version of the design prototype I was working on for the last few days. I've also showed a screen shot of it in the previous blog entry but this time it's the real stuff. HTML, CSS and JavaScript.

However I publish this prototype here for several reasons:

Font appearance on Ubuntu, Windows and Mac

On Ubuntu DejaVu Sans is the default font. Primary because it's the default font of GNOME (or at least Ubuntu) and looks quite good for small and large text (not completely perfect though). It simply is clearly readable and has a good balance between positive and negative space. On Windows however there is no real equivalent for it but Verdana seems to fit for medium sized or large text. However it's to wide for small text. Therefore the prototype uses Arial for small text. I don't really like this combination and I'm concerned that it looks kind of strange.

Another candidate to solve this problem is Trebuchet MS. I just found out that this font is installed on Windows and MacOS X by default but I haven't had the time to try it yet.

So if someone from the Windows world is looking at the design, please tell me if the fonts look strange compared to usual websites.


I still have no proper possibility of testing a website on MacOS X. Since I'm especially interested in the font rendering (or the use of fall back fonts) a screen shot would be perfect. Theoretically MacOS X should use the same fall back fonts as Windows (Verdana and Arial) but I have absolutely no Idea how these will look like on OS X.

Other aspects

There are several smaller new things I tried with that design prototype.

Style switcher

The most interesting experiment. I think it improved a lot compared to the switcher of the current design. I'm planning to make a short page about the different designs ("Forest", "Mountain" and "Sunset") to better explain their history and give better credit to the people who did the great photos. Therefore the extra "about" links. I might also add a new design…

Figure styles

Another experiment. These styles for images and other stuff are heavily inspired by the GNOME Wiki. It seems to be a good and readable way to add a small caption to an image.

Breadcrumbs navigation

The design prototype also includes a breadcrumbs navigation in the title area. It's not the usual spot (between header and content) but I hope it's usable. It should make the navigation easier.

Silk icons

I've added some icons from the Silk icon set (comments, tags and search). However I don't know how well these will fit into the changing color scheme of the website. Right now the fit quite well but I'll have to wait and see how ell they'll fit into the other color schemes.

PNG transparency

This prototype makes heavy use of PNG24 alpha transparency. Every drop shadow is done with those PNGs. IE 6 can not render them correctly but this time the page only have to be usable with IE 6. It does not need to look really good. Some special PNG files without drop shadows should do the trick for IE 6.

I'll abandon IE 5 and 5.5 compatibility for this prototype. Since this is not a commercial website made for a specific audience it's good enough if it works with IE 6 and looks good with IE 7, Firefox and Opera. I would also like to properly support Safari (for Mac) but I have no real idea on how to do this. Anyway, the prototype is not "IE ready" yet but much to my surprise I just noticed three errors with IE 6 (missing PNG transparency, a float bug with the navigation and a margin bug affecting the style switcher).

In the greater picture this project is more than just some chilling out from practicing. I want to test some new technologies I want to use for the upcoming ZGR redesign: cross platform font appearance, some content styles, the style switcher, Maruku for posts and wiki pages, proper image and file uploading, tags and heavy news feed support. Since the ZGR redesign will be a pretty big project I can not test these technologies there (it would take to much time). It's easier to throw away a bad implementation on a small scale project than on an large scale project where everything connects to everything.

Opinions and critics (negative as well as positive) are very welcome. Feel free to write one or two sentences (or even more) about the design prototype.

Leave a new comment

Having thoughts on your mind about this stuff here? Want to tell me and the rest of the world your opinion? Write and post it right here. Be sure to check out the format help (focus the large text field) and give the preview button a try.


Format help

Please us the following stuff to spice up your comment.

An empty line starts a new paragraph. ---- print "---- lines start/end code" ---- * List items start with a * or -

Just to keep your skill sharp and my comments clean.