Regular readers should notice something new yesterday; I’ve redesigned this blog. I’ve done several redesigns, but this is my first time writing a blog post detailing what and why the changes are made.
Why Search?
This blog doesn’t have search. I wanted to add a search functionality since the birth of this blog. My temporary (or lazy) solution is to send the readers to DuckDuckGo site search query. Since this blog is hosted on Tumblr, the number of features you can add is limited to JavaScript. Therefore, I need to make sure the blog’s loading time doesn’t suffer each time a new script is embedded.
I discovered Switftype, a search engine creator, through one of the tweet by Garry Tan. Setting up Swiftype on Tumblr is merely a few steps by embedding a search form and a JavaScript snippet. They also provide analytics for search term so I can get some ideas what my visitors are actually expecting from this blog. What a nice opportunity for a redesign.
“Where should I put the search form?”, was the first question need to be solved — it seems designer doesn’t just instantly put everything together in Photoshop. It’s usually located in header. It’s not a bad idea if you own sites that depend on search for discoveries.
I need some metrics as references. Let’s take a look at the traffic sources.
This blog traffic sources — from largest to smallest — originate from search engine, referral, and social media. Visitors who come from search engine usually close the page if the post doesn’t match their questions. Sometimes they might find your post related to what they’re looking and try to browse your archive. By adding the search form at the end, they’re given an option search your blog easily. I also want to put priority on the blog posts instead of the search.
Relieving Readers’s Eyes Fatigue
I’m not an expert in Typography nor design, but, compared to regular folks, I’m far more concerned with the typefaces, the line-height, and the width of paragraphs. Along with the words selection and sentence construction, these values construct the readers reading experience.
I want to ensure the readers can read the post from the beginning to the end with the least amount of stress as possible.
I’ve tried both serif and sans-serif typefaces. Sans-serif used be my favorite which was shown by my use of Adelle typeface in the previous blog design. I figure out I’ll need a new sans-serif typeface which is easier on eyes, something similar to Avenir Next, but less geometric. After searching through Typekit, I picked Source Sans Pro as my new base typeface.
As you’ve seen right now, there is no huge differences except the header and footer contents. I’ve added background color for both header and footer to match my Tumblr avatar. I’ve moved some links from the header to footer to create some white space. I’ve removed the background textures to reduce the strain puts on your eyes.
I hope this redesign will make your reading experience more pleasant.