Tag Archives: king


15 Essential Elements of an Effective eCommerce Product Page

Product pages are the doorways that lead to conversions and revenue for an eCommerce store. A good product page plays a pivotal role in taking a customer from just browsing to actually adding the product to the cart. Most eCommerce websites, therefore, invest a significant portion of their time and money in making their product pages more attractive and persuasive.

But then, how do you do this?

Essentially, it comes down to creating a great User Experience for your customer. An effective User Experience (UX) requires relevant and useful information designed in a manner which takes the customer seamlessly through the buying process. In this blog post, we are going to talk about 15 product page elements that add to the UX for your product pages and makes them high-converting. You will be familiar with most, if not all, of these. My intention here is to create a short checklist for every element that you can use to optimize that element. There’s also a surprise for you at the end of this post, so hold on!

1) Product Name

  •  Product Name should be descriptive. This gives more clarity to the customer as well as boosts SEO for that page. For example, ’24 Carat Gold Ring’ is much more descriptive and SEO-friendly than ‘Gold Ring’
  • The name should be unique. This sounds like common sense but you’ll be surprised by how often eCommerce websites give similar names to their products which makes finding them through search really difficult. Needless to say, this also negatively affects the SEO for the products.

2) Call to Action (CTA) Button

  • This is the most important element on any product page. The CTA affects the decision – making of the customer through its size, color and text. Thus, marketers should pay significant attention to optimizing all these aspects.
  • Different colors denote different things across different cultures. When deciding on color, keep in mind two things. Firstly, whether that color triggers the emotion in your target audience that you are hoping for. And secondly, how does it contrast with the color scheme of the rest of the page. Ideally, you want the CTA to stand out so that it grabs customer attention.
  • When deciding on the text, keep in mind that certain words mean different things in different countries. For example, see how Amazon changes the CTA text on its US and UK websites to adhere to the local flavor.

Amazon US Page
Amazon US page with CTA text as 'Add to Cart'

Amazon UK Page
Amazon UK page with CTA text as 'Add to Basket'

3) Product Price

  • Understandably, this is the least controllable of the page elements. As a marketer, your main focus should be the appearance of the price tag.
  • The price should be placed close to the Buy button. In fact, the product name, price and CTA should form a kind of visual hierarchy so that the act of buying flows seamlessly in the mind of the customer.

4) Product Image

  • Photos have a huge impact on the usability and overall UX of the website as well as increasing conversions and sales. For product page images, you should be mindful of download times. You need to keep in mind that not everyone has a super-fast
    internet connection, and that high load time can negatively affect the bottom line.
  • Use multiple images clicked from different angles to give the overall look of the product.
  • Use inspirational product images (product image used in a setting; for example, a customer wearing the dress that is displayed on the product page). These images add social proof as well as make the product more desirable.

5) Product Description

  • Keep product descriptions short and make sure to include important keywords so that the page ranks well in search engine rankings

6) Quantity Option

  • Quantity option takes a very small amount of screen real estate but can lead to a bigger sale. For example, if I want to buy 5 copies of a book, I shouldn’t be forced to go to the page and click 5 times on the ‘Buy’ button. Not having this element means you are potentially leaving a lot of money on the table.
  • It should be placed near the CTA.

7) Product Reviews & Testimonials

  • According to an iPerceptions study, 61% of customers read online reviews before making a purchase decision, while 63% of customers are more likely to make a purchase from a site which has user reviews.
  • The problem with having reviews on your product pages is that so many pages just have so few reviews. This can result in negative social proof. To combat this, follow the eBay model of buyer/seller feedback. That means, as soon as someone purchases a product, send them an email asking for feedback about the product. Many customers feel that such feedback request is part of the buying process and they are more likely to fill in the feedback form. This will ensure that your review section is filled.
  • Ask people to rate reviews. This ensures that the most helpful reviews rise to the top.

8) ‘Add to Wish List’

  • This option is particularly helpful in case of indecisive customers who are evaluating your product. Also, while browsing, some customers may stumble upon a product which they like but are not yet ready to buy. This option gives them the flexibility to ‘bookmark’ the product to which they can return later.

9) Cost Savings

  • Many times, if a product has been discounted, the product page shows the original price along with the discounted price. This is a smart trick used by marketers to cash in on the loss aversion tendency of people.
  • Show both the percentage saving as well as the actual saving made on the product. Different customers are induced by different messages.

10) Cross-selling & Up-selling Options

  • As a business owner, you want the user to purchase add-ons, related products and accessories of the products they buy. One way to achieve this is to provide good options for up-selling and cross-selling on the product pages.
  • Good suggestions for similar and related products not only improve the browsing experience but also aid in product exploration.

11) Social Media Integration

  • Social media buttons provides the friends/followers with social proof, which may result in increased purchases of the same item.
  • It helps to spread brand awareness.
  • It may also increase traffic on your website which will help in increase in overall sales, quite apart from the particular product which has been shared.
  • Keep in mind, however, that if the number of likes and share are too few in number, it may result in negative social proof.

12) Delivery & Returns Information

  • Nothing is more irritating to a customer than selecting a product, making a purchase and reaching the checkout section only to discover the addition of unexpectedly high delivery charges and hidden taxes.
  • Posting the total cost on the product page eliminates the surprise of a high shipping cost and also lets the customer factor in the total cost before adding the product to the cart.

13) Live Chat Widget

  •  According to an Econsultancy reportLive chat has the highest satisfaction levels for any customer service channel, with 73%, compared with 61% for email and 44% for phone.
  • Often times people have questions that may not have been answered in the product description or in the customer reviews. If you force them to guess, or leave them wondering, they are going to leave and find the answer to their question elsewhere.

14) Product Videos

  • Visuals work much better than text when it comes to conveying a message. Many eCommerce sites are using videos in different ways to improve customer understanding
    of their products as well as make their content more engaging and intimate. SixPackAbsExercises.com, a VWO customer, A/B tested videos on the sales page which resulted in increased conversions by 46%.
  • Videos also help the customers to gain a more intimate understanding of product look as well as functionality.
  • If you decide to have videos on your website, you may also look at having transcripts for the
    videos. These not only ensure that viewers with hearing disability can access your video content, it also improves the SEO for that video.

15) Breadcrumb Navigation

Flipkart's Breadcrumb Navigation

  • Breadcrumb navigation helps the user to understand the product hierarchy as well as navigate to other areas of interest. They are also known to reduce bounce rates.

That’s it! One last piece of advice: keep testing. One thing that we at VWO have learned over the years is never to trust experts. The best way to improve product page performance is to keep testing out new ideas and concepts with A/B testing and keep optimizing your product pages.

Now it’s time for the surprise we told you about. We’ve designed a beautiful eCommerce product page template for you which employs many of the elements we just talked about. Scroll down to see it.


We have designed 4 more templates specially for you. Click on the button below to get a free eBook on ’5 eCommerce Product Page Templates to Boost your Sales and Conversions”.

The post 15 Essential Elements of an Effective eCommerce Product Page appeared first on VWO Blog.

Read this article:  15 Essential Elements of an Effective eCommerce Product Page


Styling And Animating SVGs With CSS

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article, which is a modified transcript of a talk I recently gave1 at CSSconf EU2 and From the Front3, I’ll go over the prerequisites and techniques for working with CSS in SVG.

I’ll also go over how to export and optimize SVGs, techniques for embedding them and how each one affects the styles and animations applied, and then we’ll actually style and animate with CSS.


Scalable vector graphics (SVG) is an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation. In other words, SVGs are XML tags that render shapes and graphics, and these shapes and graphics can be interacted with and animated much like HTML elements can be.

Animations and interactivity can be added via CSS or JavaScript. In this article, we’ll focus on CSS.

There are many reasons why SVGs are great and why you should be using them today:

  • SVG graphics are scalable and resolution-independent. They look great everywhere, from high-resolution “Retina” screens to printed media.
  • SVGs have very good browser support4. Fallbacks for non-supporting browsers are easy to implement, too, as we’ll see later in the article.
  • Because SVGs are basically text, they can be Gzip’d, making the files smaller that their bitmap counterparts (JPEG and PNG).
  • SVGs are interactive and styleable with CSS and JavaScript.
  • SVG comes with built-in graphics effects such as clipping and masking operations, background blend modes, and filters. This is basically the equivalent of having Photoshop photo-editing capabilities right in the browser.
  • SVGs are accessible. In one sense, they have a very accessible DOM API, which makes them a perfect tool for infographics and data visualizations and which gives them an advantage over HTML5 Canvas because the content of the latter is not accessible. In another sense, you can inspect each and every element in an SVG using your favorite browser’s developer tools, just like you can inspect HTML elements. And SVGs are accessible to screen readers if you make them so. We’ll go over accessibility a little more in the last section of this article.
  • Several tools are available for creating, editing and optimizing SVGs. And other tools make it easier to work with SVGs and save a lot of time in our workflows. We’ll go over some of these tools next.

Exporting SVGs From Graphics Editors And Optimizing Them

The three most popular vector graphics editors are:

  1. Adobe Illustrator5,
  2. Inkscape6,
  3. Sketch7.

Adobe Illustrator is a paid application from Adobe. It is a highly popular editor, with a nice UI and many capabilities that make it the favorite of most designers.

Inkscape is a popular free alternative. Even though its UI is not as nice as Illustrator’s, it has everything you need to work with vector graphics.

Sketch is a Mac OS X-only graphics app. It is not free either, but it has been making the rounds8 among designers lately and gaining popularity9, with a lot of resources and tools10 being created recently to improve the workflow.

Choose any editor to create your SVGs. After choosing your favorite editor and creating an SVG but before embedding it on a web page, you need to export it from the editor and clean it up to make it ready to work with.

I’ll refer to exporting and optimizing an SVG created in Illustrator. But the workflow applies to pretty much any editor, except for the Illustrator-specific options we’ll go over next.

To export an SVG from Illustrator, start by going to “File” → “Save as,” and then choose “.svg” from the file extensions dropdown menu. Once you’ve chosen the .svg extension, a panel will appear containing a set of options for exporting the SVG, such as which version of SVG to use, whether to embed images in the graphic or save them externally and link to them in the SVG, and how to add the styles to the SVG (by using presentation attributes or by using CSS properties in a <style> element).

The following image shows the best settings to choose when exporting an SVG for the web:

(View large version12)

The reasons why the options above are best are explained in Michaël Chaize’s excellent article “Export SVG for the Web With Illustrator CC13.”

Whichever graphics editor you choose, it will not output perfectly clean and optimized code. SVG files, especially ones exported from editors, usually contain a lot of redundant information, such as meta data from the editor, comments, empty groups, default values, non-optimal values and other stuff that can be safely removed or converted without affecting the rendering of the SVG. And if you’re using an SVG that you didn’t create yourself, then the code is almost certainly not optimal, so using a standalone optimization tool is advisable.

Several tools for optimizing SVG code are out there. Peter Collingridge’s SVG Editor14 is an online tool that you input SVG code into either directly or by uploading an SVG file and that then provides you with several optimization options, like removing redundant code, comments, empty groups, white space and more. One option allows you to specify the number of decimal places of point coordinates.

(View large version16)

Peter’s optimizer can also automatically move inline SVG properties to a style block at the top of the document. The nice thing about it is that, when you check an option, you can see the result of the optimization live, which enables you to better decide which optimizations to make. Certain optimizations could end up breaking your SVG. For example, one decimal place should normally be enough. If you’re working with a path-heavy SVG file, reducing the number of decimal places from four to one could slash your file’s size by as much as half. However, it could also entirely break the SVG. So, being able to preview an optimization is a big plus.

Peter’s tool is an online one. If you’d prefer an offline tool, try SVGO17 (the “O” is for “optimizer”), a Node.js-based tool that comes with a nice and simple drag-and-drop GUI18. If you don’t want to use an online tool, this one is a nice alternative.

The following screenshot (showing the path from the image above) is a simple before-and-after illustration of how much Peter’s tool optimizes SVG.


Notice the size of the original SVG compared to the optimized version. Not to mention, the optimized version is much more readable.

After optimizing the SVG, it’s ready to be embedded on a web page and further customized or animated with CSS.

Styling SVGs With CSS

The line between HTML and CSS is clear: HTML is about content and structure, and CSS is about the look. SVG blurs this line, to say the least. SVG 1.1 did not require CSS to style SVG nodes — styles were applied to SVG elements using attributes known as “presentation attributes.”

Presentation attributes are a shorthand for setting a CSS property on an element. Think of them as special style properties. They even contribute to the style cascade, but we’ll get to that shortly.

The following example shows an SVG snippet that uses presentation attributes to style the “border” (stroke) and “background color” (fill) of a star-shaped polygon:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
fill = "#FF931E"
stroke = "#ED1C24"
stroke-width = "5"
points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>

The fill, stroke and stroke-width attributes are presentation attributes.

In SVG, a subset of all CSS properties may be set by SVG attributes, and vice versa. The SVG specification lists the SVG attributes that may be set as CSS properties20. Some of these attributes are shared with CSS, such as opacity and transform, among others, while some are not, such as fill, stroke and stroke-width, among others.

In SVG 2, this list will include x, y, width, height, cx, cy and a few other presentation attributes that were not possible to set via CSS in SVG 1.1. The new list of attributes can be found in the SVG 2 specification21.

Another way to set the styles of an SVG element is to use CSS properties. Just like in HTML, styles may be set on an element using inline style attributes:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300">
  style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
  points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>

Styles may also be set in rule sets in a <style> tag. The <style> tag can be placed in the <svg> tag:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
  <style type="text/css">
  selector /* styles */
  <g id=".."> … </g>

And it can be placed outside of it, if you’re embedding the SVG inline in the document:

<!DOCTYPE html><!-- HTML5 document -->
<head> … </head>
<style type="text/css">
  /* style rules */
<!-- xmlns is optional in an HTML5 document →
<svg viewBox="0 0 300 300">
<!-- SVG content -->

And if you want to completely separate style from markup, then you could always link to an external style sheet from the SVG file, using the <?xml-stylesheet> tag, as shown below:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=".." height=".." viewBox="..">
  <!-- SVG content -->

Style Cascades

We mentioned earlier that presentation attributes are sort of special style properties and that they are just shorthand for setting a CSS property on an SVG node. For this reason, it only makes sense that SVG presentation attributes would contribute to the style cascade.

Indeed, presentation attributes count as low-level “author style sheets” and are overridden by any other style definitions: external style sheets, document style sheets and inline styles.

The following diagram shows the order of styles in the cascade. Styles lower in the diagram override those above them. As you can see, presentation attribute styles are overridden by all other styles except for those specific to the user agent.


For example, in the following code snippet, an SVG circle element has been drawn. The fill color of the circle will be deep pink, which overrides the blue fill specified in the presentation attribute.

<circle cx="100" cy="100" r="75" fill="blue" style="fill:deepPink;" />


Most CSS selectors can be used to select SVG elements. In addition to the general type, class and ID selectors, SVGs can be styled using CSS2’s dynamic pseudo-classes23 (:hover, :active and :focus) and pseudo-classes24 (:first-child, :visited, :link and :lang. The remaining CSS2 pseudo-classes, including those having to do with generated content25 (such as ::before and ::after), are not part of the SVG language definition and, hence, have no effect on the style of SVGs.

The following is a simple animation of the fill color of a circle from deep pink to green when it is hovered over using the tag selector and the :hover pseudo-class:

  fill: deepPink;
  transition: fill .3s ease-out;

  fill: #009966;


Much more impressive effects can be created. A simple yet very nice effect comes from the Iconic26 icons set, in which a light bulb is lit up when hovered over. A demo of the effect27 is available.


Because presentation attributes are expressed as XML attributes, they are case-sensitive. For example, when specifying the fill color of an element, the attribute must be written as fill="…" and not fill="…".

Furthermore, keyword values for these attributes, such as the italic in font-style="italic", are also case-sensitive and must be specified using the exact case defined in the specification that defines that value.

All other styles specified as CSS properties — whether in a style attribute or a <style> tag or in an external style sheet — are subject to the grammar rules specified in the CSS specifications, which are generally less case-sensitive. That being said, the SVG “Styling”28 specification recommends using the exact property names (usually, lowercase letters and hyphens) as defined in the CSS specifications and expressing all keywords in the same case, as required by presentation attributes, and not taking advantage of CSS’s ability to ignore case.

Animating SVGs With CSS

SVGs can be animated the same way that HTML elements can, using CSS keyframes and animation properties or using CSS transitions.

In most cases, complex animations will usually contain some kind of transformation — a translation, a rotation, scaling and/or skewing.

In most respects, SVG elements respond to transform and transform-origin in the same way that HTML elements do. However, a few inevitable differences result from the fact that, unlike HTML elements, SVG elements aren’t governed by a box model and, hence, have no margin, border, padding or content boxes.

By default, the transform origin of an HTML element is at (50%, 50%), which is the element’s center. By contrast, an SVG element’s transform origin is positioned at the origin of the user’s current coordinate system, which is the (0, 0) point, in the top-left corner of the canvas.

Suppose we have an HTML <div> and an SVG <rect> element:

<!DOCTYPE html>
<div style="width: 100px; height: 100px; background-color: orange"> </div>
<svg style="width: 150px; height: 150px; background-color: #eee">
  <rect width="100" height="100" x="25" y="25" fill="orange" />

If were were to rotate both of them by 45 degrees, without changing the default transform origin, we would get the following result (the red circle indicates the position of the transform origin):

(View large version30)

What if we wanted to rotate the SVG element around its own center, rather than the top-left corner of the SVG canvas? We would need to explicitly set the transform origin using the transform-origin property.

Setting the transform origin on an HTML element is straightforward: Any value you specify will be set relative to the element’s border box.

In SVG, the transform origin can be set using either a percentage value or an absolute value (for example, pixels). If you specify a transform-origin value in percentages, then the value will be set relative to the element’s bounding box, which includes the stroke used to draw its border. If you specify the transform origin in absolute values, then it will be set relative to the SVG canvas’ current coordinate system of the user.

If we were to set the transform origin of the <div> and <rect> from the previous example to the center using percentage values, we would do this:

<!DOCTYPE html>
  div, rect 
  transform-origin: 50% 50%;


The resulting transformation would look like so:

(View large version32)

That being said, at the time of writing, setting the transform origin in percentage values currently does not work in Firefox. This is a known bug33. So, for the time being, your best bet is to use absolute values so that the transformations behave as expected. You can still use percentage values for WebKit browsers, though.

In the following example, we have a pinwheel on a stick that we’ll rotate using CSS animation. To have the wheel rotate around its own center, we’ll set its transform origin in pixels and percentages:

  transform-origin: 193px 164px;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
  animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;

@-webkit-keyframes rotate 
    -webkit-transform: rotate(360deg);

@keyframes rotate 
    transform: rotate(360deg);

<!-- SVG content -->

You can check out the live result on Codepen34. Note that, at the time of writing, CSS 3D transformations are not hardware-accelerated when used on SVG elements; they have the same performance profile as SVG transform attributes. However, Firefox does accelerate transforms on SVGs to some extent.

Animating SVG Paths

There is no way to animate an SVG path from one shape to another in CSS. If you want to morph paths — that is, animate from one path to another — then you will need to use JavaScript for the time being. If you do that, I recommend using Snap.svg35 by Dmitry Baranovskiy, the same person behind the SVG library Raphaël36.

Snap.svg is described as being to SVG what jQuery is to HTML, and it makes dealing with SVGs and its quirks a lot easier.

That being said, you could create an animated line-drawing effect using CSS. The animation would require you to know the total length of the path you’re animating and then to use the stroke-dashoffset and stroke-dasharray SVG properties to achieve the drawing effect. Once you know the length of the path, you can animate it with CSS using the following rules:

stroke-dasharray: pathLength;
stroke-dashoffset: pathLength;
/* transition stroke-dashoffset */
transition: stroke-dashoffset 2s linear;

svg:hover #path
  stroke-dashoffset: 0;

In the example above, the path is drawn over the course of two seconds when the SVG is hovered over.

In the next demo, we’ll use the same technique and then use a CSS transition — with a delay — to light up the bulb once the path’s animation ends.

  stroke: #FFF2B1;
  stroke-dasharray: 4000 4000;  
  stroke-dashoffset: 4000;
  stroke-width: 4;
  transition: stroke-dashoffset 8s linear;

svg:hover #cable 
  stroke-dashoffset: 0;

/* turn lamp on */
  transition: fill .5s ease-in 6s;

svg:hover .inner-lamp 
  fill: #FBFFF8;

/* … */

You can view the live demo on JS Bin37. Note that you can also write stroke-dasharray: 4000; instead of stroke-dasharray: 4000 — if the two line and gap values are equal, then you can specify only one value to be applied to both.

Sometimes, you might not know the exact length of the path to animate. In this case, you can use JavaScript to retrieve the length of the path using the getTotalLength() method:

var path = document.querySelector('.drawing-path');
//set CSS properties up
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
//set transition up
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
// animate
path.style.strokeDashoffset = '0';

The snippet above is a very simplified example showing that you can do the same thing we did with CSS but using JavaScript.

Jake Archibald has written an excellent article explaining the technique38 in more detail. Jake includes a nice interactive demo that makes it easy to see exactly what’s going on in the animation and how the two SVG properties work together to achieve the desired effect. I recommend reading his article if you’re interested in learning more about this technique.

Embedding SVGs

An SVG can be embedded in a document in six ways, each of which has its own pros and cons.

The reason we’re covering embedding techniques is because the way you embed an SVG will determine whether certain CSS styles, animations and interactions will work once the SVG is embedded.

An SVG can be embedded in any of the following ways:

  1. as an image using the <img> tag:
    <img src="mySVG.svg" alt="" />
  2. as a background image in CSS:
    .el background-image: url(mySVG.svg);
  3. as an object using the <object> tag:
    <object type="image/svg+xml" data="mySVG.svg"><!-- fallback here --></object>
  4. as an iframe using an <iframe> tag:
    <iframe src="mySVG.svg"><!-- fallback here →</iframe>
  5. using the <embed> tag:
    <embed type="image/svg+xml" src="mySVG.svg" />
  6. inline using the <svg> tag:
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" …>
    <!-- svg content →

The <object> tag is the primary way to include an external SVG file. The main advantage of this tag is that there is a standard mechanism for providing an image (or text) fallback in case the SVG does not render. If the SVG cannot be displayed for any reason — such as because the provided URI is wrong — then the browser will display the content between the opening and closing <object> tags.

<object type="image/svg+xml" data="mySVG.svg">
  <img src="fallback-image.png" alt="…" />

If you intend using any advanced SVG features, such as CSS or scripting, the then HTML5 <object> tag is your best bet.

Because browsers can render SVG documents in their own right, embedding and displaying an SVG using an iframe is possible. This might be a good method if you want to completely separate the SVG code and script from your main page. However, manipulating an SVG image from your main page’s JavaScript becomes a little more difficult and will be subject to the same-origin policy39.

The <iframe> tag, just like the <object> tag, comes with a default way to provide a fallback for browsers that don’t support SVG, or those that do support it but can’t render it for whatever reason.

<iframe src="mySVG.svg">
  <img src="fallback-image.png" alt="…" />

The <embed> tag was never a part of any HTML specification, but it is still widely supported. It is intended for including content that needs an external plugin to work. The Adobe Flash plugin requires the <embed> tag, and supporting this tag is the only real reason for its use with SVG. The <embed> tag does not come with a default fallback mechanism.

An SVG can also be embedded in a document inline — as a “code island” — using the <svg> tag. This is one of the most popular ways to embed SVGs today. Working with inline SVG and CSS is a lot easier because the SVG can be styled and animated by targeting it with style rules placed anywhere in the document. That is, the styles don’t need to be included between the opening and closing <svg> tags to work; whereas this condition is necessary for the other techniques.

Embedding SVGs inline is a good choice, as long as you’re willing to add to the size of the page and give up backwards compatibility (since it does not come with a default fallback mechanism either). Also, note that an inline SVG cannot be cached.

An SVG embedded with an <img> tag and one embedded as a CSS background image are treated in a similar way when it comes to CSS styling and animation. Styles and animations applied to an SVG using an external CSS resource will not be preserved once the SVG is embedded.

The following table shows whether CSS animations and interactions (such as hover effects) are preserved when an SVG is embedded using one of the six embedding techniques, as compared to SVG SMIL animations40. The last column shows that, in all cases, SVG animations (SMIL) are preserved.

Table showing whether CSS styles, animations and interactions are preserved for each of the SVG embedding techniques.
CSS Interactions (e.g. :hover) CSS Animations SVG Animations (SMIL)
<img> No Yes only if inside <svg> Yes
CSS background image No Yes only if inside <svg> Yes
<object> Yes only if inside <svg> Yes only if inside <svg> Yes
<iframe> Yes only if inside <svg> Yes only if inside <svg> Yes
<embed> Yes only if inside <svg> Yes only if inside <svg> Yes
<svg> (inline) Yes only if inside <svg> Yes only if inside <svg> Yes

The behavior indicated in the table above is the standard behavior. However, implementations may differ between browsers, and bugs may exist.

Note that, even though SMIL animations will be preserved, SMIL interactions will not work for an SVG embedded as an image (i.e. <img> or via CSS).

Making SVGs Responsive

After embedding an SVG, you need to make sure it is responsive.

Depending on the embedding technique you choose, you might need to apply certain hacks and fixes to get your SVG to be cross-browser responsive. The reason for this is that the way browsers determine the dimensions of an SVG differs for some embedding techniques, and SVG implementations among browsers also differ. Therefore, the way SVG is handled is different and requires some style tweaking to make it behave consistently across all browsers.

I won’t get into details of browser inconsistencies, for the sake of brevity. I will only cover the fix or hack needed for each embedding technique to make the SVG responsive in all browsers for that technique. For a detailed look at the inconsistencies and bugs, check out my article on Codrops4441.

Whichever technique you choose, the first thing you’ll need to do is remove the height and width attributes from the root <svg> element.

You will need to preserve the viewBox attribute and set the preserveAspectRatio attribute to xMidYMid meet — if it isn’t already set to that value. Note that you might not need to explicitly set preserveAspectRatio to xMidYMid meet at all because it will default to this value anyway if you don’t change it.

When an SVG is embedded as a CSS background image, no extra fixes or hacks are needed. It will behave just like any other bitmap background image and will respond to CSS’ background-image properties as expected.

An SVG embedded using an <img> tag will automatically be stretched to the width of the container in all browsers (once the width has been removed from the <svg>, of course). It will then scale as expected and be fluid in all browsers except for Internet Explorer (IE). IE will set the height of the SVG to 150 pixels, preventing it from scaling correctly. To fix this, you will need to explicitly set the width to 100% on the <img>.

<img src="mySVG.svg" alt="SVG Description." />
  width: 100%;

The same goes for an SVG embedded using an <object> tag. For the same reason, you will also need to set the width of the <object> to 100%:

  width: 100%;

Even though <iframe> has a lot in common with <object>, browsers seem to handle it differently. For it, all browsers will default to the default size for replaced elements in CSS42, which is 300 by 150 pixels.

The only way to make an iframe responsive while maintaining the aspect ratio of the SVG is by using the “padding hack” pioneered by Thierry Koblentz on A List Apart43. The idea behind the padding hack is to make use of the relationship of an element’s padding to its width in order to create an element with an intrinsic ratio of height to width.

When an element’s padding is set in percentages, the percentage is calculated relative to the width of the element, even when you set the top or bottom padding of the element.

To apply the padding hack and make the SVG responsive, the SVG needs to be wrapped in a container, and then you’ll need to apply some styles to the container and the SVG (i.e. the iframe), as follows:

<!-- wrap svg in a container -->
<div class="container">
  <iframe src="my_SVG_file.svg">
    <!-- fallback here -->

  /* collapse the container's height */
  height: 0;        

  /* specify any width you want (a percentage value, basically) */     
  width: width-value;    

  /* apply padding using the following formula */
  /* this formula makes sure the aspect ratio of the container equals that of the SVG graphic */
  padding-top: (svg-height / svg-width) * width-value;
  position: relative;    /* create positioning context for SVG */

The svg-height and svg-width variables are the values of the height and width of the <svg>, respectively — the dimensions that we removed earlier. And the width-value is any width you want to give the SVG container on the page.

Finally, the SVG itself (the iframe) needs to be positioned absolutely inside the container:

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

We position the iframe absolutely because collapsing the container’s height and then applying the padding to it would push the iframe beyond the boundaries of the container. So, to “pull it back up,” we position it absolutely. You can read more about the details in my article on Codrops4441.

Finally, an SVG embedded inline in an <svg> tag becomes responsive when the height and width are removed, because browsers will assume a width of 100% and will scale the SVG accordingly. However, IE has the same 150-pixel fixed-height issue for the <img> tag mentioned earlier; unfortunately, setting the width of the SVG to 100% is not sufficient to fix it this time.

To make the inline SVG fluid in IE, we also need to apply the padding hack to it. So, we wrap <svg> in a container, apply the padding-hack rules mentioned above to the container and, finally, position the <svg> absolutely inside it. The only difference here is that we do not need to explicitly set the height and width of <svg> after positioning it.

  position: absolute;
  top: 0;
  left: 0;

Using CSS Media Queries

SVG accepts and responds to CSS media queries as well. You can use media queries to change the styles of an SVG at different viewport sizes.

However, one important note here is that the viewport that the SVG responds to is the viewport of the SVG itself, not the page’s viewport!

This is very similar in concept to element queries45.

An SVG embedded with an <img>, <object> or <iframe> will respond to the viewport established by these elements. That is, the dimensions of these elements will form the viewport inside of which the SVG is to be drawn and, hence, will form the viewport to which the CSS media-query conditions will be applied.

The following example includes a set of media queries inside an SVG that is then referenced using an <img> tag:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    @media all and (max-width: 50em) 
      /* select SVG elements and style them */
    @media all and (max-width: 30em) 
      /* styles  */
  <!-- SVG elements here -->

When the SVG is referenced, it will get the styles specified in the media queries above when the <img> has a max-width of 50em or 30em, respectively.

<img src="my-logo.svg" alt="Page Logo." />

You can learn more about media queries inside SVGs in Andreas Bovens’s article for Dev.Opera46.

Final Words

SVGs are images, and just as images can be accessible, so can SVGs. And making sure your SVGs are accessible is important, too.

I can’t emphasize this enough: Make your SVGs accessible. You can do several things to make that happen. For a complete and excellent guide, I recommend Leonie Watson’s excellent article on SitePoint47. Her tips include using the <title> and <desc> tags in the <svg>, using ARIA attributes and much more.

In addition to accessibility, don’t forget to optimize your SVGs and provide fallbacks for non-supporting browsers. I recommend Todd Parker’s presentation48.

Last but not least, you can always check support for different SVG features on Can I Use49. I hope you’ve found this article to be useful. Thank you for reading.

(vf, al, il)


  1. 1 https://www.youtube.com/watch?v=lf7L8X6ZBu8
  2. 2 http://2014.cssconf.eu/
  3. 3 http://2014.fromthefront.it/
  4. 4 http://caniuse.com/#feat=svg
  5. 5 //www.adobe.com/mena_en/products/illustrator.html
  6. 6 https://inkscape.org/en/
  7. 7 http://bohemiancoding.com/sketch/
  8. 8 https://medium.com/@jm_denis/discovering-sketch-25545f6cb161
  9. 9 http://hackingui.com/design/sketch-design/why-i-moved-to-sketch/
  10. 10 http://www.sketchappsources.com/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-Ai-options-large-preview-opt.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-Ai-options-large-preview-opt.png
  13. 13 http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/
  14. 14 http://petercollingridge.appspot.com/svg-editor
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-svg-editor-large-preview-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-svg-editor-large-preview-opt.png
  17. 17 https://github.com/svg/svgo
  18. 18 https://github.com/svg/svgo-gui
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-optimized-path-opt.jpg
  20. 20 http://www.w3.org/TR/SVG/propidx.html
  21. 21 http://www.w3.org/TR/SVG2/styling.html#SVGStylingProperties
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/10/04-diagram-opt.jpg
  23. 23 http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#dynamic-pseudo-classes
  24. 24 http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15
  25. 25 http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html
  26. 26 https://useiconic.com/
  27. 27 http://tutsplus.github.io/Styling-Iconic/styling/index.html
  28. 28 http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-transform-svg-html-large-preview-opt.png
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-transform-svg-html-large-preview-opt.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-transform-svg-html-large-preview-opt.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-transform-svg-html-large-preview-opt.png
  33. 33 https://bugzilla.mozilla.org/show_bug.cgi?id=891074
  34. 34 http://codepen.io/SaraSoueidan/pen/d0f94390e6c9af38fa562974399b6222?editors=100
  35. 35 http://snapsvg.io/
  36. 36 http://raphaeljs.com/
  37. 37 http://jsbin.com/haxaqa/1/edit?html,output
  38. 38 http://jakearchibald.com/2013/animated-line-drawing-svg/
  39. 39 http://en.wikipedia.org/wiki/Same-origin_policy
  40. 40 http://css-tricks.com/guide-svg-animations-smil/
  41. 41 http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
  42. 42 http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
  43. 43 http://alistapart.com/article/creating-intrinsic-ratios-for-video/
  44. 44 http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
  45. 45 http://responsiveimagescg.github.io/eq-usecases/
  46. 46 https://dev.opera.com/blog/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes/
  47. 47 http://www.sitepoint.com/tips-accessible-svg/
  48. 48 https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/pub?start=true&loop=false&delayms=5000#slide=id.p
  49. 49 http://caniuse.com/#search=svg

The post Styling And Animating SVGs With CSS appeared first on Smashing Magazine.

See more here:  

Styling And Animating SVGs With CSS


Adding Customer Reviews Increased Revenue by 7.5%

Disclaimer: The winner of this case study hasn’t been revealed in the post below. Please watch out for an update on the same space on October 16, 2014.

The Company

Czc.cz is a leading computers and electronics online store in the Czech Republic. They have a wide range of products from mobile phones, laptops, gaming devices to electronics and IT specialities.

To encourage first time visitors to buy from their website, they decided to test adding ratings from one of the Czech Republic’s most popular price comparison site, Heureka, on their product pages. Initially wary of sharing their customer details with another site, they decided to test the badge only on 50% of their traffic. The good part about having Heureka widget is that it runs a script which shows real time customer reviews, ratings and statistics to visitors.

Here’s how the original product page looked like:

original product page czc.cz

The Test

Tomas at Czc not only wanted to test the impact of the Heureka badge on the product pages but also find out where to place it for maximum effect. So he created four versions of the product page and tested them against the original.

Here are the four variations he tested:

Version 1: Heureka badge along with ratings just below the add to cart button


Version 2: Only the badge just below the add to cart button


Version 3: Slide-in ratings on the right side


Version 4: Slide-in ratings on the left side


If you hover over the ratings sidebar, it expands to show details of ratings and reviews like this:


More than 90,000 visitors became a part of the test with revenue tracking being the primary goal.

The winner recorded an increase of 7.5% in revenue with 95% statistical significance. We will reveal which variation won on this same space, one week from now, on October 16, 2014.

Tell us which Version you Think Won. And why?

Meanwhile, we would love to hear your thoughts on the test. Which version according to you got the company an additional 7.5% revenue? We will share the best answers in next week’s edit.

Share your thoughts in the comments section below or join the discussion on LinkedIn, Twitter, Facebook or G+

Don’t forget to add the hashtag #VWOCaseStudy with your answers. See ya!:)

The post Adding Customer Reviews Increased Revenue by 7.5% appeared first on VWO Blog.

See the article here:

Adding Customer Reviews Increased Revenue by 7.5%


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


Adding Sign-up Form on the Homepage Increased Conversions by 43.85%

The Company

Tom’s Planner is a web based project planning software that allows users to create and share Gantt Charts and project plans easily. Individuals can sign up for a free account on their website and begin using the planner right away.

The website’s homepage has two CTA buttons above the fold – to sign up for an account and to watch a demo of the software.

This is how the original home page of the website looked:


The Test

To improve the conversions of the homepage, Tom at Tom’s Planner decided to add a sign-up form, above the fold, on the homepage.

Using Visual Website Optimizer, he created a variation with the sign-up form and set it to test against the original homepage. The form had just 4 fields and a directional cue was added to direct attention to the form.

Here’s how the new homepage looked:

Variation of Tom's Planner homepage

Close to 3000 visitors became part of this A/B test and the result was in favor of the variation. The new homepage with the sign-up form recorded 43.85% more conversions.

Here’s a quick comparison image showing the original homepage and variation:

Comparison image - ab testing on homepage of Tom's Planner website

Why the Variation Won

1) The sign-up form was placed above the fold

To sign up for an account on the original homepage, there was one CTA button above the fold. Adding the form on the page increased the likelihood of visitors signing up as they could see the form right on the homepage, above the fold. And they didn’t have to click-through a CTA button or reach a different page to create an account.

2) Short form with just 4 fields

Since the sign-up form had only 4 fields, it decreased the friction of signing up for an account. The form asked for just one information from the visitors – an email. Visitors didn’t have to shell out any other personal detail to create an account.

3) Adding a directional cue pointing towards the form

It has been proven in multiple eye-tracking studies, that directional cues get immediate attention and visitors can’t help but notice in the direction they point. The arrow pointing towards the sign-up form increased the form’s visibility and gave users a clear path of action.

Let’s Talk!

If you visit Tom’s Planner website you will find couple of other changes on the homepage. Tom is trying out even more tests on his website right now.

Let’s help him drive more conversions on the homepage by suggesting more ideas that he can test. Share your optimization tricks and tips in the comments section below!

The post Adding Sign-up Form on the Homepage Increased Conversions by 43.85% appeared first on VWO Blog.

View original – 

Adding Sign-up Form on the Homepage Increased Conversions by 43.85%


VWO acquires Concept Feedback – Get winning A/B testing ideas through expert UX feedback

We’re proud to announce the acquisition of Concept Feedback, a leading community and resource for locating and contracting with website design and user experience (UX) experts that is used by brand marketers to increase conversion rates.

VWO acquires Concept Feedback

As part of the acquisition, Concept Feedback’s offering will be gradually integrated with Visual Website Optimizer (VWO), with Concept Feedback continuing to operate independently. Concept Feedback aligns with VWO’s flagship feature, the IdeaFactory; a curated library of more than 300 testing ideas and case studies for website optimization and conversion tracking. Concept Feedback will provide a similar functionality, enabling VWO’s customers to tap into expertise and new ideas from thousands of UX designers.

The primary reason we’re acquiring Concept Feedback is because we LOVE the community of 26,000+ designers that has blossomed there. We’ve had a long relationship with Concept Feedback. Back in 2010, we got feedback from the Concept Feedback community on the design of Visual Website Optimizer’s homepage. The community is so fantastic that one of the members even provided a mockup for an entirely new redesign. Recently, for the new design of VWO.com we got done this fantastic explanatory video on A/B testing by Andrew’s new company Demoduck. Andrew moved on from Concept Feedback, a project that he poured his soul into for a long time, which was co-developed by the awesome team of DevBridge.

So when Andrew was looking for a new caretaker for the community, we leaped for it.

VWO was built to remove the barrier of technical expertise limitations in website A/B testing, a major pain point for marketers looking to optimize their online businesses. As marketers begin to realize there is a quick and easy way to perform optimization tests, their next logical step is to expand into new testing areas, as we’ve seen with the emerging ‘Power Tester’ class – people who consistently launch multiple website tests per month to increase conversions and revenue.

Aligning Concept Feedback with VWO and IdeaFactory will bring an endless supply of new ideas, best practices and expertise from carefully vetted design and testing experts to the table for VWO’s customers. Having website optimization ‘always-on’ democratizes the process, allowing businesses of all sizes to have the same success as those with massive marketing budgets.

This marriage of A/B testing and expert UX / web design feedback will benefit both the Concept Feedback community of 26,000 users and VWO’s 3700+ customers, and we’re super excited about this made-in-heaven match!

In case you’re interested, here’s the coverage by VentureBeat

The post VWO acquires Concept Feedback – Get winning A/B testing ideas through expert UX feedback appeared first on VWO Blog.

See original article – 

VWO acquires Concept Feedback – Get winning A/B testing ideas through expert UX feedback


Efficiently Simplifying Navigation, Part 3: Interaction Design

Having addressed the information architecture1 and the various systems2 of navigation in the first two articles of this series, the last step is to efficiently simplify the navigation experience — specifically, by carefully designing interaction with the navigation menu.

When designing interaction with any type of navigation menu, we have to consider the following six aspects:

  • symbols,
  • target areas,
  • interaction event,
  • layout,
  • levels,
  • functional context.

It is possible to design these aspects in different ways. Designers often experiment with new techniques3 to create a more exciting navigation experience. And looking for new, more engaging solutions is a very good thing. However, most users just want to get to the content with as little fuss as possible. For those users, designing the aforementioned aspects to be as simple, predictable and comfortable as possible is important.


Users often rely on small visual clues, such as icons and symbols, to guide them through a website’s interface. Creating a system of symbolic communication throughout the website that is unambiguous and consistent is important.

The first principle in designing a drop-down navigation menu is to make users aware that it exists in the first place.

The Triangle Symbol

A downward triangle next to the corresponding menu label is the most familiar way to indicate a drop-down menu and distinguish it from regular links.

A downward triangle next to the menu label is the most reliable way to indicate a drop-down. (Source: CBS5) (View large version6)

If a menu flies out, rather than drops down, then the triangle or arrow should point in the right direction. The website below is exemplary because it also takes into account the available margin and adjusts the direction in which the menu unfolds accordingly.

A triangle or arrow pointing in the right direction is the most reliable way to indicate a fly-out menu. (Source: Currys8) (View large version9)

The Plus Symbol

Another symbol that is used for opening menus is the plus symbol (“+”). Notice that the website below mixes symbols: an arrow for the top navigation menu and a “+” for the dynamic navigation menu to the left (although an arrow is used to further expand the dynamic menu — for example, to show “More sports”).

Some websites use a “+” to drop down or fly out menus. (Source: Nike11) (View large version12)

Mixing symbols can be problematic, as we’ll see below. So, if you ever add functionality that enables users to add something (such as an image, a cart or a playlist), then “+” would not be ideal for dropping down or flying out a menu because it typically represents adding something.

The Three-Line Symbol

A third symbol often used to indicate a navigation menu, especially on responsive websites, is three horizontal lines.

Three horizontal lines is frequently used for responsive navigation menus. (Source: Nokia14) (View large version15)

Note a couple of things. First, three lines, like a grid16 and a bullet list17 icon, communicate a certain type of layout — specifically, a vertical stack of entries. The menu’s layout should be consistent with the layout that the icon implies. The website below, for example, lists items horizontally, thus contradicting the layout indicated by the menu symbol.

Three lines do not work well if the menu items are not stacked vertically. (Source: dConstruct 201219) (View large version20)

The advantage of the more inclusive triangle symbol and the label “Menu” is that they suit any layout, allowing you to change the layout without having to change the icon.

Secondly, even though three lines are becoming more common, the symbol is still relatively new, and it is more ambiguous, possibly representing more than just a navigation menu. Therefore, a label would clarify its purpose for many users.

An accompanying label would clarify the purpose of the three lines. (Source: Kiwibank22) (View large version23)

Consistent Use Of Symbols

While finding symbols that accurately represent an element or task is important, also carefully plan their usage throughout the website to create a consistent appearance and avoid confusion.

Notice the inconsistent use of symbols in the screenshot below. The three lines in the upper-right corner drop down the navigation menu. The three lines in the center indicate “View nutrition info.” The “Location” selector uses a downward triangle, while the “Drinks” and “Food” menus, which drop down as well, use a “+” symbol.

Inconsistent symbols lead to confusion. (Source: Starbucks25) (View large version26)

While using multiple symbols for a drop-down menu is inconsistent, using arrows for anything other than a drop-down menu causes problems, too. As seen below, all options load a new page, rather than fly out or drop down a menu.

Using a triangle or arrow for anything other than a drop-down or fly-out menu can cause confusion. (Source: Barista Prima28) (View large version29)

This leads to a couple of problems. First, using arrows for regular links — whether to create the illusion of space30 or for other reasons — puts pressure on you to consistently do the same for all links. Otherwise, users could be surprised, not knowing when to expect a link to load a simple menu or a new page altogether. Secondly, a single-level item, such as “Products”, could conceivably be expanded with subcategories in the future. A triangle could then be added to indicate this and distinguish it from single-level entries, such as the “About” item.

Users generally interpret an arrow to indicate a drop-down or fly-out menu. And they don’t have any problem following a link with no arrow, as long as it looks clickable. It is best not to mix these two concepts.


  1. 1 http://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
  2. 2 http://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/
  3. 3 http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  5. 5 http://www.cbs.com/shows/bad-teacher/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  8. 8 http://www.currys.co.uk/gbuk/index.html
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  11. 11 http://www.nike.com/us/en_us/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  14. 14 http://nokia.com
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/08/grid.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/08/bullet_list.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  19. 19 http://2012.dconstruct.org
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  22. 22 http://kiwibank.co.nz/
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  25. 25 http://www.starbucks.com/menu/catalog/product?drink=bottled-drinks#view_control=product
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  28. 28 http://www.baristaprima.ca/
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  30. 30 http://baymard.com/blog/ux-illusion-of-space

The post Efficiently Simplifying Navigation, Part 3: Interaction Design appeared first on Smashing Magazine.

Taken from:

Efficiently Simplifying Navigation, Part 3: Interaction Design


Why Random A/B Testing is a One Night Stand

A/B Testing VS. CRO

So you run a test or two, have your moments of virtual euphoria and promise yourself to roll out a meticulous Conversion Rate Optimization (CRO) strategy to increase website sales and revenue. But then… You lose steam, the inspiration wears off, you don’t have the time or the mental bandwidth to conduct the research this “long and winding” process requires. You want quick, Flash-like results, so you give into the delicious temptation of running more random tests.

A successful random test, after all, is like a seductress. The northward-looking graphs, that beautiful-almost-perfect statistical significance, the simple awareness that a mere tweak can bring in so much more fortune. It’s all nothing short of a digital orgasm.

The case for random testing

As the headline of this article suggests, there are going to be some hidden and not-so-hidden innuendos around one-night stands. So if morally-questionable analogies aren’t your thing, try to make them your thing and read ahead. Here are some virtues of random testing:

They are seductive. Addictive too

A/B testing is seductive. It works like a charm. Run one successful test and those shiny numbers won’t let you sleep in the night. Buoyant by the successful result of one test, you will want to jump on to the next bed test.

Immediate gratification

The ratio of “time invested” against “gains in sales/revenue figure” is high. You invest 5 minutes setting up a mindless test and you get a conversion boost of 10%. Similarly, you invest 15 minutes in a bar (modesty is thy name) and get some massive ego/vitality/happiness boost. That’s some insane luck and optimization of time. Rejoice while it lasts.

Justify your existence

Getting nasty e-mails from the boss? He wants results and you need to justify your fancy designation and salary. Run a quick test and justify your existence.

Releases ‘feel-good’ hormones

Research has shown that running a successful A/B test makes the brain release a feel-good chemical called Dopamine. Well, that’s a giant piece of lie. But you get the idea. Successful tests make you feel good. And so does good sex.

But the flip side…

You are not going to be lucky every night time

You might have had beginner’s luck, but not every random test is going to end up on your success list. You are going to make some bad choices and that’s going to lead to some fantastic where-did-I-lose-it-kind-of-existential-crisis.

There is going to be a void

A random CTA change might lift your conversions, but the increase is going to be just a pebble in the pond. It won’t significantly affect your bottom-line. You will have to make big, research-backed design changes to fill the conversion-shaped emptiness of your website.

In short, you will have to learn to live with a permanent void in the world of random testing.

You will be like a rolling stone

However fancy Bob Dylan may have made it sound, but living a life with no direction and plan is kind of uninspiring after a while. With random testing, it’s like the 60’s hippie movement. Each day as it comes. There is going to be no plan to fall back upon. There are going to be a few good tests and then there are going to be many that suck.

So random testing is okay while you are still testing the waters of optimization, trying out a tool, selling the concept to your boss or just discovering its virtues. But you need a streamlined process, a well-oiled structure and something more stable and scientific to be able to use A/B testing in the long run to increase conversions.

The case for CRO

You need a Conversion Rate Optimization (CRO) strategy. A strategy which stands upon the wheels of research, asking questions, arriving at a hypothesis, testing, reporting and analyzing. A/B testing is not equivalent to CRO, it’s just a part of the CRO process. Albeit, the sexiest part. The CRO process requires planning, thought, commitment and patience – all the hallmarks of a wholesome marriage. So, here’s why CRO is a lot like marriage.

There’s the courtship period

You can’t jump into bed with CRO right away, there’s a courtship phase wherein you lay out the strategy, work on a process, figure out the rules and prepare the ground for a sound and long association.

Requires commitment

Once you commit yourself to a CRO plan, you will have to keep infidelity at bay. Random testing will be lurking at many corners, trying to seduce you with the sinful promise of the forbidden and the mysterious. But you will have to keep your eyes fixed on the strategy at hand so as not to ruin the marriage. Difficult, but worthwhile in the long run.

But it will make you richer

Or at least your bosses. And if you are lucky, the fortune should trickle down. CRO can holistically work to lift your conversions the way random/fluke testing can’t. Of course, there’s no guarantee. But making research-backed design changes that significantly change visitors’ behavior on the website is more likely to increase your bottom-line than making a mere CTA color change.

Happy conversion optimization to you

If you want to find out a bit more about A/B testing and CRO, you can check out the following resources:

The post Why Random A/B Testing is a One Night Stand appeared first on VWO Blog.

Visit site: 

Why Random A/B Testing is a One Night Stand


Redirecting Tablet Users to Desktop Website Increased Revenue by 71.81%

The Company

Shirtinator is one of Europe’s leading online providers of customized textiles and personalized gifts such as custom t-shirts, hoodies, personalized mugs and more. They have a website for desktop and laptop users and any traffic coming from mobile devices including tablets is redirected to a dedicated mobile website. This is how a product page from their mobile website looks:

Shirtinator Mobile Webpage

The Problem

Since the mobile website was created keeping in mind the small screen of phones, it wasn’t very well optimized for tablet devices. Simon at Shirtinator wanted to try sending the traffic coming from tablets to the new HTML5-based desktop website that they were developing.

The Test

The folks at Shirtnator set up a split URL test with VWO for the traffic segment coming only from android-based tablets. Visitors, who became part of the test, were equally split between two different versions of the website – the mobile-based version and the new HTML5-based desktop version.

To understand how to perform traffic segmentation, you can read this article from our KnowledgeBase.

Here’s how a product page from their new HTML5 website looks:

Shirtinator Desktop Webpage


To be absolutely sure of the business impact of the test, they set up revenue tracking in VWO for this test. The new HTML5-based website outperformed the mobile website for tablet users by a stellar 71.81% in terms of absolute revenue and 32% increase in number of orders completed.

Here’s a quick comparison image:

Split Test Comparison Image

Takeaways from the Test

Mobile experience cannot always be scaled up to an optimum tablet experience. Mobile websites and apps are usually made such that there is no left or right content and design demarcation. And users have to vertically scroll through the content. If we scale this design up for a bigger and wider tablet screen, it will lead to a lot of space being wasted and no proper eye-path for visitors. Shirtinator mobile website which was made in mind keeping the smaller screen of phones thus wouldn’t have been a perfect fit for tablet users. Trying to send traffic to the regular website instead, worked in favor of them.

It has also been confirmed in a usability study by the NNGroup that regular websites with little modifications work fairly well on tablets and one of the primary uses of tablet devices is web browsing.

You should also read a similar case-study by Smashing Magazine, where they abandoned their mobile website altogether and adopted a responsive design to give users best experience on all types of devices.

If you have an eCommerce website, you should have a look at this built-in report in Google Analytics to find out the percentage of traffic coming from desktop, mobile and tablet. And if you have a sizeable percentage of traffic coming from tablets, it makes complete sense to optimize UX for them. You can read these four things, from the Econsultancy blog, to avoid when creating a tablet experience for customers.

I would love to know if you have had a similar experience of optimizing specifically for tablet users. How was it for you? What did you learn about this user segment that you previously didn’t know. Let’s take it further in the comments section!

The post Redirecting Tablet Users to Desktop Website Increased Revenue by 71.81% appeared first on VWO Blog.

Link to original – 

Redirecting Tablet Users to Desktop Website Increased Revenue by 71.81%


Crazy Minimal Homepage Increased Leads for an SEO Service Company from 1.39% to 13.13%

The split testing campaign I am going to talk about in today’s case study was named the “crazy minimal homepage” campaign. The change was no less crazy; the company decided to wipe off their entire homepage and show just the sign-up form.

The Company

TheHOTH is a white label SEO service company. They provide link building services for agencies and SEO re-sellers. On their website’s original homepage, they have a video & a sign-up form (above the fold), customer logos, testimonials as well as other necessary and good-to-have elements.

Here is how their original homepage looks:


The Problem

TheHOTH was getting a decent amount of traffic on their homepage but their conversions were pretty low. They tested their headline and added / removed some page elements among other changes. But nothing brought them significant results.

The Research

They decided to dig some data to understand about the people who were signing up for an account. The analysis showed them that most of their sign-ups were coming from referrals, word-of-mouth and direct search.

The Hypothesis

The test hypothesis was that eliminating everything from the homepage and keeping just the sign-up form on the page would increase conversion of visitors to account sign-ups. They wanted to test this, as a substantial portion of visitors coming to their website were already familiar with the brand.

The Test

The company setup a split test with VWO and the traffic was split between 2 versions of the homepage: the original and the minimal homepage with only the sign-up form. The test ran for 30 days and close to 3000 visitors became a part of the test.

Here is how the variation page looks:


The Result

The minimal homepage increased account signups for TheHOTH from 1.39% to 13.13%. Needless to say, this was a home run for them.


Why The Minimal Homepage Worked

  • Broadly traffic coming to a website can be divided into 5 mediums: direct, search, social, referral and paid.
    Majority of visitors coming on TheHOTH website were from the direct and referral category. Hence, they had some background knowledge of the company already. This was also true for the social traffic. A very large portion of their search traffic also came from branded keywords (see data from Alexa below). Hence, visitors of the website had a certain level of trust in the brand already. Probably to learn more about the offering the visitors signed up for an account since no information about the service was present on the landing page.

Challenges with a Minimal Homepage

1) Quality of Leads

A major challenge with having such a design is that many people will enter in to understand the product or service and may later realize that it is not a good fit for them.

Alternatively, this would give the company a lot of leads to educate and convince about the product / service.

Clayton at TheHOTH (who setup this test) explained that they are also concerned about the quality of leads that would enter the system unaware or less aware of the service. They’re solving this by adding more information after signup, reaching out to customers via phone & email, and implementing an educational auto-responder to deliver value to their signups.

2) Additional Pressure on Sales

More number of less quality leads would put an additional level of pressure on the sales department. They would have a hard time differentiating between the already motivated leads and those who entered just to understand the offering.

3) Low Trust

Since there is nothing except the sign-up form on the variation page, users have no way of finding out more about the company. This could lead to low trust.

It would be interesting to see the results of the test with a third variation that has the sign-up form on the left and a testimonial on the right hand side. (something like below)

Test suggestion for TheHOTH homepage

This was one interesting usage of VWO that came our way. I would really be interested in knowing your thoughts on why the crazy minimal homepage worked. And what do you think about it in general? Looking forward to hear from you in the comments section!

The post Crazy Minimal Homepage Increased Leads for an SEO Service Company from 1.39% to 13.13% appeared first on VWO Blog.

Read this article:  

Crazy Minimal Homepage Increased Leads for an SEO Service Company from 1.39% to 13.13%