Blog

6 Design Tips on how to Create a Sustainable Blog

Jon Hrach, Web Designer Extraordinairre @ Park&Co

Jon Hrach, Web Designer Extraordinairre @ Park&Co

Welcome to my newly redesigned green marketing blog. I’d like to introduce you to the man behind the design: Jon Hrach (Huh-ROCK). I asked Jon if he would take us through his thought process in hopes that you too could use some of his insights in crafting your online presence.

Jon’s Six Design Tips That’ll Make Your Blog “Hrach!”

  1. Easy Read: Don’t put up a barrier for your readers by making the content hard to read. Use larger fonts, shorter line length, and pick a readable type face. Try and also use a dark text color on a light background. Reversed text can be hard on the eyes for long articles. When it comes to fonts on the web, we’re limited to the few typefaces that are included with most operating systems. Stick to a combination of either all serif (times new roman, georgia) or all san-serif (helvetica, arial, verdana). This will ad visual coherency in your design.
  2. Clean-up the Clutter: Bold competing graphic elements will take attention away from your content. The writing should be the star of the show. The most successful blogs concentrate on type-driven design and readable content.
  3. Design to the Writer’s Style: Anticipate how the writer will use the blog. If they post a lot of lists, pay special attention to bulleted and ordered list styles. Don’t forget to style blockquotes, image captions, and heading styles.
  4. Think Archive Accessibility: There is nothing more frustrating than trying to find an interesting blog post you neglected to bookmark. Include multiple ways for readers to find old posts, including archives by date, category, tags as well as a search box.
  5. Conversation is King: Comments create conversation on your blog and keep readers coming back. Take some time to make your comments read well. Use gravatars to show the avatar of the commentator and style the author’s comments differently from others.
  6. Don’t Necessarily Fight Conformity: Just like there are web conventions outlined in Don’t Make Me Think, there are blog conventions, meaning people have expectations of how a blog should look and function. Deviating in an attempt to differentiate your design may risk confusing readers that are accustomed to using a standard blog interface. I’m the first one to rally against conformity, but in this situation, conformity works.

Jon is a brilliant designer and pretty handy around a camera. Check out his blog and Flickr gallery.

It Takes a Village to Raise a Blog

Some additional thoughts specific to this design:

  • We wanted to give the design a “Green” aesthetic without falling into cliches of recycle logos, illustration of Yin Yang leaves, earth, water and sky, etc. Rather, we wanted a more stylish magazine look and feel to communicate our approach to green and sustainable marketing: AdWeek meets Outside Magazine, with a Better Homes & Garden insert.
  • To create visual depth and interest, Jon designed the foreground copy and transparent boxes to scroll over the stationary background image, which was taken of trees outside of our office.
  • Jon points to ForABeautifulWeb.com as a source of design inspiration.
  • The inspiration for much of the navigation hierarchy came from an excellent post by Jason Baer of Convince & Convert, “9 Blog Failures and Remedies.” All of my badges, recent comments, posts, etc., are located at the bottom, to again minimize the clutter.
  • I’ve found copyblogger.com to be an excellent resource for writing tips and techniques as my blog has evolved.
  • Thank you Michael Gass of Fuel Lines for helping me find my voice and for keeping me focused.

Please let me know how you like the new design of my blog. And let us know of design, navigation and content ideas that work for you.

facebooktwitterpinterestlinkedinmail
6 Comments On This Topic
  1. Jason Baer posted
    April 24, 2009 at 11:02 am

    Thanks for the shout out, guys. Loving the new blog. Great job! Be careful about having categories AND tags though. It can create some duplicate-content issues for search engines. There’s some info on that at toprankblog.com I believe.

    Cheers,
    j

  2. Park posted
    April 24, 2009 at 11:06 am

    Thanks for the thought, Jason. I’ll circle back with Jon on it. We appreciate how generous you always are with your web wisdom.

  3. Jon Hrach posted
    April 24, 2009 at 11:17 am

    I’m humbled and flattered by your kind words, Park. Thank you for the feature on your blog!

  4. Publishing green and sustainable blogs for eco-concious followers | ParkHowell.com posted
    May 20, 2009 at 7:01 am

    [...] for your online brand. Include a screenshot for theme selection page in the admin. Here are six design tips when creating your [...]

  5. GenGreen Life » 19 Steps To Launching Your Green Blog That Just Might Help You Save The World posted
    July 8, 2009 at 3:09 pm

    [...] for your online brand. Include a screenshot for theme selection page in the admin. Here are six design tips when creating your [...]

  6. Chicago Marketing posted
    April 15, 2011 at 8:19 am

    Also – if it’s not going to be hosted on wordpress or other, attempt at going with a CO2 friendly server so that you’re not contributing to environmental pollution through your blogging efforts.
    http://www.integraphix.com
    Green Chicago Marketing


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>