Time for a Refresh

Recently I decided the MEADOR.ORG website’s appearance needed a refresh. I don’t change the website’s appearance on a whim. This would only be the sixth change in its general appearance in the twenty years MEADOR.ORG has been online.

But I’d been using the Choco theme since 2011, and its stitched leather folio look was skeuomorphic, something Apple famously abandoned in 2013. Even staid Microsoft shifted to flat design with Windows 8 back in 2012. I like Sacha Greif’s take on the design changes we’re seeing across computing platforms.

2011-blog-design

MEADOR.ORG used the WordPress.com Choco theme from March 2011 to November 2016

I’d also noticed how many websites were now using large images to introduce themselves and their stories, which Jake Rocheleau calls the Hero Image Trend. Given the preponderance and popularity of travel posts and their accompanying photographs at MEADOR.ORG, it made sense to start using a large header image and make use of the “Featured Image” option at WordPress.com to customize that header image for individual posts, while randomizing the header image for the long scroll of the default homepage.

So I began searching for a new theme. This blog has been hosted at WordPress.com since 2008, and that service has a slew of choices. Thankfully they let you try out a new theme on your blog, tweaking the settings to see how it all fits together, before imposing it on the published site. Plus they now have some pretty nice filters to search for themes with specific features. That let me quickly narrow down my choices: I wanted to keep the format of a single wide column for posts with a right sidebar for widgets for recent posts, tags, etc. while supporting a large header image and posts with a Featured Image.

2016-11-blog-redesign

The customized Twenty ten theme applied to MEADOR.ORG

I actually stepped back in time for my choice of the Twenty ten theme, which was the default theme for WordPress.com posts back in 2010. It met all of my criteria and had the bonus feature of allowing me to randomize the header image that would appear when loading a page (versus a specific post).

headers

When viewing a page instead of a particular post, the site now loads any of over 75 different header images drawn from the photographs I’ve taken for my travelogues

I uploaded over 75 panoramas from my library of photos I’ve taken on my day hikes since 2009, cropping them to fit the header image proportions. Now a random selection from a collection of my favorite panoramas will greet visitors to the home page and older posts.

Now I can upload and crop a photo to the ratio of 940 x 198 and designate it as the header image for a particular post. I’ll do that for most new posts, since my Facebook page and its cross-posting to Twitter drives most of the traffic to individual posts on our website.

My posts are text-heavy, so I paid attention to that as well. At first I tried Merriweather Sans, but eventually opted to use the Merriweather serif font, which has a large x height.

For headers, I tried almost every available font before settling on the largest size of Fondamento. I liked how it resembled calligraphy. Its uneven strokes are not good for small font sizes, making it problematic for the small date headings I’d been putting on my posts. So I’ll now use a larger size for any date header and the PHOTO ALBUM | SLIDESHOW header links I include on travelogues.

UPDATE: In July 2017, tired of watching the screen load with the default fonts and then redraw with my selections, so I gave up and used the default fonts in this theme.

I can’t predict how long this new look will last, but it seems fresh and engaging. I expect the big header images will sustain this choice for some time.

blog-designs

This is the sixth “look” for the website in its 20 years of existence

About Granger Meador

I enjoy day hikes, photography, podcasts, reading, web design, and technology. My wife Wendy and I work in the Bartlesville Public Schools in northeast Oklahoma, but this blog is outside the scope of our employment.
This entry was posted in technology, web design. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s