Structure and clicks and rigidity


I tend to carry the structure of the HTML that makes up a web page into its presentation. What I mean by that is most of the block elements tend to stack on top of or next to each other rather than flowing in, around or through each other. Even if the layout isn’t built on a fixed grid, there is often that clear separation of elements defined by right angles and gutters.

There isn’t any openness.

It works out nicely in a lot of cases but is not necessarily appropriate for everything. ES CA PE is a very loosely defined company (if you even want to call it that) yet the site has defined sizes and places for everything. Is that right? It’s not like this sort of rigid design is required for all flawlessly (HA!) structured HTML documents yet everything I work on eventually develops into it.

Yesterday I was deciding what to do with the camera links on this site. I didn’t want them to be as constrained as they were with the previous method (376x300px, top left corner, always). One of the ideas was to generate the image onmouseover in its own floating box. Depending on link location within the paragraph and image size maybe it would end up overlapping the column on the left or be generated over the title of the next post. Whatever. It would just float about openly. I played with it and hated it. That quickly turned into what it is now – an image generated onclick within the post body.

Why onclick instead of onmouseover? It felt right for that design. Yet with the floating image box, onclick seemed too rigid and onmouseover made the image feel more like it was generated out of the content. I searched around for other sites skipping the click. The standout example is That site has a less rigid, more open feel to it. Does the lack of click emphasize this?

Rounded corners and a lack of clicks won’t kill the rigidity of a design on its own, but I think they help (maybe not the rounded corners). Clicking definitely has an effect on user experience though. For more discussion on that, see Andy’s post about it.

Beyond the accessibility and UI problems associated with not clicking, dropping the click can help remove some of that crystal-like structure from a design, given you want to do that in first place. Grids are great for keeping information in order and helping the user make sense of a page, but it’s more difficult to develop a site that isn’t glaringly attached to a grid than it is to let just enough of that grid come through the design to give subtle structural clues. And sometimes that’s the best answer to a problem.


  1. matches 20051219

    I think and some other sites trick you into not seeing structure by minimizing per page content (words especially) and putting everything on a white background so you don’t notice where the true edges of the content are. There’s a grid still but there’s a lot of white space around it, and they don’t box everything in.

    If you were to ask for one way to open up ES CA PE (not that it necessarily needs it), my answer would be: make the content area and the background the same color. The less things are boxed in, the less it will feel “structured” even if the underlying structure doesn’t change.

    And I think you made the right choice for image display. Setting them up as mouseovers I think would have been cause for annoyance when someone moused over the link and the text started hopping around.

  2. waytoocrowded 20051219

    Exactly – follow the grid, just don’t emphasize all its divisions.

    With the mouseovers, the text didn’t jump around, the image appeared on a new layer on top of it. Then disappeared onmouseout. But either way, it was lame.

Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.

Search WayTooCrowded
The Header Should Always Point Home