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

• Where they’ve been?
• Where they are?
• Where they can go (past, present, and future)?

These three are interrelated: If we consider browsing a site, a journey; then knowing your past and present locations makes it easier to decide where to go next.

Standard Guidelines for Links

• Make obvious what’s clickable.
  For text links, use colored or underlined text.
• Don’t underline non-link text.
• Differentiate visited and unvisited links.
• Explain what users will find at the other end of the link via ‘alt’ and ‘title’ tags to enhance scannability and search engine optimization (SEO).
• Don’t use “click here” or other non-descriptive link text.
• Avoid JavaScript or other fancy techniques (flash) that break standard interaction techniques for dealing with links.
• Don’t open pages in new windows (except for different files i.e. PDF files).

Standard and Non-Standard Links 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
• Website Standards
• SEO Tips, Search Engines and Directories Links to Submit Website – Website Promotion
• Website Standards and Check-Lists

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

• Follow w3c.org CSS and HTML rules
• Use correct CSS and create a separate file and call it in pages
• Use correct doc type HTML info at the beginning of webpage
• Website should be loaded quickly
• Put all java script functions into an external JS file and call that JS file inside page
• Create good navigation based on list (ul, li)
• GUI must be clean and user friendly
• Implement clean and usable design
• Create custom Error pages

For detailed information follow these links:

http://www.w3.org/
http://maxdesign.com.au/presentation/checklist.htm
http://www.w3.org/2002/03/tutorials
www.oreilly.com
http://meyerweb.com/eric/tools/color-blend/
http://www.cssbeauty.com/
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/CSS21/ (css2 guide)

Website Standards 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
• Standard and Non-Standard Links
• Website Standards and Check-Lists

Advices For Valid Markup

• Use (define) backgrounds in CSS, not in html, TD, TR or Table
• Do not define height of table or tr
• Use alt=”" at every image even at spacer and separator
• Place form tag b4 and after table tag and not td
• Use correct doctype i.e.
  
• Use all attributes for tags, i.e. script tags and css link tags. i.e.
  

• In Anchor link where u have to use & use its code like &

Advices For Valid CSS

• Define background color with color, and for transparent use inherit i.e.
  color : #000000;
  background-color: inherit;
  Use these both even one is not necessary to define, second with inherit property
• Use shorthand for properties
• Use generic font family i.e.
  font-family : verdana, arial, sans-serif;
  or
  font-family : “trebuchet ms”, geneva, sans-serif;
• For background and backgriund position use different lines. i.e.
  background: url(../images/menulinebg.jpg) no-repeat;
  background-position:left center;

Validate HTML, XHTML and CSS

W3C HTML Validator

http://validator.w3.org

CSS Validator

http://jigsaw.w3.org/css-validator/

W3C Validation Tips and Best Practices is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

• Modern Font Styles For Websites
• Wrapping Text – Breaking Text with No Spaces into New Line
• Lorem ipsum Ready to Use
• Use Any Font in Webpages As Text
• Change Image Opacity Easily Using CSS or JS
• How to Gain Maximum from CSS
• Create Rounded Flexible Div Without Images
• Astyle Visual CSS Editor
• Simple and Powerful Form Validation
• What is Superscript and Subscript in HTML

Web Standard Guidelines

• Follow w3c.org CSS and HTML rules
• Use correct CSS and create a separate file and call it in pages
• Use correct Doctype at the beginning of webpage
• Use appropriate character set
• Use Valid (X)HTML and Valid CSS
• Use well structured code
• Fix broken links
• Fix JavaScript errors
• Use all decorative images in the CSS
• Mind accessibility for users
• Use “alt” attributes used for all descriptive images
• Use relative units rather than absolute units for text size
• Check cross browser compatibility
• Use accessible forms
• Use sufficient colour brightness/contrasts
• Use all links descriptive
• Include detailed metadata
• Mind basic usability
• Use clear visual hierarchy
• Use easy to understand navigation
• Use about page, sitemap page and contact page and make them easy to find
• For large sites, is there a search tool?
• Use friendly URLs
• Website should be loaded quickly
• Put all java script functions into an external JS file and call that JS file inside page
• Create good navigation based on list (ul, li)
• GUI must be clean and user friendly
• Implement clean and usable design
• Create custom Error pages

For detailed information follow these links:

http://www.w3.org
http://maxdesign.com.au/presentation/checklist.htm
http://www.w3.org/2002/03/tutorials
http://www.oreilly.com
http://meyerweb.com/eric/tools/color-blend/
http://www.cssbeauty.com
http://www.w3.org/Style/CSS/
CSS2 Guide
Web Standards Check Lists

Website Standards and Check-Lists 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
• Standard and Non-Standard Links
• Website Standards