Archive for the 'elastic design' Category

A fol­low up to my pre­vi­ous post on the but­ton ele­ment, a little his­tory, why doesn’t any­body use but­tons, fun with Inter­net Explorer and Loz­enges of Death

Styl­ish Access­ible But­tons

Anschlag

Anfang

But­tons that look good and the same in Fire­fox (PC and Mac), Opera (PC and Mac), Cam­ino, Safari and almost in IE 5, 5.5 and 6 (PC), scale with changes in font size and be access­ible, can be done.

I act­ively pro­mote elastic design, so the next step is elastic images. That is images that are pro­por­tional to your lay­out. So here is a little exper­i­ment. Apo­lo­gies to RSS read­ers, I have yet to work out how not to send images via RSS. If you are on the site, see how the images adjus­ted to fill the space, on both the sum­mary page and post page, by either drag­ging the browser window.

I should of been more more spe­cific in my About em com­ment­ary that 1 em = 16 pixels as long as you are using a mod­ern browser and have not changed the default font size.

So I did more exper­i­ment­ing with ems and dif­fer­ent fonts

This is the first in a series of art­icles on what most people refer to as elastic
lay­outs, though I prefer the term pro­por­tional layouts.

What is a em?

Mark Boulton has writ­ten a num­ber of good art­icles on design­ing with the grid system

Today’s art­icle was the one I was most look­ing for­ward to flex­ible grids unfor­tu­nately the example was a mix of fluid and elastic web design and it fell down at some font sizes. (Some of it to do with Moz­illa and how it cal­cu­lates sizes). So I cre­ated a true elastic ver­sion which much like this blog, var­ies the font size depend­ing on browser width, to cre­ate a page that fills the browser.