Sooner or later you will feel dissatisfied with your current blog / website design. You will have to change the website design for better either for expanding needs or better look and feel. I recently needed to redesign my one of blog’s theme. I have much experience in designing websites and blogs so luckily I know how to take it to the best level and what you need to keep in mind and what to take care about while redesigning your current theme / design so that you may not have to start over and do the tweaks. Alright I will share everything and process what I went through in designing my new blog theme. Once you go through reading all this, you will know what to keep in mind for best results. I have also included updates which I did to my blog for better user experience, better SEO and better ads placement.
I needed to redesign the blog theme. Why? Let me explain:
What I was Unhappy About?
- Current theme was kind of lame.
- Header needed to be professional. There was a lot of free space in header.
- I needed a clean theme with all white background so that user may focus on content and theme may load faster
- I needed to remove recent posts, recent comments and popular posts from sidebar.
- I needed a single sidebar. There were two thin sidebars. I needed one wide sidebar.
- I needed a sidebar where 300px width ads can be placed.
- I needed two ad spots at the top of the post. So I needed content area where 336px and 300px width ads can be adjusted.
- I needed two ad spots at the bottom of post similar to top.
- I needed to remove categories from the right-sidebar and bring them down to the blog content.
- I needed to take categories, tags, pages at the bottom of the blog because search engine crawler crawls pages from top to bottom and left to right.
Research – RnD – Preparation
- The Google ad width was 336px which I was using at the top.
- Next to that, ad can be of 300px width.
- Sidebar can be of 312px width inwhich 300px width ad could be easily adjusted.
- The screen area available for display is 1004px width.
- I need to place two ads at the top of post and two at the bottom.
- Categories can go down to content.
- Below the bottom ads, I can place ‘tags’, ‘share buttons’, ‘top searches’ etc.
So here is the model.
- Top header
- Rightsidebar with 312px width
- Leftside area for content (336+300px+extra space)
- Two top ads below title
- Content
- Page navigation
- Two bottom ads
- Tags and category for post
- Share buttons
- Related posts + 300px ad spot
- Related searches
Give a look to mashable.com, instantshift.com and smashingmagazine.com for layout and elements orientation and style because pros do it best in every way. Blog the should be SEO ready, search engine friendly, user friendly, clean and there should be no empty spaces and you should choose ads spots wisely so that you have enough space for ads yet site / blog may look good.
Then I redesigned the blog keeping these things in mind and after that checked for W3C validations.
How to Use Sidebar Wisely?
There is no need to display recent posts widget. Anybody can view your blog’s main page for recent posts and activity. Infact do not display widgets in sidebar. Display sharing / subscription options and RSS buttons at the sidebar top. Make sure you have 300px min. width available in sidebar so that you can place ads of 300px, or two 120px or two 150px ads in sidebar. Keep sidebar for the ads. You don’t wanna put all the eggs in one basket. Place ads from different advertisement networks.
Content Area VS Ads Spots
Alright, you have got the main content area where you gonna post the actual stuff. I have been placing one 336px width google ad at the top and one same at the bottom of the post but you know that left some empty space infront of ads. My writing style did not allow me do ad float left and type some text infront of it, so it was always the post title, then 336px google ad below and the empty space infront of it and then below an image and then below the text for post.
The best practice to do is to not leave any area empty in your blog or website. Fill the website with proper elements and stuff according to space available and other limitations. What I did was this. I made content area bigger enough to fit two ads at the top of the post. one 336px width ad and one 300px ad side by side at top of the content and then content below. Same I did for area below the post. Two side by side ads below post. One 336px and one 300px width. That’s it. All spaces filled and I used more space for ads as well.
Where is the space for More Ads?
You know, sometimes you need more ads space to experiment with another advertisement network to make some extra bucks. Now the sidebar has got ads, top of the post and bottom of the post has got ads and what next?
There is a cool plugin many bloggers use named as ‘related posts’. It displays related posts for the topic. We use it below the post. That related posts area can be of 336px width and infront of that you can have 300px width ad.
Categories, Tags and Pages Links Placement
You know what? These are not important. You do not need to show whole category tree in the sidebar. Soon you will have lots of categories and lots of tags and even lots of pages. Take all these at the bottom of blog. Above footer you can use categories and few popular tags. In footer use page links. That’s it. Search engine crawler crawls from top to bottom and left to right. So the actual content should be near top and left of all the available area.
Based on the stuff I described, I have designed my theme and I am pretty much happy about it. What do you keep in mind before redesigning the theme? or what did you find useful in your latest design technique and approach?
Redesign Brainstorming – Keep in Mind Before you Redesign is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites