Discover why I’m going fixed width on all my Thesis sites (and why you might want too)

I’m going fixed width (pixel based) on all my Thesis sites because I don’t want them looking like just another apple in the Thesis barrel. Now, please read the argument and rationale.

I was having a conversation with another Thesis developer last week, talking about what we liked most and least about Thesis, when I realized that one of the things that bothered me the most had nothing to do with Thesis itself, but the people who used it.  No, the problem isn’t that I personally dislike people who use Thesis.

Many people who use Thesis never get radical and make highly customized Web sites. Look at 100 random Web sites built with Thesis and you’ll probably find 80 of them very “Thesisy”; that is, the sites all have a common look or pattern to them because most of the default design options haven’t been changed very much. To change-up the common Thesis look, people need to learn some new tricks or hire the people that know the tricks. (I’m not going to link to examples of Thesisy sites because that wouldn’t be fair.)

Why is this Thesis pattern of Web design propagating across the Web? There’s a simple explanation, I think. People have the misperception that Thesis is a theme, though it does have some theme features (the design options). Thesis is really a framework (Wikipedia entry for framework). The Wikipedia entry details 4 elements of a framework:

  1. inversion of control
  2. default behavior
  3. extensibility
  4. non-modifiable framework code

By that criteria, Thesis is a framework; however, in addition to a default behavior, Thesis includes default design elements that are too irresistible not to use. If there was a framework purity test, the design options in Thesis would probably be out.

This is why I’m going with fixed width (pixel based) Thesis sites: because I can. And hardly anybody else it doing it. Thesis is a framework; I’ll do the design, thank you.

What do you think? Get it off your chest. Leave a comment below.

Photo by *Kicki* and republished here under a Creative Commons license.

9 responses

  1. I’ve been using fixed-width (a 960px CSS grid) for most of my Thesis sites for a little while. For me, it was a comfort level. I’ve been designing for a while, and using a 960 grid is what I’m accustomed to doing and makes it better designer. But to each his own.

    1. Thanks for your comment, Andrew.

      Yeah, I love the 960px grid. I have a Photoshop template of it for my comps that I use all the time.

      And yes, to each his own.

  2. Maybe I’m just understanding this wrong, but I’m not sure how moving to a pixel based fixed width affects anything you mentioned?

    If anything, wouldn’t that just affect your code and really have nothing to do with front-end appearance or achieving anything non-Thesisy?

    1. First Matt, your site rocks. Not that I want to be the arbiter of such things, but I haven’t seen many Thesis sites with a polish like yours.

      Does it make a difference between a pixel-based fixed width and the em-based fixed width? Depends on who you ask. If you want the layout to be 100% consistent on all browsers, you have to do pixel based. I don’t care what anybody says about how Thesis makes account for this in its definition of an em in the style sheet. What happens if someone changes the default font size in the browser? Then the em size changes … then the fixed width layout starts to break. Some people have said to me “don’t change the default font size, then you’ll be okay,” but the issue is not me. The problem is that for 100% guaranteed reproduction, across 100% of all browsers, 100% of the time, you have to use a pixel for layout.

      And, not many people do that for layout. As Andrew mentions above, he uses a common pixel width for his grid based designs. And as Andrew writes also, to each his own. Bottom line: my argument is that people should trying extending Thesis in different ways.

      1. While I understand and agree with your last statement “my argument is that people should trying extending Thesis in different ways”. I’m with Matt that there seems to be a skip of logic in the post: changing from ems to pixels will not result in a visual change for 99% of users. I guess it will come into play later down the line when you make more changes.

        1. I don’t see what the difference would be. 96em is as near as dammit 960px, and while going with a fixed width makes development a bit quicker (by about 10 seconds), it certainly doesn’t provide any visual change.

  3. I think that you’re focusing on the wrong element when it comes to what makes a site look “Thesisy”. For me, it’s the navigation bars, headers on the sidebar, bylines, and the links to the comment. Those all make Thesis very distinct from other WP themes.

    When I start customizing the Thesis framework, I try to modify those those elements first and foremost. Those changes take away the ‘Thesis’ feel to a theme.

    1. Thanks for your comment, Matthew.

      I wouldn’t say I’m wrong, but I would say that I also agree with you, that there are many other elements that make a site Thesisy.

      As I wrote, there’s this framework that includes the ability to customize design options, and not many people change those. For my own sites I don’t! I made a conscious decision to leave many of the defaults because I just wanted to write.

  4. As a newbie with zero code-writing experience, I kind of stumbled onto this issue after trying to get my under-construction-with-Thesis site to load with intact margins in Safari and Firefox. Using only the drop-down design menus to match the pixel width of the header image with the total column width resulted in a screen image with the body extending way beyond the header in Safari, while the body and header matched perfectly in Firefox. Playing with the browsers’ default fonts did not fix this. I probably missed something very basic somewhere in the how-to’s I used, because none of the Thesis showcase sites seemed to have this problem.

    I did discover that changing the lines of code in the layout to read pixels instead of ems fixed this. But when I made a simple change to something else and saved the changes, the column width definitions reverted to ems. Very exasperating.

    Is there a way to make the switch to pixels permanent?