Thoughtful Design: Relational Scaling
Thoughtful Design: Relational Scaling
This has become one of my signatures, so it is about time I write something about it. The basic motivation is the rapid improvements in resolutions and screen sizes. This has made it difficult for developers to know what size resolution they should be developing for. In the old days a lot of developers would develop for an 800x600 screen. Later that switched to 1024x768, but the underlying problem is still present. How do you develop a site that will evolve with the technology.
I hate developing projects that I know are going to be obsolete in 3-5 years, so I started too look at my options. I was looking for a way to abstract out the sizing of the site to one or two variables at the top of a css file. This got me on the path of developing with ‘em’ for just about everything instead of ‘px’. This allowed me to set the font size at the top of the css file and then build all the sizing of the site in relation to that font size. Now when you change the size of the font, the entire site scales consistently with the size change.
There are a few challenges with this approach that I will highlight in another post, but in general I feel this is a better way to approach web development. Since touching is learning, I have added a few examples below.
www.syntenic.com
Not only does this site have relational scaling built in, it also has a user
cue. If you check in the top right of the page, you will see a slider. As the
slider moves, the entire site scales.
If you are really technical you will realize that there is a scaling image map
on the front page. Many believe this is impossible, but as you can tell I have
developed a cross browser compatible solution to a scaling image map. This
will be discussed in another post.
www.siftllc.com
This site also has relational scaling, but does not have the slider as a
visual cue. To change the size of this site, you will need to change the font
size (Ctrl + if you are using firefox).
