“There Are More Bugs In Mobile Than… Particles In The Universe!”

Mobile is a difficult, unpredictable beast. If you run into technical problems in mobile, then you’ll know how annoying fixing them can be. That’s why we’ve teamed up with Peter-Paul Koch to create The Mobile Web Handbook, our practical new guide to dealing with front-end challenges in mobile. The book is finally ready and is now shipping worldwide. It’s available in print or as an eBook.
Get the bookPrinted, gorgeous hardcover $9.

View original article: 

“There Are More Bugs In Mobile Than… Particles In The Universe!”

Desktop Wallpaper Calendars: October 2014

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 six years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

Link to original:

Desktop Wallpaper Calendars: October 2014


6 Ways Social Proof Can Increase Conversions On Your Site

In February 2004, Facebook was a small and unknown website, used only by Harvard students. By summer, they had expanded to other Ivy Leagues, but they were still pretty small.

Typically, VCs don’t invest in companies that are so small and have no idea how they’re going to make money. Watch Shark Tank or Dragon’s Den to see how brutal they can be on budding entrepreneurs who think they have got a million-dollar idea. For all purposes, Facebook was still an idea during the summer of 2004.

If you’ve seen the movie “The Social Network,” you know what happens next. In walks successful entrepreneur Sean Parker. He uses his clout to set up a meeting with billionaire investor Peter Thiel, who then invests in the fledgling company.

At a whopping valuation of 5 million dollars!

That’s the power of social proof. And this power can be replicated on your site to increase your conversion rates. Let’s see how.social proof - placeit


The Crazy Egg homepage just has two elements. The first is the ‘free heatmap’ URL box, which brings visitors into their free trial. The second is a block of customer logos.

Crazy Egg social proof

Multi-nationals and household names like Intel and Yahoo are just a few of the 200,000 businesses using Crazy Egg. These companies are very careful about the software they use so the fact that they use Crazy Egg must mean something.

If you have clients or customers that are well-known in your industry, displaying their logos on your website will send a signal to visitors that you are worth investing in.

One of the changes Voices.com made to their homepage to increase conversion rates by over 400% was to add a row of customer logos. The social proof went a long way to impressing visitors and converting them into customers.

Voices.com social proof

Logos also work if you have impressive partners. They need not use your product or service, but the fact that they work with you lends credibility to your business.

Cook Travel, a corporate travel agency, partnered with reliable airlines like Virgin and Air France to negotiate bulk discounts on tickets. They used their logos on their site and increased their conversion rates by 48%.


Product reviews are integral to ecommerce sales. It’s no secret that adding reviews to your product pages increases conversion rates. In fact, a study conducted by Forrester and Jupiter Research found that 77% of customers read reviews before they purchased something online.

In an experiment conducted on Figleaves.com, it was found that products that had reviews had a 12.5% higher conversion rate than those that didn’t. The more reviews a product had the higher the conversion rates were, with an increase of 83.85% for 20+ reviews.

Authentic reviews signal to consumers that others have used your product and that it has worked for them. Showing reviews from real people, and including negative reviews, builds trust as well.

By merely adding a reviews widget to their product pages, Express Watches increased sales by 58.29%. On their site they made claims that their watches were authentic and came with a warranty, but consumers were still not convinced. Once they saw reviews by other customers, it became clear to them that this was the real deal.

Express Watches social proof


A testimonial is almost like a recommendation and works best if an authority figure provides it. Peter Thiel invested in the fledgling Facebook because of recommendations from Reid Hoffman and Sean Parker.

As with logos, the more well known the person giving the testimonial, the better it will perform. He or she needs to be an influential person in your industry to impress your audience.

For example, Noah Kagan targets entrepreneurs on his blog OkDork. He got Hiten Shah and Andrew Warner, two successful entrepreneurs, to write testimonials for him.

Noah Kagan social proof

The important part about these testimonials is that they aren’t generic. They don’t just use empty statements like, “Noah is the best!” These can actually do more harm than good. Instead, they are tailored towards Noah’s audience and explain why you should join his email list.

Now you may not have industry leaders using your product or service but that doesn’t mean you can’t try using testimonials on your site. Ask your existing customers to say something about you and test how it works on your site.

WikiJob used three simple quotes from customers on their homepage and saw an increase in conversion rates of 34%. The testimonials were very bare bones and didn’t even have names attached to them. It might backfire in some cases, but luckily for them it worked.

WikiJob social proof

Testimonials can be used on e-commerce sites too. Onnit sells sports nutrition, so their customers are athletes and sport people. They got some big names in the industry, including well-know trainers, sports champions and doctors, to use their products and give a testimonial. Instead of using reviews on their product pages, they use these testimonials.

Onnit social proof
You’ll notice they also have a short video testimonial. This makes the testimonial even more believable than just a name. You might be able to fake a quote, but an actual video with the athlete holding your product is hard to fake.

Case Studies

Case studies are extremely powerful, especially when you make claims about how your product or service can help people.

Have a look at Neil Patel’s consulting service. Neil says that his services will make you more money. Work with him and you’ll end up richer. It sounds like an outrageous claim, so Neil backs it up with solid evidence in the form of case studies.

Neil Patel social proof

Again, Neil has worked with some big names in the industry so it’s even more impressive that he has helped them make more money. The underlying message here is that even profitable companies go to him for help, and they get tangible results. That’s social proof you can’t ignore.

When creating case studies, make sure to include actual data. If your product helps companies increase conversion rates, show what their rates were before they used your product, and what the rates became after. Include a problem statement, how your product solved the problem, and then the final results.

Try to publish a variety of case studies, each one highlighting a different benefit of your product or service. When potential customers come to your site, they’ll look for the one that most resembles their problems.

Fitbit creates case studies in the form of success stories. Each story shows how a customer used their fitness tracking devices to lose weight and become more active. The stories are inspirational and they in turn convince other consumers to buy the product.

Fitbit social proof

Social Media Popularity

The number of fans, followers and mentions you have on social media is proof of your popularity. In some cases, strength in numbers beats out other forms of influence when it comes to conversion rates.

Betfair ran tests on their website to see how different forms of influence affected their conversion rates. Their regular landing page, the control, had a call to download their mobile app.

Betfair social proof

The variations were reciprocity, scarcity, and social proof. All three variations did better than the control, but the social proof variation performed the best with a conversion rate increase of 7%.

Share buttons and social media boxes are other ways to show off your fan following. If you look to the left of this post you’ll see a floating bar with share numbers. To the right you’ll see a section called ‘Stay Connected’ where it displays the number of likes this blog has on Facebook.

On the flip side, having very low social media numbers can actually hurt you. You don’t want your Facebook fan box telling visitors that only one person likes your business and that it’s your mom. People might assume that you’re too new and too risky, or that your product doesn’t work.

Media Mentions

Much like high-profile testimonials and customer logos, getting covered by media adds social proof by implying that they vouch or you. It’s why so many startups pitch themselves to TechCrunch. One mention of their app and they get a huge traffic boost.

Here’s another example from Neil’s website. He has pulled quotes from news mentions on sites like Entrepreneur Magazine, Forbes and Wall Street Journal. These are universally read publications and trusted sources for business news.

Neil Patel social proof

You may not be covered in the press like Neil, but even blog mentions can help. If you’ve landed guest posts on a popular blog, or even been mentioned by them, you can try displaying their logos on your site.

 Show Us The Proof

Get it? You show customers the social proof and they’ll show you the money. Try out some of the above methods and see if they improve your conversion rates. Then come back here and post the results in the comments!

Are you using other forms of social proof on your website?

Read other Crazy Egg articles by Sid.

The post 6 Ways Social Proof Can Increase Conversions On Your Site appeared first on The Daily Egg.

Originally posted here:  

6 Ways Social Proof Can Increase Conversions On Your Site


5 eCommerce Fails and Fixes


Recently, I shared the reasons why Amazon is so successful from an eCommerce point of view. Wouldn’t it be great if everyone had that good an experience everywhere?

Sadly, on many sites the shopping experience leaves a lot to be desired, but it doesn’t have to be that way. Here are some of the common eCommerce fails shoppers encounter, along with tips on how websites could do better.

5 ecommerce fails and fixes

Image: Pixabay

Fail #1. There’s No Trust

Before people buy anything, they are consciously—and unconsciously—assessing the website. As we know, first impressions count and if a site looks shady, people will go elsewhere. No reputable website should look as though you’re operating it from your garage (even if you are).

The Fix

Invest in a professional site design and include trust signals on your site such as contact information and your business address and phone number so shoppers can know who’s behind the site.

Place safe shopping logos and web security badges prominently on your site so people know the information they enter will be secure. The research suggests that these really work to reassure shoppers. And make sure there are product reviews so there’s plenty of social proof.

Fail #2: Poor Site Navigation

Before people can buy, they need to find the information they are looking for. In fact, the minute people land on your site, they will be wondering if it will be easy to find what they want.

A cluttered site design or poor navigation and search features will send shoppers away. Research from Nielsen Norman Group shows that even when sites get it right only 64% of users find what they want the first time.

The Fix

The Lemonstand blog suggests making it easy for people to find what they want with search autosuggest, category filters, searchable categories and more. And here’s a bonus tip: make sure your site is set up for mobile eCommerce so that shoppers can find what they want easily even if they are using mobile devices.

ecommerce site

Image: Place.it

Fail #3: Lack of Payment, Shipping and Returns Information

One major annoyance on eCommerce sites is when you can’t figure out how much the item is going to cost. Tiny or hidden prices don’t help anyone, least of all the eCommerce retailer.

Another pet peeve is adding on other services (something certain web hosts are famous for). All that does is annoy customers, because no-one wants to end up paying double because they weren’t paying attention. Customers also want the security of knowing how they can return a product if it’s not right.

The Fix

Make shipping and returns information transparent and consider offering free shipping. Two studies show that this is a deal-breaker for either 73% or 93% of shoppers. And if you can’t do free shipping, here are some tips to improve your pricing.

And finally, a personal plea: wouldn’t it be great if you could pay by Paypal (or your online payment gateway of choice) on every eCommerce site?

Fail #4: Shopping is Difficult

There are some experiences that can really ruin an online shopping experience. Here are a couple of stories to illustrate them.

The other day, I was looking for a gadget and thought I’d found what I wanted on the site. I had to set up an account before I could buy (another fail) and dutifully filled in all the form fields, or so I thought. When I hit “submit,” it turned out I’d missed one and all the information I’d entered had disappeared. Since I had other things to do, I left the site and later shopped somewhere else.

On another occasion, I browsed another site and added items to the cart, but when I completed the account signup process, all the items were gone and I had to start again. A quick poll suggests that this is another easy way to lose customers.

A third annoyance is when you fill out a form and can’t tell whether it has been successful or not. If you’re making a payment, you need to have this information before trying again.

The Fix

Each of these situations has an easy fix. To solve disappearing information and mysteriously emptying shopping carts, what you need is a persistent shopping cart. Not only will this help at the time of purchase, but it will fuel later purchases too. Research shows that 56% of people save items intending to come back to them later so a persistent shopping cart could help you sell more.

Letting people know they have successfully completed an order just requires a thank you message. And, if you follow Amazon’s example, you can use the page to highlight other items shoppers might like.

Oh, and the account setup thing? Smashing Magazine suggests that e-tailers fix this by letting shoppers complete the order and only then offering them the option to save the info they have already entered for future purchases.

ecommerce checkout

Image: Place.it

Fail #5: Checkout Woes

Waiting to complete a transaction online can be painful—and it’s a point of weakness for eCommerce websites. Research from Invesp shows that 11% of shoppers abandon the process because it is too complex and 11% abandon the site when it is too slow. A further 5% leave if the website crashes.

Other research shows that 67.4% of shoppers abandon their carts. And what’s worse is that people usually think they are waiting longer than they are. All of this adds up to a big problem which could seriously hurt conversions and sales.

The Fix

Make the checkout process as simple and speedy as possible, removing all potential barriers to completing the purchase. Optimize off-page to reduce page load times and help shoppers by including a progress bar (there are some examples here) that lets them know how far they are into the shopping process.

These aren’t the only eCommerce fails, but they are some of the most annoying. For even more advice, check out our definitive guide to shopping cart abandonment and tips on improving usability on eCommerce sites.

See other Crazy Egg articles by Sharon Hurley Hall.

The post 5 eCommerce Fails and Fixes appeared first on The Daily Egg.

This article is from:

5 eCommerce Fails and Fixes


Size Matters: Balancing Line Length And Font Size In Responsive Web Design

As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.

The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.

How People Read

People read online text to serve their own needs: to find the information they seek, to discover new ideas and to confirm their notions about life.

People Read in Three Ways

In 2006, the Nielsen Norman group released images of heat maps from eye-tracking studies. The areas where people looked at the most while reading are red, areas with fewer views are yellow, and the least-viewed areas are blue. As you can see below, the red and yellow areas form three variations of an F-shaped pattern. These variations aren’t surprising because people read in three different ways.

People read casually, skimming over text, reading words and sentences here and there to get a sense of the content. The heat map below shows the eye movements of someone casually reading about a product. The reader spent time looking at the image of the product, reading the first couple of sentences, then scanning through the bulleted list.

The Nielsen Norman Group explored the F-shaped pattern for casual reading in 2006. (View large version2)

People also scan with purpose, jumping from section to section, looking for a particular piece of information. They might only read a word or the first couple of characters of a word as they scan the screen. The heat map below shows the eye movements of someone scanning the results of a Google search with purpose. The person read the first two results more slowly. Then, their eyes jumped from section to section, looking for the search term. Therefore, we do not see a strong vertical stroke along the left edge of the text.

The Nielsen Norman Group explored the F-shaped pattern for purposeful scanning in 2006. (View large version4)

Finally, people read in an engaged manner. When they find an article or blog post they are interested in, they will slow down and read the whole text, perhaps even going into a trance-like state. The heat map below shows the eye movements of a person reading in an engaged manner. The tone is more continuous. There is more red (meaning more time spent reading) and less jumping around the page. When the intensity of reading dwindled because they lost interest (the corporate “About us” page might not have aligned with their interests), their eyes continued along the left edge of the text.

The Nielsen Norman Group explored the F-shaped pattern for reading in an engaged manner in 2006. (View large version6)

Reading Is a Complex Process

We know that people read in three different ways, but let’s look more closely at how people read — how the F-shaped patterns are formed.

We know that people. Don’t. Read. Each. Individual. Word. Instead, they use their foveal (or central) vision to focus on a word, while using their peripheral vision to find the next spot on which to focus.


People don’t read each word individually.

People use their foveal (central) and peripheral vision to read.

We also know that people don’t fixate on every word, but tend to skip words (their eyes take little leaps, called “saccades”) and fill in the rest. This is especially true of those who read casually or scan with purpose.


People skip words and fill in the rest.

Finally, we know that readers anticipate the next line while moving their eyes horizontally along a line; so, their eyes are drawn down the left edge of the text. This constant struggle between horizontal and vertical motion contributes to the F-shaped reading patterns.

The constant struggle between horizontal and vertical eye movement results in the F-shaped patterns

Line Length (Measure) And Reading

Typographers have been writing about the relationship between horizontal and vertical eye motion for almost a century. In 1928, Jan Tschichold dismissed centered text and advocated for left-aligned text. He argued that this would assist readers by providing a consistent left (vertical) edge for the eye to return to after finishing each (horizontal) line.

The Ideal Measure: 45 to 75 Characters

We have multiple “rules” for facilitating a horizontal reading motion, one of which is to set text at a reasonable measure. As James Craig wrote in his book Designing With Type (originally published in 1971, now it its fifth edition):

Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit.

If a casual reader gets tired of reading a long horizontal line, then they’re more likely to skim the left edge of the text. If an engaged reader gets tired of reading a long horizontal line, then they’re more likely to accidentally read the same line of text twice (a phenomenon known as “doubling”).

65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Derived from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print. Many web designers (including me) apply that rule directly to the web. I’ve found, however, that we can reliably broaden the range to 45 to 85 characters (including spaces and punctuation) per line for web pages.

Measure and Web Type

Web designers have started to embrace a reasonable measure for text. Resources abound. Early writings include Mark Boulton’s more poetic approach to typography, which he refers to as “knowing your hanging punctuation from your em-dash” (“Five Simple Steps to Better Typography157”). Later writings include Harry Roberts’ more technical approach to typography (“Technical Web Typography: Guidelines and Techniques8”).

The most recent (and, dare I say, exciting) development in measure? Its role in responsive web design. More designers are using line length to help determine break points in a responsive structure! Chris Coyer recently developed his bookmarklet to test line length in order to help responsive web designers keep an eye on their measure (“Bookmarklet to Colorize Text Between 45 and 75 Characters9”).

But a good measure is only one rule for setting readable text.

Font Size And Reading

A good, comfortable font size is also necessary for setting readable text. This rule is old news. But given the number of responsive websites out there that make text too small or too big in order to achieve an ideal measure, the rule bears repeating.

Static Web Pages and Font Size

One benefit of a responsive web structure is readable text — text that people on hand-held devices don’t have to pinch and zoom to read. If a structure is static (like the two-column page shown below), then an ideal measure won’t do the trick. The text will simply be way too tiny to read on a small device such as a phone.

Left: The main column has a good measure (45 to 85 characters are highlighted in yellow). But without a responsive structure, the text is too small to read on a small device without pinching and zooming. Right: The font size (13-pixel Verdana for the left column, 18-pixel Georgia for the introduction and 16-pixel Georgia for the article) is comfortable to read on a laptop.

Small Devices and Font Size

When designing a responsive website, start with a comfortable font size and an ideal measure to help determine break points. But when the time comes (as it always does), let the ideal measure go.

Text already looks smaller on hand-held devices than on larger devices. This is fine because people tend to hold small devices closer when reading. Current popular wisdom is to preserve the measure by further reducing the font sizes for held-held devices. In practice, retaining a comfortable font size as much as possible better preserves readability. The result will be a less-than-ideal measure but a more comfortable reading experience.

A responsive structure won’t help if small text on a hand-held device encourages readers to pinch and zoom!

Left: To retain an ideal measure, the font size is reduced to 12-pixel Verdana and 14-pixel Georgia for hand-held devices. The text is harder to read. Right: The font size is 13-pixel Verdana and 17-pixel Georgia for hand-held devices. The measure is no longer ideal, but the text is easier to read.

Large Devices and Font Size

When designing a responsive website, remember that measure and font size affect not only people using hand-held devices. The majority of people still use larger devices, such as laptops and desktop computers.

Some simple responsive structures keep text in a single column that expands and contracts with the size of the device. This can be an elegant, appropriate solution — except when the font size (instead of the column’s width) is used to preserve the ideal measure.

We’ve learned not to set text too small, but text that’s too big also poses a problem. When type gets too big, the reader’s eyes try to follow their usual pattern. But a font size that’s too large takes up more horizontal space, and it interferes with the horizontal flow that readers have established using their foveal vision and their pattern of skipping words.

We’re used to setting online text larger than printed text. This is fine because people tend to place large devices on their lap or on a desk while reading. But overly large text forces the reader to slow down and adjust how far they skip ahead as they read. Reading horizontally becomes cumbersome, and the reader will start to skip vertically down the left edge of the text.

When type gets too big, the reader tries to follow their usual horizontal rhythm. This forces them to read parts of words instead of entire words and to slow down and adjust their reading pattern.

Current popular advice is to preserve the measure by increasing the font size for large devices. For example, the one-column structure below has an ideal measure. But to achieve this ideal measure on large devices, we’ve had to set the text to 19-pixel Verdana, 22-pixel Georgia for the article, and a whopping 26-pixel Georgia for the introduction!

In the layout above, details show the text at 100% size. The text on this web page is way too big for comfortable reading! Simple one-column responsive structures should use a narrower column on large devices, keeping the font size smaller and easier to read. (View large version11)

In practice, retaining a comfortable font size as much as possible and simply narrowing the column’s width instead are better. Look at what happens to A List Apart12 when it’s viewed on a hand-held device and on a laptop.

A List Apart is perfectly readable on a hand-held device. But on a laptop, the text gets too big to be comfortably read. A shorter measure and a smaller font size would help people follow their usual horizontal rhythm. (View large version14)

Bonus Section: Line Height And Reading

So far, our focus has been on the relationship between font size and measure in responsive web structures. But line height also affects how people read.

Line Height Affects Horizontal Motion

Because readers scan content both horizontally and vertically, lines of text should feel like horizontal lines, not like woven fabric.

A line height that is too tight could undermine horizontal eye movement and encourage scanning down the left edge. It could also force people to reread lines of text. On the other hand, a line height that is too loose could make lines of text visually “float away” from each other. The lines will no longer feel like a cohesive unit, and vertical scanning becomes more difficult.

While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

Top: When the line height is too tight, it undermines the horizontal reading flow and increases doubling. Bottom: When the line height is too loose, lines of text visually float away from each other.

Line Height and Font Size

Setting line height is a complex balance of variables (font family, measure, font size, language). The most important variable when creating a responsive web structure is — surprise! — font size.

Smaller type tends to need more line height, not less. A generous line height helps the eye to recognize small word shapes more easily, and it encourages horizontal motion when the eye gets tired of reading small text.

Left: A line height set at 150% is a bit too tight on an iPhone. Right: The exact same text with a slightly looser line height promotes horizontal movement and helps the reader to recognize word shapes.

Look Closely, Break Rules

When we design a responsive structure, testing it on a large device is easy; we can change a desktop browser’s size quickly. But designing on a desktop or laptop browser means that we are spending most of our time at an arm’s length from the text, and we don’t spend much time seeing how the text renders on small devices.

If you’re using measure to find break points in your responsive website, then you probably care about type and reading. Keep using measure! It’s a great starting point. But to see whether your type truly works, spend some time looking at it closely, on a smaller device. Balance measure, line height and font size as needed.

Remember that all rules are meant to be broken. Heck, Jan Tschichold broke his own rule and used centered text for much of his career. When the time comes, sacrifice measure for a comfortable font size. A good font size (not too small) is readable. A good font size (not too big) promotes horizontal eye motion. A good font size with the proper line height will help your readers find what they’re looking for.

Further Resources

(il, al)


  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg
  7. 7 http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
  8. 8 http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  9. 9 http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg
  12. 12 http://alistapart.com
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png
  15. 15 http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
  16. 16 http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  17. 17 http://webtypography.net/2.1.2
  18. 18 http://alistapart.com/article/how-we-read
  19. 19 http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  20. 20 http://jordanm.co.uk

The post Size Matters: Balancing Line Length And Font Size In Responsive Web Design appeared first on Smashing Magazine.

Original post: 

Size Matters: Balancing Line Length And Font Size In Responsive Web Design


How to Optimize Your Content Marketing Strategy for More Leads

Are your email servers as busy as these envelope-stuffing machines or could you use a few more leads? Image source.

Is your content marketing strategy working for your business, or would you like to generate more leads? Where do you start? How do you find the best ideas?

Elliot Shmukler, former product manager of LinkedIn, pioneered the idea that all optimization tactics stem from one of three basic levers:

  1. Increased exposure (e.g., more people see your website)
  2. Reduced friction (e.g., Amazon’s one-click checkout)
  3. Increased incentive (e.g., buy one, get one free)

This theory is the driving force behind all popular growth hacks, and it provides a solid framework for coming up with tactics to apply to any area of your business – including your content marketing.

Here’s how optimizing for Shmukler’s three levers can help you craft a solid content marketing strategy that generates more leads.

Part I: Increase Exposure

You can’t convert blog visitors into leads if no one is visiting your blog.

And if you’re not strategic about the way that you attract your visitors, you may wind up with unqualified leads who don’t care about what you do.

When Jayson Gaignard first started promoting his entrepreneur mastermind events, he drove thousands of visitors to his site, but they didn’t register for his event. Why? They weren’t the right audience.

Here are some tactics that will drive (and convert) the right type of visitors: targeted visitors.

When guest posting, link to a landing page

When Maneesh Sethi wanted to build the email list on his productivity blog, he turned to guest posting to reach new readers.

Hoping to drive 200 new subscribers, he wrote a guest post on Scott H Young’s blog. At the end, he added a link to a custom landing page where readers could download exclusive material… after they subscribed.

After the post went live, Maneesh was blown away by the results. That 200 subscriber goal? He passed it the first day.

Within a couple of weeks, that single guest post drove 1070 new subscribers.

Want more subscribers? Create a customized landing page for every guest post you write.
Click To TweetPowered By CoSchedule

Blog audiences are generally highly targeted, so guest posts on the right blogs can make big impacts – if you’re making it easy for people to subscribe.

Pro tip:
Alex Turnbull recommends optimizing dedicated guest posting landing pages by making them hyper-targeted to the reader:

  • Share content that is similar to the post they just read
  • Acknowledge where they came from
  • Offer an exclusive incentive to sweeten the pot

Contribute to related communities

Being an active member of communities such as GrowthHackers allows you to learn, share ideas and get to know others in your niche.

And after developing relationships there, these communities are perfect for sharing your articles, driving traffic and collecting leads.

Armed with an idea for a new product, Perrin Carrell needed to prove that people would be interested in buying it. To do this, he decided to ask the League of Legends community on Reddit.

Perrin Carrell’s post on Reddit. Image source.

His post gained significant traction (over 1.9k upvotes!), and over 6,300 people from the community joined Perrin’s email list.

With results like that, you may be tempted to start posting to Reddit today, but it’s important to lurk before you start talking about yourself:

  • Find and frequent “subreddits” that are relevant to your blog topic.
  • Pay attention to popular topics and comments – they can tell you a lot about your target demographic.

And above all? As Social Media Examiner article explains in depth, you need to contribute to the community:

“Submit appropriate content, provide insightful answers, ask questions related to your industry and respond to people who engage with you.”

Start your own podcast

Scott Britton knew that many people prefer podcasts over blogs, so he decided to start his own podcast: The Competitive Edge.

Over just eight weeks, Scott built his podcast to over 50,000 downloads and climbed to the #1 spot on iTunes’ “New and Noteworthy” business podcasts.

His podcast popularity also translated into email leads: during those 8 weeks he saw 2.5k new subscribers.

Here’s what Scott’s downloads looked like over the first 8 weeks. Image source.

So how did Scott launch his podcast into such “instant” success? Long before he even published his first episode, Scott carefully planned his growth strategy and laid the groundwork for an explosive launch.

Pro tip:

Get as many downloads as you can in the first 8 weeks to be featured on iTunes’ “New and Noteworthy” chart. That’ll put your podcast in front of thousands of new prospects.

Ready to get started? Grab a microphone, Skype a friend, and record your first podcast today!

Part II: Reduce Friction

When I first started my blog, I got maybe one new subscriber for every 100 visitors. It was pretty terrible. Now, I’m getting about six. I’ve still got a long way to go, but it’s a lot better than before – in part because I have removed a lot of points of friction for visitors.

My MailChimp email list grows as I optimize my blog for coversions.

The really exciting thing about reducing friction on your blog is that each gain you achieve will affect all your posts – even the ones you haven’t written yet!

A/B test opt-in form elements

When writing CTA copy, you shouldn’t be relying on your intuition and praying that your brain is better than average at predicting user behavior.

Instead, use A/B testing to measure exactly how subscribers react to different button copy or headlines.

During the 2008 presidential campaign, Obama’s team wanted to build a large email list because they figured subscribers were more likely to volunteer, donate, vote and otherwise support the campaign.

This is what the original form looked like. Image source.

To get more email leads, they used A/B testing to measure the effects of 24 different landing page designs. Using multivariate tests (meaning they changed multiple elements), the Obama For America team tested variants of both the sign-up button and the media hero shot.

This winning treatment increased email sign-ups by 40.6%. Image source.

The winning variation (pictured above) increased email sign-ups by 40.6%. Sounds like an impressive number, but what does that actually mean for Obama’s campaign?

Over the course of the campaign, that optimized sign-up form resulted in 2.9 million extra email subscribers and $60 million of extra donations.

Want more leads? A/B test your opt-in forms. It worked for Obama.
Click To TweetPowered By CoSchedule

Your opt-in form may have attractive design, but you’ll never know what works best until you test for yourself.

Go crazy. Test your calls to action, headlines, imagery and placement. If you need some inspiration, Michael Zipursky has some for you in this post.

Keep it simple

As humans, we want things that we can understand; the simpler something is, the more comfortable it makes us. Gestalt psychology describes this phenomenon in the Law of Prägnanz.

So how can you leverage our love of simplicity to increase email sign-ups?

Derek Halpern experimented with this law by testing three different variations of his sign-up form.

The three variations: control, variation 2, and variation 1. Image source.

Variation 1 (right) used the principle of social proof by encouraging people to “Join 14,752 others.” Variation 2 (middle) applied Prägnanz by simply cutting the social proof and keeping the form short and to the point. The control (left) added slight variations in the headline.

Knowing the power of social proof, I originally guessed that variation 1 would win – after all, who wouldn’t want to join 14,000 others! But the Law of Prägnanz (or simplicity) carried the day in this case.

Simply eliminating the social proof completely let potential subscribers focus on the form. The simplest variation of this form drove a 2% conversion rate102.2% better than the variation with social proof!

When designing email sign-up forms and landing pages, reduce friction by simplifying.
Click To TweetPowered By CoSchedule

The key is to find that sweet spot between communicating the benefits of signing up and not creating too much friction for potential subscribers.

When in doubt, test it out.

Add an email subscription pop-up

Your visitors can’t subscribe if they don’t see your sign-up form.

Sounds like common sense, right? But how many visitors notice that little subscribe box stuck between popular posts and sponsors on your sidebar? Or that little “I want more” button at the bottom of your post?

Right now, many of your visitors could be missing your sign-up form.

When I realized this, I decided to try an email pop-up plugin that would make my email form more noticeable.


This variation of the pop-up converts about 6.4% of my new visitors to excited email subscribers waiting for my next post.

Results from a week of pop-ups.

Installing a pop-up plugin on your blog doesn’t take long, and they don’t have to be invasive. To make them a little less annoying for your prospects, you could consider:

  • Delaying the pop-up so it only appears after a set number of seconds
  • Only showing the pop-up on certain pages.
  • Only showing the pop-up to first-time visitors.

Is it easy for prospects to sign up for your blog? Your pop-up doesn’t have to be annoying.
Click To TweetPowered By CoSchedule

Part III: Increase Incentive

Once you’ve built exposure and removed friction, you must also have sufficient incentive.

What’s the incentive for your website visitors to join your email list? And how can you make it stronger?

Give away an ebook

When you ask people to subscribe “to get more articles like this” what’s the incentive? You’re asking them to join for some amorphous reward in the unknown future. It’s not a horrible incentive, but it could be a lot better.

When you ask people to subscribe “to download Four Things They Won’t Teach You in College” what’s the incentive? You’re asking them to join to immediately download a massively valuable ebook.


See the difference? Using an ebook as an incentive promises immediate value and provides a more concrete call to action.

Writing an ebook might seem like a daunting task, but it doesn’t have to be.

Not if you pace yourself.

Just break the process down into little parts and tackle it one day at a time. Remember, even elephants can be eaten one bite at a time.

Run your own webinar

When done right, running a webinar can give a major boost to the size of your email list. And it doesn’t need to be that hard.

The urgency and value of a webinar pack a powerful one-two punch that will convert many of your website visitors to attendees (and get them on your email list). After the event, you can share the recorded video and perhaps even turn the audio into a podcast.

An Unbounce webinar landing page.

Frustrated by the performance of his initial incentives, Derek Halpern used a webinar to drive email sign-ups on his website. He planned the event, created a landing page, and in just 28 days he drove 1054 new email leads.

Bonus tip:
Even beyond just building raw subscriber numbers, webinars give you an opportunity to build a relationship with new leads – resulting in a highly responsive email list.

Engage them before, during and after the event. Create a feedback loop and ask them what they’d like to learn about next.

Check out this post for a great crash course to creating a webinar of your own.

Create post-specific incentives

You can provide massive value with an ebook, but what if your ebook is about landing page design and your visitor came to read an article about Facebook ads?

Your visitor might not see the value unless it’s relevant to what they’re looking for.

And that is the power of post-specific incentives.

If you’re a reader of Noah Kagan’s blog, you might have noticed this before. In some of the posts on his website, he uses post-specific bonus content that’s directly aligned with the topic of that post.


In the above example, from a post about marketing books on Amazon, he included a massive pack of bonus content. When you click the download button, it asks you to subscribe and get the bonus material.

Bonus tip:
Unlike ebooks, bonus material shouldn’t take too long to put together.

Think about resources you already have at your disposal. Email scripts, spreadsheet models, cheat sheets, recordings, and resource lists all make great incentives.

The bottom line of any successful content marketing strategy

Optimizing for these three levers (increased exposure, reduced friction and increased incentive) will help you collect more leads, but long-term subscriber growth boils down to just one thing: keep creating great content.

No matter how well optimized your content marketing strategy is for growth, success won’t come overnight.

Success comes after years of hard, thankless work pouring your heart out in every article you write, guest post you pitch and podcast you create. It’s not easy, but your leads will thank you for it. And when is anything easy ever worth it?

– Nate Desmond

Visit site: 

How to Optimize Your Content Marketing Strategy for More Leads


Coming to a Conference Near You

What are the best conferences you’ve attended?

We’re asked to speak at dozens of conferences each year and it’s gotten to the point that we have to be selective.

So, we’re looking for input from you: which do you believe are the must-attend events? Which ones give the best content? Which attract the most interesting attendees?

Please add your comments below from your experience in the past few years. Thank you!

And if you’re planning on attending a conference this Fall, hopefully we’ll see you there. Here are some upcoming events we’ll be speaking at:

  • Shop.Org Summit 2014, Seattle – September 29-October 1
    In addition to keynoting the opening Bootcamp, WiderFunnel will have a booth in the Shop.Org exhibit hall. Stop by and say Hi!
  • Pubcon, Las Vegas – October 6-9
  • MarketingProfs 2014 B2B Forum, Boston – October 8-10
  • Hero Conversion Summit, Indianapolis – October 14-15
  • Mobile Conversion@Google 2014, Dublin, Ireland – October 22

We’ll see you there!

WiderFunnel at Unbounce CTA Conference

The post Coming to a Conference Near You appeared first on WiderFunnel Marketing Conversion Optimization.

This article:

Coming to a Conference Near You

Sci-Fi, Frustrations, Flash And Forms: The Typeform Story

Take any new interface design or display technology, and chances are that someone somewhere has already compared it to Minority Report. The 2002 dystopian film, with its see-through screens and gesture-driven interfaces, is remembered more for its futuristic tech than for the insidiousness of the technology — pre-crime prediction — that was its actual focus. It continues to be the standard by which we judge new interfaces.
But inspiration doesn’t only come in the form of flashy, futuristic interfaces.

Source article:  

Sci-Fi, Frustrations, Flash And Forms: The Typeform Story


How to Impact Conversions with Rich Media

Being a CrazyEgg fan, you already know your landing page is one of the most powerful tools you have to increase high-quality conversions.

It matches your message to the exact audience that should be exposed to it. And it takes virtual strangers, people who may know nothing about your product or services, and turns them into warm prospects, people who may be willing to try your product. All because you’ve shown them how your product can change their lives.

But landing pages convert at different rates from one another, even when targeting the same crowd.

A study of thousands of AdWords accounts shows that about a fourth have less than than 1% conversion rates, but the top fourth has more than twice that, with over 5% conversion. Additionally, some have skyrocketing conversion rates, with over 10% (via Wordstream). So what sets the high achievers apart from the rest?

The team behind the Adwords study wanted to find out, so they edited landing pages and analyzed conversion rates before and after their changes. They saw noticeable increases in conversion rates; however, they found not all changes are created equally.

In fact, many changes that can initially boost conversion rates aren’t long lasting, and the rates will level out over time. So what does create long-term increases in high-quality leads? Rich media landing pages.


(photo via orbitscripts.com)

Creating rich media landing pages strengthens your conversions via purchases, subscriptions, registrations, and downloads. But why is rich media so powerful and how does it increase conversions?

Rich media focuses and engages viewers

When you land on a new website, your eyes naturally move around the page, depending on the site’s design. Often, there are multiple areas of focus created through negative space, text blocks and font, photos, ads, headlines, and more.

It’s possible to tweak your visitor’s viewing experience through better design. (And you should!) Strategizing your site’s design is not to be taken lightly—landing page optimization results in three to five times the conversion rate and improves lead quality.

However, even the best designed sites can confuse and lose viewers because their media is static. In contrast, rich media allows you to precisely control your visitors’ focus.

Consider this: Where does your eye travel to, a static image or moving graphics and videos? Obviously what moves will catch our eye naturally, but the stats on just how much this affects conversion are surprising.

According to EyeViewDigital, videos on landing pages can improve conversion rates by up to 80%. So, integrating a combination of moving images in the form of videos, slideshows, and presentations will not only immediately attract and sustain viewers’ attention but also engage to lead to conversions.


(image via: idiom.co)

Rich media landing pages are memorable

On average, 96% of the people who visit a website will leave without ever converting to a lead or sale. So how do you become one of the small percentage that grabs a visitor? It’s about first impressions. You need to stand out so visitors remember your brand and message.

If your landing page looks like everyone else’s, or if you offer the same coupon, discount, free trial or consultation everyone else in your business does, there is no incentive or reason for a visitor to choose you over your competition.

However, if you package your offer in a way that stands out, a visitor is more likely to pick your company, even if you offer the exact same free trial or discount offer as another company. In other words, the same message in different packaging makes all the difference.

Engaging your viewer with rich media can increase brand awareness and message association, helping you stay in the minds of your viewers and stand out to get the conversion.

Rich media leads to a more targeted landing page

Analytics and user testing is your most powerful ally when it comes to targeting your visitors, because they tell you what’s working and what’s not. The effect of analytics cannot be ignored: Steelhouse found that using correct targeting and testing methods can increase conversion rates up to 300 percent (via AdPushUp).

However, user testing, while highly beneficial, is not always practical, and many companies find themselves slacking on tests. Brian Eisenberg found over 60% of companies carry out fewer than five tests every month.


(photo via: gargasz.info)

The good news is that rich media ads offer you an easy route to enhanced analytics. On a typical page you can only gather information about the activity of your visitors on the site, but by adding different types of media—like videos and presentations—you can understand not only where they travel on the site, but what they engage with and for how long.

Additionally, media with outbound links adds further tracking. Through this, you can better target your landing page and remarket to visitors who didn’t convert.

Companies’ satisfaction with their conversion rate has been decreasing in the last four years, and today, less than a quarter of businesses are satisfied with their conversion rates. If you haven’t tried it still, maybe now is an optimal time to start.

It’s true that the media on the landing page isn’t the only thing that matters. You should invest great thinking in your copywriting, in your branding and in your overall user-experience. You should remember to keep it simple (stupid!) and being as minimalistic as possible.

I believe that it’s all about testing. For instance, if we had to produce a brand new landing page out of scratch, it would probably have two variations; one with a short slideshow or video, and one with plain text.

The Bottom Line

A/B testing today is considered to be the bread and butter of a successful lead generation campaign because not all products and audiences are aligned with the same way of thinking.

Try the best media you think will work on your LP and update us in the comments!

The post How to Impact Conversions with Rich Media appeared first on The Daily Egg.

Visit source:  

How to Impact Conversions with Rich Media

How To Choose The Best WordPress Hosting

These days you have an awful lot of options for hosting your website, so many that it’s easy to get lost. How much should you pay? Is support important to you, or are you a tinkerer who likes to do your own thing? Let’s dive in.
An Overview Of Hosting Categories A couple of years ago, choosing a hosting company was a lot simpler. Shared hosting providers had relatively low prices (between $5 and $15 a month), while other companies rented out dedicated servers from $500 a month up to as much as tens of thousands of dollars a month.

This article:  

How To Choose The Best WordPress Hosting