A/B test proves that women find bearded men more attractive

Yes, you heard that right. The age old debate has finally been put to rest. For many years now, researchers have presented us with conflicting studies about whether women find bearded men more attractive or the clean-shaven ones. For every research that claims the smooth clean-cut look is more desirable among women, there are two counter studies claiming face fuzz is the way to go. But now, a US-based eCommerce website has finally A/B tested their way to the truth. Read on..

The Company

AdonisClothing is a US-based eCommerce store exclusively dealing in men’s fashion. However, what sets them apart from other e-shops is that they don’t sell directly to men. Their target audience is women who shop for their boyfriends and spouses. Their website encourages women to shop for a ‘complete makeover of the guy’ and that’s one of the reasons their average order value is on a higher side at $90. Also, according to the company’s CEO Jason Johansson, 80% of their repeat customers are women.

The Problem

Like many eCommerce websites, AdonisClothing had a lot of visitors coming to their product pages, but very few were adding products to cart. So JJ (he insists on being called that – says the two letters add to his personality), started his conversion optimization strategy from the product pages.

Here’s how the product page originally looked.

clean shaven

The Test

JJ came up with a curious test idea very few would have imagined, forget even testing it out. He tested out the photos of the models on the product pages — clean-shaved against bearded ones! When asked what made him test out chin carpet when the whole CRO world is perfectly busy testing out the optimum UX and design, JJ had a quaint answer. He explains how his fiancee kept pestering him to grow his stubble, much to his disdain.

“She always said that I looked better in a beard, but I never agreed. So one night, I had this epiphany that why not ask a larger set of people. And what better way to do that than my website — which is mostly visited by women,” he said.

Here’s how the variation looked:

bearded look

The Results

The test was run for 15 days on over 36,000 visitors (of which 70% can be safely assumed to be women). The goal being tracked was clicks on ‘Add to Shopping Bag’ button. Well, what do you guess. The Variation outperformed the Control by a stubbly 49.73%, resulting in a 33% increase in sale orders. The variation had a staggering 98% statistical significance.


 Woah! What happened here?

JJ is understandably stoked. He came up with one of the strangest testing ideas and managed to achieve remarkable results which will not only be helpful for other eCommerce stores in the coming future but also the research community.

“I think this piece of data will be used even years from now by researchers and marketers to support their views. I feel exceptionally proud of having come up with this test idea,” said JJ.

Why the Variation won?

1. Bearded men are perceived as healthier, more attractive

According to a study by scientific journal Evolution and Human Behavior, women find men with heavy stubble as healthier.


The 10-day mighty crop of facial hair is supposed to be the optimum growth.

2. Beards are epic

John Lennon

Peace was not the only cool message proclaimed by John Lennon.

3. Ryan Gosling is internet’s darling for a reason

Ryan Gosling

The man has tutorials dedicated to replicate his 5 o’clock shadow.

The future looks bright

After the success of this one test, JJ has decided to replace all the clean-shaved models on his product pages with ones sporting a scraggly beard. Check out AdonisClothing’s website here.

The post A/B test proves that women find bearded men more attractive appeared first on VWO Blog.


A/B test proves that women find bearded men more attractive


39 Tips to Kill Conversion-Blockers and Boost Sales

Many sites lose conversions due to unnecessary friction on their website.

Friction is defined by Marketing Experiments as “a psychological resistance to a given element in the sales or sign-up process.”


That’s a somewhat abstract definition. Put more concretely, friction frustrates potential customers and causes a decrease in revenues and conversions.

It’s important to note that the definition is widely contested. Optimizers aren’t uniform in their definition. Chris Goward puts it succinctly when he says,

‘…the word ‘friction’ for conversion optimization is unclear and confusing. It’s hard to tell what it really means. I think the underlying problems some refer to as friction are more related to Anxiety-causing elements, or perhaps lack of Clarity, or Distraction-producers…Maximizing the Clarity of your communication, reducing Distraction from peripheral messages and design, and eliminating Anxiety-causing elements can produce massive business improvements in your marketing.’

Oli Garnder of Unbounce says,

“the psychological resistance that your visitors experience when trying to complete an action. Friction is a conversion killer usually caused by unclear messaging, lack of information, or poor layout.”

In other words, if your landing page is—or is simply seen or perceived to be—too overwhelming to complete, you can be sure there’s too much friction on your page. Your landing page’s sole objective is to get someone to make a purchase, offer their information, or optin—then get out of the way.

Reducing friction means making it easy for visitors to take action.

4 Types of Friction

Visitors will experience friction in one of 4 ways:

Information Friction: Information that you omit or commit can bring about friction.

Complexity Friction: This type of friction is making things more complicated than they need to be. The more complexity, the higher your risk of friction.

Time Friction: Time is crucial when considering your conversion optimization. This deals with things such as speed or load time.

Visual Friction: There are many varieties of visual elements that can either bring about or reduce friction: font kerning, video placement, background patterns, button color.

In your efforts to reduce friction, you must be able to identify elements on your website that create friction in any of these 4 areas. Then come up with a plan for reducing that friction.

Of course, your solutions are merely hypotheses at this stage.

You must test to know whether your assumptions were correct. And don’t forget your Crazy Egg heatmaps. They can help you figure out whether the elements on your web pages generate the behavior you expect (e.g., Are people clicking on the button or on something else?).

Start with the 5-Second Test

When analyzing sites for unnecessary friction from a qualitative point of view for, I typically employ the 5-second test.

If your site doesn’t pass the “5-second test,” your site is likely to have friction and thus a high bounce rate.

So what’s the five-second test?

The “5-second test” involves showing your website to someone for 5 seconds. Once the 5 seconds are over, if they’re able tell you what the site’s about, then you’ve passed the test.

Alternatively, if they can’t clearly articulate what it is you do, your website fails the test. A typical problem, amongst others, with sites that fail the 5-second test is that there’s unnecessary friction on the site.

Hence, it’s clear that a site that passes this “5-second test” is more likely to generate higher conversions.

This article is all about making your site as friction-free as possible so it passes this test, and making it pleasant experience, so users come back again and again.

We’ve identified 39 common points of friction, giving you a great place to start your optimization efforts. Ready? Let’s dig in.

39 Tips to Kill Conversion-Blockers and Boost Sales
Click To Tweet

1. Remove navigation and extra elements

Type of Friction: Complexity

Unnecessary navigation or any redundant elements on your site can cause friction for users, and thus distract them from the primary goal you have for them: making a purchase, opting in or subscribing.

Ideally, on every landing page you want to force the decision between 3 options:

  • Becoming a conversion
  • Looking for further information (but still remaining interested)
  • Providing their email, so you can contact them in the future

Removing the navigation bar clarifies the purpose of that webpage better, and makes it easier for visitors to focus on the task at hand.

Example: MECLAB’s Experiment for Online Retailer.


Removing the top navigation and side navigation allowed this retailer to see a 10% increase in checkout competitions.

You might do better to put non-necessary elements (say, a privacy policy or a cookies policy) in the footer or even in another page.

2. One CTA per page

Type of Friction: Visual

A general principle in conversion rate optimization is only having one call to action per page.

Ideally, you don’t want to want to give the visitor too many options creates overwhelm and often causes them to bounce.

Example: Netflix


3. Improve your pricing page (for multiple packages)

Type of Friction: Information

A poorly set-out pricing page can cause a serious decrease in sales. Here are several ways to improve the layout of various price points and features in order to reduce friction.

Make a comparison table for various features available across packages

Example 1:


Example 2: groupspaces


Show features that are available to all users

Example: groupspaces


Accent aspect of your product or service that matter most:

Users are usually interested in several things: what package is right for me? how much does it cost? can I cancel if I am not happy? and can I try it for free?

Example: See how approaches this:


4. Remove “wish list,” particularly if it’s a feature customers don’t need

Type of Friction: Information

When an online store does not sell commodity products (e.g., books or consumer electronics), it’s unlikely that offering a wish list will increase sales. It’s more likely that it will create a sense of “I can just come back later,” which usually doesn’t happen.

By removing the “wish list” function, the store can be more focused on sales, and there is no super-simple way for customers to postpone the purchase decision.

Reduce Friction: Don’t make it easy for customers to postpone purchase.
Click To Tweet

5. Disable copy/paste or remove the “Retype e-mail address” field in signup forms

Type of Friction: Complexity

Some signup form contains a “Retype e-mail address” field. According to Smashing Magazine, “this allows for greater error, because it forces users to type more. They can’t see the characters they’re inputting, making it difficult to know whether they’re typing the right password each time.”

They recommend, instead, asking users to type their password in once, then allowing them to unmask the password to verify they typed it correctly.


6. Make “add to cart” button bigger

Type of Friction: Visual

The “add to cart” button should be the dominant button on the product page; your button should fluidly guide the user toward to the next step — clicking the ‘add to cart’ button.

Example: Betabrand (image courtesy of


Example 2:


7. Make the “view cart” link more prominent

Type of Friction: Visual

People are used to finding the shopping cart link at the top-right corner of the web page. So that’s where yours needs to be. Don’t try to be creative. This link reminds users that they’ve added a product to their basket.

Example 1: Amazon. Here’s the link they use in the top-right corner of their design.


Example 2: Flipkart


8. Add a prominent “checkout” link to all shop pages

Type of Friction: Visual

Visitors should have no trouble completing a purchase once they’re ready to check out.

As with the shopping cart, people are used to finding the link to the checkout process in the top-right corner. The link should be right next to the “shopping cart” link and should be perpetual in its visibility.

Example: Here’s how Kogan displays the checkout button. My only recommendation would be to test a brighter color.


9. Website Loading Speed & Conversions

Type of Friction: Time

Page Load Speed is an important part of conversion rate optimization. There are several formal studies that recognize this connection.

  • A study at Amazon showed a 1% decrease in sales for every 0.1 second decrease in response times. (Kohavi and Longbotham 2007)
  • According to studies by the Aberdeen Research Group, the average impact of a 1-second delay meant a 7% reduction in conversions.

Slow web pages are perceived as less credible (BJ Fogg) and quality. To reduce friction, your page load times should be below tolerable attention thresholds—ideally less than 3 seconds. Friction will be reduced, and you should enjoy higher conversion rates.

10. Break your paragraphs up into chunks containing no more than 3 lines per paragraph

Type of Friction: Visual

Readability studies show that on the internet, to ensure maximum comprehension and the appearance of simplicity, line lengths of 50-60 characters per line, or 500-600 pixels wide, are read faster & more consistently by visitors.

Also, people have a tendency to read through to completion when chunks of copy are broken up into segments of three lines.


  1. Break the current paragraphs up into chunks containing no more than 3 lines per paragraph.
  2. Implement copy that does not exceed 50-60 characters per line, or 500-600 pixels per line.

11. Put the relevant content on the left

Type of Friction: Visual

Since we read left to right, it makes sense to put relevant content on the left and less relevant content on the right or below the fold.

As you can see in this heatmap, most visitors attend to the upper left of the page. That’s where your most important messaging should go.


Google Golden Triangle by Amit Agarwal, on Flickr,

12. Make your competitive advantage clearer

Type of Friction: Information

Returning visitors are likely to be familiar with your brand. But what about new users? To get them engaged quickly, you need to help them understand what your website is about.

Your tagline takes care of this. Making the tagline (or the whole logo) bigger makes it easier for visitors to orient themselves.

Example: Carelogger increased their conversions 55% after changing their tagline from “affordable, easy-to-use web-based contact manager” to “the quickest & easiest way to organize your contacts.”


13. Make your logo clickable back to the home page

Type of Friction: Visual

It is usability standard that the logo in the upper left-hand corner of your website links to the home page. If visitors can’t navigate, they usually bounce.

Don’t make your users think. Make it easy for them to navigate your site.

14. Improve product customization process

Type of Friction: Information

The biggest challenge in selling online is that visitors can’t touch or try on the merchandise. Users are essentially ”in the dark.” Do everything you can to showcase the product visually.

Rather than just putting color boxes, include images of the product in all colors.



15. Offer instant gratification

Type of Friction: Information

Your customers are busy, so you can often reduce friction by offering instant gratification.

If you’re a retailer with more of a bricks-and-mortar presence, you can offer the convenience of ordering online with in-store pickup. Talk about the best of both worlds! Customers can eliminate the shipping period but avoid long lines at checkout.

Example: (courtesy


16. Show products in use

Type of Friction: Visual

By showing the products in use, it becomes easier for visitors to imagine using the products. Emphasize your product’s ease of use, beauty or the end result people will get, and place your image next to the call to action.

Example: Amazon


17. Make order history available for signed-in users only

Type of Friction: Information

Too much information is often distracting, which creates friction.

One way to avoid this is to require users to sign in before being able to see customer-only information such as the customer’s order history. It can be a part your customer drop-down menu when they sign in.

On a side note, this also encourages new customers to register with your site.

Example: see drop-down menu for signed in users on Amazon.


18. Provide the experience your customers want

Type of Friction: Information

Be “human,” not “corporate” when dealing with customers.

Create a “brand promise” that is completely customer-centric. Then publish it where customers can see it.




19. Add links to detailed product pages

Type of Friction: Visual

Sometimes people don’t buy because they need more information. If you rely on short product descriptions to do the selling, you may need to test dedicated product pages with longer descriptions, more images, and even testimonials.

Example: morgan


20. Make reviews a clickable link

Type of Friction: Visual

You may or may not show reviews on the product page. If you choose not to show them, make sure you make it easy to find them.



21. Make navigation menu simpler

Type of Friction: Complexity

Some navigation menus show so many options that the visitor is easily overwhelmed.

Example: Unidentified (courtesy Kissmetrics)


Rather than showing dozens of options, only show the top-level options to make the selection easier for the user.

Put your most important parent pages in your primary navigation bar. Other pages may be shown as child pages or linked to from other pages.

Example 1: Smith Brothers


Example 2: Sweat Vac


22. Increase font size to make the site more user-friendly

Type of Friction: Visual

The smallest font size you should ever use for text 12px. 14 pixels is often better. Anything smaller than that will make many visitors struggle to see the text.

Even the visitors who can read the current text without struggling will appreciate a larger font (without consciously noticing it).

Example: ran a CRO test for Numara Software testing font.


The test font (the variation) was larger and had increased line spacing. This simple font change reduced their bounce rate by 10%, dropped the exit rate by 19, and boosted the form conversion rate by 133%. No bad, don’t you think?!

Example 2: whoacceptsamex (image courtesy vwo).



Variation: with a 18 px font size, as opposed to 12 px.

This variation resulted in 32.68% more clicks. See the case study here.


23. Check the speed of the home page slider

Type of Friction: Visual

If you use a slider on your home page, you may be frustrating visitors. Don’t allow the slider to transition so quickly that it’s difficult to read. Allow enough time for visitors to read and click if interested.

But remember, using a slider at all is questionable. People get impatient waiting on sliders and are likely to skip over them. The slider also makes the page unfocused since there is no longer one clear primary message.

If you use a slider, test carefully to be sure they’re optimized for your users’ preferences.

24. Don’t use the same image for multiple products

Type of Friction: Visual

Using same pictures for different products can create a lot of confusion. Visitors typically “read” images before text. Seeing the same image will likely indicate that the message is being repeated as well.

Use different pictures to indicate different ideas and messages.

25. Remove vertical navigation

Type of Friction: Information

For some users, scrolling may cause friction. They want to be able to see immediately what the page is about. Removing vertical navigation allows more above-the-fold space to present your core message. It also makes the page look cleaner and more intuitive.


26. Avoid inconsistencies in your site’s design

Type of Friction: Visual

Inconsistencies make the site feel poorly maintained, which can cause questions about the overall believability of the information.

When the site’s design changes, it creates friction in the customer’s mind. It may be subtle, but any amount of friction can make people leave your site.

Use same overall design on your site’s design to provide a consistent experience across the website. Also ensure those your design is consistent across web, email, mobile devices, online chat.

Example: Jetblue’s Homepage (courtesy NNGroup)


Jetblue email:


Jetblue mobile site:


27. Make your checkout pages’ design similar to main site and don’t redirect checkout

Type of Friction: Visual

About 67% of the people who put a product in your shopping cart will change their mind during the checkout process.

One way to get more people to complete their purchase is to make the design of your checkout page similar to the main site. (Remember the previous point, that design changes create friction?)

Copy the design from the main site to the checkout pages with no sidebar and the navigation bar from the design.

In addition, don’t redirect the checkout page to a new URL. A URL like creates doubts about where you are taking them.

28. Remove optional, irrelevant or multiple calls to action

Type of Friction: Visual

A guiding principle in conversion rate optimization is to have only one call to action per page.

Make the primary button the only logical next step to take.

Website Conversion Tip: Make the primary button the only logical next step to take.
Click To Tweet

29. Make your search bar larger

Type of Friction: Visual

One obvious source of friction is visitors’ inability to easily find what they’re looking for.

To help your visitors find the information or product they want, make your search bar more noticeable. You should offset your search bar with a different color from your site’s color scheme. It should also be more prominent.

Example: This is neatly accomplished in the search bar at theiconic, where the search bar is in the center of the navigation bar.


30. Use intuitive names for navigation tabs

Type of Friction: Information

If people can’t figure out your site, they leave. Period. So don’t be cute with your nav-bar tabs.

Can you figure out what this site is about?


Think about what visitors are used to seeing on websites—both in your industry and around the web in general.

If they’re used to seeing a particular word or phrase, it’s a good idea to use it on your site as well.

For example, many visitors are accustomed to seeing language relating to “Tour” or “How It Works,” when looking to explore more details about a site/product. That being the case, don’t call it “Wrks.”

31. Avoid too much white space in the page

Type of Friction: Visual

White space is good. But too much white space may be confusing.

Too much whitespace between the supporting content and your actionable area can bring about a sense of friction and cause users to see the call-to-action as a distinct and separate element, rather than a continuation for the text. Check this article out for more information.

32. Don’t ask people to see prices before they’ve seen the products

Type of Friction: Time

It is too early to start talking about prices on the home page. You should first let visitors explore the site, review their options and understand the benefits of your products. Only after the visitor wants the product should you start talking about buying (and prices).


33. But DO show your prices

Type of Friction: Information

To avoid people being scared off by your pricing, you may be tempted to hide it altogether. But when visitors don’t see your pricing schedule, they may lose trust.

If you don’t want to link to your prices from the navigation bar, at least put a link in the footer.

34. Allow forward and backward movement in checkout

Type of Friction: Complexity

In your shopping cart, the process  steps  at the top of the page should  also  function  as  navigational  links  for  the  checkout process. Customers often naturally expect to be taken back to the respective step when clicking it, in order to go back and edit previously entered data. (visual)


35. Make it easy to complete checkout

Type of Friction: Complexity

To avoid cart abandonment, make checkout as fast and easy as possible.

On your Cart Review page, put a “Proceed to Checkout” button above the product table as well as below. This will ensure that users will understand what to do next without having to scroll.

Example: Original


Variation: After (“Update” and “Checkout” buttons added)


36. Don’t be too aggressive in cross-selling

Type of Friction: Information

If you cross-sell in the cart, then at least place the extra products below the cart and primary button, and make the products as relevant to the cart’s content as possible


37. Simplify your contact form

Type of Friction: Complexity

Inputting information creates friction. So the longer your optin forms, the more friction you create. What is the least amount of information that still allows you to market effectively? Remove unnecessary fields to make the contact easier and more likely.

Current form:


Suggested form:


Example 2: Obama’s Online Campaign. Shortening the form led to an increase in donations of 5%.


38. Make trust seals prominent during checkout

Type of Friction: Information

Generally you want to place trust seals prominently on your purchase page.


39. Integrate email capture on your homepage as well

Type of Friction: Information

Visitors should not have to click to another page to be able to join your email list. Every additional page-load tends to create friction.

A two-step optin box (a lightbox that appear when a visitor clicks) or embedding the email opt-in form on the homepage itself eliminates extra steps.


Make your site as friction-free as possible

Our list, while relatively comprehensive, it’s by no means complete. The thing to remember is that any element on your website can create friction—and if they do, they likely reduce conversions.

If you want to improve your conversion rate (and who doesn’t?), you should constantly be evaluating your website for those elements.

Begin with the 5-second test. Then start hacking away at the points of friction we’ve listed here. It’s a sure bet that your conversion rate will improve as you do so.

What creates the most friction for you? Would you add anything to the list?

Read other Crazy Egg articles by David Rosenfeld.

The post 39 Tips to Kill Conversion-Blockers and Boost Sales appeared first on The Daily Egg.

See original article here: 

39 Tips to Kill Conversion-Blockers and Boost Sales


That’s Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5

Smart “responsive” workflows, effective responsive design/UX patterns and powerful front-end techniques — if you need a good book on smart responsive design, our brand new Smashing Book 5 is just what you need. Neatly packed in a gorgeous hardcover, it covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. 498 pages. Hardcover/eBook. Get the book and save 25% today.1

The Smashing Book 5: Real-life Responsive Web Design2

$29 $39

Get the book3Printed, gorgeous hardcover.
Save 25% today.4 Free shipping only today.

About The Book

Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges.

Just like all of our Smashing Books, the book isn’t concerned with trends or short-lived workarounds. It focuses on the actual design process — the why of the decisions we make as we craft websites. Think of it as a reliable playbook for issues that keep popping up in every responsive project — just the playbook you need to master all the tricky facets and hurdles of responsive design.

Illustration of Smashing Book 5, Chapter 11, Andrew Clarke on The Way Forward5
The illustrations inside the book were crafted by Guillaume Kurkdjian6 and the cover was designed by Jessica Hische7. (View large version8)

This book won’t solve every single issue in your responsive projects, but it will help you deal with common challenges effectively: be it front-end architecture, layout issues, resolution-independent assets, performance issues, responsive images or pretty much everything else related to responsive design. Shipping expected to start late May 2015. Available as print and eBook.129

Table Of Contents

We invited respected designers and developers who know a thing or two about designing and building responsive websites. The chapters have also been reviewed by active members of the community such as Jake Archibald and Dmitry Baranovsky — just to name a few.

Vitaly Friedman Preface


As designers and developers, we solve problems for a living. Yet, these problems are often quite tricky and complex, and the context of these problems requires us to be creative and flexible in our workflows. With responsive design, we are prompted to create scalable design systems that work well in unpredictable environments. To do that, we need to be pragmatic and find solutions that work well within given constraints. That’s why we created this book: to find techniques that have actually worked in real-life projects with real-world challenges.

Keywords design systems scalability bulletproof solutions front-end techniques real-world challenges

Daniel Mall Responsive Designer’s Workflow

Summary In practice, responsive projects usually require more time, more skills, more testing and hence more flexibility in budgets. Addings changes late delays projects immensely, and process involving designers, developers and clients is usually tiring to say the least.

In this chapter, Daniel shares insights into his responsive design workflow from projects such as TechCrunch, Entertainment Weekly and Radio Liberty, with techniques and strategies that help him get things done well, within budget and on time (most of the time), while achieving the highest level of fidelity in shortest amount of time.

Keywords responsive workflow element collage style tiles tools deliverables performance budget interface inventory sketching planning manifestos hypothesis atomic design designing in the browser Photoshop

Ben Callahan Efficient Responsive Process With Clients

Summary Design deliverable is one thing, an efficient collaboration between teams and stakeholders is a different beast entirely. This chapter provides strategies for keeping this collaboration sane and focused.

You’ll learn how to build a good and efficient team, how to establish good pricing/time estimates for responsive projects, how to establish priorities with content priority guides and how to shift away from linear handoffs with multidisciplinary teams. A detailed chapter on getting things done, with clients, the proper way.

Keywords collaboration estimates spiraling “one-deliverable” workflow efficiency content priority guide style comparisons testing the aggregate content prototype wireframes style prototypes pattern libraries happy teams

Eileen Webb Structured Content For RWD

Summary Content created by one department is never updated by the next. Services get renamed in the navigation, but are still referenced by the old name in the body text. Important information is buried in the murky depths of flowery prose.

Sounds familiar? Many issues in responsive projects aren’t related to technology, but to content: it’s either ill-formatted or priorities get lost across screen resolutions. Let’s fix it. In this chapter, Eileen shows how structured content can help refocus on what matters, and how we as designers can use the structure intelligently to provide users with information that they need, when they need it.

Keywords structured content content consistency content models structural audit editorial content content types content relationships data-driven gaps feature-driven gaps authors and editors CMS content maintenance

Susan Robertson Architecting Style Guides

Summary Style guides, pattern libraries, style tiles. When exactly would you want to use one, and when building one, what approach works best? In this chapter, Susan explains the process of architecting and maintaining a style guide, from building to prototyping to designing, based on the experience she has had when working on Editorially. You’ll also learn how to integrate style guides into your workflow and use them for feature development and testing design changes.

Keywords style guides pattern libraries inventory “designovelopment budget” modular code web app style guide prototypes CSS audit maintenance digital standards team UX team review

Sara Soueidan Mastering SVG For RWD And Beyond

Summary This chapter has hands down on everything you need to know in order to start designing and building flexible components and visual assets with SVG. Sara will take you on a journey through SVG syntax, SVG accessibility, SVG viewport and viewBox, creating and exporting SVGs, embedding SVGs, building SVG sprites, creating SVG icon systems, using SVG Data URIs, optimizing SVG for performance, SVG conditional processing, clever SVG tricks and techniques and making SVG cross-browser responsive with CSS. Yep, everything you need to know about SVG, as promised.

Keywords SVG syntax accessibility viewport viewBox exporting embedding sprites icon systems data URIs performance smart SVG techniques responsive iconography cross-browser fallbacks

Zoe M. Gillenwater Building Responsive Components With Flexbox

Summary We can use Flexbox for a while now.10 In fact, Flexbox solves a lot of CSS shortcomings and makes building responsive layouts much easier than with floats or positioning. It gives you more control over the things you care about in a responsive layout (such as order, alignment, and proportional sizes of your boxes) and lets the browser figure out the rest; the math-y stuff that computers are good at, like the exact dimensions that are needed on the boxes to perfectly fill the available space.

Zoe shares insights from her work at, showing practical Flexbox-based techniques which make responsive sites much easier to build and maintain — even without media queries.

Keywords syntax variants flex container orientation wrapping sizing boxes flex property forms with Flexbox advanced alignment magical margins reordering boxes order property Flexbox as progressive enhancement

Bram Stein Web Fonts Performance

Summary By default, web fonts block rendering, hiding content from the user. The only way to make content accessible as soon as possible is by treating web fonts as a progressive enhancement. This doesn’t mean web font performance is not an issue. You still need to load web fonts as quickly as possible so that users experience your site exactly how you designed and built it. Let’s fix this.

In this chapter, Bram shares insights that he has learned from working at Typekit, covering web fonts and formats, font loading and font rendering, CSS Font Loading API, fallback fonts, caching, compression, inlining, subsetting and font loading strategies.

Keywords font formats font loading font-rendering FOIT and FOUT Font Loading API fallback fonts inlining fonts simulating swapping promises asynchronous loading and caching prioritized loading

Yoav Weiss Using Responsive Images, Today

Summary So you want to serve different images to different screens. Perhaps a Retina image (only) to Retina screens, or an art-directed image to small screens, or a portrait image for portrait orientation, or perhaps .webp to browsers supporting the format — without performance hits. Since images are the heaviest assets on the web, dealing with them intelligently is both our responsibility and opportunity for more dynamic layouts. That’s what native responsive images are for.

In this chapter, Yoav discusses the different responsive images use cases and how we can use the native solution today to create performant responsive websites. We will also look at ways to make these solutions easier to deploy and maintain in real projects, with Picturefill and CMS plugins for Drupal and WordPress.

Keywords CSS pixel and DPR Retina displays fixed-width images variable-width images srcset and sizes art direction <picture> element separation of concerns image format fallback accessibility background images image optimization WebP and JPEG-XR compressive images deployment common pitfalls

Fabio Carneiro The Dark Side Of Responsive HTML Email

Summary Explaining responsive HTML email is always an uphill battle, because just about every single designer and developer hates it. But there’s a lot of great, forward-looking innovation going on in the email design world. In fact, melding of responsive design techniques is absolutely possible.

In this chapter, Fabio, the technical email maestro from Mailchimp, explores what you can achieve with media queries in responsive HTML email to ensure that your emails look just fine on major email clients across different devices, and looks even better in clients that do not support media queries (such as Gmail).

Keywords email landscape CSS in email market share navigation and CTA buttons foundational markup reset and client-specific CSS fluid containers pattern-based development layout techniques Microsoft Outlook Windows Live Mail Apple Mail Mozilla Thunderbird Yahoo! Mail AOL iOS Mail Gmail

Tom Maslen Testing, Maintaining And Debugging RWD

Summary We talk a lot about designing and building responsive websites, but not so much about maintaining and testing them. Speaking from his experience at BBC, Tom has built up a way of working that minimizes the pain points that responsive web design has.

The chapter shows how you can build future-friendly CSS that will scale up to support large responsive websites; get you to take testing seriously, but not overcomplicate your workflow; and finally, how to sanely prioritize and debug common problems (layout, images, complex UI components like tables) in all kinds of devices and browsers.

Keywords “cutting the mustard” predictable, simple CSS naming conventions BEM and class names Sass organization debugging media queries lazy loading content-out media queries separation of concerns exploratory testing functional testing visual regression testing automated testing dealing with false positives common dependencies troubleshooting bugs on mobile

Vitaly Friedman Performance Optimization Roadmap

Summary If somebody tells you that responsive websites are bloated, heavy and slow by default, and that it’s very difficult to make them fast, don’t believe them — they are liars. If you set the priorities right and build the website with progressive enhancement in mind, you can create extremely fast responsive websites that work well across devices: with one code base working everywhere.

In this chapter, yours truly will be sharing what we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done in-house in big and small companies. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering.

Keywords mobile first jQuery dependence dealing with IE8 advertising refactoring code inventory front-end optimization performance budget SpeedIndex deferring web fonts critical CSS smart font fallback dealing with JavaScript asynchronous loading SPDY/HTTP 2.0 core content/functionality priority lists responsive images

Andrew Clarke Counting Stars: Creativity Over Predictability In RWD

Summary Our responsive designs lack soul. You can think of many websites that are well presented, easy to use, triumphs of UX and technically competent, but few that might be remembered for years to come. Why do you think this is? Why are so few websites memorable? Could the design processes we’ve come to rely on, particularly in relation to responsive design, have hindered our creativity? Our modern web design magazines are full of advice about process, techniques and tools, but little about creativity, about humanity, or about ideas.

In this chapter, Andrew takes a closer look at how we can combine creativity with predictable design systems to create unpredictable, dynamic and memorable responsive websites — with a framework and a mindset that will challenge you to think differently about crafting websites today.

Keywords advertising user experience design creative hijinks allergic to research process and predictability building blocks of creativity intoxicated by process platform for creativity creative brief line between control and chaos buying creativity copywriting creative teams creative direction

John Allsopp, Matt Gaunt Beyond Responsive: Optimizing For Offline

Summary What if we told you that as a user, you don’t have to be online to use the web, and a website or a web application would respond to this accordingly? We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.

John and Matt cover main technologies and practices that you’ll need to use to make your apps work as well offline, as they do online. We’ll discuss how to detect if we are online or not, HTML5 Application Cache, WebStorage and offline events, but most importantly Service Workers and how we can use them today to not only make content available offline, but also significantly improve performance and create snappy, fast experiences in (almost) no time.

Keywords navigator.onLine online and offline events HTML5 Application Cache cache manifest fallbacks AppCache gotchas Web Storage localStorage Service Workers

Daniel Mall Ben Callahan Eileen Webb Susan Robertson Sara Soueidan Zoe M. Gillenwater Bram Stein
Yoav Weiss Fabio Carneiro Tom Maslen Andrew Clarke John Allsopp Matt Gaunt Vitaly Friedman
From left to right: Daniel Mall, Ben Callahan, Eileen Webb, Susan Robertson, Sara Soueidan, Zoe M. Gillenwater, Bram Stein, Yoav Weiss, Fabio Carneiro, Tom Maslen, Andrew Clarke, John Allsopp, Matt Gaunt and yours truly.

Technical Details

  • 498 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches),
  • A high-quality embossed cover with a little surprise,
  • Quality hardcover with stitched binding and a ribbon page marker,
  • The eBook is included when you buy a printed book (PDF, EPUB, Kindle),
  • Airmail delivery from Germany (free worldwide shipping today, delivery times11),
  • Available as print and eBook.129

Get the new Smashing Book: Real-life Responsive Web Design

$29 $39

Print + eBook13Printed, gorgeous hardcover.
Free shipping for the next 24h.


eBook14PDF, ePUB, Amazon Kindle.

The subscribers of the Smashing Library15 will find the eBook in their dashboard automatically once the book gets released (late May 2015). All printed books will be shipped from Germany via airmail. Please note that if you order a printed book, you’ll get the eBook once the book gets released automatically, so you can start reading right away! Yay!

Why This Book Is For You

If you’re looking for smart design patterns and strategies for building fast, flexible responsive websites efficiently, this book is just for you. It’s a responsive design handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common responsive issues effectively. Indeed, fifteen shades of responsive web design, if you like. You’ll learn how to:

  1. Be efficient in your responsive workflow,
  2. Tackle common content issues in RWD,
  3. Architect and maintain a style guide,
  4. Design systems with atomic design process,
  5. Master advanced SVG techniques,
  6. Avoid dirty hacks with smart Flexbox techniques,
  7. Build scalable, maintainable CSS layouts,
  8. Manage web fonts performance issues,
  9. Implement responsive images today,
  10. Craft responsive HTML email newsletters,
  11. Test, maintain and debug responsive sites.
  12. Make responsive websites fast and snappy,
  13. Set up a bulletproof performance optimization roadmap,
  14. Enhance your website with offline features,
  15. Avoid generic solutions and stay creative with RWD.

16 17
One of the fantastic illustrations by our “Mystery Riddle” illustrator Guillaume Kurkdjian. (Large views: chapter cover18, book layout19)

Add Your Name Into The Book!

The Smashing Book 5 is being written and will be published in the spirit of our fantastic community — written by designers and developers for people like you, designers and developers who care about their craft. This book wouldn’t exist without your kind support. That’s why, just like with our previous Smashing books, we kindly invite you to submit your name into the book20.

Just about 1,500 names will fit properly on the two dedicated pages, so please don’t wait too long. First come, first served! Please also avoid grammar mistakes or blatant advertising. Thank you again for your kind support throughout the years, our dearest readers!

Add your name21No advertising, please. Be cool.

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via Twitter @smashingmag22 — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

Shipping costs for my country?
The shipping cost for one book (or a bundle) is $5 per delivery — wherever you are in the world. We ship everywhere worldwide. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay.
Delivery times to my country?
All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview23. We’ll start shipping the books around the end of May 2015.
Is Smashing Book 5 available as an eBook?
Yep, sure. The book is available in PDF, ePub and Amazon Kindle formats. You can pre-order the eBook24 and we’ll make it available in your dashboard once the book gets released (May 2015).
What payment methods are accepted?
We accept PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers.
Is there a money-back guarantee?
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!
I have a question that is not covered here.
Please leave a comment below, or get in touch with us via the contact form25 or via @SmashingSupport on Twitter26. We would love to help you in any way we can — you know that!


  1. 1 #your-smashing-book
  2. 2 #about-the-book
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9 #your-smashing-book
  10. 10
  11. 11
  12. 12 #your-smashing-book
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24 #your-smashing-book
  25. 25
  26. 26

The post That’s Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5 appeared first on Smashing Magazine.

Read the article:

That’s Real-Life Responsive Web Design: Meet The Brand New Smashing Book 5


Desktop Wallpaper Calendars: April 2015

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for seven years now1, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for April 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?


“I love spring and handmade typography.” — Designed by Raluca Dragos3 from Romania.


The Perpetual Circle

“The Black Forest, which is beginning right behind our office windows, so we can watch the perpetual circle of nature, when we take a look outside.” — Designed by Nils Kunath30 from Germany.

The perpetual circle31

Spring Fever

“I created that mouse character for a series of illustrations about a poem my mom often told me when I was a child. In that poem the mouse goes on an adventure. Here it is after the adventure, ready for new ones.” — Designed by Anja Sturm65 from Germany.

Spring Fever66

Umbrella Season

“In my neck of the woods, April means a lot of rain, and therefore a lot of umbrellas. I’ve noticed a lot of pretty unique umbrellas out there, especially when I walked to class in college. Happy Umbrella Season!” — Designed by Angelia DiAntonio82 from Ohio, USA.

Umbrella Season83

Abril Lluvias Mil

“We were inspired by the rain and a popular Spanish adage which says: “April a thousand rains” which means a lot of rain in April” — Designed by Colorsfera111 from Spain.

Abril lluvias mil112

Hidden In The Magic Garden

“The magic of spring blended with the excitement for easter where children find hidden chocolate eggs in their garden.” — Designed by Richard Davis156 from South Africa.

Hidden in the Magic Garden157

Spring Rain

“Even the rain is beautiful during spring!” — Designed by Zlatina Petrova199 from Bulgaria.

Spring Rain200

Citrus Passion

Designed by Nathalie Ouederni242 from France.

Citrus Passion243

Carrots Are Better Than Eggs!

“Easter is coming and rabbits have the noble task to deliver the Easter eggs but I think rabbits wouldn’t be interested in doing this at all, all they want is a nice carrot.” — Designed by Maria Keller261 from Mexico.

Carrots Are Better Than Eggs!262

Bee In April

Designed by Iquadart312 from Belarus.

Bee in April313

Don’t Be Shy

“Just a little bit of inspiration for the month. Don’t be shy, follow your dreams.” — Designed by Diane335 from South Africa.

Don't be shy 336

Time For Coffee

Designed by Julia Versinina357 from Chicago, USA.

Time for coffee358

Men At Work

Designed by Elise Vanoorbeek (Doud Design)398 from Belgium.

Men At Work399

A Spring Bike Ride

“All I want to do right now is ride my bike around, smell the fresh air and pick some wildflowers. Unfortunately, Spring hasn’t quite hit us here in Chicago yet, so I have to be content illustrating it instead…” — Designed by Mandy Fischer433 from Chicago, USA.

A Spring Bike Ride434

A Time For Reflection

“‘We’re all equal before a wave.’ – Laird Hamilton.” — Designed by Shawna Armstrong460 from the United States.

A Time for Reflection 461

Bengali New Year

Designed by Saket Jajodia477 from India.

Bengali New Year478

Blooming Earth

“The Earth Day that is an important day for the people, wherever they are on earth. It is important not to forget our home – we have to protect it every day. Let us consider a challenge to plant at least one tree every month, and after 10 years we will have our orchard on earth :)” — Designed by Corina Moscu500 from Romania, Bucharest.

 Blooming earth501

A Magnificent World

“April is Autism Awareness Month, although there’s never a bad time to make autism awareness art. There’s no denying that it creates a lot of struggles for those who are on the spectrum (those with autism, Asperger Syndrome, etc), but some people find that it adds a lot to their lives as well. Those on the spectrum get absorbed in things — whether circles or flying, animals or strip malls — and see magic and wonder in them that others don’t. So I wanted to use a quote which, I feel, captures that side of autism. For more info on autism, check out Autism Speaks or Autism Society.” — Designed by Rebecca Coleman537 from the United States.

A Magnificent World538

They Told Her To Go To Sleep

“They told her to go to sleep, -Just a few pages more – she answered. And as every night, she watched the sunrise.” — Designed by Verónica Valenzuela568 from Spain.

They told her to go to sleep.569

Don’t Forget To Prank Those You Love!

Designed by Design19589 from Romania.

Don’t Forget To Prank Those You Love!590

Animals With Pets

“In the month in which we celebrate the day of lies, why not invent a little lie to say that dogs are now the masters of the world …” — Designed by Ermelindo Lopes624 from Portugal.

Animals with pets625

Shakespeare’s Birthday

“April 23 sees the anniversary of William Shakespeare’s Birthday, arguably the finest writer England has ever produced. Here’s a jolly little wallpaper featuring some of his most famous quotes.” — Designed by Daniel Rooms643 from England.

Shakespeare's Birthday644

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month668!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

(il, cm)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6×480.jpg
  7. 7×480.jpg
  8. 8×600.jpg
  9. 9×960.jpg
  10. 10×1024.jpg
  11. 11×1050.jpg
  12. 12×1200.jpg
  13. 13×1200.jpg
  14. 14×1080.jpg
  15. 15×1200.jpg
  16. 16×1440.jpg
  17. 17×1440.jpg
  18. 18×480.jpg
  19. 19×480.jpg
  20. 20×600.jpg
  21. 21×960.jpg
  22. 22×1024.jpg
  23. 23×1050.jpg
  24. 24×1200.jpg
  25. 25×1200.jpg
  26. 26×1080.jpg
  27. 27×1200.jpg
  28. 28×1440.jpg
  29. 29×1440.jpg
  30. 30
  31. 31
  32. 32
  33. 33×480.jpg
  34. 34×480.jpg
  35. 35×768.jpg
  36. 36×864.jpg
  37. 37×720.jpg
  38. 38×800.jpg
  39. 39×960.jpg
  40. 40×1024.jpg
  41. 41×1050.jpg
  42. 42×900.jpg
  43. 43×1200.jpg
  44. 44×1200.jpg
  45. 45×1080.jpg
  46. 46×1200.jpg
  47. 47×1440.jpg
  48. 48×1440.jpg
  49. 49×480.jpg
  50. 50×480.jpg
  51. 51×768.jpg
  52. 52×864.jpg
  53. 53×720.jpg
  54. 54×800.jpg
  55. 55×960.jpg
  56. 56×1024.jpg
  57. 57×1050.jpg
  58. 58×900.jpg
  59. 59×1200.jpg
  60. 60×1200.jpg
  61. 61×1080.jpg
  62. 62×1200.jpg
  63. 63×1440.jpg
  64. 64×1440.jpg
  65. 65
  66. 66
  67. 67
  68. 68×480.png
  69. 69×600.png
  70. 70×768.png
  71. 71×720.png
  72. 72×900.png
  73. 73×1050.png
  74. 74×1080.png
  75. 75×480.png
  76. 76×600.png
  77. 77×768.png
  78. 78×720.png
  79. 79×900.png
  80. 80×1050.png
  81. 81×1080.png
  82. 82
  83. 83
  84. 84
  85. 85×480.jpg
  86. 86×480.jpg
  87. 87×480.jpg
  88. 88×600.jpg
  89. 89×768.jpg
  90. 90×1024.jpg
  91. 91×800.jpg
  92. 92×1024.jpg
  93. 93×900.jpg
  94. 94×1200.jpg
  95. 95×1050.jpg
  96. 96×1200.jpg
  97. 97×1440.jpg
  98. 98×480.jpg
  99. 99×480.jpg
  100. 100×480.jpg
  101. 101×600.jpg
  102. 102×768.jpg
  103. 103×1024.jpg
  104. 104×800.jpg
  105. 105×1024.jpg
  106. 106×900.jpg
  107. 107×1200.jpg
  108. 108×1050.jpg
  109. 109×1200.jpg
  110. 110×1440.jpg
  111. 111
  112. 112
  113. 113
  114. 114×480.png
  115. 115×480.png
  116. 116×480.png
  117. 117×600.png
  118. 118×768.png
  119. 119×1024.png
  120. 120×864.png
  121. 121×720.png
  122. 122×800.png
  123. 123×960.png
  124. 124×1024.png
  125. 125×1050.png
  126. 126×900.png
  127. 127×1200.png
  128. 128×1050.png
  129. 129×1200.png
  130. 130×1080.png
  131. 131×1200.png
  132. 132×1440.png
  133. 133×1440.png
  134. 134×1440.png
  135. 135×480.png
  136. 136×480.png
  137. 137×480.png
  138. 138×600.png
  139. 139×768.png
  140. 140×1024.png
  141. 141×864.png
  142. 142×720.png
  143. 143×800.png
  144. 144×960.png
  145. 145×1024.png
  146. 146×1050.png
  147. 147×900.png
  148. 148×1200.png
  149. 149×1050.png
  150. 150×1200.png
  151. 151×1080.png
  152. 152×1200.png
  153. 153×1440.png
  154. 154×1440.png
  155. 155×1440.png
  156. 156
  157. 157
  158. 158
  159. 159×480.jpg
  160. 160×480.jpg
  161. 161×480.jpg
  162. 162×600.jpg
  163. 163×768.jpg
  164. 164×1024.jpg
  165. 165×864.jpg
  166. 166×720.jpg
  167. 167×800.jpg
  168. 168×960.jpg
  169. 169×1024.jpg
  170. 170×1050.jpg
  171. 171×900.jpg
  172. 172×1200.jpg
  173. 173×1050.jpg
  174. 174×1200.jpg
  175. 175×1080.jpg
  176. 176×1200.jpg
  177. 177×1440.jpg
  178. 178×1440.jpg
  179. 179×480.jpg
  180. 180×480.jpg
  181. 181×480.jpg
  182. 182×600.jpg
  183. 183×768.jpg
  184. 184×1024.jpg
  185. 185×864.jpg
  186. 186×720.jpg
  187. 187×800.jpg
  188. 188×960.jpg
  189. 189×1024.jpg
  190. 190×1050.jpg
  191. 191×900.jpg
  192. 192×1200.jpg
  193. 193×1050.jpg
  194. 194×1200.jpg
  195. 195×1080.jpg
  196. 196×1200.jpg
  197. 197×1440.jpg
  198. 198×1440.jpg
  199. 199
  200. 200
  201. 201
  202. 202×480.jpg
  203. 203×480.jpg
  204. 204×480.jpg
  205. 205×600.jpg
  206. 206×768.jpg
  207. 207×1024.jpg
  208. 208×864.jpg
  209. 209×720.jpg
  210. 210×800.jpg
  211. 211×960.jpg
  212. 212×1024.jpg
  213. 213×1050.jpg
  214. 214×900.jpg
  215. 215×1200.jpg
  216. 216×1050.jpg
  217. 217×1200.jpg
  218. 218×1080.jpg
  219. 219×1200.jpg
  220. 220×1440.jpg
  221. 221×1440.jpg
  222. 222×480.jpg
  223. 223×480.jpg
  224. 224×480.jpg
  225. 225×600.jpg
  226. 226×768.jpg
  227. 227×1024.jpg
  228. 228×864.jpg
  229. 229×720.jpg
  230. 230×800.jpg
  231. 231×960.jpg
  232. 232×1024.jpg
  233. 233×1050.jpg
  234. 234×900.jpg
  235. 235×1200.jpg
  236. 236×1050.jpg
  237. 237×1200.jpg
  238. 238×1080.jpg
  239. 239×1200.jpg
  240. 240×1440.jpg
  241. 241×1440.jpg
  242. 242
  243. 243
  244. 244
  245. 245×480.jpg
  246. 246×768.jpg
  247. 247×1024.jpg
  248. 248×900.jpg
  249. 249×1200.jpg
  250. 250×1200.jpg
  251. 251×1200.jpg
  252. 252×1440.jpg
  253. 253×480.jpg
  254. 254×768.jpg
  255. 255×1024.jpg
  256. 256×900.jpg
  257. 257×1200.jpg
  258. 258×1200.jpg
  259. 259×1200.jpg
  260. 260×1440.jpg
  261. 261
  262. 262
  263. 263
  264. 264×480.jpg
  265. 265×480.jpg
  266. 266×480.jpg
  267. 267×600.jpg
  268. 268×768.jpg
  269. 269×1024.jpg
  270. 270×864.jpg
  271. 271×720.jpg
  272. 272×800.jpg
  273. 273×960.jpg
  274. 274×1024.jpg
  275. 275×1050.jpg
  276. 276×900.jpg
  277. 277×1200.jpg
  278. 278×1050.jpg
  279. 279×1200.jpg
  280. 280×1080.jpg
  281. 281×1200.jpg
  282. 282×1440.jpg
  283. 283×1440.jpg
  284. 284×1136.jpg
  285. 285×1334.jpg
  286. 286×2208.jpg
  287. 287×768.jpg
  288. 288×480.jpg
  289. 289×480.jpg
  290. 290×480.jpg
  291. 291×600.jpg
  292. 292×768.jpg
  293. 293×1024.jpg
  294. 294×864.jpg
  295. 295×720.jpg
  296. 296×800.jpg
  297. 297×960.jpg
  298. 298×1024.jpg
  299. 299×1050.jpg
  300. 300×900.jpg
  301. 301×1200.jpg
  302. 302×1050.jpg
  303. 303×1200.jpg
  304. 304×1080.jpg
  305. 305×1200.jpg
  306. 306×1440.jpg
  307. 307×1440.jpg
  308. 308×1136.jpg
  309. 309×1334.jpg
  310. 310×2208.jpg
  311. 311×768.jpg
  312. 312
  313. 313
  314. 314
  315. 315×480.jpg
  316. 316×600.jpg
  317. 317×768.jpg
  318. 318×720.jpg
  319. 319×800.jpg
  320. 320×900.jpg
  321. 321×1050.jpg
  322. 322×1080.jpg
  323. 323×1200.jpg
  324. 324×1440.jpg
  325. 325×480.jpg
  326. 326×600.jpg
  327. 327×768.jpg
  328. 328×720.jpg
  329. 329×800.jpg
  330. 330×900.jpg
  331. 331×1050.jpg
  332. 332×1080.jpg
  333. 333×1200.jpg
  334. 334×1440.jpg
  335. 335
  336. 336
  337. 337
  338. 338×480.png
  339. 339×600.png
  340. 340×768.png
  341. 341×800.png
  342. 342×900.png
  343. 343×1200.png
  344. 344×1080.png
  345. 345×1200.png
  346. 346×1440.png
  347. 347×480.png
  348. 348×600.png
  349. 349×768.png
  350. 350×800.png
  351. 351×900.png
  352. 352×1200.png
  353. 353×1050.png
  354. 354×1080.png
  355. 355×1200.png
  356. 356×1440.png
  357. 357
  358. 358
  359. 359
  360. 360×480.jpg
  361. 361×480.jpg
  362. 362×480.jpg
  363. 363×600.jpg
  364. 364×768.jpg
  365. 365×1024.jpg
  366. 366×864.jpg
  367. 367×720.jpg
  368. 368×800.jpg
  369. 369×960.jpg
  370. 370×1024.jpg
  371. 371×900.jpg
  372. 372×1200.jpg
  373. 373×1050.jpg
  374. 374×1200.jpg
  375. 375×1080.jpg
  376. 376×1200.jpg
  377. 377×1440.jpg
  378. 378×1440.jpg
  379. 379×480.jpg
  380. 380×480.jpg
  381. 381×480.jpg
  382. 382×600.jpg
  383. 383×768.jpg
  384. 384×1024.jpg
  385. 385×864.jpg
  386. 386×720.jpg
  387. 387×800.jpg
  388. 388×960.jpg
  389. 389×1024.jpg
  390. 390×900.jpg
  391. 391×1200.jpg
  392. 392×1050.jpg
  393. 393×1200.jpg
  394. 394×1080.jpg
  395. 395×1200.jpg
  396. 396×1440.jpg
  397. 397×1440.jpg
  398. 398
  399. 399
  400. 400
  401. 401×768.jpg
  402. 402×864.jpg
  403. 403×700.jpg
  404. 404×800.jpg
  405. 405×960.jpg
  406. 406×1024.jpg
  407. 407×1050.jpg
  408. 408×900.jpg
  409. 409×1200.jpg
  410. 410×1050.jpg
  411. 411×1200.jpg
  412. 412×1080.jpg
  413. 413×1200.jpg
  414. 414×1440.jpg
  415. 415×1440.jpg
  416. 416×2177.jpg
  417. 417×768.jpg
  418. 418×864.jpg
  419. 419×700.jpg
  420. 420×800.jpg
  421. 421×960.jpg
  422. 422×1024.jpg
  423. 423×1050.jpg
  424. 424×900.jpg
  425. 425×1200.jpg
  426. 426×1050.jpg
  427. 427×1200.jpg
  428. 428×1080.jpg
  429. 429×1200.jpg
  430. 430×1440.jpg
  431. 431×1440.jpg
  432. 432×2177.jpg
  433. 433
  434. 434
  435. 435
  436. 436×480.png
  437. 437×480.png
  438. 438×480.png
  439. 439×600.png
  440. 440×768.png
  441. 441×1024.png
  442. 442×1200.png
  443. 443×1050.png
  444. 444×1200.png
  445. 445×1080.png
  446. 446×1200.png
  447. 447×1440.png
  448. 448×480.png
  449. 449×480.png
  450. 450×480.png
  451. 451×600.png
  452. 452×768.png
  453. 453×1024.png
  454. 454×1200.png
  455. 455×1050.png
  456. 456×1200.png
  457. 457×1080.png
  458. 458×1200.png
  459. 459×1440.png
  460. 460
  461. 461
  462. 462
  463. 463×900.jpg
  464. 464×1200.jpg
  465. 465×1050.jpg
  466. 466×1080.jpg
  467. 467×1200.jpg
  468. 468×1440.jpg
  469. 469×1440.jpg
  470. 470×900.jpg
  471. 471×1200.jpg
  472. 472×1050.jpg
  473. 473×1080.jpg
  474. 474×1200.jpg
  475. 475×1440.jpg
  476. 476×1440.jpg
  477. 477
  478. 478
  479. 479
  480. 480×480.png
  481. 481×480.png
  482. 482×600.png
  483. 483×1024.png
  484. 484×1024.png
  485. 485×1200.png
  486. 486×1080.png
  487. 487×1440.png
  488. 488×1440.png
  489. 489×1600.png
  490. 490×480.png
  491. 491×480.png
  492. 492×600.png
  493. 493×1024.png
  494. 494×1024.png
  495. 495×1200.png
  496. 496×1080.png
  497. 497×1440.png
  498. 498×1440.png
  499. 499×1600.png
  500. 500
  501. 501
  502. 502
  503. 503×768.jpg
  504. 504×864.jpg
  505. 505×720.jpg
  506. 506×800.jpg
  507. 507×960.jpg
  508. 508×1024.jpg
  509. 509×1050.jpg
  510. 510×900.jpg
  511. 511×1200.jpg
  512. 512×1050.jpg
  513. 513×1200.jpg
  514. 514×1080.jpg
  515. 515×1200.jpg
  516. 516×1440.jpg
  517. 517×1440.jpg
  518. 518×1800.jpg
  519. 519×768.jpg
  520. 520×768.jpg
  521. 521×864.jpg
  522. 522×720.jpg
  523. 523×800.jpg
  524. 524×960.jpg
  525. 525×1024.jpg
  526. 526×1050.jpg
  527. 527×900.jpg
  528. 528×1200.jpg
  529. 529×1050.jpg
  530. 530×1200.jpg
  531. 531×1080.jpg
  532. 532×1200.jpg
  533. 533×1440.jpg
  534. 534×1440.jpg
  535. 535×1800.jpg
  536. 536×768.jpg
  537. 537
  538. 538
  539. 539
  540. 540×600.jpg
  541. 541×768.jpg
  542. 542×864.jpg
  543. 543×800.jpg
  544. 544×960.jpg
  545. 545×1024.jpg
  546. 546×1050.jpg
  547. 547×900.jpg
  548. 548×1200.jpg
  549. 549×1050.jpg
  550. 550×1080.jpg
  551. 551×1200.jpg
  552. 552×1440.jpg
  553. 553×1440.jpg
  554. 554×600.jpg
  555. 555×768.jpg
  556. 556×864.jpg
  557. 557×800.jpg
  558. 558×960.jpg
  559. 559×1024.jpg
  560. 560×1050.jpg
  561. 561×900.jpg
  562. 562×1200.jpg
  563. 563×1050.jpg
  564. 564×1080.jpg
  565. 565×1200.jpg
  566. 566×1440.jpg
  567. 567×1440.jpg
  568. 568
  569. 569
  570. 570
  571. 571×480.png
  572. 572×768.png
  573. 573×864.png
  574. 574×800.png
  575. 575×960.png
  576. 576×900.png
  577. 577×1200.png
  578. 578×1080.png
  579. 579×1440.png
  580. 580×480.png
  581. 581×768.png
  582. 582×864.png
  583. 583×800.png
  584. 584×960.png
  585. 585×900.png
  586. 586×1200.png
  587. 587×1080.png
  588. 588×1440.png
  589. 589
  590. 590
  591. 591
  592. 592×480.png
  593. 593×480.png
  594. 594×480.png
  595. 595×600.png
  596. 596×768.png
  597. 597×1024.png
  598. 598×864.png
  599. 599×720.png
  600. 600×800.png
  601. 601×1024.png
  602. 602×900.png
  603. 603×1200.png
  604. 604×1200.png
  605. 605×1080.png
  606. 606×1200.png
  607. 607×1440.png
  608. 608×480.png
  609. 609×480.png
  610. 610×480.png
  611. 611×600.png
  612. 612×768.png
  613. 613×1024.png
  614. 614×864.png
  615. 615×720.png
  616. 616×800.png
  617. 617×1024.png
  618. 618×900.png
  619. 619×1200.png
  620. 620×1200.png
  621. 621×1080.png
  622. 622×1200.png
  623. 623×1440.png
  624. 624
  625. 625
  626. 626
  627. 627×480.png
  628. 628×768.png
  629. 629×1024.png
  630. 630×900.png
  631. 631×1200.png
  632. 632×1200.png
  633. 633×1080.png
  634. 634×1440.png
  635. 635×480.png
  636. 636×768.png
  637. 637×1024.png
  638. 638×900.png
  639. 639×1200.png
  640. 640×1200.png
  641. 641×1080.png
  642. 642×1440.png
  643. 643
  644. 644
  645. 645
  646. 646×600.jpg
  647. 647×864.jpg
  648. 648×720.jpg
  649. 649×800.jpg
  650. 650×1024.jpg
  651. 651×900.jpg
  652. 652×1200.jpg
  653. 653×1050.jpg
  654. 654×1200.jpg
  655. 655×1080.jpg
  656. 656×1440.jpg
  657. 657×600.jpg
  658. 658×864.jpg
  659. 659×720.jpg
  660. 660×800.jpg
  661. 661×1024.jpg
  662. 662×900.jpg
  663. 663×1200.jpg
  664. 664×1050.jpg
  665. 665×1200.jpg
  666. 666×1080.jpg
  667. 667×1440.jpg
  668. 668

The post Desktop Wallpaper Calendars: April 2015 appeared first on Smashing Magazine.

Originally posted here:

Desktop Wallpaper Calendars: April 2015


Will Ditching Your Sidebar Increase Your Profits?

Is your blog sidebar a side-thought?

When was the last time you looked at your sidebar when trying to optimize your blog?

The closest most marketers get is slapping an opt-in box at the top and calling it a day.

Does this make you lazy? No, not at all. If you’re reading this article, you’re likely the type of marketer who is always striving to be better.

But the sidebar is rarely discussed, because every guru or expert recommends the same thing. It’s thought of as a “solved” element of conversion and user interaction.

As has been shown throughout marketing history, very few things can ever be solved for long.

Will Ditching Your Sidebar Increase Your Profits?
Click To Tweet

Why Your Sidebar Doesn’t Convert

Check your analytics if you can to see how many people actually click something in your sidebar.

Your regular readers barely ever click it, while new readers might be curious the first few visits to the site.

Bryan Harris from Video Fruit has a blog known for epic internet marketing content. He saw that his readers clicked his sidebar a whopping 0.3% of the time (yes that’s 3 in 1,000 page views).

Brian Dean, a leading SEO blogger, used Crazy Egg to determine that only 1.9% of visitors click his most important sidebar element, which is unusually high:

backlinko sidebar ctr

Even if you have the most amazing offer on the other side of that sidebar link and you convert 50-100% of the clicks, that’s still an abysmal conversion rate.

Banner Blindness? Sure. But Sidebar Blindness?

Think about the blogs you visit on a regular basis. Do you commonly click on links the sidebar?

No? Why not?

Because it’s the same damn thing every single time.

At best, it’s a distraction. It takes away attention from your blog post, even if your visitor has no intention of ever clicking on the sidebar.

Google already penalizes duplicate content across a site because visitors don’t want to see the same thing over and over (although they’re more lenient for sidebars).

What is the Goal of Your Blog Posts?

The golden rule of conversion: one page, one goal.

Most blog posts are designed to capture the email address of the reader.

A busy sidebar takes away attention from the most important part of your post: the intro. It’s like trying to focus on listening to your music when there is noise in the background.

When someone lands on your post, they have a decision: should I keep reading or stop?

This infographic from Slate illustrates that decision with a large spike of readers leaving an article right away.

This is a histogram showing how far people scroll through Slate

(Image Source)

With about a million other blog posts being published every minute, there is an essentially infinite supply of competing posts.

This is why the average time a user spends on a page is decreasing every year.

average time on page

(Image Source)

You have a finite amount of time to capture a reader’s attention, and you’re just going to throw away half of it with a clunky sidebar? No, you’re not, you’re a conversion rate optimizer. You’re going to test, and find a better alternative.

Does Your Sidebar Have Any Value?

Derek Halpern says every blog sidebar needs 3 things:

  1. an opt-in form (at the top of the sidebar)
  2. links to resource pages (preferably right under the opt-in form)
  3. links to popular articles

The opt-in form collects emails, and resource pages and popular articles are useful for new visitors.

This makes sense for new readers, but what value does this add to longtime readers?

Occasionally they might look for your top posts, but couldn’t you have a single link for that in the top menu?

There are very few items in a typical sidebar that could be considered essential, which is typically a red flag that space is being wasted.

Sidebars Are Useless For Mobile

Everyone knows that mobile usage has been consistently increasing for years, and that trend isn’t changing anytime soon.

Assuming you have a responsive website (which you should), have you ever checked what happens to your sidebar on a mobile device?

Most slide down to the very bottom of the page.

After the post.

After the related or recommended posts.

After the email signup form.

After the comments.

Only the most hardcore fans will ever scroll down that far and click on something or fill out an opt-in, but they’ve already done that further up the page.

Conclusion: Most sidebars only detract from your blog on mobile.

A Bold Hypothesis: Increase Your Signups by X% to Y% By REMOVING Your Sidebar

I think it’s clear by now that on most sites, a blog sidebar might not be the most useful part of your pages.

But every blog needs a sidebar…right?

Maybe not.

Luckily, there have been a few that were not only bold enough to test removing the sidebar completely, but to also publish the results.

Case Study 1: Video Fruit

Bryan Harris already had a simplified sidebar on the Video Fruit blog. It looked like this:

videofruit with sidebar - before "remove sidebar" test

He decided to split test the original (with a sidebar), with a version that involved removing the sidebar altogether:

videofruit without sidebar - after "remove sidebar" test

The results? He was able to improve his email signup rate from about 11% to just under 14% by removing the sidebar altogether — an increase of 26%.

Most would be happy to achieve either one of those email opt-in rates. A major part of Bryan’s strategy is the content upgrade. Devesh showed how he increased his email subscribers by 492% with content upgrades a little while ago. Best of all, since these opt-ins are in the content, they convert well with mobile visitors as well.

Case Study 2: Impact Branding & Design

The team over at Impact Branding & Design also tested removing their sidebar, and ended up loving the results.

Unlike Bryan, the Impact BnD team originally had a really busy sidebar, like many blogging gurus recommend:

impact bnd with sidebar - before "remove sidebar" test

They tested removing the sidebar completely, and instead put a call-to-action lead generation form at the bottom of the post.

impact bnd without sidebar - after "remove sidebar" test

The results? A 71% increase in leads.

These are not small improvements we are talking about. A small change like removing the sidebar may make a significant improvement to your bottom line.

Next Steps: Test Your Sidebar

Start by analyzing the typical user interaction with your sidebar. Make a note of any links or parts that users most frequently find useful.

Create and complete a split test comparing your standard layout to one with no sidebar. Make sure to come back and leave a comment about how it went.

After that, you have your answer as to whether or not a sidebar works for you.

But wait, you’re not done. Remember those sidebar elements that your users found most helpful? Find a way to preserve the elements that readers use most, either by including them in the header, the content, or slightly before or after the content. Test that again and you could further improvements.

You have a chance to increase your email opt-in rates by 26-71% from a simple test. What are you waiting for?

Read other Crazy Egg posts by Dale Cudmore.

The post Will Ditching Your Sidebar Increase Your Profits? appeared first on The Daily Egg.


Will Ditching Your Sidebar Increase Your Profits?


Putting Mobile Back End As A Service Into Practice (Part 1)

In a previous article1 I introduced mobile back end as a service (MBaaS) which aims at giving app developers the ability to create seamlessly new feature-complete cross-platform native and web applications.

The next step is implementing a complete demo application using those ideas. Through this real working application, you will be able to see the areas in which MBaaS provides value. This first part will walk you through a messaging application demo powered by the Kinvey application and explore how to leverage user management, file storage and the data store.

The second part will complete the demo and demonstrate how to leverage two key pieces of Kinvey functionality: the permissions provided by the data store, and push notifications, which are enabled through the business logic functionality.

Setting Up

Before jumping into the demo application, I want to highlight a few points. First, because I am using a real app to discuss MBaaS, knowledge of the development platform would be extremely helpful. I am leveraging iOS with Swift. In addition, knowing how to integrate with back-end services would certainly be helpful, in order to understand more about what Kinvey is doing under the hood. While all of this is helpful, the application’s full source is included; feel free to analyze the code at your own pace.

Secondly, because the demo application has more of an enterprise focus (as opposed to a consumer focus), I chose Kinvey2 for the MBaaS platform. In the last article3 I walked through the process of evaluating MBaaS providers. Note that Kinvey is not a free service, and licensing terms are attached to its SDKs (as one would expect). Licensing terms are included with each SDK download. You can get more information at the following links:

A Demo Application

In the past three years, several clients have approached me about developing an internal messaging platform for their organization. This need has led to the success of such companies as Slack6 (which we use internally at Universal Mind7) and others like it. Because this was a common request, I wanted to see what it would take to implement a basic one-to-one messaging solution for an organization over top of an MBaaS solution.

To help you understand these concepts in a real application, I have provided the application’s entire source code. You can check it out on Github, “WaterCooler Demo8.”

Note: For more information on how to choose between the available MBaaS options, please see the initial article in this series, “Understanding Mobile Back End as a Service9.”

Screenshots of WaterCooler app10
WaterCooler demo messaging app. (View large version11)

Summary of Requirements

To illustrate how an MBaaS solution can power an app like this one, we need to meet a few key requirements. Users should be able to do the following with the app:

  • create an account and set up their profile (including name, title, profile picture, email address and password);
  • log in (and be required to log in only once — at least until they log out);
  • exchange one-to-one messages with other members (visible only to the sender and recipient and inaccessible to other users);
  • browse a directory of members who currently have an account on the platform;
  • log out;
  • manage and update their profile information;
  • be alerted through a push notification that they’ve received a new message.

The following sections detail how I used Kinvey to meet these requirements. While I won’t go into detail on how every part of the application was created, I will give full context of the areas where Kinvey was leveraged.

Technical Details

The demo application is an iOS app targeting iOS 8+. It utilizes Swift (Xcode 6.1.1 and iOS 8.1.3).

The user interface was created following standard UI principles for iOS. It leverages Auto Layout12 (both within the storyboard and programmatically). The creation of this interface is beyond the scope of the article, but hopefully the example code will be helpful for your iOS applications.

Getting Started With Kinvey

If you’re following along, you’ll probably want to build the source code and run the application yourself. To do this, you will need both to create a Kinvey app and to include the credentials for the app in your code.

Creating a Kinvey App and Environment

To create a Kinvey app and environment, you will need to create a Kinvey account13. After signing up, select “Get Started with Your First App.” From this page, give your app a name, select iOS and the platform, and then click “Create App.”

Screenshot of creating an app in Kinvey14
A view of the process of creating an app in Kinvey. (View large version15)

From here, you will have an app created with a single development environment. Clicking on the “Development” environment will take you to the console. In the console, you will see both your appKey and appSecret in the top right. Copy these pieces of information because you’ll need to include them in the iOS app.

Configuring the iOS Application

Once you have created your Kinvey app and gathered your credentials, grab the code from the repository. Next, open the AppDelegate.swift file and update these values in the application:DidFinishLaunchingWithOptions: method.

// Extracted from AppDelegate.swift (

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool 

 // --------------------------------------------------------------------
 // --------------------------------------------------------------------

 let appKey = ""
 let appSecret = ""



Once this is in place, you should be able to run the application as expected. If you want to run the application on a device, you will have to update the code signing as provisioning profiles (as with any iOS application).

  • For more information on setting up an iOS application with Kinvey, check out the “Getting Started16” tutorial.

User Management

One foundational element of any MBaaS is user management. This application will leverage user management to control individual user accounts and their respective profile information, as well as provide a directory of all users in the system. Just as with the rest of the functionality we will cover, this integration is provided through Kinvey’s iOS SDK17.

Sign-up, log-in and profile views18
A view of the sign-up, log-in and profile views in the application. (View large version19)

Creating a User

The first step in the process is to enable a user to create an account. When a user launches the application, they will land on the view that allows them to either log in or sign up. If the user selects “Sign Up,” they will be taken to the “Sign Up” page, which will guide them through the process of entering their profile information. When this process is complete, the code below is executed, which creates an account and logs the user into the application.

In this example, you will see the KCSUser class. This class handles the representation of a user and is also the gateway for all operations related to user management:

// Extracted from SignupViewController.swift (

// Set the parameters of the user
var userParams = [
 KCSUserAttributeGivenname : firstNameField.text,
 KCSUserAttributeSurname : lastNameField.text,
 KCSUserAttributeEmail : emailField.text,
 kWaterCoolerUserTitleValue : titleField.text

// Save the user to Kinvey
KCSUser.userWithUsername(emailField.text, password: passwordField.text, fieldsAndValues: userParams)  (user:KCSUser!, error:NSError!, result:KCSUserActionResult) in
 if(error != nil) 
 println("USER NOT CREATED - ERROR: " + error.description)
 // User created successfully
 // Do other tasks, such as uploading profile picture to the file store

In this case, the fields for first name, last name and email address are include in the KCSUser object. However, Kinvey allows us to save other pieces of data in this object as well. The user’s title will be saved in one of these additional fields. An extension to the KCSUser object is also included (as seen below) to make it easier to access this value for a user within the application:

// Extracted from KinveyExtensions.swift (

// Create a constant for accessing the title key from the user object
let kWaterCoolerUserTitleValue = "title"

extension KCSUser 
 var title:String 
 return self.getValueForAttribute(kWaterCoolerUserTitleValue) as String!

Logging In

If the user selects the option to log in from the landing page, they will be able to enter their email address and password (which they entered in the sign-up process). They are presented with an alert if their attempt is unsuccessful, and if they log in correctly, they are redirected to the main view of the application.

// Extracted from LandingPageViewController.swift (

func attemptLogin() 
 // Get the values from the form
 let username = loginEmailField.text
 let password = loginPasswordField.text

 // Attempt to log in to the application
 KCSUser.loginWithUsername(username, password: password)  (user, error, actionResult) -> Void in
 if(error == nil) 

func incorrectLoginWithError(error:NSError) 
 // Let the user know an error occurred in login. In this case
 // we just present an alert using the UIAlertController.
 let alert = UIAlertController(title: "Failed Login", message: error.localizedDescription, preferredStyle: UIAlertControllerStyle.Alert)
 alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Cancel, handler:  (alertAction) -> Void in
 self.dismissViewControllerAnimated(true, completion:nil)

 // Present the alert
 presentViewController(alert, animated: true, completion: nil)

func successfulLogin() 
 // There is already a segue defined to the main threads view.
 // We need to perform this segue if we have a successful login.
 performSegueWithIdentifier(WaterCoolerConstants.Segue.Login, sender: self)

Logging Out

From the profile management page, the user can log out of the application. Upon doing this, Kinvey’s iOS SDK also does some additional work in the background, including clearing out any cached values. In this example, after logging out, the user is redirected back to the landing page.

// Perform the log-out and send the user to landing page
@IBAction func logout() 
 performSegueWithIdentifier(WaterCoolerConstants.Segue.Logout, sender: self)

User Directory

To fulfill all of our requirements, the application also needs to provide a list of all users. A special collection, KCSCollection.userCollection(), provides access to the collection of users for an application. Once you have created a store from this collection, you can query it as you would any other data collection. The following example illustrates how to fetch all users for the application:

// Extracted from KinveyDataManager.swift (

// Create the app data store corresponding to the users collection
lazy var userStore:KCSAppdataStore = 
 let userCollection:KCSCollection = KCSCollection.userCollection()
 let store = KCSAppdataStore(collection: userCollection, options: nil)
 return store

// Fetch the users from the user store
func fetchUsers(completion: ([KCSUser]!, NSError!) -> ()) 
 userStore.queryWithQuery(KCSQuery(), withCompletionBlock:  (results, error) -> Void in
 if(error == nil) 
 self.users = results as [KCSUser]
 completion(results as [KCSUser]!, nil)
 completion(nil, error)
 }, withProgressBlock: nil)

Note: For more information on managing users with Kinvey’s iOS SDK, be sure to check out the “Users20” guide.

File Management

One powerful feature of many MBaaS solutions is file storage. In our WaterCooler application, this comes into play when a user creates an account and adds a profile picture. We could also leverage this heavily to extend the app to support the uploading of images within messages. In this process, the file is uploaded to a content delivery network (CDN) and, like any other piece of data, has a full configuration of permissions.

// Extracted from SignupViewController.swift (

// Upload the profile picture to the Kinvey file store
func uploadProfilePicture(completion:(file:KCSFile!) -> ()) 
 if(( != nil) 
 let photoData = UIImageJPEGRepresentation(, 1.0)

 KCSFileStore.uploadData(photoData, options: fileParams, completionBlock:  (file:KCSFile!, error:NSError!) -> Void in
 completion(file: file);
 , progressBlock: nil);

 } else 
 completion(file: nil);

// Once we have completed the file upload, assign the file ID to the user
// using a custom attribute
func assignProfilePictureIdToUser(user:KCSUser, picture:KCSFile, completion: () -> Void) 
 user.setValue(picture.kinveyObjectId(), forAttribute: kWaterCoolerUserProfilePicFileId);
 user.saveWithCompletionBlock  (user:[AnyObject]!, error:NSError!) -> Void in

In the code above, two distinct steps are occurring. First, we are uploading the profile picture to the file store. Once this process is completed, we are updating the user with the ID that the file store has returned. In this manner, we are leveraging yet another custom property on the user to store an identifying piece of information. Now, anywhere we display a list of users, we can also display their profile picture.

Note: For more information on working with files in Kinvey’s iOS SDK, see the “Files21” guide.

Data Model

One of the benefits of Kinvey’s iOS SDK is that it allows you to map your Swift (or Objective-C) objects to Kinvey collection objects. The KCSUser class is a special class that is already defined and mapped to the user object, but in our case we will create two additional data classes that map to conversations and the messages within them.

WaterCooler Data Model

The WaterCooler data model will have two main entities, Message and MessageThread.

The MessageThread class will be responsible for representing a conversation between two users. It will contain information about the users involved in the conversation, as well as a reference to the last message sent in the conversation.

Within Kinvey, the entityId is a special field. If you do not assign a value to it, the system will assign one when the object is saved to the data store. In our case, we will go ahead and define a special value that maps to the two users who are in a conversation for the MessageThread class. The method that calculates this value can be seen below:

// Extracted from MessageThread.swift (

// This method simply takes a user and the current user and creates
// an ID based on the alphabetized array of user IDs between these
// two users. In this way, we don't have to fetch additional information
// when displaying the message thread view.
class func threadIdentifierForUser(user:KCSUser) -> String 
 let userAIdentifier:String = KCSUser.activeUser().userId
 let userBIdentifier:String = user.userId
 let identifiers:[String] = [ userAIdentifier, userBIdentifier ]
 let sortedIdentifiers = identifiers.sorted 
 $0.localizedCaseInsensitiveCompare($1) == NSComparisonResult.OrderedAscending
 return ":".join(sortedIdentifiers)

The Message class will be responsible for tracking an individual message within an overall conversation. This class contains information about the message, including its time, contents, sender and related message thread. To get all of the messages for a particular conversation, we simply query based on the threadId of the conversation. The following code fetches all of the messages for a predefined message thread:

// Extracted from KinveyDataManager.swift (

func messagesForThread(thread:MessageThread, completion:([Message]) -> ()) 
 let query = KCSQuery(onField: "threadId", withExactMatchForValue: thread.entityId)
 messagesStore.queryWithQuery(query, withCompletionBlock:  (results, error) -> Void in
 completion(results as [Message])
 , withProgressBlock: nil)

Data Model Relationships

Kinvey supports data model relationships within both the core data store as well as the iOS SDK. In our situation, the lastMessage property on the MessageThread class is one such instance. When we fetch a thread, it looks at specific methods in our class to determine how it should handle references to other collection objects. In our case, the following methods allow it to treat this reference as a Message instance:

// Extracted from MessageThread.swift (

// This method tells Kinvey to save the message in the lastMessage property
// when the thread is saved. If this method were not included, the message
// itself would not be saved when the thread is saved.
override func referenceKinveyPropertiesOfObjectsToSave() -> [AnyObject]! 
 return [

// This maps the properties in the class to specific values in the Kinvey
// data store.
override func hostToKinveyPropertyMapping() -> [NSObject : AnyObject]! 
 return [
 "entityId" : KCSEntityKeyId,
 "lastMessage" : "lastMessage",
 "metadata" : KCSEntityKeyMetadata

// This method tells Kinvey that the lastMessage property is a member of
// the Messages collection. (You need to put the name of the Kinvey collection
// here and not the name of the class.)
override class func kinveyPropertyToCollectionMapping() -> [NSObject : AnyObject]! 
 return [
 "lastMessage" : "Messages"

// Here you tell Kinvey which class to map the lastMessage property to. This
// is how it knows how to build the object when it fetches it from the server.
override class func kinveyObjectBuilderOptions() -> [NSObject : AnyObject]! 
 let referenceMap:[NSObject : AnyObject] = [
 "lastMessage" : Message.self
 return [

Data Model Classes in Swift

For data model classes to work properly in Swift, they need to be able to leverage the default initializer. This means you need to have a default value for each property within the class. You can still leverage convenience initializers, as we have done here with the Message class:

// Extracted from Message.swift (

// This initializer creates a Message instance based on the message text
// and the recipient ID. This is the initializer that is used when a
// user creates a new message in a conversation.
init(messageText:String, recipientId:String) 
 senderId = KCSUser.activeUser().userId
 self.messageText = messageText
 entityId = NSUUID().UUIDString
 metadata = KCSMetadata(userIds: [recipientId], includeActiveUser:true)

Note: For more information on the data store and data modeling in Kinvey, see the “Data Store22” guide.


Through this process, we have completed the core of Kinvey interactions for the application. However, with all of this in place, two key requirements still have not been met: data permissions and push notifications. In the next article, we will explore the permissions model in Kinvey, as well as the business logic functionality provided by the platform.

(da, al, ml)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22

The post Putting Mobile Back End As A Service Into Practice (Part 1) appeared first on Smashing Magazine.

This article – 

Putting Mobile Back End As A Service Into Practice (Part 1)


A Step-by-Step Guide to Generating Leads With Your Content Marketing

Is your content getting the attention (and conversions) it deserves? Or is your pipeline a deserted wasteland? Image by Moyan Brenn via Flickr.

As a content marketer, you pour your heart and soul into creating awesome content. You push it out into the world…

…and then crickets.

Sometimes, the posts you worked on the hardest don’t get much attention. And even posts that get traffic just don’t convert.

Today I’m going to show you how to generate leads with your content.

When you finish this article, I want you to be able to say, with confidence, that you can create a valuable piece of content right now, distribute it to the right people and attract those people back to your blog to convert.

You will be able to do this without:

  • A big budget
  • A full-blown marketing team
  • Extensive background knowledge of the process (because I’m going to walk you through each step)

No more writing article after article hoping website visitors will eventually start seeking out your business.

And it starts…

Right now.

Part I: Driving Traffic to Your Content

Traffic is the lifeblood of any website.

This is especially true for a website that’s trying to generate leads.

Your traffic needs to be made up of potential customers. They need to be people who will actually want the products and services you offer.

One of the best ways to qualify traffic is to create and distribute content that solves the same problems your products and services do.

Content attracts people who have a need to consume it. To attract your ideal customers, create content based around the needs your business fulfills.

After you’ve created this content, you need to get it in front of people’s eyes and drive traffic with it.

To do this, we’re going to use four different strategies:

  • Twitter
  • Forum marketing
  • Quora
  • BuzzBundle

An advanced technique to drive traffic with Twitter

Using the tactic I’m about to show you, I got a 180% increase in traffic from Twitter over a three-week test period. Check out my acquisition data in Google Analytics:

Twitter Traffic

I don’t have a large following and I didn’t do any paid promotion. Best of all, this entire technique is automated. I set it up once and didn’t have to anything for three weeks.

(Hat tip to Robbie Richards. This is a combination of two techniques laid out in one of his articles.)

1. Calculate the best times for you to post on Twitter

With the help of a service like Tweriod, you can get to know when your followers are most likely to interact with your tweets.

2. Grab the headline of each article you want to post on Twitter and paste them into a spreadsheet

You’re going to create multiple unique tweets for each article. The more tweets you create, the more times you can post the article without annoying your followers.

Twitter Snippets

When you publish a new piece of content, try tweeting it out twice a day for two weeks and once a day for the rest of the month. Since your followers aren’t all online at the same time of the day, this maximizes the amount of people you reach with your tweets.

If you’re struggling to come up with tweets, use this copywriting formula from Copyblogger.

3. Find related articles that your audience will love

Next, head over to Buzzsumo and type in a keyword related to one of your articles. This’ll bring up a list of popular articles related to that keyword. Grab the URL of one of the top shared articles and paste it into your spreadsheet.

Do this for each of the articles you want to share on Twitter.

4. Append your articles to those posts using

Once you’ve got all of these highly shared articles, head over to and append one of your articles to each one. will generate a separate URL for each of the highly shared articles. This separate URL will have your article’s URL attached to it, as well as your picture, a short description and a call to action button that links to your content (as shown in the screenshot below).

Click for larger image.

5. Schedule the posts with the CTAs

Finally, use Buffer or Hootsuite (or whichever scheduling tool you use) and automate all of your articles and the URLs to be shared on Twitter, based on the best times for you to post.

When users click on your link, there’s a chance they’ll click over to your content as well.

By choosing articles that are already proven to get tons of clicks, you give your article the potential for even more exposure.

Not only will you attract the right people with your content, but you’ll drive traffic while you sleep.

How to drive targeted traffic with forum marketing

There are forums for almost any niche or topic, and they’re jam-packed with ideal customers.

First, find a forum related to your niche. To do this, Google search strings like:

“Your niche” + “forum”

“Your niche” + “powered by Vbulletin”

This should bring up a list of forums.

First, you want to find a forum that’s active. Go through each forum and look at these metrics:

  • Go to the “New Posts” section and look at how recent the posts are.
  • Look at how many views each thread is getting.
  • Look at how many replies each thread is getting.

These indicators will tell you whether the forum is active.

After that, make an account and edit your signature. The signature is going to be the gateway to your content.

Forum Marketing Signature

Use some compelling copy to entice people to click to your content, and link to your content at the end.

For example, if I were to drive traffic to the article you’re reading right now, I would create a signature like this:

Struggling to get concrete results from your content marketing campaigns? Check out my 2,500-word article showing you how to generate leads directly from your content, right here.

Finally, go through the forum and answer people’s questions with in-depth answers. Be as helpful as possible. Do this for an hour or so per day, and you’ll drive consistent targeted traffic to your content.

Try to be one of the first posters on a thread. If the thread gets popular, your post (and your signature) will be one of the first ones people see over and over again.

Using Quora to drive traffic

Similar to forums, people are hanging out on Quora searching for the information your content provides.

All you have to do is get on there and show it to them.

The person who wrote this case study found a lot of success on Quora for a small amount of work, and Quora sends me about 48 visitors per three hours of work answering questions. This equates to 16 visitors per hour.

And as I will note later, the more questions you answer, the more potential your traffic has to compound.

So how do you get started?

  1. Head over to Quora and create an account. Beef up your profile with social proof about what you know, your interests, etc.
  2. Then, use their search bar and enter a keyword related to your most valuable piece of content.
  3. Go through and provide unique and in-depth answers to people’s questions. At the end of each answer, link to your content as the natural next place to get more information – like I did here:
Quora Traffic Answer
Here is the thread for the screenshot above, so you can see this in context.

Many of those threads still get views years later. This means the more questions you answer, the more potential your traffic has to compound.

Engage your target audience directly with BuzzBundle

BuzzBundle is a tool that allows you to interact with your target audience directly on various channels. You can use it to find people who are asking questions related to your content. When appropriate, your answers can then direct them to your content.

Here’s how it works.

  1. First, you enter in all of your profile information for Facebook, Twitter, forums, Yahoo Answers, your blog, etc. This is what lets you post replies to people straight from the program.
  2. Then, enter in the keywords you want BuzzBundle to search for. Here’s what I inputted when I was driving traffic to a recent lead generation article:
BuzzBundle Keywords

I chose keywords like “lead generation,” “attract leads,” and “lead generation strategies,” so BuzzBundle would pull up conversations where I might be able to introduce my article.

Once you’ve inputted your keywords, it scours social media sites, blogs, Q&A sites and forums for the keywords you inputted. You can then join those conversations and direct people back to your content.

The free version of the software limits you to about 50% of the overall conversations happening. The paid version gives you full access.

Here’s what the interface looks like after BuzzBundle has searched for my keywords:

BuzzBundle Interface-560
Click for larger image.

You will notice that all of the highlighted words are my keywords. These are all tweets, Facebook posts, forum threads and Yahoo answers where people are discussing a topic directly related to my content.

Now, all I have to do is go in there and direct people to it, like so:

BuzzBundle Engagement 1

That can lead to a nice reply (and probably a click through to your website):

BuzzBundle Engagement 2

And a new follower:

BuzzBundle Follower

(This happened as I was writing this article.)


You can use BuzzBundle to send people to your content, landing pages, products, services – anywhere you want to convert visitors.

Part II: How to Capture the Traffic that Arrives

Now that you know how to drive traffic with your content, let’s learn how to capture it.

Here are three of the best ways:

  1. Pop-up forms
  2. Content upgrades
  3. Landing pages

Pop-up forms

Many people denounce pop-up forms, saying they’re intrusive and diminish user experience. However, the numbers can tell a different tale.

Case study after case study reveals the impact pop-up forms can have on sign-up rates. For instance, WP Beginner was getting 70-80 subscribers per day before installing a pop-up form. After installing one, that number jumped to 445-470 per day – a 600% increase!

As usual, you still need to give visitors a compelling reason to subscribe. And just because it works for some people, doesn’t mean it will work the same for you.

Test whether the increase in signups is worth the possible decrease in user experience. One way is to run a pop-up form for a month and compare your lead increase with the change in user experience signals, like bounce rate, time on site and pages visited.

Then, compare that month with the previous month and decide whether a pop-up form make sense for your site.

For your first pop-up form, I recommend the SumoMe List Builder App, mainly because it’s easy to set up.

And it’s free.

Content upgrades

Content upgrades are opt-ins embedded within the body of your content.

I first learned the power of content upgrades in this case study by Brian Dean. He got a 785% increase in subscribers with just two content upgrades on his site.

They give the reader bonus material related to the article they’re reading. In exchange, the reader gives up their email address.

Here’s an example of a content upgrade:

Content Upgrade SumoMe

For this type of content upgrade, an opt-in form pops up when someone clicks on it, like this:

Content Upgrade Pop-up SumoMe

Here’s why content upgrades are so powerful:

Readers can ignore your sidebar.

They can ignore a form at the end of your posts.

But they can’t ignore an opt-in they’re forced to scan over as they’re reading. If they’re reading your article and a CTA appears mid-way, they have to look at it. Their eyes can’t avoid it.

Offer more value

To make content upgrades as successful as possible, literally “upgrade” the content they’re reading by giving away additional learning materials or resources in exchange for contact info.

This could be checklists, ready-made spreadsheets, a private master list of resources, bonus strategies and tactics – anything of value related to what they’re reading.

One of the easiest content upgrade services I’ve come across is the SumoMe Leads App. It’s a paid service, but their free trial will be more than adequate to get you started.

If you’re looking for a 100% free option, I created my own content upgrades simply by linking to a landing page at various points in my articles.

Content Upgrade Link

So that’s an alternative you can try.

Landing pages

Landing pages have one goal:

Convert visitors into subscribers, leads and customers. In other words, they’re designed to capture traffic.

You should create landing pages for every key conversion you want to make, and design your site to direct traffic to those pages.

One way to do this is to combine your landing pages with the previous strategy (content upgrades). For instance, I’ve got links to landing pages spread out twice in one of my cornerstone articles. Here’s one of them:

Landing Page Content Upgrade

That link then takes people to this landing page:

The landing page I link to from one of my cornerstone articles currently converts at 24.29%.

Including links to landing pages helps you convert more of the traffic that arrives to your content.

If you want to learn how to create high-converting landing pages, check out Unbounce’s seven-day lead gen landing page course.

One More Crucial Tactic

Without this final tactic, none of the above strategies will be as successful as they could be.

The final tactic involves the content you create, why you create it, and how it impacts the lives of the people you create it for. This is what I call genuine content marketing, and it’s crucial to the success of your marketing campaigns.

Think about it this way: Your traffic generation and lead capturing tactics make up the fishing rod and the hook. Your content is the lure, and as any avid fisherman will tell you, if you don’t have an attractive lure, your rod and hook won’t do anything for you.

To implement genuine content marketing, think about the impact your business has on people’s lives. Consider the why behind everything you do and then let that shine through your content.

Frame yourself as a teacher rather than a business. Provide free value so people build trust in you and your brand. Become a trusted advisor rather than a marketer. Help your prospects as much as possible with the free content you produce and distribute, and when they’re ready for your services, they’ll know exactly who to go to.

Have you used similar tactics to generate leads? Let me know in the comments below. I’m happy to discuss them.

– Michael Karp

BuzzBundle Engagement 1

Continue reading here: 

A Step-by-Step Guide to Generating Leads With Your Content Marketing

How To Keep Framework Development Simple And Bug-Free

It’s just like that for your product, too: people rely on our products to work. Bugs erode trust, which in turn loses customers. So when we began updating Foundation, a responsive CSS framework, we wanted to ensure everything worked. Thoroughly. We know that many people rely on our software for their work, and maintaining that trust is paramount.
In this article you’ll learn our methodology for testing responsively, not just on a case by case, page-from-PSD comp.

Original article:

How To Keep Framework Development Simple And Bug-Free


CRO School: 3 Questions You Must Ask to Boost Content Conversions

Does too much content equal lower conversions? That’s certainly what Joe Pulizzi of the Content Marketing Institute (CMI) seems to think.

He says that content marketers are publishing too much and that’s why many content marketing initiatives fail to achieve the goals set.

3 Questions to Ask to Boost Content Conversions

Image: Pixabay

The article also says that his research for a planned book showed that the most successful marketers are focused on a single main channel order to achieve success.

In contrast, many marketers spread their content on around 5 social media channels and use up to 12 different content tactics. According to Pulizzi this results in:

  • no audience loyalty
  • no real following on any single channel
  • poor content which then fails

His conclusion: Less is more. It’s better to focus on a single channel and make that channel work before expanding to another one.

Since content is such a key part of interacting with customers, I think this advice works for your website as a whole, and not just for the content. In other words, instead of spreading yourself too thin, you can focus on your customers and do one core thing extremely well to increase conversions.

Delivering the right content is a huge part of this.

To make it work harder and better for you as part of a holistic approach, you need to understand your customers, and that means answering three main questions:

  • Who’s reading your content?
  • Where are they looking for your content?
  • What information do they need?

Nail those, and your content and website will convert better.

How to Set Yourself Up for High Converting Content
Click To Tweet

Who is Reading Your Content?

Who is Reading Your Content?

Image: Pixabay

The more you understand about your audience, the more likely you are to be able to create content that targets them specifically, enhancing the potential for increased conversions. Believe it or not, you are probably already collecting a lot of the data you need.

Let’s start with Google’s Universal Analytics product, which provides in-depth information on audience demographics and interests. You will have to enable this, but once you do, you can find out the gender and age of your customers, as well as their main interest areas.

Add that to the reports on location, technology and more, and you can create useful customer personas for better content targeting.

That means that, for example,  instead of creating web content for women, you can create content for female technology users under 30. That’s got to help you attract your target market.

Mixing specifically targeted content with broader content gives you two chances to reach your audience. And the more you do this, the better you will be able to identify them.

“Mixing targeted with broader #content gives 2 chances to reach your audience.” @SHurleyHall
Click To Tweet

Then there’s social media analytics.

Everything you do online helps refine your image of who your customers are. Analytics from Twitter, Facebook Pages, LinkedIn, Pinterest and other social media sites show you (sometimes in great detail) who is looking at your content and what they do when they see it. Put all this together you have a head start on boosting conversions.

Here are a few guides to help with this:

Where Are They Looking?

Where are customers looking for content?

Image: Pixabay

You can build conversions beyond your website too, by figuring out where your customers are likely to be searching for information and making sure you have info there too.

The social media analytics mentioned earlier can help with this, as can the social reports in Google Analytics. No matter what your industry, the people you want to reach are likely to check you out on social media and look there for peer recommendations.

While you don’t want to spread yourself thin, making sure that your content appears on the site where MOST of your audience is will help improve the conversion funnel. That also makes it easier to help them help you: including sharing buttons for the most used sites means they can easily tell their friends, who might be looking in the same places.

As Moz points out, marketing in the right places early in the funnel can actually create opportunities and better conversions, so don’t miss your chance.

“Marketing in the right places early in the funnel creates #conversions”
Click To Tweet

What Are They Looking For?

wow with your content

Image: Pixabay

Once you know who’s reading and where they hang out, the third part of creating high-converting content and websites is to figure out what they want from you and whether you are delivering it.

One great tool to help you establish this is the Visitor Flow report in Google Analytics. This is a powerful tool which Search Engine Watch calls a conversion optimization secret weapon.You can use it to see what brought people to your site (search, referrals, keywords and so on), where they landed and where they went next.

In fact, you can follow several on-site interactions. If people search for a phrase on your site, then stick around because they have found the answer, you can see that. And you can also see whether they encounter errors or leave your site to find information elsewhere. It’s an excellent way to find out if your content and site are missing the mark.

For even more insight, use advanced segments and get additional insights from keyword data in Google Webmaster Tools.

One other area you must address is landing pages.

As Social Media Examiner points out, if you send people from your social media page to an offer, then they must be able to see the offer the minute they land on your page. This may seem like a no-brainer, but it’s amazing how often it fails to happen.

Finally, never underestimate the power of a direct question. If you want to know what customers want, just ask. Use a customer survey so they can tell you what they want in their own words.

Bottom line

Instead of having too much content, use the tips above to target your content to the right people on the right sites at the right time. That’s a surefire way to make content convert better.

Otherwise, Pulizzi may have called it. Your content could be causing lower conversions.

Read other Crazy Egg articles by Sharon Hurley Hall.

The post CRO School: 3 Questions You Must Ask to Boost Content Conversions appeared first on The Daily Egg.

View post: 

CRO School: 3 Questions You Must Ask to Boost Content Conversions


The 3 Most Common A/B Testing Problems (And How to Solve Them)

Michael Aagaard
Michael Aagaard descends upon the Earth to share his otherworldly CRO knowledge with us.

If you’re reading this blog, you’re probably at least thinking about running your own A/B tests. Maybe you’ve got some live right now. But are you really getting results that will help your business perform better? Would you know if you weren’t?

When we wanted answers to the pressing questions that marketers have about A/B testing, we brought them to one of the most passionate, insightful and statuesque people in the industry: Michael Aagaard, Senior Conversion Optimization Consultant at ContentVerve.

Read on to discover how to run tests that will give you accurate, actionable results — and what to do when you can’t.

1. When is it safe to declare a champion in an A/B test?

It can be tempting to roll out a winning variation as soon as you start to see a lift in conversions, but it’s crucial that you don’t jump to conclusions before you see the bigger picture. In Michael’s words:

You need to include enough visitors and run the test long enough to ensure that your data is representative of regular behavior across weekdays and business cycles.

The most common pitfall is to use 95% confidence as a stopping rule. Confidence alone is no guarantee that you’ve collected a big enough sample of representative data. Sample size and business cycles are absolutely crucial in judging whether your test is cooked.

The way someone is feeling while browsing the web on a Monday morning (groggy), Friday afternoon (“TGIF!”), or over Sunday brunch (leisurely) can affect your conversions. And it’s not just the day of the week that matters — depending on what you sell and how you sell it, the difference in behaviour between the first and last weeks of the month could be enormous.

Michael himself runs tests for four full weeks, with a minimum of 100 conversions on each variant and a 95% confidence level being prerequisites for declaring a champion. He then uses this calculator to check the statistical significance of his results.

Despite his own methodology, Michael stresses that there’s no one-size-fits-all rule for declaring a champion:

In my experience there is no such thing as “best practice” or a universally applicable set of rules that work every time. The closest thing is a solid data-driven process.

Focus on covering both a large enough sample size and a long enough duration of time to ensure that you’re getting a complete view of the page’s performance before calling it.

2. How do I run an A/B test if I don’t have enough traffic?

We often talk about conversion rate optimization and A/B testing as if they were one and the same. And while that’s true on some level — if you can test, you must test — it’s also true that A/B testing isn’t always a viable option.

Running A/B tests on low traffic pages can actually be dangerous, as Michael explained:

Small samples are easily affected by changes in the dataset. If you have a sample of a few hundred visitors in total, a single conversion can shift results dramatically.”

Okay, so what? Just run the test until you eventually have a big enough sample, right? Well, you could be waiting a while.

Let’s say you want to run a test with two variations. If the current conversion rate is 3% with 100 daily visitors, and you want to detect a minimum improvement of 10%, you’ll need to run the test for … 1035 days. Ouch!

Ouch, indeed. So what can you do?

For starters, do your homework

It might be tempting to Google “landing page best practices” and just do whatever comes up. And an article from Unbounce is the first result, so hey, you could do worse. But if there’s one piece of advice you take from Michael, it should be this:

When you can’t A/B test properly, it’s even more important to spend time doing qualitative research and validating your hypotheses before you implement treatments on the website. The more homework you do, the better the results will be in the end.

Unlike quantitative analysis — essentially making decisions based primarily on numerical data — qualitative analysis attempts to measure the more nebulous qualities of something.

If quantitative analysis tells us what happens, qualitative analysis tells us why it happens. Here are two types of qualitative analysis you can try:


In a ConversionXL piece on qualitative analysis, Michael wrote that “interviewing customers and stakeholders is without comparison the most insightful qualitative research method in my CRO toolkit. In my experience nothing beats actually talking to your target audience.”

High-converting landing pages address a visitor’s need as quickly as possible, in language they can understand and relate to. What better way to find out how than to have them tell you themselves, in their own words?

We asked Michael to elaborate:

I’ve been involved in several optimization projects where customer interviews revealed that the core value proposition was fundamentally flawed. Moreover, the answers I got from these interviews got me much closer to the winning optimization hypothesis.

Use interviews with customers and stakeholders as inspiration for your test hypothesis.
Click To Tweet

Case studies

Seeing what’s worked well for others is a great way to discover your own path. But knowing what works isn’t as important as knowing why it worked.

Michael’s written about finding actionable insights within A/B testing case studies on the Unbounce blog before:

When you read a case study in which someone got a conversion lift by, say, changing their CTA button color from red to green, it means that the person who performed the test found out that a green button performed better on their landing page.

It does not mean that green buttons will always perform better than red ones on all landing pages forever.

Instead, use case studies as an inspiration to help form a test hypothesis:

By changing ______ to ______, I can get more prospects to ______ and consequently increase conversions.

Michael shares a simple approach to developing your A/B test hypothesis.

Instead of worrying about changing from red to green or green to red, think more in terms of what impact those colours actually have.

By changing my current button colour to one that contrasts more against the rest of the page, I can get more prospects to notice my CTA and consequently increase conversions.

Don’t copy A/B case studies; use them as inspiration to form a strong test hypothesis.
Click To Tweet

3. How do I know if my conversion rate is “good”?

Conversion rates are fickle things. They can fluctuate frequently due to something as minor as the time of day, to major shifts in your competitive landscape.

Ultimately, it’s important to remember that your goal isn’t a higher conversion rate; it’s whatever that higher conversion rate will enable you to do. As Michael put it:

If you run a business, it’s not really about improving conversion rates, it’s about making money. So instead of asking yourself “Is my conversion rate good?” you should ask yourself “Is my business good?” and “Is my business getting better?”

The purpose of improving your conversion rate is to impact other, more tangible metrics in your business. Michael reminds us to look past the conversion rate, and focus more on things like lead quality, profit and revenue.

If an increased conversion rate doesn’t translate to increased business success, it isn’t a win.
Click To Tweet

Your business is unique. Your tests should be, too

The recurring theme when speaking with Michael about A/B testing was that there are surprisingly few hard-and-fast rules. Much like his advice regarding qualitative analysis, context is always key.

Do your research. Run the right kinds of tests for your business. And don’t just look at your conversion rate — look at how that conversion rate impacts the rest of your business.

April 9th is International CRO Day, and Michael is just one of more than 50 (!) speakers who will be giving free online talks on conversion-focused marketing. Don’t miss your chance to get some of the best, most actionable and so-totally-free advice on CRO you’ll ever hear.

– Brad Tiller

Michael Aagaard

See the original post: 

The 3 Most Common A/B Testing Problems (And How to Solve Them)