Category: Uncategorized

Stay Creative, Stay Inspired (April 2020 Wallpapers Edition)

Stay Creative, Stay Inspired (April 2020 Wallpapers Edition)

Stay Creative, Stay Inspired (April 2020 Wallpapers Edition)

Cosima Mielke

In times like these where our everyday life is pausing and we’re trying to find strategies to cope with this situation we all find ourselves in at the moment, little routines can help give us a sense of security and familiarity — no matter if it’s having a cup of coffee in the midday sun on your balcony, calling an old friend in the evenings, or trying out a new recipe every day.

One of our routines here at Smashing that has been going on for more than nine years already and that we’re continuing now, too, of course, is to provide you with new wallpapers every month. So if you need a little bit of colorful inspiration or something to cheer you up this April, we’ve got you covered.

Designed with love by artists and designers from across the globe, the wallpapers in this collection come in versions with and without a calendar for April 2020. As a little bonus goodie, we also compiled some wallpaper favorites from the past at the end of this post — after all, some things are just too good to be forgotten. A big thank you to everyone who shared their artworks with us this month! Enjoy and take care!

  • All images can be clicked on and lead to the preview of the wallpaper,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit your wallpaper

Did you know that you could get featured in one of our upcoming wallpapers posts, too? We are always looking for creative talent, so if you have an idea for a wallpaper design, please don’t hesitate to submit it. Join in! →

Spring Awakens

“Despite the threat that has befallen us all, we all look forward to the awakening of a life that spreads its wings after every dormant winter and opens its petals to greet us. Long live spring, long live life.” — Designed by LibraFire from Serbia.

Spring Awakens

April Flowers

“While April showers usually bring May flowers, we thought we all deserved flowers a little early this year. During a stressful time in the world, spending time thinking about others is an antidote to some of the uncertainty. We thought this message, Lift Others Up, reflected the energy the world needs.” — Designed by Mad Fish Digital from Portland, Oregon.

April Flowers

An Era Of Metals With Sense Of Touch

“In the future we can expect that machines will have emotions and they will start loving nature and flowers.” — Designed by Themesvillage from London.

An Era Of Metals With Sense Of Touch

April Fox

Designed by MasterBundles from the United States.

April Fox

Celebrating the Genius

“‘Iron rusts from disuse; water loses its purity from stagnation… even so does inaction sap the vigor of the mind.’ These are the words of no other than the ‘Universal Genius’. Leonardo da Vinci’s unprecedented talents, exemplary imagination, and an unquenchable wonder shaped not solely the Renaissance era but the future of humankind. On April 15, we mark the birthday of one of the world’s greatest painters, most prolific inventors, and the father of paleontology and architecture.” — Designed by PopArt Studio from Serbia.

Celebrating the Genius

You’re Smashing

Designed by Ricardo Gimenes from Sweden.

You’re Smashing

National Submarine Day

Designed by Nicolas van der Straten Ponthoz from Belgium.

National Submarine Day

Take Our Daughters And Sons To Work Day

“The day revolves around parents taking their children to work to expose them to future job possibilities and the value of education. It’s been an annual event since 1992 and helps expose children to the possibilities of careers at a young age.” — Designed by Ever Increasing Circles from the United Kingdom.

Take Our Daughters And Sons To Work Day

Stay Home And Smash Covid-19

“Inspired by the current situation of Corona virus affecting the world.” — Designed by WrapPixel from India.

Stay Home And Smash Covid-19

Everything Will Be Alright

“This month we don’t need more words. Just these.” — Designed by Joana Vicente from Portugal.

Everything Will Be Alright

Oldies But Goodies

A lot of wallpaper goodies have seen the light of day in the nine years that we’ve been running our monthly wallpapers challenge. Here’s a selection of favorites from past April editions. Maybe you’ll rediscover one of your almost-forgotten favorites, too? (Please note that these wallpapers don’t come with a calendar.)

A Time For Reflection

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

A Time for Reflection

Dreaming

“The moment when you just walk and your imagination fills up your mind with thoughts.” — Designed by Gal Shir from Israel.

Dreaming

Inspiring Blossom

“‘Sweet spring is your time is my time is our time for springtime is lovetime and viva sweet love’, wrote E. E. Cummings. And we have a question for you. Is there anything more refreshing, reviving, and recharging than nature in blossom? Let it inspire us all to rise up, hold our heads high, and show the world what we are made of.” — Designed by PopArt Studio from Serbia.

Inspiring Blossom

Spring Fever

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

Spring Fever

Yellow Submarine

“The Beatles — ‘Yellow Submarine’: This song is fun and at the same time there is a lot of interesting text that changes your thinking. Like everything that makes The Beatles.” — Designed by WebToffee from India.

Yellow Submarine

Clover Field

Designed by Nathalie Ouederni from France.

Clover Field

Wonderful Life

“My favorite song is ‘Wonderful Life’ from Black from my childhood. This picture that was taken in a very beautiful dock in Belgrade evokes a calm feeling from that song, a peacefulness of soul and mind. Each of us has a gift, but what is truly wonderful is to embrace a flair toward life in small things because, no need to run and hide, it’s a wonderful, Wonderful Life. Cheers!” — Designed by Marija Zaric from Belgrade, Serbia.

Wonderful Life

Happy Easter

Designed by Tazi Design from Australia.

Happy Easter

Fairytale

“A tribute to Hans Christian Andersen. Happy Birthday!” — Designed by Roxi Nastase from Romania.

Fairytale

Be Happy Bee

Designed by Kiraly Tamas from Romania.

Be Happy Bee

Spring Infographics

“Spring comes for everyone, for big and for small. How spring is arranged? I suggest us to understand this question.” — Designed by Ilya Denisenko from Russia.

Spring Infographics

Without The Rain There Would Be No Rainbows

“I love April showers and the spring blooms they bring!” — Designed by Denise Johnson from Chicago.

Without The Rain There Would Be No Rainbows.

Sakura

“Spring is finally here with its sweet Sakura’s flowers, which remind me of my trip to Japan.” Designed by Laurence Vagner from France.

Smashing Wallpaper - April 2011

Good Day

“Some pretty flowers and spring time always make for a good day.” — Designed by Amalia Van Bloom from the United States.

good day

April Cosmos

“I was inspired by a non-fiction book The Living Cosmos written by University of Arizona professor of astronomy Chris Impey. It’s a research of scientists trying to address the questions we ask about nature. Is there life in the universe beyond the Earth?” — Designed by Paul Ranosa from the Philippines.

April Cosmos

Spring

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

Spring

Vector Saraswathi

“Saraswathi, Goddess of Creativity (Indian mythology).” Designed by Atma Creative Team from India.

Smashing Wallpaper - April 2011

Egg Hunt In Wonderland

“April is Easter time and I wanted to remind us that there’s a child inside all of us. My illustration is based on the story that fills our imagination since childhood, Alice in Wonderland, and joined to one of the most traditional customs in America at this time of year, the egg hunt. That’s how we get an ‘egg hunt in wonderland’.” — Designed by Patrícia Garcia from Portugal.

Egg Hunt In Wonderland

Skateboarding Bunny

Designed by Lew Su-ann from Brunei Darussalam.

Skateboarding Bunny

Join In Next Month!

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

Thank you to all designers for their participation. Join in next month!

How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)

How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)

How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)

Paul Hanaoka

Literally, tomes have been written on version control. Nevertheless, I will start by sharing a brief explanation and other introductory content to whet your appetite for further study.

Version control (not to be confused with version history) is basically a way for people to collaborate in their own environments on a single project, with a single main source of truth (often called the “master” branch).

I’ll go over today is the bare minimum you’ll need to know in order to download a project, make a change, and then send it to master.

There are many types of version control software and many tools for managing and hosting your source code (you may have heard of GitLab or Bitbucket). Git and GitHub are one of the more common pairs, my examples will reference GitHub but the principles will apply to most other source code managers.

Aside:

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there’s even a CSS-only approach for tracking UI interactions using Google Analytics. Read a related article →

Your First Contribution

Before doing these steps, you’ll need a few things set up:

  1. A GitHub account,
  2. Node and NPM installed on your computer,
  3. A high tolerance for pain or a low threshold for asking others for help.

Step 1: Fork (Get A Copy Of The Code On Your GitHub Account)

On GitHub, you will fork (fork = create a copy of the code in your account; in the following illustration, the blue, orange, red, and green lines show forks) the repository (repo) in question.

By creating branches off of the master, it’s possible for multiple people to contribute to different areas of a project and then merge their work together. (Large preview)

You do this by navigating to the repo in GitHub and clicking the “Fork” button, currently at the top right-hand corner of a repo. This will be the “origin” — your fork on your GitHub account.

As an example, navigating to https://github.com/yourGitHubUsername/liferay.design should show your fork of the Liferay.Design repo.

This is victorvalle’s GitHub fork. (Large preview)

Step 2: Clone (Download The Code To Your Computer)

In your terminal, navigate to where you’d like to store the code. Personally, I have a /github folder in my /user folder — it makes it easier for me to organize it this way. If you’d like to do that, here are the steps — after typing these commands into your terminal window, press the key to execute:

cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there
mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github
cd github ## this command navigates you inside the github folder

Now that you’re in the /github folder, you will clone (download a copy of the code onto your computer) the repo.

clone https://github.com/yourGitHubUsername/liferay.design

Once you enter this command, you’ll see a bunch of activity in the terminal — something like this:

Cloning into 'liferay.design'...
remote: Enumerating objects: 380, done.
remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380
Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done.
Resolving deltas: 100% (189/189), done.

Step 3: Install (Get It Running On Your Machine)

Navigate into the /project folder. In this case, we’ll enter cd liferay.design. Most projects will include a README.md file in the /root folder, this is typically the starting place for installing and running the project. For our purposes, to install, enter npm install. Once it’s installed, enter npm run dev.

Congratulations! You now have the site available on your local computer — typically projects will tell you where it’s running. In this case, open up a browser and go to localhost:7777.

Step 4: Commit (Make Some Changes And Save Them)

A commit is a collection of changes that you make; I’ve heard it described as saving your progress in a game. There are many opinions on how commits should be structured: mine is that you should create a commit when you’ve achieved one thing, and if you were to remove the commit, it wouldn’t completely break the project (within reason).

If you aren’t coming to a repo with a change in mind, a good place to go is the ‘Issues’ tab. This is where you can see what needs to be done in the project.

If you do have an idea for some change, go ahead and make it. Once you’ve saved the file(s), here are the steps required to create a commit:

git status ## this will print out a list of files that you've made changes in
git add path/to/folder/or/file.ext ## this will add the file or folder to the commit
git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

Tip: The best recommendation I’ve ever seen for commit messages is from Chris Breams’s “How To Write A Git Commit Message”. A properly formed Git commit subject line should always be able to complete the following sentence: “If applied, this commit will [your subject line here].” For more info on commits, check “Why I Create Atomic Commits In Git” by Clarice Bouwer.

Step 5: Push (Send Your Changes To Your Origin)

Once you’ve made some changes on your computer, before they can be merged into the master branch (added to the project), they need to be moved from your local to your remote repo. To do this, enter git push origin in the command line.

Step 6: Pull Request (Ask For Your Changes To Be Merged Into Upstream)

Now that your changes have gone from your fingers to your computer, to your remote repository — it’s now time to ask for them to be merged into the project via a pull request (PR).

The easiest way to do this is by going to your repo’s page in GitHub. There will be a small message right above the file window that says “This branch is X commits ahead repo-name:branch” and then options to “Pull request” or “Compare”.

Clicking the “Pull request” option here will take you to a page where you can compare the changes and a button that says “Create pull request” will then take you to the “Open a pull request” page where you’ll add a title and include a comment. Being brief, but detailed enough in the comment, will help project maintainers understand your proposed changes.

There are CLI tools like Node GH (GitHub also recently released a beta of their CLI tool) that allow you to initiate and manage pull requests in the terminal. At this point you may prefer to use the web interface, and that’s great! So do I.

The ‘Pull request’ and ‘Compare’ options will appear once your fork has diverged from the upstream repo. (Large preview)

At this point, we have three repository references:

  1. upstream: the main repo that you’re tracking, often it’s the repo that you forked;
  2. origin: the default name of the remote that you clone;
  3. local: the code that is currently on your computer.

So far, you have #2 and #3 — but #1 is important because it’s the primary source. Keeping these three things in-line with each other is going to help the commit history stay clean. This helps project maintainers as it eliminates (or at least minimizes) merge conflicts when you send pull requests (PR’s) and it helps you get the latest code and keep your local and origin repositories up-to-date.

Set An Upstream Remote

To track the upstream remote, in your terminal enter the following:

git remote add upstream https://github.com/liferay-design/liferay.design

Now, check to see what remotes you have available — enter git remote -v into your terminal, you should see something like:

origin and upstream are the most common labels for remotes — ‘origin’ is your fork, ‘upstream’ is the source. (Large preview)
origin https://github.com/yourGitHubUsername/liferay.design (fetch)
origin https://github.com/yourGitHubUsername/liferay.design (push)
upstream https://github.com/liferay-design/liferay.design (fetch)
upstream https://github.com/liferay-design/liferay.design (push)

This will allow you to quickly get the latest version of what is upstream — if you haven’t worked in a repo in a long time and don’t have any local changes that you want to keep, this is a handy command that I use:

git pull upstream master && git reset --hard upstream/master

GitHub Help is a great resource for this and many other questions you might have.

HTML And CSS: Starting With Semantics

On the web, there is an endless supply of resources for learning HTML and CSS. For the purposes of this article, I’m sharing what I would recommend based on the mistakes I made how I first learned to write HTML and CSS.

What Are HTML And CSS?

Before we get any further, let’s define HTML and CSS.

HTML stands for HyperText Markup Language.

Hypertext:

“Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.”

— “Hypertext” on Wikipedia

Markup Language:

“…a system for annotating a document in a way that is syntactically distinguishable from the text.”

— “Markup Language” on Wikipedia

In case you also don’t know what a lot of those words mean — briefly put, HTML is the combination of references (links) between documents on the web, and tags that you use to give structure to those documents.

There’s an HTML5 tag for pretty much any basic element — otherwise you can always use a div! (Large preview)

For a thorough introduction to HTML and CSS, I highly recommend the Introduction to HTML and CSS first steps, both on the Mozilla Developer Network (MDN) web docs. That, along with the excellent articles that websites such as CSS Tricks, 24 Ways and countless of others provide, contain basically everything you’ll ever need to reference with regards to HTML/CSS.

There are two main parts of an HTML document: the <head> and the <body>.
– The <head> contains things that aren’t displayed by the browser — metadata and links to imported stylesheets and scripts.
– The <body> contains the actual content that will be rendered by the browser. To render the content, the browser reads the HTML, provides a base layer of styles depending on the types of tags used, adds additional layers of styles provided by the website itself (the styles are included in/referenced from the <head>, or are inline), and that is what we see in the end. (Note: There is often also the additional layer of JavaScript but it’s outside of the scope of this article.)

CSS stands for Cascading Style Sheets — it is used to extend the HTML by making it easier to give documents a custom look and feel. A style sheet is a document that tells the HTML what elements should look like (and how they should be positioned) by setting rules based on tags, classes, IDs, and other selectors. Cascading refers to the method for determining which rules in a sheet take priority in the inevitable event of a rule conflict.

“‘Cascading’ means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.”

Cascade — Max Design

CSS often gets a bad reputation — in sites with lots of style sheets it can quickly become unwieldy, especially if there aren’t documented, consistent methods used (more on that later) — but if you use it in an organized fashion and following all the best practices, CSS can be your best friend. Especially with the layout capabilities that are now available in most modern browsers, CSS is not nearly as necessary to hack and fight as it once was.

Rachel Andrew wrote a great guide, How To Learn CSS — and one of the best things to know before you start is that:

“You don’t need to commit to memorizing every CSS Property and Value.”

— Rachel Andrew

Instead, it’s far more vital to learn the fundamentalsselectors, inheritance, the box model, and most importantly, how to debug your CSS code (hint: you will need the browser developer tools).

Don’t worry about memorizing the syntax for the background property, and don’t worry if you forget about how exactly to align stuff in Flexbox (the CSS Tricks Guide to Flexbox is possibly one of my top-10 most visited pages, ever!); Google and Stack Overflow are your friends when it comes to CSS properties and values.

Some code editors even have built-in autocomplete so you don’t even need to search on the web in order to be able to figure out all the possible properties of a border, for example.

One of my favorite new features in Firefox 70 is the inactive CSS rules indicator. It will save you hours of time trying to figure out why a style isn’t being applied.

Kids these days have it so easy! (Large preview)

Semantics

Let’s start with semantic code. Semantics refers to the meanings of words, semantic code refers to the idea that there is meaning to the markup in any given language.

There are many reasons why semantics are important. If I could summarize this, I would say that if you learn and use semantic code, it will make your life a lot easier because you will get a lot of things for free — and who doesn’t like free stuff?

For a more complete introduction to semantic code, see Paul Boag’s brief blog post on the topic.

Semantics gives you many benefits:

  1. Default styles
    For example, using a headline tag <h1> for the title of your document will make it stand out from the rest of the document’s contents, much like a headline would.
  2. Accessible content
    Your code will be accessible by default, meaning it will work with screen readers and will be easier to navigate with a keyboard.
  3. SEO benefits
    Semantic markup is easier for a machine to read, which makes it more accessible to search engines.
  4. Performance benefits
    Clean HTML is the foundation for a high-performing site. And clean HTML will also likely lead to cleaner CSS which means less code overall, making your site or app faster.

Note: For a more in-depth look into semantics and HTML, Heydon Pickering wrote “Structural Semantics: The Importance Of HTML5 Sectioning Elements” which I highly recommend reading.

Engineering Principles And Paradigms: The Basics

Abstraction

There are tons of applications, tangents, and levels we could explore over the concept of abstraction — too many for this article which is intended to give you a brief introduction into concepts so that you are aware of them as you continue to learn.

Abstraction is a foundational engineering paradigm with a wide variety of applications — for the purposes of this article, abstraction is separating form from function. We’ll apply this in three areas: tokens, components, and the Don’t Repeat Yourself principle.

Tokens

If you’ve used a modern design tool for any length of time, you’ve probably encountered the idea of a token. Even Photoshop and Illustrator now have this idea of shared styles in a centralized library — instead of hard-coding values into a design, you use a token. If you’re familiar with the concept of CSS or SASS variables, you’re already familiar with tokens.

One layer of abstraction with tokens is to assign a name to a color — for example, $blue-00 can be mapped to a hex value (or an HSL value, or whatever you want) — let’s say #0B5FFF. Now, instead of using the hex value in your stylesheets, you use the token value — that way if you decide that blue-00 is actually #0B36CE, then you only have to change it in a single place. This is a nice concept.

Tokens for colors in the Lexicon Alerts component helps keep things DRY. (Large preview)

If you take this same paradigm of abstraction and go a layer further, you can token-ception — and assign a variable to a functional value. This is particularly useful if you have a robust system and want to have different themes within the system. A functional example of this would be assigning a variable like $primary-color and map that to $blue-00 — so now you can create markup and instead of referencing blue, you’re referencing a functional variable. If you ever want to use the same markup, but with a different style (theme), then you only need to map $primary-color to a new color, and your markup doesn’t need to change at all! Magic!

Components

In the past 3-4 years, the idea of components and componentization has become more relevant and accessible to designers. The concept of symbols (pioneered by Macromedia/Adobe Fireworks, later expanded by Sketch, and then taken to the next level by Figma and Framer), is now more widely available in most design tools (Adobe XD, InVision Studio, Webflow, and many others). Componentization, even more than tokens, can separate the form of something from the function of it — which helps to improve both the form and the function.

One of the more notable early examples is Nicole Sullivan’s media object component. At first glance you might not realize that a whole page is essentially composed of a single component, rendered in different ways. In this way, we can re-use the same markup (form), modifying it slightly by passing in options or parameters, and styles — and have it provide a variety of value (function).

Don’t Repeat Yourself

DRY (Don’t Repeat Yourself) is one of my favorite principles — creating things that can be reused over and over is one of the small victories you can have when coding.

While you often can’t (and arguably shouldn’t) strive to apply the DRY principle 100% of the time, every time — it’s at least beneficial to be aware of this so that as you’re working, you can consider how you can make whatever you’re working on more reusable.

A note on the Rule of Three: A corollary to the DRY principle is the rule of three — essentially, once you re-use (copy/paste) something three times, you should rewrite it into a reusable component. Like the Pirate’s Code, it’s more of a guideline than a hard and fast rule, and can vary from component to component and from project to project.

CSS And Styling Methodologies: Atomic vs. BEM

There are a lot of different ways to organize and write CSS code — Atomic and BEM are only two of the many that you’re likely to come across. You don’t have to “pick” a single one, nor do you have to follow them exactly. Most of the teams I’ve worked with usually have their own unique blend, based on the project or technology. It is helpful to be familiar with them so that over time, you can learn which approach to take depending on the situation.

All of these approaches go beyond “just” CSS and styling, and can often influence the tooling you use, the way you organize your files, and potentially the markup.

Atomic CSS

Not to be confused with Atomic Web Design — atomic (perhaps more aptly referred to as “functional”) CSS, is a methodology that essentially favors using small, single-purpose classes to define visual functions. A few notable libraries:

  1. Atomic CSS by Steve Carlson;
  2. Tachyons by Adam Morse;
  3. Tailwind CSS by Adam Wathan.

What I like about this method is that it allows you to quickly style and theme things — one of the biggest drawbacks is that your markup can get pretty cluttered, pretty fast.

Check John Polacek’s article on CSS-tricks for a full introduction to Atomic CSS.

BEM

The BEM philosophy is a great precursor to a lot of the modern JavaScript frameworks like Angular, React, and Vue.

“BEM (Block, Element, Modifier) is a component-based approach to web development.”

BEM: Quick Start

Basically, everything that can be reused is a block. Blocks are comprised of elements, something that can’t be used outside of a block, and potentially other blocks. Modifiers are things that describe the status of something or the way it looks or behaves.

Personally, I like the theory and philosophy of BEM. What I do not like is the way that things are named. Way too many underscores, hyphens, and it can feel unnecessarily repetitive (.menu, .menu__item, etc).

Recommended reading: BEM For Beginners written by Inna Belaya

Thank U, Next(.js)

After you have sufficiently mastered these topics, don’t worry, there is still plenty to learn. Some suggestions:

  1. Functional and object-oriented programming
    We touched on it lightly, but there’s plenty more to learn beyond CSS.
  2. Higher-level languages and frameworks
    Typescript, Ruby, React, Vue are the next things you’ll tackle once you have a strong grasp of HTML and CSS.
  3. Querying languages and using data
    Learning about GraphQL, MySQL, REST APIs will take your coding ability to the next level.

Conclusion: Designers Who Code != Software Engineers

Hopefully, this article has shown you that learning to code isn’t as difficult as you may have previously thought. It can take a lot of time, but the amount of resources available on the internet is astounding, and they’re not decreasing — quite the opposite!

One significant point that I want to emphasize is that “coding” is not the same as “software engineering” — being able to fork a repo and copy/paste in code from Stack Overflow can get you a long way, and while most, if not all, software engineers that I know have done that — you must use your new-found skills with wisdom and humility. For everything you can now access with some engineering prowess, there is that much more that you don’t know. While you may think that a feature or style is easy to accomplish because — “Hey, I got it working in devtools!” or “I made it work in Codepen.” — there are many engineering processes, dependencies, and methods that you probably don’t know that you don’t know.

All of that is to say — don’t forget that we are still designers. Our primary function is to add business value through the lens of understanding customer or user problems and synthesizing them with our knowledge of design patterns, methods, and processes. Yes, being a “designer who writes code” can be very useful and will expand your ability to add this value — but we still need to let engineers make the engineering decisions.

Anything Amiss?

There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.

Further Reading

  1. Coding Bootcamps vs. Computer Science Degrees: What Employers Want and Other Perspectives (Kyle Thayer)
  2. How To Start Using Sketch And Framer X (by Martina Pérez, Smashing Magazine)
  3. Introduction To Linux Commands (by Paul Tero, Smashing Magazine)
  4. Become A Command-Line Power User With Oh My ZSH And Z (by Wes Bos, Smashing Magazine)
  5. A list of the common cmd.exe and Unix commands that you can use in PowerShell (Microsoft Docs)
  6. regular-expressions.info (by Jan Goyvaerts)
  7. regexone.com (learn regular expressions with simple interactive exercises)
  8. Batch Resizing Using Command Line and ImageMagick (by Vlad Gerasimov, Smashing Magazine)
  9. Shortcuts And Tips For Improving Your Productivity With Sublime Text (by Jai Pandya, Smashing Magazine)
  10. Visual Studio Code Can Do That? (by Burke Holland, Smashing Magazine)
  11. Why version history is not version control (by Josh Brewer)
  12. Modern Version Control With Git (by Tobias Günther, Smashing Magazine)
  13. Hello World” (a GitHub step-by-step guide)
  14. How to Install Node.js and NPM on a Mac (by Dave McFarland)
  15. How to Install Node.js and NPM on Windows (by Dejan Tucakov)
  16. Why I Create Atomic Commits In Git (by Clarice Bouwer)
  17. How to Write a Git Commit Message (by Chris Breams)
  18. Semantic code: What? Why? How? (by Paul Boag)
  19. Structural Semantics: The Importance Of HTML5 Sectioning Elements (by Heydon Pickering, Smashing Magazine)
  20. Designing for Performance: Chapter 4. Optimizing Markup and Styles (by Lara C. Hogan, O’Reilly Media)
  21. The media object saves hundreds of lines of code (by Nicole Sullivan)
  22. Let’s Define Exactly What Atomic CSS is (by John Polacek, CSS Tricks)
  23. BEM For Beginners: Why You Need BEM (by Inna Belaya, Smashing Magazine)
  24. Javascript for Cats: An Introduction for New Programmers
  25. Roadmap.sh: Frontend Developer
  26. Functional Programming vs OOPS : Explain Like I’m Five
  27. Why, How, and When to Use Semantic HTML and ARIA (by Adam Silver, CSS Tricks)
  28. HTML Semantics (an eBook by Smashing Magazine)
  29. The Fundamentals – HTML + CSS (on Syntax.fm)
  30. Cascade and inheritance (westciv.com)
  31. CSS Tricks (by Chris Coyier)
  32. Getting Started With CSS Layout (by Rachel Andrew, Smashing Magazine)
  33. Introduction to HTML (MDN web docs)
  34. CSS first steps (MDN web docs)
  35. JavaScript First Steps (MDN web docs)
  36. 24 Ways (by Drew McLellan)
Smashing Editorial (mb, yk, il)

Marketing in Times of Uncertainty – Whiteboard Friday

Posted by randfish

Our work as marketers has transformed drastically in the space of a month. Today, we’re grateful to welcome our good friend Rand to talk about a topic that’s been on the forefront of our minds lately: how to do our jobs empathetically and effectively through one of the most difficult trials in modern memory.

We hope you’ve got a cozy seat in your home office, a hot mug of coffee from your own kitchen Keurig, and your cat in your lap as you join us for this week’s episode of Whiteboard Friday.

Video Transcription

Howdy, folks. I’m Rand Fishkin, founder of Moz and co-founder of Sparktoro. And I’m here today with a very special edition of Whiteboard Friday. 

I think that now is the right time to talk about marketing in uncertain epochs like the one we’re living through. We obviously have a global crisis. It’s very serious. But most of you watch Whiteboard Friday. Know that here at Moz, right, they’re trying to help. They want to help people through this crisis. And that means doing marketing. And I don’t think that now is the right time for us to stop our marketing activities. In fact, I think it’s time to probably crunch down and do some hard work. 

So let’s talk about what’s going on. And then I’ll give some tactics that I hope will be helpful to you and your teams, your clients, your bosses, everyone at your organizations as we’re going through this together. 

The business world is experiencing widespread repercussions

First off, we are in this cycle of trying to prevent massive amounts of death, which is absolutely the right thing to do. But because of that, I think a lot of us in the business world, in the marketing world, are experiencing pain, particularly in certain industries. In some industries obviously demand is spiking, it’s skyrocketing for, you know, coronavirus-related reasons. And in other cases, demand is down. That’s because we sort of have this inability to go out.

We can’t go to bars and restaurants and movies and bowling alleys and go do all the things we would normally do. So we don’t need fancy clothes to go do it and we don’t need haircuts — this is probably the last Whiteboard Friday I would want to record before needing a cut. And all of that spending, right, that consumer spending affects business-to-business spending as well

Lower spending → cost-cutting → lower investment/layoffs → environment of fear…

It leads to cost cutting by businesses because they know there’s not as much demand. It leads to lower investment and oftentimes layoffs as we saw in the United States, where nearly 10 million workers are are out of work, according to the latest stats from the federal government. And that builds this environment of fear, right. None of us have faced anything like this. This is much bigger and worse, at least this spike of it is, than the Great Recession of 2008. And, of course, all of these things contribute to lower spending across the board. 

However, what’s interesting about this moment in time is that it is a compressed moment. Right. It’s not a long-term fear of of what will happen. I think there’s fears about whether the recession will take a long time to recover from. But we know that eventually, sometime between 3 and 18 months from now, spending will resume and there will be this new normal. I think of now as a time when marketing needs to change its tone and attitude.

Businesses need to change their tone and attitude and in three ways. And that’s what I want to talk through. 

Three crucial points

1. Cut with a scalpel, not with a chainsaw

First off, as you are looking to save money and if you’re an agency, if you’re a consultant, your clients are almost certainly saying, “Hey, where can we pull back and still get returns on investment?” And I think one of the important points is not to cut with a chainsaw. Right. Not to take a big whack to, “Oh, let’s just look at all of our Google and Facebook ad spending and cut it out entirely.” Or “Let’s look at all of our content marketing investments and drop them completely.” That’s not probably not the right way to go. 

Instead, we should be looking to cut with a scalpel, and that means examining each channel and the individual contributors inside channels as individuals and looking at whether they are ROI-positive. I would urge against looking at a say, one-week, two-week, three-week trend. The last three weeks spending is very frozen and I believe that it will open up more again. I think most economists agree. You can see that’s why the the public stock markets have not crashed nearly as hard. We’ve had some bouncing around.

And I think that’s because people know that we will get to this point where people are ordering online. They are using businesses online. They are getting deliveries. They are doing activities through the Internet over the course of however long we’re quarantined or there is fear about going out and then it will return to a new normal. 

And so because of that, you should probably be looking something like six to twelve weeks in the past and trying to sort out, OK, where are the trends, where are their lifelines and opportunities and points of light? And let’s look at those ROI-positive channels and not cut them too soon. 

Likewise, you can look inside a channel. If you haven’t seen it already, I highly recommend Seer Interactive’s guide to cutting with a scalpel, not a sledgehammer, and they look at how you can analyze your Google Ads accounts to find keywords that are probably still sending you valuable traffic that you should not pull back on. I would also caution — I’ve talked to a bunch of folks recently who’s seen Facebook and Instagram and Twitter and YouTube and Google ad inventory at historically low prices. So if you have ROI-positive channels right now or your clients do, now is an awesome time to be to potentially be putting some dollars into that. 

2. Invest now for the second & third waves in the future

Second thing, I would invest now for the second and third waves. I think that’s a really smart way to go. You can look at Harvard Business Review and Bloomberg and a bunch of folks have written about investing during times of recession, times of fear, and seeing how. Basically when we when we go through wave one, which I think will be still another two to six weeks, of sort of nothing but virus-related news, nothing but COVID-19, and get to a point where we’re transitioning to this life online. It’s becoming our new every day. And then getting to a post-crisis new normal, you know, after we have robust testing and quarantining has hopefully worked out well. The hospital systems aren’t overwhelmed and maybe a vaccine as is near development or done.

When those things start to come, we will want to have now messaging and content and keyword demands serving. Right. And ads and webinars. Anything that is in our marketing inventory that can be helpful to people, not just during this time, but over the course of these, because if we make these investments now, we will be better set up than our competitors who are pulling back to execute on this. And that is what that research shows, right, that essentially folks who invest in marketing, in sales during a recession tend to outperform and more quickly outperform their competition as markets resume. You don’t even have to wait for them to get good — just as they start to pick up. 

3. Read the room

The third and possibly most important thing right now is, I think, to read the room. People are paying attention online like never before. And if you’re doing web marketing, they’re paying attention to your work. To our work. That means we need to be more empathetic than we have been historically, right? They are. Our audiences are not thinking about the same things they were weeks ago. They’re in a very new mindset. It doesn’t matter if they’re business-to-business or business-to-consumer. You are dealing with everyone on the planet basically obsessed with the conditions that we’re all in right now. That means assuming that everyone is thinking about this.



I really think the best type of content you create, the best type of marketing you can create right now across any channel, any platform is stuff that helps first. Helps other people. It could be in big ways. It could be in small ways. 

The Getty Museum, I don’t know if you saw Avinash Kaushik’s great post about the Getty Museum. They did this fun thing where they took pictures from their museum, famous paintings and they put them online and said, “Hey, go around your home and try and recreate these and we’ll post them.” Is it helping health care workers get masks? No. But is it helping people at home with their kids, with their families, with their loved ones have a little fun, take their mind off the crisis, engage with art in a way that maybe they can’t because they can’t go to museums right now? Yeah, that’s awesome. That’s fine. It’s okay to help in little ways, too, but help first. 

I also think it’s okay to talk about content or subjects that are not necessarily related to the virus. Look, web marketing right now is not directly related to the coronavirus. It’s not even directly related to some of the follow-on effects of that. But I’m hoping that it’s helpful. And I’m hoping that we can talk about it in empathetic and thoughtful ways. We’d just have to have to read the room. 

It is okay to recognize that this crisis is affecting your customers and to talk about things that aren’t directly related but are still useful to them. 

And if you can, I would try not to ignore this, right? Not not to create things that are completely unrelated, that feel like, “Gosh, this could have been launched at any time in the last six months, sort of feels tone deaf.” I think everything that we do is viewed through the lens of what’s happening right now. And certainly I have that experience as I go through online content. 

Do not dismiss the scenario. I think that that history will reflect very poorly. History is moving so fast right now that it is already reflecting poorly on people who are doing this. 

Don’t exploit the crisis in a shameless way. I’ve seen a few marketing companies and agencies. I won’t point them out because I don’t think shaming is the right thing to do right now, but show how you’re helping. Don’t exploit by saying “It’s coronavirus times. We have a sale.” All right? Say, “Oh, we are offering a discount on our products because we know that money is tight right now and we are helping this crisis by donating 10 percent of whatever.” Or, “We are helping by offering you something that you can do at home with your family or something that will help you with remote work or something that will help you through whatever you’re going through,” whatever your customers are going through. 

Don’t keep your tone and tactics the same right now. Oh, yes, I think that’s kind of madness as well. I would urge you, as you’re creating all this potentially good stuff, new stuff, stuff that plans for the future and that speaks to right now, go ahead and audit your marketing. Look at the e-mail newsletters you’re sending out. Look at the sequential emails that are in your site onboarding cycles. Look at the overlay messaging, look at your home page, look at your About page

Make sure that you’re either not ignoring the crisis or speaking effectively to it. Right. I don’t think every page on a website needs to change right now. I don’t think every marketing message has to change. But I think that in many cases it’s the right thing to do to conduct an audit and to make sure that you are not being insensitive or perceived as insincere. 

All right, everyone, I hope that you are staying safe, that you’re staying at home, that you’re washing your hands. And I promise you, together, we’re going to get through this.

Thanks. Take care.

Video transcription by Speechpad.com

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!

Marketing During COVID-19: 4 Essential Copywriting Guidelines

The COVID-19 outbreak has affected all aspects of our lives, including marketing. Even if your business is not health-related, you are most likely incorporating the pandemic into your content and messaging. Yet you are also most likely trying to figure out exactly how to stay relevant while also appropriate during such an unprecedented time. This guide was written to help you with that. It includes:

  • Guidelines for staying sensitive
  • Resources for ensuring accuracy
  • Suggestions for modifying your offers
  • Tips for keeping track of it all
marketing copywriting during COVID-19

COVID-19 has not only shifted business trends, but also consumer priorities and the entire marketing landscape. The goal of this guide is to help you adapt your messaging accordingly so you can continue purposeful, quality communication with your audience and stand strong with your customers. Let’s start with the most important one:

Being sensitive

COVID-19 has impacted individuals on a personal level world-wide, so the risk of inadvertently coming off as insensitive or even exploitative is higher than ever right now. And with social media communication at a peak, one small mistake could mean far-reaching and long-term consequences for you. Follow these guidelines to make sure you’re communicating appropriately during the COVID-19 outbreak.

Better too serious than sorry

While it’s normally common and effective for brands to keep a conversational tone, it’s best to steer clear of using humor or wit to accomplish that right now. Even being overly casual can be off-putting. Your content may not be as colorful or aligned with your brand personality, but it’s far better to be more serious than you want to be than to be more sorry than you can express. 

We recommend keeping a positive, inspirational, and helpful tone. Avoid being humorous, witty, or casual.

marketing copywriting during COVID 19 dennys

Denny’s provides a good example of deviating from their normally playful
 and pun-filled tone (see left) to a more serious one (right).

There’s a right way to make light of the situation

Being more serious doesn’t mean somber. You can still stress the bright side; just know the difference between positivity and humor, and between being uplifting vs dismissive of the situation.

marketing copywriting during COVID 19 stitcher

An appropriately uplifting email relevant to COVID-19.

Check for insensitive words

You know not to use overt puns, but keep in mind that there are several words and phrases that prior to COVID-19 were completely harmless. For example:

  • Killer (as in a “killer deal”)
  • Contagious (“how to create contagious content”)
  • Health or checkup-related terms (“give your budget a pulse check”)
  • Spread
  • Contagious
  • Infectious
  • Viral
  • Gather
  • Event

Take a neutral or supportive stance

If your business is still operating and relevant, be careful with your positioning. For example, among the Federal government’s COVID-19 measures is a steep interest rate cut. For mortgage brokers, “Take advantage of the low interest rate now!” conveys an inappropriately exciting message. On the other hand, “Let us help you navigate the unstable economy” offers security and respects the gravity of the situation.

Similarly, marketing and advertising agencies reaching out to these businesses should take a position not of helping businesses to “capitalize” on the current times, but rather of helping them to make themselves as visible/accessible as possible right now to those who need them.

  • Use: “contribute,” “connect,” “play a role,” “navigate,” “cope,” “respond”
  • Do not use: “capitalize,” “advantage,” “offer,” “gain,” “profit”
  • Be careful with: “opportunity,” “make the most”

Think contribution, not conversion

If you’re one of the less or non-essential businesses with respect to COVID-19, there are still ways to stay relevant. However, your motive here should not be to get more business but to continue offering value to your audience. People are just trying to say afloat right now, so think contribution, not conversion.

I recently received an email from CodeAcademy that embodies the contribution approach. Here is a snippet from their email:

marketing copywriting covid 19 example codeacademy

This is not the time to convert customers but to contribute to the COVID-19 response.

Ensuring accuracy

Now more than ever, taking the extra steps to stay accurate will help you to maintain the trust you’ve worked so hard to build with your audience. It will also help you to keep up with changing search trends and even filter out any unreliable COVID-19 resources of your own. Here are some guidelines and resources to help you stay accurate.

Use credible COVID-19 sources

Effective copywriting provides information while simultaneously delivering a greater message. Your intended message may be “I am here to help you,” but if your information is inaccurate, this is not the message that will come through. At best it will say “I’m careless,” and at worst, “I can’t be trusted.”

Inaccurate information about the coronavirus is everywhere, so make sure you get your facts straight when copywriting—especially for social media captions or ads that can get shared. The best places for reliable information are: 

In an effort to minimize the spread of inaccurate information, Canva came up with a range of free print and social media templates using information from the World Health Organization. You can access their Coronavirus Awareness Collection hereTheir messaging around providing these templates is also on par with the suggestions in this guide:

marketing copywriting COVID19-conscious copywriting canva message

Canva demonstrates sensitive messaging, contribution-focused positioning, and accuracy of information.

Employ proper grammar

Checking for grammar is a no-brainer when it comes to copywriting, but it’s especially important when it comes to COVID-19. Improper grammar can undermine the validity of your facts, and even alter your message. For example, “the governor put a shelter in place for the city” actually means a shelter was put into place and even implies a gathering. Small details matter. To clarify, for this example:

  • Shelter in place is a verb (action): “We advise you to shelter in place.”
  • Shelter-in-place is an adjective (description): “We’ve instated a shelter-in-place policy.”

And for your coronavirus-related copywriting in general, there are two great tools that we can suggest:

  • Topical Guide on COVID-19: This simple yet super-helpful guide was created by the Associated Press to help with coverage of the coronavirus.
  • Grammarly: This is a contextual editor that catches important fixes that slip past regular spell check. It’s a free plugin you can download and use across all applications.

Checking up on details like this takes some extra time, and maybe your audience will know what you meant, but better to be safe than sorry. Plus, COVID-19 isn’t a trending topic; its effects are going to be long-lasting, so your content is likely to stay relevant for a while. Make sure it’s as up to standard as the rest of your copywriting.

Stay optimistic, but don’t overpromise

It’s important to inspire hope and forward-thinking through your copywriting, but remember that this is an unprecedented situation; even expert predictions have questionable accuracy. All that you can promise your audience is that you’ll stay committed to handling the situation and serving them the best way you can. Ensuring anything else, even if to keep up morale, could backfire on you.

Modifying your offers

Google has banned advertising on travel-related services, but there are still a lot of businesses that can, and should, advertise relevant services during COVID-19. Just make sure to modify your copywriting so that calls to action are appropriate. Also, keep in mind that things are evolving fast, so keep your messaging as versatile as possible so you don’t have to be constantly updating your copy. Here are some guidelines and suggestions for CTAs with respect to COVID-19.

Ease up on urgency

“Call now” or “Book now” buttons are fine; but excitement- or scarcity-driven copywriting, like “Don’t miss out!” or “Grab your spot before it’s too late!” is not going to resonate with consumers or businesses right now. Nothing is as urgent as COVID-19, and this type of tone is more likely to cause you to come off as unaware or ignorant.

marketing copywriting covid fantastic sams

A nice example of adjusting messaging away “book now” urgency

Adjust for relevance

Check your offerings and make sure your copy is aligned with COVID-19 safety measures and lifestyle changes For example:

  • Change irrelevant value propositions like “more dog walks” or “more diners in your doors” to something more neutral, like “more leads,” or more timely, like “more online orders.”
  • Reword inapplicable CTAs, like “join now” for facilities that are closed. “Learn more” could work here.
  • Use words to reinforce the safety of your audience, such as “contact-free,” “virtual,” “remote,” “in-home,” “downloadable,” “delivery,” “online.”
marketing copywriting during COVID 19 sweetgreen

Sweetgreen has modified #sghacks to #sghacks from home

 

marketing copywriting during COVID 19 coolidge yoga

Coolidge Yoga has made appropriate COVID-19 adjustments with a virtual offering. 

Check your scheduled content

Don’t forget to check your automated emails or scheduled posts for relevance and appropriateness. This may include:

  • April Fools humor
  • Easter gathering-related content
  • Birthday or anniversary offers
  • Automated nurture campaigns

Staying on track

If you’re feeling overwhelmed with all of the changes you need to make to your copy, just remember that you’re not alone. Everyone is having to make adjustments right now and settling into new rhythms. Here are some tips to help you through.

  • Prioritize. You won’t (and shouldn’t) make the above changes to all of your copy. Start with top-trafficked content and new content moving forward.
  • Track your changes: Create a spreadsheet of the changes you make so you can keep track of what to change back when things start to settle out.
  • Don’t delete anything: Save your good ideas and well-performing campaigns for reinstatement in the future when they will be more effective. Things will return to normal someday. A new normal, but a normal nonetheless.

Maintain your copywriting standards while marketing during COVID-19

COVID-19 may be a new era, and your messaging and offers may change, but your copywriting standards should be the same. At the end of the day, you are still supplying information, adding value, and conveying to your audience that you are in tune with their needs.

Smashing Podcast Episode 12 With Paul Boag: What Is Conversion Optimisation?

Smashing Podcast Episode 12 With Paul Boag: What Is Conversion Optimisation?

Smashing Podcast Episode 12 With Paul Boag: What Is Conversion Optimisation?

Drew McLellan

Paul BoagIn this episode of the Smashing Podcast, we’re talking about the user experience around converting site visitors into customers. Can our selling techniques leave customers feeling cheated? And how can that be avoided? I spoke to conversion optimisation specialist Paul Boag to find out.

Show Notes

Weekly Update

Transcript

Drew McLellan: He’s a user experience consultant, digital transformation expert, and conversion rate optimization specialist hailing from the southwest of the UK. He is the author of many books, including User Experience Revolution from Smashing Magazine, and the forthcoming title Click! How to Encourage Clicks Without Shady Tricks. He’s also a veteran web design podcaster with a show running more or less weekly for 15 years. So we know he’s an expert at user experience design, but did you know he’s also the world authority on papier-mache? My Smashing friends, please welcome Paul Boag. Hi, Paul. How are you?

Paul Boag: Oh, I’m smashing, apparently.

Drew: So we’re in the middle of a global pandemic.

Paul: Yeah, and you’ve just made me say I’m feeling smashing in the middle of a pandemic. That’s great. Thanks.

Drew: What I want to know is, what’s on your shopping list?

Paul: Oh, dear. Do you know, this pandemic has changed very little in my life. Social distancing, I’ve been doing that for 18 years. I’ve worked from home for 18 years. We homeschooled our son. My wife works from home. Nothing has changed in my life. In fact, if anything, I’m now more sociable because everybody’s creating these WhatsApp groups and things, where, “Oh, let’s all pull together as a community.” So I’m having to talk to people now. It’s just dreadful, dreadful time.

Drew: Oh, wow. I’ll tell you what’s on my shopping list.

Paul: Oh, yeah.

Drew: It’s a new book of yours.

Paul: Oh. That was smooth, Drew. I’m super impressed by that.

Drew: It’s a heck of a title, How to Encourage Clicks Without Shady Tricks. Tell me about that.

Paul: Well, that wasn’t the original title that I wanted. Do you know this story?

Drew: No, I don’t know this story.

Paul: Oh, okay. I got vetoed by Vitaly.

Drew: Oh, dear.

Paul: Because I wanted to call it Encouraging Clicks Without Being a… But apparently, that’s not professional enough. So the basis of the book is that we all need to improve our conversion rate. Websites aren’t there, although we talk about being user-centric and user-focused, and all those things are entirely correct, but at the end of the day, websites have to create and return on investment for whoever owns them. And that’s entirely understandable and as it should be. But increasingly, people are under enormous pressure to improve their conversion rates. Marketers have got targets they’ve got to meet, designers are under pressure. And part of the problem is, in the early days when your website is rubbish, it was easy to increase your conversion rate.

Paul: And so as a result, then that set expectations, because the conversion rate went up quite a lot every year. And so management ended up expecting that to happen over the long term, and of course, it becomes harder and harder. So the result is that people are inevitably turning to dark patterns. Not because necessarily they want to, but because they’re under pressure to. They’re under pressure to bring about results.

Paul: So the premise of this book is, first of all, to explain why dark patterns are a bad idea. And not from an ethical point of view. I don’t feel I’m the kind of person that can preach on ethics. But I talk about it from a purely business point of view, that these are the business reasons why dark patterns are ultimately damaging. And then that inevitably leads to the question of, well, if dark patterns aren’t the answer, then what is? And that’s what the majority of the book is exploring, that, what you can do to improve your conversion rate without resorting to these kinds of more manipulative techniques. So I actually got really excited about this book. It’s been one of the most enjoyable ones to write, and I actually think it’s probably the most practical and tangible book for the biggest majority of people out of the ones I’ve written.

Drew: So in a previous episode of this podcast, I talked to Michael and Trina about their book on ethical design.

Paul: Yes.

Drew: Also from Smashing magazine.

Paul: Yeah.

Drew: I guess that makes your book a good complement to that one, if they’re looking at the ethics of it, and maybe your approach is slightly more from the practical and business side.

Paul: Absolutely, yeah.

Drew: And not just the ethics.

Paul: Yeah. And I was quite chuffed when I found out that my book would be following on from theirs. I felt that that was a really good relationship between the two. Because don’t get me wrong, I think the ethics of how we design online and the decisions that we make and those kinds of things is massively important. And I think we’re in a very dangerous time in terms of that kind of thing, with many of the decisions that are being made, especially by larger organizations. But that’s not an area that I am an expert in, or that I feel I can comment on. But what I am seeing are significant long-term consequences of adopting these more manipulative techniques. Because I think there’s a perception that users are unaware that they’re being manipulated. Because these techniques work, people go, “Oh, okay, therefore people aren’t aware that we’re manipulating them. So everything’s fine.”

Paul: The truth is very different from that. Those things, these forms of manipulation, are happening on a subconscious level, yes. And they work because they’re subconscious, but people are still consciously aware of it. I’ve done a lot of usability testing on things like hotel booking sites, which are well known for this kind of thing. And the truth is, people will go, “Oh, I hate all this manipulative crap.” But then they’re still influenced by it. So it’s the impact of the fact that people are aware of it, and then also it’s got a lot of hidden costs associated with it. You tend to see high returns, you tend to see more contacting of support and those kinds of things. And a lot of organizations are not joined up enough to realize that that kind of thing is happening because of these dark patterns.

Drew: I guess it’s a bit like going to a theme park and buying lunch there. You know that you’re being way overcharged, but you want your lunch at the theme park, and so it leaves, not literally, a bad taste in your mouth, hopefully. But there’s a bit of that regret there, that you know that you’re being shafted but you go along with it all the same. But you might not be keen to return next time you’re budgeting your holiday.

Paul: Absolutely. But then there’s also the element of buyer’s remorse, that a lot of time if you bounce someone … You can bounce people into doing pretty much anything you want. And that’s fine, take out ethics for a minute. But you could argue, but that’s fine from a business point of view. But what you end up with is an audience of customers who are suffering from buyer’s remorse. Buyer’s remorse is extremely dangerous because that’s what leads people to complain online, that’s what leads people to return items and all of those kinds of things. So it’s incredibly important that people are happy with their decision, they’re happy with their purchase. And that’s really what the book is about, is how do you get people to a point as fast as possible where they’re happy with their decision without them then afterwards regretting that decision?

Drew: So say that you’ve been using some of these perhaps slightly underhanded techniques on your site, and you’ve seen that it’s converting well, you’re turning visitors into customers quite effectively. But you want to, perhaps you’re seeing more returns or you’re seeing some bad reviews, or you’re seeing some of the consequences of this buyer’s remorse that we were talking about, and you want to try and improve things, get rid of the underhanded techniques, and bring in a more ethical or more customer-friendly ways of converting people. How are you going to know if you’re actually having an effect? You presumably have to come up with some way of measuring your conversion before you can start making changes?

Paul: Yeah, absolutely. And I think, again, this is something that many organizations are quite poor at, is being clear about how they’re going to measure success. Now, yes, your conversion rate is one metric you should absolutely be following. But even with conversion, you need to be a little bit more sophisticated than how many people are buying. You also need to pay attention to average order value, you need to pay particular attention to lifetime value. So how much are customers worth over their entire life? Because you may well find that you’re getting quite high churn of customers if you’re using dark patterns and things like that.

Paul: But really, conversion should be just one of the metrics that you’re measuring. There’s also things like, you need to be paying attention to engagement, how engaged are people with your content. Because that makes a big difference in whether they eventually go on to convert. So you’re looking at things like, how much of your videos do they watch? How long do they spend on your site and what are they looking at while they’re doing it? Are they engaging on social media and those kinds of things? And then the final aspect is obviously usability. You need to be measuring how quickly someone can complete a particular task on their website, and how easy they find the system to use, and various different other criteria.

Paul: And there are loads of mechanisms that you can use for measuring those different things. There are some great tools out there. And also some good metrics that you can adopt. So, for example, with usability, there’s something called the system usability scale, which could be a very useful metric to measure. But equally, there are tools like maze.design, is one that I often use, which will measure how long it’s taking someone to make a purchase, for example, get through the checkout. So yeah, having that broad range of metrics, you’re not just focusing on how many sales did we make this quarter. You’ve got to look at the bigger picture.

Drew: Are there any dangers that you could end up measuring the wrong thing?

Paul: Yes. Yes, absolutely. And so as a result, I think any metric that you’re looking at, that’s why you really need a range of metrics. If you just focus in on one particular metric, so for example, a lot of marketing professionals are judged on the number of leads that they’ve generated in a particular quarter or whatever. If you just have one metric like that, then it’s going to, A, skew the reality of what’s going on, but B, it’s going to end up encouraging some less than perfect behavior. So let me give you an example. I worked with a company that produces project management software. And they had a marketing department and they had a sales department. And the marketing department was tasked with generating leads. That was their job. They had to generate as many leads as possible.

Paul: The sales department were judged and assessed on how many leads they converted. Now, the website was owned by the marketing department. So the marketing department came to the conclusion that it was a really good idea to, the product demo that they had on the website, they were going to make people register before they could see the product demo. Because that would generate a large number of emails and a large number of leads to help them meet their target. Sure enough, it did. It generated a huge number of leads, a lot of people just gave up and went away, but many people did actually sign up to see the demo.

Paul: Now, the problem that that created is, the majority of those leads weren’t good quality leads. They were people that were nowhere near the point of being ready to talk to a salesperson, and so when the salesperson contacted them, they weren’t interested. They didn’t want to talk to them. But the salesperson had already wasted the time and the effort in calling them. And then they also had to filter through all the people that entered “Donald Duck@Disney” as their email address. So actually they created a huge amount of internal work for the sales team, and the sales team conversion rate plummeted through the floor. Because they had all these poor quality leads. So that’s a great example of how things can go wrong if your metrics are too narrow and too skewed in a particular direction.

Drew: And I guess a lot of it comes down to understanding who the user is. In order to turn somebody into a customer, you need to understand who they are. I guess so much about user experience design is effectively putting yourself in the place of your user and empathizing with what they’re trying to do. So how do we go about understanding who our user is?

Paul: Well, again, there are lots of different ways of doing that, depending on your time and your budget and things like that. I’m a great believer in actually meeting with users. I think there is a bit of a tendency at the moment towards, we’ve got all these wonderful analytics and survey tools and that kind of thing. And sure enough, those are great. I’m not in any way knocking them. But if you’re trying to convince somebody to take action, as you say, you need to empathize with them. And knowing that somebody has 2.3 children, works in the city, and I don’t know, spends their weekends kayaking, doesn’t really help you to know and empathize with them as people.

Paul: So personally, I’m a much bigger fan of actually speaking to people and doing user interviews. Even if they’re over the phone or remotely, which they have to be at the moment. They’re very much worthwhile in terms of getting to know people. Now, that said, I think another thing that I love to do, and just kind of blows you away, you can’t do this at the moment, but hopefully you will be able to soon, which is, you go and visit people in their homes. Now, the reason that I find this so valuable is because you find out about the reality of their experience in a way that you would never get from just talking to them over the phone or from a survey.

Paul: Now, I’m not saying you need to do this a lot. Probably doing it once is enough. But essentially … Let me give you an example. I was once testing an e-commerce site, and so I decided to visit some people in their home and actually test the site with them in their own home. So I went to visit this one lady, and she opened the door, and immediately all these cats came out and crawled around my legs and disappeared off. And she was a stereotypical cat lady. I’m sorry to be rude, but she really was. Every surface in the house was covered with knickknacks and ornaments relating to cats in some way. There were pictures of cats on the wall. She had a total of nine cats, which is just insane.

Paul: So we talked for a while, and we sat down to use this, to test with this website. And we used her computer, which I tell you took 10 minutes to boot up because it was this old tower computer, it was an absolute nightmare. And that whole desk was covered with clutter and knickknacks and things. And she had post-it notes all around her screen. Now, the minute she sat down in front of that computer, a cat jumped on her lap. So she spent the rest of that usability session trying to juggle a cat that was on her lap. The cat got so fed up at one point that it wasn’t getting enough attention that it decided to crawl across the keyboard and sit on the keyboard. Which I know you understand because you’ve got a cat and I’ve seen pictures of your cat doing the same thing.

Drew: I feel seen.

Paul: Yeah, exactly. And then, on top of which, I asked her at one point, “Add a product to the basket,” which she was able to do. And then I said, “Now, go to the basket,” and I realized there’s no way she’s going to find the basket. Because she had a post-it note stuck on the screen over the top of the basket. Now, that is the real-world experience. We sit down and look at our websites and we think they’re so easy to use and so simple. But if you’re juggling with a cat and if you’re living in chaos, or you’ve got distractions and that kind of stuff, then you don’t have that clean, clear mental point of view to approach the website. You are under what is called cognitive load.

Drew: So I guess one solution to that might be for every design studio to be equipped with cats.

Paul: Yeah, absolutely. And not only that, but equipped with (bad) computers. Because we all sit, don’t we? I’m doing it right now, I’m sitting in front of a lovely iMac with this gorgeous screen. And that’s not what most people … I remember another occasion I was designing a website for an elderly audience. Well, I say I was designing it, I was doing the UX side of things. And I was getting quite frustrated with the designer, because the designer was a young guy, and he did these beautiful interfaces that was all subtle and lovely and gorgeous. And I was saying, “I’m sorry, but this old audience are not going to be able to see what you’re doing, and they’re not going to be able to click on all these little links and stuff. And you’ve got to make it more brash and horrible,” which obviously he didn’t want to do.

Paul: So I came into the office one day with a pair of reading glasses and a pair of ski gloves. And I made him put on the reading glasses and put on the ski gloves. Now, he didn’t need reading glasses, just to be clear on that. And I said, “Now use the site.” And, of course, he couldn’t. He couldn’t see properly, he had lost motor control in his hands because he had these big, thick ski gloves on. So that helped him to empathize and understand what his audience was going through. And so things like that, I think, are really important to do. Obviously, that’s a bit of an extreme example, it was me making a point and rubbing my designer’s nose in it. But you get the idea.

Drew: You mentioned the cognitive load of buying. Making personal decisions online can be fairly overwhelming at times. Are there things that we should be doing that are going to help the customer have a better experience and be more likely to convert, more likely to actually make a purchasing decision?

Paul: Yeah. It’s really funny, cognitive load is a fascinating thing in terms of how it affects us. So what cognitive load is basically, is having to think too much. We have two systems in our brains. We have system one and system two. And system one is that unconscious decision making that we make all the time, and system two is our conscious mind. Now, our conscious mind is incredibly powerful, but it easily gets overwhelmed. It easily gets tired out. And that’s known as cognitive load. And when we are overwhelmed, when our cognitive load goes up, it has all kinds of really bad impacts on conversion rate. So suddenly your website feels hard to use, it feels untrustworthy and a little bit suspicious, and it feels just downright bad. So our conscious minds are very cynical as well, so we start not believing what’s being said on the site. And it really has an enormous impact.

Paul: So the way that you lower cognitive load is really about simplifying your website. So removing unnecessary distractions that are on the website. It’s about being consistent in your website. So buttons don’t move around, things don’t change. But not only consistent within your own website, consistent with people’s expectations from a website. So to give you an example of what I mean, let’s say I asked you to search on a website. Where would you look? You’d look in the top right-hand corner, wouldn’t you?

Drew: Right.

Paul: Everybody looks at the top right-hand corner, so the first thing, they look at the top right-hand corner, then they look for an input field. They enter their search query in the input field, and they press the button next to it. That’s what’s called procedural knowledge. We have learned that that is a procedure that, if we go to a website, look at the top right-hand corner, use the input field, click the button, we will search on that website. But the minute that you break that procedural knowledge, our cognitive load goes up. So at that point, we’re starting to go, “Well, hang on, where’s the button?” Or, “Why isn’t the search field the way it’s supposed to look?” Or, “Why isn’t it in the top right-hand corner?” So that consistency with expectations matters a lot.

Paul: And then our mood matters as well. Bizarrely, you know what it’s like, some days you wake up and you’re in a really good mood. And everything seems to be easier. And then other days you wake up in a bad mood, everything seems to be harder. So actually, the mood we’re in affects our level of cognitive load. So things like design delighters, nice little friendly copy, colorful graphics, all those things, they help as well to put us in a good mood that lowers our cognitive load. So it’s really mood, inconsistencies in the interface, confusing, too much information being displayed, and then finally priming people. So in other words, setting their expectations about what will happen and why it will happen.

Drew: I guess all these things weigh into how much trust somebody has in the website. And I think trust is quite a big factor, isn’t it, in inciting someone to actually buy from you?

Paul: Oh, enormous.

Drew: Because anyone can build a website online, we all know that. We’re web people. And there are thousands of places that you can buy the same product or service from, quite often. So there needs to be some way of building up trust. Are there other ways that we can build up trust in a site?

Paul: Yeah. You’re right, people buy from people they trust and from organizations they trust. So when it comes to trust, a lot of it is about humanity. Being a human being. You know how many times you go to a website and it just feels like it’s spouting marketing BS at you? Do you know what I mean? The great example I use in a book, where there’s some copy on a university website. I think it was the University of Essex website. And basically, that copy was written in the third person. So it’s talking about the reader as students, it was talking about themselves as the University of Essex. And it just felt, it lacked any kind of humanity and any sense that they cared about you or liked you. And simply turning that around and writing it in the first person, so talking about “we” and talking about “you,” makes an enormous difference in making that connection with people.

Paul: Other ways that you can do that, obviously, is through things like social proof. You can build trust by demonstrating that you’re a trustworthy brand. But again, you’ve got to accept that people are very cynical these days. So it’s not a matter of just slapping some logos on your website and going, “There’s your social proof.” Or slapping a text testimonial. Because people know that some companies just make that stuff up. So one of the things, actually a product of your own, actually, Perch, I don’t think you do this anymore, but for a long time on your website, you used to have testimonials that came straight from Twitter. They were pulled straight out of Twitter. And that was such a good idea, because those testimonials, people can click through and see that there’s a real human being behind it.

Paul: Another example is videos. If you’ve ever watched video testimonials on websites, where the person that’s speaking is beautifully lit, has got perfect teeth, and says a whole spiel about how great the company is without pausing, without going, “um,” without making mistakes, they’re obviously just reading off a script. That’s insincere. However, if you have a shitty video that’s filmed on a webcam, that the audio’s a bit crap, that’s actually more effective. Because it’s more real. A great example of this is: there’s a guy called Paul Jarvis who sells an online course called Chimp Essentials, which teaches you how to use MailChimp. And if you go to chimpessentials.com, he’s got all these videos, just like he’s obviously just chatting to someone over a webcam and them talking about how great the course was and how much it helped. And that is so powerful, because it’s authentic, it’s real, it’s human. And that’s what it’s about. It’s about coming across as a human being and making a connection with people.

Paul: So yeah, I’m a huge fan of that kind of sincerity and openness and honesty. Buffer is another example of that. Buffer, they lay out everything online. You can see how much their employees are paid, you can see how much they earned in the last month, you can see what their diversity range of staff and employees are. You can see everything about that company. And so you know they’re not hiding anything. You know that they’re being sincere and open. And that goes such a long way.

Drew: So we understand who our customer is. We want them to buy from us. Is there a single moment when a conversion happens on our site?

Paul: No. No, conversion is very much a journey. So it’s a series of micro-interactions. And I think that’s part of the problem that people have, is that they perceive, “Okay, they’ve clicked on the ‘buy now’ button, we’re done.” Or they’ve sent us a contact form, we’re done. And actually it’s a lot more nuanced than that. There are many, many steps in a journey that someone goes on. So let’s take, I don’t know, donating to charity, for example. So the first interaction might be, you see an update that a friend shares on social media about some crisis in the world. So your first point of conversion really is just clicking on that link in that social media update, which takes you to a blogpost. And then your second conversion is actually reading that blogpost and looking at it.

Paul: And your third, maybe, is to sign up for updates about that particular crisis. And then maybe you receive some emails about it. So your next conversion point is actually opening those emails and reading the content. And then it might be that they, in those emails, ask you to make a donation. So the next step is to make a single donation, one-time donation. And then they’ll follow up with you again, and that might turn into a monthly donation. And then that might lead you to actually start volunteering for them or fundraising for them. And, eventually, it might even lead to you leaving a legacy when you die.

Paul: So actually, any point of conversion is just a step in an ongoing journey. And we need to start thinking of conversion as a journey of relationship with a customer, rather than, “Okay, we’ve got them to sign on the dotted line, we’re done.” Because there’s so much more potential than just that.

Drew: So every interaction you have with that customer is a point where really you’re selling with them. It’s always be closing, right? ABC.

Paul: Yeah. Yes, you know, I hadn’t thought of that. Yes, it’s absolutely straight off of that, isn’t it? Yeah.

Drew: So you’ve carefully designed a site, you’ve done your best to ensure that you’re going to get some good conversions without any dirty tricks, without anything underhand. You launch the site. Is that it? Are you done?

Paul: No.

Drew: What should we be doing over time?

Paul: You’re asking questions that I know you know the answers to. That’s the sign of a great interviewer, when you’re happy to ask questions that other people might need the answer. No, of course it is. You’ve run Perch for years, you know that you can’t just start something and then walk away from it. When it comes to conversion, really that initial launching is the very, very beginning of the process. And actually, what is important in the journey is that ongoing optimization, that ongoing monitoring and improvement. It’s interesting, I’ve literally just written a report for a company outlining this approach. So basically it begins, you go through a cycle. And the cycle begins with, you try and identify problem areas in your site. So typically you would look at your analytics. And you’d look at pages that have got a high dropout rate for the number of visitors that they have to that particular page. So a high percentage of dropouts. So you know that something is going wrong on that page. So that’s your first step. Then you try and narrow down, well, what’s going wrong on that page?

Paul: Now, you can either do that through session recorders, which allows you to watch back users interacting with that particular page, and you might be able to spot where it’s going wrong. Perhaps you’re having problems with a form or perhaps they scroll straight past some critical button, or something else. Alternatively, if that doesn’t work, you might want to do some remote usability testing, and that’s so cheap and easy these days, using services like usertesting.com or User Brain. There are all these great services that make it really easy to test those kinds of pages. So that will enable you, probably, to work out what the problem is. Once you’ve done that, then the next step is, now we need to identify how we’re going to fix that problem. And in that particular case, you can have a couple of different approaches.

Paul: If the problem is relatively easy to fix, so if it’s just things like changing imagery or changing button colors or that kind of very simple thing, then probably you’ll want to go straight to A/B testing. So you use something like Google Optimize to send some of your users to an alternative version of the page with these small changes being made. You see whether that improves things. And if it does, you push it live. If it’s more substantial changes, then you’ll probably want to mock that up or prototype that before you go to all the expense and time of building it properly. And then you can test that either by doing some more usability testing, or if it’s just a static mockup, in other words, it’s not an interactive thing, then you might want to do something like a first-click test, where you say, “Okay, where would you click on this mockup in order to complete X task?” And see whether people are clicking in the right place.

Paul: Or another test that you can do is something called a five-second test, where you show them the mockup for five seconds, take it away, and you ask them what they recalled. And that’s a really good way for ascertaining whether or not they spotted that call to action they previously scrolled straight past. So you have to use a bit of imagination, but basically you then test your hypothesis, if you like, about how to fix it. Presuming you’re right, you then roll it out. Now, you’re not at the end of the process then. Because you now go back to the beginning again. You look at, “Well, what’s the next page that people are most exiting the site from?” And you repeat the process. And you just keep doing that, really, forever, slowly and incrementally improving your conversion rate over time.

Drew: This all sounds very logical, very attractive to somebody who, like me, who’s a business owner and I’ve got digital product, and I think, yes, I could be doing this. Some of the listeners will be freelancers working on an hourly rate for a customer who has these sorts of problems. And I can see it might be difficult to convince that customer that this is what they should be doing, this is something they should invest in. Because all the time spent in even just setting up some monitoring and setting up something to measure conversion is money that that client is going to have to pay out for the designer to do it. What would you say to those designers? Is there an effective way they can persuade their client that this is what they should be doing?

Paul: Yeah. This is a tricky one because it’s very hard to persuade anybody of anything, in my opinion. People become very entrenched in their ways of thinking. But it’s worth finding out what they care about. Because there will be certain metrics that they want to move. It might be they want more leads, it might be they want more quality leads, it might be that they want to reduce their cost of sale. Whatever it is. And then you start talking about these kinds of optimization techniques in that context. That said, you’re never going to get someone to commit to a major program of incremental design and usability testing and all those things in one go. What I would start with is just trying to encourage them to go through that cycle once. So it might be that you even have to install the analytics on your dime. But it’s not a big deal, is it, to add something like Google Analytics or something like Hotjar for session recorders.

Paul: So you basically then just take them through it once. You say, “Okay, well, let’s give it a go for one time. Let’s see if we can make a difference to the conversion rate by looking at the analytics, by mocking up one thing, and just improving that one thing.” If that works, you rinse and repeat. They don’t necessarily need to commit to an ongoing retainer where you’re continually optimizing it. This could be done as a series of sprints, effectively, going through the loop one thing at a time. In terms of more general stuff, like for example, just simplifying the interface, then in those kinds of cases, often it’s a matter of actually showing them what better might look like. Now, I’m afraid to even say this in front of you, Drew, because I remember many, many years ago … Or no, it wasn’t you, actually, I was about to say that it was you I remember going on about speculative design. But it wasn’t. Yeah, you’re off the hook.

Paul: It was you ranting about the fold. That was the thing that I’m remembering. Anyway, that’s beside the point. So one of the things you can do there is actually try … For the first time, I’m not saying do this regularly. But if you’ve got an existing client and you’re seeing glaring problems, mock up an alternative version of doing a particular page, and then do those five-second tests that I mentioned, or do a, what was the other one, a first-click test. And see whether those can make improvements, and show that evidence to the client. So you can use a tool like usabilityhub.com that will allow you to do those tests really easily. If you don’t want to do that because you don’t want to put the effort of mocking those things up, the other thing that you can do is just record a few videos of people using the website. And then edit down all of the bits of them moaning and complaining about how crap the site is to use into a two-minute horror reel, and send it to the client. That can do it as well.

Drew: So would these generally be, would these be the tips you’d give somebody who was just wanting to get some quick wins to start? They’ve done no optimization, and they just want to get started. Are these the same sort of things they’d do for a quick win?

Paul: Yeah, to some extent. Often I find, where I start, if I get a new client, the thing I normally start with is simplifying the user interface. Because inevitably sites end up bloated with a load of things that don’t really help. So the way that I tend to do it is, I’ll take a particular page, let’s say a home page, for example, and I will systematically look at every single element on that page. And I will ask myself three questions in order. Question number one I ask is, could I remove this element? If I removed this element, what would be the negative consequences of doing so? So you’d be amazed at how much you can just strip out of a website. And of course, every element that’s on the screen is every element a user is having to process and look at. Every element adds to their cognitive load. So anything that you can remove, great.

Paul: Then if you can’t remove an element because it’s critical to the completion of a key task or convincing users to take action or whatever else, then the next question you ask yourself is, can I hide this element? Could I move it deeper in the information architecture? Could I put it under a tab? Could I put it under an accordion? Whatever else, just to get it out of the site for the majority of people. So that often helps. And then if the answer is, well, this really is absolutely critical, so I’ll give you an example, maybe you’re forced to have some compliance copy on your website. That happens, I get that a lot with my bigger clients. “Oh, yes, legal department says we have to have this.”

Paul: So my third option, my final option, is can I visually shrink this? So can I de-emphasize it, put it in the footer or make it smaller or make it lighter text? Anything to draw attention away from that and focus it on stuff that really matters. So that’s almost always my first starting point with any kind of conversion, is just to simplify everything. The other thing that I do alongside that, which is a really useful starting point, is called objection handling. So I will make a list of as many reasons that someone might choose not to act as possible. And I then make sure that those are all addressed clearly on the website. Because often they’re not. So a classic example of that might be, somebody who comes to sign up for a newsletter. Now, you think, when you sign up to a newsletter all these things go through your head, are they going to sell me an email address? Are they going to spam me? Is the content going to be relevant? Can I unsubscribe in one click?

Paul: All of these objections. Are you addressing those? And not only are you addressing them, but are you addressing them at the point that you want people to convert? So for example, yes, you probably say something about whether you’re going to sell their email address or how much you’re going to email them and stuff. That’ll be in your privacy policy. But that’s going to be buried in a completely different part of the site where no one ever looks. And to be honest, it’s all illegible anyway because it’s written in legalese. So answering people’s questions at the point they have them is also another really good starting point for just giving your conversion rate that little boost.

Drew: That’s fantastic. And I think all these tips are things that you go into in quite a lot of depth in the book.

Paul: Mm-hmm (affirmative).

Drew: I found it to be a really great read, I’ve enjoyed browsing through it so far. I know it’s in the late stages of production and it’s coming out from Smashing magazine this spring, 2020.

Paul: Mm-hmm (affirmative).

Drew: That’s Click: How to Encourage Clicks Without Shady Tricks. And you can find out more about the book if you go to encouragingclicks.com. And then when it’s released you can go to smashingmagazine.com/books and you’ll be able to find it and buy it from there. Now, Paul, I guess if people are listening to this, I presume that they like podcasts. You’ve been podcasting for I guess almost 15 years now?

Paul: Yeah. Yeah, we were the first web design podcast in the world, that’s my claim to fame.

Drew: There we go. If a listener hasn’t come across the Boagworld podcast, what sort of thing could they expect from it?

Paul: Nonsense, generally. No, it’s a season-based show that covers all aspects of web design in a pretty broad sense. We don’t do a lot on development, to be honest. So it’s mainly design, project management, content creation, all of those kinds of things. A lot of UX stuff, because that’s my personal passion. It’s quite a laid-back conversational show. We have seasons, and different seasons are on different topics. So for example, there’s a whole season dedicated to conversion rate optimization, if people want to learn more about that as a subject area. So you can pick and choose which seasons you listen to. Yeah, I don’t think there’s a huge amount more to say about it. The current season has been one about almost like a virtual meet-up, where we’re having conversations with people listening to the shows. You can come along and join in. But next season will be something totally different. So it’s a bit of an eclectic mix, to be honest.

Drew: I’ve listened to it on and off for a good number of those 15 years, and it’s always an enjoyable listen. So I would recommend that people check it out if they haven’t done so already. So I’ve been learning from you about honest ways to convert users into customers. What have you been learning about lately, Paul?

Paul: I’ve been getting slowly more and more obsessed with psychology. Because obviously that relates quite a lot to both user experience design and conversion rate optimization, so I’ve been realizing how little I know about psychology. So it started off very simply, by following a guy called Joe Leech, who’s written a free e-book that you can download called Psychology for Designers. So that got me thinking more about psychology and understanding how to approach the subject. And then I’ve started to read proper psychology books now. I feel like I’m a bit more of a grownup in the field. So for example, earlier I was talking about system one and system two, that comes from a book called Thinking Fast, Thinking Slow, that I would highly recommend.

Paul: It’s a bit of a stodgy read at places. It’s not the easiest book to read. But it’s very, very much applicable to the kind of world that we’re looking at. So a lot about psychology. I’m also always nosing into things like marketing and sales as well, because I’m quite interested of how people apply sales techniques offline. So all that stuff I was talking about, like when I talked about objection handling, that comes from traditional sales, basically. So yeah, those are the two big areas at the minute.

Drew: If you, dear listener, would like to hear more from Paul, you can follow him on Twitter, where he’s @Boagworld, or find his podcast, blog, and details of how you can hire him to consult on your digital projects at boagworld.com. Thanks for joining us today, Paul. Do you have any parting words?

Paul: Keep safe, I guess, at the moment. That’s the sad thing that you’re having to say, isn’t it? And yeah, just start experimenting with conversion rate optimization. You’ll be amazed at the results you see.

Smashing Editorial (dm, ra, il)

The CARES Act Paycheck Protection Program: What You Need to Know

On Friday, March 27, the Coronavirus Aid, Relief, and Economic Security Act (CARES Act) became US law. The largest stimulus bill in American history, the CARES act put into motion a momentous effort to provide financial relief for millions of Americans who have been economically impacted by the coronavirus pandemic—in particular, the 3.3 million Americans who’ve filed for unemployment since March 14, and the small businesses who employ so many of them.

Though the CARES Act is packed with provisions for small businesses (including emergency government grants and existing loan payment coverage), the $350 billion Paycheck Protection Program (PPP) might be the most promising portion of the legislation. With its low interest rate and forgiveness potential, the Paycheck Protection Program aims to sustain small businesses through this pandemic without burdening them with significant debt to pay off when the crisis has passed—and, in the process, its goal is to keep people in their jobs and stem the tide of unemployment nationwide.

CARES act visualizaton

The Federal government is still ironing out the logistics—more details are being released daily if not hourly. But if you think you may need to make use of this resource, you won’t want to wait to start evaluating if a PPP loan is right for your business. There’s no indication that any business types or industries are prioritized in terms of accessing the loans first; it’s likely first come, first serve, so potential applicants will want to be ready to apply as soon as the loan application itself opens.

Let’s dive into what information we have right now so that you can be ready to get the ball rolling for your business if and when the time comes.

Please note: We are not legal experts. If you have specific questions about your business or loan application, please speak with your attorney and/or bank for clarification.

What is the Paycheck Protection Program?

The Paycheck Protection Program is a Small Business Association (SBA) loan program specifically designed to help small businesses continue to make payroll at their staff’s current pay rate, as well as cover key expenses that keep the lights on (think rent and utilities). Any loan funds used for these express purposes during the loan’s eight-week period will be eligible to be forgiven: in other words, if a small business uses the loan as it’s intended, they will likely not have to pay back a penny.

By driving cash into threatened small businesses, the Paycheck Protection Program directly addresses what 70% of small businesses cite as their primary business challenge: cash flow management (Forbes). About half of small businesses don’t have enough cash on-hand to survive more than 27 days without incoming revenue, and about 25% can only make it 13 days or less with no revenue (JP Morgan). With a PPP loan to cover about two months’ worth of most costly expenses (payroll and rent), small businesses will be able to stretch out their existing cash reserves much longer. Hopefully long enough for this crisis to end and for businesses to re-open.

In the meantime, with this loan, small businesses should be able to hold onto their existing team, preserve their retail or office space, and maintain their current utilities providers. This can provide small business owners and employees the opportunity to collaborate to find a way to pivot the business to find alternate revenue sources during COVID-19; and once the crisis ends, small business will still have their fully-trained team on-hand to ramp back up to their usual business model and capacity.

If laying off all your employees is like taking the wheels off a bike so it can no longer run, think of the PPP as enabling small businesses to put on training wheels. You can keep going, though perhaps not as quickly. If you hit a bump, you might not fall totally over. But the most important thing is that you keep moving.

How can the Paycheck Protection Program help your small business?

Now that we’ve covered the goals and potential impact of this program, let’s take a closer look at the details. I’ll answer common questions that small business owners likely have about the PPP, including how to determine if you’re eligible, how to apply, how the PPP compares to SBA’s EIDL loans, and more.

How do I know if I’m eligible?

You should be eligible to apply if:

  • You’re a small business, 501(c)(3) nonprofit, or a 501(c)(19) Veterans Organization based in the United States.
  • You have fewer than 500 employees.
  • You’re self-employed or a sole priorietor.
  • Your business has been adversely impacted by COVID-19, and the current uncertainty makes it difficult to run your business.
  • You need this loan to keep your business afloat.
  • Your business was fully operational on February 15, 2020, with employees on payroll.

How much can I borrow through PPP?

  • If you’re a small business: You can receive a loan for up to 2.5x your average monthly payroll costs for the previous 12 months (up to $10 million total).
  • If you’re a sole proprietor or are self-employed (e.g., you run your own one-person marketing agency): Although you don’t have payroll costs in the same way, the loan amount you’re eligible for is still calculated based on your payroll costs for the past 12 months; you full loan amount may be up to $100,000. See Page 4 of this US Chamber of Commerce document for more details on how your payroll amount is calculated. Note: This information is up to date as of 4/1/20. We will update this section as more details for sole proprietors and self-employed individuals are clarified. If you have questions, we recommend speaking to an attorney.

What is the loan period?

The loan period lasts for eight weeks from the date of origination (the date the borrower officially receives the loan). At the end of the eight weeks, the loan is technically “due,” but payments will be deferred for  six to 12 months. 

What can I use the loan money for?

The loan is designed to help keep businesses running and people employed, so potential borrowers should plan to use the funds for:

  • Paying staff: If you’ve had to lay people off, their pay will not be included in the calculation of the loan amount. But if you hire them back after submitting your application, we believe you can use your loan monies to pay them.
  • Rent, or interest on your mortgage principal. (You can’t use this for a principal payment.)
  • Utilities payments

According to the US Chamber of Commerce, you will be “eligible for loan forgiveness equal to the amount” you spent on these items during the eight-week loan period. Stick to these expenses, and you should be good. Note: If you lay off additional employees after applying for the loan, your amount of loan forgiveness will be impacted. See the Page 5 of this US Chamber of Commerce document for more details.

Is this different from the SBA’s Economic Disaster Injury Loan (EIDL)?

The PPP builds on the existing framework of the SBA’s 7(a) loan program for small businesses. The Paycheck Protection Program loans will co-exist with the SBA’s Economic Disaster Injury Loans, so you’ll want to evaluate both programs to select which option, if either, is better suited for your business.

Paycheck Protection Plan vs SBA's Economic Injury Disaster Loan

If you’ve already taken out an EIDL due to COVID-19 related challenges this last month, you may be able to refinance your existing loan as a PPP loan (Foley).

How can I apply?

The government is still working out the details, but you will need to go through an SBA-approved institution, ideally your business’ existing bank. If you’re interested in potentially applying for this loan, reach out to your bank right away to get the process moving. They will likely have more details to enable you to get started.

When can I apply for a Paycheck Protection Plan loan?

We don’t know yet when applications will open. Although further stimulus packages are likely on their way, you will want to start preparing to apply right away if you need this type of assistance. A process and timeline may be in place by the end of this week (Inc.).

When will I get my Paycheck Protection Plan loan amount, if my application is approved?

We don’t know yet. We’ll update this as we find more information.

Where can I get more information?

You can find the full text of the CARES Act here, and we’ve found this document from the US Chamber of Commerce to be clear and informative. Here are more resources:

What if I have more questions?

More details about this program are being released by the minute, so we may not have answered all your questions! We will be updating this article with updates as we see them, but please be sure to be on the lookout for relevant updates as well. If you have questions specific to your business or your loan application, do speak to your attorney and/or bank.

More resources for online advertising and COVID-19:

Announcing Smashing Online Workshops

Announcing Smashing Online Workshops

Announcing Smashing Online Workshops

Rachel Andrew

We had to postpone our SmashingConf in San Francisco until 10th–11th November 2020 and, like so many of you, our team will be staying firmly put at home for the next month or more. However, we know that many of you are still hoping to develop your skills, and we had workshops ready to go. We decided to find a way to bring the workshops to your home office, trying to keep as much of the live experience as possible. So, meet Smashing Online Workshops.

Topple the Smashing Cat and a laptop
Remote, live, interactive and practical. That’s Smashing Workshops.

We have two workshops to announce today, and if there is demand, we hope to be able to bring you more of the workshops you might be missing from our live events. By doing so, we hope we can help you continue to learn and interact with the speakers and each other, and also help out our workshop leaders who are losing income by being unable to run their workshops in person right now.

Upcoming workshops

Apr 2–17, Thu & Fri, 9–11:30 AM PDT
Smart Interface Design Patterns with Vitaly Friedman.

You’ll study 100s of hand-picked interface design examples in this one. We’ll be designing interfaces together, starting from accordions, to mega-drop-downs, sliders, feature comparisons, car configurators — all the way to timelines and onboarding. And: we’ll be reviewing and providing feedback to each other’s work. This workshop is spread over five days, 2h each day, with a huge amount to learn and take away.

Apr 14–15, Tue & Wed, 9–11:30 AM PDT
CSS Layout Masterclass with Rachel Andrew.

Over two days learn the key skills you need to learn CSS Layout and put it into practice in your work. A mix of theory and pragmatic advice in terms of how to deal with browser support.

Your Questions Answered

We know that a big reason why people come to Smashing Workshops is the chance to ask questions of the expert, and perhaps have a sticky issue they are facing at work discussed in person. It’s certainly one of the reasons I love leading workshops. Every time I teach CSS in-person, I learn more about the ways people are using CSS, and the challenges you face. So each workshop has dedicated time for chat and Q&A. We hope that you’ll bring your questions and ideas to the room, talk with us in the workshop, and learn from your peers, too.

Join Us

We hope you’ll join us as we bring our workshops online, there is some special early bird pricing for the initial registrations. We’d also love to know which other workshop topics and speakers you would like to see online. Read more about the workshops and sign up here.

Smashing Editorial (vf)

Creating Sortable Tables With React

Creating Sortable Tables With React

Creating Sortable Tables With React

Kristofer Giltvedt Selbekk

Table sorting has always been a pretty hard issue to get right. There’s a lot of interactions to keep track of, extensive DOM mutations to do and even intricate sorting algorithms, too. It’s just one of those challenges that are hard to get right. Right?

Instead of pulling in external libraries, let’s try to make stuff ourselves. In this article, we’re going to create a reusable way to sort your tabular data in React. We’ll go through each step in detail, and learn a bunch of useful techniques along the way.

We won’t go through basic React or JavaScript syntax, but you don’t have to be an expert in React to follow along.

Creating A Table With React

First, let’s create a sample table component. It’ll accept an array of products, and output a very basic table, listing out a row per product.

function ProductTable(props) { const { products } = props; return ( <table> <caption>Our products</caption> <thead> <tr> <th>Name</th> <th>Price</th> <th>In Stock</th> </tr> </thead> <tbody> {products.map(product => ( <tr key={product.id}> <td>{product.name}</td> <td>{product.price}</td> <td>{product.stock}</td> </tr> ))} </tbody> </table> );
}

Here, we accept an array of products and loop them out into our table. It’s static and not sortable at the moment, but that’s fine for now.

Sorting The Data

If you’d believe all the whiteboard interviewers, you’d think software development was almost all sorting algorithms. Luckily, we won’t be looking into a quick sort or bubble sort here.

Sorting data in JavaScript is pretty straightforward, thanks to the built-in array function sort(). It’ll sort arrays of numbers and strings without an extra argument:

const array = ['mozzarella', 'gouda', 'cheddar'];
array.sort();
console.log(array); // ['cheddar', 'gouda', 'mozzarella']

If you want something a bit more clever, you can pass it a sorting function. This function is given two items in the list as arguments, and will place one in front of the other based on what you decide.

Let’s start by sorting the data we get alphabetically by name.

function ProductTable(props) { const { products } = props; let sortedProducts = [...products]; sortedProducts.sort((a, b) => { if (a.name < b.name) { return -1; } if (a.name > b.name) { return 1; } return 0; }); return ( <Table> {/* as before */} </Table> );
}

So what’s going on here? First, we create a copy of the products prop, which we can alter and change as we please. We need to do this because the Array.prototype.sort function alters the original array instead of returning a new sorted copy.

Next, we call sortedProducts.sort, and pass it a sorting function. We check if the name property of the first argument a is before the second argument b, and if so, return a negative value. This indicates that a should come before b in the list. If the first argument’s name is after the second argument’s name, we return a positive number, indicating that we should place b before a. If the two are equal (i.e. both have the same name), we return 0 to preserve the order.

Making Our Table Sortable

So now we can make sure the table is sorted by name — but how can we change the sorting order ourselves?

To change what field we sort by, we need to remember the currently sorted field. We’ll do that with the useState hook.

A hook is a special kind of function that lets us “hook” into some of React’s core functionality, like managing state and triggering side effects. This particular hook lets us maintain a piece of internal state in our component, and change it if we want to. This is what we’ll add:

const [sortedField, setSortedField] = React.useState(null);

We start by not sorting anything at all. Next, let’s alter the table headings to include a way to change what field we want to sort by.

const ProductsTable = (props) => { const { products } = props; const [sortedField, setSortedField] = React.useState(null); return ( <table> <thead> <tr> <th> <button type="button" onClick={() => setSortedField('name')}> Name </button> </th> <th> <button type="button" onClick={() => setSortedField('price')}> Price </button> </th> <th> <button type="button" onClick={() => setSortedField('stock')}> In Stock </button> </th> </tr> </thead> {/* As before */} </table> );
};

Now, whenever we click a table heading, we update the field we want to sort by. Neat-o!

We’re not doing any actual sorting yet though, so let’s fix that. Remember the sorting algorithm from before? Here it is, just slightly altered to work with any of our field names.

const ProductsTable = (props) => { const { products } = props; const [sortedField, setSortedField] = React.useState(null); let sortedProducts = [...products]; if (sortedField !== null) { sortedProducts.sort((a, b) => { if (a[sortedField] < b[sortedField]) { return -1; } if (a[sortedField] > b[sortedField]) { return 1; } return 0; }); } return ( <table>

We first make sure we’ve chosen a field to sort by, and if so, we sort the products by that field.

Ascending vs Descending

The next feature we want to see is a way to switch between ascending and descending order. We’ll switch between ascending and descending order by clicking the table heading one more time.

To implement this, we’ll need to introduce a second piece of state — the sort order. We’ll refactor our current sortedField state variable to keep both the field name and its direction. Instead of containing a string, this state variable will contain an object with a key (the field name) and a direction. We’ll rename it to sortConfig to be a bit clearer.

Here’s the new sorting function:

 sortedProducts.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? 1 : -1; } return 0;
});

Now, if the direction is ‘ascending’, we’ll do as we did previously. If it’s not, we’ll do the opposite, giving us descending ordering.

Next up, we’ll create a new function — requestSort — which will accept the field name, and update the state accordingly.

const requestSort = key => { let direction = 'ascending'; if (sortConfig.key === key && sortConfig.direction === 'ascending') { direction = 'descending'; } setSortConfig({ key, direction });
}

We’ll also have to change our click handlers to use this new function!

return ( <table> <thead> <tr> <th> <button type="button" onClick={() => requestSort('name')}> Name </button> </th> <th> <button type="button" onClick={() => requestSort('price')}> Price </button> </th> <th> <button type="button" onClick={() => requestSort('stock')}> In Stock </button> </th> </tr> </thead> {/* as before */} </table>
);

Now we’re starting to look pretty feature-complete, but there’s still one big thing left to do. We need to make sure that we only sort our data when we need to. Currently, we’re sorting all of our data on every render, which will lead to all sorts of performance issues down the line. Instead, let’s use the built-in useMemo hook to memoize all the slow parts!

const ProductsTable = (props) => { const { products } = props; const [sortConfig, setSortConfig] = React.useState(null); React.useMemo(() => { let sortedProducts = [...products]; if (sortedField !== null) { sortedProducts.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? 1 : -1; } return 0; }); } return sortedProducts; }, [products, sortConfig]);

If you haven’t seen it before, useMemo is a way to cache — or memoize — expensive computations. So given the same input, it doesn’t have to sort the products twice if we re-render our component for some reason. Note that we want to trigger a new sort whenever our products change, or the field or direction we sort by changes.

Wrapping our code in this function will have huge performance implications for our table sorting!

Making It All Reusable

One of the best things about hooks is how easy it is to make logic reusable. You’ll probably be sorting all types of tables throughout your application, and having to reimplement the same stuff all over again sounds like a drag.

React has this feature called custom hooks. They sound fancy, but all they are are regular functions that use other hooks inside of them. Let’s refactor our code to be contained in a custom hook, so we can use it all over the place!

const useSortableData = (items, config = null) => { const [sortConfig, setSortConfig] = React.useState(config); const sortedItems = React.useMemo(() => { let sortableItems = [...items]; if (sortConfig !== null) { sortableItems.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? 1 : -1; } return 0; }); } return sortableItems; }, [items, sortConfig]); const requestSort = key => { let direction = 'ascending'; if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') { direction = 'descending'; } setSortConfig({ key, direction }); } return { items, requestSort };
}

This is pretty much copy and paste from our previous code, with a bit of renaming thrown in. useSortableData accepts the items, and an optional initial sort state. It returns an object with the sorted items, and a function to re-sort the items.

Our table code now looks like this:

const ProductsTable = (props) => { const { products } = props; const { items, requestSort } = useSortableData(products); return ( <table>{/* ... */}</table> );
};

A Last Touch

There’s one tiny piece missing — a way to indicate how the table is sorted. In order to indicate that in our design, we need to return the internal state as well — the sortConfig. Let’s return that as well, and use it to generate styles we can apply to our table headings!

const ProductTable = (props) => { const { items, requestSort, sortConfig } = useSortableData(props.products); const getClassNamesFor = (name) => { if (!sortConfig) { return; } return sortConfig.key === name ? sortConfig.direction : undefined; }; return ( <table> <caption>Products</caption> <thead> <tr> <th> <button type="button" onClick={() => requestSort('name')} className={getClassNamesFor('name')} > Name </button> </th> {/* … */} </tr> </thead> {/* … */} </table> );
};

And with that, we’re done!

Wrapping Up

As it turns out, creating your own table sorting algorithm wasn’t an impossible feat after all. We found a way to model our state, we wrote a generic sorting function, and we wrote a way to update what our sorting preferences are. We made sure everything was performant and refactored it all into a custom hook. Finally, we provided a way to indicate the sort order to the user.

You can see a demo of the table in this CodeSandbox:

Smashing Editorial (ra, yk, il)

Goal Talk Podcast Episode 8: Unlocking Your Employee’s True Potential

On each episode of this season of the Goal Talk podcast, I interview a marketing or management expert to bring small business owners and marketers the information they need to successfully grow their businesses.

Last week, we started in on our digital marketing deep-dive by getting into detail about how the Google Ads auction works. And who better to take me through it than WordStream’s in-house Google Ads account manager, Kristina Simonson. Throughout the episode, we went through everything from how Google determines which ad to show, how Google determines how much you’re going to spend, which metrics are the most important to track, and more. If you’re just venturing into the world of advertising online, this preliminary Google Ads episode is a great one to listen to. If you haven’t heard that episode yet, you can listen here.

This week’s topic: How to identify and foster high-potential employees

As a manager or a business owner, you likely have a team of individuals reporting to you. Sometimes, you’re able to identify those who are highly engaged, high producing, and express the drive to do more than what their job currently entails. Those individuals can be classified as high-potential, and require a specific type of guidance for the relationship to work for both them and your business. So how do you identify and empower your employees that may be high potential?

In this next management focused episode of the Goal Talk podcast, we dive more deeply into the specifics around being an effective manager for your employees, and how you can realistically approach fostering a high potential employee to be as successful as possible.

In this week’s episode, I sit down with Lucy Lemons, WordStream’s VP of People Success to discuss: 

  • What it means to be a high potential employee.
  • How to identify a high-potential employee on your team.
  • Tips for employees to “manage up” if they’re not feeling supported.
  • How managers can find a balance between challenging and supporting employees.
  • How WordStream approaches high potential employees.

Throughout the episode, Lucy and I talk through all of the above topics as well as give specific examples and tools to use to be an effective manager when working with high potential individuals.

You can find this week’s episode on Apple Podcasts and Spotify, as well as your favorite podcast app. Also, don’t forget to watch new episodes on our YouTube channel, and follow the podcast’s Twitter account for episode releases, ask the hosts questions and join in on the conversation.

About the podcast

The Goal Talk podcast is all about giving small business owners and marketers the information they need to succeed. From advertising tactics that help you personalize your message for your customers to management styles that will help your employees perform at their full potential and feel satisfied in their role, we’re sharing valuable takeaways to help you and your business flourish by interviewing the experts and sharing their insights. Listen here.

What Readers Want During COVID-19: Content Ideas for Every Niche

Posted by amandamilligan

This is a stressful time to say the least. Everything is impacted by COVID-19 in some way, including our work.

Once we’ve taken time to acknowledge how lucky we are to work in digital, it’s time to assess if our current content strategy needs any adjusting based on current events.

Many marketers are finding themselves:

  • Wanting to write about something topical
  • Needing to add more content to their calendars
  • At a loss for how to contribute at a time like this

So, I spent hours using Ubersuggest, putting myself in the shoes of various Americans. I tested a variety of keywords to see which ones have exhibited a trend during the COVID-19 outbreak and might warrant some attention from content marketers.

The results below are for the term “Coronavirus,” so for the other keywords identified, I looked for a noticeable spike in the months of January, February, and March to make sure they matched up accordingly.

My findings reveal potential topic ideas for several primary industries. See if any provide inspiration for high-quality content you can create in the coming months.

    Travel

    I’ll start with one of the industries hardest hit by this pandemic: travel. This was a tough one, as more and more people are understandably opting for driving, walking, or biking to get around, and are no longer relying on air travel or public transportation as trips and work get cancelled. However, I identified a few key opportunities.

    Travel insurance

    While it had an increase in the summer months, interest in the topic of travel insurance has risen back up again. Perhaps those who have to travel want to make sure they’re covered if they get sick, or maybe those who canceled travel want to see what their insurance covers.

    In either case, people are looking for information about travel insurance and how it can help them.

    Train travel

    It seems that train travel falls into an ambiguous category that people are asking about. I’m not here to say whether it’s safe or not (as that is obviously not my area of expertise). As we’ve all heard, it’s best not to travel at all, but perhaps your brand can offer some clarity in this regard and offer alternatives.

    Virtual travel

    For everyone stuck at home but still grappling with wanderlust, how can they still explore from the couch? Virtual travel seems to be gaining popularity as more people find themselves stuck at home.

    Work and education

    In some cases, companies and schools have gone from in-person to virtual nearly overnight. It’s been a huge shakeup across the board, and relevant topics are trending accordingly.

    Homeschooling

    Many kids are home from school, and their parents are suddenly and unexpectedly in the position of teaching them. They’re sure to have a lot of questions! Note how the search level now is the same as the summer months, when kids are also home.

    Free online courses

    With all plans essentially cancelled as a result of “social distancing,” people are looking for ways to spend their time at home. If you offer online courses, consider amplifying them and explaining their value. If you don’t, consider whether it makes sense to create one.

    Working from home tips

    Executives and staff alike are looking for advice on how to improve productivity while working from home, perhaps for the first time. Consider creating content with suggestions on how to set up a home office or maintain a schedule while dealing with at-home distractions.

    How to stay focused

    Whether it’s because people are working or studying at home for the first time or because they’re anxious and distracted by the developing events, more and more people are struggling to stay focused. Can your brand offer anything by way of motivation or tools for focus and efficiency?

    Entertainment

    Everyone’s at home either trying to distract themselves from the stressful reality of the world or looking to cure their boredom. As a result, online entertainment is on the rise. Can you offer the entertainment itself, or maybe guides on how to choose the best entertainment?

    Free streaming

    We’re stuck with digital for now, and people are looking for new media to consume. What can your brand provide? Also trending: “cheap digital games” and “best multiplayer video games”.

    Learn to play piano online

    Some folks are using their newfound free time to work on hobbies and skills they haven’t had the chance to pursue in the past. Can your brand teach them anything?

    Best online shopping deals

    This is particularly interesting to me. Keyword rates for this term are as high as they were over the holidays. I’m wondering if people who still have disposable income will pass the time online shopping, while others who are more financially impacted will cut back, leaving things at a net equal?

    Finance

    Aside from the health and safety of the population, finance cuts most to the emotional core of this pandemic. Many people are laid off or can’t work, and financial worry is skyrocketing. What can you do to provide guidance or relief?

    Unemployment

    Many people are unexpectedly looking to file unemployment, and plenty of those people have no idea how to do it, how much money they’ll get, or how to get that information. Informative guides and tips could be hugely helpful in this area.

    Budgeting tips

    With layoffs and pay cuts, people are scrambling to find new ways to save money. Also trending with the same graph results: “How to invest money wisely” — most likely because of the fluctuating stock market. Can you provide insight?

    Relationships

    When tensions run high, it’s important to pay attention to all the relationships in your life, meaning several subtopics in this vertical can be of vital importance.

    At home date ideas

    Couples stuck inside are looking for ways to keep up their romantic lives. Does it make sense for your brand to provide dating or relationships tips at an unprecedented time like this?

    Reconnecting with friends

    Physically, we’re all practicing social distancing, but we shouldn’t be virtually disconnecting from the people in our lives. It looks like people are wondering if they should take advantage of this free time to reconnect with old friends. Can your brand offer advice on the topic, or possibly a forum for those connections to happen?

    How to make your parents understand how you feel

    There are a lot of jokes going around about Gen Zs and Millennials trying to convince their Boomer parents to stay inside. But the jokes are for a reason: Many people are having tough conversations for the first time with family that they aren’t entirely sure how to navigate. Could you provide some helpful tips to approach these conversations?

    Health and fitness

    Health is, unsurprisingly, a vital category right now. Rather than getting into some of the most obvious things (like hand washing, hand sanitizer, etc.), I’ll try to cover some other popular topics that might be useful.

    How to get health insurance

    Similar to “unemployment” above, this is probably a response to people losing their jobs who are now unsure how they can get health insurance. What other concerns might these people have that you can help with?

    Indoor workouts

    People might have to stay home, but they’re also trying to stay healthy. How can you assist them in this endeavor?

    Also trending: “how to start running”, indicating that solitary outdoor exercise is key, too.

    How to strengthen immune system

    People are concerned about their health and want to do whatever they can to protect themselves from COVID-19. However, only dive into this subject matter if your brand is a legitimate medical expert. False information can damage lives.

    Also trending: “healthy diet”.

    Journaling

    Don’t forget about mental health, which is also being affected by the pandemic. People are stressed, anxious, worried, and, well, scared. Does it make sense for your brand to provide guidance on how to emotionally or mentally approach this day and age?

    Also trending: “meditation”.

    Home and family

    In many cases, entire families are at home, every day, for the first time since the kids were old enough to be in school. That can lead to some interesting challenges.

    Natural cleaning products

    In an effort to keep the house clean, people may be looking for guidance on the best type of supplies to use. Could you make a list of the most effective products?

    Also trending: “organic cleaning products”.

    Family recipes

    Everyone’s at home for all their meals and trying to avoid restaurants, so they probably need more recipes in their arsenal. Maybe your employees have favorite family recipes you could share with your readers.

    Games to play with kids

    Parents are used to this over the summer, but not when it’s sprung on them for an indefinite period of time. How can your brand give them ideas and tools to entertain their kids while they’re home?

    Also trending: “family conversation starters”.

    Conclusion

    To round out this study, I want to show the results for “uplifting stories.”

    If you’re not responsible for delivering breaking news or important COVID-19 updates, look for opportunities to amplify joy, gratitude, hope, or any other positive emotion. People are looking for health and safety updates, but they’re looking for inspiration, too.

    Consider how any of these topics might apply to your brand, do some further exploring in the Moz Keyword Explorer, and focus on creating a content plan you feel confident in.

    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!