Cone Flowers.preview
Via – Triangle

Without Inspiration the best powers of the mind remain dormant, they is a fuel in us which needs to be ignited with sparks. ~ Johann Gottfried Von Herder.

Till this time, we got inspired by looking at various header, 404 error pages, footer, post footers, comments designs and learned that what could be used in those sections. Today we’ll discuss yet another important area of the blog i.e. Sidebar. A sidebar is present in almost every blog you come across and rightly so as a sidebar helps in utilizing the web page real estate in a great way and also impact the overall look of the blog. In this post we’ll discuss that what can be achieved from sidebars and will share great examples of sidebar designs of various blogs:

  • Subscription options – In most of the blog designs that you’ll come across , you’ll see that the newsletter subscription options exist generally in the sidebar. This way it doesn’t look forced on the visitors and will attract genuine subscribers.
  • Author’s profiles – On many single authored blogs, you’d find that the bloggers tend to display their small bio along with the links to their social media profiles. This is a great way to showcase the person behind the blog and thus gives the chance to readers to connect with the blogger rather than just the blog.
  • Recent posts – Sidebar is the best place to showcase the recent posts. That way they don’t interfere with the current blog post and ensures that no matter on which post the visitor is, they’d get to see the latest posts of your blog.
  • Categories/tags – In most of the blogs categories and tags are displayed in the sidebar because even visitors are used to seeing categories and tags in that area.
  • Related posts/popular posts – It completely depends on you as to what you want to display in the sidebar. Some bloggers choose to display related posts or popular posts in the sidebar adjacent to the blog post. That way a visitor doesn’t miss them and results in more page views.
  • Recent comments – If your focus is to increase the interactivity with your readers, then showing recent comments in the sidebar is a good option. When a reader sees the interaction happening on a blog, they also tend to take part in it.
  • Facebook/Twitter streams – Facebook & Twitter have become integral part of the blogosphere. Almost every professional blogger will either link to their profiles in the sidebar or they choose to display their streams in the sidebar. This gives readers a good chance to connect with the blogger outside the blog.
  • Blogroll or Credits – Blogrolls were very popular in early days of the blogging, however they’re not used as frequently in recent times (Professional bloggers don’t tend to use it these days), however its still a pretty popular amongst bloggers who maintain blogs as part of their hobby or have personal blogs. Sidebar is the apt place place for pushing blogroll or with affiliate links to webhost or other programs.
  • Advertising – This goes without saying! If you are a professional blogger chances are that you’ll depend on advertising and sidebars are good place to show leader boards or 125×125 image ads.

Inspirational Sidebars of blogs

1. Fuel Your Creativity

fuelyourcreativity

2. Fuzeo

fuzeo 

3. Specky Boy

speckboy 

4. Eco Simply

eco-simply

5. Markos

markos 

6. Fringe Focus

fringefocus 

7. Larissa Meek

larissameek

8. Playstation Blog

playstation

9. Grain Edit

grainedit 

10. WebGP Design

webgpdesign

11. CopyKat

copykat

Bookmark and Share

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

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

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

web10 Until late 90’s, online publishing wasn’t as easy as it is in current times, it was the evolution of Blogger that started to make this space easier for common person who are technically challenged. Although, it were CMSes like Drupal, WordPress, Joomla & various other open source systems that upped the game by giving more power in the hands of publishers at much lower cost as the whole platform is completely free, the only cost involved is customization of the platform and the way content is displayed which is nothing if we compare the power and flexibility we get using these content management systems.

It was the evolution of blogging that brought many significant changes in the web ecosystem and one of them is that there are far more webmasters now and hundreds of them are becoming professional webmasters every day. I personally believe that its WordPress that has contributed significantly in this space. Its user friendly, has great documentation and has awesome community around it. WordPress is fast becoming the first choice for every publisher, people are shifting on it and this increase in demand is making web design companies adopt WordPress and one of the reason why we see so many companies offering premium WordPress templates and companies offering WordPress design services.

With that, we thought of coming up with a resourceful post that’ll help the new Web designer turned WordPress designers in making their lives easy -

Resources for Coding

aptana

WordPress Codex: What can be better than the official codex itself? The documentation itself is wonderful and that is one of the reason why developers were quick to adopt WordPress.

WP Engineer: WP Engineer has lots of posts with codes and lots of posts with tips that are surely going to help beginners. It’s a must bookmark blog for all those who want to learn coding in WordPress.

Cheat Sheets: Dainis Graveris has listed 23 extremely useful cheat sheets for programmers and WordPress designers. This is one resource that you will love to the core.

Tutorials for Developing WordPress themes: Vandelay design has posted a fantastic list of tutorials that help newbie’s in understanding WordPress theme designing.

Coda Clips: Coda is a text editor for web developers (mac only), it supports keeping small snippets for faster and quicker development. To support that, they started Coda Clips blog that features frequently used snippets and is regularly updated.

WordPress Mailing lists: WordPress official mailing list is the best place to keep yourself up to date with that is happening around WordPress and what are the new changes or requests made by the community. It’ll not only keep you up to date with the current status, it gives you the idea about what may be the next big feature of WordPress.

WordPress plugins to help WordPress Designers – We’ve featured 9 plugins for WordPress that will surely help all the beginner’s in quicker development of WordPress themes.

WordPress Theme Frameworks

framework

A theme framework is the flexible foundation, that can be used to build WordPress themes faster and quicker, without worrying about coding various basic functionalities. Someone with prior experience in CSS would be able to quickly adapt to WordPress designing. We are listing some of the most popular theme frameworks over here.

Thematic – Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it. It’s perfect for beginner bloggers and WordPress development professionals.’’

Theme Hybrid – Hybrid is a user-friendly, search-engine optimized theme framework, featuring 15 custom page templates and 8 widget-ready areas, allowing you to create any type of site you want. Like WordPress, this theme is completely free and open source. You can use it for your client work or for a blog about your grandchildren. It is continuously being developed and has a community growing around it.

WP Framework – WP Framework was created to serve as the starting point in WordPress theme development. It accomplishes this by providing you with commonly used functions and features that modern WordPress themes should have. So when you start a brand new WordPress project, using WP Framework you’ll already have the basic functionality set so you don’t have to worry about mundane task like creating the loop, or recreating all the standard template files.

Carrington – Carrington is a CMS theme framework for WordPress from Crowd Favorite, that makes it easy to create unique looks for different categories, posts and comments just by creating custom templates.

WordPress Books for newbie WordPress designers

There are various books written for WordPress and many are yet to be published. There are some fantastic books for WordPress, although I would like to mention these books for those who seriously want to be WordPress designers.

  • Rockable Press – How to be rockstar WordPress Designer is a fantastic e-book as it is focused on those who want to shift from regular web designing and want to become WordPress designers.
  • Vladimir Prelovac (not an affiliate link) – Vladimir has created lots and useful and some of the most popular plugins for WordPress. He’s a great authority in WordPress plugin development. This book should be in arsenal of those who want to develop WordPress plugins.

I hope these resources will be useful for anyone who wants to be a pro WordPress Designer. If you know any more resources, then please point them to us and we’d be more than happy to include them here.

Bookmark and Share

Popularity of WordPress is clear in its own way, however it becomes crystal clear when we see small businesses, professionals or even big corporations are giving preference to WordPress over other CMSes. WordPress as a CMS has evolved and is used to build beautiful and professional websites. Lets check out the following 35 websites that are powered by WordPress, BuddyPress, WordPress MU and aren’t used just as blog.

1. h Mag

h MAG is a high end luxury magazine for the Hoboken market. They print 15,000 copies that are placed in every room at The W Hotel, delivered to every doorstep in town, distributed to over 100 retail establishments and handed out at the Path and Ferry stops. h Mag uses BuddyPress & WordPress MU to publish variety of content and is a highly interactive site and design.

2. Creative Ad Awards

Creative Ad Awards

Creative Ad Award is a fantastic advertising archive, serving advertising fans with high quality ads. They provide world’s most sophisticated, creative and fresh ads. Creative Ad Awards has highly customized WordPress to achieve this kind of design.

read full article →

Bookmark and Share

As a web design studio, we give and receive feedback on the website/blog design every day. We make our lives simple by using Evernote’s premium accounts so that our clients get the ability to edit the notes that we share them for the feedback and we do the same while giving the feedback to our WordPress Ninjas! This certainly isn’t Evernote’s real function, however its been doing pretty well for us. However, it’s not as good as Notable, which is built to address this particular issue.

Zurb, a well-known company in the silicon valley that has worked with some of the top companies like Facebook, Ebay, Yahoo is behind Notable, an app that they built for internal use. Notable is a web-based application and great for designers and agencies who work from remote locations.

Notable - Easy collaboration for designers

The application works on Firefox, iPhone and of course, the browser-based functionality is available for all the platforms. You can clip any page on the browser and add notes on specific areas that you want to point out for the feedback. Once the feedback is uploaded on their servers, it can be discussed by team members using the comment form. All of this is part of the visual section, however since it’s focused towards the web agencies and freelancers, Zurb has taken care of the code and one of the best feature is that you can point out on the search engine optimization of the page as well!

Notable's Workspace

I was mostly impressed by Notable’s simplicity, its user interface is simple and without complex features that may confuse people. Its got the most important features packed for collaboration and notification, it allows you to restrict the collaborators to let them add notes or just view it.

Overall, I was fairly impressed with the application as it delivered all the features that we were looking in such an app. Notable certainly saves time as the feedback ends up being more contextual, visually accurate as it forces feedback givers to be specific. I would certainly suggest this app to all the freelancers who are into web designing as they’d find this app irresistible!

Bookmark and Share