The Fulcrum Blog Gets a Design Refresh

23 September 2013 by Tim Campbell

Frequent readers may have noticed that the blog got a bit of a refresh recently. We originally went with the tried and true 2-column layout, consisting of a main column for the posts and a sidebar for the search, author information, and things like recent posts & categories. That style of blog worked and was all we really needed at the time. Like many things, however, the design started to reveal some flaws over time, and it wasn’t long before I felt it was in need of revisiting.

Design update

There was a certain lack of joy in the design and content organization of the old layout. There wasn’t necessarily anything wrong with it, but it didn’t make make me feel pleased when I looked at it, either. A solid blog design works on both sides of the coin: the visitors have an easier time reading and navigating the content and the writers (at least myself) like having their content presented as beautifully and elegantly as possible. When the sizing, spacing, images, and formatting is all cohesive, it makes filling up that design with good content all the more rewarding.

The rework began with the main column, the desire being to make the readability better when focusing on an article, and making the overall aesthetic less harsh when quickly scanning the blog home. For improved scanning, the size of the headings was decreased and margin was added above and below so they would stand out more despite their decreased stature. A small readability change was to increase both the size and leading (how much space between each line of text) of the copy which relieves some of the visual burden caused by small, scrunched paragraphs.

One way to tell if the hierarchy of the page is out of whack is with the classic squint test. Squinting blurs the page to the point where the most visibly prominent content will draw your eye. As you can see below, we had a bit of a problem with our page hierarchy.

Refocusing design

Where am I supposed to be looking, exactly?

The new layout and design gets the focus from secondary elements in the sidebar to the main column where it belongs.

Redesign focus

The eye is drawn to the center, where the content resides

The squint test notwithstanding, another visual quirk arises when a sidebar is part of the blog design: post-sidebar purgatory. This is the dead zone created by a sidebar that runs out of steam before the bottom of the page is reached.

Removing sidebar

Additionally, the decision was made to limit the amount of content per post on the blog homepage, further enabling easy scanning when looking for a recent article. It’s tiresome to sift through a blog that has full posts for each index entry. You never know whether you’ll be scrolling for ages to get to the next post, only to blow by three shorter posts once you do reach its end. Limiting the post excerpt to just a few paragraphs helps eliminate this particular nit.

For those looking for something specific, we moved the search from its tiny square in the sidebar to a full-width text field sitting above the main content. When seeking an older article, this is the first thing for which many readers will be looking, so it made sense to put it front and center. The less important navigational elements such as social links, rss, newsletter signup, and link to the archive were all shifted to the base of the page, keeping the content first. We also limit the number of posts visible on the home page to ten, alleviating the potential problem of never reaching these navigation elements. For older posts, readers needs only click the archive link or use the search box to find what they’re looking for.

The post page received its own attention as well, as we cleaned up the author, social sharing, and comments sections.

Finally, we added the ability to showcase a “Featured” post which adds a more impressive banner image along with a portrait of the author. Typically, this will be the most recent post we publish, but on occasion we may have a guest author or important even we want featured for more than a few days. For this, and situations like it, the featured post works perfectly.

Redesign featured

While we’re always making incremental improvements to the site, it’s nice to give things an overhaul now and then when they fall behind. Even something as straightforward as a blog can have many areas ripe for improvement when you focus on what really matters. Check back with us in the coming weeks and months to see what else we send to the cutting room floor.

About the author

Tim is our creative director. He oversees the visual and interactive aspects of our development process.

comments powered by Disqus

Sign Up Today & Start Collecting Data In Just Minutes!

Start Your FREE Trial