TODO - investigate variable/flexible width

For the initial experimentation, I picked some random theme.  Today I decided to check out some other themes.

Updating your theme can be done here:

https://yourblog.wordpress.com/wp-admin/themes.php?tag=flexible-width#themenav

Fixed-width vs. variable-width. ∞

The first one I picked was nice, but then I saw that it was fixed-width.  Man, people still do fixed-width these days?  Pathetic.  There are other themes though.  WordPress calls them "flexible width", but i'm used to "variable width".

I was also genuinely confused by the theme preview.  They need to allow "click anywhere" to close it, but that's probably not possible with the technology used.  Well, the 'x' was in the top-left, but I was expecting it to be in the top-right.

Well, I ended up with a "Shocking Blue Green" theme.  Not because I'm overjoyed at it, but more that I appreciate its minimalism and decent fonts.  I'll have to hunt around for some other minimal and variable-width themes.. and maybe I'll settle on something better.

As an aside, I actually know of a compromise between fixed and variable widths.  I've heard it called "rubber", "plastic" and "fluid".  It may or may not have a minimum width as required by its content, and then it becomes a variable width thereafter.  Sounds normal, right?  The thing is that it also has a maximum width.  This is great for people like me with gigantic screens who sometimes browse nearly fullscreen.  Websites that are fixed width are just offensive to me.  I have all this space and they're wasting it.

On that note, I'm also offended that website authors force me to use their theme instead of respecting my wishes to set things myself.  Luckily there are all kinds of tools for that.  But then again, I don't particularly care these days..

Additional investigation. ∞

WordPress.com doesn't allow me to upload a replacement theme, so I'm stuck with the crap that's up there.  I think I'll end up going with a fixed-width theme simply because they look way better.  Besides, the additional space given by being variable width doesn't seem to be a good idea with reading this much text.

I checked out a whole lot of 2-column candidates.  Most of them were trash, some of them would need some hacking for them to look decent, leaving two "out of the box" candidates:

Light ∞

• The subtle background colours distinguish the different blog posts from oneanother.  Not so keen on the actual colours and effect being used, but I like it.
• I like having a background colour, and this one's not bad.  Good border between the content area and the background, but I'd prefer a proper shadow effect.

• Taking a second look, the header is just wrong for this style.  For a fixed-width to have the proper background-vs-foreground layered effect, the header has to be a part of the content area.  I don't like the way this one looks.

Ocean Mist ∞

• Nice background colour, and even though I don't generally like gradients, this one looks pretty good.
• Nice header that's integrated into the main content column.  It's even made to "float" a little down from the top, which looks even better.
• I wouldn't have put the blue stripes between the top title and picture, and between the picture and top blog post.
• The rounded corners look great.
• The foreground shadow dropping onto the background is the same thing as with Light, but it seems nicer here.
• The separation of blog posts is simple and clean.

• Heck, even the default image seems.. hopeful .  I'll keep it.

  Update: One annoyance I've found is that images have an ugly border by default.  At first I thought I would let this issue slide, but I figured out how to remove the border fairly easily.  It's annoying and I wish I could force a 0 border by default.

More on variable width websites. ∞

Props to centrinoblue's post:

The long answer begins with "it depends" but the answer you are probably looking for is to design for both. You should try to take advantage of modern CSS techniques such as max-width and min-width to allow for a variety of screen configurations. IE6 unfortunately doesn't support this so you will need to either:

1) set its width to a specific value (recommended)
2) Use JavaScript to configure the layout once the page has loaded.

The key is to set min and max widths for fully compliant browsers and then set the fixed width using "_width" for IE browsers lower than 7.

#ContainerElement
{
  min-width:600px;
  max-width:1100px;
  _width:1000px;
}

The use of the underscore acts as kind of a backwards compatible hook that pre-standards browsers would see but standards aware browsers ignore. Some call it a hack but I would suggest it is being used exactly for what it was meant to. Besides it is still a relatively elegant solution to a tricky problem.

As for what to set for max-width I think you are pretty safe going up between 1000 to 1200 px. I haven't seen a monitor smaller than that in a long time.

Whoa, even "WordPress" isn't considered a valid word by this spell checker.