What is Toluu?
Toluu is a free service for sharing the feeds you read and discovering new ones.		 Get Invite

Fog of Eternity | Website design and discussion

website design | usability and accessibility | social media | online marketing


Absolute Positioning - A Brief IntroductionDecember 31 2008

Like many website designers I’ve learned a lot about how to use the float property in CSS. Also like many website designers I’ve had to suffer the frustrations of glitches across different browsers (particularly Internet Explorer) and unexpected results in my design. I’ve made a specific effort to eliminate reliance on floats as much as possible.

The float property certainly has its place, but I wanted to concentrate on developing CSS layout based on absolute, relative and fixed positioning. It’s flexible and often more cross browser friendly.

Absolute Positioning

Absolute positioning allows more comprehensive control over where page elements are positioned. It also allows flexibility to rearrange a page layout in appearance terms without altering the HTML structure of a document (although I prefer my HTML to follow the logical structure of the page and be reflected in the design). 

Absolutely positioned elements in a website are positioned in respect to the nearest containing block that is itself subject to position : absolute or position : relative. This defaults to the HTML element, but basically whenever you specify the BODY element or a DIV as positioned then you can use absolute positioning on elements within it.

We have a very simple HTML layout.

<html>

<body>

<div>

<p>hello</p>

</div>

</body>

</html>

Difficult To DesignDecember 30 2008

Websites are a flexible and interesting medium for implementing design, but there are drawbacks and difficulties to certain styles. There are themes and ideas which don’t translate well or easily to a virtual format. These limitations are not always technical in terms of document structure, HTML or CSS. Sometimes they are just concepts which don’t seem to translate well to a computer format.

Image of knight praying

When Virtual Is Too Clean

Computer graphics capability is continually increasing. It is still difficult to overcome the “clean” look of digitally rendered images, however. Websites lend themselves most naturally to clean lines, and a modern look. That’s entirely appropriate for the majority of sites, but sometimes you want to try something different. I touched on this recently when talking about the importance of thinking outside the boundaries of technical limitations. Designs that are based on a “dirty” look, or on organic focused design, e.g. wood, stone, are always tough to achieve.

Pre-20th Century styles are more difficult to achieve using digital technology. Websites that focus on older vintage

Design Inspiration: My Big Black BookDecember 15 2008

I’m a happily married man with no need for a little black book. I do have a big black book that I use on a regular basis. Last week I talked about the need to take a step away from the computer screen and take time to think about design without technical limitations and preconceptions. My big black book is something I use to inspire myself.

Picture of black scrapbook.

What’s The Deal?

It’s really a very simple idea. Website designers don’t need to take all their inspiration from online sources. If they did then all our designs would be derivative and generic. We should be taking inspiration from every medium we can lay our hands on.

Magazines, newspapers, brochures, business cards, etc. There’s a wealth of great design material in print. Of course there are books specifically published to provide design inspiration, but the more eclectic your source the more inspiration you can find. My big black book is a scrapbook. A scrapbook of images, headlines, photographs and other material that I’ve seen and thought was interesting.

Just Think About DesignDecember 10 2008

I recently set up a new personal blog called Roaming In Thought, with a victorian/steampunk design. I’m very happy with the way it turned out. It may break entirely in Internet Explorer 6, but for a personal project that’s not a major priority for me to fix. Creating a steampunk themed blog design was quite tough, and it made me realise that it’s very easy to slip into standard ways of thinking when it comes to web design.

Screenshot of Roaming In Thought

Bad Habits

When I was first drafting a few ideas for the design, I was doing so on my laptop. I played around with Photoshop, drafted some basic HTML and CSS, looked around StumbleUpon for inspiration. You know, the usual kind of things web designers often do when they’re getting started on a new project?

None of the ideas I was coming up with were particularly satisfying. They were too grid based, or boxed off. They looked too slick and modern. Worst of all, they just looked kind of derivative. I was looking to do something a little bit different with the design, trying to create something that had an antique style, and my usual practices weren’t working.

Step Away From The Machi

In An Ideal World We’d Be Free To ChooseNovember 13 2008

Browser makers always go on about how their product is so effective at adhering to web standards. Microsoft is always criticised for how badly Internet Explorer deals with the same issue. Both of those claims have always been exaggerated wildly. Yet are we now finally reaching a stage of standards adherence and consistency between browser products?

A pain for designers

We web designers are always talking about the difficulties of designing web sites that will be compatible across various browsers. And new version of the likes of Firefox, Safari and Opera always trumpet about how they so closely adhere to standards. Usually they direct you to look at how well their browsers deal with the Acid test, as a demonstration of how good their product is.

From a purely design point of view, in terms of rendering CSS correctly, the biggest advantage of web standards is that it means that designs will be rendered consistently. And for a long time we’ve never had that. Regardless of how great a browser was supposed to be, there was always some glitch or other.

Even the supposed standards compliant browsers couldn’t render pages consistently. I know, there’s been numerous times where a page that looks fine on Firefox has layout disasters on Opera or Safari, or where Firefox has failed to deal effectively with mouseover menus. And of course Internet Explorer 6 has been a law unto itself, and Internet Explorer 7 still behaving unusually from time to tim