Template MakeOver – Procedure 2

A few weeks ago, we started a makeover of our bland Sand Dollar template, presenting the code as a tutorial for our readers who want to learn some common tweaks. The first article of the Blogging Design Tips Series explains why the blog’s design needed cosmetic surgery. The plan was to make several ‘nip & tuck’ changes so we can compare ‘before’ and ‘after’ snapshots. However after Procedure #1, we decided to do a fast forward and give you most of the surface changes at once. Future procedures will cut a bit deeper into the template structure.

PROCEDURE #1 Recap

The first procedure changed the background color of the posts (only) to white and limited post text to 70 characters across the page. For comparison see the “before version.” For the code, see the Procedure 1 article of the makeover series. The results were subtle but noticeable. One reader with visual impairment commented on the improved readability after this very simple change.

PROCEDURE #2 Results

This is a snapshot of the model for the second makeover. In this procedure our goals were to have a more dramatic background color without overwhelming the text. A border seemed to do the trick with a discreet column separator and frame around the main posts. Pictures in each post should add visual interest. The black margins make the entire thumbnail stand out more in social directories. The page background is a mix of blue and purple, with connotations I’d like the blog to convey and share via a two-way flow with readers: creativity, wisdom, pride (purple) & dependability, calmness, and friendliness (blue)!

*** press to see the code ***

NEXT STEPS

These changes serve as both a learning experience and a trial. At the end of the makeover we can then determine if we still need to install a different template. Future procedures will

  • revise text sizes and colors using Blogger’s Fonts and Colors.
  • remove obstacles that people with visual impairments may be hitting.
  • add a menu bar for navigation and a second element below the header.
  • make the header image taller — then may not need the black margin.
  • switch the post column to the left side and possibly add a third column.

Let me know what you think about the direction the design is taking!

Other posts in the blog design series.
Color in Blog Design
How does your blog look in candid shots


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.