webdesign

scheming templates

by vlado on Tue, 2006-01-31 11:09

I'm intrigued. You might have noticed that I like Lisp. Itellectually, that is. I don't really speak it. I finally decided to dive and try and learn it. On the surface it is not that hard - the language is extremely simple, essentially it has brackets and white space as separators, a couple of special forms - something like built in functions or language constructs in other language terminology, and a few really cool features like quote, unquote, quasiquote, (precious special forms actually), oh, yes, it has an eval.

In order to go forward with the learning I shall try and implement a simple web-design friendly template for xml applications. The idea is similar to TAL, or taglibs, etc...

A new skin for the new year

by vlado on Tue, 2006-01-10 08:49

Upgraded and reskinned the IPROMS conference website.

While there is still some polishing to do on the visuals, the overall design will remain as it is. I will need to put new functionality there. At the moment I'm experimenting with a few approaches to importing OOo Impress presentations. That is a challenge which needs to be solved, but I'm still not sure what is optimal. The Open Document standard is a weird beast, I think a weird bad beast. I wish I could use docbook for this purpose, but that is a dream, which won't come true.

In search for a flexible, space efficient layout

by vlado on Tue, 2005-11-08 11:03

Space efficient web page layout is an often desired, but rarely achieved design goal. The problem comes from one of the main side effects of the web technology - you never know how big is the screen of the viewer. Some "solutions" you might encounter are

  • old-school "best viewed at XxZ resolution"
  • fixed width layouts, centered on page - a lot of blogs use that
  • fixed width layouts, left or right aligned - have a look at the bbc website
  • using the "defect" as a design feature

You can find a lot of good examples for all of the above at the csszengarden.

modular drupal css theme

by vlado on Fri, 2005-11-04 15:21

I continued working on the current dikini.net theme. It is an intresting exercise. So here is what I aim for:

  1. modular stylesheets: typography.css, framing.css, colors.css & friends
  2. page.tpl.php should allow for a multicolumn design, with arbitrary column order
  3. vertical positioning of elements within columns
  4. no faux columns
  5. a series of variation themes(styles), based on different layouts and colour schemes

    6. Status:
    1 - complete, including an unofficial, experimental split of drupal.css
    2,3,4 - half there
    5 - have a couple of

Yet more css3 multicolumn goodness, this time for print

by vlado on Thu, 2005-11-03 14:45

The multicol goodness works very nice with print layouts. By that I mean it works as you would expect. The only glitches I've found are related to very long unbrakeable text. But that is not their fault anyway.

Come on, give it a try. I have created a print stylesheet to accompany this drupal theme. It hides all web-related elements, leaving just the header and content proper. You can see the behaviour by doing print preview or by simply printing it, but please save the dead trees. If you want to see the behaviour across multiple pages, go to my Relations, SQL, views, algebra or how to cook that broth post. It should spread over a couple of pages.

more css3 columns

by vlado on Thu, 2005-11-03 12:06

As much as some people will say I've chickened out, but I have removed the javascript I mentioned before. I decided to stick to pure browser implementations. Gecko1.8 has css3 columns, altough they are are implemented as -moz- properties. So I've come up with the following stylesheet:


div.main div.node div.content {
   -moz-column-count: 2;
   -moz-column-gap: 1empx;
   -moz-column-width: auto;
   -moz-column-rule: 1px dotted #ccf;
   column-count: 2;
   column-gap: 10px;
   column-width: auto;
   column-rule: 1px dotted #ccf;
}

If a browser happens to implement the proper css3 properties, it will display it, otherwise work with mozilla. At least I hope so.

Another experiment

by vlado on Wed, 2005-11-02 14:54

You probably notice the somewhat strange layout of the node bodies. Yes! Multicolumn layouts. After reading a list apart, I decided to play with the css3 multicolumn layouts via javascript idea. I want to have a feeling of the technology. OK. God knows how it will be implemented in browsers, but that we shall see. For the time being this is going to stay here javascripted.
Hmm, first bug dicovered. For some reason the "info" line get's up. Since the colums actually get floated via javascript, this means, that the cleared element doesn't work onb this page for some reason

A major css workout

by vlado on Wed, 2005-11-02 10:11

Being bored is bad. Having a laptop cures boredom for me. Being in a caf with free wifi, being bored, having a laptop spells major disaster.

The current dikini.net restyling is an example.

Wait, there is more to it. Having your knickers twisted by drupal.css, while being bored in a free wifi caf results in the drupal equivalent to reading sendmail.cf - an attempt to modularise the monster css. It looks to be a longer project.

I've converted the current dikini.net style.css theme to:


  @import "frames.css"
  @import "typography.css"
  @import "colors.css"

a minor restyling of the website

by vlado on Tue, 2005-11-01 12:49

just a few minor css tweaks, but a big change.

4M website revamp

by vlado on Fri, 2005-10-14 16:34

After a few longer workdays, finally the first stage of the 4M NOE's website re-design is finished.

It was interesting mainly from the communications point of view. I think I learned some things in that area. Otherwise the website is (somewhat) sectioned into four distinct areas. I really like the idea of having icons for them in the sidebar. From a visual point of view I like the distinct sidebar as well. It clearly separates the visual concerns - content and navigation/utilities.

Fair enough - there is a lot still to do:

Powered by Drupal, an open source content management system