Arkanis Development

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.

Several days ago I stumbled across a website with the Black Minimalism WordPress Theme. I somehow liked this glass and shadow style and some hours later I found myself redesigning my own website.

In the past I used Photoshop 7 for designing websites and most of the time I worked with vector objects and layer effects like drop shadows. However since my switch to Ubuntu Linux I’m trying to completely switch to free software and therefore searched for a replacement for Photoshop. I really liked this vector stuff so a logical step would be to look for a full vector program suitable for my web design needs. I don’t know when I first stumbled across Inkscape but it’s already several years ago and ever since I was using it occasionally for smaller stuff like icons and symbols.

With version 0.46 however several quite useful features where added to Inkscape. Namely the possibility to create filters, a great grid and some other useful stuff like on canvas gradient editing. So this time I tried to design a website with Inkscape.

Building the basic structure is straight forward. Create some rectangles here, a gradient there (on canvas gradient editing is really handy) and add some sample text there. No big deal. Especially with an easy grid set up (I used 10px devisions) and well working snapping. The funny part started when I wanted to add the drop shadow. Inkscape features a nice GUI to build your own SVG filters but unfortunately SVG filters are still a quite techy stuff. You have to add “filter primitives” for each basic operation that together create the effect you wish. For a drop shadow visible on all four edges of an object like used on this website a filter would look like this:

A screenshot of the
drop shadow filter

1. Expand the shape of the object the filter is applied to (dilate it’s alpha channel with the “morphology” primitive).
2. Blur this shape with the”gaussian blur” primitive. This will give a black blurry shadow.
3. Combine this shadow with the object by using the “composite” primitive in every way you like (10% of the 100% of the object with 100% of the object above it, whatever you like).

It’s not really user friendly yet but as a programmer I like powerful stuff and therefor I started playing around with these “filter primitives”. It’s somehow funny to think about how an effect like a drop shadow is done but once you get used to this kind of thinking you can do pretty much anything. However it’s not really productive compared to the layer effects of Photoshop. Performance of these filters is also a big problem. With just two of these drop shadow filters applied to a large part of the image it takes about two seconds to redraw the whole picture. Because of that I disabled these filters during normal work or used Inkshapes outline mode.

Neverless I’m still pretty impressed by the stuff that’s possible with Inkscape now. The last thing missing for my web design needs was also included in the latest version: slices. In Inkscape the batch export check box more or less equals to Photoshops slices as this post on an Inkscape pointed out.

1. Create a layer with rectangles representing the areas of the image you want to save.
2. Select the areas you want to save and set the layer transparency to 0%.
3. Open the export dialog and hit the batch export check box.

Thats basically it. Again not as productive as Photoshop but good enough to work with. At least for me. :)

So here’s the new “vectorized” design of my website. It’s an SVG file and except the header image everything is SVG vector stuff. No longer proprietary PSD files.

A snapshot of the new design, completely done in Inkscape (click to enlarge)

Looks like I start to like English blog entries. :)

Today we did a short writing exercise in an English lesson at school. More or less as voluntary homework I wrote a short statement about the following topic:

Some media experts claim that one day books are likely “to go the way of the dinosaur”.

I really like topics about information (structure, flow, sharing, whatever) and therefore I just want to share some of my thoughts on this with the rest of the digital world:

In my opinion books will not follow the way of the dinosaurs in the way that they get extinct. Books are used for several purposes right now like archiving, information sharing and entertainment.

To archive information modern digital media like the internet or databases are way more efficient. Books cannot be copied easily and have to be preserved with extreme caution to not get unreadable within several decades. Digital information however can be copied and regenerated within just a few milliseconds and more important for archiving: searching digital data takes just some seconds instead of days or months required to search through most paper based archives. In this area books will surely loose their purpose if they not already have.

It’s almost the same for the task of information sharing though books, especially in the scientific or technical sectors. Most of these books are already outdated before they are printed or distributed around the globe. In this area digital information also takes out books because of the same features described in the previous paragraph and by the fact that digital information can be distributed around the world just within seconds.

However things are looking different in the entertainment sector. Novels or other forms of literature are not getting outdated to fast and it’s not important to search though them. They are only read a few times to entertain the reader and are not used as references. Books are also more comfortable to read. For example reading a novel at a PC screen is quite boring while reading it on a sofa or in a bed is a way better experience. In contrast to mobile devices like Notebooks or PDAs paper based text stays readable even under extreme light conditions. While it’s hard to clearly read anything on a Notebook directly hit by sunshine paper based text stays perfectly readable. Thanks to the high light reflection rate of paper a book can also be read with just a dim light around while screen devices will dazzle the reader in an uncomfortable way. Books can also be read without requiring special devices to decode the information and therefore do not require energy. In my personal opinion this is the area where books will not lose any of their popularity in the foreseeable future.

It’s not really detailed but I think it’s ok for a short overview. I honestly like English lessons that way. :)