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.
MacOS X
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.