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

Related Posts

• Standard and Non-Standard Links
• Protect Your WordPress Blog From Hotlinking
• 680 Adobe Photoshop Shapes – Download Free
• Designing Elements – Bullets and Icons Downloads
• DIV Issues, Problems and Solutions
• Website Standards
• Fav Icon Tutorial
• Robots File – Usage and Best Practices
• Website Standards and Check-Lists

Ever visited a webpage when you were trying to access an image, which shows you an image saying that image stealing is prohibited. We are going to use this way. The image will still be displayed from your blog but then it can be small and of low quality minimizing load. So we will create a small image written something like “Content Stealing is prohibited at my server” and upload it on our blog server.

Then, we will edit our .htaccess file, located in your WordPress blog root directory. Sometimes ftp does not show .htaccess file because it is hidden. In that case we can apply a filter -a via ftp which will show us hidden files too.

Add the following code to your .htaccess file:

RewriteEngine On
#Replace ?myblog\.com/
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?myblog\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/donothotlink.jpg
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/donothotlink.jpg [L]

Replace myblog with your blog URL name. For this blog it will be webstylepress
Use donothotlink as a name for your jpg image.

And you are done. Now when anybody shall copy any image URL from your blog, this image will be shown instead.

Protect Your WordPress Blog From Hotlinking is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

• Redesign Brainstorming – Keep in Mind Before you Redesign
• Code Hider Tool – Lock Webpage Code
• Javascript Essentials Part 1
• DIV Issues, Problems and Solutions
• Fav Icon Tutorial
• Robots File – Usage and Best Practices

Blank Line Spaces Problem

Sometimes we use blank DIV. Suppose we use a DIV of 1px height. But its empty. Its behavior in IE and Firefox will be different. To avoid that use [ & n b s p ; ] or place blank gif image of 1px height in that.

Top-Padding Issue

Do not give top-padding to any element which is in div containing id as in example beneath:

<div id="some-id">
 <div class="some-class">
  text
 </div>
</div>

In above case top padding will be applied at class named as some-class and not at id named some-id.

Content Overlaps In spite of Not Using BR (line breaks)

Well, consider header, content and footer. These are three parts of website and in some cases if they just overlaps then you are missing clear both property of CSS.

Use clear:both; in css for every different part of website, for line break.

~~ Header ~~
<div style="clear:both;"></div>
~~ Body ~~
<div style="clear:both;"></div>
~~ Footer ~~

Vertical Alignment of Content In DIV

Things will be always top aligned in case of DIV.
So when placing images in the center of box then you will have to use top padding for that image via CSS.

UL LI List Padding Margin Problem In DIV

UL, LI have default spacings (padding and margin). Whether you define these 0 in CSS or whatever, the spacing between li will be different in IE and Firefox which is not ok when you are placing two lists besides each other and you require same height for both Lists.

Use line-height for li distances and not padding or margin and define max-height property in CSS for UL tag.

Naming Classes

Start class or id names with text and not with numbers.

i.e.
class=”nav” is ok
class=”2-nav” is not ok

Blocked Elements and Inline Elements

Tags with default line breaks are blocked elements while tags with no default line break are inline elements. You can write inline elements in the same line but not blocked elements.
i.e.
DIV, p are blocked elements.
strong, a, span are inline elements.

Difference Between ID and Class

Id is unique throughout the website. Id can not be used more than once in a web page. While you can use the same class for many tags in html.
id is unique and is not repeated throughout site but class can be applied at multiple tags.

Div With Blank Bottom Padding

Sometimes even when we define div height and there are no breaks after that but it takes some space or bottom padding and pushes next content a little more down.

Use overflow hidden property at that div via CSS, containing image, data or whatever which is causing bottom blank space (this problem occurs usually in i.e.6).

overflow:hidden;

Float and Align

mozilla firefox looks for float for alignment and not the text-align. Floating for DIV is shifting Whole DIV to right or left while aligning left or right for DIV is left or right alignment of data or content containing that DIV.

DIV Issues, Problems and Solutions is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

• Redesign Brainstorming – Keep in Mind Before you Redesign
• Protect Your WordPress Blog From Hotlinking
• Fav Icon Tutorial
• Robots File – Usage and Best Practices

<link rel="Shortcut icon" href="/favicon.ico">

OR

<link rel="icon" href="http://www.url/favicon.ico" type="images/x-icon" />

How To Create .ico file?

I create it using my Adobe Photoshop. I have icoformat plugin file which I add in adobe photoshop plugins for having an option of save as .ico file.

Path to add plugin

In my case
C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Extensions

Place there icoformat plugin file and while saving file photoshop will offer option of saving as .ico file. We usually create 16×16 px file for icon and save as filename.ico.

Download Photoshop Icon Format Plugin

Fav Icon Tutorial is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

• Redesign Brainstorming – Keep in Mind Before you Redesign
• Protect Your WordPress Blog From Hotlinking
• jQuery Fancy Date Picker
• DIV Issues, Problems and Solutions
• Accessible News Slider jQuery Plugin Download
• Astyle Visual CSS Editor
• jCarousel Lite Scroll – Fancy Scroll
• Robots File – Usage and Best Practices

How to create a robots.txt file

This example allows all robots to visit all files because the wildcard “*” specifies all robots:

User-agent: *
Disallow:

This example keeps all robots out. No robot will visit your site and your pages will not be indexed by search engines:

User-agent: *
Disallow: /

The next is an example that tells all crawlers not to enter into four directories of a website:

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Disallow: /tmp/
Disallow: /private/

Example that tells all crawlers not to enter one specific file:

User-agent: *
Disallow: /directory/file.html

Crawl-delay directive

Several major crawlers support a Crawl-delay parameter, set to the number of seconds to wait between successive requests to the same server:

User-agent: *
Crawl-delay: 10

Allow Directive

Allow file but disallow folder containing file, for example:

Allow: /folder1/myfile.html
Disallow: /folder1/

Extended Standard

An Extended Standard for Robot Exclusion has been proposed, which adds several new directives, such as Visit-time and Request-rate. For example:

User-agent: *
Disallow: /downloads/
Request-rate: 1/5         # maximum rate is one page every 5 seconds
Visit-time: 0600-0845     # only visit between 06:00 and 08:45 UTC (GMT)

Also read How to Use Correct robots.txt file

More Information

http://www.robotstxt.org
Google Guidelines about robots.txt

Robots File – Usage and Best Practices is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

• Correct Way To Use Robots.txt File
• No Follow Your Own Blog Pages for Better PR
• Redesign Brainstorming – Keep in Mind Before you Redesign
• 15 Best Chrome Addons For Bloggers and Web Developers
• Find out Exact Reach of Sites and Comparison with Each Other in Real Time
• Protect Your WordPress Blog From Hotlinking
• Online Full Free XML Sitemap Generator
• DIV Issues, Problems and Solutions
• Fav Icon Tutorial
• SEO Tips, Search Engines and Directories Links to Submit Website – Website Promotion