I’ve been meaning to tidy up around here for quite some time, and this past weekend I thought I’d give it a go. The site was in desperate need of reorganization as far as layout was concerned. Initially I spent some time on the design structure, working towards an underlying grid to keep things in line.
What Triggered the Change?
Since the launch of this site, I’ve tried to think of elements I’d like to add or remove in order to enhance its value. One of the first things on my list was the Bookshelf you see below. I wanted to keep better track of the book reviews I plan on writing up in the coming weeks and thought giving them their own real estate would be a good first step.
Another thing I wanted to accomplish was giving the most popular articles some emphasis. I took a few minutes and wrote up a quick WordPress function to grab the ‘top 4’ articles and include a short description about each. Hopefully it will help first time visitors quickly discover the most active pages.
Another big change was the sidebar content. The search form was streamlined and placed in a more common position. The introductory statement was also given more prominence for first time readers. The sidebar also includes more links of my choosing that I feel would be of use to readers, along with the lists of recent articles and comments.
Getting Down To Business
Once I had a list of things to include in the new design, I began to wire frame a mock. I don’t often pull out a pen and piece of paper to start a design mock, but thought I would give it a shot this time. In all honesty it was probably the best move I could have made. Making a quick sketch of possible ways to organize this new content really gave me a great view of the overall picture.
Will the New Design Be Liquid or Fixed?
One thing I went back and forth on was whether or not to make this version a liquid or fixed design. The debate between liquid and fixed designs has been going on for quite some time, and probably won’t die out any time soon. There are good arguments on both sides, but what really got me to go with a fixed design was how I use the Web. Liquid designs are great — they use all available real estate (most of the time) and can really make the most of your resolution. Unfortunately with high resolutions, you’re often faced with extraordinarily long line lengths, which can be difficult to read. Or so I thought. I decided to take a step back and observe what I prefer, and in all honesty, I prefer fixed width. With excessively long line lengths I feel like I have to make an effort to stay on each line instead of concentrate on the content. It helps that other people feel the same way.
Now that I had decided I would stick with a fixed design, it was time to decide on window width. I’ve been running Mint for a couple months now and thought I’d check out what readers were using.
- Greater than 584: 98%
- Greater than 744: 98%
- Greater than 968: 88%
- Greater than 1096: 51%
- Greater than 1344: 9%
- Greater than 1384: 8%
- Greater than 1544: 4%
- Greater than 1624: 2%
- Greater than 1824: <1%
Given the statistics, I made the decision to stick with aiming for at least 1024px resolution. I thought I would take some advice and try out a 960px wide container for the site.
Some other less obvious changes
I incorporated a tag I had previously left unused for the submit buttons in forms. I think it was a wise decision as they’ve proven to be much more flexible.
I’ve also experimented a bit with image replacement, as it’s always a touchy subject. Trying to find a solution that is both semantic and supports images disabled & CSS enabled at the same time is fairly daunting. I’m not sure if I’m a fan of what I’ve incorporated, as it gets a bit ugly with more than a few bumps in text size. I plan on giving it more attention in the near future.
There’s Still Lots Left To Do
I still have a lot left that I’d like to add or change about the site. One major thing is incorporating a working contact form that doesn’t cater to the massive amounts of spam bots floating around. Does anyone have any suggestions? It doesn’t have to be a WordPress plugin per se. I also hope to come up with a more interactive navigation idea. When moving from one link to the next, it is impossible to tell when you have moved to the next item; not something I aimed for.
I’m in the process of reorganizing my 404 page which is in desperate need of repair, along with a handheld style sheet. I plan on cleaning up the leftover items over the coming days, so if you notice anything out of whack, you know why. All in all I’m liking the new design and hope it goes over well.
Comments
Very nice. Can I ask why you’re using black backgrounds and small white text for the headers behind the images? I’m curious : )
Also it might be handy to add cursor:pointer to the submit button so it acts more like a button.
I’m a bit of a lurker, love the site.
Your approach to image replacement works well in my opinion. A very small percentage of users would boost the text size more than twice and the system you’ve implemented caters well to those who have suffered under FIR etc.
The ‘Bookshelf’ and ‘Popular Articles’ are looking good too. Kaaya makes a good point about the cursor styling on the new submit buttons.
Have you thought about using more :hover pseudo-classes on divs or paragraphs? For example, links become bold and/or underlined when the user glides over them. I think it might work well in the sidebar?
Some nice additions, thanks for sharing.
@Kaaya: The black backrounds are there in an effort to work with someone who has images disabled and CSS enabled. I understand that the black backgrounds are stark at first, I need to work with that a bit. I’m glad you decided to speak up and ask the question. I’m definitely going to change the cursor on those buttons.
@Sam: I have absolutely thought about incorporating some :hover pseudo classes and they will start appearing quite soon. Thanks for leaving your ideas!
Looks good, I think you could use some more margins though, especially to the left. The beginning of each row is kinda hard on the eyes, at least on my monitor.
Ah Jon, you cannot believe how happy I am to see this as it validates my own decisions as well. I recently made major alterations of my site – one of the alterations included resizing my site specifically for 1024×768 and above. It’s good to see another chap doing something similar.
Lookin’ good dude.
Looks good Jon. I’m glad you made this change as everything seems to “fit” better now.
Jon: It turned out great. Just enough of a re-align to improve things that needed it, but didn’t throw the baby out with the bath water, so to speak. I am glad that it retained what makes Monday by Noon, um – Monday by Noon.
Thanks for the positive feedback, guys!
@Frederik: Thanks for your input — a few more pixels might be just the ticket. I’ll have to add it to the list of things I still need to work with.
@P.J.: I’ve been watching your realign progress and you’ve done some really great things over there.
@Michael: That’s exactly how I felt after I finished with the new design. The site feels much more organized now.
@Nathan: Thanks a lot for stopping by and leaving a message. Your tips really helped to finish off what was started and your suggestions helped the entire thing come together. Thanks a lot for the advice!
[…] As you can see, the new layout still sports image based headings for much of the reoccurring content around the site. I took my usual approach of marking up and styling in that I began with bare XHTML 1.0 Strict and then added the CSS after that was totally complete. As I got to the first image-based heading, I took some time to think about a better image replacement technique. […]
I always get pretty nervous doing a redesign on a blog. I must admit that css is not my particular strongpoint and I know from experience how easy it is to get one tiny little thing wrong and screw the entire layout and then spend ages tearing my hair out to find what went wrong, going cross-eyed staring at the code!
Kudos on a job well-done.