Month: January 2020

Recreating The Arduino Pushbutton Using SVG And <lit-element>

Recreating The Arduino Pushbutton Using SVG And &lt;lit-element&gt;

Recreating The Arduino Pushbutton Using SVG And &lt;lit-element&gt;

Uri Shaked

Today, I am going to take you through the journey of creating an HTML component that mimics a momentary pushbutton component that is commonly used with Arduino and in electronic projects. We will use technologies such as SVG, Web Components and lit-element, and learn how to make the button accessible through some JavaScript-CSS trickery.

Let’s start!

From Arduino To HTML: The Need For A Pushbutton Component

Before we embark on the journey, let’s explore what we are going to create, and more importantly, why. I’m creating an open-source Arduino simulator in JavaScript called avr8js. This simulator is able to execute Arduino code and I will be using it in a series of tutorials and courses that teach makers how to program for Arduino.

The simulator itself only takes care of the program execution — it runs the code instruction by instruction and updates its internal state and a memory buffer according to the program logic. In order to interact with the Arduino program, you need to create some virtual electronic components that can send input to the simulator or react to its outputs.

Running the simulator alone is very much like running JavaScript in isolation. You can’t really interact with the user unless you also create some HTML elements, and hook them to the JavaScript code through the DOM.

Thus, in addition to the simulator of the processor, I’m also working on a library of HTML components that mimic physical hardware, starting with the first two components that you will find in almost any electronics project: an LED and a pushbutton.

The LED and the Pushbutton elements in action
The LED and the Pushbutton elements in action

The LED is relatively simple, as it only has two output states: on and off. Behind the scenes, it uses an SVG filter to create the lighting effect.

The pushbutton is more interesting. It also has two states, but it has to react to user input and update its state accordingly, and this is where the challenge comes from, as we will shortly see. But first, let’s nail down the requirements from our component we are going to create.

Defining The Requirements For The Pushbutton

Our component will resemble a 12mm pushbutton. These buttons are very common in electronics starter kits, and come with caps in multiple colors, as you can see in the photo below:

Simon Game with Yellow, Red, Blue and Green pushbuttons
Simon Game with Yellow, Red, Blue and Green pushbuttons (Large preview)

In terms of behavior, the pushbutton should have two states: pressed and released. These are similar to the mousedown/mouseup HTML events, but we must make sure that the pushbuttons can also be used from mobile devices, and are accessible for users without a mouse.

As we will be using the state of the pushbutton as input for Arduino, there is no need to support “click” or “double click” events. It is up to the Arduino program running in the simulation to decide how to act upon the state of the button, and physical buttons do not generate click events.

If you’d like to learn more, check out a talk I held with Benjamin Gruenbaum at SmashingConf Freiburg in 2019: “Anatomy of a Click”.

To summarize our requirements, our pushbutton needs to:

  1. look similar to the physical 12mm pushbutton;
  2. have two distinct states: pressed, and released, and they should be visually discernible;
  3. support mouse interaction, mobile devices and be accessible to keyboard users;
  4. support different cap colors (at least red, green, blue, yellow, white and black).

Now that we have defined the requirements, we can start working on the implementation.

SVG For The Win

Most web components are implemented using a combination of CSS and HTML. When we need more complex graphics, we usually use raster images, in either JPG or PNG format (or GIF if you feel nostalgic).

In our case, however, we will use another approach: SVG graphics. SVG lends itself to complex graphics much more easily than CSS (yeah, I know, you can create fascinating things with CSS, but it doesn’t mean it should). But don’t worry, we are not giving up on CSS entirely. It will help us with styling the pushbuttons, and eventually even with making them accessible.

SVG has another big advantage, in comparison with raster graphics images: it is very easy to manipulate from JavaScript and can be styled through CSS. This means that we can provide a single image for the button and use JavaScript to customize the color cap, and CSS styles to indicate the state of the button. Neat, isn’t it?

Finally, SVG is just an XML document, which can be edited with text editors, and embedded directly into HTML, making it a perfect solution for creating reusable HTML components. Are you ready to draw our pushbutton?

Drawing The Pushbutton With Inkscape

Inkscape is my favorite tool for creating SVG vector graphics. It’s free and packed with powerful features, such as a large collection of built-in filter presets, bitmap tracing, and path binary operations. I started using Inkscape for creating PCB art, but in the past two years, I started using it for most of my graphic editing tasks.

Drawing the pushbutton in Inkscape is pretty straightforward. We are going to draw a top-view illustration of the button and its four metal leads that connect it to other parts, as follows:

  1. 12×12mm dark gray rectangle for the plastic case, with slightly rounded corners to make it softer.
  2. Smaller, 10.5×10.5 light gray rectangle for the metal cover.
  3. Four darker circles, one in each corner for the pins that hold the button together.
  4. A large circle in the middle, that is the contour of the button cap.
  5. A smaller circle in the middle for the top of the button cap.
  6. Four light-gray rectangles in a “T” shape for the metal leads of the button.

And the result, slightly enlarged:

Our hand-drawn Pushbutton Sketch
Our hand-drawn Pushbutton Sketch (Large preview)

As a final touch, we’ll add some SVG gradient magic to the contour of the button, to give it a 3D feel:

Adding a gradient fill for creating 3D-feel
Adding a gradient fill for creating 3D-feel (Large preview)

There we go! We have the visuals, now we need to get it to the web.

From Inkscape to Web SVG

As I mentioned above, SVGs are pretty straightforward to embed into HTML — you can just paste the content of the SVG file into your HTML document, open it in a browser, and it will be rendered on your screen. You can see it in action in the following CodePen example:

See the Pen SVG Pushbutton in HTML by @Uri Shaked

See the Pen SVG Pushbutton in HTML by @Uri Shaked

However, SVG files saved from Inkscape contain a lot of unnecessary baggage such as the Inkscape version and the window position when you last saved the file. In many cases, there are also empty elements, unused gradients and filters, and they all bloat the file size, and make it harder to work with it inside HTML.

Luckily, Inkscape can clean most of the mess for us. Here is how you do it:

  1. Go to the File menu and click on Clean up document. (This will remove unused definitions from your document.)
  2. Go again to File and click on Save as…. When saving, select Optimized SVG (*.svg) in the Save as type dropdown.
  3. You will see an “Optimized SVG Output” dialog with three tabs. Check all the options, except for “Keep editor data”, “Keep unreferenced definitions” and “Preserve manually created IDs…”.
(Large preview)

Removing all these things will create a smaller SVG file that is easier to work with. In my case, the file went from 4593 bytes down to just 2080 bytes, less than half the size. For more complex SVG files, this can be a huge saving of bandwidth and can make a notable difference in the loading time of your webpage.

The optimized SVG is also much easier to read and understand. In the following excerpt, you should be able to easily spot the two rectangles that make the body of the pushbutton:

<rect width="12" height="12" rx=".44" ry=".44" fill="#464646" stroke-width="1.0003"/>
<rect x=".75" y=".75" width="10.5" height="10.5" rx=".211" ry=".211" fill="#eaeaea"/>
<g fill="#1b1b1b"> <circle cx="1.767" cy="1.7916" r=".37"/> <circle cx="10.161" cy="1.7916" r=".37"/> <circle cx="10.161" cy="10.197" r=".37"/> <circle cx="1.767" cy="10.197" r=".37"/>
<circle cx="6" cy="6" r="3.822" fill="url(#a)"/>
<circle cx="6" cy="6" r="2.9" fill="#ff2a2a" stroke="#2f2f2f" stroke-opacity=".47" stroke-width=".08"/>

You can even further shorten the code, for instance, by changing the stroke width of the first rectangle from 1.0003 to just 1. It doesn’t make a significant difference in the file size, but it makes the code easier to read.

In general, a manual pass over the generated SVG file is always useful. In many cases, you can remove empty groups or apply matrix transforms, as well as simplify gradient coordinates by mapping them from “user space on use” (global coordinates) to “object bounding box” (relative to the object). These optimizations are optional, but you get code that is easier to understand and maintain.

From this point on, we’ll put Inkscape away and work with the text representation of the SVG image.

Creating A Reusable Web Component

So far, we got the graphics for our pushbutton, ready to be inserted into our simulator. We can easily customize the color of the button by changing the fill attribute of the smaller circle, and the start color of the gradient of the larger circle.

Our next goal is to turn our pushbutton into a reusable Web Component which can be customized by passing a color attribute and reacts to user interaction (press/release events). We will use lit-element, a small library that simplifies the creation of Web Components.

lit-element excels in creating small, stand-alone component libraries. It’s built on top of the Web Components standard, which allows these components to be consumed by any web application, regardless of the framework used: Angular, React, Vue or Vanilla JS would all be able to use our component.

Creating components in lit-element is done using a class-based syntax, with a render() method that returns the HTML code for the element. A bit similar to React, if you are familiar with it. However, unlike react, lit-element uses standard Javascript tagged template literals for defining the content of the component.

Here is how you would create a simple hello-world component:

import { customElement, html, LitElement } from 'lit-element'; @customElement('hello-world')
export class HelloWorldElement extends LitElement { render() { return html` <h1> Hello, World! </h1> `; }

This component can then be used anywhere in your HTML code simply by writing <hello-world></hello-world>.

Note: Actually, our pushbutton requires just a bit more code: we need to declare an input property for the color, using the @property() decoractor (and with a default value of red), and paste the SVG code into our render() method, replacing the color of the button cap with the value of the color property (see example). The important bits are in line 5, where we define the color property: @property() color = 'red'; Also, in line 35 (where we use this property to define the fill color for the circle that makes the cap of the button), using the JavaScript template literal syntax, written as ${color}:

<circle cx="6" cy="6" r="2.9" fill="${color}" stroke="#2f2f2f" stroke-opacity=".47" stroke-width=".08" />

Making It Interactive

The last piece of the puzzle would be to make the button interactive. There are two aspects we need to consider: the visual response to the interaction as well as the programmatic response to the interaction.

For the visual part, we can simply inverse the gradient fill of the button contour, which will create the illusion the button has been pressed:

Inverting the button’s contour gradient
Inverting the button’s contour gradient (Large preview)

The gradient for the button contour is defined by the following SVG code, where ${color} is replaced with the color of the button by lit-element, as explained above:

<linearGradient id="grad-up" x1="0" x2="1" y1="0" y2="1"> <stop stop-color="#ffffff" offset="0" /> <stop stop-color="${color}" offset="0.3" /> <stop stop-color="${color}" offset="0.5" /> <stop offset="1" />

One approach for the pressed button look would be to define a second gradient, invert the order of colors, and use it as the fill of the circle whenever the button is pressed. However, there is a nice trick that allows us to reuse the same gradient: we can rotate the svg element by 180 degrees using a SVG transform:

<circle cx="6" cy="6" r="3.822" fill="url(#a)" transform="rotate(180 6 6)" />

The transformattribute tells SVG that we want to rotate the circle by 180 degrees, and that the rotation should happen about the point (6, 6) that is the center of the circle (defined by cx and cy). SVG transforms also affect the fill of the shape, and so our gradient will be rotated as well.

We only want to invert the gradient when the button is pressed, so instead of adding the transformattribute directly on the <circle>element, as we did above, we are actually going to set a CSS class for this element, and then take advantage of the fact that SVG attributes can be set through CSS, albeit using a slightly different syntax:

transform: rotate(180deg);
transform-origin: 6px 6px;

These two CSS rules do exactly the same as the transformwe had above — rotate the circle 180 degrees around its center at (6, 6). We want these rules to be applied only when the button is pressed, so we’ll add a CSS class name to our circle:

<circle class="button-contour" cx="6" cy="6" r="3.822" fill="url(#a)" />

And now we can use the :active CSS pseudo-class to apply a transform to the button-contour whenever the SVG element is clicked:

svg:active .button-contour { transform: rotate(180deg); transform-origin: 6px 6px;

lit-element allows us to attach a stylesheet to our component by declaring it in a static getter inside our component class, using a tagged template literal:

static get styles() { return css` svg:active .button-contour { transform: rotate(180deg); transform-origin: 6px 6px; } `;

Just like the HTML template, this syntax allows us to inject custom values to our CSS code, even though we don’t need it here. lit-element also takes care of creating Shadow DOM for our component, so that the CSS only affects the elements within our component and does not bleed to other parts of the application.

Now, what about the programmatic behavior of the button when pressed? We want to fire an event so that the users of our component could figure out whenever the state of the button changes. One way to do this is to listen to mousedown and mouseup events on the SVG element, and fire “button-press”/“button-release” events correspondingly. This is what it looks like with lit-element syntax:

render() { const { color } = this; return html` <svg @mousedown=${() => this.dispatchEvent(new Event('button-press'))} @mouseup=${() => this.dispatchEvent(new Event('button-release'))} ... </svg> `;

However, this is not the best solution, as we’ll shortly see. But first, take a quick look at the code we got so far:

import { customElement, css, html, LitElement, property } from 'lit-element'; @customElement('wokwi-pushbutton')
export class PushbuttonElement extends LitElement { @property() color = 'red'; static get styles() { return css` svg:active .button-contour { transform: rotate(180deg); transform-origin: 6px 6px; } `; } render() { const { color } = this; return html` <svg @mousedown=${() => this.dispatchEvent(new Event('button-press'))} @mouseup=${() => this.dispatchEvent(new Event('button-release'))} width="18mm" height="12mm" version="1.1" viewBox="-3 0 18 12" xmlns="" > <defs> <linearGradient id="a" x1="0" x2="1" y1="0" y2="1"> <stop stop-color="#ffffff" offset="0" /> <stop stop-color="${color}" offset="0.3" /> <stop stop-color="${color}" offset="0.5" /> <stop offset="1" /> </linearGradient> </defs> <rect x="0" y="0" width="12" height="12" rx=".44" ry=".44" fill="#464646" /> <rect x=".75" y=".75" width="10.5" height="10.5" rx=".211" ry=".211" fill="#eaeaea" /> <g fill="#1b1b1"> <circle cx="1.767" cy="1.7916" r=".37" /> <circle cx="10.161" cy="1.7916" r=".37" /> <circle cx="10.161" cy="10.197" r=".37" /> <circle cx="1.767" cy="10.197" r=".37" /> </g> <g fill="#eaeaea"> <path d="m-0.3538 1.4672c-0.058299 0-0.10523 0.0469-0.10523 0.10522v0.38698h-2.1504c-0.1166 0-0.21045 0.0938-0.21045 0.21045v0.50721c0 0.1166 0.093855 0.21045 0.21045 0.21045h2.1504v0.40101c0 0.0583 0.046928 0.10528 0.10523 0.10528h0.35723v-1.9266z" /> <path d="m-0.35376 8.6067c-0.058299 0-0.10523 0.0469-0.10523 0.10523v0.38697h-2.1504c-0.1166 0-0.21045 0.0939-0.21045 0.21045v0.50721c0 0.1166 0.093855 0.21046 0.21045 0.21046h2.1504v0.401c0 0.0583 0.046928 0.10528 0.10523 0.10528h0.35723v-1.9266z" /> <path d="m12.354 1.4672c0.0583 0 0.10522 0.0469 0.10523 0.10522v0.38698h2.1504c0.1166 0 0.21045 0.0938 0.21045 0.21045v0.50721c0 0.1166-0.09385 0.21045-0.21045 0.21045h-2.1504v0.40101c0 0.0583-0.04693 0.10528-0.10523 0.10528h-0.35723v-1.9266z" /> <path d="m12.354 8.6067c0.0583 0 0.10523 0.0469 0.10523 0.10522v0.38698h2.1504c0.1166 0 0.21045 0.0938 0.21045 0.21045v0.50721c0 0.1166-0.09386 0.21045-0.21045 0.21045h-2.1504v0.40101c0 0.0583-0.04693 0.10528-0.10523 0.10528h-0.35723v-1.9266z" /> </g> <g> <circle class="button-contour" cx="6" cy="6" r="3.822" fill="url(#a)" /> <circle cx="6" cy="6" r="2.9" fill="${color}" stroke="#2f2f2f" stroke-opacity=".47" stroke-width=".08" /> </g> </svg> `; }

You can click each of the buttons and see how they react. The red one even has some event listeners (defined in index.html), so when you click on it you should see some messages written to the console. But wait, what if you want to use the keyboard instead?

Making The Component Accessible And Mobile-Friendly

Hooray! We created a reusable pushbutton component with SVG and lit-element!

Before we sign off on our work, there are a few issues we should look at. First, the button is not accessible to people who use the keyboard. In addition, the behavior on mobile is inconsistent — the buttons do appear pressed when you hold your finger on them, but the JavaScript events are not fired if you hold your finger for more than one second.

Let’s start by tackling the keyboard issue. We could make the button keyboard-accessible by adding a tabindex attribute to the svg element, making it focusable. A better alternative, in my opinion, is just to wrap the button with a standard <button> element. By using the standard element, we also make it play nicely with screen readers and other assistive technology.

This approach has one drawback through, as you can see below:

Our pretty component encaged inside a button element
Our pretty component encaged inside a <button> element. (Large preview)

The <button> element comes with some built-in styling. This could easily be fixed by applying some CSS to remove these styles:

button { border: none; background: none; padding: 0; margin: 0; text-decoration: none; -webkit-appearance: none; -moz-appearance: none;
} button:active .button-contour { transform: rotate(180deg); transform-origin: 6px 6px;

Note that we also replaced the selector that inverts the grid of the buttons’ contour, using button:activein place of svg:active. This ensures that the button-pressed style applies whenever the actual <button> element is pressed, regardless of the input device used.

We can even make our component more screen-reader friendly by adding an aria-label attribute that includes the color of the button:

<button aria-label="${color} pushbutton">

There is still one more thing to tackle: the “button-press” and “button-release” events. Ideally, we want to fire them based on the CSS :active pseudo-class of the button, just like we did in the CSS above. In other words, we would like to fire the “button-press” event whenever the button becomes :active, and the “button-release” event to fire whenever it is :not(:active).

But how do you listen to a CSS pseudo-class from Javascript?

Turns out, it is not so simple. I asked this question to the JavaScript Israel community, and eventually dug up one idea that worked out of the endless thread: use the :activeselector to trigger a super-short CSS animation, and then I can listen to it from JavaScript using the animationstart event.

A quick CodePen experiment proved that this actually works reliably. As much as I liked the sophistication of this idea, I decided to go with a different, simpler solution. The animationstart event isn’t available on Edge and iOS Safari, and triggering a CSS animation just for detecting the change of the button state doesn’t sound like the right way to do things.

Instead, we’re going to add three pairs of event listeners to the <button> element: mousedown/mouseup for the mouse, touchstart/touchend for mobile devices, and keyup/keydown for the keyboard. Not the most elegant solution, in my opinion, but it does the trick and works on all browsers.

<button aria-label="${color} pushbutton" @mousedown=${this.down} @mouseup=${this.up} @touchstart=${this.down} @touchend=${this.up} @keydown=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.down()} @keyup=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.up()}

Where SPACE_KEY is a constant that equals 32, and up/down are two class methods that dispatch the button-press and button-release events:

@property() pressed = false; private down() { if (!this.pressed) { this.pressed = true; this.dispatchEvent(new Event('button-press')); }
} private up() { if (this.pressed) { this.pressed = false; this.dispatchEvent(new Event('button-release')); }
  • You can find the full source code here.

We Did It!

It was a pretty long journey that started with outlining the requirements and drawing the illustration for the button in Inkscape, went through converting our SVG file to a reusable web component using lit-element, and after making sure it’s accessible and mobile-friendly, we ended up with nearly 100 lines of code of a delightful virtual pushbutton component.

This button is just a single component in an open-source library of virtual electronic components I’m building. You are invited to peek at the source code, or check out the online Storybook where you can see and interact with all the available components.

And finally, if you are interested in Arduino, take a look at the programming Simon for Arduino course I’m currently building, where you can also see the pushbutton in action.

Till next time, then!

Smashing Editorial (dm, il)

Tech companies, we see through your flimsy privacy promises

There’s a reason why Data Privacy Day pisses me off.

January 28 was the annual “Hallmark holiday” for cybersecurity, ostensibly a day devoted to promoting data privacy awareness and staying safe online. This year, as in recent years, it has become a launching pad for marketing fluff and promoting privacy practices that don’t hold up.

Privacy has become a major component of our wider views on security, and it’s in sharper focus than ever as we see multiple examples of companies that harvest too much of our data, share it with others, sell it to advertisers and third parties and use it to track our every move so they can squeeze out a few more dollars.

But as we become more aware of these issues, companies large and small clamor for attention about how their privacy practices are good for users. All too often, companies make hollow promises and empty claims that look fancy and meaningful.

SEO for 2020 – Whiteboard Friday

Posted by BritneyMuller

It’s a brand-new decade, rich with all the promise of a fresh start and new beginnings. But does that mean you should be doing anything different with regards to your SEO?

In this Whiteboard Friday, our Senior SEO Scientist Britney Muller offers a seventeen-point checklist of things you ought to keep in mind for executing on modern, effective SEO. You’ll encounter both old favorites (optimizing title tags, anyone?) and cutting-edge ideas to power your search strategy from this year on into the future.

Click on the whiteboard image above to open a high resolution version in a new tab!

Video Transcription

Hey, Moz fans. Welcome to another edition of Whiteboard Friday. Today we are talking about SEO in 2020. What does that look like? How have things changed?

Do we need to be optimizing for favicons and BERT? We definitely don’t. But here are some of the things that I feel we should be keeping an eye on. 

☑ Cover your bases with foundational SEO

Titles, metas, headers, alt text, site speed, robots.txt, site maps, UX, CRO, Analytics, etc.

To cover your bases with foundational SEO will continue to be incredibly important in 2020, basic things like title tags, meta descriptions, alt, all of the basic SEO 101 things.

There have been some conversations in the industry lately about alt text and things of that nature. When Google is getting so good at figuring out and knowing what’s in an image, why would we necessarily need to continue providing alt text?

But you have to remember we need to continue to make the web an accessible place, and so for accessibility purposes we should absolutely continue to do those things. But I do highly suggest you check out Google’s Visual API and play around with that to see how good they’ve actually gotten. It’s pretty cool.

☑ Schema markup

FAQ, Breadcrumbs, News, Business Info, etc.

Schema markup will continue to be really important, FAQ schema, breadcrumbs, business info. The News schema that now is occurring in voice results is really interesting. I think we will see this space continue to grow, and you can definitely leverage those different markup types for your website. 

☑ Research what matters for your industry!

Just to keep in mind, there’s going to be a lot of articles and research and information coming at you about where things are going, what you should do to prepare, and I want you to take a strategic stance on your industry and what’s important in your space.

While I might suggest page speed is going to be really important in 2020, is it for your industry? We should still worry about these things and still continue to improve them. But if you’re able to take a clearer look at ranking factors and what appears to be a factor for your specific space, you can better prioritize your fixes and leverage industry information to help you focus.

☑ National SERPs will no longer be reliable

You need to be acquiring localized SERPs and rankings.

This has been the case for a while. We need to localize search results and rankings to get an accurate and clear picture of what’s going on in search results. I was going to put E-A-T here and then kind of cross it off.

A lot of people feel E-A-T is a huge factor moving forward. Just for the case of this post, it’s always been a factor. It’s been that way for the last ten-plus years, and we need to continue doing that stuff despite these various updates. I think it’s always been important, and it will continue to be so. 

☑ Write good and useful content for people

While you can’t optimize for BERT, you can write better for NLP.

This helps optimize your text for natural language processing. It helps make it more accessible and friendly for BERT. While you can’t necessarily optimize for something like BERT, you can just write really great content that people are looking for.

☑ Understand and fulfill searcher intent, and keep in mind that there’s oftentimes multi-intent

One thing to think about this space is we’ve kind of gone from very, very specific keywords to this richer understanding of, okay, what is the intent behind these keywords? How can we organize that and provide even better value and content to our visitors? 

One way to go about that is to consider Google houses the world’s data. They know what people are searching for when they look for a particular thing in search. So put your detective glasses on and examine what is it that they are showing for a particular keyword.

Is there a common theme throughout the pages? Tailor your content and your intent to solve for that. You could write the best article in the world on DIY Halloween costumes, but if you’re not providing those visual elements that you so clearly see in a Google search result page, you’re never going to rank on page 1.

☑ Entity and topical integration baked into your IA

Have a rich understanding of your audience and what they’re seeking.

This plays well into entities and topical understanding. Again, we’ve gone from keywords and now we want to have this richer, better awareness of keyword buckets. 

What are those topical things that people are looking for in your particular space? What are the entities, the people, places, or things that people are investigating in your space, and how can you better organize your website to provide some of those answers and those structures around those different pieces? That’s incredibly important, and I look forward to seeing where this goes in 2020. 

☑ Optimize for featured snippets

Featured snippets are not going anywhere. They are here to stay. The best way to do this is to find the keywords that you currently rank on page 1 for that also have a featured snippet box. These are your opportunities. If you’re on page 1, you’re way more apt to potentially steal or rank for a featured snippet.

One of the best ways to do that is to provide really succinct, beautiful, easy-to-understand summaries, takeaways, etc., kind of mimic what other people are doing, but obviously don’t copy or steal any of that. Really fun space to explore and get better at in 2020. 

☑ Invest in visuals

We see Google putting more authority behind visuals, whether it be in search or you name it. It is incredibly valuable for your SEO, whether it be unique images or video content that is organized in a structured way, where Google can provide those sections in that video search result. You can do all sorts of really neat things with visuals. 

☑ Cultivate engagement

This is good anyway, and we should have been doing this before. Gary Illyes was quoted as saying, “Comments are better for on-site engagement than social signals.” I will let you interpret that how you will.

But I think it goes to show that engagement and creating this community is still going to be incredibly important moving forward into the future.

☑ Repurpose your content

Blog post → slides → audio → video

This is so important, and it will help you excel even more in 2020 if you find your top-performing web pages and you repurpose them into maybe be a SlideShare, maybe a YouTube video, maybe various pins on Pinterest, or answers on Quora.

You can start to refurbish your content and expand your reach online, which is really exciting. In addition to that, it’s also interesting to play around with the idea of providing people options to consume your content. Even with this Whiteboard Friday, we could have an audio version that people could just listen to if they were on their commute. We have the transcription. Provide options for people to consume your content. 

☑ Prune or improve thin or low-quality pages

This has been incredibly powerful for myself and many other SEOs I know in improving the perceived quality of a site. So consider testing and meta no-indexing low-quality, thin pages on a website. Especially larger websites, we see a pretty big impact there. 

☑ Get customer insights!

This will continue to be valuable in understanding your target market. It will be valuable for influencer marketing for all sorts of reasons. One of the incredible tools that are currently available by our Whiteboard Friday extraordinaire, Rand Fishkin, is SparkToro. So you guys have to check that out when it gets released soon. Super exciting. 

☑ Find keyword opportunities in Google Search Console

It’s shocking how few people do this and how accessible it is. If you go into your Google Search Console and you export as much data as you can around your queries, your click-through rate, your position, and impressions, you can do some incredible, simple visualizations to find opportunities.

For example, if this is the rank of your keywords and this is the click-through rate, where do you have high click-through rate but low ranking position? What are those opportunity keywords? Incredibly valuable. You can do this in all sorts of tools. One I recommend, and I will create a little tutorial for, is a free tool called Facets, made by Google for machine learning. It makes it really easy to just pick those apart. 

☑ Target link-intent keywords

A couple quick link building tactics for 2020 that will continue to hopefully work very, very well. What I mean by link-intent keywords is your keyword statistics, your keyword facts.

These are searches people naturally want to reference. They want to link to it. They want to cite it in a presentation. If you can build really great content around those link-intent keywords, you can do incredibly well and naturally build links to a website. 

☑ Podcasts

Whether you’re a guest or a host on a podcast, it’s incredibly easy to get links. It’s kind of a fun link building hack. 

☑ Provide unique research with visuals

Andy Crestodina does this so incredibly well. So explore creating your own unique research and not making it too commercial but valuable for users. I know this was a lot.

There’s a lot going on in 2020, but I hope some of this is valuable to you. I truly can’t wait to hear your thoughts on these recommendations, things you think I missed, things that you would remove or change. Please let us know down below in the comments, and I will see you all soon. Thanks.

Video transcription by

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!

All Things Smashing: Monthly Update

All Things Smashing: Monthly Update

All Things Smashing: Monthly Update

Iris Lješnjanin

We can’t repeat enough how wonderful the web performance community is! There are good folks who help make the web faster, and their efforts matter indeed. With the new year sinking in and everyone’s resolutions still being put to the test, personal goals such as reproducing bugs and fixing issues suddenly become something we all have in common: improving the web for everyone involved.

As various areas of performance become more and more sophisticated and complicated throughout the years, Vitaly refines and updates his front-end performance checklist every year. This guide covers pretty much everything from performance budgets to single-page apps to networking optimizations. It has proved to be quite useful to folks in the past years — anyone can edit it (PDF, MS Word Doc and Apple Pages) and adjust it to their own personal needs or even use it for their organization.

Now, without further ado, let’s see what’s been cooking at Smashing!

Exciting Times: New Smashing Book

The cover of the upcoming Smashing Book named “Ethical Design Handbook”Are you ready for the next Smashing book? Well, just like all the printed books we’ve published, each and every is crafted to deliver in-depth knowledge and expertise shared by experts and practitioners from the industry. The Ethical Design Handbook will not be any different. Written by Trine Falbe, Martin Michael Frederiksen and Kim Andersen, the book will be pre-released late January.

As always, there will be a pre-order discount available. We expect to ship printed hardcover copies late February, but in the meantime, feel free to subscribe to the book mailing list so that you can be one of the first folks to get your hands on the book!

Less Speaking, More Time For Questions

Our SmashingConfs are known to be friendly, inclusive events where front-end developers and designers come together to attend live sessions and hands-on workshops. From live designing to live debugging, we want you to ask speakers anything — from naming conventions to debugging strategies. For each talk, we’ll have enough time to go into detail, and show real examples from real work on the big screen.

A photo of Dan Mall standing on stage explaining code shown on the screen behind him
Dan Mall, Brad Frost and Ian Frost coding live on stage at SmashingConf in NYC. (Image credit: Drew McLellan) (Watch video)

If you’re eager not to miss out on one of our SmashingConfs, then early-bird tickets are still available. And if you need a lil’ help convincing your boss to send you to an event, let us know! We’ve got your back. 😉

A Taste Of Smashing… Offscreen

Smashing Podcast moderated by Drew McLellanWe’ve reached our 7th episode of the Smashing Podcast! We’re so proud and thrilled to have our dear friends and colleagues, Drew McLellan and Bethany Andrew, managing the bi-weekly interview show so brilliantly! The feedback has been overwhelmingly positive, and now we’re excited for many more!

Shining The Spotlight On TypeScript

Smashing TVIn less than two weeks (Jan. 29), we’ll be hosting a Smashing TV webinar with Stefan Baumgartner who’ll shed light on what type-checking has in store for folks creating and using the web. TypeScript has been one of the most hyped technologies in 2019 — it’s now time to look beyond the hype!

Mark your calendars and join us at 17:00 London time — we’d love to hear your thoughts and experiences you’ve had in your career.

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

Best Picks From Our Newsletter

With the start of a brand-new decade, we decided to start off with topics dedicated to web performance. There are so many talented folks out there working on brilliant projects, and we’d love to spread the word and give them the credit they deserve!

Note: A huge thank you to Cosima Mielke for writing and preparing these posts!

Which Metrics Matter Most?

First Meaningful Paint, Time to Interactive, First Input Delay, SpeedIndex. With so many performance metrics floating around, it’s not easy to strike just the right balance for a project. And most of the time, these metrics alone will be too generic and not precise enough, so we’ll need to complement them with custom ones as well. In small and large companies it’s common to define important pixels in the UI, measure how fast we can start render them, and how quickly we can provide input responsiveness for them.

Every project could benefit from a mix of at least 4 metrics. Time To Interactive (TTI) is the key metrics for understanding how much wait a user has to experience to use the site without a lag. First Input Delay (FID) complements TTI very well as it describes the missing part of the picture: what happens when a user actually interacts with the site.

A graph showing JavaScript fetch, parse, and compile loading phases
JavaScript fetch, parse, and compile loading phases (Image credit)

Total Blocking Time (TBT) helps quantify the severity of how non-interactive a page is prior to it becoming reliably interactive. And Cumulative Layout Shift (CLS) highlights how often users experience unexpected layout shifts (reflows) when accessing the site. All these metrics will appear in Lighthouse v6 as it starts rolling out in 2020.

Additionally, you can look into FrustrationIndex that looks at the gaps between metrics instead of looking at them individually, ad weight impact and Component-Level CPU costs. Note that First Meaningful/Contentful Paint are being replaced with Largest Contentful Paint, and the role of SpeedIndex has decreased with new metrics showing up.

The Impact Of Performance Optimization

It’s no secret that performance has a direct impact on user experience and business metrics and that sometimes, even a seemingly small web performance optimization like shaving off a few milliseconds load time can lead to a better conversion rate. To demonstrate this impact, WPO Stats collects case studies and experiments from products and e-commerce sites — stories of successes and of things that went wrong. Inspiring!

UX Speed Calculator
An open-source visualization tool that helps explain the relationship between page speed, conversion and bounce rates. (Image credit)

To support your performance optimizations with some hard figures and help you better grasp their impact, Sergey Chernyshev built the UX Speed Calculator. It lets you see how speed distribution, error rate, bounce rate, and conversion rate intertwine for the values you enter. A handy little helper.

Automatically Compress The Images In Your PRs

Image optimization is probably one of the easiest tasks on your performance optimization checklist. However, if you have a lot of images to optimize, it can also take up quite some time, and in the hurry, some images might even make it into production skipping this step.

Image Actions
“State of the Web: Video Playback Metrics” by Doug Sillars (Image credit)

To change that, the team at Calibre built a GitHub action that automatically compresses all the JPEGs, PNGs, and WebP images in your pull requests. It’s fast, efficient, and, for near-lossless compression, it uses the best image compression algorithms available: mozjpeg and libvips. A real timesaver.

Resources To Stay On Top Of Performance

A lot of people in the web community are committed to performance and to helping spread the word about it. One of them is Tim Kadlec. In his podcast Chasing Waterfalls, he invites people who work to make the web faster for everyone. Three episodes have already been released, with Reefath Rajali sharing insights into PayPal’s performance journey, Malek Kalim exploring how to scale a culture of performance across an organization, and Katie Hempenius talking about performance budgets, third-party challenges, JavaScript, and a lot of other things that impact performance.

Chasing Waterfalls podcast hosted by Tim Kadlec
Conversations with the people working to make the web faster for everyone, hosted by Tim Kadlec. (Image credit)

Another handy resource to keep you on top of web performance comes from Ben Schwarz and Karolina Szczur. Together they curate the Performance Newsletter, delivering web performance tools, talks, and other resources to your inbox twice a month. There’s also an archive of previous newsletter issues for you to catch up on until the next issue will be sent out.

Each and every issue of the Smashing Newsletter is written and edited with love and care. No third-party mailings or hidden advertising — you’ve got our word.

Smashing Editorial (cm, vf, ra, il)

Boost Your Facebook Video Views with These 6 Tactics

Wisely, you’ve taken the dive into video marketing. Whether you’re using video to create educational content or product-focused advertisements, you’ve made the right decision. It is, after all, the year 2020; any digital marketing strategy that lacks video is incomplete.

Now that you’re in the game, it’s time for the hard part: figuring out how you’re going to increase your Facebook video views. Getting users to pay attention to your content—whether it’s paid or organic—is a daunting task. If you want to keep your prospects from scrolling directly past your videos, you need to put together some kind of plan.

Facebook video views example image of people in front of camera

Let’s kick things off with a quick refresher on Facebook ad campaigns. Then, I’ll dive into my six tips for increasing your Facebook video views this year:

  1. Study the competition
  2. Give users a reason to come back (i.e., provide value)
  3. Create content specifically for Facebook
  4. Make audio optional
  5. Experiment with a home video aesthetic
  6. Always be flexible

P.S. Don’t bounce after the sixth tip; I’ve got some examples that everyone can learn from!

Facebook video views campaigns

If you’re thinking about putting some money behind your Facebook videos—which, for the record, I wholeheartedly recommend—this refresher is for you. For those of you who are strictly interested in organic video, the tips in the next section are still applicable!

Facebook offers 11 different types of campaigns to their advertisers—video views being one of them. When you elect to run a video views campaign, you send a simple (yet important) message to Facebook’s algorithms: Getting people to watch my content is my top priority. As such, the platform will optimize the delivery of your ads in order to get your videos in front of users who are most likely to engage.

Facebook video views campaign setting

Although audience targeting and placement targeting are important considerations, I’m not going to discuss them in this post. For our purposes, what I really want to focus on is budgeting (handled at the ad set level of the campaign creation process). When building out your budget, the first thing you have to decide is what you want to optimize for. In the case of a Facebook video views campaign, you have two options:

  • ThruPlay (default setting): If your video is shorter than 15 seconds, Facebook will deliver it to users who are likely to watch the whole thing. If it’s longer than 15 seconds, Facebook will deliver it to users who are likely to watch for at least 15 seconds.
  • 2-Second Continuous Video Views: Facebook will deliver your video to users who are likely to watch for at least two continuous seconds.
Facebook video views campaign options: budgets and scheduling

It’s important that you think carefully about this decision—for two reasons. For one thing, it will determine Facebook’s approach to delivering your video ads (i.e., types of users, times of day, distribution across platforms, and so on). Additionally, it will determine your set of choices when it comes to deciding what you want to pay for. If you optimize for ThruPlay, the following are your payment options:

  • Impression (default setting): Pay every time your video ad is delivered to a user.
  • ThruPlay: Pay every time your video ad is played to completion (if shorter than 15 seconds) or played for longer than 15 seconds.

If you choose 2-Second Continuous Video Views, the following are your payment options:

  • Impression (default setting): Pay every time your video ad is delivered to a user.
  • 2-Second Continuous Video View: Pay every time your video ad is played for at least two continuous seconds.

Whether you pay for each impression or optimization event depends on your broader goals. Just keep in mind that impressions are cheaper because they’re (generally) less valuable.

6 ways to get more Facebook video views this year

Got your campaign settings ironed out? Awesome. Let’s discuss six tactics you can use to get more Facebook video views this year.

1. Study the competition

March 2019: Facebook sunsets the opaque metric known as relevance score—essentially a more confusing version of Google’s Quality Score—in favor of three new replacements, one of them being quality ranking. As you might infer from the name, quality ranking measures the quality of your ad in comparison to the others competing for the same audience.

I repeat: in comparison to the others competing for the same audience.

If you earn a high-quality ranking, you’re rewarded in two ways: (1) your ad gets delivered more frequently and more favorably than your competitors’ ads, and (2) you get discounted prices for impressions and optimization events. To put it in terms of a video views campaign, earning a high-quality ranking means more video views at lower prices.

You know who your competitors are. Do some research. Find out what they’re doing with their video ads. Then, do it better. Just make sure you don’t plagiarize. (Duh.)

2. Give users a reason to come back (i.e., provide value)

May 2019: Facebook announces an update to their video ranking algorithm that explicitly increases the influence of three key factors, one of them being loyalty. To use their words:

“Intent and repeat viewership are important factors we consider when surfacing videos to people in News Feed. Going forward, we will add more weight in ranking to videos that people seek out and return to week after week.”

Users watching your content regularly, users searching for your content regularly, users going out of their way to like and share your content regularly—these are things Facebook looks for in order to determine how loyal your viewers are. The math is simple: The more loyal your viewers are, the higher your organic video content will rank; the higher your organic video content ranks, the more video views you’ll accumulate.

Facebook video views example: popular video s

Facebook Watch is the platform’s hub for video content.

Earning the loyalty of users is imperative to your video marketing success. Fortunately, the key to earning loyalty can be boiled down to just two words: provide value. If Facebook users walk away from your videos having gained something positive, the likelihood of them coming back increases exponentially. Accordingly, you need to ask yourself a question: How can I give my viewers something valuable? If you’re marketing an auto shop, you could provide value in the form of basic maintenance tips. If you’re marketing a college or university, you could provide value in the form of alumni testimonials. And if you’re marketing a bakery, you could provide value in the form of simple recipe videos.

Think about the value your business provides in general. Then, translate that into video.

3. Create content specifically for Facebook

In that same blog post about video ranking algorithm factors, Facebook also emphasized the importance of originality. Now more than ever before, the social platform is committed to “limiting the distribution” of unoriginal or repurposed content. If the full extent of your video marketing strategy is to (1) produce YouTube videos and (2) recycle them as Facebook videos, you’re not going to see the results you’re looking for.

In other words: If you really want to rack up Facebook video views, you need to create fresh content that’s made specifically for Facebook. It’s an approach that requires extra effort, but there’s no doubt that it’s worthwhile.

Creating fresh content specifically for Facebook isn’t solely about appeasing the video ranking algorithm; it’s also about delivering the best videos possible according to audience demand. I know it can seem as if everyone with a smartphone is active on every platform under the sun, but that’s simply not the case. Some of the folks who watch your YouTube videos are entirely uninterested in consuming your content on Facebook—and vice versa.

To put it differently: The audience you’re reaching on Facebook is unique. It follows, then, that the video content you produce for them should also be unique. Otherwise, you’ll miss endless opportunities to drive engagement and increase your video views.

My suggestion? A simple survey. Ask your Facebook followers to describe the video content they like to see on the platform. Then, try your best to make it!

4. Make audio optional

85% of Facebook videos are watched without sound. In part, that’s due to the fact that Facebook mutes videos by default. More impactful, however, is the fact that users are often scrolling through their News Feeds in settings where audio would be disruptive—the back of a lecture hall, the waiting room of an eye doctor, and so on.

In order to reach the widest possible audience—in order to consistently maximize your Facebook video views—it’s essential that your content is comprehensible without sound. Whether you’re providing basic car maintenance tips or demonstrating a product, viewers should have no problem understanding the message you want to communicate. If someone in a waiting room watches the first couple seconds of your video and realizes it’s incomprehensible without sound, they’re simply going to keep on scrolling.

Facebook video with subtitles

Subtitles are practically a must.

If you want to challenge yourself, you can try to tell stories that are easily understandable with nothing but visual images. If you want to take the safer (and probably smarter) route, subtitles are your new best friend.

5. Experiment with a home video aesthetic

Producing videos that are incomprehensible without sound isn’t the only way to lose potential viewers. As some of you may have learned the hard way, many Facebook users are skeptical of content that comes across too … promotional. Although there’s no doubt that a growing number of people like to shop on social media, you must always keep in mind that Facebook is primarily a place for users to connect with friends and consume content.

What I’m trying to say is that banner blindness is not limited to traditional display ads. Just because Facebook users are scrolling through a News Feed rather than a blog post doesn’t mean they’re any less capable of identifying promotional content and moving directly past it.

Facebook video with home-movie aesthetic

Most users would spot this as an ad in a heartbeat.

In some cases, I think the most effective way to increase your Facebook video views is to experiment with a home video aesthetic—i.e., to create videos that require little-to-no budget. Why? Because ordinary people—those who aren’t using Facebook for marketing purposes—are constantly publishing videos that require little to no budget. When you’re scrolling through your News Feed, nothing stands out about a video that appears to have been recorded with a handheld smartphone. And although it seems counterintuitive, creating videos that don’t stand out is often the most effective strategy.

Try to create content that feels native to the Facebook platform; try to be (somewhat) casual. If you can do that, your chances of being perceived as overly promotional will drop dramatically.

6. Always be flexible

What works today isn’t necessarily going to work tomorrow. More specifically, what garners Facebook video views today isn’t necessarily going to garner Facebook video views tomorrow. As such, the longevity of your success depends heavily on your ability to adjust. No matter what, you have to be willing to evaluate your content’s performance and pivot in a new direction.

Enter Creator Studio—Facebook’s free, easy-to-use platform that allows you to upload and evaluate all your video content from one convenient place. As long as you have administrative access to a Facebook page, Creator Studio is yours to explore.

Facebook video views graph

As you’re exploring, you’ll find that the left-hand menu includes a tab labeled Insights. Clicking that tab will open up a drop-down menu, and from there you can navigate to Performance. The Performance page is where you’ll find all kinds of helpful data: total minutes viewed, one-minute video views, three-second video views, engagements, net followers, and so on. Scroll down the page a bit and you’ll see a list of your individual posts titled Top Videos. As you can imagine, the list organizes your library of content from best performing to worst performing. Clicking on an individual post opens up an advanced analytics window—a place to evaluate everything from average watch time to audience retention.

Facebook video views performance stats

I share all of that to say this: Use Creator Studio to your advantage. Investigate your best and worst posts to find out what works and what doesn’t. Your flexibility will be rewarded with improved performance over time; among other things, that means more video views.

3 examples to help you earn more video views

Before we go our separate ways, let’s take a look at three real-world examples of (what I consider to be) effective Facebook videos.

1. HellthyJunkFood

Watch the full video here.

This example from HellthyJunkFood—an unconventional web-based cooking show hosted by J.P. Lambiase and Julia Goolia (a real name, believe it or not)—checks two major boxes: It’s easy to enjoy without audio and it provides clear value to its viewers. Thanks to the duo’s sparing use of subtitles, you don’t need to hear what they’re saying in order to understand what’s going on. Plus, everyone who watches the video walks away with a much better idea of how to make homemade donuts. Talk about value!

2. Sebastian Robeck

Watch the full video here.

This is an ad from Sebastian Robeck, a digital marketer who helps agencies grow their client bases. With this simple promo for his free training, he’s managed to check four of my boxes: It’s easy to understand without audio, it’s made specifically for Facebook, it provides clear value to its viewers, AND it uses a home video aesthetic. Once again, subtitles eliminate the need for audio. Because it’s made specifically for Facebook, Robeck is able to speak to a very defined audience. Value comes in the form of free knowledge, and the casual aesthetic allows the video to blend seamlessly into users’ News Feeds.

3. University of Massachusetts Amherst

Watch the full video here.

Finally, we have an example from my beloved alma mater, the University of Massachusetts Amherst. This 60-second video is a funny, effective promo for New2U, the university’s annual end-of-summer sale that allows returning students to stock up on used dorm room essentials for incredibly good prices. Like our two previous examples, it checks multiple boxes: It’s easy to understand without audio, it’s made specifically for Facebook, AND it provides clear value to its viewers. At this point, the utility of subtitles is abundantly clear. Like Sebastian Robeck, the marketers at UMass understand the power of content that’s tailor-made for a specific audience. And of course, value comes in the form of discounted dorm room essentials. If this were your first exposure to the university’s Facebook page, it’d give you a strong incentive to come back for more content: This is the place to find out about can’t-miss events!

GM is bringing back the Hummer as an electric ‘super truck’ with 1,000 horsepower

GM is bringing back the Hummer in a new electric form. The automaker confirmed Thursday plans to produce an all-electric Hummer with 1,000 horsepower and the ability to accelerate from zero to 60 miles per hour in 3 seconds.

This ‘super truck,’ which GM teased in a several videos, will be under its GMC brand. The teasers, one of which is posted below, were released ahead of a 30-second Super Bowl ad for the Hummer called ‘Quiet Revolution’ that will star NBA phenom LeBron James.

All of these videos and the ad will lead into a big reveal scheduled for May 20.

GM isn’t releasing information on the base price of the Hummer. The automaker did share some eye-popping specs, including it will produce the equivalent of 1,000 horsepower, have a 0 to 60 mph acceleration of 3 seconds and 11,500 feet of torque.

“GMC builds premium and capable trucks and SUVs and the GMC HUMMER EV takes this to new heights,” Duncan Aldred, vice president of global Buick and GMC, said in a statement.

The company said the Hummer EV will be produced at its Detroit-Hamtramck assembly plant in Michigan. On Monday, GM announced plans to invest $2.2 billion into its Detroit-Hamtramck assembly plant to produce all-electric trucks and SUVs, as well as a self-driving vehicle unveiled by its subsidiary Cruise. The automaker said it will invest an additional $800 million in supplier tooling and other projects related to the launch of the new electric trucks.

GM will kick off this new program with an all-electric pickup truck that will go into production in late 2021. The Cruise Origin, the electric self-driving shuttle designed for ridesharing, will be the second vehicle to go into production at the Detroit area plant.

Detroit-Hamtramck will be GM’s first fully dedicated electric vehicle assembly plant. When fully operational, the plant will create more than 2,200 jobs, according to GM.


Why branding is rooted in evolution. We brand to survive.

brand to survive

By Evelyn Starr, {grow} Community Member

In Mark Schaefer’s book Marketing Rebellion, he states that consumers are now in control of brands and that this is the new order of marketing.

From an industry standpoint, this is certainly an unsettling new order!

But from consumers’ point of view, nothing has changed.

The disparity between the industry’s “a-brand-is-what-we-say-it-is” perspective and consumers’ true perception of a brand comes from the industry’s misunderstanding of how brands form in the minds of consumers.

Let’s explore that today.

The changing idea of “brand”

Marketers have long thought of “brand” in the cattle-marking sense. We are marking this entity in the manner we want you to see it.

Marketers rationalized that consistent marking and repeated impressions over time would make their conception of the brand actually become the brand in consumers’ minds.

The problem is that companies were only factoring their one-way communication into consumers’ image of a brand.

How brands form today

Consumers – humans – are wired for survival.

From our earliest days we’ve had to make decisions to keep ourselves alive.

Our early decisions included whether an encountered animal was a predator or prey. We used our past experiences and those we gleaned from others to categorize animals in our minds so we knew quickly whether to flee to safety or to pursue dinner.

Today’s challenges are less about bodily threats, and more focused on managing the thousands of messages that come our way each day.

We don’t have time to consider each message anew.

Instead, we do what we have always done – we accumulate experiences with an entity to formulate an image that helps us decide quickly whether we want to give our attention to that entity or not.

We brand to survive.

A sum of experiences

This is how brands form in consumers’ minds. They are the sum of all the experiences the consumer has had with the brand.

Some of those experiences are marketing messages from the company. But many experiences occur without the company’s knowledge.

Product usage experiences at home, out-of-stock situations in store, tales of good or bad experiences with the brand from friends, experiences working for the company…these and more get stored in the folder marked for that brand in that consumer’s mind.

Coca Cola’s Brand Image in Advertising and in Reality

In Mark’s recent post about the idea of brand, he featured an 1890 Coca Cola ad where the company portrayed the brand as sophisticated, youthful and vigorous.

brand to suvive coke

By the 1950s, Coca Cola was still promoting those attributes in campaigns with the taglines “Almost everyone appreciates the best” and “Sign of good taste”.

My father worked for Coca Cola in New York City for two short stints in the late 1950s.

In June 1958 he was one of many college students Coca Cola hired for long shifts stacking bottles as they came off the line. The company paid overtime, welcome extra funds to college students.

The second stint was after he got out of the army in December 1959. The company paid overtime then too, and honored his union card meaning he got paid for the December holidays though he only worked a few days.

My father felt grateful to Coca Cola for the opportunity to earn much needed money. The jobs proved to be fun because the young people working there enjoyed being together.

My father’s brand image of Coca Cola is generous, fun and youthful from his experience working for the company. Not sophisticated though as the ads were saying.

When I was a child, Coca Cola was saying it wanted to teach the world to sing. Still a youthful and vigorous portrayal of the brand, though perhaps less sophisticated.

My parents did not keep Coca Cola in the house, however. My mother was health conscious before it was fashionable and did not want us to have the sugary drink.

My brand image of Coca Cola was that despite catchy TV commercials the product was not good for you.

As you can see, Coca Cola’s image in my mind and in my father’s mind came more from our experiences than from messages the company conveyed. We made choices about the brand and talked about it from our own perspective.

We controlled the Coca Cola brand in our lives.

Consumers Brand to Survive Every Day

According to Beverage Industry magazine, in 2018 the top 100 beverage companies accounted for 221 products in 15 different categories.

No matter which beverage category we want, we are still deciding among several brands.

And this is just a beverage choice.

We make hundreds of product and brand choices daily.

That is why we brand to survive.

We use our past experiences to shortcut the consideration process and decide quickly so we can move on with our lives.

Social media wake up call

Before the internet, we mostly kept our brand experiences to ourselves. Maybe we told a few people in our innermost circles.

Only a few souls were motivated to complain or compliment the brand wrote or called the company. Once the internet arrived, a few more emailed companies their thoughts.

Then came social media.

In the mid-2000s as Facebook, Twitter and YouTube launched, marketers discovered that not only could they advertise there, but consumers could express their feelings and share their experiences with brands there.

Suddenly consumers had the same kind of broad media platform that brands had enjoyed for years.

Social media reversed the communication flow of brand messages and turbocharged it.

Marketers felt like consumers had wrested control of their brands from them as thousands of consumer brand messages flew at them on social media, dominating conversation about their brand.

But what really happened is that they were finally privy to consumer conversations that happened in private before but now happened in public with a megaphone.

What does brand to survive mean for marketers?

Marketing isn’t going to override thousands of years of human evolution. Consumers’ branding-to-survive modus operandi is the reality that companies must face.

With social media, companies can’t feign ignorance and risk flak for disingenuous, inauthentic or inappropriate messaging, as Peloton learned recently.

The way to cope is to switch marketing’s focus from messaging to experience.

Every brand experience matters. Brands are constantly evolving in consumers’ minds. Recent experiences can loom large.

Marketers should be listening to customers via all channels available to them – social media, customer service lines, in-store, website help chats, market research – to understand their brand’s current image from the customer’s point of view.

With a benchmarked starting point, marketers need to articulate what they want the brand experience and image to be and then map a course to get there.

The course reaches beyond the marketing department into all areas of the business. Employees’ experience with the brand and how they talk about it is a significant contributor to brand image. Same for partners, vendors, anyone who comes in contact with the brand.

Even with perfect execution, you can’t control your brand. With careful execution you can influence it though and also build much goodwill that can buffer some less-than-ideal experiences.

If this effort seems daunting, remember that the humanity that causes consumers to brand also promotes understanding, forgiveness and enthusiasm.

Working toward exceptional brand experiences can be rewarding and give your brand a true competitive advantage.

Maybe it can even teach the world to sing!

Evelyn Starr is a brand strategist, writer and Founder & CEO of E. Starr Associates which specializes in marketing help for brands in adolescence, brands that have stalled after their initial success. Connect with Evelyn on LinkedIn and Twitter.

Illustration courtesy

The post Why branding is rooted in evolution. We brand to survive. appeared first on Schaefer Marketing Solutions: We Help Businesses {grow}.

Community drama threatens Twitch influencers. Are marketers at risk?

twitch influencers

By Kiki Schirr, {grow} Contributing Columnist

A few years ago, I started reporting on the red-hot live stream video game channel, Twitch. It was bought by Amazon in 2014 for nearly a billion dollars. and was growing at an astronomical rate. The popularity of streaming video game play was catching on outside of Asia, where competitive eSports filled arenas. Twitch influencers were on fire and one of the most exciting new marketing opportunities on the planet.

Just a few years later, many Twitch influencers and brand sponsors are wondering if the platform is crumbling.

Let’s look at some of the problems and risks of this promising platform.

1. Twitch influencers on the move

A significant crack has appeared in the streaming fortress: Twitch influencers are leaving for YouTube.

Activision Blizzard, the game developer behind Twitch-staples like Call of Duty, Overwatch, and Hearthstone, announced that it had signed an exclusive eSports league contract with YouTube. So while individual streamers can still play these games on Twitch, the arena-filling professional competitions will be aired exclusively on YouTube.

Some news outlets suggest that Twitch had voluntarily opted not to renew their exclusive two-year contract with Activision Blizzard. Whether it was by Amazon’s choice or not, YouTube’s new contract is another in a series of recent losses for Twitch.

Several prominent live streamers have left Twitch over the last year, including Jack ‘CouRage’ Dunlop‘s exclusive contract with YouTube and Ninja’s departure for Microsoft’s Mixer.

2. Gender wars

Certain parts of the Twitch gaming community have become a cesspool of misogynistic conduct.

Tensions often run high between genders as men and women face unique challenges on the platform. Men who stream on Twitch rant about “bikini streamers” who they say rely on appearance and skimpy clothing to boost viewership.

Some of Twitch’s most notorious casters have responded with harassment, including misogynistic rants that refer to female streamers as “sluts.”

One of the most notable rants occurred last November when a viral video of a caster named Trainwrecks spread around Twitter. Trainwrecks is heard in a video talking about taking the platform back from “bikini streamers” and returning Twitch to its former glory days.

Women can be targeted for persistent harassment by organized groups of Twitch vigilantes.

3. Twitch community standards are weak

Twitch has always had defined community standards. However, Twitch has never defined community standards well.

While any community that features user-generated content (UGC) always has growing pains related to the need for moderation, Twitch is notorious for vague rules and seemingly-random suspensions.

One woman streamer complained that she’d been suspended while wearing a tank top and (short) shorts on her stream. Her outfit didn’t violate the rules, which said if she could wear it to the mall she’d be fine. While her outfit was perfectly fine at the mall, it wasn’t fine for moderators, despite written rules to the contrary.

Another example of inconsistent punishment: Recently a male streamer ranting about women was suspended for five days during the same week that a woman received only a 24-hour suspension for streaming explicitly sexual content.

If you were open to conspiracy theories (as many Internet denizens are), it would be easy to suspect that Twitch deliberately leaves these policies vague. Even after rule updates in 2018, Twitch community standards seem open to nearly any interpretation.

Twitch influencers

Ice Poseidon

Streamers also objected to the company’s position that Twitch influencers are responsible for the actions of their fans. This was likely spurred by the 2017 airplane bomb threat called in by a fan impersonating then-Twitch streamer Ice Poseidon.

Twitch used the bomb threat as the final straw in Ice Poseidon’s permanent Twitch ban. While a permanent ban was likely wise given his previous on-air antics, Ice Poseidon often protests that Twitch punished the victim for the crime. This accusation seems true.

Twitch influencers — Should marketers flee?

While the drama stirs on Twitch, marketers should pause and reconsider whether Twitch influencers remain an effective source of brand marketing.

While Twitch streamers spend an enormous amount of time in front of their fans, sponsoring influencers who could be suspended or platform-hop at any time is risky. Toxic in-fighting between streamers and the bleed of talent to new apps can’t be predicted.

If you wish to work with Twitch influencers, remember to add a clause about being allowed to change payment in the event of a drop in viewership due to a platform switch.

You might also want to add, no matter how old-fashioned it might sound, a morality contingency to your contract. While in the past these morality clauses penalized adultery or crime, these days it might be better to protect your brand from overt displays of misogyny, racism, or lewd acts for financial gain.

Do you have any wisdom to share when it comes to influencer marketing in the gaming world? Have you worked with Twitch or another live streaming platform? Feel free to drop advice for fellow {grow} community members in the comment section below. I hope you’ve found this to be an interesting follow-up to past articles on using Twitch for social media marketing!

KikiSchirrKiki Schirr is a freelance marketer who enjoys absorbing new trends within the tech scene. Her favorite games are turn-based strategy PC games like Sid Meier’s Civilization series. After Civ IV nearly interfered with her undergraduate GPA, Kiki has been forced to use computer time-tracking apps or avoid new Civ releases entirely. She is most easily reached via Twitter.

Illustration courtesy

The post Community drama threatens Twitch influencers. Are marketers at risk? appeared first on Schaefer Marketing Solutions: We Help Businesses {grow}.

YouTube Display Ads 101: How to Target Placements & Boost Conversions

When looking up the definition for the Google Display Network, we get the following description on the Google Ads help site: “A group of more than 2 million websites, videos, and apps where your ads can appear.” The Google Display Network goes beyond just websites; the sentence clearly states our ads can appear in apps and on videos, too. And, of course, when we talk about videos on the Display Network, we’re talking about YouTube videos. 

In this guide, I’ll show you everything you need to know about display ads on YouTube to start boosting conversions, including: 

  • How to target your Display Network ads on relevant video content on YouTube
  • Which YouTube display ad guidelines to follow
  • How to monitor your ad placements
  • How to measure the value of your ads

Here we go.

Targeting for YouTube display ads

When you are creating a new ad group, find the “Content” option when you are selecting your targeting. Here, you will be able to narrow down where you would like your ads to be shown. The options to narrow down your targeting in the content portion include keywords, topics, and, of course, placements.


After you select “Placements,” you have a few options for searching for specific YouTube placement ideas. The first option would be to select “YouTube Channels.” Then you can search for specific channels or suggestions for recommended YouTube channels based on keywords you’ve typed into the search bar. 


The second option you have for selecting YouTube placements will be very similar to the first. But instead of selecting only “YouTube Channels,” you’ll also select “YouTube Videos.” Then, using the same search feature, you can either look for specific videos by the title or use keywords to find any video related to the keyword you typed. 


The last option would be to type in a specific video ID. To find the video ID, you will need to go to the video watch page of the video you would like your display ad to be placed. Then, in the URL bar, copy the portion of the URL after the “/watch?v=” part. That is the video ID, and we have an example of what that looks like below. 


Paste the video ID into the placement search function to try and find the video as a placement for you to target in your ad group. The reason I say “try” is because not every video is eligible to show ads. If you search for a specific video, whether by channel, video, or video ID, and you don’t see the placement results you were expecting, it most likely means those YouTube placements are not eligible for Display Network ads. If that is the case, you will have to search for alternative options

Remember, YouTube display ad placements aren’t exact

The sneaky part about placement targeting (whether it’s through the Google Display Network or when you run video campaigns in Google Ads) is that placement targeting may not always be as exact as you may think. Because if you look at the image below, you see some fine print Google lays out as a warning. 


Google states, “Your ad can appear on any YouTube or Display Network placements that match your other targeting. Add specific placements to narrow your targeting. If a specific website you target has an equivalent app, your ads can also show there.”

This means if you add additional layers to your ad group targeting—like topics, keywords, audiences, etc.—and you’re not eligible to show up on the YouTube placements you chose (maybe due to strong competition), your display ads could show up on many alternative placements you were not expecting. No, this is not ideal, but it is the hand we are dealt—and we’ll talk about how to keep tabs on this when you get to monitoring in just a minute. 

Formatting YouTube display ads

There are two main display ad formats you will want to make sure you have ready before launching your new ad groups. The first option will be your regular display ads. This particular ad format, according to Google, “Appears to the right of the feature video and above the video suggestions list. For larger players, this ad may appear below the player.” And these ad sizes are either 300×250 or 300×60. The second option is the overlay ad type, which can be seen in the example below. 


Overlay ads will appear directly over the video while it is playing. Viewers will also have the option to click the “x” in the upper right hand corner of the ad to remove it from the viewscreen. Google states these ads will appear on the lower 20% portion of the video to be exact. These ads need to be 468×60 or 728×90, and they can be either image ads or text ads. 

Pro tip: This means your responsive display ads will work for overlay ads. 

Monitoring your YouTube display ads

Whether you are using audience targeting to reach users on YouTube or manually selecting specific YouTube placements, it is still important to monitor your placement reports. This section in Google Ads gives you the ability to find out which placements you may want to exclude from your campaigns. You may also find new placements to try and target if your initial targeting expands to more than managed placements. 


In the Placements report in Google Ads, make sure you are looking at the “Where Ads Showed” tab. These are not the placements you are targeting, but they are the placements where your ads were actually shown. Even if you only have managed placements in your ad group targeting, monitor your placement reports very closely. As we talked about in the previous section, you may find several placements you were not intending on targeting showing up in your reports.

Measuring the value of your YouTube display ads

One thing I’m asked all the time that gets under my skin is this: “How come our Display campaigns do not convert as well as our Search campaigns?” 

We have to get this comparison out of our heads. Yes, your Display Network campaigns can convert, and that is a goal we should all strive to achieve. But we cannot forget about the differences in user intent between the Search Network and the Display Network. The Search Network typically shows us a more specific answer to what the user was searching for. Advertisers can easily adjust their text ads to satisfy a user’s search query, whether the queries are discovery-based or have a more intent to convert immediately. 

With the Display Network, we are disrupting a user’s experience to try and keep our brands on top of their minds. Take YouTube, for example. The user is there to watch specific videos. So our goal with running display ads on YouTube should be to run enticing creative that is going to get the user to want to click on our ads and bring them to our site (or back to our site if you are utilizing remarketing audiences). Even if the user is not ready to convert at that moment, we are at least giving them a reminder. This is why we should be updating our columns in our Placement reports to get a better understanding of the whole picture. 

In the example above, I’m using a filter, so it’s not showing the full totals. But in the date range I was using, total display spend on YouTube placements was $36,000, and there were 203 total conversions from display. This gave us a CPA of $180. But when we add the “View-through Conversion” column, we can see 654 viewers saw our display ad on these YouTube placements and did not interact with them at the time, but later went on to convert. View-through conversions also exclude everyone who interacted with any other type of ad in your account so we are going purely off of visibility here. We can then make a view-through rate CPA metric of our own, and that number is $56. This helps us show how running display ads on these YouTube placements is way more valuable than reviewing last-click conversions. 

In addition to view-through conversions, I also like to add the “Viewable Impressions” column. In order to grow my view-through conversions, I need to grow my viewable impressions. And all of these “viewability” columns can also be added when you are reviewing your display creative. The better we can see how many people are seeing our ads, eventually converting from these ads, and which YouTube placements help drive these conversions, the better we can optimize our campaigns to have more successful display campaigns on YouTube

Make sure you’re setting up YouTube display ads

YouTube is the second largest search engine in the world after Your audience is on YouTube. And advertisers have the opportunity to get in front of an engaged audience even if you do not have video assets to use for advertising. Test out some managed placements on YouTube and build awareness to people who are dedicated to certain YouTube channels or videos. Then make sure you are reviewing the columns in Google Ads that will show you a bigger picture beyond last-click conversions from your display ads. When you focus on the bigger picture, you will be able to optimize your YouTube display ad campaigns for bigger success.

Coinbase poaches Google Shopping VP as CPO for cryptocommerce

“We’re trying to shift cryptocurrency from this speculative asset class to driving real world utility” Coinbase CEO Brian Armstrong tells me. How? Through commerce and micropayments. But now Coinbase has the who to build it. Today the startup announces it’s hired away former Head Of Product for Indian ecommerce giant Flipkart and Google Shopping VP of Product Surojit Chatterjee to become Coinbase’s Chief Product Officer.

“I’ve always enjoyed being associated with technology that is on the brink of changing how we live” writes Chatterjee. “Google ads has helped democratize commerce, Flipkart and ecommerce has revolutionized life in India, and I believe Coinbase is going to turn conventional finance on its head.”

Chatterjee spent over 11 years at Google over two stints, the first as a founding member of Google’s mobile search Ads product that’s grown to tens of billions in revenue per year. When he starts at Coinbase next week, Armstrong tells me he’ll help Coinbase organize its complex array of products, including its cryptocurrency exchange, wallet, stablecoin, incentivized crypto education platform Earn, and Coinbase Commerce that lets businesses take payments in Bitcoin, Ethereum, and more.

“Surojit is a huge asset here because we’re a product led company” Armstrong says. “We have different leaders and they increasingly have responsibilities around P&L. Having one really experienced Chief Product Officer that can mentor them and teach them to own revenues and budgets — really in the model of Google — that will professionalize Coinbase.”

One opportunity Armstrong hopes Chatterjee can help Coinbase seize on is building products for emerging markets where financial infrastucture is weak. “Ecommerce is not equally distributed around the world. Micropayments don’t work that well . . . Him spending time living in India, a developing market, he deeply understands mobile money.” Given the explosion of phone based payments, the demonetization, and the prevalence of cash on delivery methods in India that Flipkart dealt with, “his background is kind of ideal from that worldly perspective” Armstrong explains.

Chatterjee cites his upbringing as inspiration to deliver “economic freedom for everyone”, as Armstrong says is Coinbase’s mission. “Growing up in India in a poor middle-class household, I saw very closely what a lack of liquid cash does to a family’s lifestyle” Chatterjee recalls. 

“As a kid I would go with my mom to a local bank to withdraw money. And believe me when I tell you that the process was epic!” It included withdrawl slips, tokens, and anxiously trying to match current signatures to versions decades old. When India demonetized and made everyone exchange their cash, “My dad, who was almost 80 at that time, stood in a queue for 5 hours to get 2000 Rs, which was the per-day limit for the first week. That’s less than $30!” Digital money could ensure people always have access to everything they own.

In developed countries, Armstrong sees a chance for Chatterjee to enable digital content creators to turn their passion into their profession. “There’s lots of people who lurk on Reddit or Stack Overflow and answer questions . . . If there was real money on these things, these could be their full time jobs — contributing content on users generated social sites” Armstrong predicts. “I think you’d see a lot more contributions as well.

Now might be the perfect time to hire Chatterjee since we’re in a lull period for cryptocurrency in the wake of the rush at the end of 2018. “Crypto is always challenging to navigate. In these periods when it’s relatively quiet, we tend to do really well” Armstrong says. The company grew market share, volume, and app installs vs competitors between 50% and 100%, according to the CEO. Referencing ancient war strategy, Armstrong concludes that “There’s years where you just want to train the soldiers and stockpile reousrces and you’re basically just preparing. We’re building the company, not just responding to crazy hype.”