Don’t Over Optimize Your Site

SEO is a best practices game. Understanding how not to over optimize is an important part of the mix. …

SEO is a best practices game. Understanding how not to over optimize is an important part of the mix. …

Are There Any Great Link Building Activities Left?

A friend and fellow search engine optimization expert asked if I knew of any good link building tactics. I thought he must know the same thing that I know. That is, that relevant link building is getting harder and harder…it has been over the last 3 to 4 years. We both agreed that the [...]

A friend and fellow search engine optimization expert asked if I knew of any good link building tactics. I thought he must know the same thing that I know. That is, that relevant link building is getting harder and harder…it has been over the last 3 to 4 years. We both agreed that the best way to get links is to simply write great content and over time, people will then link to your great content. But what about beyond that? Directories? Articles? Blog comments? Online Publicity?

The search engines always seem to be playing this never ending game of cat and mouse with links and search engine optimziation folks trying to build them. Truth is, link building is not for the faint of heart. A good link today may turn sour next week or next year. Then what? Reality is if you develop a blended white hat (by the book or following each search engine webmaster guidelines), then you should not have any issues in the future. Meaning, if you know a link source is not the best, for instance, not relevant, link exchange or paid link, then stay away from it. Also, never abuse any type of link building activity. If a particular source of a relevant link is generating visitors to your website then continue, but don’t overdo anything. The reality is the search engines always change things because SEO folks (or black/grey hat ones) tend to abuse a certain link building activity. I remember 6 years ago, link building consisted of some of the same things as it does today, but you could have a site with good content and good site optimziation and then exchange links and do very well. This is NOT the case today!

But that doesn’t mean link building is a fruitless activity. I still believe in the power of good links even if they’re getting more and more difficult to find. But what makes for a good link?

Based on my experience and various industry sources that I have seen in recent times, the criteria still come to:

  • Relevance
  • Authority
  • Anchor Text
  • Age

Not necessarily in that order, but those are the important factors to locating a good quality link. So now that we know what kind of links to go for – relevant links from authoritative sites with strong anchor text that have aged – how do you get them? First, what you should NOT do is run out and start spamming directories and social bookmarking websites. That will get you nowhere. What will get you places is to write great content and market that content to your target audience in the places where your target audience likes to hang out. If you’ll do that on a consistent basis you’ll see the links. But a moderate submission strategy to top-notch authoritative websites within your niche is a nice augment. And don’t sweat the small stuff. The most important advice that I can give you is do your research and plan out your link building activities in advance, not only does this make it manageable, but keeps your link building program on track.

Progress Trackers in Web Design: Examples and Best Practices


  

When designing a large website, especially one that contains a store, you may be required to design a system for ordering online, or a multi-step process of another sort. Walking users through this process by making it easy and intuitive is key to helping increase conversion rates. Any frustration along the way may cause them to leave and pursue other options. Progress trackers are designed to help users through a multi-step process and it is vital that such trackers be well designed in order to keep users informed about what section they are currently on, what section they have completed, and what tasks remain.

Progress Tracker Example

Urban Original's progress tracker

In this article we will look at various uses of progress trackers and see how they’ve been implemented, what they are doing well, and what they are not doing well.

You may not be familiar with the term ‘progress tracker’, also called a ‘progress indicator’ — but chances are good that you have encountered one at one time or another. They are used in online stores when placing an order, signing up to an online product or service, or even when booking a holiday online. Progress trackers guide the user through a number of steps in order to complete a specified process.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Progress Trackers in Web Design: Examples and Best Practices" border="0" /> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Progress Trackers in Web Design: Examples and Best Practices" />  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Progress Trackers in Web Design: Examples and Best Practices" />  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Progress Trackers in Web Design: Examples and Best Practices" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in Progress Trackers in Web Design: Examples and Best Practices" border="0" width="1" height="1" /> /> When designing a large website, especially one that contains a store, you may be required to design a system for ordering online, or a multi-step process of another sort. Walking users through this process by making it easy and intuitive is key to helping increase conversion rates. Any frustration along the way may cause them to leave and pursue other options. Progress trackers are designed to help users through a multi-step process and it is vital that such trackers be well designed in order to keep users informed about what section they are currently on, what section they have completed, and what tasks remain.

In this article we will look at various uses of progress trackers and see how they’ve been implemented, what they are doing well, and what they are not doing well.

[Offtopic: By the way, did you know that Smashing Magazine has a href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1249__zoneid=0__cb=be1da96c6d__oadest=http%3A%2F%2Fm.smashingmagazine.com">mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

What are Progress Trackers?

You may not be familiar with the term ‘progress tracker’, also called a ‘progress indicator’ — but chances are good that you have encountered one at one time or another. They are used in online stores when placing an order, signing up to an online product or service, or even when booking a holiday online. Progress trackers guide the user through a number of steps in order to complete a specified process.

class="showcase"> href="http://www.game.co.uk/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/game_pr.gif" alt="Game Pr in Progress Trackers in Web Design: Examples and Best Practices" width="548" height="54" /> /> An example of a progress tracker at href="http://www.game.co.uk">Game

The Difference Between Progress Trackers and Breadcrumbs

As we have detailed previously in href="http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/">Breadcrumbs In Web Design: Examples And Best Practices, breadcrumbs are a way of enhancing navigation by revealing a user’s current location. Initially, breadcrumbs and progress trackers may seem very similar and in many ways they are, however, there are significant differences.

Breadcrumbs show you only where you have been (or what sections are above the current section in the application’s hierarchy), whereas progress trackers indicate a set path that a user follows to complete a specific task. Progress trackers show you not only where you are currently located, but also what steps you have previously taken, and what steps you are about to take.

class="showcase"> href="http://coolspotters.com/musicians/michael-jackson/and/albums/thriller"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/breadcrumbs_pr.gif" alt="Breadcrumbs Pr in Progress Trackers in Web Design: Examples and Best Practices" width="550" height="31" /> /> Example of breadcrumbs at href="http://coolspotters.com">Coolspotters

Progress trackers are best used when there is a specific goal to achieve. They are synonymous with conversion and are used as a way of improving usability — which is key when href="http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/">optimizing conversion rates. Conversion is all about selling online so you will see a progress tracker in some form in almost every online store.

Now that we’ve reviewed what a progress tracker is, let’s look at situations that would require or even benefit from the implementation of a well-designed progress tracker.

Uses of Progress Trackers

As mentioned previously, progress trackers can be used in a variety of contexts. The following three are the most common.

1. Online Ordering /> By far the most common application of progress trackers is in conjunction with online purchasing, since this usually involves multiple steps.

class="showcase"> href="https://hmv.com/hmvweb/checkoutRegister.do"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/hmv_pr.gif" alt="Hmv Pr in Progress Trackers in Web Design: Examples and Best Practices" width="577" height="33" /> /> The progress tracker used by href="https://hmv.com/hmvweb/checkoutRegister.do">HMV.

class="showcase"> href="https://www.etsy.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/etsy_pr.gif" alt="Etsy Pr in Progress Trackers in Web Design: Examples and Best Practices" width="396" height="36" /> /> The progress tracker used at href="https://www.etsy.com">Etsy.

2. Feature Tour Guides /> Progress trackers are also used to guide users through the features of online products and services, as demonstrated in the following examples:

class="showcase"> href="http://searchinsidevideo.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/searchInsideVideo_pr.gif" alt="SearchInsideVideo Pr in Progress Trackers in Web Design: Examples and Best Practices" width="488" height="48" /> /> Progress tracker as used by href="http://searchinsidevideo.com">Search Inside Video.

class="showcase"> href="http://www.flickr.com/tour/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/flickr.jpg" alt="Flickr in Progress Trackers in Web Design: Examples and Best Practices" width="596" height="43" /> /> href="http://www.flickr.com/tour/">Flickr’s tour page provides a look at the features of their service.

3. Multi-Step Forms /> If a form requires a lot of user input, it may be best to split the form into multiple steps.

class="showcase"> href="https://secure.livestream.com/myaccount/launchchannel"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/livestream_pr.gif" alt="Livestream Pr in Progress Trackers in Web Design: Examples and Best Practices" width="375" height="41" /> /> href="https://secure.livestream.com/myaccount/launchchannel">Livestream’s progress tracker design.

class="showcase"> href="http://planner.builtbybuffalo.com/step-1/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/buffalo_pr.gif" alt="Buffalo Pr in Progress Trackers in Web Design: Examples and Best Practices" width="559" height="259" /> /> The progress tracker used on href="http://planner.builtbybuffalo.com/step-1/">Buffalo’s Project Planner form

Best Practices in Progress Tracker Design

Indicating a Logical Progression /> Most progress trackers are designed to display the steps from left to right. In most lands, people read from left to right, so it makes sense that progress trackers follow that pattern. That isn’t enough though — there has to be something that informs the user that they are performing a multi-step process.

class="showcase"> href="http://www.blockbuster.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/blockbuster_pr.gif" alt="Blockbuster Pr in Progress Trackers in Web Design: Examples and Best Practices" width="598" height="29" /> /> href="http://www.blockbuster.com">Blockbuster have included both arrows and numbers in their progress tracker, thus clearly communicating a logical progression.

Keeping the User Informed of their Location /> One key aspect of good progress tracker design is keeping the user informed of where the user is in the process. This complements the logical progression because the user will know where they are in relation to where they have been, and what sections are to follow.

class="showcase"> href="http://www.mrandmrssmith.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/mrandmrsSmith_pr.gif" alt="MrandmrsSmith Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="36" /> /> href="http://www.mrandmrssmith.com/">Mr and Mrs Smith indicates the user’s current location by clearly highlighting the current step and turning the arrow downwards.

Positioning /> Since progress trackers are a form of navigation, it is best to place them below the primary and secondary navigation (such as breadcrumbs) and above the content that the progress tracker relates to. Also, while a progress tracker can act as a page title, it is best to place the title of the current section underneath the progress tracker, to reinforce the current location.

class="showcase"> href="https://www.gamestation.co.uk/Checkout/Basket/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/gamestation.jpg" alt="Gamestation in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="241" /> /> href="https://www.gamestation.co.uk/Checkout/Basket/">Gamestation places their progress tracker clearly below the primary and secondary navigation.

Implementations of Progress Trackers

Plain Text /> Below is an example of a plain text progress tracker on href="http://mediatemple.net">Media Temple’s website. One benefit of a plain text progress tracker is that it can be edited easily.

class="showcase"> href="http://mediatemple.net"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/mediaTemple_pr.gif" alt="MediaTemple Pr in Progress Trackers in Web Design: Examples and Best Practices" width="485" height="45" />

Sprite-Based /> href="http://www.sovereign.com">Sovereign uses the popular CSS sprites technique to build their progress tracker and reduce HTTP requests going through the online booking process.

class="showcase"> href="http://www.sovereign.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/sovereign_pr.gif" alt="Sovereign Pr in Progress Trackers in Web Design: Examples and Best Practices" width="518" height="240" />

Design Mistakes to Avoid

Indistinguishable from Breadcrumbs /> href="http://www.typepad.com/go/design-assistant/">TypePad’s Design Assistant can be very easily confused with a breadcrumb navigation system.

class="showcase"> href="http://www.typepad.com/go/design-assistant/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/typepad.jpg" alt="Typepad in Progress Trackers in Web Design: Examples and Best Practices" width="560" height="60" />

Not Enough Information /> href="http://easyjet.com">easyJet’s old progress tracker on their booking path was poorly executed. Although it gave you the total number of steps in the process, it didn’t indicate which steps you’ve completed or which were remaining.

class="showcase"> href="http://easyjet.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/easyjet_pr.gif" alt="Easyjet Pr in Progress Trackers in Web Design: Examples and Best Practices" width="389" height="91" />

Their new progress tracker, launched within the last few weeks, is a big improvement, indicating current location, past steps, and steps to come. They now also make good use of the page title which has descriptive wording to complement the current progress tracker label.

class="showcase"> href="http://easyjet.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/easyjetNew_pr.gif" alt="EasyjetNew Pr in Progress Trackers in Web Design: Examples and Best Practices" width="515" height="81" />

No Sense of Progression /> href="http://www.daniblack.com">daniblack incorrectly uses a tab system for their progress tracker. The problem with this is that tabs don’t offer any visual representation of progress. The addition of numbers or arrows would give at least some sort of indication of progression in this example.

class="showcase"> href="http://www.daniblack.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/daniblack_pr.gif" alt="Daniblack Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="49" />

Progress Tracker Showcase

Now that we know what a progress tracker is, how it is used, and the best approach to its design, let’s look at a number of well-designed progress trackers currently in use.

href="http://battle.net">Battle.net uses the method of incrementally filling a bar as you progress through the steps in their sign-up form.

class="showcase"> href="http://battle.net"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/battlenet.jpg" alt="Battlenet in Progress Trackers in Web Design: Examples and Best Practices" width="413" height="54" />

href="http://www.ikea.com">Ikea

class="showcase"> href="http://www.ikea.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/ikea_pr.gif" alt="Ikea Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="60" />

href="http://www.amazon.com/">Amazon has a shopping trolley travelling across their progress tracker, leaving an orange line marking where it has been.

class="showcase"> href="http://www.amazon.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/amazon_pr.gif" alt="Amazon Pr in Progress Trackers in Web Design: Examples and Best Practices" width="427" height="39" />

href="http://www.organicsupermarket.ie/">Organic Supermarket

class="showcase"> href="http://www.organicsupermarket.ie/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/organicSupermarket_pr.gif" alt="OrganicSupermarket Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="59" />

href="http://www.threadless.com/">Threadless

class="showcase"> href="http://www.threadless.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/threadless_pr.gif" alt="Threadless Pr in Progress Trackers in Web Design: Examples and Best Practices" width="280" height="54" />

href="http://www.uo.com.au/">Urban Originals

class="showcase"> href="http://www.uo.com.au/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/urbanOriginals_pr.gif" alt="UrbanOriginals Pr in Progress Trackers in Web Design: Examples and Best Practices" width="594" height="35" />

href="http://firebox.com/">Firebox

class="showcase"> href="http://firebox.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/firebox_pr.gif" alt="Firebox Pr in Progress Trackers in Web Design: Examples and Best Practices" width="580" height="35" />

href="http://www.apple.com/">Apple

class="showcase"> href="http://www.apple.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/apple_pr.gif" alt="Apple Pr in Progress Trackers in Web Design: Examples and Best Practices" width="593" height="40" />

href="http://www.vitradirect.com/">Vitradirect

class="showcase"> href="http://www.vitradirect.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/vitradirect_pr.gif" alt="Vitradirect Pr in Progress Trackers in Web Design: Examples and Best Practices" width="576" height="65" />

href="http://www.mousetominx.co.uk/">Mouse to Minx

class="showcase"> href="http://www.mousetominx.co.uk/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/mousetominx_pr.gif" alt="Mousetominx Pr in Progress Trackers in Web Design: Examples and Best Practices" width="322" height="25" />

href="http://www.cafepress.co.uk/">CafePress

class="showcase"> href="http://www.cafepress.co.uk/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/cafepress_pr.gif" alt="Cafepress Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="34" />

href="http://www.topshop.com/">Topshop

class="showcase"> href="http://www.topshop.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/topshop_pr.gif" alt="Topshop Pr in Progress Trackers in Web Design: Examples and Best Practices" width="501" height="30" />

href="http://johnlewis.com/">John Lewis uses an image of a truck travelling along their progress tracker.

class="showcase"> href="http://johnlewis.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/johnlewis_pr.gif" alt="Johnlewis Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="76" />

href="http://comet.co.uk/">Comet ticks off sections that have already been completed.

class="showcase"> href="http://comet.co.uk/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/comet_pr.gif" alt="Comet Pr in Progress Trackers in Web Design: Examples and Best Practices" width="561" height="29" />

href="http://www.boots.com/">Boots‘ Progress tracker spans the width of the page.

class="showcase"> href="http://www.boots.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/boots_pr.gif" alt="Boots Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="29" />

href="http://www.webmd.com/diet/weight-loss-surgery/weight-loss-surgery-health-check/default.htm">Web MD uses a progress bar and percentage values as a way of tracking progress on their health check questionnaires.

class="showcase"> href="http://www.webmd.com/diet/weight-loss-surgery/weight-loss-surgery-health-check/default.htm"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/webmd_pr.gif" alt="Webmd Pr in Progress Trackers in Web Design: Examples and Best Practices" width="582" height="19" />

href="http://www.argos.co.uk/">Argos

class="showcase"> href="http://www.argos.co.uk/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/argos_pr.gif" alt="Argos Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="60" />

href="http://www.altrec.com/">Altrec

class="showcase"> href="http://www.altrec.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/altrec_pr.gif" alt="Altrec Pr in Progress Trackers in Web Design: Examples and Best Practices" width="490" height="56" />

href="https://www.surfride.com">SurfRide

class="showcase"> href="https://www.surfride.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/surfride_pr.gif" alt="Surfride Pr in Progress Trackers in Web Design: Examples and Best Practices" width="535" height="51" />

href="http://www.iworkwear.nl">iWorkwear

class="showcase"> href="http://www.iworkwear.nl"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/iworkwear_pr.gif" alt="Iworkwear Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="77" />

href="http://www.zumiez.com">Zumiez

class="showcase"> href="https://www.zumiez.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/zumiez_pr.gif" alt="Zumiez Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="24" />

href="http://www.toysrus.com">Toys”R”Us

class="showcase"> href="http://www.toysrus.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/toysrus_pr.gif" alt="Toysrus Pr in Progress Trackers in Web Design: Examples and Best Practices" width="599" height="58" />

href="http://www.ebags.com">eBags

class="showcase"> href="http://www.ebags.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/ebags_pr.gif" alt="Ebags Pr in Progress Trackers in Web Design: Examples and Best Practices" width="514" height="42" />

href="http://www.footlocker.com">Foot Locker

class="showcase"> href="http://www.footlocker.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/footlocker_pr.gif" alt="Footlocker Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="29" />

href="http://www.theultimategreenstore.com">The Ultimate Green Store

class="showcase"> href="http://www.theultimategreenstore.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/theultimategreenstore_pr.gif" alt="Theultimategreenstore Pr in Progress Trackers in Web Design: Examples and Best Practices" width="540" height="25" />

href="http://www.crateandbarrel.com">Crate and Barrel

class="showcase"> href="http://www.crateandbarrel.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/crateandbarrel_pr.gif" alt="Crateandbarrel Pr in Progress Trackers in Web Design: Examples and Best Practices" width="516" height="37" />

href="http://www.pistolclothing.com.au">Pistol Clothing

class="showcase"> href="http://www.pistolclothing.com.au"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/pistolclothing_pr.gif" alt="Pistolclothing Pr in Progress Trackers in Web Design: Examples and Best Practices" width="389" height="35" />

href="http://www.americanapparel.com">American Apparel

class="showcase"> href="http://www.americanapparel.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/americanapparel_pr.gif" alt="Americanapparel Pr in Progress Trackers in Web Design: Examples and Best Practices" width="575" height="22" />

href="http://www.pcworld.co.uk">PC World

class="showcase"> href="http://www.pcworld.co.uk"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/pcworld_pr.gif" alt="Pcworld Pr in Progress Trackers in Web Design: Examples and Best Practices" width="552" height="23" />

href="http://www.abelandcole.co.uk">Abel & Cole

class="showcase"> href="http://www.abelandcole.co.uk"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/abelandcole_pr.gif" alt="Abelandcole Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="57" />

href="http://www.eccousa.com">Ecco USA

class="showcase"> href="http://www.eccousa.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/ecco_pr.gif" alt="Ecco Pr in Progress Trackers in Web Design: Examples and Best Practices" width="291" height="28" />

href="http://www.designpublic.com">Design Public

class="showcase"> href="http://www.designpublic.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/designpublic_pr.gif" alt="Designpublic Pr in Progress Trackers in Web Design: Examples and Best Practices" width="333" height="34" />

href="http://www.golfsmith.com">Golfsmith uses a combination of numbers and a progress bar with an arrow.

class="showcase"> href="http://www.golfsmith.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/golfsmith_pr.gif" alt="Golfsmith Pr in Progress Trackers in Web Design: Examples and Best Practices" width="369" height="26" />

href="http://www.petco.com">PETCO

class="showcase"> href="http://www.petco.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/petco_pr.gif" alt="Petco Pr in Progress Trackers in Web Design: Examples and Best Practices" width="375" height="18" />

href="http://www.footballfanatics.com">Football Fanatics

class="showcase"> href="http://www.footballfanatics.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/footballfanatics_pr.gif" alt="Footballfanatics Pr in Progress Trackers in Web Design: Examples and Best Practices" width="357" height="34" />

href="http://www.habitat.com">The Habitat Company

class="showcase"> href="http://www.habitat.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/habitat_pr.gif" alt="Habitat Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="28" />

href="http://www.waltons.co.uk">Walton Garden Buildings

class="showcase"> href="http://www.waltons.co.uk"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/walton_pr.gif" alt="Walton Pr in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="48" />

href="http://www.lookfantastic.com">lookfantastic uses icons to visually enhance their progress tracker.

class="showcase"> href="http://www.lookfantastic.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lookfantastic_pr.gif" alt="Lookfantastic Pr in Progress Trackers in Web Design: Examples and Best Practices" width="337" height="58" />

href="http://www.diy.com">B&Q

class="showcase"> href="http://www.diy.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/bq.gif" alt="Bq in Progress Trackers in Web Design: Examples and Best Practices" width="600" height="36" />

Related posts

You may be interested in the following related posts:

  • href="http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/">Showcase Of Modern Navigation Design Trends
  • href="http://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/">Designing “Coming Soon” Pages
  • href="http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/">Call to Action Buttons: Examples and Best Practices
  • href="http://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/">Search Results Design: Best Practices and Design Patterns
/>

© Tom Kenny for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/">Permalink | href="http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/#comments">45 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/&title=Progress%20Trackers%20in%20Web%20Design:%20Examples%20and%20Best%20Practices">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Progress%20Trackers%20in%20Web%20Design:%20Examples%20and%20Best%20Practices'%20http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/progress/" rel="tag">progress, href="http://www.smashingmagazine.com/tag/showcases/" rel="tag">showcases

The Most Important SEO Tip For 2010

As we head into a new year (it’s 2010 already?) I thought I’d discuss the most important thing about SEO. It used to be keywords. Back in the day, before Google, when webmasters wanted to ensure that pages ranked well enough to receive top rankings in the search engines of the day, you just had [...]

As we head into a new year (it’s 2010 already?) I thought I’d discuss the most important thing about SEO. It used to be keywords. Back in the day, before Google, when webmasters wanted to ensure that pages ranked well enough to receive top rankings in the search engines of the day, you just had to know how to use your keywords correctly. Then Google came along.

Google changed the SEO game from a strictly keyword-based on-page optimization rule to a combination of on-page factors and off-page link building strategies. From 1998 to about 2003 the most important thing to consider for SEO purposes were your inbound links.

Even after 2003, inbound links were still important, but you had to go about your link building efforts in a different way. Quality of links rather than quantity of links became more important.

Starting in 2005, your social graph became even more important. And I believe that social graphs will become even more important in the future. But that’s not the most important SEO factor for 2010.

So what is?

In 2010, the most important thing you need to know about SEO can be summarized in one word:

    Diversify!

That’s it. Diversify. Don’t just focus on one thing. Stretch out and move your SEO in multiple directions at once. Universal search and mixed media are not going away. They will only become more influential as the search engines learn to rank the various media available to them. YouTube is one of the most important web properties now, as is Facebook. To truly take advantage of the best SEO opportunities you should be branching out into multiple streams of search engine optimization including videos, viral marketing, podcasting, link building, social media, real time, and whatever else pops up between now and then.

The search engines of the future will be multimedia portals. It’s time to start thinking that way.

Is Buying a FarmVille Secret Guide Worth It?

I have to admit, I was pretty skeptical when I first started seeing FarmVille secret guides popping up. I mean, I’d never really played the game, but from the name I assumed there couldn’t be all that much to it. After all, how much strategy could possibly go into building a virtual farm? But once [...]

FarmVille

I have to admit, I was pretty skeptical when I first started seeing FarmVille secret guides popping up. I mean, I’d never really played the game, but from the name I assumed there couldn’t be all that much to it. After all, how much strategy could possibly go into building a virtual farm? But once I started seeing these guides, I figured it’d be worth taking a shot at the game to see what all the hubbub could possibly be about.

And I was actually rather surprised. Building my own virtual farm was much more enjoyable than I’d imagined it would be. Part of that was because there really were a lot of options and a lot of decisions to make. The more I played the game, the more I realized that there probably could be a lot of helpful information in a guide because there were just too many ways you could play.

FarmVille Secrets

I was doing alright on my own, but I was getting more and more curious about what I might be missing out on. After I reached level 13 and was having a hard time getting farther, I decided to give one of the guides a shot. I bought FarmVille Secrets, a relatively new guide and pretty up to date on the latest additions to the game. I really wasn’t expecting too much, but this guide just blew me away.


How To: Level up Fast In Farmville!

In no time, I was the Cream of the Crop, a level 24 farmer with a Big Family Farm and tons of neighbors to visit. Using the tips in this guide helped me way more than I thought they would – even when I read them. There’s a lot more to this farming stuff than meets the eye. I’d recommend picking up a copy of FarmVille Secrets Guide if you’re interested in getting the most out of your FarmVille experience.

SocialTwist Tell-a-Friend



Advanced Power Tips For WordPress Template Developers


  

Back in July, “Power Tips for WordPress Template Developers” presented 8 basic techniques for adding popular features to the front end of a WordPress-powered website. The premise was that WordPress has become an elegant, lightweight content management solution that offers the fundamentals out of the box, atop a modular core that offers incredible potential in the hands of a capable developer.

Screenshot

WordPress does not try to be an “everything to everyone” CMS right out of the box. Many systems do an average job incorporating 99% of what the potential CMS market might need, even if the last 15-20% is used only by a fraction of the market and adds considerably to the system’s overall “heft” (or bloat). At the other end of the spectrum are completely custom solutions that are finely tailored to exact needs, at the cost of reinventing wheels like polished content editing with media management and version control.

That previous “Power Tips” entry scratched the surface, covering a handful of API calls mixed in with some simple PHP code and configuration tips intended to help beginner WordPress template developers kick their game up a notch. This article takes power tips to the next level, expanding on some of the topics in the first article, and introducing more advanced techniques and methods for customizing not only the front end, but the content management (or back end) experience.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Advanced Power Tips For WordPress Template Developers" border="0" /> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Advanced Power Tips For WordPress Template Developers" />  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Advanced Power Tips For WordPress Template Developers" />  href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Advanced Power Tips For WordPress Template Developers" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in Advanced Power Tips For WordPress Template Developers" border="0" width="1" height="1" /> /> Back in July, “ href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/">Power Tips for WordPress Template Developers” presented 8 basic techniques for adding popular features to the front end of a WordPress-powered website. The premise was that href="http://www.wordpress.org">WordPress has become an elegant, lightweight content management solution that offers the fundamentals out of the box, atop a modular core that offers incredible potential in the hands of a capable developer.

WordPress does not try to be an “everything to everyone” CMS right out of the box. Many systems do an average job incorporating 99% of what the potential CMS market might need, even if the last 15-20% is used only by a fraction of the market and adds considerably to the system’s overall “heft” (or bloat). At the other end of the spectrum are completely custom solutions that are finely tailored to exact needs, at the cost of reinventing wheels like polished content editing with media management and version control.

The self-proclaimed WordPress “code poets” have, alternatively, focused on doing an A+ job with the “fat middle”: the 80-85% of features that almost everyone needs, and coupling those with a first rate framework and API that enables capable developers to add in almost any niche or “long tail” feature. In fact, the core WordPress framework is so capable that a handful of title="WordPress frameworks" href="http://www.smashingmagazine.com/2009/05/27/wordpress-theme-development-frameworks/">“intermediary” frameworks that sit on top of it have already emerged.

That previous “Power Tips” entry scratched the surface, covering a handful of API calls mixed in with some simple PHP code and configuration tips intended to help beginner WordPress template developers kick their game up a notch. This article takes power tips to the next level, expanding on some of the topics in the first article, and introducing more advanced techniques and methods for customizing not only the front end, but the content management (or back end) experience.

You may be interested in the following related posts:

  • href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/">Power Tips for WordPress Template Developers
  • href="http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/">10 Useful WordPress loop hacks
  • href="http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/">Custom Field Hacks for WordPress
  • href="http://www.smashingmagazine.com/2009/11/25/2009/03/04/15-useful-twitter-plugins-and-hacks-for-wordpress/">15 Useful Twitter Hacks and Plugins For WordPress
  • href="http://www.smashingmagazine.com/2009/11/25/2009/05/18/100-amazing-free-wordpress-themes-for-2009/">100 Amazing Free WordPress Themes For 2009

Multiple Column Content Techniques

The average blog or website has a single, clearly defined block of space for a given page’s or post’s unique content. But there are plenty of creative websites that don’t conform to this simple notion of “one unique block” per page. A creative online portfolio layout might feature a screenshot and project description in a left column, and a list of technologies used in a right column. Both the left and right column are unique to each portfolio page.

Here’s a screenshot from an in-development website project, built on WordPress. The “projects” area features portfolio-like layouts of green building projects throughout the state. In addition to a specially designed gallery visualization, note that the individual project profile has two distinct columns.

class="alignnone size-full wp-image-19110" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/rigbc-2-column.jpg" alt="Rigbc-2-column in Advanced Power Tips For WordPress Template Developers" width="500" height="478" />

A more commonplace layout might feature an obvious, primary block of page content, but also feature a sidebar element that is unique to the current page: maybe a quote from a customer about a specific product or service. The href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/">“Power Tips” article offered a method to associate sidebar elements with multiple pages using custom fields and page IDs (tip #6). That approach isn’t very effective or efficient for designs with a 1:1 relationship between sidebars and pages (where each page has a unique sidebar element).

href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/"> class="alignnone size-full wp-image-19111" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/sidebars.jpg" alt="Sidebars in Advanced Power Tips For WordPress Template Developers" width="500" height="206" />

Yes, the developer could href="http://wordpress.org/extend/plugins/mce-table-buttons/">add table buttons to the WordPress editor, and let content authors fend for themselves: a solution prone to problematic layouts and bad output relied upon far too often. Here are a few simple options that keep layout in the hands of the template developer while making content management easier and problem-free.

Short, simple, and HTML free? No worries.

Before we delve into solutions that assume a need for HTML formatting in this second content block, let’s review a more basic solution. If the second column does not need to be formatted – or maybe should not be formatted by the editor for design reasons – then a simple custom field will do the trick. In the case of a simple sidebar element, like a customer quote, this may be just the trick.

There are already href="http://www.kriesi.at/archives/how-to-use-wordpress-custom-fields">great tutorials and href="http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/">useful custom fields hacks that walk through the WordPress custom fields feature, so if you are not familiar with the basic idea behind custom fields, start there. Let’s go ahead and create a custom field named “sidebar_content” (also known as the “key”), and put some simple content in there. Just to shake things up, let’s assume we do need a very basic HTML feature for our content authors, who know nothing about HTML: line and paragraph breaks. Let’s also assume that we want to format this sidebar content on the front end with some of the basic automatic niceties we get when we output post content, like curly quotation marks.

class="alignnone size-full wp-image-19114" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/sidebar-custom-field.gif" alt="Sidebar-custom-field in Advanced Power Tips For WordPress Template Developers" width="500" height="236" />

Here’s how we can output this in any template file, using the href="http://codex.wordpress.org/Plugin_API/Filter_Reference/the_content">“the_content” filter to apply the WordPress content filter to our custom field. That filter converts single line breaks to break tags, double line breaks to paragraphing tags, and even transforms simple quotation marks to curly quotes!

$sidebar_content = get_post_meta($post->ID, "sidebar_content", true);

if ($sidebar_content) {
   echo '<div id="sidebar_content">';
   echo apply_filters("the_content", $sidebar_content);
   echo '</div>';
}

Of course, we can make this even more intuitive for the content authors by creating a new meta field box for sidebar content instead of relying on the generic “custom fields” box… which will be covered later in this article!

Using the More Tag for… More

The WordPress editor has a button “more tag” button that is primarily intended to separate “above the fold” content from “below the fold” content. If you are not already familiar with the “more” divider, title="WordPress more divider" href="http://codex.wordpress.org/Customizing_the_Read_More">read up on that first.

If the pages or posts that need a two column layouts also rely on traditional more separation, this tip will most likely not be effective, unless one of the columns is also the intended “above the fold” content. However, most instances where a two column layout is desirable don’t overlap with a traditional above / below the fold need. It is fairly rare, for instance, for pages (vs. posts) to actually make any use of the more tag. So let’s start taking advantage of that feature!

The basic idea is that content above the more divider will represent one block of HTML content, while content below the divider will represent a second block (be it a sidebar element or column).

class="alignnone size-full wp-image-19133" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/sidebar-using-more-tag.gif" alt="Sidebar-using-more-tag in Advanced Power Tips For WordPress Template Developers" width="500" height="286" />

Here is how to retrieve content above and below the more divider as separate blocks of HTML content in the corresponding page template file.

global $more;

$more = 0;
echo '<div id="column_one">';
the_content('');
echo '</div>':

$more = 1;
echo '<div id="column_two">';
the_content('',true);
echo '</div>';

The global “more” variable lets WordPress know whether or not the content is being rendered in an “above the fold” (or “teaser”) only view. By passing an empty string to href="http://codex.wordpress.org/Template_Tags/the_content">“the_content”, we prevent a “read more” link from showing up below the HTML content. And, for column two, we pass a second parameter to “the_content” – true – which instructs WordPress to output the content without the teaser.

If the intent is to output the second block of content outside of the loop in another template element, such as a sidebar, this approach is a bit trickier. One option would be to store the second block of content in a uniquely named variable, declare it as a global variable in the sidebar, and – if there is any content inside the variable – output a new block. An alternative could involve checking which page template is in use with the href="http://codex.wordpress.org/Conditional_Tags#Is_a_Page_Template">“is_page_template” function, and, if the two column template is in use, calling “the_content” with the second parameter set to true, as in the example above.

The Plug-in Solution: Adding a Second HTML Content Block to the Editor

The ideal solution, of course, might be a second HTML editor field on the WordPress page or post editor. Unfortunately, no such plug-in existed… until recently! While writing this article, we decided it was time such a solution did exist, and so the author of this article is happy to present a free, open source plug-in that combines some savvy understanding of how TinyMCE works (hint: it’s as simple as a class name) with the custom meta box tutorial covered later in this article, and a little bit of extra customization and polish thrown into the mix.

href="http://wordpress.org/extend/plugins/secondary-html-content/">Secondary HTML Content adds a second HTML editor to pages, posts, or both (customizable with a simple settings panel). You can output the content in a sidebar with an included widget, or integrate it more tightly with the template by using “the_content_2″ and “get_the_content_2″ functions.

href="http://wordpress.org/extend/plugins/secondary-html-content/"> class="alignnone size-full wp-image-19137" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/secondary-html.jpg" alt="Secondary-html in Advanced Power Tips For WordPress Template Developers" width="480" height="529" />

Associating Pages with Post Content: Reloaded

href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/">“Power Tips” covered the basic foundation for associating different WordPress pages with different post categories. The basic premise was that many sites require, effectively, different post “feeds” on different pages. For instance, there may be a company blog, but there may also be an independent news feed.

This continuation offers specific tips that extend the core concept introduced in part 1, making it easier to have multiple page / category associations, preventing entrance into the “real” category archive, and ensuring that individual post views retain a visual and architectural association with their parent “category page” layout.

Be sure to href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/">read part 1 before proceeding.

A Review of the Basics & the Two Fundamental Approaches

At the heart of the category / page association (covered in part one) was:

  • A matching of the “page slug” with the “category slug.”
  • Using “ href="http://codex.wordpress.org/Template_Tags/query_posts">query_posts” and the category parameter to exclude standalone page categories from the primary feed
  • Using a dedicated page template with “query_posts” and the “category name” parameter to create a page featuring a feed for a single category.

class="alignnone size-full wp-image-19139" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/wp-cat-config.gif" alt="Wp-cat-config in Advanced Power Tips For WordPress Template Developers" width="500" height="333" />

Before delving into the tips that extend those ideas, it is important to make a distinction between two common but fundamentally different use cases for page / category association. The more typical use case, which the first part was tailored to, is a website that has a primary feed, like a blog, but also has one or two distinct feeds, most often for a formal news or press feed.

The second use case is a bit more esoteric: there is no primary feed. The site has many pages, and many (but not all) of those top level pages are individual feeds of posts. The example, at the end of this power tip, href="http://www.m62.net">m62.net, is one such use case. Another common use case might be – again – a portfolio centric website.

Let’s say we want to create “Joe’s Portfolio”, and Joe wants to feature 4 distinct areas of expertise. Each area of expertise should be a top level page, say, joes-portfolio.com/web-design, joes-portfolio.com/graphic-design, etc. Joe wants to have a little write-up about each service area at the top of the page, followed by a feed of case studies. Why a feed instead of sub-pages? Maybe Joe wants prospects to be able to subscribe to an RSS feed for each area of expertise; maybe he wants to easily cross-tag case studies based on industry; maybe he plans to update frequently and doesn’t want a huge page sitemap or wants visitors to page through a date-organized collection of case studies. There are many reasons to use posts instead of pages.

The following tips provide solutions for both use cases.

Automatically Determining the Page / Category Association

Part one suggested that a unique page template be created for any page associated with a category. That page template would then query for posts using a hardcoded category name or category ID. If there are only one or two standalone “category pages”, this is an efficient and effective solution.

However, if there are many page / category associations, as in use case #2 (no primary feed), the process of manually creating page templates for each association is tedious to build and maintain, and not realistic if content editors who don’t program need to be able to create more page / category associations on demand.

An alternative would be to href="http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates">create a generic page template, let’s say “template-category-connector.php”, that is assigned to all pages associated with a category, and automatically determines the right category to query.

The following code performs the matching and executes the post query. The magic happens by taking advantage of our matching page and category slugs. Once again, if the website does not use permalinks, an alternative approach will be required (one permalink-free alternative could involve a custom field with the associated category ID).

$cat = get_category_by_slug($post->post_name);
query_posts('cat='.$cat->term_id);

That’s all there is to it… just proceed on with the href="http://codex.wordpress.org/The_Loop"> post loop to output the applicable category’s posts. Note that the template should probably check for an actual return value from line 1, and output a graceful error in the event there is no match.

Handling Entry into the “Real” Category Archive

Now that there is a dedicated page layout that handles the category feed, we will want to be make certain that the visitor doesn’t land on WordPress’ default category “archive” view. For instance, when using permalinks with the default “category base” value, the archive view for a category with a top level category assigned a “web-design” slug would be: mysiteurl.com/category/web-design. However, the intent is for visitors to view this category at our top level page: mysiteurl.com/web-design.

By combining the WordPress category template file with some smart redirects, we can prevent entry into the default category archive. Out of the box, the href="http://codex.wordpress.org/Template_Hierarchy#Category_display">WordPress template system allows developers to create global category archive templates as well as templates for individual category archives.

If we are in use case #1 – a site with a traditional blog feed and a standalone news feed on a “press releases” page – we will want to use the latter solution. Let’s say, as in part one, the category ID for “press releases” is 5. We create a template file in our theme folder named category-5.php. Under use case #2 (no primary feed), we will want to redirect all category archive traffic, in which case we need to work with the category.php template file.

A few lines of code in either template file will redirect visitors to the right place. We’ll also pass href="http://www.checkupdown.com/status/E301.html">HTTP error / redirect code “301″ – which will tell search engines to permanently redirect their link to the right location. Note that this particular code assumes we are using a permalink configuration. Line 2 can be modified to accomodate that situation.

$destination = get_bloginfo('url');
$destination .= str_replace('/'.get_option('category_base').'/','/',$_SERVER['REQUEST_URI']);
wp_redirect($destination, 301);

In effect, that code removes the category base (”/category” by default) from the overall relative URL, and href="http://codex.wordpress.org/Function_Reference/wp_redirect">safely redirects the visitor to the page with the matching slug. Of course, if the site falls under use case #1 (one or two stand alone feeds), the line three could dropped into a specific category template (i.e. category-5.php) with a hardcoded absolute URL for the redirect destitation.

Hiding Standalone Categories from the Category List & Primary Site Feed

In the first use case (only isolating one or two categories from a primary feed), it may be necessary to prevent isolated categories or the posts within those categories from appearing in some common theme elements that would traditionally include them.

Consider the example from part one: a site with a traditional blog and a standalone press release feed. Assume the owners of the site want the RSS feed for the blog to be persistently available throughout the site (typically manifesting itself as an RSS icon in the browser location bar), but don’t want the press release items included in that primary feed. By default, the WordPress primary feed is available at “/feed”, and includes all published posts, regardless of category or any other post property.

href="http://www.smashingmagazine.com/feed"> class="alignnone size-full wp-image-19147" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/smashingmag-feed.gif" alt="Smashingmag-feed in Advanced Power Tips For WordPress Template Developers" width="500" height="212" />

To exclude categories from the primary RSS feed, we need to href="http://codex.wordpress.org/Function_Reference/add_filter">filter the WordPress function that retrieves the posts. Let’s again assume that the category ID for Press Releases is 5. The following code should be placed in the template’s href="http://codex.wordpress.org/Theme_Development#Theme_Functions_File">“functions.php” file.

add_filter('pre_get_posts','exclude_press');

function exclude_press($query) {
   if($query->is_feed && !$query->is_category) $query->set('cat','-5');
}

To summarize, we use the “pre_get_posts” filter to modify the post query before it executes. Within a new filter – named “exclude_press” – a conditional confirms that the post query is for a feed, and that the query is not for an individual category. If the check pans out, the query is modified to exclude category 5 before execution.

The notion of globally filtering the post query may have broader implications depending on the site’s unique requirements. With some smart conditional checking, the filter could be extended to prevent the category from appearing anywhere except within the category or isolated post view. But be careful when extending the filter, and be sure to consider all possible views, including administrative views!

The category list is another frequently used site element that isolated categories should, in most cases, be excluded from. If the template href="http://codex.wordpress.org/Template_Tags/wp_list_categories">calls the category list in only one or two places by code (as opposed to using the categories widget), href="http://codex.wordpress.org/Template_Tags/wp_list_categories#Include_or_Exclude_Categories">excluding categories from the list is straight forward.

wp_list_categories('exclude=5');

However, if the categories widget is in use, or the category list is used throughout the template, an alternative approach is required. Enter the “list_terms_exclusions” filter. Again, the following code should be placed in the “functions.php” template file.

add_filter('list_terms_exclusions', 'filter_press');

function filter_press($exclusions) {
   $exclusions .= " AND t.term_id != 5 ";
   return $exclusions;
}

The return value of a “terms exclusions” filter is tacked onto the “where” clause in the SQL query that retrieves the terms. Without digging too deep here, the reason for discussing “terms” as opposed to, say, “categories” is because WordPress abstracts a variety of different taxonomies (link categories, post categories, tags, custom taxonomies, etc) into a unified database model that handles all taxonomies. Calls to “get categories”, “get tags”, and so forth, are all referring back to general “terms” behind the scenes. Ever wonder why category, tag, and other IDs tend to jump around? They are all being added to the same table. Assuming a fairly clean install, try adding a new post category, and note the ID. Then add a tag, and note its ID… one greater than the new post category.

class="alignnone size-full wp-image-19149" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/term-taxonomies.gif" alt="Term-taxonomies in Advanced Power Tips For WordPress Template Developers" width="482" height="166" />

Retaining the Page Layout for Post Views within a Category Page

One of the most common challenges to tackle with page / category association is retaining a sense that the visitor is still within the “category page” hierarchy – and not a global feed hierarchy – when a visitor is reading an individual post. Part one hinted at this challenge under “The devil is in the details,” and started to suggest a path that incorporated using the “in_category” function. We will explain how to use “in_category” within templates, as well as how to trick functions that reference the original query object into thinking that they are “within” the category page.

Let’s start with case #1, and building on the example in the first article, assume we only need to contend with one isolated feed, “Press Releases” (category ID 5).

Say the theme has a sidebar template that lists post categories when rendering the blog part of the site, and when rendering a standalone page, shows a page list instead. Here’s an extremely simplified version of what that might look inside the sidebar template file.

if (is_page())
{
   wp_list_pages();
}
else
{
   wp_list_categories();
}

Of course, there may be alternative widget sets for pages or posts, and there is likely to be more than just one element in the sidebar. But the concept should hold. Now going back to the example, the theme should render posts in category 5 (Press Releases) as if the visitor were on a page (not the blog). Leveraging the “in_category” check, the code above would now like the following:

if (is_page() || in_category(5))
{
   wp_list_pages();
}
else
{
   wp_list_categories();
}

Note that if there are multiple categories whose posts should resemble page output, the “in_category” function should be passed an array of IDs, like so:

in_category(array(5,7));

The need for a “in category” check is probably moot in case #2 (multiple page/category associations, without a primary feed): the template is probably structured to output the same elements on pages and posts from the get go. In other words, everything is handled as if it is a page since there is no primary feed. However, the following tip – that dynamically looks up the faux parent page ID (the page associated with the category) – is necessary for the next part of this tip. Just amend the code to check if “faux_parent_page” has a valid value: if it does, then the post is inside an isolated category associated with a page.

Once again, this approach to dynamically seeking the faux parent page (the category page) depends on taking advantage of the matching permalink structure between post categories and pages that is at the heart of this association. If the site is unable to use permalinks, a more complex alternative look up of the faux parent page will be necessary.

foreach(get_the_category() as $category) {
   $faux_parent_path = '/'.get_category_parents($category, FALSE, '/', TRUE);
}
$faux_parent_page = get_page_by_path($faux_parent_path)->ID;

Now that we have the ID of the category’s associated page, we can trick “black box” theme elements that determine page or post properties on their own (by referencing the post query) into thinking they are actually working with the category page.

The most common use case is page navigation. Whether its breadcrumbs, a top level page menu that should retain “current” (on) states, or a side navigation menu that should display the current section, there are many “black box” navigation functions that need to be tricked into rendering themselves as if on the category page.

Let’s use a simple top level page list, which should maintain proper “current_page”, “current_page_parent” (and so on) classes when on a post under a category page. Here’s what that simple function might look like before our changes:

wp_list_pages('depth=1');

Of course, posts do not normally have parent pages, so there will be no “current” classes assigned to that output when reading a post. Here is how to trick that function into thinking it is rendering the navigation for the “parent” category page.

//retrieve faux parent page dynamically… can skip and hard code in case 1
foreach(get_the_category() as $category) {
   $faux_parent_path = '/'.get_category_parents($category, FALSE, '/', TRUE);
}
$faux_parent_page = get_page_by_path($faux_parent_path)->ID;

//reset the post query as if on the faux parent page
query_posts('page_id='.$faux_parent_page);

//execute our "faked out" function
wp_list_pages('depth=1');

//reset the query back to the initial state
wp_reset_query();

If there are multiple elements that need be “tricked,” a best practice would be to put the “faux parent page” retriever at the top of the template, and declare it a global in any template files that need it. This would avoid repeated look ups of the faux parent page.

An Example: Seeing it All Put Together

A great example of a WordPress-powered CMS that pushes use case #2 to its limits can be seen at the home of m62 visual communications, at href="http://www.m62.net/">http://www.m62.net.

href="http://www.m62.net/powerpoint-templates/pharmaceutical-templates/"> class="alignnone size-full wp-image-19151" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/m62-pharm.gif" alt="M62-pharm in Advanced Power Tips For WordPress Template Developers" width="500" height="392" />

All of the navigation items across the top (Presentation Theory, PowerPoint Slides, etc) are pages associated with post categories. The sub-navigation on the right contains sub-pages that are also associated with sub-categories. For example, in the screenshot above ( href="http://www.m62.net/powerpoint-templates/pharmaceutical-templates/">available here), the visitor is on the “Pharmaceutical Templates” page (faux category), which is a child of the “PowerPoint Templates” page (also a faux category). The content starting with “Download free” (below the page title) is the content from the “Pharmaceutical Templates” page. The posts below the “Next Steps” bar, titled “Latest in Pharmaceutical Templates”, are the posts inside that category. The applicable related category is automatically discovered by the WordPress template, populating the category name “Latest in X” and recent posts. Now let’s look at one of the posts inside that category.

href="http://www.m62.net/powerpoint-templates/pharmaceutical-templates/atoms-template/"> class="alignnone size-full wp-image-19152" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/m62-post.gif" alt="M62-post in Advanced Power Tips For WordPress Template Developers" width="500" height="371" />

Using the tips outlined above, the individual post retains the feel of being within the “Pharmaceutical Templates” page, right down to the breadcrumb navigation and “current” states in the navigation.

But not only does m62.net use category / page associations for most top and second level navigation items, it actually extends the concept to tags. The 5 “tabs” on the top right actually represent post tags, and each has a “tag page.”

Stay tuned!

The second part of the post will be published here, on Smashing Magazine, in two weeks. Hence, you may want to href="http://rss1.smashingmagazine.com/feed/">subscribe to our RSS-feed and href="http://twitter.com/smashingmag">follow us on Twitter. Any ideas or suggestions? Comment on this article!

/>

© Jacob Goldman for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/">Permalink | href="http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/#comments">17 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/&title=Advanced%20Power%20Tips%20For%20WordPress%20Template%20Developers">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Advanced%20Power%20Tips%20For%20WordPress%20Template%20Developers'%20http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/11/25/advanced-power-tips-for-wordpress-template-developers/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/php/" rel="tag">PHP, href="http://www.smashingmagazine.com/tag/templates/" rel="tag">templates, href="http://www.smashingmagazine.com/tag/wordpress/" rel="tag">wordpress

The NEW Advanced SEO Training Series: Tips, Tricks & Tactics now Available on DVD

Posted by great scott!

Ready to upgrade your SEO skills, learn actionable new strategies, and get ready to make 2010 the year you totally rock online? Well, we’ve got just the thing to help you finish out the year with the latest tactics to take your SEO to the next level.

That’s right, the SEOmoz Advanced SEO Training Series is back with an all new DVD Series: Tips, Tricks & Tactics!  Whether you’re a fan of the series, or this is your first time experiencing SEOmoz Training DVDs, this new six DVD set is one you won’t want to miss. Filmed before a live audience in Seattle, Tips, Trick & Tactics features over a dozen world-class instructors teaching high-level, actionable strategies on 17 advanced topics.

Advanced SEO Training Series: Tips Tricks & Tactics

This brand new edition of the Advanced SEO Training Series includes over 10 hours of immediately actionable material designed to really push your SEO skills to the next level. These advanced strategies will help you launch your SEO plan or reinvigorate your existing efforts with fresh tactics that will change the way you think about online marketing.

Don’t miss out on your opportunity to get the latest and greatest SEO strategies from the world’s top experts. The information you get in Tips, Tricks & Tactics is the sort of in-depth, high-level stuff these pros don’t normally share at conferences, or even online. We actively encourage them to share their best advice, and most effective strategies that they use to be at the top of the SEO game…and they really deliver!

Until Sunday, December 6th you can get the Advanced SEO Training Series: Tips, Tricks & Tactics 6 DVD Set for just $399 (that’s $100 off the regular price of $499) and we’ll include FREE Shipping.  That’s less than 1/3 of what most industry conferences cost, and you can share this among your entire team (no travel expenses either).

Want to save even more?  SEOmoz PRO Members only pay $199 during launch ($249 regularly). Do the math and you’ll see that this is a great opportunity to get the brand new Advanced SEO Training Series, try SEOmoz PRO and save a ton of money at the same time.  Order soon, because the special release pricing will only last until December 6th and these DVD Series’ sell out every year (we only do a limited run of each DVD series). Get Tips, Tricks & Tactics now, and rev up your SEO in the new year!

Here’s a sneak preview of The Advanced SEO Training Series: Tips, Tricks & Tactics, and what people are saying about it…

What’s covered on Tips, Tricks & Tactics?  Tons!  This series features 15 Instructors (including Rand Fishkin, Todd Malicoat, Vanessa Fox, Ben Jesson, David Mihm, and more) speaking on almost every topic important to the advanced search marketer…

Disk One

  • SEO for Content
  • Advanced Site Architecture
  • Advanced Keyword Research

Disk Two

  • Local Search Strategies
  • Alternative SEO Tools
  • News & Image Search Strategies
  • Advanced Linkscape Tactics

Disk Three

  • How to Design a Link Building Campaign
  • How to Launch a Startup

Disk Four

  • History of SEO
  • Future of SEO
  • High ROI Social Media

Disk Five

  • Researching the Algorithms
  • How to Win SEO Budget
  • Conversion Rate Optimization

Disk Six

  • SEO Business Strategies
  • Avoiding Search Engine Penalties

Still want more? We have a limited quantity of free passes to SES Chicago ($1,995 value) if you purchase a new 1-year PRO Membership! That means you can get the Tips, Tricks & Tactics DVD Training Series, a full year of SEOmoz PRO, and an all-access pass to SES Chicago for almost $1,000 less than just the conference pass alone! Not going to Chicago? SES will let you exchange your free Chicago pass for any of their other conferences in 2010, including London, West, New York, or any other!

What Did Live Attendees have to Say About Tips, Tricks & Tactics?

"If last year was ‘tech school’ this year is ‘Grad School’! Really powerful presentations."

"I’m the SEO for a $200 million company and I plan to use the knowledge I gained from this Training to radically change the foundations of my company."

"I’ve seen the future…This is absolutely essential to businesses and did nothing short of blowing me away."

"I’d recommend it to anyone but my competitors."

"I felt like I had a serious wake-up call to remember why I’m optimizing websites in the first place."

"It’s nice to hear about theories and logic, but these presentations with examples definitely make the ‘putting it into practice’ part much easier."

"I’ve been doing SEO for four years now, and I found a lot of things in here that you just can’t find online."

"This is very high-level, actionable stuff!"

"There’s a lot of information! It really gives you the edge."

Get Tips, Tricks & Tactics now and get the edge for the new year!

Do you like this post? Yes No

Posted by great scott!

Ready to upgrade your SEO skills, learn actionable new strategies, and get ready to make 2010 the year you totally rock online? Well, we’ve got just the thing to help you finish out the year with the latest tactics to take your SEO to the next level.

That’s right, the SEOmoz Advanced SEO Training Series is back with an all new DVD Series: Tips, Tricks & Tactics!  Whether you’re a fan of the series, or this is your first time experiencing SEOmoz Training DVDs, this new six DVD set is one you won’t want to miss. Filmed before a live audience in Seattle, Tips, Trick & Tactics features over a dozen world-class instructors teaching high-level, actionable strategies on 17 advanced topics.

Advanced SEO Training Series: Tips Tricks & Tactics

This brand new edition of the Advanced SEO Training Series includes over 10 hours of immediately actionable material designed to really push your SEO skills to the next level. These advanced strategies will help you launch your SEO plan or reinvigorate your existing efforts with fresh tactics that will change the way you think about online marketing.

Don’t miss out on your opportunity to get the latest and greatest SEO strategies from the world’s top experts. The information you get in Tips, Tricks & Tactics is the sort of in-depth, high-level stuff these pros don’t normally share at conferences, or even online. We actively encourage them to share their best advice, and most effective strategies that they use to be at the top of the SEO game…and they really deliver!

Until Sunday, December 6th you can get the Advanced SEO Training Series: Tips, Tricks & Tactics 6 DVD Set for just $399 (that’s $100 off the regular price of $499) and we’ll include FREE Shipping.  That’s less than 1/3 of what most industry conferences cost, and you can share this among your entire team (no travel expenses either).

Want to save even more?  SEOmoz PRO Members only pay $199 during launch ($249 regularly). Do the math and you’ll see that this is a great opportunity to get the brand new Advanced SEO Training Series, try SEOmoz PRO and save a ton of money at the same time.  Order soon, because the special release pricing will only last until December 6th and these DVD Series’ sell out every year (we only do a limited run of each DVD series). Get Tips, Tricks & Tactics now, and rev up your SEO in the new year!

Here’s a sneak preview of The Advanced SEO Training Series: Tips, Tricks & Tactics, and what people are saying about it…

What’s covered on Tips, Tricks & Tactics?  Tons!  This series features 15 Instructors (including Rand Fishkin, Todd Malicoat, Vanessa Fox, Ben Jesson, David Mihm, and more) speaking on almost every topic important to the advanced search marketer…

Disk One

  • SEO for Content
  • Advanced Site Architecture
  • Advanced Keyword Research

Disk Two

  • Local Search Strategies
  • Alternative SEO Tools
  • News & Image Search Strategies
  • Advanced Linkscape Tactics

Disk Three

  • How to Design a Link Building Campaign
  • How to Launch a Startup

Disk Four

  • History of SEO
  • Future of SEO
  • High ROI Social Media

Disk Five

  • Researching the Algorithms
  • How to Win SEO Budget
  • Conversion Rate Optimization

Disk Six

  • SEO Business Strategies
  • Avoiding Search Engine Penalties

Still want more? We have a limited quantity of free passes to SES Chicago ($1,995 value) if you purchase a new 1-year PRO Membership! That means you can get the Tips, Tricks & Tactics DVD Training Series, a full year of SEOmoz PRO, and an all-access pass to SES Chicago for almost $1,000 less than just the conference pass alone! Not going to Chicago? SES will let you exchange your free Chicago pass for any of their other conferences in 2010, including London, West, New York, or any other!

What Did Live Attendees have to Say About Tips, Tricks & Tactics?

"If last year was ‘tech school’ this year is ‘Grad School’! Really powerful presentations."

"I’m the SEO for a $200 million company and I plan to use the knowledge I gained from this Training to radically change the foundations of my company."

"I’ve seen the future…This is absolutely essential to businesses and did nothing short of blowing me away."

"I’d recommend it to anyone but my competitors."

"I felt like I had a serious wake-up call to remember why I’m optimizing websites in the first place."

"It’s nice to hear about theories and logic, but these presentations with examples definitely make the ‘putting it into practice’ part much easier."

"I’ve been doing SEO for four years now, and I found a lot of things in here that you just can’t find online."

"This is very high-level, actionable stuff!"

"There’s a lot of information! It really gives you the edge."

Get Tips, Tricks & Tactics now and get the edge for the new year!

Do you like this post? Yes No

State of the Index, November 2009

Last week I was in Las Vegas for PubCon, a conference for publishers, and I wanted to share the slides from my main presentation:

When I get a chance, I’ll also re-create the talk on video and share the video with you, but in the mean time Lisa Barone did a nice live write-up and coverage [...]

Last week I was in Las Vegas for PubCon, a conference for publishers, and I wanted to share the slides from my main presentation:

When I get a chance, I’ll also re-create the talk on video and share the video with you, but in the mean time Lisa Barone did a nice live write-up and coverage of the Q&A.

It’s always nice to see SEOs and webmasters that I’ve gotten to know from search conferences. For example, one night featured the traditional SEO Werewolf game, except with blackhats as the werewolves and whitehats as the villagers. Somehow in the middle of that party, we decided that if someone submitted a spam site during my site review session, I could shave Evan Fishkin’s head.

Sure enough, someone submitted a spammy site for review, and you can view the resulting haircut in this image gallery. Afterwards, I asked if anyone else wanted their head shaved, and Nelson James volunteered. I shaved hair while people asked questions, and it was a lot of fun:

PubCon haircuts!

Thanks to Brian Ussery for taking these pictures. :)

What You Can Do to Start Ahead of the Game in 2010

Start the New Year off right by resolving your tracking and attribution, taking care of some basic SEO issues, and finding ways to keep your site fresh. …

Start the New Year off right by resolving your tracking and attribution, taking care of some basic SEO issues, and finding ways to keep your site fresh. …

Cardinals still working on sell out

The National Football League has given the Arizona Cardinals another day to sell out Sunday’s game against the Seattle Seahawks.

The National Football League has given the Arizona Cardinals another day to sell out Sunday’s game against the Seattle Seahawks.

Page 1 of 212

Seth Godin: Sliced Bread

Malcolm Gladwell: Outliers

Anthony Parinello: Your Price is Too High

©