If you have ever come across BloggingTips.com, you’ll have noticed they have an incredible design.  It is use-friendly, professional and there’s just something about it that makes you want to subscribe to their content.  That feeling is due in part to the high quality content found on that site.  It is also due in part because of the design.  I contacted Birdtone to see what makes them tick and how they conceive designs.  This is an unpaid review of Birdtone Designs, the shop responsible for this cutting edge design.

Using Bloggtips as an example of their design strategies, you can see the content is priority one.  There are no flashy, distracting features.  If you notice two things on the page, they are either the content or the conversion tools (subscribe form and social media links).  That’s it.

They specialize in blogging designs with a focus on user experience and content.  Their designs are simple and so very easy to use, even a two year old could find what they need.  That’s a compliment.

They do two things really well.  Simplicity and a nifty “ripped paper” effect.  When each are used in the proper form, they create exceptional packages.  I don’t want to speak out of turn, but the cost of their designs are less than you might think.  Although it sounds otherwise, this was an unpaid review of Birdtone.  Here are a few designs from their portfolio.

WordPress comes feature-rich and smooth right out of the box, but have you ever wondered how to customize WordPress?  As in, really making it your own?  Want a blog? Done.  Want a static website? Done.  But are are lots of other ways you can use WordPress to meet your web needs.  Here is a list of helpful tools and tips for how to customize WordPress.

If you’re interested in how to customize WordPress, consider reading our past article on making your blog stand out, as well as this one about WordPress tutorials.

How to customize WordPress

If you’re skilled, you can create a theme from scratch.  This is by far the hardest way, even premium theme creators often use some of their previous themes as frameworks.  To start creating a custom WordPress theme, check out some of these resources.

• Official WordPress Codex Tutorials
• The WordPress Loop Documentation
• WordPress Template Tags

Artisteer

Artisteer is a finicky option.  It will not create a premium quality theme in terms of design.  But it will be valid XHTML and clean CSS.  The good news is you can use Artisteer to create lots of different kinds of themes.  I use it to create a framework for custom themes, then go back and customize them further.  Check out Artisteer here, or read this full review we wrote back .

Hybrid custom theme

Search for a theme with a strong foundation, valid XHTML and clean CSS.  It should have many of the features you want but not all.  You can then take that theme and completely hack it up to meet your needs.  Think about adding new widget positions, changing the column structure or adding a new menu.

When choosing a foundation theme, go premium.  You’ll be glad you did.  They’re just better made, cleaner, with a solid code foundation.  Here are three of the best providers:

• WooThemes
• ThemeForest
• Elegant Themes

How to Customize WordPress’ Look and Feel

Custom Default Gravatars

The Gravatar is an often underlooked (not a real word) feature of WordPress.  The Gravater was incidentally created by Matt Mullenweg, the creator of WordPress.  WordPress comes with a default Gravatar when commenters do not have one.  This is a nice, simple way to give your website a customized feel.

• http://codex.wordpress.org/Using_Gravatars

Custom Comment Styling

Comments are the second easy way to add a custom feel to your design.  Nesting comments is a great way to encourage discussion on your blog.  Quality comments and good discussion are great ways to explode traffic.

• http://www.wprecipes.com/how-to-style-author-comments-in-wordpress-27

Creating an effective “about” page

Your “about” page is the first step when a reader really likes what they see.  When you make the effort to write superb content, a reader will find it and seek more info about your site.  Next stop… conversion!  If they like what they read on your about page, they will sign up for updates and you’ve nailed it.

• http://www.smashingmagazine.com/2009/07/01/best-practices-for-effective-design-of-about-us-pages/

Revamping your footer space

Footer spaces are now being used to show lots of information or tools.  It’s no longer just a silly copyright section.  The link below has some great examples of usable footers.  Customizing this section of your site really gives that extra customized feel.

• http://www.reencoded.com/2009/07/07/20-great-wordpress-footer-designs-for-inspiration/

Customize your WordPress 404 page

Hopefully users aren’t encountering your 404 page often because your links are all current.  However, it does happen, sometimes out of your control because outside sites will link to your site incorrectly.  Customizing your 404 page says to your readers: “we went the extra mile to offer you a unique experience.”

• http://www.smashingmagazine.com/404

Customizing the login page

If your site employs the user function of WordPress, creating a customized login page can be a nice touch.  Somehow branding the login to match your site but also be creative is a great touch.

• http://wordpress.org/extend/plugins/bm-custom-login/
• http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/
• http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

Revolutionary thinking (put content before ads)

The instinct to make a few bucks for all the time you’ve spent on the content is sometimes overwhelming.  But if you listen to one piece of advice on this page, prioritize content over revenue.  You will reap the benefits.

Think of this as a design choice as well as a chronological choice.  When starting a new website, forego the advertising until you feel it is absolutely necessary and you have the traffic to make it worth it.  You choose which is better: little traffic with many ads to make a few dollars or few ads, making lots of money with lots of traffic.

• http://www.bloggingpro.com/archives/2010/06/09/blogging-pitfalls-advertising-overload/

Custom content archives

Users need to be able to access your content.  If they come back to find some older content, the search form may not work.  Also, complete archives will help search engines know about all of your content.  You spend time writing it, should people be able to find it?

• http://codex.wordpress.org/Creating_an_Archive_Index

Custom Admin theme

The admin theme will only be for your benefit or that of your writers and editors.  However, it can be nice to change things up, and some custom themes can add a whole new experience for the admin.  It can also save you time if you spend a lot of time in the dashboard.

• http://sixrevisions.com/wordpress/how-to-customize-the-wordpress-admin-area/

Additional Resources

Check out these other resources and articles on customizing WordPress.

• http://www.problogdesign.com/wordpress/10-ways-to-customize-and-personalize-your-wordpress-blog/
• http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/

If you have your own tip for how to customize WordPress please share it below.

1. CSS Image Replacement

   System fonts can look ugly, and appear rigid. Using CSS you can replace text with a beautifully formed anti aliased image, yet still have all the accessibility and SEO benefits of text headings.

   Inline:

   <h1>Hello World</h1>

   CSS:

   h1 {
   display:block;
   width:100px;
   height:0;
   padding:30px 0 0 0;
   background-image:url(“heading.gif”);
   overflow:hidden;
   }

   

   The first image is a system font in the browser, see the edges of the “S” are rigid. The second is the same font as an image, the third is a non system font with a shadow, because you can use any font and apply effects to them when using Image Replacement.

2. Rounded Corners Without Using Images

   To create CSS objects that have rounded edges without using images you can use the following technique:

   Inline:

   <div id=”container”>
   <b class=”rtop”>
   <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
   </b>
   <!–content goes here –>
   <b class=”rbottom”>
   <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
   </b>
   </div>

   CSS:

   .rtop, .rbottom {
   display:block
   }
   .rtop *, .rbottom * {
   display: block; height: 1px; overflow: hidden
   }
   .r1 {
   margin: 0 5px
   }
   .r2 {
   margin: 0 3px
   }
   .r3 {margin: 0 2px
   }
   .r4 {margin: 0 1px; height: 2px
   }

3. RSS Feed Icon Without Using an Image

   With the increasing importance of RSS, finding crafty ways to display an icon is a useful skill. This method displays a tidy RSS icon without using an image.

   Inline:

   <a href=”http://pingable.org/feed/” class=”feed”>FEED</a>

   CSS:

   .feed { border:1px solid;
   border-color:#FC9 #630 #330 #F96;
   padding:0 3px;
   font:bold 10px verdana,sans-serif;
   color:#FFF;
   background:#F60;
   text-decoration:none;
   margin:4px;
   }

4. Size Fonts Without Using Pixel Units

   It is important to size text using a method that is not absolute, so it can be enlarged for better visibility in a browser.

   CSS:

   body {
   font-size: 80%
   }

   p {
   font-size: 1.1em;
   line-height: 1.2em;
   }

5. Using Images For Bullets

   An easy method to create list with images as your bullet points:

   Inline:

   <div id=”navcontainer”>
   <ul id=”navlist”>
   <li id=”active”><a href=”#” id=”current”>Item one</a></li>
   <li><a href=”#”>Item two</a></li>
   <li><a href=”#”>Item three</a></li>
   <li><a href=”#”>Item four</a></li>
   <li><a href=”#”>Item five</a></li>
   </ul>
   </div>

   CSS:

   #navlist {
   list-style-image: url(images/arrow.gif);

   

1. Content that’s not written for the web i.e., non-scannable text.
2. Page titles with low search engine visibility, think key words in a combination that entices.
3. Content that looks like an advertisement or content that is an advertisement, I don’t care which books on Amazon you enjoy, they wouldn’t be listed on your site if you weren’t making affiliate money from them.
4. In-your-face advertising i.e., blocks of AdSense that push your real content below the fold/scroll.
5. Violating design conventions – see CRAP Design.
6. Opening new browser windows. Let the users decide, they will come back if your content is good.
7. Non-standard links, hyperlinks should be underlined, hyperlinks should be obvious, there’s no reason to confuse novice users. Also strikethrough is being used to indicate a visited link – this is silly and should be avoided as it can be easily confused with corrections which is what strikethrough should be use for.
8. Over using Flash, Flash requires a plug-in, don’t use it unless it actually provides functionality which you cannot gain through other means.
9. Browser incompatibility, check what your pages look like on other browsers.
10. Scrolling text, marquees, and constantly running animations.
11. Complex URLs, they are not good for search engine hits or usability. Avoid.  
12. Long scrolling pages, break it up, use excerpts if you have to.
13. Poor navigation. Try and find some old content on your site. Is it easy?
14. Overly long download times. Use Photoshop or other applications to optimize images for the net. Read points 12 and 8 again.
15. Too many animations. They are hard on the eye. If you must use them, use for emphasis.

Even in an ever changing environment, such as the net, you must always consider the user experience before and above everything else.

Learning how to design using Cascading Style Sheets (CSS) can be a little tricky for the beginner if you don’t figure out a few of the basics. One of the basic concepts in CSS is the box model.

CSS is the code that is used to define design in most modern web pages. WordPress Blogs and Myspace layouts both require CSS.

The above diagram explains how The Box Model works. The entire diagram represents a single Div element in CSS. So if the div was the main text of a page, the width and height would define the area which text will fill. The padding would define the area between the text and the border. And the margin would define the area between the border and the next div element on the page. I hope this basic tutorial helps.

Publishing video on your website or blog is now easier than ever, however there are some common mistake which should be avoided. With sites like YouTube seeding over 100 millions videos to users every day, video content is everywhere and there’s something for everyone. Here are some points to set you on the right path towards producing better video content for your site.

1. Use an appropriate codec. Codec stands for Compression decompression. Xvid, Mpeg4, DivX, Flv, Mov and Mpeg, are some common examples of codecs. Once you have selected your codec make sure you use it correctly. For the best quality and smallest file size you will want a codec that uses a 2-pass VBR (Variable Bit Rate).

2. Work with files that are as close to the original video source as possible. Even if you are compressing the video content down to a miniature size, editing it using the original source file will make a difference in the final quality.

3. Don’t mess with the intended aspect ratio of the file. If the video was filmed in wide screen, keep it that way. A stretched or squashed video looks terrible.

4. Crop any black borders. If your video is letterboxed, you need to crop off those black edges as they will waste file space in your final video.

5. Deinterlace the video if required. If your source video is recorded from TV, it may be interlaced. Interlacing is a process where two fields are merged to form a single frame. When Interlaced video is viewed on a computer the image may have jagged edges, or it may look like it has lines running through it. Most modern video editing applications will have a deinterlace tool.

6. Display your video in it’s native resolution. If you have encoded the video in 320×240, then display it in that resolution when you use the video on your site, don’t resize it in the html code when you embed it.

7. Use plug-in detection on your page. If you are embedding video into a site, use plug-in detection to ensure that the user doesn’t need to think. There are javascript options available to make this decision for your reader.

8. Be careful where you place video on a site. It does use a lot of resources; system memory and Internet bandwidth, so don’t place it to load automatically on your homepage, a user on a slower connection isn’t going to bother. If you really need a video on your homepage, don’t have it starting automatically.

9. Consider blog hosting options. If you have the available bandwidth on your hosting plan or server then you could consider streaming the video, or offering it as a download or video podcast. If you don’t have tons of bandwidth to spare, you need to consider using a service like YouTube, and embedding the video.

10. Embed the video in the page properly, don’t just link to the file. Just placing a hyperlink to your video file probably isn’t the best way to get your users to view it. Use the correct html to embed the file so the screen appears within your page.

I hope you find these tips useful for your projects involving online video.

Many of the ideas of this article are sourced from a feature by Jonathan Green in the September 2007 dot Net magazine.

I had the awful experience the other day when showing my blog to a friend on their computer. I found out what my blog actually looked like in IE6. As you probably know, web browsers tend to behave slightly differently to each other, handling formatting in different ways. So how do you know what your site looks like on a different browser?

The problem that IE6 was having with Pingable was that some screenshots I had used filled the entire width of the content column, and the margins of objects surrounding had coursed IE6 to push the right sidebar down to below the left sidebar…ugly.

Unless you own three different computers, a MAC, a Windows PC, and a Linux PC, it’s impossible to see what your site will look like on every possible web browser.  Any number of your users could be browsing on a different browser that may be having all sorts of issues with the formatting of your site. So what’s the solution?

Browser Shots

This site takes screenshots of your Web site in different web browsers then posts them for you to view. The process is rather slow, however, it is very reassuring to know what your site looks like on other browsers. It is well worth a visit if this sort of thing worries you.

Update: Another useful site on this topic: Any Browser

I want to discuss some of the key principles of design. When I teach design to school kids I use the acronym CRAP for them to remember, which stand for: Contrast, Repetition, Alignment and Proximity. These terms come from the book The Non Designers Design Book. If you evaluate a design using these terms, you can see how they are almost always present in well designed sites and print.

Contrast – the difference in visual properties that makes an object distinguishable from other objects and the background. – Source: Wiki

Original theme used at Skelliewag Grid Focus

Skelliewag makes very good use of contrast. The dark text and page elements make them easily distinguishable from the background, and there is also a contrast in size used in the logo where the .org font is much smaller than that rest of the letters.

Repetition – repeat styles down the page for a cohesive feel. Source: Vitamin Features

Among other good design features Mosaiko makes good use of repetition. There is a button section in the side panel where the color of all the logos have been altered to keep the color scheme repetitive. The color scheme is consistent throughout. The article image header shape and size is repeated throughout. Font sizes and design are repeated also. Overall, a very effective site design.

Alignment – Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. Source: Vitamin Features

A strength in Brian Gardner WordPress themes is that they all seem to have very good alignment. Have a look at his homepage and any of his themes to see good use of alignment.

Proximity – Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different. Source: Vitamin Features

One of the main strengths of John Chow’s new theme is the effective placement of page elements, which gives the site good proximity. The four blocks visible in the screenshot show related objects grouped together effectively.

Final Thoughts

Evaluating your design work using the CRAP design principles is good way to double-check your work. If you constantly question the details of your design work, good habits will develop.

The last few weeks have seen some very high profile bloggers do some major redesigns on their blog themes. First we saw Darren from Pro Blogger completely revamping his blog. And today John Chow has finally ditched the “Misty Look” theme for a classy new professional theme.

What can beginning bloggers take from some of the design decisions that these pros have made?

Overall Impression – I am a fan of the new Pro Blogger theme. I think it’s crisp and modern and makes use of some innovative features.

Landing Page – The new look Pro Blogger makes use of a landing page. What this means is that when you go to the home page of Pro Blogger you are taken to a page with all sort of links and information about his site instead of to the actual blog itself. The reason why this is great for Pro Blogger is that Darren has a huge archive with lots of great articles. It is a real resource for anyone interested in blogging, and using the homepage to promote all that archival content is a great way to get extra hits on not only new content, but all the content he has created over the last few years. So if you have a well established blog, using a landing page like Pro Blogger may be a great idea, however for a beginning blogger it’s probably not going to be the best idea.

Massive Footer – Pro blogger has a huge page footer, which has been a trend in blogging of late. The footer on pro blogger is so large that it fills the entire screen of my wide screen laptop. A footer is a great place to have content that is useful for your established readers. So I wouldn’t recommend advertisements. It is on the bottom of every page in your blog, so you want it to contain navigational content, categories, maybe some plugin content with various lists of recent comments or top commenter’s.

Featured Post – The landing page of Pro Blogger has in a key spot a section called featured post. I think this is a great way of promoting an article you are particularly proud of or think is very good or important. This article from Max Limpag will show you how to use categories, to manipulate your WordPress blogs layout so you can have a feature article, however it requires some expertise.

Color Scheme – The new color scheme on Pro Blogger is crisp and modern. It is consistent throughout the site, and I think it works very well.

Logo – The new Pro Blogger logo is a point of discussion. I think it is okay, but not great. It uses the color scheme of the blog and makes good use of fonts. Where I feel it is weak, is that it would look average without the color, or if it was very small. A classic logo should look good in black and white, and should also look good small or large. I don’t think the new logo quite pulls this off. It’s just a minor criticism, of what is overall a great new theme.  

Overall Impression – I think the designer of John Chow dot Com has done a great job. It is quite a different approach to Pro Blogger, however, it is still very good design.

Above the fold – The key space above the fold of the page when you load the site has no actual article content, instead it promotes subscriptions, his free Ebook, Popular articles and various money making programs. This is like an equivalent to Pro Blogger’s landing page, as it directs visitors of the site to key content.

Still with the Super Car – It wouldn’t be John Chow dot com if it didn’t have a ridiculous super car image filling key space in the header of the site. The Famous Pagani Zonda is still there, however this time the new photo is smaller. Why I think this is important is that it’s a trade mark of John’s Blog. You want users to remember your blog, and I think the super car is John’s way of reminding return users that they have been to his blog before.

Crisp Color Scheme – I think the site makes good use of color and is consistent throughout. It is very modern and I am a big fan of the overall look of the site.

Final Thoughts

I think it is a good idea to keep an eye on what these very successful bloggers are doing. Often they set trends which others follow. However, it is important to remember that what works for them isn’t always going to work for you. Both John Chow and Pro Blogger have huge readerships, and are well established, which not only gives them the budget for such great design work, it also gives them the authority to influence what is considered good and what isn’t.

When selecting or designing a theme for your blog there are some key design considerations. How wide should it be? How many columns should you use? What colors work best? What fonts are easiest to read? What color schemes are easiest to read? This article will look at some of these decisions.

How Wide Should Your Theme Be?

As someone who blogs on a wide screen laptop it is all to easy to forgot that not every screen resolution is the same as mine. So what looks great on a wide screen may look average on a smaller screen, or be unusable on an old dinosaur CRT. Most of the theory on web site screen resolution suggests that you shouldn’t go wider that 800 pixels. Most of this theory is old, and almost every Internet user has a screen that at least has a horizontal resolution of 1024. So is it safe to go with a a theme that is 1024 wide? Probably. The situations I can think of where it may be better to have a 800 width theme is 1) if your niche is likely to have a lot of readers who may be viewing your blog on their portable device i.e. phones, or PDA’s etc. 2) You blog with-in a niche where the characteristics of that niche lead you to believe that most people have really old computers i.e. Windows 95 & 98 user tips. The other option is to have a fluid width theme where the objects on your page move depending on the screen size the page is being viewed on. Although this may sound like a good solution it tends to open another whole can of worms relating to page element placement, so it most situations this probably isn’t a good option.

How Many Columns Should Your Blog Have?

Pingable is three columns and has a fixed width of 1024 and is centered. Three columns gives you more opportunity to have side bar content above the fold. The fold of a web site is a term used to label the upper region of your site as viewable when the page first loads without scrolling. You can have features such as recent articles, badges, ads, etc displaying more content in a cleaner fashion than the same theme in two columns. To view some amazing three columned themes view Arpit Jacob from Clazh’s article with a gallery showing some of the Best 3 Column Themes for WordPress. 

Blog Color Scheme

When it comes to selecting a color scheme for your blog there are two main considerations. Attractiveness and readability. Of course you want your site to look good, so picking a color scheme that looks attractive is important. Readability is also important because if people find the colors you have selected difficult to read they won’t bother reading. It is also important to mention that a small proportion on the world’s population are color blind, so certain color schemes may actually be completely unreadable to them. I think black text on a white background is the best option almost always, as it is both easy to read, and if used well looks great. CSS Juice has an article on Popular Color Scheme Generators. You could use some of the tools listed in this article to work out what may work best for your site.

Fonts

There are two main types of font. Serif and San Serif. Serif fonts have flecks on the end of letters to help your eyes flow between words like traditional hand writing. An example is Times New Roman, the default font in MS word. An example of a San Serif font is the font used on Pingable. For digital media like a blog, San Serif font’s look cleaner for larger bodies of text. Serif fonts tend to be a bit fancier so using a serif font for your heading may be a good choice.

Final Thoughts

If you have got this far through the article then I hope you you have learnt something that will help you with design decisions for your blog. Hopefully I have provided you knowledge as to why a certain theme may be a better option for you than others, or why that theme with yellow text on an orange background isn’t a good choice. Anyway, thanks for reading and good luck with your web design or blogging project.