Tag Archives: chief

Thumbnail

Everything You Need To Know About Alignment In Flexbox




Everything You Need To Know About Alignment In Flexbox

Rachel Andrew



In the first article of this series, I explained what happens when you declare display: flex on an element. This time we will take a look at the alignment properties, and how these work with Flexbox. If you have ever been confused about when to align and when to justify, I hope this article will make things clearer!

History Of Flexbox Alignment

For the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design. So the ability to properly align items and groups of items was for many of us the most exciting thing about Flexbox when it first started to show up in browsers. Alignment became as simple as two lines of CSS:

See the Pen Smashing Flexbox Series 2: center an item by Rachel Andrew (@rachelandrew) on CodePen.

The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification. This specification details how alignment works across the various layout contexts. This means that we can use the same alignment properties in CSS Grid as we use in Flexbox — and in future in other layout contexts, too. Therefore, any new alignment capability for flexbox will be detailed in the Box Alignment specification and not in a future level of Flexbox.

The Properties

Many people tell me that they struggle to remember whether to use properties which start with align- or those which start with justify- in flexbox. The thing to remember is that:

  • justify- performs main axis alignment. Alignment in the same direction as your flex-direction
  • align- performs cross-axis alignment. Alignment across the direction defined by flex-direction.

Thinking in terms of main axis and cross axis, rather than horizontal and vertical really helps here. It doesn’t matter which way the axis is physically.

Main Axis Alignment With justify-content

We will start with the main axis alignment. On the main axis, we align using the justify-content property. This property deals with all of our flex items as a group, and controls how space is distributed between them.

The initial value of justify-content is flex-start. This is why, when you declare display: flex all your flex items line up against the start of the flex line. If you have a flex-direction of row and are in a left to right language such as English, then the items will start on the left.


The items are all lined up in a row starting on the left


The items line up to the start (Large preview)

Note that the justify-content property can only do something if there is spare space to distribute. Therefore if you have a set of flex items which take up all of the space on the main axis, using justify-content will not change anything.


The container is filled with the items


There is no space to distribute (Large preview)

If we give justify-content a value of flex-end then all of the items will move to the end of the line. The spare space is now placed at the beginning.


The items are displayed in a row starting at the end of the container — on the right


The items line up at the end (Large preview)

We can do other things with that space. We could ask for it to be distributed between our flex items, by using justify-content: space-between. In this case, the first and last item will be flush with the ends of the container and all of the space shared equally between the items.


Items lined up left and right with equal space between them


The spare space is shared out between the items (Large preview)

We can ask that the space to be distributed around our flex items, using justify-content: space-around. In this case, the available space is shared out and placed on each side of the item.


Items spaced out with even amounts of space on each side


The items have space either side of them (Large preview)

A newer value of justify-content can be found in the Box Alignment specification; it doesn’t appear in the Flexbox spec. This value is space-evenly. In this case, the items will be evenly distributed in the container, and the extra space will be shared out between and either side of the items.


Items with equal amounts of space between and on each end


The items are spaced evenly (Large preview)

You can play with all of the values in the demo:

See the Pen Smashing Flexbox Series 2: justify-content with flex-direction: row by Rachel Andrew (@rachelandrew) on CodePen.

These values work in the same way if your flex-direction is column. You may not have extra space to distribute in a column however unless you add a height or block-size to the flex container as in this next demo.

See the Pen Smashing Flexbox Series 2: justify-content with flex-direction: column by Rachel Andrew (@rachelandrew) on CodePen.

Cross Axis Alignment with align-content

If you have added flex-wrap: wrap to your flex container, and have multiple flex lines then you can use align-content to align your flex lines on the cross axis. However, this will require that you have additional space on the cross axis. In the below demo, my cross axis is running in the block direction as a column, and I have set the height of the flex container to 60vh. As this is more than is needed to display my flex items I have spare space vertically in the container.

I can then use align-content with any of the values:

See the Pen Smashing Flexbox Series 2: align-content with flex-direction: row by Rachel Andrew (@rachelandrew) on CodePen.

If my flex-direction were column then align-content would work as in the following example.

See the Pen Smashing Flexbox Series 2: align-content with flex-direction: column by Rachel Andrew (@rachelandrew) on CodePen.

As with justify-content, we are working with the lines as a group and distributing the spare space.

The place-content Shorthand

In the Box Alignment, we find the shorthand place-content; using this property means you can set justify-content and align-content at once. The first value is for align-content, the second for justify-content. If you only set one value then both values are set to that value, therefore:

.container 
    place-content: space-between stretch;

Is the same as:

.container 
    align-content: space-between; 
    justify-content: stretch;

If we used:

.container 
    place-content: space-between;

This would be the same as:

.container 
    align-content: space-between; 
    justify-content: space-between;

Cross Axis Alignment With align-items

We now know that we can align our set of flex items or our flex lines as a group. However, there is another way we might wish to align our items and that is to align items in relationship to each other on the cross axis. Your flex container has a height. That height might be defined by the height of the tallest item as in this image.


The container height is tall enough to contain the items, the third item has more content


The container height is defined by the third item (Large preview)

It might instead be defined by adding a height to the flex container:


The container height is taller than needed to display the items


THe height is defined by a size on the flex container (Large preview)

The reason that flex items appear to stretch to the size of the tallest item is that the initial value of align-items is stretch. The items stretch on the cross access to become the size of the flex container in that direction.

Note that where align-items is concerned, if you have a multi-line flex container, each line acts like a new flex container. The tallest item in that line would define the size of all items in that line.

In addition to the initial value of stretch, you can give align-items a value of flex-start, in which case they align to the start of the container and no longer stretch to the height.


The items are aligned to the start


The items aligned to the start of the cross axis (Large preview)

The value flex-end moves them to the end of the container on the cross axis.


Items aligned to the end of the cross axis


The items aligned to the end of the cross axis (Large preview)

If you use a value of center the items all centre against each other:


The items are centered


Centering the items on the cross axis (Large preview)

We can also do baseline alignment. This ensures that the baselines of text line up, as opposed to aligning the boxes around the content.


The items are aligned so their baselines match


Aligning the baselines (Large preview)

You can try these values out in the demo:

See the Pen Smashing Flexbox Series 2: align-items by Rachel Andrew (@rachelandrew) on CodePen.

Individual Alignment With align-self

The align-items property means that you can set the alignment of all of the items at once. What this really does is set all of the align-self values on the individual flex items as a group. You can also use the align-self property on any individual flex item to align it inside the flex line and against the other flex items.

In the following example, I have used align-items on the container to set the alignment for the group to center, but also used align-self on the first and last items to change their alignment value.

See the Pen Smashing Flexbox Series 2: align-self by Rachel Andrew (@rachelandrew) on CodePen.

Why Is There No justify-self?

A common question is why it is not possible to align one item or a group of the items on the main axis. Why is there no -self property for main axis alignment in Flexbox? If you think about justify-content and align-content as being about space distribution, the reason for their being no self-alignment becomes more obvious. We are dealing with the flex items as a group, and distributing available space in some way — either at the start or end of the group or between the items.

If might be also helpful to think about how justify-content and align-content work in CSS Grid Layout. In Grid, these properties are used to distribute spare space in the grid container between grid tracks. Once again, we take the tracks as a group, and these properties give us a way to distribute any extra space between them. As we are acting on a group in both Grid and Flexbox, we can’t target an item on its own and do something different with it. However, there is a way to achieve the kind of layout that you are asking for when you ask for a self property on the main axis, and that is to use auto margins.

Using Auto Margins On The Main Axis

If you have ever centered a block in CSS (such as the wrapper for your main page content by setting a margin left and right of auto), then you already have some experience of how auto margins behave. A margin set to auto will try to become as big as it can in the direction it has been set in. In the case of using margins to center a block, we set the left and right both to auto; they each try and take up as much space as possible and so push our block into the center.

Auto margins work very nicely in Flexbox to align single items or groups of items on the main axis. In the next example, I am achieving a common design pattern. I have a navigation bar using Flexbox, the items are displayed as a row and are using the initial value of justify-content: start. I would like the final item to be displayed separated from the others at the end of the flex line — assuming there is enough space on the line to do so.

I target that item and give it a margin-left of auto. This then means that the margin tries to get as much space as possible to the left of the item, which means the item gets pushed all the way over to the right.

See the Pen Smashing Flexbox Series 2: alignment with auto margins by Rachel Andrew (@rachelandrew) on CodePen.

If you use auto margins on the main axis then justify-content will cease to have any effect, as the auto margins will have taken up all of the space that would otherwise be assigned using justify-content.

Fallback Alignment

Each alignment method details a fallback alignment, this is what will happen if the alignment you have requested can’t be achieved. For example, if you only have one item in a flex container and ask for justify-content: space-between, what should happen? The answer is that the fallback alignment of flex-start is used and your single item will align to the start of the flex container. In the case of justify-content: space-around, a fallback alignment of center is used.

In the current specification you can’t change what the fallback alignment is, so if you would prefer that the fallback for space-between was center rather than flex-start, there isn’t a way to do that. There is a note in the spec which says that future levels may enable this.

Safe And Unsafe Alignment

A more recent addition to the Box Alignment specification is the concept of safe and unsafe alignment using the safe and unsafe keywords.

With the following code, the final item is too wide for the container and with unsafe alignment and the flex container on the left-hand side of the page, the item becomes cut off as the overflow is outside the page boundary.

.container   
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: unsafe center;


.item:last-child 
    width: 200px;

The overflowing item is centered and partly cut off


Unsafe alignment will give you the alignment you asked for but may cause data loss (Large preview)

A safe alignment would prevent the data loss occurring, by relocating the overflow to the other side.

.container   
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: safe center;


.item:last-child 
    width: 200px;

The overflowing item overflows to the right


Safe alignment tries to prevent data loss (Large preview)

These keywords have limited browser support right now, however, they demonstrate the additional control being brought to Flexbox via the Box Alignment specification.

See the Pen Smashing Flexbox Series 2: safe or unsafe alignment by Rachel Andrew (@rachelandrew) on CodePen.

In Summary

The alignment properties started as a list in Flexbox, but are now in their own specification and apply to other layout contexts. A few key facts will help you to remember how to use them in Flexbox:

  • justify- the main axis and align- the cross axis;
  • To use align-content and justify-content you need spare space to play with;
  • The align-content and justify-content properties deal with the items as a group, sharing out space. Therefore, you can’t target an individual item and so there is no -self alignment for these properties;
  • If you do want to align one item, or split a group on the main axis, use auto margins to do so;
  • The align-items property sets all of the align-self values as a group. Use align-self on the flex child to set the value for an individual item.
Smashing Editorial
(il)


See original:

Everything You Need To Know About Alignment In Flexbox

Thumbnail

What Happens When You Create A Flexbox Flex Container?




What Happens When You Create A Flexbox Flex Container?

Rachel Andrew



In a short series of articles, I’m going to spend some time in detailed unpacking of Flexbox — in the same way I have done in the past with grid. We’ll have a look at the things Flexbox was designed for, what it really does well, and why we might not choose it as a layout method. In this article, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

A Flex Container, Please!

In order to use Flexbox, you need an element that will be the flex container. In your CSS, you use display: flex:

See the Pen Smashing Flexbox Series 1: display: flex; by Rachel Andrew (@rachelandrew) on CodePen.

Let us spend a little while thinking about what display: flex really means. In the Display Module Level 3, each value of display is described as actually being a combination of two things: an inner display model, and an outer display model. When we add display: flex, we are really defining display: block flex. The outer display type of our flex container is block; it acts like a block level element in normal flow. The inner display type is flex, so items directly inside our container will participate in flex layout.

This is something you might never have really thought about but probably understand anyway. The flex container acts like any other block on your page. If you have a paragraph following by a flex container, both of these things behave as we have become accustomed to block elements behaving.

We can also define our container with a value of inline-flex which is like using display: inline flex, i.e. a flex container that acts like an inline level element, with children that participate in flex layout. The children of our inline flex container behave in the same way that children of our block flex container behave; the difference is how the container itself behaves in the overall layout.

See the Pen Smashing Flexbox Series 1: display: inline-flex; by Rachel Andrew (@rachelandrew) on CodePen.

This concept of elements having an outer display type, which defines how they behave as a box on the page (plus an inner display type) dictating how their children behave is quite useful. You can apply this thinking to any box in CSS. How does this element act? How do the children of this element act? The answers relate to their outer and inner display models.

Rows Or Columns?

Once we have defined our flex container, some initial values come into play. Without our adding any extra properties, the flex items display as a row. This happens because the initial value of the flex-direction property is row. If you don’t set it, you get a row.

The flex-direction property is how we set the direction of the main axis. Other values for flex-direction are:

  • column
  • row-reverse
  • column-reverse

With our items in a row, the items are placed with the first item at the start edge of the inline dimension and display in the order that they appear in the source. In the specification, this edge is described as main-start:


main-start is at the beginning of the row


main-start is at the start of the inline dimension (Large preview)

If we use the value column, the items begin to lay out from the start edge of the block dimension and therefore form a column.


Items laid out as a column, main-start is at the top


main-start is the start of the block dimension (Large preview)

When we use row-reverse, the location of main-start and main-end are switched; therefore, the items lay themselves out one after the other ending up in reverse order.


Items start at the end of the row


main-start is at the end of the inline dimension (Large preview)

The value column-reverse does the same thing. It’s important to remember that these values don’t “switch the order of items” although this is what we see happening, they change the place where the flow of items starts: by switching where main-start is. So our items do display in reverse order, but that is because they start laying out at the other end of the container.

It is also important to remember that when this happens, the effect is purely visual. We are asking the items to display themselves starting at the end edge; they are still flowing in the same order and this is the order that your screen reader uses and also the order they can be tabbed through. You should never use row-reverse when what you really want to do is change the order of the items. Make that change in your document source.

The Two Axes Of Flexbox

We have already exposed an important feature of flexbox: the ability to switch the main axis from row to column. This axis switching is why I think that often it is easier to understand things like alignment in Grid Layout first. With Grid, working in two dimensions, you can align on both axes in pretty much the same way. Flexbox is a little trickier because different things happen depending on whether you are working with the main axis, or the cross axis.

We have already encountered the main axis, i.e. the axis that you define as the value of flex-direction. The cross axis is the other dimension. If you have set flex-direction: row, your main axis is along the row, and your cross axis is down the columns. With flex-direction: column, the main axis is down the column and your cross axis along the rows. It is here where we need to explore another important feature of Flexbox, and that is the fact that it is not tied to the physical dimensions of the screen. We don’t talk about a row running from left to right, or a column from top to bottom, because that is not always the case.

Writing Modes

When I described row and column above, I mentioned the block and inline dimensions. This article is written in English, which is a horizontal writing mode. This means that when you ask Flexbox to give you a row, you get a horizontal display of your flex items. In this case, main-start is on the left — the place in which sentences start in English.

If I were working in a right-to-left language such as Arabic, then the start edge would be on the right:

See the Pen Smashing Flexbox Series 1: row with rtl text by Rachel Andrew (@rachelandrew) on CodePen.

The initial values of flexbox mean that if all I do is create a flex container, my items would start on the right and be displayed moving towards the left. The start edge in the inline direction is the place where sentences start in the writing mode you are using.

If you happen to be in a vertical writing mode and ask for a row, your row will run vertically, because that is the way in which rows of text run in a vertical language. You can try this by adding the writing-mode property to your flex container and setting it to the value vertical-lr. Now, when you set flex-direction to row, you get a vertical column of items.

See the Pen Smashing Flexbox Series 1: row with a vertical writing mode by Rachel Andrew (@rachelandrew) on CodePen.

So a row can run horizontally, with a main-start of the left or the right, and also run vertically with main-start at the top. It’s still a flex-direction of row even if our horizontal text accustomed minds find it hard to think of a row running vertically!

To cause the items to lay themselves out in the block dimension, we set the value of flex-direction to column or column-reverse. In English (or in Arabic), we then see the items displaying one on top of the other down the page, starting at the top of the container.

In a Vertical Writing Mode, the Block dimension runs across the page, as this is the direction blocks are laid out in those writing modes. If you ask for a column in vertical-lr, your blocks will run left to right vertically:

See the Pen Smashing Flexbox Series 1: column in vertical-lr writing mode by Rachel Andrew (@rachelandrew) on CodePen.

However, no matter in which direction the blocks are displayed, if you are working with a column then you are working in the block dimension.

Understanding the fact that a row or a column can run in different physical directions is helpful in understanding some of the terminology being used for Grid and Flexbox. We don’t refer to ‘left and right’ or ‘top and bottom’ in Flexbox and Grid because we don’t make any assumption as to the writing mode of our document. All of CSS is becoming more writing mode aware; if you are interested in some other properties and values being implemented to make the rest of CSS behave in this same way, read my article on Logical Properties and Values.

As a summary, remember that:

  • flex-direction: row

    • main axis = inline dimension
    • main-start will be where sentences begin in that writing mode
    • cross axis = block dimension
  • flex-direction: column

    • main axis = block dimension
    • main-start will be where blocks start to lay out in that writing mode
    • cross axis = inline dimension

Initial Alignment

Some other things happen when we apply display: flex. Some initial alignment happens. In a future article in this series, we will take a good look at alignment; however, in our exploration of display: flex, we should look at the initial values that are applied.

Note: It is worth noting that while these alignment properties started life in the Flexbox specification, the Box Alignment specification will ultimately supersede those defined in the Flexbox specification, as explained in the Flexbox specification.

Main-Axis Alignment

The initial value of justify-content is set to flex-start. It is as if our CSS was:

.container 
    display: flex;
    justify-content: flex-start;

This is the reason that our flex items line up at the start edge of the flex container. It’s also the reason why when we set row-reverse they switch to the end edge because that edge then becomes the start of the main axis.

When you see an alignment property which begins with justify-, then it applies to the main axis in Flexbox. So justify-content performs main-axis alignment and aligns our items to the start.

The other possible values for justify-content are:

  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly (added in Box Alignment)

These values deal with the distribution of available space in the flex container. This is why the items are moved around, or spaced out. If you add justify-content: space-between, then any available space is shared out between the items. However, this can only happen if there is free space to start with. If you had a tightly packed flex container (with no extra space after all the items had been laid out), then justify-content would do nothing at all.

You can see this if you switch your flex-direction to column. Without a height on the flex container there is no free space, so setting justify-content: space-between won’t achieve anything. If you add a height and make it so that the container is taller than is required to display the items, then the property has an effect:

See the Pen Smashing Flexbox Series 1: column with a height by Rachel Andrew (@rachelandrew) on CodePen.

Cross-Axis Alignment

Items are also aligned on the cross axis with a single line flex container; the alignment that we are performing is to align the boxes against each other in the line. In the next example, one of our boxes has more content in than all the others. Something is telling the other boxes to stretch to the same height. That something is the align-items property, which has an initial value of stretch:

See the Pen Smashing Guide to Layout: clearfix by Rachel Andrew (@rachelandrew) on CodePen.

When you see an alignment property which begins with align- and you are in flexbox, then you are dealing with cross-axis alignment, and align-items aligns the items within the flex line. The other possible values are:

  • flex-start
  • flex-end
  • center
  • baseline

If you do not want the boxes to all stretch to the height of the tallest, then setting align-self: flex-start will cause them all to align to the start edge of the cross axis.

See the Pen Smashing Flexbox Series 1: align-items: flex-start by Rachel Andrew (@rachelandrew) on CodePen.

Initial Values For The Flex Items

Finally, the flex items themselves also have initial values, they are set to:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

This means that our items will not grow by default to fill the available space on the main axis. If flex-grow were set to a positive value, this would cause the items to grow and take up any available space.

The items can shrink, however, as flex-shrink is set to the positive value of 1. This means that if we have a very narrow flex container, then the items will get as small as they can before any overflow happens. This is sensible behavior; in general, we want things to stay inside their boxes and not overflow if there is space to display them.

In order to get the best possible layout by default, flex-basis is set to auto. We will have a proper look at what that means in a future article in this series, however, most of the time you can think of auto as “big enough to fit the content”. What you will see happen, when you have flex items that fill the container, and one of those items has a larger amount of content than the others, the larger item will be given more space.

See the Pen Smashing Flexbox Series 1: initial values of flex items by Rachel Andrew (@rachelandrew) on CodePen.

This is Flexbox’s flexibility in action. With a flex-basis of auto and no sizing applied to the items, the flex items have a base size of the max-content size. This would be the size they would be if they stretched out and did no wrapping whatsoever. Then, space is taken away from each item in proportion, detailed in the following note in the flexbox specification.

“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”

The larger item has less space taken away and so we get the final layout. You can compare the two screenshots below, both taken using the example above. However, in the first screenshot, the third box has a smaller amount of content, and therefore our columns have a more equal distribution of space.


The example with a larger item shows the item taking up more space


The items flex to give the larger item more room (Large preview)

Flexbox here is helping us to end up with a reasonable end result given no other input from the person writing the CSS. Rather than reduce the space evenly and end up with a very tall item with a couple words on each line, it assigns that item more space to lay itself out. Within this kind of behavior is the key to the real use cases for Flexbox. Flexbox is at its best when used to lay sets of things out — along one axis — in a flexible and content aware way. I’m touching on a little of the detail here, but we will take a proper look at these algorithms later in this series.

Summary

In this article, I’ve taken the initial values of Flexbox, in order to explain what actually happens when you say display: flex. It’s a surprising amount once you begin to unpack it, and contained within these few properties are many of the key features of flex layouts.

Flex layouts are flexible: they try to make good choices by default about your content — squishing and stretching to get the best readability. Flex layouts are writing mode aware: the directions of row and column relate to the writing mode being used. Flex layouts allow alignment of the items as a group on the main axis, by choosing how space is distributed. They allow alignment of items within their flex line, moving the items on the cross axis in relationship to each other. Importantly, flex layouts understand how big your content is, and try to make good basic decisions in order to display it. In future articles, we will explore these areas in more depth, and consider further exactly when and why we might choose to use Flexbox.

Smashing Editorial
(il)


More: 

What Happens When You Create A Flexbox Flex Container?

Thumbnail

Better Collaboration By Bringing Designers Into The Code Review Process




Better Collaboration By Bringing Designers Into The Code Review Process

Ida Aalen



Smooth collaboration between developers and designers is something everyone aspires to, but it’s notoriously difficult. But with today’s advanced web, it’s difficult — if not impossible — to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines — developers and designers, content creators, and user experience strategists — are deeply involved from the early stages of the project. When this happens, all ends of what it takes to build a product come naturally together into a unified whole, and a thus great product.

Because of this, no one is really promoting waterfall processes anymore. Nevertheless, involving other people early on, especially people from other disciplines, can feel scary. In the worst case scenario, it leads to “design by committee.”

Moreover, both designers and content strategists often have backgrounds in fields in which a sole creative genius is still the ideal. Having someone else proof your work can feel like a threat to your creativity.

So how can you involve people early on so that you’re avoiding the waterfall, but also making sure that you’re not setting yourself up for design by committee? I found my answer when learning about code reviews.

The Aha! Moment

In July 2017, I founded Confrere together with two developers, and we quickly hired our first engineer (I’m not a developer myself, I’m more of a UX or content designer). Our collaboration was running surprisingly smoothly, so much so that at our retrospectives, the recurring theme was that we all felt that we were “doing it right.”


Three people are smiling and sitting next to each other around a computer. From left to right, they are Dag-Inge (CTO), Ida (CPO) and Ingvild (Sr. Engineer).


Dag-Inge (CTO), myself (CPO) and Ingvild (Sr. Engineer). (Large preview)

I sat down with my colleagues to try to pinpoint what exactly it was that we were “doing right” so that we could try to preserve that feeling even as our company grew and our team expanded. We came to the realization that we all appreciated that the whole team was involved early on and that we were being honest and clear in our feedback to each other. Our CTO Dag-Inge added: “It works because we’re doing it as peers. You’re not being berated and just getting a list of faults”.

The word “peer” is what gave me the aha moment. I realized that those of us working within UX, design, and content have a lot to learn from developers when it comes to collaboration.

Peer reviewing in the form of code reviews is essential to how software gets built. To me, code reviews offer inspiration for improving collaboration within our own fields, but also a model for collaborating across fields and disciplines.

If you’re already familiar with code reviews, feel free to skip the next section.

What Is A Code Review?

A code review can be done in various ways. Today, the most typical form of code review happens in the way of so-called pull requests (using a technology called git). As illustrated below, the pull requests let other people on the team know that a developer has completed code that they wish to merge with the main code base. It also allows the team to review the code: they give feedback on the code before it gets merged, in case it needs improvement.

Pull requests have clearly defined roles: there is an author and a reviewer(s).


Ingvild and Dag-Inge is setting next to each other and smiling. An arrow indicated that Ingvild has sent code to Dag-Inge.


Ingvild (the author) requests a review from Dag-Inge (the reviewer). (Large preview)

As an example, let’s say our senior engineer Ingvild has made a change to Confrere’s sign-up flow. Before it is merged into the main code base and gets shipped, she (the author) creates a pull request to request a review from our CTO Dag-Inge (the reviewer). He won’t make any changes to her code, only add his comments.


Ingvild and Dag-Inge is setting next to each other. An arrow indicates that Dag-Inge has sent comments on code back to Ingvild.


Dag-Inge comments on Ingvild’s code. (Large preview)

It’s up to Ingvild how she wants to act on the feedback she received in the review. She’ll update her pull request with the changes she sees fit.


Ingvild and Dag-Inge are sitting next to each other. An arrow indicates that Ingvild is sending back her code to Dag-Inge, having looked through the code he commented on.


Ingvild updates her code with the changes she sees fit in light of Dag-Inge’s comments. (Large preview)

When the reviewer(s) approve the pull request, Ingvild can then merge her changes with the main code base.


Ingvild and Dag-Inge are sitting next to each other. A thumbs-up is displayed on the code review Dag-Inge has sent to Ingvild. And arrow indicates she pushes this code to the main repository.


After Dag-Inge gives the thumbs up, Ingvild can push the fix to production. (Large preview)

Why Bother Doing Code Review?

If you’ve never done code review, the process above might sound bureaucratic. If you have doubts, here’s a ton of blog posts and academic research about the advantages of code review.

Code reviews set the tone for the entire company that everything we do should be open to scrutiny from others, and that such scrutiny should be a welcome part of your workflow rather than viewed as threatening.

Bruce Johnson, co-founder of Full Story

Code review reduces risk. Having someone proof your work, and also knowing someone will proof your work, helps weed out
 errors and
 heightens quality. In addition, it ensures consistency and helps every team member familiarize with more of the code base.

When done right, code review also builds a culture for collaboration and openness. Trying to understand and critique other people’s work is an excellent way to learn, and so is getting honest feedback on your work.

Always having at least two people look over the code also curtails ideas of “my” code 
and “your” code.
 It’s our code.

Considering these advantages, a review shouldn’t just be for code.

Review Principles For All Disciplines, Not Just Code

With reviews, there is always one author and one or more reviewers. That means you can involve people early on without falling into design by committee.

First, I have to mention two important factors which will affect your team’s ability to do beneficial reviews. You don’t necessarily have to have mastered them, but as a minimum, you should aspire to the following:

  • You and your colleagues respect each other and each other’s disciplines.
  • You’re sufficiently self-assured in your own role so that you feel like you can both give and receive criticism (this is also connected to the team’s psychological safety).

Even if we’re not reviewing code, there’s a lot to learn from existing best practices for code reviews.

Within our team, we try to adhere to the following principles when doing reviews:

  1. Critique the work, 
not the author.
  2. Be critical, but remain 
affable and curious.
  3. Differentiate between a) Suggestions b) Requirements, c) Points that need discussion or clarification.
  4. Move discussions from
 text to face-to-face. (Video counts)
  5. Don’t forget to 
praise the good parts! What’s clever, creative, solid, original, funny, nice, and so on?

These principles weren’t actually written down until after we discussed why our collaboration was working so well. We all felt we were allowed to and expected to ask questions and suggest improvements already, and that our motivations were always about building something great together, and not about criticising another person.

Because we were being clear about what kind of feedback we were giving, and also remembered to praise each other’s good work, doing reviews was a positive force rather than a demotivating one.

An Example

To give you an idea of how our team uses review across disciplines and throughout a process, let’s look at how the different members of our team switched between the roles of author and reviewer when we created our sign-up flow.

Step 1: Requirements gathering

Author: Ida (UX)

Reviewers: Svein (strategy), Dag-Inge (engineering), Ingvild (engineering).


A whiteboard is showing rough sketches of a sign-up form. A man (Svein) and a woman (Ingvild) are smiling and discussing.


The team gathered around the whiteboard. Svein (CEO) to the left, Ingvild (Sr. Eng), to the right. (Large preview)

Whiteboard sessions can be exhausting if there’s no structure to them. To maintain productivity and creativity, we use the author/reviewer structure, even for something as seemingly basic as brainstorming on a whiteboard. In this case, in which we were coming up with the requirements for our sign-up flow, I got to be the author, and the rest of the team gave their feedback and acted as reviewers. Because they also knew they’d be able to review what I came up with in step 2 (plenty more opportunity for adjustments, suggestions, and improvements), we worked swiftly and were able to agree upon the requirements in under 2 hours.

Step 2: Mockup with microcopy

Author: Ida (UX)

Reviewers: Ingvild (engineering), Eivind (design), Svein (strategy).


A screenshot of a Google Doc mocking up a sign-up form with comments from team members Ingvild and Ida.


By mocking up in Google docs, it’s easy for people from all disciplines to provide feedback early on. (Large preview)

As an author, I created a mockup of the sign-up flow with microcopy. Did the sign-up flow make sense, from both the user and engineering perspective? And how could we improve the flow from a design and frontend perspective? At this stage, it was essential to work in a format in which it would be easy for all disciplines to give feedback (we opted for Google Docs, but it could also have been done with a tool like InvisionApp).

Step 3: Implementing the sign-up flow

Author: Ingvild (engineering)

Reviewer: Ida (UX) and Dag-Inge (engineering).

We had agreed upon the flow, the input fields, and the microcopy, and so it was up to Ingvild to implement it. Thanks to Surge, we can automatically create preview URLs of the changes so that people who can’t read code are able to give feedback at this stage as well.

Step 4: User testing

Author: Ida (UX)

Reviewer: The users.


Two women (Ida and a user) sitting next to eachother in front of a laptop.


Ida doing user testing on a small budget. (Large preview)

Yes, we consider user testing a form of review. We brought our newly built sign-up flow face-to-face with actual users. This step gave us a ton of insight, and the most significant changes in our sign-up flow came as a result.

Step 5: Design

Author: Eivind (design)

Reviewers: Ingvild (engineering) and Ida (UX).


A screenshot from Slack. Eivind, the designer, has posted a screenshot, and Ida replies with enthusiasm.


The first version of the sign-up flow was based on existing design components. In this stage, Eivind developed some new components to help improve the design. (Large preview)

When design suddenly shows up here in step 5, it might look a lot like a waterfall process. However, our designer Eivind had already been involved as a reviewer since step 2. He gave a bunch of useful feedback at that stage and was also able to start thinking about how we could improve the design of the sign-up flow beyond the existing modules in our design system. At this step, Eivind could also help solve some of the issues that we identified in the user testing.

Step 6: Implementation

Author: Ingvild (engineering)

Reviewer: Eivind (design), Ida (UX) and Dag-Inge (engineering).

And then we’re back to implementing.

Why review works

In summary, there’s always just one author, thus avoiding design by committee. By involving a range of disciplines as reviewers early on, we avoid having a waterfall process.

People can flag their concerns early and also start thinking about how they can contribute later on. The clearly defined roles keep the process on track.

Regular Review Walkthroughs

Taking inspiration from code walkthroughs, we also do regular review walkthroughs with different foci, guided by the following principles:

  • The walkthrough is done together.
  • One person is in charge of reviewing and documenting.
  • The idea is to identify issues, not necessarily to solve them.
  • Choose a format that gives as much context as possible, so that it’s easy to act upon the findings later (e.g. InvisionApp for visual reviews, Google Docs for text, and so on).

We’ve done review walkthroughs for things such as accessibility audits, reviewing feature requests, auditing the implementation of the design, and doing heuristic usability evaluations.

When we do our quarterly accessibility reviews, our accessibility consultant Joakim first goes through the interface and documents and prioritizes the issues he’s found in a shared Google Sheet. Joakim then walks us through the most important issues he’s identified.

Meeting face-to-face (or at least on video) to go through the issues helps create an environment for learning rather than a feeling of being supervised or micromanaged.


Three people in a sofa gathered around a laptop. They’re discussing and smiling.


Accessibility review: Joakim (right) walks Ingvild and Dag-Inge through the accessibility issues he found in his audit. (Large preview)

If you find yourself always being tied up with something that’s due for release, or fixing whatever is at the top of your inbox, reviews can help remedy that. If you set aside regular half days for reviewing work you’ve already done, you can identify issues before they become urgent. It can also help you refocus and make sure you’re priorities are keeping along the right lines. Your team should maybe not begin building that new feature before you’re confident that the existing features are living up to your standards.

User Testing Is A Form Of Review

An important motivation for code reviews is to reduce risk. By doing it every single time you introduce a change or add something new to your product, and not just when you suspect something is maybe not up to par, you diminish the chance of shipping bugs or subpar features. I believe we should look at user testing from the same perspective.

You see, if you want to reduce the risk of shipping with major usability issues, user testing has to be part of your process. Just having your UX designers review the interface isn’t enough. Several studies have found that even usability experts fail in identifying every actual usability problems. On average, 1 in 3 issues identified by experts were false alarms — they weren’t issues for users in practice. But worse, 1 in 2 issues that users did in fact have, were overlooked by the experts.

Skipping user testing is just as big a risk as skipping code review.

Does Review Mean Death To Creativity?

People working within design, user experience, and content often have educational backgrounds from art schools or maybe literature, in which the sole creator or creative artistic genius is hailed as the ideal. If you go back in history, this used to be the case for developers as well. Over time, this has changed by necessity as web development has grown more complex.

If you cling to the idea of creativity coming from somewhere deep within yourself, the idea of review might feel threatening or scary. Someone meddling in your half-finished work? Ouch. But if you think about creativity as something that can spring from many sources, including dialogue, collaboration, or any form of inspiration (whether from the outside or from someplace within you), then a review is only an asset and an opportunity.

As long as we’re building something for the web, there’s no way around collaborating with other people, be it within our own field or others. And a good idea will survive review.

Let’s create something great together.

Smashing Editorial
(rb, ra, yk, il)


Original article: 

Better Collaboration By Bringing Designers Into The Code Review Process

50 Creative Ideas Your Marketing Team Can Use to Improve SaaS Product Adoption & Awareness

It’s Day 2 of Product Marketing Month. Today’s post is all about accelerating your marketing teams productivity with some creative new SaaS product adoption ideas. — Unbounce co-founder Oli Gardner

You don’t need a big budget or a six-week-long strategic planning session to get started with product marketing. Sure, you’ll need to do this eventually, but it shouldn’t put on hold your product adoption and awareness tasks. Educating customers and prospects about the power and utility of what you’ve worked so hard to build is easier than you think, and today I’ll show you exactly how we think about SaaS product adoption and awareness at Unbounce.

Back in 2012 we launched The Landing Page Conversion Course (LPCC for short), and as part of the rollout, I sat down and rattled off 25 quick and easy things we could do to create awareness. It took me less than ten minutes. I then grabbed Cody and Dan, and headed to a local bar to continue the session. Between the three of us, we notched it up to sixty before our first pint was done.

Getting scrappy is a great way to mobilize your team. These impromptu brainstorms not only created over 50 ideas we could implement really quickly, but it uncovered some that would become part of a larger strategic vision. Also, one of our dogs is called Scrappy, and he’s very cute.

Last week I sat down and repeated this exercise for the new products Unbounce: popups and sticky bars. Even though my focus was our own products (you can check them out via the 3 orange buttons in the nav ^^^), the majority of this list can be applied to any business, SaaS in particular.

You can create your own list like this too

I’d encourage you to repeat this exercise, starting by yourself, and then with some team members. Encourage them to come up with crazy and ridiculous ideas, as this will help expand your minds into ideas you’d typically consider off limits. After all, setting up a stall outside a conference (not your own), handing out bacon to tired hungover attendees as they arrive in the morning, might seem bizarre, but I guarantee you’ll be the favorite sponsor of the event.

Help us out by sharing your best ideas

With the collective wisdom of all of you reading this, we should easily be able to come up with 50 or 100 more ideas, so please drop them in the comments below and if they’re awesome I’ll add them to the master list with your name/company/product listed beside them.

Below are 50 ideas you can get started on today, broken into two parts, SaaS product adoption, and SaaS product awareness.


Part One: SaaS Product Adoption Tips

Click on the ideas to show the full description and instructions.

Take a first pass at it yourself, then run a brainstorm with a shared Google doc. Take a different approach from a conventional brainstorm (where you plaster a wall with sticky notes). Instead, have everyone bring their laptop to the session. Have the team verbalize their ideas, and then enter them into the shared doc. It’ll make the process much faster.

The primary technique for content marketing is to provide educational content that helps people become better at their job – in the hopes that they will eventually end up buying your product. This is great, except for when they don’t know what your product is or why they should care.

To enhance the impact of your content, try showcasing it directly in your content. This won’t apply to every business, but if you offer any kind of website tech you can try it. If you do it right, you can create an experience that is better than the content alone.

For example click here to see a sticky bar appear at the top of the page.

I just demoed our sticky bar product by asking for your participation.

The on-click trigger is one of many options available in Unbounce, including scroll down, scroll up, entrance, exit, and timed delay.

Brainstorm ways that you might be able to show your product in the context of your content.

If your software involves building something, a great way to help with onboarding and adoption is to drive first-time evaluators into a self-guided experience within a template. That way you can show them exactly how to use the product, inside the product! #inception

Here’s the “Builder Basics” template we created for this purpose. You can use it to get the full builder experience in less than 10 minutes or less, which is perfect for showcasing initial value and improving your Time to Value (TTV) metric.

This concept allows people to try your tool without needing to already have an idea they want to build and launch. You can also use it to specifically guide people to using the features you’ve identified as having the ability to create those all-important ah ha moments.

This is something we’ve wanted to do at Unbounce for years, and it finally became a reality in December. Essentially it’s a live session inside the Unbounce builder so people can get a hands-on experience without signing up.

With an interactive sandbox experience like this, the only barrier to entry is the complexity of the product or the clarity of how you communicate its use. And because we’ll be linking to ours from tens of different campaigns and contexts, we’re using entrance popups to speak directly to the message and source that led people to the demo, as well as introduce how the demo works.

You can check out the try-before-you-buy demo here.

Entry popups are a brilliant way of scaling this idea as we can use referrer or URL or cookie targeting to show the right message to the right people.

We gave some of the top brands that use Unbounce beta access to the popups release, which was a great way to source a high-profile testimonial, like this one from Campaign Monitor.

Not everyone likes to consume content the same way. To combat this, on our demo page we offer three lengths of video: 2 mins, 10 mins, 30 mins, and live 1-on-1 sessions.

A delightful and unexpected postcard can be a lovely touch, and if people have signed up for your product or products, you’ll most likely have their mailing address. It’s important to remember that your product marketing should be focused on your customers as much as those who are prospects. Your goal here for a single product is getting dormant accounts to adopt the product. For multiple products your goal is awareness and adoption or ones that people haven’t used yet.

Something else we’ve learned is that, beyond email onboarding, those handy product tours in app can be a great way of guiding someone through new additions to a SaaS product (or otherwise). You can try out something like Appcues to add a guided tour when you go from one product to two to ensure 1) people notice something’s new, and 2) they can discover its features in a quick, interactive way.

Largely we’ve talked about awareness in this post, but product marketing needs to go beyond this, too. It’s all about who can successfully use your product, fulfilling its initial promise of value. As legendary onboarding expert Samuel Hulick advises, you need to determine all the ah-ha moments leading up to where customers find value. I.e. in a journey, what exact tasks do people need to complete before they’ll see even the smallest amount of value you advertised?

As an example, for Unbounce popups and sticky bars, we identified that for evaluators to be successful in their trial using these, they must a) build b) publish c) add the line of javascript to their site d) collect 10+ conversions. (Ten or more helps us ensure they aren’t 1-2 from simply testing the product themselves).

It’s key once you outline your product’s ah ha moments that whatever they are, they’re trackable from inside your product. This ensures you can truly measure adoption and understand where people get stuck.

Taking Sam’s advice above, when we identified our ah-ha moments to product adoption, we started tracking them, made our dashboards, and then began creating educational content designed to help people over tricky steps. You can do the same for your products, too. Either via emails, or something like a skip ahead guide for product setup, similar to the one we made:

The resource above was delivered to those who started a trial within their onboarding emails. They could skip through the progress bar of ah-ha moments or must-do tasks to see value quickly.

Part Two: SaaS Product Awareness Tips

Click on the ideas to show the full description and instructions.

Get everyone on the marketing and customer success/support team to write one letter per day for 30 days. Cap the time at 15 minutes per letter. If possible take a look at how they use your product: “I loved your landing page for the blah blah” etc. (check with your boss or legal as to whether it’s okay to mention their work – in my experience as long as you’re not making it public it’s very cool).

Here’s the product marketing kicker: don’t sell or mention the product in the letter – keep it personal and thankful – but follow your signature with a fun and made up job title that mentions the new product or feature.

For example: Oli Gardner, Chief Unbounce Sticky-Bar-with-Geo-Targeting Champion

I just mentioned the new product, and one of its features. In a delightful manner.

Bonus points if you create some content (like a custom landing page) that ranks for the keywords in that job title (and has your face on it).

Side benefit bonus: your coworkers get to rewrite their own job title every day for a month.

Ask your entire company to change their email signature to promote your new products. This can gain some exposure to different segments of potential customers. For example, your developers run in different circles than marketing, so their email conversations might connect with a different functional buyer persona. This also has the benefit of mobilizing the whole company with the same message, which is beneficial in its own right. Here’s an example email that our events manager sent to the company to help increase awareness for an event we were hosting at Hubspot’s INBOUND conference.

(Click for full-size image)

We like to have fun with our Out Of Office email autoresponders at Unbounce. Something funny or different can be a delightful way to respond to your customers and prospects when there might be a delay in responding. From a product marketing perspective, you can use this opportunity to talk about your new products or features. Try emailing me at oli@unbounce.com to see my current OOO autoresponder.

Try running a 5-second test using UsabilityHub.com to see what percentage of people can determine what your product(s) is in five seconds. Not only will you get a sense of how many can figure it out quickly, but you’ll get insights about how people might be misinterpreting your value prop. To turn this experiment into a product marketing effort, you can recruit free test participants via social media or an email list, effectively getting your product’s UVP in front of people.

If you look at the top of this page and scroll, you’ll see how the navigation bar sticks to the top (and gets slimmer to maximize the viewport). Our web developer made this. You can use a sticky bar to do something similar. If you click here, you’ll see a sticky bar with the same content appear, and because it was created in the Unbounce builder, a developer would never have been needed.

Note: I made it appear at the bottom because if it appeared at the top you wouldn’t really see it because it’s so similar to the header.

Add a link to your Twitter bio that leads to a product landing page. Double down by asking your employees/coworkers to change their Twitter header image for a period of time. You can’t add links in the main body of the bio, but you can add one below.

With a “Did you know that we have this product/feature?” to gauge awareness and create it at the same time. Have Yes/No/Tell me more options, with a link out to a landing page or product page if they say “Tell me more” or “No”. The product marketing gold in this one is that if they say “No”, you’ve made them aware of the product by simple virtue of asking the question. BOOM.

Offer early access to your product (or a free account) to influencers in your industry. If they get value from using it, ask for some social sharing love, and ask them for a testimonial you can use as social proof on upcoming campaigns and your website. We recently released an amazing Landing Page Analyzer and asked Rand Fishkin if he’d try it out and provide a testimonial. Here’s what he sent back to me:

Brilliant.

As I mentioned above, we called our new products by an umbrella term “Convertables”, including in the Unbounce app sidebar. We’ve now removed that and replaced with “Popups & Sticky Bars”. Sometimes you gotta get out of your own way, and call a spade a flippin’ spade.

Note that this was a fairly simple interface change, but there is still a massive amount of code that our engineering team had built based on the previous hierarchy. That will remain for now as we run these experiments, but it was a substantial barrier in getting buy-in to make these changes.

Overall, if you’re not being 100% clear about the context of use in the naming of your products, don’t stick with a name because you came up with it, be prepared to pivot for the sake of both awareness and adoption.

Reach out to your favourite podcasts to get on them as a guest. It helps if you have an influencer on your team. Typically, most interviewers will give you at least a small window to give your product a shout out.

Position yourself as an expert (I’d say thought leader but that term is kinda gross), by hosting or giving big-time participation to a Twitter chat session. If one exists related to what you do, join in, and offer to co-host or just help out. If there isn’t one, just f#**** make one. Start something. It’s not that hard. If it fails, so what?! Try things. Try things all the time. You’ll become a better marketer if you try.

You heard me. Get a plane flying over your city writing a romantic red script-style message in the sky. This tip comes courtesy of my wife Nicole, cos she’s hilarious.

Another gem from Nicole. Clarity is the most important part of your product’s value proposition, and as you will find out if you follow my advice with a 5-second test, not everyone gets it. I can’t imagine a more fun way to get your team describing what you do. Have them all mime it, then make a video and share it with the world. I guarantee a great time, and you’ll probably also have a team more aligned on your value prop – and perhaps some ideas for a better headline.

Wistia does a great job of this (after all they are a professional video hosting company with amazing viewer analytics, HD video delivery, and marketing tools to help understand your visitors.) << See how I did some product marketing for them there? At many conferences, you’ll see some fun and useful videos in every break where they share video production tips and some light hearted comic relief.

This is something we tried at CTA Conf in 2017 and it was awesome. In the “Product” tent, we had a bunch of workstations set up with gamified tasks which exposed the best product features. Two of the best were:

Drag & Drop Match
For this challenge, we had two screens: one showing a completed landing page and the other where the Unbounce app was open and you had to replicate the completed page from jumbled components. You had to match the two pages by dragging elements, changing widths, colors and page sections.

Lock Box
There was a locked box with sweet sweet swag inside, and to get the combination, you had to trigger a popup or sticky bar using all of the available triggering settings: click, entrance, exit, scroll down, scroll up, and timed delay. Each one had a number on it that made up the combination for the lock.

So good.

We also had some quiz questions that people could answer to get more tokens. It’s a wonderful way of marketing your products while also giving people some cool swag to remind them of you often. Your swag does need to be legit, otherwise people won’t really care enough to participate.

This is really simple and obvious, yet hardly anyone does it. Take the content you write for your blog and repurpose it in as many other formats and places as possible. For Medium write a more personal and transparent version, for LinkedIn create a shorter version and link back to the main article. Stick some slides containing visual highlights on Slideshare.

Have you talking to the camera and/or showing the coolest features of the product – and tailor them for specific search terms. For instance, we have a feature called Dynamic Text Replacement, that allows you to pass keywords from your AdWords campaigns to your landing page, increasing the relevance and often your Quality Score too. So for that we’d want to create a video called “How to use Dynamic Text Replacement to increase AdWords Quality Score”, and another called “How to use Dynamic Keyword Insertion (DKI) to increase AdWords Quality Score”, as that’s an industry term for the same thing. And always have a CTA at the end of the video, driving people to a landing page.

If you have any email drip campaigns running, add a p.s. at the bottom of each email with a mention of your new product. As always, send it to a dedicated landing page if you can.

Update your Twitter profile header image, and include a text bit.ly link (or similar). This will let you track its impact. You can see mine here.

If you have any content or tools that are in Google Sheets you can add a Google Analytics event pixel to know how many times it’s opened and which tabs are being viewed. This could help you understand what’s drawing people’s attention.

Here’s how to do it. Choose (and protect) a cell somewhere in your sheet(s), and paste this code into it:

=image(googleanalytics(“UA-xxxxxxxx-1″,”Doc Name”,”Sheet Name”))

Obviously replace the xxxxxxxx with your GA account ID, and the doc and sheet names.

When customers are on our free plan, there is a small “Built with Unbounce” strip at the bottom of the page. Link this to your best product demo.

Here’s what mine looks like currently. It talks directly about Product Marketing Month, and this now appears at the end of the 300 blog posts I’ve written!

If you put on events (meetups or a conference), bring out your inner child and write & sketch cute product references on the sidewalks around the event location. Pro tip: the curb beside a crosswalk traffic light is the best spot as people have to stand and wait. It really works, after all, the “Look Right” paint that we’re all use to seeing was created because British wartime prime minister Sir Winston Churchill was visiting New York City and got smoked by a cab because he was looking the wrong way (cars drive on the left in the UK).

If you segment your customer list by those who have adopted your product, a simple thank you card is a lovely surprise. Make sure you include a link to a landing page to ask them for feedback or a testimonial. You should always be sourcing fresh commentary to add to your marketing collateral. A bonus for this approach could be that you might get some love on social media which helps spread the word through your customer’s networks.

On mother’s day record videos of your coworkers’ moms describing what your product does. Gold, Jerry, gold. Dads for father’s day. A robot text-to-speech audio generator for cyber Monday. Spread that golden poop on social.

Look at Google Analytics for your top 20 highest traffic blog posts, then comb through them for opportunities to add a contextual explicit ask of the reader. Such as: “You can create a blah blah, like that blah blah in the photo, by using blah blah, click here to see it in action.” Pro tip: try to put this in the first two paragraphs, as older blog posts, even with high traffic, can often be bounce traps where people run at the slightest hint of a bygone expiry date.

Following on from the last one, if you show an old date, many people will leave. Remove it, and some people spend their time wondering when it was published. It’s a constant dilemma for marketing teams.

No harm in experimentation though, so throw in a single line of CSS to set the ID or class of the meta info (date etc.) to hidden. .blogMetaEtc: display:none !important; will most likely work.

Replace .blogMetaEtc with the actual class or ID. Then after a week/month (depending on traffic levels), look in GA to see if the bounce rate or time on page is different.

Note that both of those metrics can be a bit shady if it’s the only page they visit on your site, as GA can only produce a real number if you visit more than one page. But you might spot something. If you DO find that people spend more time on the “no date” version, you can focus on getting more product mentions on those posts.

Mind blown, amiright?! Might seem basic, but how often does your team Tweet about new products or product features, or customer case studies etc.

Probably very rarely.

So just ask them! But don’t waste people’s time with a long-winded and generic, “Can you Tweet this?” email.

That shit drives me bonkers, it’s total amateur hour.

Send them a three-line email that says, “Hey team, it would really help if you could give our new product launch/feature some love on social.

Here’s a Click-to-Tweet ready to go, and here’s one for LinkedIn.” etc. etc. for the social channels that matter for you.

Include a p.s. “p.s. I would like to bug you to help like this once per month, so expect emails with that frequency. Thank you!” << letting them know it’s a regular thing will A) make you do it regularly, which you should be, and B) stop you from having to grovel every time you send an email like that. You can even have a consistent “Product Marketing Tweet Request #23” in the subject line. Super clear, super simple, super respectful of people’s time.

Grab 20 people from your office and go do a dance outside the local art gallery. Choose some awesome 80s music and wear company t-shirts underneath a plain white/white/green one. Rip ‘em off and dance like tomorrow is a great day for signups.

Captions can really increase the number of times your video is watched as many people can’t or don’t want to turn up the volume. Facebook’s Power Editor can automatically caption your videos. Give it a try, and if it’s not an accurate enough translation you can still do it manually.

If you didn’t get a chance to read the first post in Product Marketing Month, you might not know that the blog design you’re looking at was a very rapid overhaul for this category only. It took one of our developers a days work to set up a different WordPress template that is way more product focused.

Start by doing a Google image search for your brand, company, products, founders, and see what shows up. I guarantee you’ll see a bunch of old logos and old product screenshots, not to mention some old hair (on the founders) :D Find those images and update them.

Wistia has shown that the default image on your videos is critical to optimizing for more plays. If your product marketing involves videos, then you need people to press play or what’s the point? This post has some great ideas.

This doesn’t have to be your core product. It can be anything that you’re releasing. We launched the Landing Page Analyzer there and managed to get to the #2 spot for the day, earning us a place in the PH newsletter.

Similar to how some ecommerce stores have a small notification appear when “Ashley from Minnesota just bought the Hawaiian Luau Shirt in Blue”, you too can share feedback from your customers and funnel this positive feedback directly onto your site via sticky bars designed to look like small push-style notifications.

In SaaS, for example, you can use a Hotjar poll to collect 2-month onboarding feedback, and then use sticky bars to funnel a the positive feedback onto your site using the on-scroll trigger. This can help address purchase anxiety by helping current prospects see who’s already starting trials and providing terrific feedback about their onboarding experience.

If you’ve got proper app security, it’s likely that your customers are automatically logged out after a given period, and will often see the login screen. This is a perfect opportunity to showcase your new products or even old ones that need a bit of love. This was a big learning for us, as we were only starting to use a portion of it (but look at all that space!!).

In Unbounce, one of the buttons you push most often is to “create”. People are very used to hitting this button, making it the perfect place to add an interstitial notification.

An interstitial is just a fancy way of saying a gateway experience that you pass through.

Something along the lines of “Did you know that you can also create website popups and sticky bars with Unbounce?” We haven’t done this yet, but the idea came from the product team during a brainstorm.

Personally, I think it’s genius.

If you have a login link on your website (don’t we all?), check Google Analytics to see how many people are clicking on it. It’s very common behaviour for people to come to your homepage every time they want to log in, which in and of itself is critical info as you should be filtering it from your website traffic.

Like the in-app “Create” button, this is a brilliant way to present an interstitial popup to tell returning customers about your latest and greatest, with a simple button to continue on their way.


Phewf! That was a lot of tips. I hope they help you get more people seeing and using your products. Let’s open this puppy up! Share your own tips below and if they rock, I’ll add ’em to the post (with attribution).

— Cheers
Oli Gardner

More: 

50 Creative Ideas Your Marketing Team Can Use to Improve SaaS Product Adoption & Awareness

Big Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study

You’ve been there: big bang redesigns are usually a very, very bad idea. Redesigning and rebuilding an existing website from scratch is risky and unpredictable, and in many cases the level of complexity is highly underrated and underestimated. In mid-2016, Smashing Magazine decided to make a big switch from the existing WordPress setup to an entirely new design, entirely new architecture (JAM Stack) and an entirely new, GitHub-based, editorial workflow.

See the original article here: 

Big Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study

How to Storyboard a Marketing Video (When You’re Not an Artist)

Whether you like it or not, content marketing is embracing the visual culture of today and moving towards video. According to HubSpot, 43% of people want to see more video content from marketers, and four times as many customers would rather watch a video about a product than read about it. Which, unfortunately, doesn’t bode well for blog posts. With written content becoming less effective as time goes on, you’re probably already thinking about creating video content as a part of your marketing strategy. You might be eager to jump right in and start creating videos, but planning your content…

The post How to Storyboard a Marketing Video (When You’re Not an Artist) appeared first on The Daily Egg.

More here: 

How to Storyboard a Marketing Video (When You’re Not an Artist)

How To Set Up An Automated Testing System Using Android Phones (A Case Study)

Regression testing is one of the most time-consuming tasks when developing a mobile Android app. Using myMail as a case study, I’d like to share my experience and advice on how to build a flexible and extensible automated testing system for Android smartphones — from scratch.

How To Set Up An Automated Testing System Using Android Phones (A Case Study)

The team at myMail currently uses about 60 devices for regression testing. On average, we test roughly 20 builds daily. Approximately 600 UI tests and more than 3,500 unit tests are run on each build.

The post How To Set Up An Automated Testing System Using Android Phones (A Case Study) appeared first on Smashing Magazine.

More: 

How To Set Up An Automated Testing System Using Android Phones (A Case Study)

Thumbnail

5 Conversion Rate Optimization Challenges For Enterprises To Solve

Although the interest in conversion rate optimization is increasing over time, organizations are unable to adopt it fully. To ensure its smooth adoption and implementation, certain challenges and misconceptions need to be addressed.

interest in conversion rate optimization google trends
Google Trends

In this post, we will talk about 5 such conversion optimization challenges that enterprises face and ways to overcome them.

Challenge 1. Politics and People—A Cultural Challenge

An organization’s culture is made of 2 core components—people (skill and mindset) and their interpersonal relationships (power to influence and politics ). Creating a conversion optimization culture becomes challenging when either people lack the understanding and skill or when influential people in the organization want their opinions to be valued more than what data and facts indicate.

Political

Brian Massey, Founder, Conversion Sciences shares his view on the political challenge as follows:

Brian Massey

Why has Donald Trump’s top-down, opinion-driven leadership style been accepted by the white-collar working public in the US? Because enterprise businesses have trained us that this is how leadership works. We have a name for this leadership style: “HiPPO,” or Highest Paid Person’s Opinion. Joel Harvey calls it Helicopter Management. This is the management style of charismatic or autocratic leaders who drive action in their organizations by helicoptering in, expressing a lightly-informed opinion, and enforcing their opinion in one of the following two ways:

* They bestow budget upon the loyal.

* They threaten the jobs of the disloyal.

So marketing teams can grab the budget and buy the latest tools. But they then struggle to find the man-hours necessary to make the tools effective.

Like all big business problems, it’s a cultural issue.”

James Spittal, Chief Executive Officer, Web Marketing ROI also talks about the HiPPO effect and the political challenge that obstructs a culture of conversion rate optimization.

James Spittal

Only a small portion of changes are A/B tested, kind of like the “HiPPO” effect. The typically small and under-resourced internal CRO team madly tries to work with an agency to get as many A/B tests launched as possible and keeps up their A/B test velocity while talking to everyone about CRO. Meanwhile, a C-level executive asks for a change to be pushed straight into the source code base without it being tested, costing the organization potentially millions of dollars and because they don’t know any better.

Keith Hagen, VP & Director of Conversion Services at Inflow views politics as an obstacle in the implementation of quality insights for any CRO program.

Keith Hagen

Not all insights are equal. One insight can be worth millions; the other may not move the needle at all while the enterprise pays its employees to test and implement that insight as well.

Terming what an insight actually is, is important as well. Insights come from customers and identify a customer obstacle or opportunity.  If you are not making something better for the customer or capitalizing better on what you have, it should not be worked on. Enterprise organizations have a lot of voices, and the higher paid voices tend to influence what optimizations are made to a site.

The solution he proposes—Score Insights Based on Their Potential.

Every insight should be scored on its potential and shared across the organization. Whether the insight is about an obstacle to a purchase or an opportunity to sell more, the potential should be assigned a dollar value so that it is clear what NOT working on the insight will cost.

People

James Spittal, Chief Executive Officer, Web Marketing ROI attributes the lack of skill—technical or development—with regard to why people in an organization pose a challenge to creating a culture of CRO.

James Spittal

This challenge simply occurs because of people in an enterprise not having the knowledge, talent, or skills. Often, we see people with a graphic design, pure web design, pure analytics, or pure UX background become the “de facto” CRO team. But they struggle because it’s unlikely that they have the technical skills or development skills to be able to implement advanced A/B test ideas (major layout changes, modals, segmentation, changing cart flows, doing tests on pricing, etc.). Often, they also struggle to get resources internally or externally and build a strong business case to increase the CRO budget.

Johann Van Tonder, COO, AWA Digital, shares similar views regarding people and the lack of talent to implement conversion optimization.

Johann Van Tonder

The challenge is to find good optimization talent. While there is no shortage of people marketing themselves as CRO practitioners, only a small percentage of the candidates we screen make it into our organization. This is the same pool that enterprises are recruiting from.  

A good optimizer is both analytical and creative, with a solid grasp of disciplines as diverse as psychology, copywriting, marketing, and statistics. They are brilliant communicators with an entrepreneurial drive and at least basic coding skills. Finding them is not easy.

Solution

The first step of creating a culture of data-driven conversion optimization in any organization is to educate the people about its benefits. Any enterprise planning to implement such a shift—moving from random A/B testing to scientific conversion optimization—must first understand the “why” behind it. That’s why we have 15 conversion rate experts share why they feel it is important to step up from A/B testing to conversion optimization.

Any cultural change requires the complete support of the top management. That’s why it is all the more important to convince it about conversion optimization. Here’s how you can use data to convince your top management about why they need conversion optimization:

  • Highlight improved user experience as a double win.
  • Present a competitive analysis.
  • Stress the gaps in your current approach.
  • Show the money.
  • Show the data.

Challenge 2. No Defined Structure that Supports CRO

It’s a huge challenge for enterprises to put together a structure that supports conversion optimization effectively. There are a number of questions that arise when addressing this challenge. Would it be beneficial to hire a dedicated conversion optimization team, or would it mean only additional expenditure? Who is responsible for conversion optimization?

With regard to this challenge, some interesting observations were listed by ConversionXL’s report on State of Conversion Optimization 2016. One of the findings quoted in the report mentions, “…only 29% of people said that there’s a single dedicated person who does optimization. 30% more said there’s a team in charge of optimization, but 41% of respondents had no one in particular that was accountable for optimization efforts.”

Some companies have internal conversion optimization teams that comprise an analyst, designer, marketer, and project manager. However, should these people invest all of their time on conversion optimization? One way of dealing with this is to have all team members allocate time between core job functions and conversion optimization.

Another challenge related to the lack of structured process to conversion optimization, as explained by Tim Ash, CEO of SiteTuners, and a digital marketing keynote speaker, is the isolation of the CRO team from the rest of the teams.

Tim Ash

The biggest problem that an enterprise CRO faces is the siloing emblematic of big companies. All job functions and even departments are compartmentalized and do not communicate well with each other. So even though a CRO group or team exists within the company, it is only able to focus on limited tactical objectives and simple split testing. Typically, CRO initiatives pass through compliance and approval reviews, get watered down by the branding gatekeepers, and then languish in the IT development queue to get implemented.

At SiteTuners, we have developed our Conversion Maturity Model to grade organizations on key aspects of their optimization effectiveness. Dimensions include culture and processes, organizational structure and skill set, measurement and accountability, the marketing technology stack, and of course the user experience across all channels.

One of the biggest determiners of success is whether there is active and consistent support for CRO from high-ranking executives. If there is political air-cover and the CRO team reports high up in the company, this team can work across the silos to tackle fundamental business issues involving products and services, the business model, back-end operational efficiencies, and fundamental user experience redesigns.

Solution

Lay down a clear process for conversion optimization that needs to be followed by everyone in the organization. Create a dashboard or platform where all the conversion optimization activities are planned, updated, and reported. Share this platform with everyone in the organization. Encourage a culture where everyone contributes to conversion optimization. However, make decisions based only on data. For example, while deciding what to test and optimize, follow a scientific hypotheses prioritization framework. The benefit—though everyone gets to share their observations and hypotheses—is that only the most relevant of those are tested.

Challenge 3. Inefficient Methodology to Implementing Conversion Optimization

Paul Rouke, Founder and CEO, PRWD points out that lack of user research is one problem in the current conversion optimization methodology followed by most enterprises.

Paul Rouke

Among enterprises, a lack of an intelligent and robust optimization methodology is a major barrier to them making experimentation a trusted and valued part of their growth strategy. Lack of user research in developing test hypotheses, alongside lack of innovative and strategic testing, instead a focus on simple A/B testing, are some of the biggest barriers which prevent enterprises from harnessing the potential strategic impact conversion optimization could have for their business.

As shown below, the interest in A/B testing is far more widespread than in conversion optimization.

interest in a/b testing vs. interest in conversion optimization - google trends
Google Trends

It is important to understand that testing random ideas based on opinions is not a smart way of testing. You may get a winning variation even by testing “ideas,” but this will not help solve the real pain points that users face. The challenge, therefore, is to eliminate guesswork; and the solution is to focus on data instead.

Here’s what Brian Massey has to say regarding eliminating guess work and relying on a behavioral data-based methodology.

Brian Massey

Enterprises are missing out on an area, that is, following Moore’s Law in terms of increasing capability and decreasing costs. Behavioral data collection is dropping precipitously in price, and new capabilities are coming online weekly. Just as Microsoft didn’t realize that mobile phone market would follow Moore’s Law, enterprises run the risk of missing the growth in Behavioral Science, a discipline designed to eliminate guessing from business strategy and tactics.

Mathilde Boyer, Head of CXO, House of Kaizen and Peter Figueredo, Founding Partner, House of Kaizen also talk about what is inefficient about the current conversion optimization methodology, as followed by some enterprises.

Mathilde Boyer

Opinion-based A/B testing is the gangrene of CRO programs. It hinders the process of objective creation and prioritization of test hypothesis. This tendency can lead to situations where a high level of resources are invested in low-impact optimization activities. Generation and prioritization of test hypothesis needs to be data-driven, systematic, repeatable, and teachable to allow for expansion of optimization activities across a business.

Peter Figueredo

Companies who invest in CRO typically rush to get testing started and overlook the importance of conducting research. Without proper research for informed testing, the design process CXO has lower chances of success. If your doctors do not know the root cause of your ailment, then they are likely only treating the symptoms but not curing the disease. Research should never be ignored and should be a critical component of House of Kaizen’s CXO success.

Solution

Data-driven optimization is focused on identifying friction, understanding the why behind user behavior, and testing hypotheses based on that data/information. Here’s what a formalized conversion optimization methodology would comprise:

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

You can read more about the scientific methodology for conversion optimization in this post.

Andre Morys, CEO of Web Arts,  in one of his interviews, talks about what’s wrong with the methodology. According to him, 80–90% of big companies do not aim for bigger goals, which could be change in the growth rate. This is another methodology-related drawback, as the goals being set do not take the profitability into account. Andre’s interview answers many other questions related to business growth.

Challenge 4. Choosing the Right Tool to Meet the Business Goals

The decision-makers in an organization have a variety of tools to choose from for meeting their business goals.  For example, when deciding on an A/B testing tool, they have to make a choice between a:

  • Frequentist-based statistical engine
  • Bayesian statistical engine

Moreover, there are multiple tools that help accomplish specific objectives. Enterprises might use hotjar for heatmap reports, a/b testing from VWO, and some other tool for on-page surveys. Reporting becomes a pain when instead of using one connected platform, enterprises use multiple tools to execute their conversion optimization program. If enterprises instead switch to a single connected platform, they can save a lot of time and resources.

Another problem with not using a single tool for testing and optimization is that it becomes difficult to explain instances of success and failure to the top management. This could be confusing for managers who are not in touch with day-to-day implementation of the conversion optimization program.

Solution

For selecting the correct tool, decision-makers need to weigh the pros and cons of their actions. They need to evaluate the tool based on how effectively and efficiently it can solve their specific business problems. For enterprises looking to invest in a tool for business growth, here’s a post on what decision-makers need to know before investing in CRO or A/B testing software.

Challenge 5. Insufficient and Incorrect Budget Allocation

Back in 2013, most companies spent less than 5% on conversion optimization from their total marketing budget.

budget for conversion optimization - graph

Moving on to 2014, a report from Adobe says that top-converting companies spend more than 5% of their budgets on optimization. Per the conversion optimization report 2016 by ConversionXL, businesses have increased their spend on optimization. The problem, however, lies in correct allocation.

Paul Rouke talks about inefficient budget allocation as follows:

Paul Rouke

Budgets for conversion optimization within enterprises are continuing to increase, but typically in the wrong direction. Enterprises focus far too much of their marketing investment in enterprise technology. As a result, there’s little investment in people and their skills to actually harness the technology—whether building their in-house team or harnessing specialist agencies.

Enterprises which invest in Human Intelligence (HI), above and beyond technology, and AI are the ones who are positioning themselves for significant and sustainable growth. Growth is about people.

Solution

Before deciding the amount that enterprises should spend on conversion optimization, they should think about the return on investment from CRO. Organizations need to budget for the conversion optimization tool while analyzing their goals and actual gains. To read more on how to budget for conversion optimization, read this post by Formstack.

Summary 

Although the interest in conversion optimization is growing, due to certain challenges, it is not being adopted fully by enterprises. Some of the drawbacks that this post talks about are related to organizational culture, structure, methods and processes, tools for conversion optimization, and budget. These challenges are either related to adoption of conversion optimization or its smooth implementation. Solving these can help enterprises deploy conversion optimization efficiently and effectively to achieve growth and success.

Hope you found this post insightful. We’d love to hear your thoughts on challenges that enterprises face when implementing conversion optimization. Send in your feedback and views in the comments section below.

Approach_Increasing_Conversion_Rates_Free_Trial


The post 5 Conversion Rate Optimization Challenges For Enterprises To Solve appeared first on VWO Blog.

Read original article: 

5 Conversion Rate Optimization Challenges For Enterprises To Solve

Strategies You Need To Try in 2017, According to 13 Digital Marketing Experts

marketing-resolutions-2017-650
Image via Shutterstock.

Has anyone in the history of the world ever kept a New Year’s resolution?

I know I haven’t. But that doesn’t stop me from making them year after year and convincing myself that this will be the year for life-altering change. And then my credit card gets charged for my monthly gym membership and I realize I haven’t been in three months… (Where did the time go?)

The problem is, New Year’s resolutions are frequently impulse decisions — we take on ambitious goals without considering how they fit into our day to day lives.

Similarly, it’s easy to walk away from a marketing article with the intention of implementing X tactic. But without taking a step back and seeing how it fits into your overall strategy, you’re about as likely to actually do the work as I am to actually do my workout.

When we spoke to 13 of North America’s most influential digital marketing experts about their plans for 2017, a lot of them shared plans to take a step back and rethink their marketing strategy from a new perspective — rather than take on more tactics.

Here’s some of what they shared.

Scrutinize then optimize your current channels

You may be open to experimenting with new channels, but how often do you take stock of the ones you’ve been using forever? Why did you start using them in the first place?

The answer may be that you’re using them simply because you always have and don’t know anything else…

When we spoke to our digital marketing experts, many of them shared their plans to pull the plug completely on certain channels so they could focus on experimenting with new ones.

Larry Kim, Founder and Chief Technology Officer of Wordstream and Inc columnist, spoke of his experiments with using LinkedIn Ads for lead generation:

larry-kimUnfortunately it didn’t work because the cost per click was around $10 and very limited ad targeting options (e.g., no remarketing or custom list support).

But there were other channels that worked well:

There were many new channels that we tried out or doubled down on that worked spectacularly well for us – and I wrote them all up, including our approach and the results – the new channels included the use of RLSA, Facebook and Twitter Ads, posting content to Medium, changing our SEO tactics, and experimenting with off-topic content.

John Rampton, CEO of Due, was disappointed in the results from Facebook advertising campaigns, but it’s worth noting that he suspects it may have had more to do with targeting oversights:

john-ramptonIn 2016, the most underwhelming marketing tactic we tried were Facebook ads, but I think this was because our target audience of small businesses was not on Facebook searching for business solutions.

Similarly, Moz last year experimented with pumping more money into paid advertising, according to co-founder Rand Fishkin. Moz nearly tripled its advertising budget with Facebook, AdWords and retargeting on various platforms.

Rand’s big takeaway from it all?

rand-fishkinBroad targeted advertising is nearly useless. Unless someone has already been to our website, is familiar with our brand and/or is specifically searching for us or a handful of tightly connected search phrases, digital ads produce very little lift in new signups.

Moz has since cut back spend massively and is focused on optimizing its targeting instead.

Jay Baer of Convince and Convert experimented with some free marketing channels in 2016 – notably, cross-posting from his blog to Medium. And while the effort for posting to Medium is minimal, so too have been the returns:

jay-baerSo far, the readership just hasn’t been there. Curiously, I have 53,000+ followers on Medium now, but generate just 3,000-4,000 views across four different posts per month.

These channels may or may not be effective for your audience, but the lesson here is to survey what’s working for you and what’s not.

And then don’t be afraid to kill your darlings (the channels that just aren’t working).

Out with the old, in with the new.

Build genuine relationships with a small group of influencers

It’s easy to get caught up in the dozens of tasks you have to do each day, but if you’re not currently making time to network and build relationships with your peers, 2017 is a great time to start.

It’s the secret sauce of Aaron Orendorff, prolific blogger and Forbes Top 25 Marketing Influencer. Here’s what he told us:

aaron-orendoorfMarketing is not a single player sport. I dug deep on collaboration this year and combined it with unique story angles. This approach created Unbounce’s [highest traffic] post of the year: Clinton vs. Trump: 18 CROs Tear Down the Highest Stakes Marketing Campaigns in US History.

The key to this approach, Aaron explained, is twofold:

First, you have to have killer idea (and, no, “What’s the best blogging tip?” doesn’t count). Second, roll contributions into each other. What I mean is, start with who you know and once you get initial buy-in use their name to get the next one… or just ask if they’ll connect you.

While this personalized approach has worked for Aaron, many marketers are still taking a cold approach, without much success.

Peep Laja of ConversionXL explained that reaching out cold won’t cut it:

1v26cpfbI myself get bombarded many times a day with all kinds of requests (“we linked to you/we mentioned you/give me feedback”), and I totally ignore them.

How do you avoid getting ignored? For starters, quit it with the canned messages.

Sujan Patel of digital marketing agency Web Profits explained that if you’re going to reach out to influencers, you should be doing it for the right reasons — to start relationships:

sujan-patelBegin with just five to ten people… choose people who appeal to you on a personal level – people you think you will genuinely get along with. Look for signs that you share the same interests (outside of your work) and sense of humor.

In other words, reach out only if your intention is to build genuine relationships. You wouldn’t ignore an email from an actual friend, would you?

Pair great content with great (dynamic) visuals

Since 2015, the content marketing world has been abuzz with Rand Fishkin’s concept of 10x content — the idea that you pick a topic and set out to create something 10x better than anything currently out there on the subject.

But with marketers everywhere striving to create 10x content, how then can you continue to stand out from the crowd?

For Sujan Patel, the marketers who will stand out in 2017 are those who pay special mind to design:

10x content isn’t new, but what will differentiate content in 2017 and beyond is content that directly incorporates design and formatting, instead of relying on great content in a long-form blog post.

As an example, Sujan shared a piece of content he created for a client: a guide to building a personal brand, where the content is inextricable from the design. He’s found that the time they spent on visuals is really paying off:

We see email optin rates over 25% and huge share numbers and backlinks from this type of content.

Ian Lurie of digital marketing agency Portent has similar plans to emphasize aesthetics in the New Year:

ian-lurieIn 2017, I’ll be leaning more towards complex layouts and a greater emphasis on graphics. I’ll also be segmenting by screen resolution.

If the prospect of dialling up your visual content production feels daunting, Nadya Khoja of Venngage has some advice:

nadya-khojaI recommend starting out by visiting your top performing content and repurposing it into engaging visuals. You can do this by pinpointing the main takeaways and tips that are highlighted in that content. Use a tool to create the animated graphics or finding a freelancer on a site like Upwork who can quickly transform that information into a compelling video or motion graphic.

Devote more time and tools to understanding your customers’ motives

Abraham Lincoln once said, “Give me six hours to chop down a tree, and I’ll spend the first four sharpening the ax.”

Abe wasn’t a marketer, but he would have been an excellent one — in this blog post, Michael Aagaard, Senior Conversion Optimizer at Unbounce, explained why: you should never start a marketing campaign (chop down a tree) without doing your research (sharpening your axe).

That’s why Michael spends so much of his time conducting customer research and understanding the psychology of decision making. But this year, he took it a step further by socializing his findings to the team:

vubr6m3I spent a good deal of time sharing the insights and results internally so more of our employees could see the value in conducting real customer research rather than relying on assumptions or trends.

And Aagaard can’t stop, won’t stop:

In 2017, I’m going to ramp this up even more – both in terms of the hands-on CRO work I do at Unbounce and in relation to educating our employees and our customers.

Steve Olenski, Sr. Content Strategist at Oracle Marketing Cloud, urged marketers to look into mobile data management platforms (DMPs). He explained that they’re a critical part of the modern marketer’s stack because they enable us to better understand customer behavior:

steve-olenskiWith a mobile DMP, brands can harness and analyze the massive amount of customer data generated by mobile devices — including intent, geolocation, and purchase behavior to better target ads across multiple mobile devices and platforms, from in-app ads on smartphones to mobile web ads and tablet-specific campaigns.

In 2017, commit to collecting more customer information. Because at the end of the day, understanding your audience empowers you to give them more of what they want.

And that keeps them coming back for more.

Be part of the AI and AR conversations

Okay, this one’s a tall order, but it’s one that can’t be ignored for much longer.

Some of the digital marketing experts we spoke to emphasized the importance of keeping your finger on the pulse of cutting edge technology — notably, artificial intelligence and augmented reality.

Today, machine learning systems are being applied to everything from filtering spam emails, to making recommendations for what you should buy or watch (or who you should date).

Unbounce has been investing in applying machine learning to our product — here’s what CEO Rick Perrault had to say:

rick-perrault2016 marked the launch of our effort to apply machine learning to improving conversion results.  We’ve now built machine learning models that can predict conversion rates with reasonable accuracy, and our efforts to create models that provide actionable advice on improving conversion rates are coming along.

Jayson DeMers, CEO of AudienceBloom, has been keeping a close watch on augmented reality, especially after the breakout success of Pokemon Go this year:

jayson-demersxqAR print ads are starting to catch on, with Macallan Whiskey in Esquire Magazine, and Vespa Scooter ads being standout examples here. Axe/Lynx even took things a step further with an interactive “fallen angel” ad in a busy public location. This is a technology in its infancy that’s finally starting to take off.

Whoever innovates here – and does so quickly, early in 2017 – stands to win big.

While you may not necessarily be able to invest in this cutting edge stuff, the least you can do is keep your finger on the pulse of what others are doing. As these technologies progress, they become increasingly affordable and accessible — and you don’t want to be playing catch up when they become ubiquitous.

Down with New Year’s resolutions

I’d like to encourage you to not make a New Year’s resolution this year.

In 2017, make strategic decisions that will actually bring you results.

Over to you — what new things will you test at work in the New Year?

See the article here:  

Strategies You Need To Try in 2017, According to 13 Digital Marketing Experts

Going Omnichannel | A Robust Framework for eCommerce Enterprises

Consumers in the digital age want an integrated shopping experience. They might browse an eCommerce website on mobile but ultimately make a purchase from desktop. Or they might pay online, but pick up the purchased item from the store.

Such user behavior has been highlighted by a 2014 GfK study: “With people constantly moving between devices, it is important for marketers to reach their audience across all platforms. Brand experiences should be consistent, allowing for people to begin an activity on one device and finish on another.”

In this post, we discuss a robust omnichannel strategy that can help eCommerce enterprises create such integrated experiences across devices. The strategy includes:

  • Understanding cross-device user behavior
  • Crafting smooth shopping experiences across channels
  • Forming organizational structures that support omnichannel

But before we begin, let’s see how an ideal omnichannel experience for a consumer, say “Sarah” would look like:

Sarah is checking Instagram from her mobile and likes a dress her friend is flaunting. She visits the retailer’s website on mobile. She adds the product to her “wishlist” on mobile. Later during the day, she accesses her wishlist on the desktop, with the decision to make a buy. She chooses the option “inform when available in my size” and 3 days later, gets an email notifying her about the availability of the dress. It also informs her that “click and collect” is available on the product. She decides to pick up the dress from a physical store.

So how do eCommerce enterprises go omnichannel successfully? Let’s talk about the three steps.

Tracking Cross-Device User Behavior

The fact that people toggle among multiple devices throughout the day makes understanding the cross-device user behavior an absolute essential for eCommerce enterprises. Traditional analytics tracking tools such as Google Analytics do not offer the scope for establishing a connect between users and their disparate gadgets. Cross-device tracking removes this barrier for eCommerce enterprises and enables them to understand their users’ behavior across all touchpoints.

Cross-device tracking allows enterprises to understand whether a person browsing a website from smartphone X is the same person who made the purchase from laptop Z. Such information is important to rectify conversion credit allocated disproportionately to the last device of purchase. So if the use of mobile devices leads to desktop purchases, eCommerce enterprises might want to spend more on mobile ads and mobile website optimization.

cross device user tracking
A simple representation of cross-device usage

There are two main methods to track cross-device user behaviordeterministic and probabilistic.

Deterministic Device Matching

This methodology makes use of user’s signin information. As users are required to sign in to the website on each device they use, enterprises can track their behavior across all touchpoints. User Authentication is a type of deterministic device matching. It uses specific identifiers such as a customer ID, signin information, and so on to study and form a link between user behavior across devices.

Probabilistic Device Matching

Unlike deterministic device matching, this cross-device tracking technique does not rely solely on the user’s signin information. As the name indicates, this method computes the probability that various devices belong to or have been used by the same individual. An example of how probabilistic device matching works is extrapolation. For example, if a mobile and a tablet use the same Internet connection, it can be extrapolated that they belong to the same household. Device Fingerprinting is another famous probabilistic cross-device tracking technique. It combines device settings and browser options with some other attributes such as WiFi info, IP address, and more to identify users.

Build Smooth Shopping Experiences Across Channels

The next step, after tracking and understanding user behavior across devices, is to create seamless experiences for your users.

Walmart CEO, Doug McMillon shares his thoughts on a seamless customer experience:

“Ultimately, customers don’t care about what channel they’re shopping in or about how we deliver them a product or service. They simply know they’re shopping with Walmart.”

For Walmart, no matter what channel their customers buy from, it is important that they recognize the brand and get the same shopping experience throughout. Creating cohesive, consistent brand voice/experience can help eCommerce enterprises pave trust and encourage strong engagement, and, therefore, improve sales.

Other than brand consistency, a smooth and seamless shopping experience also constitutes customer experience. Hubspot talks about Oasis, a UK fashion retailer, in their seven inspiring examples of omnichannel user experience. On entering one of their stores, you’ll find sales associates walk you through all the product-related information using iPads. So, just in case something  is out of stock, the staff places an online order for the customer and the item  is shipped directly to customer’s home.

Here’s how Oasis uses iPads in-store to assist customers:

Omnichannel Strategy Oasis
Source

eCommerce enterprises should focus on the following points for providing a superior omnichannel shopping experience:

  • Providing relevant local information
  • Ensuring faster, safer payment solutions
  • Providing personalization
  • Making use of advanced technologies

Providing relevant local information

 A post on Think with Google reports that 75 percent of the shoppers who find local retail info in search results helpful are more likely to visit stores. For eCommerce enterprises, this data opens up a number of opportunities. For example, eCommerce enterprises can  inform online customers looking for a particular item online about its availability at a nearby store. To make this activity more effective, they can use geo-targeting to drive more in-store purchases from people  from the local vicinity who have an intent to buy.  Moreover they can also provide information such as local store hours, directions to the local store, or any discounts running in the store. Providing local relevant information online can also help convert more of those shoppers who view shopping as an experience and not just a purchase activity. Retailers, on the other hand, can benefit from the impulse buying tendency of people who exhibit a search online, shop local behavior.

Ensuring faster, safer payment solutions

 A Search Engine Journal post lists 10 popular online payment solutions such as Amazon Payments and Google Wallet. As these options are trustworthy and secure, these will encourage users to pay from any channel that they use.

Deploying these payment solutions is a win-win for both the parties, because these solutions are  convenient, quick, and trustworthy.

Providing Personalization

The interconnected and digitally empowered consumer demands relevant and personalized experience. For an omnichannel player, this would mean understanding which devices are used by the consumers and how. For example, Evergage talks about how eBay creates omnichannel personalization for its users. The eBay mobile app allows users to enable push notifications, which informs them about the start or end of any auction. The desktop site, on the other hand, is designed for easy search and window shopping.

omnichannel strategy - ebay personalized push notification
Source

Advanced Technologies

Innovation and technology enhance the omnichannel experience both for buyers and eCommerce enterprises. Using virtual reality, for example, can help eCommerce players make use of virtual environments that are otherwise difficult to create inside a store. For the user, these technologies can address buyer’s uncertainty.

For example, before making a decision to buy a hat, a person would like to know which hat type, color, width, and so on would suit him the best. Without physically trying a number of different hats, he can use such technologies to find out what looks best on him. For the eCommerce enterprise, this means being able to provide their users with better services and experience even if all the types of hats are not physically in store.

Tommy Hilfiger also provides a fantastic in-store VR experience. As a result, shoppers can view virtual catwalks and shop the season’s runway styles.If you are looking for more on the who and how of virtual and augmented reality in retail and eCommerce, here’s a Forbes post to read.

The following image shows customers experiencing Tommy Hilfiger VR:

Virtual Reality in Tommy Hilfiger Omnichannel Strategy
Source

Forming an Organizational Structure that Supports Omnichannel

Customer experience might suffer if an eCommerce enterprise is not structured to meet the requirements of omnichannel retail. When departments operate in silos, the problem of sales attribution often arises. Such conflicts are unhealthy, as they can jeopardize the enterprise’s ability to deliver a smooth omnichannel experience.

An organizational structure that is better aligned for omnichannel, requires various departments within an organization to work together and be accountable to each other. Macy’s, for example, has also completely restructured their merchandising and marketing functions. They have also created chief omnichannel officer positions in their organization.

Keith Anderson, SVP Strategy & Insight, Profitero,  suggests the following when it comes to creating supportive organizational structures for omnichannel.

“Here is the approach I suggest:

  • Top-down commitment and support are essential. In the absence of the same, many organizations fail to prioritize or align on how to implement and execute on omnichannel.
  • Key functions should be responsible, but the whole organization is accountable. Certain teams or titles should be primarily responsible for doing the work of marketing and selling through all channels. But the entire business should be accountable. There is a risk in simply appointing a “head of omnichannel,” without anticipating the impacts on other functions such as customer service, finance, and logistics. Digital and omnichannel competency is necessary for all company functions and disciplines, not just an isolated, specialist team.
  • Definitions of success and incentives matter. Many companies that try to embrace omnichannel discover internal conflicts driven by misaligned incentives. For example, who gets the credit for an online sale fulfilled and collected in-store? How are inventory and labor costs allocated?

Ultimately, KPIs and incentives need to balance near-term and long-term goals such as maximizing profitability in the short-term versus growing market share. Also, enterprise success must always be prioritized over success in an isolated channel.”

Conclusion

While creating  customer-centric experiences is the key to succeeding with omnichannel, it begins with understanding user behavior and extends to framing the right kind of organizational structures. There is a huge scope for eCommerce enterprises to adopt and excel at an omnichannel level, given that they make use of user information, technology, customer service, and their internal structures efficiently.

Over to You

Have feedback on how eCommerce enterprises can develop a robust omnichannel strategy? Please leave a comment.

0

0 ratings

How will you rate this content?

Please choose a rating

The post Going Omnichannel | A Robust Framework for eCommerce Enterprises appeared first on VWO Blog.

Continue reading: 

Going Omnichannel | A Robust Framework for eCommerce Enterprises