Archive for the 'elastic design' Category

A follow up to my previous post on the button element, a little history, why doesn’t anybody use buttons, fun with Internet Explorer and Lozenges of Death

Stylish Accessible Buttons

Anschlag

Anfang

Buttons that look good and the same in Firefox (PC and Mac), Opera (PC and Mac), Camino, Safari and almost in IE 5, 5.5 and 6 (PC), scale with changes in font size and be accessible, can be done.

I actively promote elastic design, so the next step is elastic images. That is images that are proportional to your layout. So here is a little experiment. Apologies to RSS readers, I have yet to work out how not to send images via RSS. If you are on the site, see how the images adjusted to fill the space, on both the summary page and post page, by either dragging the browser window.

I should of been more more specific in my About em commentary that 1 em = 16 pixels as long as you are using a modern browser and have not changed the default font size.

So I did more experimenting with ems and different fonts

This is the first in a series of articles on what most people refer to as elastic
layouts, though I prefer the term proportional layouts.

What is a em?

Mark Boulton has written a number of good articles on designing with the grid system

Today’s article was the one I was most looking forward to flexible grids unfortunately 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 Mozilla and how it calculates sizes). So I created a true elastic version which much like this blog, varies the font size depending on browser width, to create a page that fills the browser.