merryxmas
Blog Design Studio Wishes everyone a wonderful year ahead!
Image Credit
Nancee Art

Header is the most important section of any WordPress design, its the first thing that a visitor sees and the impression builds instantly. It’s much like how you build the impression of a person after looking at them for the first time. It’s important to highlight the most important features of your blog as the user is likely to interact with those features the most.

It’s easy to determine that what should be part of the blog header by asking few simple questions from yourself:

  • What pieces of content needs the maximum attention and where the call of action is required the most?
  • What design and color elements will set the right mood for the visitor?
  • What exactly a user will be looking for as soon as they land on your site?

Some of the important features that one should highlight on the header of a WordPress blog are -

  • Logo or Name – If the focus is to improve the branding of the blog, then one should populate the area with an impressive logo.
  • Subscription options – It makes sense to give the subscription option from various channels especially newsletter signup.
  • Search box – Search is important part of any website, it improves the user experience and Daniel Martin has shared his experience as a webmaster proving that how important is on-site search.
  • Menu – Header is the place where one should display the links to the most important pages through the menu. It’s the place where most of the users are habitual and expect the menu. A drop down menu will allow you to link to lot of pages.
  • Affiliate links/ads – If your focus is to increase affiliate sales and click through on your ads then you should display them in the header. That way, the ads will get the maximum visibility and relevant ads always get clicked!
  • Featured Articles – Featured articles in Javascript sliders are getting pretty popular amongst bloggers (no wonder why SlideDeck is getting popular). Header is the place where the sliders should be placed to ensure users get to easily access your best content.

Let’s check various headers around the blogosphere that are great examples of creativity, great design and usability.

Header Design For A Blog

1. Amour Chaleur

amourchaleur

2. Ascen Dance Radio

ascen-dance-radio

3. Ayaka Ito

ayaka-ito

4. Basmati Tree

basmati-tree

5. Carbon Sugar

carbon-sugar

6. Cult Foo

cult-foo

7. Deborah Cavenaugh

deborah-cavenaugh

8. Icon Dock

icondock

9. Jason Bradbury

jason-bradburry 

10. Marchand de Trucs

marchand-detrucs

11. Matt Mullenweg

matt-mullenweg

12. Octwelve

octwelve

13. Part Time Post

part-time-post

14. That indie dude

that-indie-dude

15. Tut Candy

tutcandy 

16. Web Designer Wall

web-designer-wall

17. Joost de Valk

yoast

Well, I love the design of new Yoast, however I liked the old one more. However, still Yoast is a wonderful resource and still carries an awesome design. If you are WordPress user, you shouldn’t miss reading this website.

Bookmark and Share

eclipse
Those who say it cannot be done shouldn’t interrupt the people doing it. By Chinese Proverb
Photo Credit
: Sam Rambo

I’m sure you must have come across the error “404 – Page Not Found” at some time while surfing the web. The error comes when the page that you were trying to visit was either removed, its URL changed or if you followed a link then it was linked incorrectly. It also means that the website is accessible and functional however that particular page can’t be found by the server.

For a webmaster this is not good as it pisses off the visitor and they’d leave and who knows if that visitor was your potential regular visitor or client. By default, WordPress displays the “error page” and thanks to its theme engine it can be customized to ensure the visitor doesn’t go away from your site. Here are some of the features that I would suggest for a 404 Error Page Design -

  • Inform that page cannot be found : Make it clear to the user that the page they were looking for is not available on the site.
  • Give the power of search : Suggest the visitor to search through your archives, thus it makes sense to display the search box just below your error message.
  • Flaunt your top posts : Make a list of top posts or most resourceful posts (if you don’t have them, stop reading this & write them now!) and show them below the search engine.
  • Subscription Option – Errrmm, How about a message like this? “Couldn’t find the page you were looking for? Why surf when we can deliver top articles directly in your inbox! – Subscribe Now!!” I hope you get the point, I want to make.
  • Humorous – Now a days, the trend is to make the 404 page humorous. Adding cartoon characters with a message is pretty common. This makes them unique and different from the rest and visitors love to spend time on such sites.

Again, its up to you that what you want put on the error pages as there is no limitation. You can put categories, create it as sitemap, tags, popular posts, advertisements and what not.

It’s even better if we can avoid them and keeping in mind Mani karthik has written a wonderful post mentioning various wonderful plugins for WordPress to manage 404 errors and the pages effectively.

Here are 10 WordPress plugins that will help you to manage, monitor and customize your 404 error pages, so that your visitors don’t leave your site annoyed. These will help you to manage your 404 error pages more efficiently.

The best way to think about the features or design is to know that what will you feel if you are presented with an “404 error page” on a site like yours and what will make you feel good. If you are still having hard time to think, then look at these examples -

Beautiful, Unique and Awesome 404 Error Page Designs

1. Acromedia Inc

acromedia

2. At Ease Web

ateaseweb

3. Blue Daniel

 bluedaniel

4. Carsonified

 carsonified

5. Catalyst Studios

 catalyst-studios

6. Chris Jennings

 chrisjennings

7. CSS Remix

cssremix

8. CSS Tricks

css-tricks

9. Cuoma

cuoma

10. Cut & Taste

cutandtaste

11. Dilbert

dilbert

12. Expansion Broadcast

expansion-broadcast

13. Godzilla

godzilla-moving-eyes

14. I Love Typography

ilovetypography

15. Inspiration Bit

inspirationbit

16. Jamie Huskisson

jamie-huskkison

17. Koller Media

kollermedia

18. Leap Any Where

leapanwhere

19. Rocket Theme

rockettheme

20. SouthPark Studios

southpark

21. Spring Load

springload

22. WP Beginner

wpbegineer

Bookmark and Share

blog footer inspiration
Image creditMike Goldberg
"When you do not know what you are doing and what you are doing is the best — that is Inspiration." ~ via Quotationsbook.

Just like Blog Post Footer Design, the footer of the blog is equally important. It can be used to maximize the benefits at various levels like increasing page views, giving information about author, links to important pages, copyright information and lot others. Unfortunately, footer is often ignored as comments and the reason is same, it comes below the fold and is often ignored by the visitors and thus ignored by the webmasters too. The reason we’ve italicized “often ignored by visitors”  is because its not always ignored by them and so as a webmaster, you shouldn’t ignore it too!

read full article →

Bookmark and Share

inspire
There never was a great soul that did not have some divine inspiration” ~ By Marcus T Cicero

After a visitor has finished reading the blog post they tend to leave the page, however if they like the post then they are most likely going to take some actions for it, they can either leave a comment, bookmark the blog post or share it on social networks and various other things.

read full article →

Bookmark and Share

Comments section is pretty unfortunate as it gets less attention when it comes to blog design. Comments are below the fold and thus don’t get the attention of the visitors that much. This is probably one of the reason why comment styling is often overlooked by bloggers when getting a new WordPress Design for their blog. A WordPress designer will always suggest to style the comments area as we understand that it’s important to entice the user with a good design. Here we will list various practised tips, WordPress plug-ins for making life easier in dealing with comments.

Comment Styling Practices

1. Threaded or Simple view – Threaded comments are great to increase comments. It makes the conversation look better and makes more sense as compared to the chronological display of the comments. On the other hand, chronological display ensures that comments section isn’t abused by the spammers. Many spammers reply to the top most comment even if its not related to the original comment to display their comment with URL on top. Both the options have their benefits and issues, so if you have a community that loves to interact then threaded view should be your choice.

freelance-switch
E.g., Freelance Switch displays a neat and clean threaded comments style. It highlights the original author well and displays the reply in a different color, thus separating it nicely from the other commments.

2. Enable Gravatar – Automattic purchased this plug-in and is offering it as a free service. Gravatar means “globally recognized avatar”, which is accessible through your email. It’s a fantastic service, as theme designers can simply integrate gravatar functionality and whenever their users will put their associated email address in comments, their chosen avatar will come automatically. You can enable the gravatar in WordPress using the following tip. Gravatar can slow your web page load time as well, thankfully there is a plug-in that takes care of the issue.

matt-brett

E.g., Matt Brett.com sports a beautiful comment section. Not only it maintains the overall look through the background image, it also displays the avatars just before the author’s name. Avatars not only gives the face to the comment author, various colors in the avatars enhances the looks as well.

3. Highlight the Post Author comments – Comment forms are used by visitors to ask queries from the author of the post. It makes sense that if the author of the post has different styling as compared to the normal comments. It also helps the author themselves from scanning their own comments. Matt Cutts shares the tip to highlight the author comments on WordPress.

matt-cutts

Matt Cutts features his comments in blue color as compared to the other comment authors. This keeps him highlighted all the time after all he’s compared with GOD!

4. Background styles, html tags – Speech bubbles, quotation marks, borders, alternate styling, flower petals etc can be used as background to style the comments. It should be in sync with the overall design of the blog and the elements from the theme should be used to make the comments stand out. One can add various other elements like comment permalink, date and time for giving clear picture of when the comment was left.

5. Paginate the comments – Pagination of comments ensures that the blog page doesn’t get too long in case there are more comments. WordPress supports pagination of comments and can be incorporated in the theme by following the documentation.

Useful Comment Plug-ins

1. Akismet – Akismet is a comment spam fighting service from Akismet. It’s available as a plug-in for WordPress and eliminates all the headache, a blogger has to go through because of comment spam.

2. reCAPTCHA – reCAPTCHA is a fantastic spam comment fighting service from Google. It’s used across various popular services like Facebook and is available as WordPress plugin. It’s different from regular captcha plugins because it’s got a purpose to it as well -

reCAPTCHA is a free CAPTCHA service that helps to digitize books, newspapers and old time radio shows. Check out our paper in Science about it.

3. Integrating Facebook comments -This plugin integrates the Facebook commenting system right into your website. If a reader is logged into Facebook while viewing any comment-enabled page or post, they’ll be able to leave a comment using their Facebook profile. Non-Facebook users can post with a valid email address.

4. IntenseDebate, Disqus, Echo – There are various services that offer better comment management. Intensedebate is from Automattic’s stable and faces pretty tough competition from Disqus. Even though, Echo is not so popular I was very impressed with it and hence it deserves a mention. All these services have spam filteration, social networking features, easy styling, ajax support and lots more. In short they are perfect for comment management.

5. CommentLuv – There are various plug-ins that enable do follow comments. However Commentluv plugin adds a new dimension to it as it only pulls out the last post on the comment author’s blog and displays it below the comment. Various tests have proved that after enabling this plugin, the interaction on the blog increases drastically.

Inspiration for Comment Styling on WordPress Blogs

After all the “gyan”, its time for getting inspired from various beautiful comment forms and styles that we found across the blogosphere. So, if  you don’t get many comments then you know what should be your next step.

Brian Yerkes

brian-yerkes

Cosmic Diary

cosmic-diary

Design Disease

design-disease

Blog Less

designless-better

Fubiz

fubiz

Gregory Wood

gregory-wood

Kev Adamson

kev-adamson

Nada Mas Triste

nadamstriste

Partical Tree

practial-tree

Bookmark and Share

Bookmark and Share