WordPress 3.0 and Fluid Layouts

As you might have noticed, I have yet again, redesigned my blog. This stems from both the designer-inflicted restlessness and the desire to keep up with the web design world. I really wanted to dive-in to WordPress 3.0 but didn’t simply want to bring my old theme up-to-date. I wanted a change, something different and ridicu­lously minimal.

A step toward fluid layout

I made the decision to take-on the challenge of going super-minimal and designing a fluid theme based on WordPress’ Twenty Ten core theme. I feel my minimal effort is far enough away from the core theme to be acknowl­edged. I do not feel it is as far as I want to go, nor how far I will invariably go. It is a small step.

It should now be more legible on mobile devices and cross-browser/resolution display. The large background image is managed through WordPress’ back-end and is set to a fixed position. I have a semi-transparent .png image repeated through the <wrapper> of my site structure. I know that I could have approached my site design from this viewpoint anytime I wanted. What gave me a kick in the pants was the added function on the back-end interface. It put my mind into that kind of simplistic mode. I love the idea of changing the feel of my website utilizing a large background image — and not having to SFTP into my site to do it. Sure, it’s been done to death, but I’ve never done it. This is my time to do it and it’s damn practical.

Fluid Layout at 1680 pixels wide

Fluid layout at much smaller resolutions

Whoa, what’s with the logo?

I’m trying out a new logo. I hate, hate designing logos for myself. I wanted to stay away from initials, as they are just not alright with me at this time. I have chosen to take on a semi-nerdy (glasses) plus awesome (beard) kind of joe-like grangler logo. Let me know what you think.

Overall

I’m striving for minimal layout and styling — mixed with some WordPress 3.0 features (background images through the admin interface) and sensible typog­raphy. Most elements are struc­tured using percentages for width, margin and padding. This way at any resolution elements will expand and contract accord­ingly. Where this fails, currently, is where the “featured image” items are displayed/styled in the “index” loop. At large resolu­tions (larger than 1680 wide) the featured image and the post content will noticeably separate.

I have nothing else to say at this time. Thank you for being grangley.

Update: 7/21/10

I totally changed some minor things around, mostly styling. I’m no longer using WordPress’ background-image function or image-header function. They became too cumbersome and I didn’t like the code output structure (not the most semantic or load-friendly). I am going to continue refining the styling throughout the site. My goal is geared more toward content right now, over design elements. I need to go minimal, and I’m never, ever happy with my own website. With these steps toward a fluid-flowing, expandable layout, I plan on working with the pixel vs percent relationship, in an effort to allow the sidebar to fall below content on mobile devices.

More later…