You can gain insight into your existing customer base in two main ways: you can ask them or you can watch them. Both are valuable in creating and refining products and experiences to better meet your customer’s needs. In this post we’ll show you how to use surveys and interviews to gain insights that will help you increase your conversion and revenues by more effectively marketing to future site visitors.

Survey Says!

Surveys are a powerful way to get direct feedback from a large number of your customers and site visitors. You can collect all sorts of information, everything from demographic data to qualitative feedback, all important stuff that you won’t find anywhere in your Google Analytics dashboard.

Here are a few tips to help make surveys work for your business. For more, checkout this invaluable PDF by the folks at SurveyMonkey, who expand on these ideas and more.

1. Have a clear goal. What information are you trying to collect? Know what you want to learn before you start asking questions.
2. Be considerate of your users. Don’t ask your users to spend 30 minutes taking a survey. They’ll resent you for it. Determine the critical data points for your business and seek to understand those first.
3. Establish flow. Help your users recall their experience by ordering questions so that they follow the flow of their initial experience.
4. Ask good questions. Good questions are relevant, clear, brief and specific.
5. Use the appropriate question type. Make questions a breeze to answer. Limit your use of open ended questions as they take a lot of time to complete and are often skipped.
6. Test your survey. Before deploying it to customers send it to friends or family members and ask for honest feedback and for any potential ambiguity with questions and formats.
7. Provide a small incentive. Time is money for your busy users. Get better participation by offering a small coupon or other incentive for completing the survey.
8. Survey regularly. Survey’s are just a snapshot in time. To get real value from them it’s important to survey your database regularly to see if changes you made to previous feedback is working.

Get the Interview

Interviewing customers is a great way to learn first hand what they like and don’t like about your site, product or service. It provides an opportunity for a detailed, in-depth look at how your customer perceives your product and how it fits in their world. Interviews are great because you can see your customer in their natural environment and see the challenges they face and the solutions they use to be successful.

Interviewing even just a few customers is better than nothing. Here are a few tips to help you get the most out of your customer interviews.

1. Distance yourself from the product. Don’t introduce yourself as the product owner or CEO. People don’t like to hurt other’s feelings. If you establish ownership you may get polite answers, but little real feedback.
2. Get into the field. Do the interviews in your customer or potential customer’s environment to get a real sense for how they live or work.
3. Talk to customers, potential customers and visitors who didn’t buy from you.If you can talk to people from all three groups you’ll get a better sense of your current strengths and weaknesses, and where you need to go.For customers ask questions like:

1.  What they like and don’t like about your site and product.
2.  What they found easy to use and what they had trouble with.
3.  Why they bought and what consideration process they went through before making their purchase.
4.  What was the key thing that made them buy from you and not anyone else.
5.  How likely they are to refer other people to you.

For potential customers ask questions that help you determine ideal product fit and ascertain what your product would need to do in order to meet their needs. Ask questions that:

1.  Uncover their needs
2.  Help you understand their current solutions
3.  Provide insight into your product as a potential solution
4.  Elicit feedback on your site, product or service from an untrained eye
5.  Help identify areas of improvement or future features that could meet their needs and win their business

For customers who didn’t buy ask questions like:

1.  Did they buy a competitive product or not buy at all?
2.  If they didn’t buy, why did they pass?
3.  If they bought with someone else, what were the features or benefits that led them to not buy with you?
4.  What was missing from your offering that kept them from buying with you?

4. Talk to at least a few people. Even talking to a handful of people can give you dramatic insights that you couldn’t get anywhere else. Don’t worry about statistical sample size, try to collect as much data from interviews as possible.
5. Record your interview. Use a digital recorder or camera. Trying to take notes will disrupt the flow of the meeting and is a sure fire way to miss body language, pauses and other cues that may lead to insights from your interviewee.

Get into Your Customer’s Head

Survey and interviews are powerful tools to help you understand your customers and where you can improve to boost your business. By surveying both existing, potential and non-customers you can get a clear picture of the strengths and weaknesses of your business. In-depth interviews in the field will give you firsthand insight into the challenges your customer faces and the challenges your product faces for their attention, use and advocacy. Interviews are so critical that even just a few are better than none at all. For more information on interviewing, read Don’t Make Me Think and Rocket Surgery Made Easy by Steve Krug. For more information on best practices for creating surveys, read this PDF by SurveyMonkey. If you’re looking for a great, free surveying tool check out Kissinsights for some great survey software. Asking for feedback is one great way to learn what users want, watching their interactions with your product and site is another. Check out how to get started “spying” on your customers with our post on analytics.

The UX/design budget for banners and landing pages is typically cut (if it existed at all in the first place), with the majority of the budget going instead toward ad spend. This practice is shortsighted and hurting your campaign performance.

Today, digital-telepathy is taking a stand. We’re launching Impress, a customer acquisition product focused on high-quality banners and landing page packages that drive real results without the big price tag.

First Impressions Matter

We all know that the vast majority of display ads go unclicked and unnoticed. ComScore reports that only 16% of display ads ever get clicked, and the term “banner blindness” was coined more than a decade ago. The main culprit? Lousy design. Unfortunately, it’s tough to know upfront how much design will improve campaign performance. This often results in a big ad spend budget with very little left for design. Which is a big mistake.

Let’s look at a sample campaign to see how this plays out:

Scenario 1
You’re going to spend $10,000 advertising a new product. You want as much of your cash going to ads as possible, so you invest an extra $250 for some design for your banners and a landing page. Your product sells for $100 each. Your banners get a 0.2% clickthrough rate (CTR) and your landing page converts visitors to new customers at 0.4%.

Ad Spend: $10,000
Creative: $250
CPM: $3
Impressions: 3,333,333
CTR: 0.2%
Conversion rate: 0.4%
Purchases: 27
Revenue: $2,700
Net profit: ($7,550)

Scenario 2
Same as above, but this time we’re going to invest in our design by using an Impress campaign that uses thoughtful design to drive conversions. Let’s see what happens

Ad Spend: $10,000
Impress creative: $1,000
CPM: $3
Impressions: 3,333,333
CTR: 0.4%
Conversion rate: 1%
Purchases: 133
Revenue: $13,300
Net profit: $2,300

As you can see in this case having design that works swings the campaign from a major loser to a winning, profitable campaign. All for $750 extra dollars, and some thoughtful design work up front. And while this is a hypothetical example, we’ve seen these same types of gains for companies using Impress.

ReTargeter used Impress to overhaul their banner creative. After diligently optimizing their banners, they were left with only incremental gains. Using the same methodology that comes with Impress, we created a powerful first impression, and tested the new designs against their existing creative.

The results? The Impress design out-performed the old, driving 3x higher clickthroughs.

From Banner to Landing Page

Once you get the coveted click, you have to deliver with the landing page. The design must be clear, consistent and intuitive in order to turn those clicks into conversions. Which is why most Impress packages include both banner and landing page designs. Instead of stopping with the design of the ad unit, Impress treats the ad unit and landing page as a symbiotic entity, where each one relies on the other for success.

Impress landing pages focus on the quality of the user experience to ensure that your visitors convert, rather than bounce. With thoughtful copy, design, user flows and calls to action, Impress maximizes the opportunity for each person that makes it to the landing page.

Make the First Impression Matter with Impress

With Impress you get high-quality banner and landing page designs that are thoughtfully created to help you get more for your online marketing investment. Starting at just $999 you can choose from one of three packages designed to drive your return on investment.

Each package includes:

• digital-telepathy’s signature high quality design and user experience expertise in both banner and landing page design
• A detailed project questionnaire that ensures that the final deliverables are custom tailored to your specific business needs
• A 30-day review of performance to analyze how well the new banners and landing pages are working and to suggest any changes to optimize for conversion

Good First Impressions are Designed

Businesses need to invest more of their customer acquisition budget into design. Our job as designers to ensure that message is heard loud and clear. We hope that Impress will provide design-driven results that are easy and affordable for any business to achieve. If you want better results out of your customer acquisition campaigns, check out Impress. As they say, you only get one shot at your first impression, it’s imperative you make it one that matters.

We recently discussed a similar topic to this on UXMagazine. Feel free to check it out for a further look into making good first impressions.

In this three-part series we’ll show you important techniques that let you watch and learn in real time. Plus, we’ll show you how to incorporate this data into your design decisions. First up, analytics. They’re elementary my dear Watson.

Your Mission: Analytics

1. Determine your KPIs.
2. Setup reporting to track your KPIs
3. Establish baselines for each KPI.
4. Analyze and optimize your site to drive improvement

The answer is out there, and it’s likely in your data. Without data and the ability to measure you’re like a sailor with no North Star, no fixed point from which to measure your progress, or lack thereof. Now, if you don’t have web analytics set up, stop reading this right now and run – no seriously, run and install Google Analytics. It’s free and powerful. You need to be able to track what’s happening on your site in order to really understand what works and doesn’t. Come back when you’re done, we’ll be waiting.

With that out of the way, let’s look at some must-track analytics, called Key Performance Indicators (KPIs), that you should be watching to see how successful your efforts are. Here are a few of the usual KPI suspects and some questions to ask yourself as you look at the numbers. The KPIs that drive your business may be different. It’s up to you to know what they are.

Determining Your KPIs

Where does your most valuable traffic come from? Not all Web traffic is equal. If traffic source A has an average order size 50% higher than traffic source B, what can you do to get more visitors to your site from A?

What percentage of your visitors are repeat visitors? How many visitors come back to your site on a daily or monthly basis? What’s the purchase rate for a first time visitor compared to a returning visitor? How many visits does it take before a person makes a purchase on your site? If the number is more than one, what are you doing to drive repeat visits?

What’s your bounce rate? What pages are the majority of your visitors landing on and what is the bounce rate for those pages? How can you optimize the user experience on those pages to keep people from leaving? (Psst, secret spy shortcut, we built a product to make it easier to create killer landing pages called Impress. Check it out.)

What is your conversion rate? What’s the conversion rate from a visitor to your site to a customer? Does it vary by traffic source? What’s your cost of customer acquisition (COCA)? What opportunities are there to improve?

Setup Reporting

Google Analytics is a powerful tool, but with so much data it can be tough to see the trends of the key drivers of your business over time. That’s why many people create easy-to-track dashboards using Microsoft Excel or other spreadsheet programs to separate critical KPIs from the other analytics. By isolating your top KPIs you get a very clear look at how your core metrics are performing over the long haul. So start with setting up a report that you’ll use to track and analyze your KPIs.

Your report should:

• Isolate the critical KPIs so you can get a clear picture of what drives your business
• Track the KPIs over time so you can see trends
• Be easy enough to update so that you can update it at least weekly, if not on a daily basis

Establish Baselines

A baseline is the current performance of each metric. Onc

e you’ve setup your report you’ll want to begin collecting baseline data for each of your KPIs. For example, if the percentage of returning visitors is a critical metric, track and measure it every day for a week or two. This will give you an idea of what your baseline returning visitor rate is. In your KPI report, create an entry titled baseline and add this data in. You can repeat this for every one of your KPIs.

This number will become your point of reference. You’ll constantly be comparing it to your trend data to see if you’re headed in the right direction with your optimization plan.

One additional thought. It’s important to pay attention to aberrations that can give you a false baseline. Do you have any paid advertising in the market? Is your business impacted by seasonality? Are there other externalities that may be either positively or negatively impacting the baseline you’re tracking? If so, collect a larger sample of data over a longer period of time, or wait until those externalities are resolved so you can get an accurate sense of how your site typically performs.

Analyze This

• With your baselines established you can begin to analyze the data to asses the following:
• What parts of your site and/or marketing are performing well?
• What does the traffic look like? Are some sources performing better than others?
• How are your products faring? Which are the best sellers and which are lagging?
• Which pages perform and drive conversions and which drive customers away?

These are just a few of the questions you should be asking yourself and reviewing for opportunities for improvement.

Look for Low Hanging Fruit

Some improvements are easy – a tweak to the copy, a better call to action on a landing page, spending more money on the ads that are the top performers, etc. Some changes are hard – redesigning your product or relaunching your website, for instance. Start with the low hanging fruit while formulating a plan to address larger challenges.

For example, if one ad unit or traffic source is performing better, how can you get more out of it? Can you replace poorer performing units with that creative? If a landing page is working better than others can you drive more traffic there through improved SEO and social sharing?

By starting with the easier items you can triage poor performance and get incremental improvement right away. Of course, you can’t ignore major issues, so if you find any be sure to set a plan of action to resolve and course correct as soon as possible.

Always Be Testing

Once you’ve identified areas for improvement set out a course of action that includes a way to test your new changes against your current ads/pages/copy/etc. You can use a tool like Unbounce or Google’s Website Optimizer for quick A/B testing. That way you’ll be able to see which changes to your design and user experience to see which move the needle in the right direction.

Your testing plan should:

• Allow you to concurrently test changes to your website, ad creative and other elements against your current iterations to see if they help or hinder performance.
• Isolate and test discreet elements of the user experience, allowing you to identify what change effected the outcome of the test.
• Let’s you continually challenge the best-performing iteration with a new challenger as you search for better performance.
• Be manageable and easy enough to implement and analyze so that you’re getting actionable data that you can use to improve your business.
• Produce statistically significant results by ensuring enough participants have completed the test.

It may not seem sexy, but you need to know your web analytics inside and out in order to get a sense of what is truly working (or not) in your design. By capturing the KPIs that drive your business and learning how to interpret and test them, you’ll be able to make informed design decisions that will ultimately result in better performance for your website.

Your mission, if you choose to accept it, is to get your analytics up and in order, identify and establish your KPIs, identify areas for improvement and set a course of action towards better results, so you can start getting the most out of your site. If you successfully complete that mission, you’ll be ready for two more top secret ways to improve your design. Stay tuned.

We worked with CrazyEgg.com to redesign their site with a goal of improving the conversion rate. The new design improved conversions 21.6% in 30 days. Now we’re back for another redesign for the leading heat mapping company, and we’ve pushed it even further with a brand new experience. We bet you’ve never seen a site like this before. We wrote a case study on the CrazyEgg redesign, and we’ve elaborated on a few of the high points below.

1. Let Them Try it Before They Buy It

Heat maps are a powerful way to visualize your web traffic and how people engage with your site; but they can be tough to explain without actually seeing one. So the goal of the redesign was to get the product in the hands of visitors from the get-go. We knew that the product was powerful, the heat maps could sell themselves.

The same old screen captures and boring demo videos are tired. We wanted to avoid them and instead focused on creating an experience where visitors can get their hands on the product and let them try it before buying it. So we dedicated a full third of the homepage to a real live heat map that lets visitors get right to trying it out without any additional steps necessary.

2. Align the Brand with the Audience

The old CrazyEgg.com site was care free and whimsical in terms of its design, but heat maps are a serious analytics tool that can be the difference between success or failure for online businesses. For enterprise companies, they can be worth millions of dollars in revenue. We wanted the brand to reflect the value of the product. Elements such as the clouds were dialed way down and we went for a more typography-driven design with less reliance on illustrated elements. These changes position CrazyEgg.com as a must have tool for online businesses of all sizes.

3. Pay Attention to the Details

The first thing everyone notices is the big heat map, which is exactly what we want, but we also spent a lot of time on getting the details right too. Spend a few minutes on the site and you’ll realize that there are plenty of finishing touches put on the user experience. Everything from split-second delays and timing elements on the heat map demo, to fun and unique interactions on the pricing page, are designed to create a seamless user experience that builds confidence and conversions.

4. Test, Learn, and Never Be Satisfied

Sure, we could’ve stopped at 21.6% improvement and let the new design just keep cranking away; but the power of the web is that it allows you to constantly test, learn and iterate to drive ever-greater results. If you’re not pushing your design, pushing your website to do more for you, you’re leaving money on the table. Take a look at your website’s current conversion and see how you can apply these tips to make it work harder for you. Read the full case study for more information on what we did. And if you need help, you can always talk to us. Design that makes a difference is what we’re all about.

Clear, compelling calls to action are the lifeblood of your business on the Web. They are the sign posts and cues that give your users the guidance they need to continue down the right path towards conversion.

Calls to action are often just thought of in terms of a button, if they’re thought of at all. Too often, calls to action are omitted or stuck into the design as an after thought. Which is a tragedy because weak calls to action (CTAs) result in confused visitors and lost opportunities as potential customers wander out of the conversion funnel and away from your site. In this post we give you six ways to create compelling CTAs that really drive results for your website.

Six Ways to Get More Action

Before we get started, it’s important to note that a call to action isn’t just about sticking a button on a page. A call to action is the entire sum of the design and content helping visitors move down the funnel toward conversion. When you think call to action, think holistically, not just in terms of a button.

There are many different types of CTAs, from buttons to buy, links to download and visual design cues guiding your visitor down your conversion funnel. Without CTAs your users can get lost and confused which, in the worst case, will lead to them leaving your site. To keep your customers headed in the right direction here are our best practice tips for your CTAs.

Use these in your design and watch your conversion rate soar.

Make them stand out. From a design perspective your CTAs should be easily distinguishable from other content in your design. Use a color that is easy to see on the slide and stands in contrast with the background.

Keep CTA design consistent. Your CTAs throughout your site should be consistent and easy to recognize. Changing from buttons to links, and drastic changes in colors and shapes can can create confusion. Help your visitors identify CTAs by keeping them consistent.

Use active and descriptive phrases. Phrases like “Get Started”, “Download Now”, “Learn More”, and “Get an Invite” create a sense of positive action that gets visitors moving forward down the right path. Avoid CTAs such as “Click here” at all costs.

Use design elements that indicate forward progress. Include design elements such as arrows in your CTAs to indicate momentum and progress. This helps your visitors feel like they are moving in the right direction to solve their problem or meet their need.

Put them on each page. After a visitor skims a page on your website, they’ll try to figure out what to do next. Ensure they head in the direction you want them to go by putting prominent CTAs on each slide and page. Plus, never assume a visitor is entering your site from the first step of your funnel, help them orient themselves quickly with clear guidance.

Keep them visible. If you have long content pages, make sure you have multiple CTAs so that users don’t have to hunt them down once they’re ready to act.

A Little Less Conversation, A Little More Action Please

Without strong calls to action your visitors will get confused, frustrated and lost, leading to fewer conversions for you. Lead them to the promised land with clear, action-oriented CTAs that guide them down the funnel.

By being consistent in your design and placement, using active and descriptive copy, and indicating forward progress in your design, you’ll be on your way to improving the conversion rate of your site.

Have a favorite call to action? Let us know in the comments!

Since Hello Bar is still just HTML and CSS on your website, you can use CSS to control its visibility. Combine this with WordPress custom post meta and you can control where on your website your Hello Bar shows up on a per-page basis. By default this code snippet will display your Hello Bar allowing you to set a Custom Field value on those pages you want to hide your Hello Bar. Just follow the three simple steps below after you have deployed your Hello Bar on your WordPress powered site.

Step 1, create your filter

First we need something to hook into the body_class filter which outputs classes on your <body> tag. Note that not all themes use the body_class() function to output classes on the body tag, so you may need to adjust this for your theme’s configuration. Add the PHP code snippet below to the functions.php file of your theme.

add_filter('body_class','add_hellobar_class');

function add_hellobar_class($classes) {
	$postid = get_the_ID();// get the ID for the current post
	$hellobar_display = get_post_meta( $postid, 'hellobar_display', true );// get value for hellobar_display assigned custom field

	// If the post meta is set to "hide", add the class to the  tag to hide the Hello Bar on this page/post
	if( $hellobar_display == "hide" ) {
		$classes[] = 'hellobar-hide';
	}

	return $classes;// return the $classes array
}

Step 2, use CSS to hide your Hello Bar

Now that we have a filter in place to add a class to the <body> tag, we just need to style the class to hide the Hello Bar. Add the CSS below to the style.css file of your theme.

body.hellobar-hide #hellobar-wrapper {
	display: none !important;
}

Step 3, hide a Hello Bar on a page or post

Now that we have our PHP and CSS in place we can hide our Hello Bar on pages and posts that have access to Custom Fields. Add a Custom Field called hellobar_display with a value of hide on any page that you wish to hide your Hello Bar on.

That’s it! Any other great suggestions on creative uses for Hello Bar on your website? Post them in the comments below!

Running Hello Bar on Tumblr:
To place your Hello Bar on your Tumblr blog, just paste the code snippet into the Description text area. Since there are some Tumblr interface elements that take up the same space as the default Hello Bar open/close links, we recommend you set the open/close link position on the left side via the Settings area of your Hello Bar.

Running Hello Bar on WordPress:
Depending on how much exposure you want your Hello Bar to have, you can either paste the code snippet in your theme’s template files for global exposure, or you paste it in the HTML editor on a post or page for single page exposure. UPDATE: This will only work with WordPress.org installations

Running Hello Bar on Squarespace:
Running Hello Bar on your Squarespace website is very simple thanks to Sqaurespace’s full support of HTML code snippets. Just paste in the code snippet any place you can edit HTML.

Running Hello Bar on Blogger:
Blogger’s deployment options is similar to WordPress’. You can have your Hello Bar show up on a single page by pasting your code snippet in via the Edit Html view. You may have to save the post while in the Edit Html view though as Blogger has a nasty habit of placing in <br /> tags where they aren’t supposed to be. Alternatively, if you want site wide exposure, you can go to the Design section of your blog and Edit HTML for the blog’s template. Just paste the code snippet in after the line that looks like: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Running Hello Bar on Weebly:
Weebly is a great little easy to use platform for simple websites that supports JavaScript in numerous areas depending on how you want to deploy your Hello Bar. To deploy a Hello Bar on a single page, go to the Pages section and click on the Advanced Settings to paste the Hello Bar embed code snippet into the Footer Code field. If you want your Hello Bar to show up on any page of your Weebly website, go to the Design section and click on the Edit HTML/CSS button in the upper left of the screen and paste your Hello Bar embed code snippet just before the </body> tag. Be sure you are familiar with and comfortable with HTML before you do this option!

Running Hello Bar on Typepad:
Deploying a Hello Bar on Typepad may not seem possible at first, but you can still embed it in your design to show up on all the pages of your Typepad website. Go to the Settings section of your website and paste your Hello Bar embed snippet in the Blog Description box.

Hello Bar on Your Drupal Website
Deploying Hello Bar on a Drupal based website should be a simple task for theme developers. You can add your Hello Bar code snippet wherever you are outputting  HTML and it will process just fine. Alternatively, you can also implement it using Drupal’s block system. Just create a new Full HTML block (NOTE: not all Drupal users may have access to this block type, contact your website administrator to do this if you don’t have access) without a title and paste in the Hello Bar code snippet as the content. Place the new block in a footer block area for your theme and you’re set. Using this method you could create multiple blocks with different Hello Bar code snippets and show different Hello Bars for different areas of your website using the access controls for the block.

Hello Bar on Your Joomla 1.5.x Based Website
To add your  Hello Bar to your Joomla based website, the easiest way is to utilize the Joomla module system. This will give you the greatest control over what pages the Hello Bar appears on. If your user has privileges to do so, in the administration control panel of your Joomla website, navigate to the Module Manager section and create a new Custom HTML module. Set the Show Title option to off or you will see your title on the pages the module exists – all we want to see is the Hello Bar displayed on the page, not an actual module block. Set your Position to the footer if your Joomla template has that available as an area. The Order does not matter, but if you want, put it at the bottom of the order list. To determine where your Hello Bar will appear, select the places you would like in the Menu Selection section. The last thing to do to setup the module is paste in the code snippet. Just click on the HTML Source Editor icon in the Custom Output editor area and paste your Hello Bar code in.

NOTE: Joomla will automatically modify the code snippet and pre-pend http to the //www.hellobar.com/hellobar.js JavaScript file path. If you are running part of your website through https, please make two Hello Bar modules – one for http and one for https – and manually specify https in the JavaScript file path.

Click the Save button to save the module and a Hello Bar should now appear on any of the pages you specified in your Menu Selection section.

Hello Bar on Your Joomla 1.6.x Based Website
Adding a Hello Bar to your Joomla 1.6.x based website is just like adding a Hello Bar to a Joomla 1.5.x website, just make adjustments to the new module management interface in the Joomla 1.6.x administration panel. I recommend checking out the Joomla Document Wiki or searching Google for details about changes and tutorials on using the new administrative interface if you are not familiar with them.

Where are you deploying Hello Bar? Got any quick tips on deploying on a platform I didn’t cover here? Have any platforms I didn’t cover here that you’d like to see covered? Let us know in the comments!

UPDATE: Please note that this blog post’s comment thread is not a good place to post support questions about integrating Hello Bar on your website. If you are having trouble, please feel free to post your question on our support forum and one of our team members will be happy to assist you as best we can.

SimplePie is an awesome tool for combining multiple feeds such as your Twitter feed and your blog posts feed; and it has a great caching feature. However, there is one problem: loading two or more feeds can cause an extremely long delay in your page’s load time. The caching feature works well in this case, but that still means that one of your visitors will experience a “stale” cache at some point, and that means they will have to wait an extra 4, 5, even 10 seconds longer for your page to load. This is especially unacceptable on your homepage.

How you can speed up SimplePie using an AJAX request

I recently thought of a solution to this issue and it’s quite simple. When creating a SimplePie feed and specifying options such as what feeds will be loaded, whether or not we want to cache the results, and how long the cache should last, we can play a little trick on SimplePie.

1. Tell SimplePie that it should cache its results for one, even two weeks. This means that even if I visit your website now, and then a week later, your homepage feed will load almost instantly as it’s getting the results from the cache. This does, however, introduce the new issue of the feed items being really stale.
2. Fix the issue of old feed items: when a user visits your page, we show them the stale results (which show up instantly) and then in the background using AJAX, we tell the web page to refresh the cache without interrupting the user. Specifically, we’ll tell SimplePie to fetch the results for the feeds again, but without using the cache this time. Since the heavy lifting happens in the background, it never interrupts the user and we can even display the new fresher information when it’s done being fetched. This freshly fetched data will also update the cache to a more recent state.

Using the above technique, your users will always see some sort of feed information instantly, and it’ll always be only as old as when the last visitor landed on your home page; their very presence would have refreshed the cache!

I’m sure that there are other ways to accomplish a similar result, how do you handle feed caching on your site?

Related Reading:

SimplePie FAQ
A Collection of Beginner SimplePie Tutorials

Remembering what slide your visitor is on requires SlideDeck Pro, as it uses one of the more powerful features called callbacks. Simply put, callbacks allow you to execute code every time something happens. In this case it’ll keep track of the current slide every time a new slide is revealed.

I won’t get into the code here, as it can get pretty technical; but I will post an example below and provide a link to Get Satisfaction, where you can find a code example and perhaps a discussion, too! Notice on the example below that if you navigate to slide 4 and then leave the page, the deck will already be at slide 4 upon your return… right where you left it! Alternatively, you could just refresh the page and see that it will remember your last slide.

Live Demo of Remembering Slides

Get Satisfaction Idea Including Code

Of course, you could always look at the live demo above and view the source in your browser to see how it all works under the hood.

Remembering the current slide is just one idea that I have considered to make SlideDeck better, and someday it might even make it into the core of SlideDeck; but for now you can easily add this functionality by using the provided code.

Got a great idea for how to use SlideDeck? Post a comment below.

Related Reading:
Extending SlideDeck – Part 1: Controlling The Deck

SlideDeck is an awesome tool for displaying information on a web page, but there are times when you might want to exercise additional control over your deck. Our lead developer Dave has done a great job with the more technical side of SlideDeck by providing hooks that allow you to control the behavior of the decks on the page. In my next few posts, I’ll be outlining some of the cool tricks that can be done using SlideDeck’s built in controls and some auxiliary jQuery code.

Controlling Your SlideDecks

The main three functions that control SlideDeck are the “prev”, “next” and “goTo” commands. These functions allow you to add external controls to your SlideDeck, and command the deck to reveal a specific page of information on your command.

Typically when initializing your SlideDeck, you’ll run a command like this:

$('#slidedeck').slidedeck();

That’s fine for a default implementation, but if we need to access the properties of a deck once it has been created, we’ll need to store it in a variable for later. The easiest way to do this is to create a variable when creating the SlideDeck and assign the deck to the variable in one fell swoop!

var myDeck = $('#slidedeck').slidedeck();

Once the SlideDeck has been shoved into the ‘myDeck’ variable, we can pass commands to it. Writing some simple JavaScript that sends commands to ‘myDeck’ or asks it for information (such as the index of the current slide) is extremely simple and powerful.

I’ve put together a simple example page that shows how you can add Previous and Next buttons to a regular SlideDeck. In this example I have also added a command that will take you straight to a slide based on a clickable link.

Previous/Next Slide Buttons

The Previous/Next slide buttons are simply <span> elements in my example, but they could be images, links or even standard HTML buttons. I started by creating a DOM ready function in jQuery (This makes sure that the page has done its stuff before we do ours.) and adding a click event to each of the spans. When using jQuery, you do that like this:

$('#navigation .prev').click(function(event){
// Stuff to do when "Prev" is clicked.
myDeck.prev();
});
$('#navigation .next').click(function(event){
// Stuff to do when "Next" is clicked.
myDeck.next();
});

Note that we are invoking the prev() and next() methods of the myDeck variable (Which now has access to all of the options that a SlideDeck has.) This would not have done anything if we had not assigned the SlideDeck to “myDeck” in the previous section.

Just like that, your SlideDeck can be controlled by other elements on the page! These buttons could even be inside of each slide, creating a more familiar user experience for those who are used to clicking “Next” when they are done reading. The Algebraix Data SlideDeck uses this method.

Going To a Specific Slide Number

You’ll notice on the example page above that I’ve got two other links below the Prev/Next buttons. These are specially formed links that allow the deck to be commanded to instantly open that particular slide. Creating this interaction is a bit more complicated, but the concept is similar. To get started, we’ll need to create some HTML for the links to live in:

<p>Go to Slide 4 by clicking <a class="goToSlide" href="#4">Here</a></p>
<p>Go to Slide 2 by clicking <a class="goToSlide" href="#2">Here</a></p>

These links have a class of ‘goToSlide’ and that will allow us to target them. They also have a href value of ‘#[and the slide number we want them to go to]‘. The challenge here is two fold: we need to get the links that are responsible for handling SlideDeck “goTo navigation” and then figure out what slide they should go to.

The first step is to grab the links that have the ‘goToSlide’ class and make them clickable, while ignoring the fact that they are a link and their default behavior is to take you somewhere:

$('a.goToSlide').click(function(event){
// ignore the <a> tag's default behavior
event.preventDefault();
// Code to be executed when the link is clicked.
});

Then we need to add the goTo() command along with the index of the slide we would like to go to passed inside of the parentheses. To accomplish this, we use a regular expression or ‘Regex’ to take the link and strip away everything except the number at the end. The Regex below (which is part of a text replacement function) basically says “Find any character up to the ‘#’ symbol and replace it with nothing”. This logic will strip the link’s href value and leave just the slide number we are interested in.

$('a.goToSlide').click(function(event){
// ignore the <a> tag's default behavior
event.preventDefault();
// the regular expression below matches anything up to '#slide-', leaving just the number.
myDeck.goTo(this.href.replace(/.+#/,''));
});

Therefore, clicking a link that looks like this:

http://www.slidedeck.localhost/demo/deck_control.html#4

Communicates this to the myDeck variable:

myDeck.goTo(4);

Which makes the deck slide to the fourth slide.

The Significance Of All This

Although SlideDeck’s default interface of vertical spines is very intuitive and easy to use, there are a few users who would like to eliminate them altogether. We’ve added a new option to SlideDeck Pro in the latest release that adds the ‘hideSpines’ option and once the spines are gone, the above options become a great convenience and a bit of a necessity as well.

Related Reading:

• A full list of SlideDeck’s options and functions
• Release notes for version 1.1