Techie Tuesdays: Elements of a Site

Lindsay of White Oak Creative is back with another edition of Tuesday Tips! This time, she's chatting about her re-disgn of our very own Midwest Bloggers site {and doesn't it look fantastic?} She cleaned up our coding faux pas and  made out site sleek and streamlined, all while keeping it oh-so "Midwest Bloggers". A BIG thank you to her for all her hard work!

All elements of your blog should reflect your overall brand. The key is consistency! As you may have noticed, the Midwest Bloggers blog site looks a little cleaner. I worked with Maya and Lauren to clean up the site, so that it could leverage current branding from their Midwest Blogger Square-Space site. 

Matching Header & Navigation

The previous MB blogger site had the old header, a quick and easy fix. If you have a website and blog, you want to make sure that your header is the same. As for navigation, even though the Midwest Blogger site is built on a different platform, the menu bar should be consistent. I organized the blogger menu bar to reflect the website, and I also matched fonts and colors (teal for links, red on hover, using the Google Web Font "Cabin"). This navigation bar adjustment is huge: regardless of the site, the user doesn't have to search for a page, thus improving user experience.

Favicon

A site without a favicon is an incomplete site in the web designing world. For blogger, it is very easy to enter a favicon image. Go to your dashboard, "Layout" and click "edit" favicon on the top left. I recommend uploading a favicon file (.ico), and you can use sites such as Favicon-Generator to take a square png or jpeg file and convert it. When selecting the favicon, I chose just the heart as it is the main symbol. Text is nearly impossible to read in a favicon, and I would also opt against text unless it is 1-2 letters.

Stylized & Active Buttons:

Typically, buttons, especially for search and subscribe are not designed. To format and stylize the buttons for follow by email and searching, you have to have a pretty good understanding of CSS. For the Midwest Blogger site, I made sure that all the buttons (including social media) were red, and when someone hovers over them they turn "teal". Also with the social media icons, I created custom ones that reinforced the "heart" theme. If these elements don't follow with your overall look and feel, they have a tendencies to look out of place or incomplete.

Align Post Content & Text

One of the biggest things I did in the site redesign was align the page. First, I built the site at 960px wide, typically the standard. The 960 grid system is really popular, especially in regards to mobile sites. Responsive design wasn't considered in this site as blogger has it already built in. Secondly, I aligned the images and the text using CSS. All images in the post will be the full-width. Whether an image is 800 px or 1200px, the image will always get resized proportionally. When having this feature added, it is important to save images larger than what the max is (in this case 625px). It is better to render down than to render up (blurry images). I also made sure that all the text would align justify. If writers of the post wanted to center the text, they can over ride it in the individual post. These two features ensure consistent presentation within each and every post. 

Custom Footer

Very often, especially with blogger sites, posts footers use the typical blogger footer. Not only does it look out of place, it is a missed opportunity. A custom footer is a great way to close out your post, plus it allows for custom social sharing. A defined footer delinates between posts more clearly than the standard version. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay atlindsay@wocreative.com and she will answer them in her weekly series.