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.
However I publish this prototype here for several reasons:
Font appearance on Ubuntu, Windows and Mac
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
seems to fit for medium sized or large text. However it's to wide for small text. Therefore the prototype uses
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.
There are several smaller new things I tried with that design prototype.
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…
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.
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.
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.
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.