Vandelay Website Design

Enhanced Sidebars with Dynamic Content

Vandelay Design — Thu, 24 Jul 2008 02:02:15 +0000

After writing Effective Use of Blog Sidebars a couple of weeks ago I decided to look into the topic of dynamic sidebars. Typically, most blogs will us a standard sidebar for the entire site. WordPress users have a lot of potential functionality that is rarely used in terms of creating various sidebars and displaying them in different situations.

For example, when I was creating the theme for DesignM.ag I needed to have slightly different sidebars according to the category of the post. You can see the differences by looking at a standard blog post, a post in the community news category, and a post in the gallery category. For items in the news category I wanted a brief introductory paragraph with a button to submit news, followed by a list of recently published news items. On posts in the gallery I wanted the same thing, except for the gallery category instead of the news category. Posts in all other categories have a list of categories followed by recent news items. As a result there are three different left sidebars that are shown depending on the category of the post.

Why Would You Want Dynamic Sidebars?

Every blog visitor has different habits, but many tend to ignore sidebars because they are always the same. Mixing things up and keeping the contents of the sidebar relevant to the post can make them a bit more likely to be noticed. In short, blog sidebars are often ineffective because they are:

Boring
Outdated content (not changed frequently)
All the same throughout the blog
Not relevant to the rest of the page
Full of too many links with a cluttered appearance

What Can You Do to Fix Ineffective Sidebars?

Dynamic sidebars can improve just about all of the situations mentioned above. They’re not as boring because they change as the visitor moves through the site, they’re more relevant to the content of each page, and they won’t need to be as cluttered because only the relevant information is displayed on each page (as opposed to cramming everything into one generic sidebar).

Dynamic Sidebars in Action

Since I was writing a post about dynamic sidebars I figured I should put them into action on this blog as well. So far I’ve only made two changes to the standard sidebar, but more may be coming.

First, I added a small box of text in the right sidebar on posts in the Social Media category. I have a blog called Traffikd where I write primarily about social media marketing and blogging, so I decided to add a promotional statement for Traffikd on these posts since it’s relevant to most readers within that category (these are mostly older posts before I launched Traffikd). You can visit the post 50+ Designers to Follow On Twitter to see the change in action. The image below shows the block of text, it appears right after the banner ads and before the Popular Posts section in the sidebar.

Second, based on the popularity of the collections of Photoshop tutorials, I decided to link them together in a different way. If you visit 40 Photoshop Tutorials for Lighting and Abstract Effects you’ll see a small list appear, again it’s in the right sidebar between the banners and the Popular Posts. You’ll see the headline “Photoshop Tutorials”, and then it links to all five of the collections of tutorials. You’ll also see a link for the post that you’re viewing because the 5 links are the same on all of the posts. It would be possible to set it up to only include links to the other four posts, but that would take some additional coding and I decided to keep it lighter.

It’s too early to tell if these minor changes have any noticeable effect in terms of click-throughs and enhanced navigation, but this just shows that there are plenty of options for creating your own dynamic sidebars.

Different Strategies for Creating Dynamic Sidebars

With WordPress you have some different options for achieving the end result of improved sidebars. Fortunately there are a number of good tutorials out there for these different techniques (plus the Codex), so I’ll try to point you in the right directions in addition to giving some of my own thoughts.

1. Use a conditional tag and a php include to insert an item.

This is the method that I used for both of the changes to the Vandelay sidebars. Using the first example, the php conditional statement essentially says, “if the post being shown is in the social media category, display the contents of the socialside.php file. If the post is in any other category, ignore this statement and just display the standard sidebar.”

This code is placed in the right sidebar php file exactly where I want the box of text to appear. The socialside.php file contains only one paragraph of text wrapped in paragraph tags and given a CSS class. The class of course is used to style the paragraph with the darker background and the border.

Here’s the code I’m using in my sidebar for this:

You can use this to do any number of different things with your sidebar if you get creative. Of course, you’ll want to change the number in the category to suit your needs. In my situation the social media category is number 13, but you may want to use another number, and you can exchange socialside.php for whatever you want to include.

In the second example that I’m using on this blog, I’m also using a conditional statement but in a different way. I wanted to display the Photoshop links only on 5 specific posts (probably more in the future when they are published). Unfortunately, these posts are not in their own category, they’re in the Design category, which has a ton of other posts where I don’t want these links to appear. This isn’t really a problem though, because you can also use conditional statements for specific posts instead of category. Each post has its own unique number, so it’s almost the same as the previous example.

Here’s the code I’m using:

The “is_single” tells WordPress to base the conditional statement on the number of the individual post being displayed. The three-digit numbers are the numbers of the specific posts, and then you have the include for the ps.php file, which simply contains the image for the headline and then the links. I can easily add another post to this statement if I was to publish another collection of tutorials, and I could add the new link in the ps.php file as well.

For more on conditional tags see:

2. Create separate sidebars for the front page, single posts, pages, archives, etc.

WordPress uses several different files (assuming your theme contains all of these files) based upon the part of the site/blog that is being viewed. The homepage layout is controlled by the index.php file. The layout of a single page is controlled by the single.php file. Layouts of pages (not posts) are controlled by page.php, and so on. Each of these files will likely contain the code to grab the contents of the sidebar. For example, mine uses:

If you want a different sidebar to appear on your frontpage as opposed to your individual posts, all you have to do is create a second sidebar file, l_sidebar2.php. Now, if you want that sidebar to appear on individual posts you can use this code in your single.php file:

It’s a pretty simple change, but it gives you several different options.

3. Control the Style of the sidebar by switching the stylesheet

It’s also possible to use your stylesheet to give your sidebar different looks for various categories. It’s not an approach that I’ve used before, so I’ll point you to Using WordPress Categories to Style Posts from Lorelle via a guest author.

For lots of great information that can help with dynamic sidebars, see:

WordPress Theme Hacks from Web Designer Wall.
Customizing Your Sidebar from the Codex.
Mastering Your WordPress Theme Hacks and Techniques from Noupe.

Some Ideas for Dynamic Sidebars

There’s really no limit to what you could do with dynamic sidebars. Here are a few of my ideas:

Show author information
This wouldn’t require coding strategies listed above, but if you have multiple authors you could include the author bio in the sidebar to change things up a bit from post-to-post.
Include a relevant ad or affiliate link
Maybe you have a specific post or category that would be great for promoting a specific affiliate product. You can use the strategy of conditional tags and includes to put it wherever you want.
Make a series out of your posts
This is essentially what I’m doing with the Photoshop posts. You could adapt this strategy to fit your own content and funnel traffic through related posts on a specific topic.
Create a call for subscriptions on high-traffic posts
Do you have a few specific posts that get a lot of search engine traffic consistently? Why not use a conditional tag and an include to put an extra call for subscriptions in your sidebar? I may try this approach myself.

What Ideas Do You Have?

Are you using dynamic sidebars on your own blog? If so, please share your approach with us. What other ideas do you have for creating dynamic sidebars?

Announcing the Launch of DesignM.ag!

Vandelay Design — Tue, 22 Jul 2008 01:34:17 +0000

Today I’m very excited to announce the launch of DesignM.ag! In attempt to provide a useful and resourceful site for the web design community, DesignM.ag includes a blog, a community news section, a design gallery , and a job board will be added soon. If you enjoy and appreciate the posts here at Vandelay Design, I think you will like DesignM.ag as well.

Here are the initial posts that are already published:

Welcome to DesignM.ag
A general first post.

50+ Fonts for Big, Bold Headlines
This is a big list of some excellent fonts that will make your headlines stand out.

11 Steps to a More Stable Freelance Income
Freelancers are always dealing with ups and downs in terms of work levels and income. This article looks at some things you can do to minimize the down times.

Favorite Design-Related Sites of 21 Designers
Since I was starting a new site for the design community I thought it would be fun to get some others involved in one of the initial posts. This provides an interesting look at what some top designers are reading on a regular basis.

The launch of DesignM.ag should not affect the posts here at Vandelay Design. I’ve been very encouraged by the growth of this blog over the past year, particularly the past few months, and I am in no way moving on and leaving this blog behind. The posting frequency and quality here should remain as it has been in recent months. I recently let go of a few weekly freelance blogging gigs to free up more time to focus on my own blogs.

You may be wondering why I would be working on a new blog as opposed to focusing all of my blogging efforts here at Vandelay Design. The main reason I decided to branch out and start a new site is that I want to be able to have some more freedom to explore things that wouldn’t be a good fit at this blog. Because this blog is attached to the services of Vandelay Design I feel that I’m more limited to what I can do here as compared to a site that is not connected to a design service provider. For example, the job board would not be a good fit here. There are also some other features that I would like to add to DesignM.ag in the future that just wouldn’t be possible at Vandelay Design.

I thank all of you who subscribe to Vandelay Design or visit from time-to-time. If you have an interest in getting more design-related content please consider also subscribing to DesignM.ag. Because of the nature of the site there are three different feeds so that subscribers can get as much or as little as they want.

All-Inclusive Feed (articles, news, gallery)
Articles and News Feed (no gallery)
Articles Only (no news or gallery)

Thanks for your support!

Blog Navigation and the Ongoing Challenges that Arise

Vandelay Design — Thu, 17 Jul 2008 12:00:13 +0000

Navigation is obviously one of the most critical aspects of usability. Developing effective navigation is a challenge for most websites, but it’s especially an issue for blogs because of the content that is continually being added.

Think about the typical blog. A few new posts are probably added each week, but navigation is almost never changed or updated, except by using internal links within the posts themselves. Finding posts is always possible by browsing through the archives, checking through some categories, or by doing a search, but the more content that is added, the harder it is to navigate.

Some blogs that cover news and other time-sensitive info may have a high percentage of posts that are of very little value down the road, but the majority of blogs have a wealth of useful information in the archives that is not being maximized. Finding ways to make content easily accessible with logical navigation can be difficult to achieve without a cluttered blog.

Challenges and Issues Associated with Navigation

Ability to Find Old Content

I’ve spent the last year building up a blog that contains almost 300 posts (and I know many others have done the same or more), but my primary concern each week is finding a way to create new content to be posted that will help the blog continue to grow and move forward. Of course this should be a priority, but it’s not that often that I consider how I can make it easier for visitors to find old posts that they’ll appreciate.

Between the new subscribers that have come in the past few months and the growing number of search engine visitors, a very high percentage of visitors have never seen the older posts, and I think this is pretty common for most blogs. With that in mind, making the older content findable is very important. However, it’s always a challenge for bloggers and blog designers to know what content visitors will be looking for and how to make the navigation more effective in this way.

If you want to improve navigation to your archives should you include a popular posts section? Should you use a related posts plugin? Should you link to archive pages by month? By author? By category?

Personally, I like the idea of using a manually created list of popular posts in the sidebar, as I have done on this blog. This allows the blogger to highlight older content by their choice, rather than letting a plugin decide which posts are popular. Plus, it can be updated and changed from time-to-time to feature different posts.

In my opinion, one of the biggest keys to improving the ease of access to older posts is by using internal links within the body of posts. Before you publish a post take a minute to read through it specifically looking for opportunities to link to other posts in your archives. Contextual links are great for usability because visitors who are reading a post will often be interested in related information that you’ve covered in the past, and the link is right there in front of them. Also, links within the body of a post will obviously be included in your feed, which means subscribers will have another opportunity to click through to your blog from their feed reader.

Categories Are Virtually Useless in Most Cases

Maybe I’m not like the typical blog visitor, but personally I very rarely click on links to specific categories in a blog’s sidebar. (Michael Martin of Pro Blog Design has a recent article, Why Tags Are Better Than Categories.) When I was re-designing this blog theme I considered removing the category links from the sidebar altogether, which I may still do at some point.

Last week when writing about blog sidebars I gave the example of Freelance Switch not using a list of categories in their sidebar, and instead linking to an archives page. For now I’ve attempted to make the category list on this blog more user-friendly by removing a few specific categories from the list that either have very few posts or aren’t that relevant to most visitors. Hopefully the shorter list of categories will be a bit easier to digest.

When addressing the navigation of your blog, consider your category list. Do many visitors use the categories for finding content, or are they just taking up valuable space?

Popular Post Lists are Not Updated

I mentioned earlier that I like to control the popular posts listing manually. While this does provide the opportunity for the blogger to have more control over what posts are listed, it also tends to create lists that are rarely updated to include newer posts that should be there. By using a plugin to automate the list it will include these posts without any effort on your part.

While I don’t change my list all the time, I do add/remove links every now and then (I just added 40 Photoshop Tutorials for Lighting and Abstract Effects, which has done very well since being published last week). If popular post lists are never updated, they’re not doing much good for visitors.

Sidebars are Usually Ignored

I feel that sidebars are often an afterthought for bloggers and blog designers. They have potential to be more useful, but not if the necessary thought and effort isn’t put into their development.

Small Potato wrote a post on WPDesigner earlier this year, Static Sidebars Suck. In this post he gives some reasons why blogs should vary the sidebars according to the page or section of the site. Changing up the content of the sidebars can give visitors a different experience that could be more helpful and relevant to them.

If the primary purpose of a sidebar is to assist in navigation, and it’s being ignored, the overall navigational effectiveness of the blog is going to suffer. When working on improving the navigation of a blog, creating sidebars that get noticed by visitors and easily provide them with useful links should be a priority.

Related Posts Plugins are Nice, but Often Ineffective

Many blogs use plugins to include a list of related posts at the end of each post. This can certainly help improve the internal navigation of the blog (and the SEO as a result), but from my experience they are typically ignored by visitors.

I used one of these plugins at this blog several months ago until I did a WordPress upgrade and that particular plugin was not compatible with the new version of WordPress. I chose not to replace it with another similar plugin because the links were just taking up space and not being clicked. In some cases the related posts that we’re linked were certainly not ones that I would have chosen, and in other cases they were pretty accurate. In either situation, they were rarely used by visitors. Again, this is something that I tend to ignore on other blogs that I visit.

I’ve had more success with manually creating a list of 3 or 4 posts at the end that says, “If you enjoyed this article, please see…” I don’t do this on every post, only occasionally, so it seems to stand out a bit more to visitors. I tend to use these lists on posts that I expect to do well with social media. Since many visitors that arrive through social media have never been on the blog before, it would be a big plus to get them to click through to other posts.

Internal Links Within Posts are Critical

The most important aspect of blog navigation is including useful internal links within the body of your posts. They will generally get the highest click-through rates from visitors, and they’re also the most usable for visitors. If you’re reading a post and an internal link is used within the context of the post, you’ll usually have a very good idea of what you will find if you click on the link. Readers like to have an idea of where they are heading, and contextual links can accomplish this.

Adding internal links to your new posts isn’t that difficult, but adding links to older posts is almost never done. This is a huge issue for blog navigation, in my opinion, because there is usually far more content on a blog that would be relevant to visitors, but it simply isn’t linked in the right places. Imagine the average search engine visitor to your blog. They probably arrive at a post that was published several months ago because it provides the information that they were searching for. However, maybe you’ve published two or three posts since that time on the same topic that are more up-to-date and in more detail. Wouldn’t it be helpful for the visitor to see some links within the body of that post that point to these newer posts?

One solution to this issue is to go back through your archives and look for opportunities to add links to newer posts. This will obviously take some time depending on how many posts you have published. (This is on my to-do list for this blog). There is also the aLinks Plugin for WordPress users that looks like a viable option (I haven’t used this plugin myself, so I can’t testify to how well it works). This plugin will allow you to set up keywords and phrases that shouldn’t be linked to specific URLs. Any time that word or phrase appears in your blog posts aLinks will create the link to your page of choice.

Conclusion

While navigation is an important issue for usability, it’s also a never-ending challenge for bloggers that are constantly posting new content. In order to improve the navigation of your blog you’ll need to address several key issues and make decisions according to what will help visitors find what they are looking for, and what will allow you to maintain efficiency with managing the blog.

If you have other thoughts, issues, or challenges related to blog navigation, please leave a comment.

25+ Inspiring Designs by Land, Sea & Air

Vandelay Design — Tue, 15 Jul 2008 00:53:29 +0000

I constantly come across excellent designs that feature various elements of nature and I’ve been collecting samples for a while now. Some use photos and others use illustration. Some feature bright skies and clouds, and others feature mountains, water, or grass. Feel free to list your favorites in the comments.

Project Vino

Adit Shukla

Modern Arboricultural Services

Ambassador Cellar

Walters & Walters

ACS

Elements

Fall in Tennessee

Chipping Sodbury

Estrela Santiago

Martis Camp

Anchorage, Alaska

Rawkes

Robyn

Jocksta

Sure

Great Urban Pet Escapes

The Art Company

Dignity Design

Stylized Web

The Wheelhouse

Quinns Rocks Bed and Breakfast

Lake Crackenback

Volll

Introducing Africa

Susanne Paschke

Dizzain

If you like these designs, you may also be interested in:

Tutorial - Create Your Own Custom Del.icio.us Badge

Vandelay Design — Mon, 14 Jul 2008 01:33:08 +0000

For a long time I used the Del.icio.us Tagometer Badge on this blog. If you’re not familiar with the Tagometer Badge (shown below), basically its purpose is to show visitors how many Del.icio.us users have bookmarked a particular page, what tags are commonly being used for that page, and it makes it easy for them to bookmark the page themselves.

Of the social media buttons and badges that I’ve used, the Tagometer Badge was my favorite. When I re-designed the blog a few weeks ago the badge didn’t look good with the new background color, so rather than edit/customize the badge I decided to try FeedBurner’s FeedFlare option for the same purpose.

Most bloggers use FeedFlare to show links like “Digg This”, “Stumble It” or to show the comment count in their feeds, but FeedFlare is also available to include the same links directly on your posts.

One of the cool things about FeedFlare is that is gives you an opportunity to style it however you like because of the way the code is created by FeedBurner. As a result I decided to try using a custom-made Del.icio.us badge to create a more unique, and hopefully a more attractive section that encourages bookmarks from visitors.

The process of setting up and customizing FeedFlare is pretty straightforward, but I don’t see many bloggers doing it, so I thought I would write up a tutorial so anyone else who is interested can apply this on their own blog. Here goes.

Step 1 - Create Your Image

At the top of the post you saw an image of the final product, which is really nothing more than the text and link created by FeedBurner sitting on top of a background image that I created in Photoshop. Here is a look at the background image without the text.

You’ll want to create the image so it lines up with the width of your main content area where the FeedFlare will be displayed. In my case the image is 482 pixels wide, almost as wide as the entire content area. I’m not going to go over the steps of creating the image because I want to focus on the coding aspect, but as you can see it’s a very simple image divided in half vertically with a typical Del.icio.us logo that most visitors will recognize.

Step 2 - Login to FeedBurner and Set Up FeedFlare

Login to your FeedBurner account, click on your feed, click on “Optimize” and then on “FeedFlare” in the vertical navigation at the left side of the screen. You may have already activated FeedFlare for your feed or your site, or it may still be inactive. For the purposes of this tutorial we’ll be working with the options under the “Site” category, not under “Feeds.” You can select the same options for both or you can select different options. Whatever you currently have selected for “Feed” leave as it is.

Under the “Site” column we’re going to select “save to del.icio.us”, which is different than “add to del.icio.us.” Save to del.icio.us includes the number of bookmarks and the popular tags, while add to delicious only includes a link that lets users bookmark the page. We don’t want to have any other options selected under “Site”. (The approach I’m taking will only work with one selection because of how we are going to style the code generated by FeedBurner.)

Once you’ve selected “save to del.icio.us”, scroll down to the bottom and click “Activate” if your FeedFlare is currently inactive, or click “Save” if it has already been activated. You’ll now see “Get the HTML code to put FeedFlare on your site.” I’m using WordPress, so that’s what I select and it will open a new window with the code. Leave this window open for now.

Step 3 - Set Up the Code in Your single.php File

If you’re using WordPress you’ll want to copy the code provided by FeedBurner in that new window and paste it into your single.php file right where you want it to appear. Save the single.php and if you’re using Dreamweaver or something similar, upload the file to your server.

You now have FeedBurner set up to produce the FeedFlare on your posts and you have the code in your single.php file to display the results of the FeedFlare. At this point it will show up as simple text links with no styling except what is already set in your stylesheet (such as your basic styling for paragraphs and links). However, you won’t see the FeedFlare on old posts that were published before it was activated, so you’ll have to wait for a new post to see it in action.

Step 4 - Customize Your FeedFlare

As I mention earlier, FeedBurner makes it easy to customize your FeedFlare by giving you code that you can apply styles to in order to accomplish the look that you want. In the window that FeedBurner opened that contained the code, if you scroll down towards the bottom you’ll see some instructions for customization. They give a sample of the code that is produced so you’ll know how to apply styles.

Here’s the sample code provided by FeedBurner:

Flare 1 • Flare 2 • Flare 3

If you’re only using one FeedFlare option, such as the “save to del.icio.us” that we chose, the styling is very easy. The code produced is all contained in a paragraph with the class “feedburnerFlareBlock”, so we’ll want to set the height and width of this paragraph to match the image that we created (in this case 482px x 52px) and we’ll also set that image as the background image.

Now all that’s really left to do is to get the text of the links aligned like you want. This can be a little bit tricky because the width of this line will vary from post to post. With the image that I created I need the text to always appear to the right of the del.icio.us logo, so I set a left margin on the feedburnerFlareBlock links to 50 pixels. I also used a top padding on the paragraph of 25 pixels to keep the text at the lower half of the image so it doesn’t sit on top of the text that I created in Photoshop, “Bookmark with Del.icio.us for Future Reference.”

Here’s the CSS code that I’m using:

.feedburnerFlareBlock { width: 482px; height: 52px; padding-top: 25px; background-image: url(../../../../images/del.jpg); background-repeat: no-repeat; font-size: .9em; text-align: center; } .feedburnerFlareBlock a { margin-left: 50px; }

That’s all there is to it. You now have a custom banner/badge on your blog for encouraging bookmarks. Remember, you can use this approach for any FeedFlare option, the code produced will still allow for styling in the same manner. So if you didn’t want to use Del.icio.us you could create a banner for StumbleUpon or Digg or something else. Again I want to emphasize that this will not appear on older posts, so if you have a test blog you may want to go through these steps and publish a new post to see the FeedFlare in action.

If you want to test it out, feel free to bookmark this post

Learning from Other Designers

Vandelay Design — Thu, 10 Jul 2008 11:00:04 +0000

One of the things that I like about web design is that there’s always plenty to learn, regardless of how experienced you are. I know that my knowledge really only scratches the surface of web design and development, and I appreciate the fact that seemingly unlimited resources are available to allow me to become a better designer.

Every designer needs to place some importance on continued learning and improvement due to constant changes in the industry. Without ongoing improvement and adaptation you might be designing sites that would have looked cool in 1997. One of the challenges for designers is finding time and making this a priority rather than an afterthought.

The design community is filled with sources of inspiration and helpful sites for encouraging growth in abilities. Each of us needs to take our own unique approach to personal development that works for us. I’d like to share some of my thoughts and what works well for me. Hopefully some of it will be applicable for you as well.

Tips for Learning from Other Designers

The online community of designers truly is a community in that there is a lot of interaction and people willing to help others. As a result, we can all learn from talented individuals who are willing to provide some teaching or inspiration. All of us have our own unique strengths and weaknesses as designers, which makes it easy and convenient to give and take. It’s not the case where the most experienced have nothing to learn or no one to learn from.

Improving skills as a designer can come in a few different forms. You could pick up a book, follow online tutorials, look at inspiring examples from other designers, accept a challenging project, or just play around and experiment on your own. Personally, I like to mix it up and learn in a few different ways.

Get an RSS Reader

I’m sure most of you are already using an RSS reader, but they may have some helpful features that you’re not using. I use Google Reader and when I come across a tutorial that interests me, I’ll star it for later. When I’m reading through my feed reader I rarely have time to work through a detailed tutorial at that moment, but it may be something that I’ll want to use later. By starring it I can easily continue what I was doing, and then when I have some time I’ll go through my starred items and find one that I want to work through.

My advice is to star the good tutorials that you find throughout the week, and then once a week go back to your starred items, find the most interesting one and go through it. Most of us don’t have time to go through all of the tutorials that interest us, but one per week is realistic, and you’ll still benefit from continued growth that can be taken in any direction you choose.

Bookmark Designs for Inspiration

Those of us who read design-focused blogs and/or visit design galleries constantly come across designs and examples of work form other designers that can inspire us in our own work. With no system to keep track of these items, you may remember one of them but have no way to get back to it when you need it. A bookmark manager like Del.icio.us is an excellent solution for this problem.

Many designers are already using this approach, as you can see by looking at the tag “inspiration.” However, if you have a large number of bookmarks tagged as inspiration, it may be hard to find specific examples when you are looking for them. Maybe you’re bookmarking a page because of a specific aspect that you like, such as navigation. Del.icio.us can be even more helpful for you if you use a more specific tag like “inspiration-nav”. If you consistently use descriptive tags you’ll have a wealth of help when you’re in need of inspiration on a specific aspect of style of design.

Ask Questions

Having a network of other skilled designers can be very handy when you need some help. Not too long ago I was looking to add a specific functionality to a site that I’m working on and I wasn’t sure what was the best way to go about achieving the end result. I have a friend that has similar functionality on her site, so I sent her an email asking what she would recommend. Her response was better than I could have expected with some great advice and examples to use in my own site. Many designers are willing to help, you just have to ask (and it helps to have an existing relationship).

If you don’t have an existing network of designers, start to get out an meet new people, whether it’s online or off. You can also take advantage of forums that are available for this purpose. However, you’ll need to be careful of the advice that you take, as some forum users may not necessarily provide the best advice.

Read Books

Many of us spend so much time online that we forget or overlook many of the more traditional resources that are available. There are some excellent books on design on just about any subject you need help with. This is one method that I need to use more often myself.

What’s Your Approach to Learning from Other Designers?

How do you take advantage of the knowledge and skills that other designer make accessible to us?

40 Photoshop Tutorials for Lighting and Abstract Effects

Vandelay Design — Tue, 08 Jul 2008 00:40:49 +0000

Photoshop gives designers the ability to create some amazing effects that can accomplish just about anything you can image. Fortunately, there are plenty of Photoshop experts who are willing to write detailed tutorials to show off the potential. Here is a look at some of the best tutorials for using various lighting and abstract effects.

Adding Light Streaks to a Photo

Fiery Photoshop Space Explosion

Really Cool Eclipse Effect in Photoshop

Electrifying Glow Album Art

Lighting Effects in Photoshop

Luminescent Lines

Super Slick Dusky Lighting Effects

Creating Light Motion Trails and Glowing Spark

Create a Space Explosion from Scratch in Photoshop

Seriously Cool Photoshop Explosion Effect

Add a Sparkle Trail to a Photo

Space Lighting Effects in 10 Steps

Creating a Trendy Music Style Background

Advanced Glow Effects

MSNBC Style Effect

Easily Create a Beautiful, Unique Website Header

Photoshop Space Tutorial

Water Spirit - Drawing Fire

Energize Your Graphics with Abstract Energy Lines

Making an Abstract Art Piece

Super Fast - Speed Lighting Effect

Fire Lines Tutorial

Create Cool Watercolor Effects in Photoshop

True Flames

A Cool Lighting Effect in Photoshop

Shiny Starburst Effect

How to Make Great Fireworks in Photoshop

Creating Smoke

End of the World Photo Manipulation

Swirl Mania in Illustrator and Photoshop

Design a Coldplay/Apple Inspired Portrait in Photoshop

Magic Lighting Effect in Photoshop

Make Your Image Look Awesome with a Few Light Effects

Explosion Tutorial

Intense Solar Flare (Filter) Effect

Beautiful Lighting FX Effect

Smoke Effect

Leopard Starburst Effect in Photoshop

Create an Energy Drink Ad Design

Mysterious Lighting Effect Tutorial

For more Photoshop tutorials see:

Effective Use of Blog Sidebars

Vandelay Design — Sun, 06 Jul 2008 15:59:27 +0000

While sidebars aren’t the primary focal point of blogs, they still have an important role in usability and appearance. A well-designed sidebar can make it easier for visitors to find what they like, which will keep them at your site longer and improve your overall effectiveness. On the other hand, a poor sidebar can lead to lost and frustrated visitors.

Before the re-design of this site was started, the sidebar (or in this case sidebars) was a focal point of need. I felt that whatever direction the new design went, it needed to improve the usability of the site by making navigation easier and directing visitors to the appropriate parts of the site. The decision was made to use two sidebars in order to include everything that was needed without cluttering up the sidebar too much.

While I was thinking about what I wanted to do with the sidebar, I did a good deal of analyzing other blog designs that I like to see specifically what was effective about their sidebars. In this post I’d like to take a look at several examples and highlight some key points.

What is the Purpose of a Sidebar?

When you’re designing a blog , why do you use a sidebar? In some cases sidebars are probably used because it’s just the thing to do. All blogs have sidebars, right? But without knowing the purpose it’s unlikely that you’ll have an effective sidebar. In my opinion, the primary purpose of a sidebar is to aid in navigation by making it quick and easy for visitors to get to many different places on your site without searching everywhere.

Additionally, I think an effective sidebar will give a new visitor a good idea of what your blog is about and what types of content they can find on the site. If a new visitors arrives through a search engine they’re probably looking at one specific post. They will obviously be able to see the content provided in that particular post, but that doesn’t tell them what else is available at the site. A sidebar (through category listings, popular posts, recent posts, etc.) can give them a better idea of the big picture of your blog.

What Should a Sidebar Accomplish?

Highlight the appropriate content

Many blogs, mine included, use the sidebar to display the best or most popular posts or pages. The sidebar provides you with an opportunity to show readers something other than just the post they are reading. What ever is most important to your blog should be highlighted. If your most important content is your popular posts, than a simple listing of those posts can do the trick (you can do this either manually or through the use of a plugin). If you’re selling a product, this is something that you’ll probably want to highlight on your sidebar. RSS subscriptions are a priority for most bloggers, so you’ll typically see links to RSS feeds at the top of sidebars.

Give an Overview

As I mentioned earlier, the sidebar can quickly give new visitors an idea of what your blog is all about and what topics/subjects are covered. Look at the sidebar as your opportunity to explain your blog. A few bloggers do this by actually having a paragraph or two to say what the blog is about, but what’s more common is to tell the story through the content that is highlighted. Judging by the content of your sidebar(s), can new visitors get an accurate idea of what your blog is really about?

Add to the Attractiveness

Some well-designed sidebars, like the ones we’ll look at in a minute, can go beyond just improving the usability of the blog by adding to the visual appearance. You don’t want the sidebar to take too much attention away from the primary content, but it can still me more than some simple text and links. In attempt to improve the look of the sidebar at this blog, images were used to accompany the links to popular posts. It’s still too early to tell if this has been effective in terms of getting clicks to those links, but that was probably the part of the design that drew the most comments from readers.

Allow for Scaling of the Blog

Because blogs are publishing new content so frequently, the sidebar needs to be able to adapt and scale with the blog. If you add several new posts per week and your sidebar hasn’t changed for six months, chances are that it’s not reaching maximum effectiveness.

Some sidebar elements, such as a list of recent posts, will update automatically, while other changes will need to be done manually. Don’t forget every now and then to evaluate your sidebar and see what needs to be added, changed, or removed.

Examples of Excellent Sidebars

The examples listed and broken down below are just a handful of excellent sidebars that you’ll find if you look around. The images that I’m using are obviously just a portion of the sidebars, so please click-through in order to see them in all their glory.

Freelance Switch

On of my favorite sidebars is from Freelance Switch. Their sidebar is one of the most attractive ones that I have seen. The color, typography and use of several small images create a sidebar that looks great while improving on the usability of the site. One thing you may notice that Freelance Switch does differently than most blogs, there is no category listing. Instead, they link to an archives page where visitors can browse through the categories if they like. Personally, I almost never use the category links on blogs, and I’ve considered removing them on this blog for that reason. At Freelance Switch the space in the sidebar is used for other purposes, such as an “Explore Freelance Switch” section that will take new visitors on a bit of a tour through the major topics of the blog.

Pearsonified

The sidebar used at Pearsonified primarily consists of links to specific posts in a few classifications, including Must Reads, Improve Your Blog, and Worth a Look. This navigational approach in the sidebar of highlighting popular or important posts is pretty common, but Chris gives his links a stylish, colorful look that you don’t see everywhere.

Pro Blog Design

Michael Martin of Pro Blog Design uses an attractive sidebar that features one of the nicer feed subscription areas that you’ll see. Right below that he has a spot that advertises his design services, which is a good use of the prime screen real estate in his sidebar.

David Airey

Graphic designer David Airey uses a very nice, clean blog layout with sidebar on each side. The sidebars are mostly lists with some CSS styling for appearance, which goes nicely with the overall look of his blog. At the top of the left sidebar, where most visitors will look first, he has a small picture of himself and links for “Hire David Airey” and “View David Airey’s Portfolio.” Since David’s blog serves in part to indirectly sell his services, this section of his sidebar is an excellent choice. It puts the most important parts of his site where visitors will see it, and the picture helps potential clients to feel like they know him a little better.

Copyblogger

Copyblogger also has a sidebar on each side. The top of the left sidebar, which starts very high on the page, includes an attract call for subscriptions, and then it links to some of the more important sections of the site. This list includes links to a few individual posts and links to pages that have been set up to funnel visitors to posts on particular topics (a nice use of WordPress pages).

The 9513

The 9513 is a country music blog with an excellent design overall. It uses two sidebars, however, most of the content is in the right sidebar. The part that I’d like to point out links to recent album reviews on the blog. Album cover images are used to link to 8 recent reviews. Very little screen space is taken up by this, but it adds to appearance of the sidebar and makes it easy for visitors to read the reviews that interest them.

What’s Your Approach with a Sidebar?

When you’re designing a blog theme, what do you hope to accomplish with a sidebar?

Are Paid Links a Necessary Search Engine Optimization Evil?

Vandelay Design — Fri, 04 Jul 2008 14:51:17 +0000

This is a guest post written by David Brown.

What do nearly all high ranking websites have in common? As a search engine marketing consultant, I am confronted with the task of evaluating the inbound links of thousands of websites each month. In doing so, I have come to the realization that top ranking websites continue to pay for links despite Google’s public disapproval. Google’s minimalistic efforts to combat paid link building force ethical search engine marketing companies to buy links in order to compete. If done poorly, paid linkers run the risk of having short-lived benefits and potentially harmful consequences. The following tips will help you identify paid links that have positive and long-lasting results on search engine optimization efforts.

If a website requiring payment for a link is less of a directory, and more of an informational resource, Google is unlikely to detect and/or punish website owners for purchasing links from them. Furthermore, it is important that the sale of links be done discretely. A website that does not include a rate sheet for purchasing links is very unlikely to be detected by Google. It takes too much time for Google’s quality control team to pose as website owners and obtain incriminating information. Lastly, I advise against paying for links in directories that offer to submit your link to other directories. These services are Google’s primary targets.

Say I want to be number one for the phrase, “Portland Search Engine Marketing.” I would type this phrase into Google and begin looking for websites that I can get links from. One of the top results is a .org website for a Portland search engine marketing association. If I become a corporate sponsor I can get a link to my blog placed on the right side navigation of this relevant, nonprofit website. It is highly unlikely that Google will ever combat this form of paid linking because membership in a professional organization is a sign of credibility and you are paying for membership rather than a link.

Scrolling down to the bottom of the search results for, “Portland Search Engine Marketing,” I noticed the freelance designer directory. This directory is pretty blatant about selling links, yet Google does nothing about it. Some indicators that this is one of the safer directories are that a free, nonreciprocal option is available, there is an abundance of relevant text, it ranks on the first page for competitive key phrases and Google approved them for AdSense. Getting credit from this site may be short-lived because they are breaking Google’s rules by charging for links and not using the “nofollow” element. However, it is unlikely that websites with links from this directory will get punished because Google will also be punishing those who opted for a free listing.

Since implementing efforts to combat paid linking, Google has done a lousy job of making paid links obsolete. At the current rate, Google will be able to detect intelligent link buying in approximately… never. I consider myself to be an ethical search engine marketing consultant because Google’s unenforceable rules are less important than my ethical obligation to generate leads for my clients. Whether or not their opinions are publicly stated, I can say with confidence that nearly all reputable search marketing companies take part in paid link building. If you don’t believe me, analyze their inbound links.

David Brown is a search engine marketing consultant with Westhill Media.