However, with the State Library website, the audience is very different, < 1% use 1600px+ screen, over 10% use 800px by 600px (though half of these are within the library and due to be replaced soon), less tech savy, are generally older and more likely to need larger font sizes. Which is more likely to push the width of the design larger than the user’s screen and force the user to scroll horizontally or miss some of the content.

I am thinking instead of using ems for horizontal measurements, use percentages. With the exception of the page container, which is sized in ems. Then use javascript to reduce the width of the page container, to the width of the browser, if the user’s font size is larger than normal and would force the page wider than the browser window.

In theory it would work like this:

• If the browser is less 900px wide, or no javascript the user gets the base stylesheet.
• If the browser is great than 900px wide, an elastic design based on the user’s font size.
• If the user’s font size would force the page wider than the browser width. The page and design, scale to fit the browser width.

Or am I just over designing the issue, should I just use one design either for 800px or 1024px screens and use that? Your thoughts?

Most web designers and developers have their own adhoc CSS frameworks, but they are usually fairly rough, subject to change and often include bugs.

So a good consistent and bug free CSS framework is a useful tool for a good number of web designers and developers, if they are willing to embrace it. So is Blueprint a framework that could gain acceptance by a large number, well maybe.

What I like about Blueprint:

• Solid typography
• Grid structure, to form basis of site building.

What I don’t like about Blueprint:

• Font size is based on pixels, I prefer ems because of problems with fixed font size IE6 and below and text zoom in IE7.
• Grid size is fixed in pixels and not related to vertical rhythm.

I hope Blueprint will continue to grow and develop into a solid framework. In the meantime I will keep using my adhoc framework. It is far less mature that Blueprint, so if you need a base to develop your own framework while using ems and a grid based on a vertical rhythm, use it at your own risk.

Tips

• The base font size 12px and grid size 18px is set is layout.css, delete those lines and site will be elastic.
• Vertical and horizontal spacings should be in units of 1.5em.
• Elastic images should be in multiples of 1.5em.
• Elastic flash should be in multiples of 1.5em.
• Add a little javascript and you can have a fluid elastic site.

I will try and keep developing my adhoc framework, just don’ expect the same speed and determination of Olav. I have a WebJam presentation to prepare this weekend.

• Valid HTML;
• Clean and well structured HTML;
• Only use tables for tabular data;
• Avoid presentational HTML where ever possible;
• Use semantic ID and class names.

As well as trying to only use:

• HTML for structured content
• CSS for presentation
• Javascript for behaviour

However, things do not always work out that simply. For example a site I built a few years ago has an excessive number of divs aka divitis. I did that on purpose, purely so I (and more importantly anybody who had to follow) would not have to deal with the different box models of IE 5/5.5 and everybody else. Even with this blog, the content is structured for ease of presentation and there are extraneous divs purely for presentational purposes.

The next incarnation of this blog will be better in how the content is structured, however, I will not guarantee that about extraneous divs for purely presentational purposes. The problem as I previously stated is that the design I want using my prefered faux columns method who require six separate background images for an elastic design. While I can do this with a single div and CSS3, the only browser that currently support is Safari.

The alternative are:

• Use a table for this layout, I disagree with this method on principle as well as not wanting to spend the time necessary to relearn the skills required (seriously I have forgotten how to use tables for layout.)
• Use the One True Layout which has it#’s problems.
• Use javascript to get equal height columns. The main issue with this is that javascript is supposed to be for behaviour not for presentation.

If I was doing a site for work, I would have no qualms about using the faux column method and extra div elements for presentation. Because, it is the most efficient method for me to use at the current time. However, as this blog is about personal expression and that includes the underlying code, I will look at the alternatives more closely.

POSH Plain Old Semantic HTML web+standards faux columns

Why

The current design was a rushed proof of concept, it is untidy and a few things annoy me, particularly the typography.

Identity

The colour palate, the excessive use of orange and the orange star have be commented on a number of times. So I intend to keep these features, they may be memorable for the wrong reasons, but they uniquely identify this blog.

Colour palate

There will be subtle changes, even the addition of another colour. However, the dominance of orange will remain.

Logo

The orange star has gone from being a design element to my logo by accident or bad design, so it will remain, might even get a tshirt with it on for SXSW (yes more shameless self promotion).

Fluid Elastic design

This is easily the most controversial part of the design. I get more comments on this than any all the other design elements combined. The most common that my font size is too big.

After spending the last couple of months using a laptop with a 15 inch screen at 1600 by 1200 and refusing to change the resolution just to browse web sites, I appreciated this feature and expect that most of the increasing number of visitors using high resolution laptops do to.

I will make a number of changes:

1. Not to change the font size when visitors have settings different from default.
2. Let visitors set their own preferred font size for the site.
3. When visitor’s have their browser set to a letter box format (the browser window is much wider than high). The font size will be relative to browser height.

Typography

This needs improving, I have been reading Mark Boulton, Richard Rutter and NorthTemple on typography and gaining inspiration from their stylesheets.

I have already done most of the work on the typographic stylesheet, you will see far more consistent vertical height of all typographical elements and this will carry over to other elements of the design and graphical elements.

Layout

I will move to a three column layout, to produce a consistent navigation and look across the site. Currently different page type: home page, post and archives all have slightly different navigation and a different look and feel.

Theme

The current blog relies on a modified Kubrick theme. I have a few issues, regarding the semantics and SEO assumption made by the creators of Kubrick and while the Kubrick theme is good, Sandbox is better for what I need. Though it will be modified to suit my needs.

Flash

The use of Flash for scalable vector images will probably increase, however this will require the use of iframe shims to resolve the issue of layering Flash and HTML with Mac and *nix Flash plugins.

Flashblock

This plugin for Firefox, causes some problems with SWFobject, which I use to insert flash images when the correct version of Flash is installed. Flashblock removes the flash image after SWFobject has replaced the alternate content. However, as Flashblock requires Javascript to function, I should be able to use Javascript to reverse this.

Advertising

There will be unobtrusive advertising, not because I need or want to make money with this blog, it was the result of reading Brian Clark of Copyblogger&#8217s what&#8217s in it for you.

Work to do

I am currently done most of the design work with pen and paper, it is the case of putting it together with a computer. I still need to learn about iframe shims, rewrite the Javascript that does the font sizing and write the Javascript to handle FlashBlock.

Other than the design being a rushed proof of concept that I never got round to finishing. I am happy that is has made an impression on some people.

The current version does have problems with flash enabled *nix including OsX browsers. I have been assured by Brothercake and Andrew K that if I use an iframe shim it will fix the problem of the Adobe flash player rendering flash content behind HTML content when it should not. I just need to get off my backside and test it.

The other issues with the concept are:

1. What happens if visitors do not have flash plugin installed or the right version of the flash plugin. They get provided with alternate content, in my case no images, sharp corners instead of curves and plain instead of decorated text. The website works, it scales, it is just bland but everything is accessible.
2. What happens if visitors do not have javascript enabled, they get the bland website that does not automatically scale. Again all the content is available and accessible.
3. What happens if the visitor has the flash block plugin installed in Firefox, currently they get click to play flash buttons and that does not work with my footer, because it is overlayed by links. There are a couple of alternatives, I could force people by some trick css work to play the flash movies just to view the site, however that is not me. I would rather provide the bland non flash version, this just requires a little more thought in structuring the site and some CSS work.
4. If a visitor has change their default browser font size to larger than 16 pixels, the site is wider than their browser window. This is rare and it can be fixed by modifying the javascript.
5. People who browse the web with large monitors and their browser windows maximized, end up with large text they claim can be difficult to read. However, any liquid sites they view have extremely diificult to read long line lengths and fixed width sites are lost in the whitespace. On the other hand, people using the higher density screens popular in laptops should appreciate the font size proportional to browser width. I know, I have spent the past six weeks using a 15” laptop with a 1600 by 1200 screen. Almost every I web sites I viewed, I needed to increase the font size a couple of times just to read the text, and on occassion this broke the layout. Given the choice of supporting the increasing number of people using higher density (125ppi and above) screens on laptops against people who use large low density (96ppi and below) screens badly to surf the web. I know who I should be supporting.

I need to spend some working on this site, particularly rewriting the javascript. At the same time I will produce a new design and hopefully add some new features. However, without a deadline to work to, I have no idea when it will be done.

The SVG format is currently not an option, simply because support amongst the browser is not there. SVG support currently exists natively in the production version of FF 1.5, otherwise you need the plugin from Adobe. Even if the SVG fanatics get their way and SVG support was bundled with IE7, it will be many years of dealing with legacy versions of IE ( you still support IE5 and IE5.5 ?) and if there is no W2K version of IE7, how long will support for IE6 have to last?

The alternative is for Adobe to bundle support for SVG into the flash plugin. Within a year or so SVG support will be in the great majority of browsers. The only problem is why should Adobe do it, they were the champion of SVG while battling Macromedia and Flash, but now Adobe own Macromedia, Flash and the SWF format, as I see it there is no commercial advantage in promoting SVG for Adobe, for Microsoft it might be a different answer.

So assuming that you want your scaling vector graphics to be displayed in over 90% of all browsers compared to the 20% that support SVG, you will for the time being need to use Flash.

You can use SWFobject or Unobtrusive Flash Objects to get around the Eolas patent issue in IE and providing content for browsers without flash plugin or the required version of the flash plugin. However, there are a number of problems in using Flash for scaling vector graphics:

You can’t use flash as background images, this is not a major problem it requires some rethinking and coding a background layer with flash and overlaying that with content. It is not as clean and as semantically correct as using background images, but it works and is valid X/HTML.

Overlaying content or other flash objects over flash works on a PC. On a Mac the flash plugin has a problem, it does not understand z-index or source code order and as such there is no guarantee what the stacking order will be. Sometimes the background image will appear infront of the foreground text, other times behind. If you are using a Mac scroll down to the bottom of this page, then scroll up and down a few times, you will see the links appear and disappear behind the flash background.

Flashblock plugin for Firefox, because the way this plugin works the alternative content will not be displayed, instead there is a button to press for the flash graphic to display. Which means visitors do not get any information, flash or the alternative, without having to interact with the page. Personally, I would prefer to display the alternative content to visitors using this plugin and this is possible because that is how sIFR handles this plugin, but this requires modifying the the Flashblock plugin and probably SWFobject or Unobtrusive Flash Objects. Though the aim should be to convince users of Flashblock to add you to their whitelist of friendly sites, so they get the full graphical experience.

So unless browser makers get their act together, the only option for vector graphics in web pages for the next few years or longer is flash. Lets hope Adobe can fix the problem with their Mac version of the flash plugin so we can use flash to provide scaling background vector graphics.

The only one I have found is if you try and use a flash file as a background (yes the header, header text and footer are all tiny .swf file, the text coming in at a whopping 3787 bytes, becauser of the multiple characters and stroke the shapes are less than 200 bytes), over laying other flash files (in the case of the header) or text (in the case of the footer) is flakey with either FF or Safari on the Mac. Don’t know on *nix, but seeing only version 7 of the flash plugin, you will not see the header text, because that requires version 8 flash player .

It is truly elastic, as long as your browser window is greater than 600 pixels, so stretch and what the page expand and contract. So have fun play and if you like it, look at the code underneath.

You should see some refinements in the next couple of weeks or until I get frustrated and create a more conservative template.

Go visit CSS Reboot and you can vote for me and any of the other 1500 rebooters.

tagged cssreboot css reboot elastic design

If you want to skip to the demos here are two column and three column version, just use the Bigger text,Smaller text,More textandLess text to show the true elastic nature of the layouts. Note if you are using Safari 1.3 or earlier, the background images do not display correctly due to a bug with Safari, this is explained below

The Code

The structure looks like this:

<div id="container" style="width :57em; border: 1px solid #000; padding: 0; margin: 0; background: #eee url(whiteback.gif) 19em 0 repeat-y; float: left; text-align: left; ">
  <div id="header" style="background-color:#f90; border-bottom: 1px solid #000; margin: 0; padding: 0 0 0 1em;">
    Header
  </div>
  <div id="background" style="background: url(fff5e5back400.gif) 38em 0 repeat-y; float: left; width :57em;">
    <div id="columnone" style="float: left; width: 17em; margin-left: 1em; position: relative;">
      Column One
    </div>
    <div id="columntwo" style="float: left; width: 17em; margin-left: 2em">
      Column Two
    </div>
    <div id="columnThree" style="float: right; margin-right: 1em; width: 17em;">
      Column Three
    </div>
  </div>
  <div id="footer" style="clear: both; background-color:#ccc; margin-bottom: 0; padding: 0 0 0 1em; margin: 0; border-top: 1px solid #000; border-bottom: 1px solid #eee;">
    Footer
  </div>
</div>


The important parts for faux elastic columns are in the background declaration for the container div:

• #eee which is the background colour of the left hand column.
• url(whiteback.gif) a wider than the column will ever be and 1px high background image for column two
• 19em 0the position from the left 19em and top 0, that the background image starts for column two
• repeat-y repeats the background image for the second column the full length of the page, no matter which column is longer

The other important div for the faux columns on a three column layout is background. This div, needs to be inside the container div, it does not need to contain the footer or header divs, but can. It just needs to contain all the column divs. It can also be repeated for a four, five or even more faux column effect. The background declaration:

• color not declared, the default is transparent.
• url(fff5e5back400.gif) another wider than the column will ever be and 1px high background image for column three
• 38em 0the position from the left 38em and top 0, that the background image starts for column three
• repeat-y repeats the background image for the third column the full length of the page, no matter which column is longer

If you want a repeating background pattern for column one, use that as you background image in the container div, and put the background image for column two in the first background div and the background for column three in the second background div, etc.

The technique is fairly simple, ensure all columns are wrapped inside the container divs, and then give each container div a background for the columns starting from the left.

The Trouble with Safari

Unfortunately there is a bug in Safari 1.3 and earlier versions which causes problems with background images, except when the background fits exactly inside the containing div.

If the background image is wider than the column but not wider than the container div, it will overflow the container

If the background image is wider than the column and wider than the container div, (or the background is repeating on the x-axis) it will fill the container.

As you can see from the above examples it pays to be careful about the choice of background images and colours. In two column design I use very subtle changes in colour with a strong border using a very wide image or do as I would with a multiple column layout and do not use background colours and use thin images (a few pixels wide) to seperate the columns visually.