Tiny Wiggles
I’ve wanted to take some time to tighten up some things on the site that have been bothering me for quite awhile. With a lull in client work last week (yay, turkey day), I was able get a small list together of my big peeves and get some work done.
After having lived with the site redesign for several months, I’ve come to see that there were some things that needed some attention. Namely, the handling of images and type.
Typecased
When looking broadly at the entire page I felt annoyed with the fact that all of my links in the second column were distractingly red in their normal, un-clicked state. I had the feeling that my eyes were being pulled constantly to the left, which was detracting from reading the entries.
I also wanted to tighten up the look of the text blocks and to set apart my block quotes and citations a bit more to increase overall readability and clarity.
After thinking about it for awhile and looking around to see how others handle their link states, I ended up restructuring my links in the sidebar. I changed the normal link state from red (#f4300b) to a lighter shade of grey (#666) while swapping the hover to a darker grey (#333) and adding in some text-decoration. This allowed me to remove focus from the right edge of the page and bring readers back to the left hand side.
I for the most part left the links in the left column the same as they had been before with the exception of matching the hover states between columns for consistency. This allowed me to set the links apart from the rest of my copy, which was always the point. I just needed to do it between two sets of link properties instead of one.
Other minor changes that were made to the overall type on the page was simply to close up my line-height a bit to give more unity amongst text blocks, while decreasing the overall percentage for standard body text.
In order to address my block quotes and citations, I ended up going with a completely different typeface to completely set the differences in text apart. This simple change made all the difference in determining between regular text and cited text.
Image-ine the Possibilities
Because I pull my image content for the site from my Flickr account, I’m generally stuck with using one of their pre-determined sizes for use in my entries. I like the look of large, spanning images, so I generally go with the largest size that they have to offer (around 500px).
The problem is that my column was about 50 to 60 pixels wider than my image-creating a white space river on the right hand side of my column. The text extended to the full width, but the images didn’t. To rectify the problem I ended up re-sizing my columns a bit to better accommodate image placement. The result was a much more even column with a far-less ragged right edge.
Overall, the minor changes I made increased readability and the overall presentation of the page, which helps me… and you focus on what should be most important: the content.
Now, if I could just track down those pesky validation errors, I think I’d be good.