Tag: design

Categories
Culture Other

My latest web design bonnet-bee

I was looking through WordPress themes on the Codex. I find it surprising how many people design themes with flexible-width text columns – i.e. ones where the columns get wider and narrower when you resize the browser window. One of the first things you learn when you pick up a book on typography is that if there are too many or too few words per line, the text becomes difficult to read. That’s one of the reasons newspapers divide up their articles into columns; with such small text, columns running the full width of the page would make it very difficult for the reader.

Picking a book at random off my shelves (a biography of Lewis Carroll, as it happens), it has about 13 words a line. On my computer, this blog has about 15 words/line. I can’t control how it will look on other system/browser combinations, but hopefully it doesn’t have many more than that. But this online version of Ulysses, with the browser window at a fairly typical width for me, had 24 words/line; and more if I stretch the window. That’s just silly.

Web design isn’t the same as traditional typography, but there’s no need to reinvent the wheel. I just can’t see any advantage to flexible-width columns that would make up for the loss of control over how the text looks – and indeed the overall look of the page. Either decide to support people with small screens, or not, but pick a page-width and stick to it. Of course, if useless bloody Internet Explorer supported the max-width property, that would be a good solution, but you have to work with what you’ve got.

Categories
Culture Me Other

WordPress Theme Competition

Well, that WordPress 2.0 Themes Competition I entered has had 188 entries. Hmmm. I’m not sure I like those odds…

It’ll be interesting to see what people have come up with, and to find out what the judges were looking for.

Categories
Culture Other

CSS positioning

[Sorry, I know most of you won’t be even slightly interested in this]

I’ve just had a major intellectual breakthrough about how CSS positioning works. Or, to put it another way, I’ve just realised that I’ve been being very stupid for a very long time.

I’ve read lots and lots of online CSS tutorials, and either none of them made it clear, or I was being dense. They often suggest that ‘absolute’ positioning is measured from the containing block – or sometimes they say that it’s measured from the edge of the browser window. The containing block theory clearly didn’t work. The screen approach seemed to work most of the time, but it meant that you couldn’t, for example, center the page on the screen if you were using absolute positioning – because it would always be a fixed distance from one of the window-edges.

In fact, absolute positions are measured from the nearest containing block in the hierarchy which has a ‘position’ property specified as something other than static. So if you just set the page’s ‘position’ tag to ‘relative’, you can then move the page around as much as you want and all things you’ve positioned with ‘absolute’ measurements will follow it. Similarly, you can take one area of the page and set it to {position:relative} and then use absolute positioning within that area.

I assumed, you see, that you’d only set the position property if you wanted to change the position of the block in question, not as a way of affecting the blocks contained within it. Now I know better. The CSS positioning system is suddenly much easier to use and much saner. I can’t believe I’ve been struggling along trying to design table-free webpages without grasping this; and I can’t believe that none of the tutorials I read made it clearer, since it’s the single most important thing to understand if you want to use CSS positioning.

Categories
Culture Other

Testers wanted!

I mentioned earlier that I thought it might be fun to enter a WordPress theme competition. Well, I’ve got a theme worked up that I’m thinking of entering. You can see it in action on my test blog here. As you can see, it’s a two-column variation on the Swifts theme with a different picture.

I’ve checked it on Firefox, Safari and IE for Mac, and they all look basically OK, but I haven’t checked it on Windows at all. So I’d be grateful if anyone using IE, Firefox or Opera on Windows could take a look and poke around, see if there’s anything you think might be wrong, and let me know. Cheers.

EDIT: well, I’ve just tried it on Opera for Mac, and it doesn’t work right. It’s startling how no two browsers seem to render the same bit of code in the same way.

EDIT: OK, I’ve sorted that out. Further comments still appreciated. If something looks wrong, it would help if you could give me a screenshot of it so I can see what the problem is.

Categories
Culture Me Other

web design stuff

The more time I spend thinking about web design, the more easily irritated I am. Take Spork. Look at that lovely, stylish, front cover: it manages to have something of a print aesthetic without being heavy-handed, and it’s clear, simple and eye-catching. Classy.

But then you click on the names, and the links open as new windows. Like I don’t have enough windows cluttering up my screen all the time as it is. Look, I never, ever want any link I click to open as a new screen unless I specifically tell it to.

And you just know that they’re only done it that way because someone didn’t want navigation buttons cluttering up his nice neat page layouts. Humph.

Categories
Culture

Every Playboy centerfold

Go on, take a look. Via Design Observer.