A/B Testing Basics: Sample Size

sample size

Sample Size: The number (n) of observations taken from a population through which statistical inferences for the whole population are made. The concept of sampling from a larger population to determine how that population behaves, or is likely to behave, is one of the basic premises behind the science of applied statistics.   For example, if you have a population of 10 million adults, and you sample 10 of them to find out their favorite television show, intuitively you will realize the sample size you have chosen is not large enough to draw valid conclusions. Knowing just how large “n”…

The post A/B Testing Basics: Sample Size appeared first on The Daily Egg.

Read article here: 

A/B Testing Basics: Sample Size

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator

Almost five years ago, I had the honor of writing a post on Smashing Magazine about my Photoshop panel GuideGuide. Since then it has seen wild success as the most installed third-party Photoshop extension, an achievement I’m quite proud. In that time, I’ve added some powerful features and, most recently, expanded it to Illustrator. This post will give you a taste of how GuideGuide can change the way you use guides in Photoshop and Illustrator.

Enhancing Grid Design with GuideGuide, A Plugin For Photoshop And Illustrator

If you’re one of the many people who already use GuideGuide, please read on. You may discover some unconventional uses that are not immediately apparent. I’ll provide a overview of the major features, and then give some examples of advanced and unusual ways it can be used to make you a more efficient designer.

The post Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator appeared first on Smashing Magazine.

Credit:  

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator

How to Get 100,000 People to See Your Blog Post

get-100000-views-on-your-blog-post-featured-650
What would more traffic to your blog post mean to you? Image source.

What would 100,000 views on a blog post mean to you?

Depending on the goals of your blog, it could mean thousands of new subscribers and fans.

But it could also mean new customers — big traffic means big exposure and big exposure means big growth.

We’ve been publishing content at Groove for the last five years. We’ve messed up a lot, we’ve learned a lot more and we’ve grown from nothing to over $300,000 in monthly recurring revenue through content marketing.

Today, our blogs are the single biggest driver of growth (as in, real money) for our business.

A couple of years ago, we published a post about how we successfully drove traffic to our blog. It outlined the step-by-step system that we used for influencer outreach.

That post, not surprisingly, has become one of our most popular. We still use the basic foundation of that old system today, but it’s come a long way.

This is the updated version.

Below, we’ll go through the entire “lifecycle” of a blog post, from idea generation to writing to publishing to promotion, to show you how to generate lots of traffic.

We’ll use another one of Groove’s most popular posts — “We Deleted Our Facebook Page. Here’s Why.” — as an example.

Let’s dig in.

1. Picking a topic: Go big

If your goal is to get 100,000 people to see your post, then you need to pick a topic that a lot more than 100,000 people are interested in.

What that includes:

  • Painful problems that lots of people or businesses have
  • Aspirational goals that lots of people or businesses have
  • Controversial issues that lots of people or businesses are divided on

What that doesn’t include, from a content perspective:

  • Your product, service or sales pitch
  • Hyper-niche problems or goals that tiny corners of your market have

There’s huge potential in writing insanely targeted pieces, but if you want lots of traffic, start with a topic that already gets lots of traffic.

Think of a highway with thousands of cars on it. It’s a lot easier to build an off-ramp and siphon some of that traffic off of the highway than to build a whole new unconnected road and try to get cars to drive to it.

highway

How do you know you’re picking a big enough topic?

Start with the problems that you know your market has (if you’re lost, here are some questions to ask to get you started).

Then validate the idea by searching for it

Start with simple Google searches, trying different terms around your topic (think like your reader, and use the exact language that you’ve heard your market use).

5

It’ll become clear to you pretty quickly whether it’s a crowded market with tons of content written about it (good), or something that very few people write about and, therefore, care about (bad).

Validate further by using Keyword Planner

Just log in to Google’s Keyword Planner tool and select “Search for new keywords.”

6

You don’t need expert-level Keyword Planner skills here. Type some topic ideas into the “Your product or service” box, and click “Get ideas.”

7

This is what you’re looking for:

8

Keywords around the exact topic you want to write about should add up to a lot more than 100,000 searches per month.

This is what you’re NOT looking for, as you’ll have a hard time scrabbling together 100,000 views:

9

Again, we’re not going into advanced SEO here, and there’s lots more you can do with tools like this.

But you don’t need to be an SEO expert to get lots of traffic. This step is all about getting practical validation about the audience size for your topic.

You’ve got the traffic — now how do you convert it?

Here’s a little inspiration: 10 overlay examples to turn your blog traffic into leads.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

2. Writing the post: Be bold

Once you’ve picked a topic you want to write about, you can write your post.

There are three things that every post needs to be if you want to succeed in content marketing:

  1. Valuable: Can readers take your post and DO something with it to improve their current condition?
  2. Interesting: Does your content make reader want to keep reading from beginning to end?
  3. Unique: Does your content stand out from the rest of the content being written about that topic?

All three are “table stakes” for effective content marketing. But for the purposes of this post, where we’re focusing on traffic, let’s assume that you can handle making your post valuable and interesting… so let’s focus on the third: being unique.

Imagine a choir singing a melody; everyone looks the same and sounds the same, so you can’t really tell the difference between any two voices.

byu_concert_choir_with_poppies
That’s what most content markets look like. Homogenous. Image source.

Now imagine Kool-Aid Man busting through the brick wall at stage left and belting out a tune that nobody in the choir had ever even considered before.

1503101-koolaidman
Kool-Aid Man turns heads. Kool-Aid Man is impossible to miss. Don’t join the choir. Be Kool-Aid Man. Image source.

How can you be bold like Kool-Aid Man?

Approach the topic in a way that nobody else has before

The first step of which includes looking at how everyone else is approaching the topic.

In our case, there were hundreds of articles about how to write for your business’ Facebook page, tips for promoting it, how to make sure that people saw it, what kinds of content to produce for it and so on. Everyone was part of the choir, talking about the best ways to approach Facebook for business.

We decided to be Kool-Aid Man and give our readers permission to not spend time on Facebook at all. Here’s the post title we chose:

10

Facebook simply hadn’t worked for us for lead generation as well as other channels had, so in the spirit of focusing our very limited resources on only the highest-ROI efforts that we knew would work, we decided to delete our Facebook page and not spend any more time on it.

We were happy that we did, and we thought that others could benefit from a bit of focus, too. And beyond that, we wanted to offer a reality check to remind readers that just because all of the “experts” talk about something, doesn’t mean you have to do it.

And so we wrote the post, the one that busted through the brick wall and didn’t look or sound anything like the choir.

Of course, when you write a post like this, a lot of people will disagree with it. Many will even be offended.

But a lot of people will agree, too. And the more worked up someone gets about your post, whether they agree with it or not, the more likely they are to share it with others.

So pick a side. The more contrarian, the better. And defend it vigorously.

3. Find distribution channels: Identify the gatekeepers

If you had 100,000 people on your email list, then getting 100,000 views wouldn’t be that hard. But let’s assume that you, like most people, don’t have a list that big (yet).

Well, there are lots of people out there that do.

This step is driven by simple math: it’s a lot more time-consuming to get your post in front of 100,000 people, one by one, than it is to put it in front of 50 people who will each want to share it with 2,000 others.

That’s distribution strategy. It’s the “influencer marketing” that has become a bit of a dirty word because so many marketers are doing it poorly.

Let’s go over how to do it well.

First, identify the influencers (the gatekeepers to your 100,000 people)

This is the most time-consuming part of the strategy, but it’s critically important. Skip it or skimp on it and you can kiss your traffic dreams goodbye.

This used to be an extremely painstaking process for us that involved hundreds of hours of Google research. Now it’s just a pretty painstaking process that involves several hours of Google research, plus a few hours using BuzzSumo.

Here’s what you do:

First, find as many content pieces as you can that have done well and that relate to your topic using BuzzSumo’s topic search:

11

Next, click on “View sharers” for each post.

12

You’ll get a list of influencers that shared the post:

13

This makes for a terrific place to start your outreach.

Get as many influencers as you can, cutting out the obvious dead ends (bots that curate content, fake accounts), and put them into a Google Sheet (here’s the one we use — just make a copy and steal it).

Try to get your list to at least 100 great leads whose total audience exceeds 5 million people (that means that you just need to get in front of 2% of them successfully to get 100,000 readers!), and add to your BuzzSumo-sourced list with:

  • Google research (search for the topic you’re writing about, and see who’s already written about it)
  • Twitter search (same approach: see who Tweets about the topic you’re covering)
  • Quora (if the question that you’re asking has been asked on Quora, see which influencers posted opinions)
  • Influential members of online communities and platforms related to your market
Quick side note:

Content marketing is a long game, and you’ll be a lot more successful if you view it that way. Nowhere is that more true than with influencer outreach.

You’re a lot more likely to have success with influencers who know and trust you because you’ve put in the time to follow and read their content, share it with others and contribute thoughtful perspectives in their comments sections. These are efforts that pay off dramatically over time, and I recommend you begin blocking off an hour or two each week to do that with everyone whom you see as an influencer in your market.

That will increase your success with this next tactic exponentially, though it will still work if you haven’t done this yet (it’ll just be harder).

4. Tell influencers about your post: Stand out

The next step is to tell influencers about your post.

The approach that we’ve used (something we originally saw in a Derek Halpern video many years ago) rests on three key pillars:

  1. Take the time to make every outreach email deeply personal and honest: Mass emails are annoying and, often, useless. Nobody will want to build a relationship with you when it’s obvious that you’re sending them a canned outreach email. Personalize each email with an authentic reason as to why you’re reaching out to this person.
  2. Never send your content in the first email: Almost everybody does this (“Here’s my post, please share it”). Not only is it rude, but it makes you look like everyone else. If you don’t understand why this is rude, read Permission Marketing.
  3. Ask for feedback, not promotion: Again, everyone asks influencers to promote their posts. Remember: don’t be the choir. Ask them for something that’s not only more valuable, but that they’re probably more willing to give: their feedback.

Here’s a script we use:

script-2

The “authentic” in “authentic reason” is key. Find a post that they’ve written before, and actually do something with it.

Example:

“Hey Len,

I loved your post about email marketing myths; I had no idea that Tuesday isn’t actually the best day to send. Just shifted an upcoming campaign to Friday to see what happens :)

I know you’re an expert on this, and I’d love to get your thoughts on a post I’m working on about some surprising results I found when A/B testing subject lines.

Do you mind if I send you a link?”

Now, one of a few things will happen:

  1. They’ll ignore you. Cool, move on.
  2. They won’t give you feedback, but they’ll respond. In some cases, because you didn’t do what 99% of marketers do (ask them to promote your post), they’ll do you a solid and share your content.
  3. They’ll give you feedback.

#3 is the absolute best outcome you could hope for, because not only do you get helpful feedback from an expert on the topic, but now they’ve invested time in the creation of your post. Now it’s their post, too.

So when you incorporate your feedback and come back with a request to share, they’ll be more than happy to help:

script-3

5. Find what works: Have fun with it

If you repeat this process across 100+ influencers, you will eventually get big traffic. In the example above, the post hit 100,000 unique page views around 80 days after publishing.

If you do this across 10+ different blog posts and different influencer markets, you’ll get even more traffic over time. And if you do it for a long time, you’ll turn your content into a significant and dependable source of new leads for your business. Because the first step to converting on-site visitors is getting them there in the first place.

You’ve got the traffic — now how do you convert it?

Here’s a little inspiration: 10 overlay examples to turn your blog traffic into leads.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

But you’ll get the best results if you have fun with the process. Play with it and test different things at every step of the strategy:

  • Choose topics that seem weird to you (but that have big audiences)
  • Experiment with making your argument in different ways and formats (infographics, videos, etc.)
  • Try different scripts and calls to action for your outreach emails

You won’t break anything, I promise. The worst that you’ll do is get a negative data point that you learn and grow from.

Viral content marketing is both art and science

As you can see, getting 100,000 readers takes both art and science.

On the art side, writing is important and you have to make an interesting, useful and unique case. And you have to pitch it to influencers in an empathetic and honest way.

But ultimately, the art gets you nowhere without understanding that achieving your 100,000-reader goal can be broken down using science: start with a much larger pool of readers, test different ways to build relationships with the gatekeepers, track what works and what doesn’t and keep experimenting until you get there.

And don’t forget that you won’t win by joining the choir.

This article is from:  

How to Get 100,000 People to See Your Blog Post

A 4-Fold Approach to Increasing Conversion Rate on your Website

The problem with a traffic graph that’s going upward is that it’s not determinant of the number of customers. You can keep investing in traffic acquisition strategies until the cows come home, but that won’t yield any tangible results if you don’t optimize your website for conversions.

But how do you go about adopting conversion optimization and increasing conversion on your website?

A formalized conversion optimization program works like this:

  1. Researching into the existing data and finding gaps in the conversion funnel
  2. Planning and developing testable hypotheses
  3. Creating test variations and executing those tests
  4. Analyzing the tests and using the analysis in subsequent tests

In this post, we are going to run you through the ways to increase conversion rate through this scientific process:

Fold 1 – Digging Deep into Research

Research is needed to figure out your current situation and which among the existing processes need to be changed, or completely removed. Here are some steps that you can start with.

  • Finding the Current Conversion Funnel and Leaks
  • Performing Qualitative and Quantitative Data Analysis
  • Setting Goals that Prioritize ROI

Find the Current Conversion Funnel and Leaks

First and foremost, it is imperative to take stock of your current performance and workflows. You can apply an as-is analysis to gather insights on the current conversion rates, user’s journey, and the leaks in the conversion funnel.

Begin with the mapping of your company’s conversion funnel. You can visualize specific sequences in which users are becoming paying customers. This process will help you create a blueprint of how “strangers” can be turned into “promoters.”

Build Customer Journey to Increase Conversion Rate
Source

Peep Laja, conversion optimization expert and founder at ConversionXL has put together a step-by-step guide to creating user flows that are truly consumer-oriented.

In addition to identifying user flows, it is also important to study whether these are working. Are you experiencing churn in an area where you don’t expect to see it? Are you noticing less churn than you originally expected? Is your conversion funnel measuring the full customer journey or is it potentially missing a step?

Eric Fettman, developer of GoogleAnalyticsTest.com, a free resource for Google Analytics training and GA Individual Qualification preparation, makes some interesting observations on conversion funnels and customer journey:

  • Funnels help you visualize the process by providing a step-by-step breakup of the conversion data and churn.
  • User flow analysis helps your company understand points of customer confusion, and refine web copy and product positioning that affect your customer behavior. This analysis also highlights any “bugs” in the sequence that you may not have previously caught.

Perform Qualitative and Quantitative Data Analysis

After finding the workflow and gaps, the next step is to dive deeper into their causes. You can do this by researching on the What, How, and Why or what is often called the Simon Sinek’s golden circle:

Research to Increase Conversion Rate
Source
  • WHAT are users doing on your website
    This includes quantitative analysis of the amount of traffic landing, dropping off or converting from different pages of your website. You can use tools like Google Analytics (GA) for this purpose.
  • HOW are they behaving
    Now that you know a certain number of people are landing on your website, it’d next be useful to know what they are doing there. For instance, if they’re clicking a link or CTA, scrolling down, filling a form, or the like. Various visitor behavior analysis tools like heatmaps, visitor recordings, and form analysis can help achieve this.
  • WHY are they behaving that way
    You can also find out why your users are performing the way they are by qualitative on-page surveys and heuristic analysis.

Set Goals that Prioritize ROI

After peeking into the gaps with your conversion strategy, you should set clear goals for optimization.

It is important to arrive at a quantified expected conversion rate because that gives your testing efforts a direction. Otherwise, you might end up improving the conversion rate on a page by 1% and sit cozy without realizing its actual potential.

You can use benchmarking studies to decide the improvement you can expect through the proposed change. MarketingSherpa defines the following benchmarks for conversion rate optimization:

Conversion Rate Benchmarking

You should find the main goals of your business, based on the current strategy. What are you focused on now? Is it the total users acquired, is it the number of photos uploaded, or is it the revenue generated?

Whatever it is, you want to focus on something that’s neither too soft (“increase brand recognition”) nor too tactical (“increase page views per session”).

Fold 2 – Planning your A/B Tests

Based on this research, you should next plan your A/B tests to increase your conversion rate.

By now, you should have received enough insights to make an educated guess about what changes to your pages or funnel can bring about a desired change.

Construct a Strong Hypothesis

A structured hypothesis paves the direction for your optimization efforts. Even if the hypothesis fails, you can retrace your steps and correct it wherever it went wrong. Without this structured process, optimization efforts may go astray and lose their purpose.

At its core, a hypothesis is a statement that consists of three parts:

You believe that if we [make a change], we expect [a desirable result] because of [corresponding research].

Here’s an example of a good hypothesis.

I believe moving trust signals closer to the billing form will result in 5% more checkouts because the 56% bounce rate from that page could be due to lack of confidence.

For more information, read this post on building strong testing hypotheses.

Prioritize Your Hypotheses

After you have a list of testing hypotheses, the next step is to zero in on the hypothesis to test first. Here is a list of prioritization frameworks such as:

For detailed knowledge, you can read the post on prioritizing A/B testing hypotheses.

Fold 3 – Executing A/B Tests to Increase Conversion Rate

After the planning, it’s time for application. The plan that you’ve charted to optimize your business process needs to be deployed.

Which Type of Test to Run

A/B, Split, and Multivariate are not different alternatives to do a task. These are methods to do different tasks, so choosing any of these should depend entirely on the task at hand.

Split testing (or split URL testing) is used when:

  • Design needs major changes to the original page such that creating a separate page (housed on a different URL) is easier.
  • Back-end changes are necessary.
  • Pages to be tested already exist on different URLs.

Multivariate testing is used when multiple changes are proposed for a single page and you want to test each combination of these changes.

You should opt for an A/B test when the variations are few and not distinct.

How Long Should You Run the Test

You also need to decide the test duration before you start running the test.

The test duration is dependent on the number of visitors your website receives and the expected conversion rate you are looking for. You can use this free test duration calculator to find the duration you should run your tests for.

After you’re clear on these, you can begin creating variations and start running your tests.

Fold 4 – Analyzing Test Results

To conclude, you should also be able to check and analyze test results. This will arm you with information that you can not only apply to the current pages but also use as future learning.

No matter what the result—positive, negative, or inconclusive—it is imperative to delve deeper and gather insights.

When you are analyzing A/B test results, check if you are looking for the correct metric. If multiple metrics (secondary metrics along with the primary) are involved, you need to analyze all of them individually.

You should also create different segments from your A/B tests and analyze them separately to get a clear picture. The results you derive from generic, non-segmented testing will may lead to skewed actions.

Look at how experts derive insights from A/B Test results in this post.

Your Thoughts

How do you increase conversion rate on your website? Write to us in the comments below.

cta2

0

0 ratings

How will you rate this content?

Please choose a rating

The post A 4-Fold Approach to Increasing Conversion Rate on your Website appeared first on VWO Blog.

Originally from – 

A 4-Fold Approach to Increasing Conversion Rate on your Website

How To Be A Subject Matter Expert When You Don’t Know The Topic

subject matter expert

Copywriters and content marketers are often required to write about industries or topics they know little about. This can make it a challenge to position your company or client as an authoritative industry voice. You may have strong marketing chops, but what if you’re not an expert on your company’s niche? Knowing what you’re talking about is imperative to your success. Passionate audiences can smell fakes, and they won’t hesitate to let you know when you miss the mark. Fortunately, you aren’t the first intrepid wordsmith to find yourself in this situation. Others in the same position have succeeded. And…

The post How To Be A Subject Matter Expert When You Don’t Know The Topic appeared first on The Daily Egg.

Original link:  

How To Be A Subject Matter Expert When You Don’t Know The Topic

How To Build A SpriteKit Game In Swift 3 (Part 1)

Have you ever wondered what it takes to create a SpriteKit game from beginning to beta? Does developing a physics-based game seem daunting? Game-making has never been easier on iOS since the introduction of SpriteKit.

How To Build A SpriteKit Game In Swift 3 (Part 1)

In this three-part series, we will explore the basics of SpriteKit. We will touch on SKPhysics, collisions, texture management, interactions, sound effects, music, buttons and SKScenes. What might seem difficult is actually pretty easy to grasp. Stick with us while we make RainCat.

The post How To Build A SpriteKit Game In Swift 3 (Part 1) appeared first on Smashing Magazine.

View original:

How To Build A SpriteKit Game In Swift 3 (Part 1)

Get your website testing-ready with the Technical Optimizer’s Checklist

Reading Time: 9 minutes

If you were planning to race your car, you would want to make sure it could handle the road, right?

Imagine racing a car that is not ready for the surprises of the road. A road that is going to require you to twist and turn constantly, and react quickly to the elements.

You would find yourself on the side of the road in no time.

A well-outfitted car, on the other hand, is able to handle the onslaught of the road and, when the dust settles, reach the finish line.

Well, think of your website like the car and conversion optimization like the race. Too many companies jump into conversion optimization without preparing their website for the demands that come with testing.

Get the Technical Optimizer’s Checklist

Download and print off this checklist for your technical team. Check off each item and get prepared for smooth A/B testing ahead!



By entering your email, you’ll receive bi-weekly WiderFunnel Blog updates and other resources to help you become an optimization champion.

But proper technical preparation can mean a world of difference when you are trying to develop tests quickly, and with as few QA issues as possible. In the long-run, this leads to a better testing rhythm that yields results and insights.

With 2017 just around the corner, now is a good time to look ‘under the hood’ of your website and make sure it is testing-ready for the New Year. To make sure you have built your website to stand the tests to come, pun intended.

In order to test properly, and validate the great hypotheses you have, your site must be flexible and able to withstand changes on the fly.

With the help of the WiderFunnel web development team, I have put together a shortlist to help you get your website testing-ready. Follow these foundational steps and you’ll soon be racing through your testing roadmap with ease.

To make these digestible for your website’s mechanics, I have broken them down to three categories: back-end, front-end, and testing best practices.

Back-end setup a.k.a. ‘Under the hood’

Many websites were not built with conversion optimization in mind. So, it makes sense for you to revisit the building blocks of your website and make some key changes on the back-end that will make it much easier for you to test.

1) URL Structure

Just as having a fine-tuned transmission for your vehicle is important, so is having a well-written URL structure for your website. Good URL structure equals easier URL targeting. (‘Targeting’ is the feature you use to tell your testing tool where your tests will run on your website.) This makes targeting your tests much simpler and reduces the possibility of including the wrong pages in a test.

Let’s look at an example of two different URL targeting options that you might use. One is a RegEx, which in JavaScript is used for text-based pattern matching. The other is Substring match, which in this case is the category name with two slashes on each side.

RegEx Example

Products to include:

  • www.test.com/ab82
  • www.test.com/F42
  • www.test.com/september/sale98

Products to exclude:

  • www.test.com/F4255

Targeting:

  • RegEx: (ab82|F42|sale98)


Substring Example

Products to include:

  • www.test.com/products/engines/brandengine/
  • www.test.com/products/engines/v6turbo
  • www.test.com/products/sale/september/engines/v8

Products to exclude:

  • www.test.com/products/sale/september/wheel/alloy

Targeting:

  • Substring: /engines/

In the first example, the company assigned URLs for their product pages based on their in-house product numbers. While writing a targeting rule based on RegEx is not difficult (if you know JavaScript), it is still time consuming. In fact, the targeting on the first example is wrong. Tell us why in the comments!

On the other hand, the second example shows a company that structured all of their product URLs and categories. Targeting in this case uses a match for the substring “/engines/” and allows you to exclude other categories, such as ‘wheels’. Proper URL structure means smoother and faster testing.

2) Website load time or ‘Time to first paint’

Time to first paint‘ refers to the initial load of your page, or the moment your user sees that something is happening. Of course, today, people have very short attention spans and can get frustrated with slow load times. And when you are testing, ‘time to first paint’ can become even more of a concern with things like FOOC and even slower load times.

So, how do you reduce your website’s time to first paint? Glad you asked:

  • Within the HTML of your page:
    • Move any JavaScript that influences content below the fold to the bottom of the body, and make these sections load asynchronously (meaning these sections will execute after the code above it). This includes any external functionality that your development team is bringing from outside the basic HTML and CSS such as interactive calendars, sliders, etc.
    • Within the head tag, move the code snippet of your testing tool as high as you can―the higher the better.
  • Minify* your JS and CSS files so that they load into your visitor’s browser faster. Then, bring all JS and CSS into a single file for each type. This will allow your user’s browser to pull content from two files instead of having to refer to too many files for the instructions it needs. The difference is reading from 15 different documents or two condensed ones.
  • Use sprites for all your images. Loading in a sprite means you’re loading multiple images one time into the DOM*, as opposed to loading each image individually. If you did the latter, the DOM would have to load each image separately, slowing load time.
Technical_Testing_Sprite
Load all of your images in sprites.

While these strategies are not exhaustive, if you do all of the above, you’ll be well on your way to reducing your site load time.

3) Make it easy to differentiate between logged-in and logged-out users

Many websites have logged-in and logged-out states. However, few websites make it easy to differentiate between these states in the browser. This can be problematic when you are testing, if you want to customize experiences for both sets of users.

The WiderFunnel development team recommends using a cookie or JavaScript method that returns True or False. E.g. when a user is logged-in, it would return ‘True’, and when a user is logged-out, ‘False’.

This will make it easier for you to customize experiences and implement variations for both sets of users. Not doing so will make the process more difficult for your testing tool and your developers. This strategy is particularly useful if you have an e-commerce website, which may have different views and sections for logged-in versus logged-out users.

4) Reduce clunkiness a.k.a. avoid complex elements

Here, I am referring to reducing the number of special elements and functionalities that you add to your website. Examples might include date-picking calendars, images brought in from social media, or an interactive slider.

This calendar widget might look nice, but is it valuable enough to merit inclusion?
This calendar widget might look nice, but is it valuable enough to merit inclusion?

While elements like these can be cool, they are difficult to work with when developing tests. For example, let’s say you want to test a modal on one of your pages, and have decided to use an external library which contains the code for the modal (among other things). By using an external library, you are adding extra code that makes your website more clunky. The better bet would be to create the modal yourself.

Front-end setup

The front-end of your website is not just the visuals that you see, but the code that executes behind the scenes in your user’s browser. The changes below are web development best practices that will help you increase the speed of developing tests, and reduce stress on you and your team.

1) Breakpoints – Keep ’em simple speed racer!

Assuming your website is responsive, it will respond to changes in screen sizes. Each point at which the layout of the page changes visually is known as a breakpoint. The most common breakpoints are:

  • Mobile – 320 pixels and 420 pixels
  • Desktop and Tablet – 768px, 992px, 1024px and 1200px
Each point at which the layout of your page changes visually is known as a 'breakpoint'.
Each point at which the layout of your page changes visually is known as a ‘breakpoint’.

Making your website accessible to as many devices as possible is important. However, too many breakpoints can make it difficult to support your site going forward.

When you are testing, more breakpoints means you will need to spend more time QA-ing each major change to make sure it is compatible in each of the various breakpoints. The same applies to non-testing changes or additions you make to your website in the future.

Spending a few minutes looking under to hood at your analytics will give you an idea of the top devices and their breakpoints that are important for your users.

Technical_testing_analytics
Source: Google Analytics demo account.

Above, you can see an example taken from the Google Analytics demo account: Only 2% of sessions are Tablet, so planning for a 9.5 inch screen may be a waste of this team’s time.

Use a standard, minimal number of breakpoints instead of many. You don’t need eight wheels, when four will easily get the job done. Follow the rule of “designing for probabilities not possibilities”.

2) Stop using images in place of text in your UI

Let’s say your website works in the many breakpoints and browsers you wish to target. However, you’re using images for your footer and main calls-to-action.

  • Problem 1: Your site may respond to each breakpoint, but the images you are using may blur.
  • Problem 2: If you need to add a link to your footer or change the text of your call-to-action, you have to create an entirely new image.
Buttons_Technical_Testing
Avoid blurry calls-to-action: Use buttons, not images.

Use buttons instead of images for your calls-to-action, use SVGs instead of icons, use code to create UI elements instead of images. Only use images for content or UI that may be too technically difficult or impossible to write in code.

3) Keep your HTML and CSS simple:

Keep it simple: Stop putting CSS within your HTML. Use div tags sparingly. Pledge to not put everything in tables. Simplicity will save you in the long run!

No extra  tags! Source: 12 Principles for Keeping your Code Clean
No extra div tags! Source: 12 Principles for Keeping your Code Clean

Putting CSS in a separate file keeps your HTML clean, and you will know exactly where to look when you need to make CSS changes. Reducing the number of div tags, which are used to create sections in code, also cleans up your HTML.

These are general coding best practices, but they will also ensure you are able to create test variations faster by decreasing the time needed to read the code.

Tables, on the other hand, are just bad news when you are testing. They may make it easy to organize elements, but they increase the chance of something breaking when you are replacing elements using your testing tool. Use a table when you want to display information in a table. Avoid using tables when you want to lay out information while hiding borders.

Bonus tip: Avoid using iFrames* unless absolutely necessary. Putting a page within a page is difficult: don’t do it.

4) Have a standard for naming classes and IDs

Classes and IDs are the attributes you add to HTML tags to organize them. Once you have added Classes and IDs in your HTML, you can use these in your CSS as selectors, in order to make changes to groups of tags using the attributed Class or ID.

You should implement a company-wide standard for your HTML tags and their attributes. Add in standardized attribute names for Classes and IDs, even for list tags. Most importantly, do not use the same class names for elements that are unrelated!

Example:

technical_testing_naming

Looking at the above example, let’s say I am having a sale on apples and want to make all apple-related text red to bring attention to apples. I can do that, by targeting the “wf-apples” class!

Not only is this a great decision for your website, it also makes targeting easier during tests. It’s like directions when you’re driving: you want to be able to tell the difference between the second and third right instead of just saying “Turn right”.

Technical testing ‘best practices’ for when you hit the road

We have written several articles on testing best practices, including one on the technical barriers to A/B testing. Below are a couple of extra tips that will improve your current testing flow without requiring you to make changes to your website.

1) If you can edit in CSS, then do it

See the Pen wf-css-not-js by Ash (@ashwf) on CodePen.

Above is an animation that WiderFunnel Developer Thomas Davis created. One tab shows you the code written as a stylesheet in CSS. The tab on the right shows the same animation written in JavaScript.

JavaScript is 4-wheel drive. Don’t turn it on unless you absolutely need to, ‘cause you’re going to get a lot more power than you need. CSS effects are smoother, easier to work with, and execute faster when you launch a test variation.

2) Don’t pull content from other pages while testing

When you are creating a variation, you want to avoid bringing in unnecessary elements from external pages. This approach requires more time in development and may not be worth. You have already spent time reducing the clunkiness of your code, and bringing in external content will reverse that.

The important question when you are running a test is the ‘why’ behind it, and the ‘what’ you want to get out of it. Sometimes, it is ok to test advanced elements to get an idea of whether your customers respond to them. My colleague Natasha expanded on this tactic in her article “Your growth strategy and the true potential of A/B testing”.

3) Finally, a short list of do’s and dont’s for your technical team

  • Don’t just override CSS or add CSS to an element, put it in the variation CSS file (don’t use !important)
  • Don’t just write code that acts as a ‘band-aid’ over the current code. Solve the problem, so there aren’t bugs that come up for unforeseen situations.
  • Do keep refactoring
  • Do use naming conventions
  • Don’t use animations: You don’t know how they will render in other browsers

Glossary

DOM: The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents

iFrame: The iframe tag specifices and inline frame. An inline frame is used to embed another document within the current HTML document

Minification of files makes them smaller in size and therefore reduces the amount of time needed for downloading them.


What types of problems does your development team tackle when testing? Are there any strategies that make testing easier from a technical standpoint that are missing from this article? Let us know in the comments!

The post Get your website testing-ready with the Technical Optimizer’s Checklist appeared first on WiderFunnel Conversion Optimization.

From:

Get your website testing-ready with the Technical Optimizer’s Checklist

How Unbounce Used Overlays to Get 3,000+ Leads [Case Studies]

You’re a marketer, and a dang good one at that. You follow best practices. You always send campaign traffic to a dedicated landing page. You make data-driven decisions. You do post-mortems on all your campaigns and record your learnings.

But still, your visitors are dropping off your website without converting, leaving you with no way to nurture or convert them at a later date. And it sucks.

abandoning-visitors
No, wait, don’t go! Image via Giphy.

Things are no different for us at Unbounce. Despite our best efforts, we still miss out on a ton of conversions. Whether folks aren’t ready to hand over their information, or they simply aren’t finding what they’re looking for, they just. Don’t. Convert.

We knew there had to be a solution…

Overlays allow you to show relevant offers to specific users at the perfect time, making them less likely to leave your website without converting.

It’s a win-win really. You want the sale, they want the bargain. You want the email, they want the ebook.

But just like with any marketing tool (landing pages, emails, etc.), overlays need to be relevant, timely and valuable in order for them to be effective.

As you may have heard, Unbounce recently launched Convertables, a suite of easy-to-install overlays which can be triggered on-arrival, after delay, on scroll and on-exit. But before releasing Convertables to the masses, we were diligently testing overlays on our own web pages.

Two experiments in particular stand out, in which we used overlays to collect leads for online partnership events. In total, we were able to collect 3,200 leads and signups. We also learned a thing or two about how to maximize conversions, while at the same time respecting the goals of the user. We’d like to share our results and learnings with you.

Digital Agency Day: Sign up to get the recordings

On January 28, 2016, Unbounce and HubSpot co-hosted a brand new online event just for digital agencies. We called it Digital Agency Day (and sometimes, internally, “DAD,” because we’re goofs).

Digital Agency Day consisted of a combination of in-person and virtual events, bringing together expert speakers from the world’s top agencies and agency partners to share actionable advice on analytics, reporting, growing retainers, new business strategy, conversion rate optimization and much more.

In total there were 18 online events, with 6,500+ participants across 101 countries. Yep, you read that right — 6,500 participants. Many of which were captured via a hyper-relevant lead gen overlay.

The problem

The main goal of the Digital Agency Day microsite was to get people to register for the live event. But anyone who’s hosted a webinar or similar online event knows that getting attendees can be tricky. People just don’t want to commit, for fear they’ll be too busy to attend or have scheduling conflicts. Digital Agency Day was more than a single webinar, but the same perceived friction existed.

cro-day-microsite-cropped
The Digital Agency Day microsite. (Click for full image.)

We had to find a way to capture those visitors who just couldn’t commit to the live event before they left the site.

The solution

An overlay triggered on exit was the perfect solution. But rather than asking for visitors to sign up to attend the event, as was the goal of the microsite, the overlay prompted visitors to enter their contact info in exchange for the recordings.

dad-overlay

How it performed

We weren’t all that surprised that the overlay worked, due to its high level of relevance. That said, even we were a little surprised by the whopping 19.03% conversion rate.

dad-rooster-results

In the end, we chalked up its success to relevance, value and timeliness — the trifecta of effective overlays.

  • Relevance: The offer was similar yet complementary to the on-page offer.
  • Value: Rather than blocking a day off in their calendars, visitors could simply sign up for the recordings to watch at their leisure and cherry pick the ones that were relevant to them.
  • Timely: The offer was presented on exit, as visitors were about to abandon. Had it been triggered on arrival or after a delay, visitors who wanted to participate in the live event may have been confused.
Pro tip: While best practices indicate using no more than two form fields on your overlay to maximize conversions, you may opt for more should you require additional information to qualify or disqualify leads. At Unbounce, for example, we often qualify leads based on a four-field form. The trade-off here may be fewer conversions but with the benefit of qualifying or disqualifying leads right off the bat. Of course, this is something you’d want to test for yourself.

Want more overlay best practices?

Download Unbounce’s free guide: Best Practices for Creating High-Converting Overlays
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

CRO Day: Click through to get the recordings

After the success of Digital Agency Day, we decided to adapt the format for CRO Day — a full day of webinars for conversion-driven digital marketers.

Featuring five webinars, two panel discussions, one AMA, one Slack workshop and one… Five-Second Landing Page Showdown, CRO Day was a smashing success — thanks to amazing participants, dedicated team members and one kick-ass overlay.

The problem

Like Digital Agency Day, the goal of the CRO Day microsite was to get people to register up for the live event. But not everyone can commit to a full day of events.

We included some fine print on the page indicating, “Can’t make it? No worries! Sign up anyway and we’ll send you the recordings.” but it would be easy to miss.

digitalagencyday-microsite-cropped
The CRO Day microsite. (Click for full image.)

Again, we needed a way to isolate the message that if you couldn’t make the online event, you could still get the recordings.

The solution

Overlays are so effective because they focus the visitor’s attention on a single offer… like getting free recordings.

cro-day-overlay

Unlike the overlay for Digital Agency Day, we experimented with a traffic shaping overlay, which directed visitors to a secondary signup page focused just on getting the recordings after the event.

Typically, traffic shaping overlays are used to move visitors from low-converting pages (like your blog homepage or ecommerce category pages) to high-converting pages, but in this case we used a traffic shaping overlay to entice abandoning visitors with an alternate offer.

The flow looked like this:

cro-day-traffic-shaping

How it performed

Pretty. Darn. Good.

Using the traffic shaping overlay, we directed 27.31% of abandoning visitors to a secondary sign up page.

cro-day-overlay-results

Once on the page, 67% of visitors converted, filling out a six-field form!

cro-day-overlay-lp-results

Again, this overlay was relevant (a similar yet complementary offer), valuable (forget blocking off your calendar — watch the recordings you want, when you want) and timely (visitors were shown the overlay on-exit after they had seen the initial offer).

However, there’s another key principle at play here: Specificity.

specificity-cro-day
When will I get the recordings? The very next day. Can’t get much more specific than that!

By specifying that the recordings would be emailed to visitors the day after the event, we were able to boost our credibility, presumably resulting in more signups.

Tips, tricks and takeaways

Using the Unbounce overlay guiding principles, you can build overlays that convert like crazy… but not at the expense of visitor experience.

When planning your own overlay campaigns, keep in mind the following:

  • Make it relevant. If your visitor is reading a blog post about waterproof watch reviews, your overlay better not be about bikes. Rather, it should be complementary, like an overlay that directs the visitor to a features page about one of the watch models.
  • But don’t present the same offer. Presenting the exact same offer on the overlay as on page is annoying and needy. Don’t be that dude.
  • Make it valuable. Asking visitors for their personal info is a big deal. Make sure what you’re offering in exchange is of equal or greater value.

Make it timely. Choosing when to trigger your overlay depends upon the goal. (Psst: With Unbounce, you can trigger your overlays on-entrance, after delay, on-scroll and on-exit.)

Original link:  

How Unbounce Used Overlays to Get 3,000+ Leads [Case Studies]

7 Ways to Turn Instagram Into an Ecommerce Purchasing Powerhouse

cup of joes coffee mug

Instagram and ecommerce are logical bedfellows. The brand-audience engagement rates here outperform all of the mainstream social channels, while the visual elegance of Instagram posts are perfect for showcasing people enjoying beautiful products in the wild. It’s lifestyle marketing but without the phoniness of high-concept production shoots – just compelling, evocative imagery wrapped up in authentic social proof. What else could an ecommerce marketer ask for? Image Source So when it comes to branding and engagement, ecommerce marketers have it great on Instagram. Providing audience members with seamless opportunities to make purchases, however, is another story. Researchers have estimated that…

The post 7 Ways to Turn Instagram Into an Ecommerce Purchasing Powerhouse appeared first on The Daily Egg.

Link: 

7 Ways to Turn Instagram Into an Ecommerce Purchasing Powerhouse

Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame

We have great new technology available to enhance our websites. But while theoretical articles explain well what the technologies do, we often struggle to find real use cases or details on how things worked out in actual projects.

Web Development Reading List #160

This week I stumbled across a couple of great posts that share exactly these precious real-life insights: stories about HTTP/2 implementation, experiences from using the Cascade of CSS in large-scale projects, and insights into employing Service Worker and BackgroundSync to build solid forms.

The post Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame appeared first on Smashing Magazine.

Original post:

Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame