Elastic Zen Garden
Sunday 7 December, 2003 ( 4:38PM GMT)
The Elastic Lawn is a new addition to the great CSS Zen Garden designed by yours truly.
The design is built using ems as units rather than pixels to define not only the size of text, but also the dimensions of the layout. The result is an elastic design that will expand and contract depending on the user's text-size setting.
This 'elastic' approach is one that I have used for some time. The argument that text-sizes should be relative (ie. ems rather than pixels) for increased accessibility can be said to extend to the dimensions of the area in which the text is contained. It does kind of make sense to me that there are benefits to layouts that grow proportionally with the text - I mean, if a visually impaired user finds it easier to view larger text, won't they also find that text more manageable if the space between content blocks is also larger? It also avoids increased text sizes pushing out and possibly breaking an intended design (try enlarging the text in some of the other Zen Garden designs for example). The elastic issue is one I will go into in more detail at a later date.
The Elastic Lawn is meant to be more of an interesting demonstration of a concept rather than an accessibility/usability demonstration however. This isn't my usual approach to design - some things such as graphical sub-headings, foregrounds that could have higher-contrasting backgrounds and text on patterned backgrounds can decrease usability but the point of the Zen Garden is to demonstrate the graphical design capabilities of CSS. This particular design hopefully demonstrates that ems are a viable option, even for elaborate designs.
You can find out a bit more about how certain aspects of the design work by taking a look at the annotated CSS file.
Comments
Comment 3
We already made one of our websites fully scalable: http://www.imapa.de/ .
Yet I know that users with 800x600px screen-size have to scroll horizontally in case of increasing text-sizes, in Germany nearly 80% are surfing with a sceen-resolution of 1024x768 or higher. On this basis our decision was an easy one.
So said Cornelia Lange on Tuesday 9 December, 2003 at 6:29AM GMT.
Comment 4
but...but...how did you achieve those scrolling dotted underline styles in the hover state...? What the...how the... Gimme!
So said brandon on Friday 9 January, 2004 at 9:23PM GMT.
Comment 5
Hehe. Okay...
Quite easy really. There's a static dotted-undeline image that is the background of all links. When hovered over, the background image simply switches to an animated GIF.
Disco.
So said Patrick on Friday 9 January, 2004 at 9:30PM GMT.
Comment 6
Howdy!
I have used an elastic design on my website as well (I call it 'zoomable') and I included a small javascript that changes to font sizes, in effect creating a 'zoom-in/zoom-out' effect. You can see it here:
I know the design is probably quite wooden since I just got rid of all the tables of the original design which is distributed with the CMS (I use AWF) but if you would not mind a comment, I would greatly appreciate it.
Regards,
Ivaylo
So said Ivaylo on Friday 20 February, 2004 at 7:20AM GMT.
Comment 8
It's very cool!
CSS Zen Garden is great. It was actually inspired by CSSZenGarden when I wrote Elxion CMS Designer's front end. When I saw what is possible with CSS I decided to make CMS for CSS designers...
elixon
Comment 9
All this CSS Zen* stuff is so cool that I should maybe rename Elixon CMS to CSSZenCMS ? :-) http://demo.webdevelopers.cz
elixon
Comment 10
I'm very excited about the project as I just finished a design theme for csszengarden.com
You can have a look at http://www.celebrityblog.net/zengarden/zengarden-sample.htm
So said Jane Jolin on Thursday 4 August, 2005 at 9:00PM GMT.
See Also
- Next Page: Fixed vs. Fluid
- Previous Page: Displaying Time
Comment 1
Nice. I like the animated links too.
So said John Pepper on Monday 8 December, 2003 at 10:19AM GMT.