A Day in the Life of an SEO

Search engine optimizers are like black sheep in a family. Our work is often misunderstood. Colleagues wonder what we are doing or how we make money for the company. Why do we read blog posts all day, they sometimes ask?

Success in organic search can be elusive. It’s often hard to measure. Other digital marketing channels produce more data for tracking and forecasting. With search engine optimization, however, we frequently guess. We run tests. We experiment.

I’ve been an SEO practitioner since the late 1990s. My agency now manages SEO for large and small companies worldwide. My day generally consists of the four activities below.

SEO: A Day in the Life

Learn via self-study. SEO was born in forums and blogs. Before SEO was an acronym, we were sharing and debating tactics. The forum at HighRankings.com was my textbook in 1996 when I began trying to improve my employer’s organic search performance. This was before Google, incidentally.

We used avatars and user names to hide our identities. But we were part of a community. We shared what we learned and argued theories.

Google launched in September 1998. A user named “GoogleGuy” — who, we found out later, was Matt Cutts of Google — would pop in and gently guide our suspicions.

Fast forward to 2020, and forums aren’t nearly as popular. But the SEO community lives on — in blogs, Facebook Groups, Twitter, and the like. Self-study is part of the job. We spend hours reading and discussing with other optimizers.

Screenshot of the home page for HighRankings.com's forum, from 2003

The forum at HighRankings.com was an early day repository of SEO info. This screenshot from Wayback Machine is circa 2003.

Create experiments. A downside to SEO is that we’re often speculating. Google shares plenty about its algorithm. But it keeps many more details secret.

This gap — the known versus the unknown — is a big part of my job. That’s why we run tests to determine the tactics and strategies that work best for a client or industry. And, yes, search algorithms apply different ranking factors based on the industry.

Testing can prevent catastrophes. For example, over a decade ago I worked for GSI Commerce (now eBay Enterprise), a leading ecommerce platform. We had hundreds of clients making millions of dollars each day. Much of their traffic came from organic search. An SEO mistake would have been dire.

The common belief at the time was that contextual URLs were important for higher rankings. Rather than numbers and symbols, a URL should include meaningful, descriptive text — or so we thought. But updating every client’s URLs (to text, from numbers and symbols) would have been hugely expensive and, potentially, disruptive. So we tested the change on a few brands that volunteered.

We found that changing the URLs was actually counterproductive. Organic rankings did not increase. Our participating clients lost loads of sales from the experiment.

In other words, testing is critical for a meaningful SEO program. Absent tests, implementing “best practices” can be disastrous.

Monitor results. For SEO, data create a hypothesis. That hypothesis is tested. The results of that test drive implementation. But the results also drive the next test. At Greenlane (my agency), we don’t build long roadmaps for clients. Instead, our activities are more like sprints. Each month we optimize based on the incoming data. We abandon ship if a campaign is not driving the expected results.

Conversions (revenue, typically) from organic search traffic are our guiding light. It’s not what SEO tools or Google Search Console report. It’s what’s occurring on the ground with our clients. Thus responsiveness is key to SEO success.

To be sure, we’ll use tools such as SEMrush and Ahrefs for competitive intelligence. We’ll use rank-tracking software to estimate our organic visibility. But conversions and revenue are what matters.

Recommendations. We recommend tactics to our clients. They decide whether to take the advice. Our recommendations typically answer:

  • What is the problem?
  • Why is it a problem?
  • How to fix?

Clients sometimes do not implement our recommendations. The reasons, which vary, include no budget or limited internal staff. When that occurs, we usually run out of ideas.

For example, I once worked with a large, prominent retailer that had suffered declining revenue from organic search. I made a few recommendations based on a careful assessment. The recommendations came with development costs. The chief marketing officer declined my suggestions as I could not guarantee success. The result is that the company’s organic traffic has not improved, and, importantly, its long-term potential is limited.

In other words, the best we can do is provide the what, why, and how.

Beardbrand’s Technology Stack: Platforms, Apps, Services

An ecommerce company is a collection of platforms, apps, and service providers. That’s certainly the case with Beardbrand, the company I launched in 2012.

We started as a content-only community of beardsmen. We’ve morphed into a thriving, multichannel ecommerce company focusing on male grooming. Along the way, we’ve added platforms, apps, tools, and other services.

James Wilson is Beardbrand’s growth marketing manager. I asked James to describe our technology stack, hoping that the decisions we’ve made (good and bad) can help other merchants.

What follows is our entire audio conversation as well as a transcript, which is edited for clarity and length.

Eric Bandholz: Tell us about your professional background.

James Wilson: I’ve been working at Beardbrand for a little over two years. Before that, I worked at Amazon for about seven years, where I did data work, basically. At Beardbrand, I started as a data analyst, but I moved into heading up growth. I do pretty much anything that can help grow the company.

Bandholz: Let’s start with Shopify. You weren’t involved in our decision years ago to use that platform when we launched Beardbrand. Having worked with Shopify now for a couple of years, have you considered switching?

Wilson: No, I haven’t.

Bandholz: When we start digging into the platform, there are many hacks and runarounds and finagling to make certain things work. But it seems the benefits outweigh the negatives.

Wilson: Yes. I agree. I think if you’re willing to get your hands dirty, you can make a lot out of it, for sure.

Bandholz: We’re now on Shopify Plus. Shopify’s robust ecosystem includes many applications and partners. For example, we’ve worked with Fuel Made, the ecommerce agency, which helped us build a custom website. There are many other partners to do most any task. An app we use for our subscriptions is ReCharge.

Wilson: Right. I hadn’t looked into other subscription options until recently when ReCharge announced it would integrate with the Shopify checkout. This has prompted us to consider other alternatives. But until then, ReCharge has worked well.

Bandholz: For people who aren’t familiar, James is not describing a native integration with Shopify. He’s describing a system that would create two different checkouts and two different payment processors — Stripe for subscriptions versus Shopify Pay for our store. And every reorder frequency is its own product in the reports. So if I just wanted to see how our beard oil was doing, I would have around 200 different beard oil options because I’ve got six different fragrances and three different reorder frequencies.

Let’s talk about the basics that every ecommerce store should have, such as Google Analytics.

Wilson: Yes. Google Analytics is essential. In terms of remarketing pixels, we have one for Facebook advertising and a few for Google advertising (search, display, Shopping, and video). Also, we have Klayvio, the email marketing platform. We have scripts on Klaviyo for abandon checkout and abandon cart — basically full integration with Klaviyo for remarketing, which is very powerful. I definitely recommend it.

Our philosophy at Beardbrand is to keep things minimal on the website. We don’t just put every pixel or every script onto our website that we can. We’re worried about site speed.

We use Google Tag Manager for our Google pixels, but not our Facebook pixels. There’s a native integration with Shopify for Facebook.

Bandholz: We’ve been on Klaviyo since late 2014. I’m a big fan of Klayvio. I’ve spoken at their conferences before. It’s pretty much indispensable for us.

Changing the subject, we use Audiohook. What’s that?

Wilson: Audiohook is an audio podcast retargeting company. We’ve seen good results. We send Audiohook an audio commercial. Then they will put it out to iHeartRadio, Spotify, Pandora, and similar channels.

Bandholz: Moving on, we were with Yotpo for several years. Yotpo is a great company with good technology. But we were paying for features that we weren’t using. It was costing us $300 per month or so. Judge.me, a competing service, is a lot less money.

Wilson: Yotpo has a lot more integration options than Judge.com. I’ve had to custom code Judge.me integrations twice now.

Bandholz: Let’s talk about Shogun.

Wilson: Shogun is a drag-and-drop landing page builder. It allows you to quickly create pages that include some really great features, like your products, photos, titles, and shop buttons.

The most powerful part about Shogun, for me, is the design aspect. I’m not a designer. I’m more technical. So I end up writing add-ons and scripts to our Shogun pages, which makes them a lot better.

One more thing about Shogun, sort of an advertising pro tip. Linking Facebook ads to custom landing pages in Shogun has been a great win for us. It takes a little bit of time because we make a unique landing page for each ad. But we’ve seen good results.

Bandholz: Let’s talk about LiveChat, which we no longer use. It was one of the biggest resource hogs in terms of page speed.

Wilson: Yes. It definitely slowed our site pretty significantly. It can be helpful for shoppers, for sure. But it will slow down a website, at least our experience.

We now use an SMS program, which is powered by Emotive, for one-on-one conversations with customers. It replaces LiveChat.

Bandholz: Speaking of chat, for customer support we use Gorgias.

Wilson: Yes. It’s been good for us. The interface is great. I like how it integrates with Facebook and other social media. We get comments from our social posts routed into Gorgias. It’s pretty cool.

Bandholz: Let’s address smaller apps, such as Grapevine.

Wilson: Grapevine is a no-brainer. It’s a survey tool, which we put on our thank you screen. We ask people how they found us. Twenty-seven percent of people answer. It’s been instrumental in driving our marketing efforts.

Plus, it’s inexpensive, a few dollars per month. The free version is pretty robust.

Bandholz: Another small app that we use is Store Locator by Storemapper.

Wilson: Yes. That one allows us to map all retail locations that sell Beardbrand products. We have a page on our website that loads Store Locator. It’s cool — very interactive.

Bandholz: We’ve got a few Shopify-specific apps — Metafields Guru, Metafields Editor, Custom Fields. Tell me about those.

Wilson: I use Metafields Guru. It allows you to edit the metafields for any Shopify page. A metafield is info that you need to save about a page but don’t want to be displayed on the frontend. Metafields use Shopify Liquid, the company’s coding language. So the data for Judge.me, for example, is in the metafield for a product page. Judge.me writes a script that puts it onto the page from that metafield.

Bandholz: Do we use Zapier?

Wilson: We used it temporarily for a test with Bonjoro, which is software to send short videos. We used Zapier for a test to link our first-time customers to Bonjoro. Then we sent a bunch of video messages to those customers.

Bandholz: We use Ahrefs, the search engine optimization platform.

Wilson: Yes. Ahrefs a great site for managing our site’s SEO. It’s basically a massive repository of SEO information. I check it every morning to see which keywords are doing better or worse or if we gained a featured snippet. Ahrefs also has a great blog.

Bandholz: Typeform is huge for us.

Wilson: Typeform is great software. It allows you to build forms, quizzes, and similar in a question-and-answer format. It’s very customizable. For simple quiz building, which is our main use, it’s pretty awesome. I think we pay like a hundred bucks a month for Typeform.

In addition to quizzes, we can do post-purchase surveys and questionnaires, as examples. Typeform has a nice user interface, too. I highly recommend the company.

Bandholz: Anything else?

Wilson: There’s Fraud Filter, which is a default Shopify app. We don’t pay extra for it. But it’s important to ensure we filter fraudulent customers.

We use Google Lighthouse to check our page speed. It’s a critical tool for us.

Bandholz: We’ve left off our productivity tools, such as Google Apps and Slack. They’re important to us. Anything else?

Wilson: Just be careful with the apps you install. Make sure they don’t mess up page speed. That’s the lesson.

What A Time To Be Smashing!

For many of us, it didn’t take long to get used to the idea of online conferences and workshops. They may not be as rewarding as in-person experiences are (and always will be), but they have their advantages, too. Online makes it possible for everyone to attend without leaving the comfort of their desks, as well as learn and network at their own individual pace. It’s also more affordable and makes traveling optional, which makes events accessible for young families and people who prefer not to travel.

We’ve been running online workshops since April this year, and each and every one has been an incredible experience. With wonderful attendees from all over the world coming together to learn together, so many ideas have been brought to life, especially in the live design and coding sessions. Check out this awesome pen created by Cassie Evans at SmashingConf SF just last week. Rock on!

Smashing Podcast: Tune In And Get Inspired

We all have busy schedules, but there’s always time to pop in those earplugs and listen to some music or podcasts that make you happy! We’re soon moving on to our 30th episode of the Smashing Podcast — with folks from different backgrounds and so much to share!

1. What Is Art Direction?2. What’s So Great About Freelancing?
3. What Are Design Tokens?4. What Are Inclusive Components?
5. What Are Variable Fonts?6. What Are Micro-Frontends?
7. What Is A Government Design System?8. What’s New In Microsoft Edge?
9. How Can I Work With UI Frameworks?10. What Is Ethical Design?
11. What Is Sourcebit?12. What Is Conversion Optimization?
13. What Is Online Privacy?14. How Can I Run Online Workshops?
15. How Can I Build An App In 10 Days?16. How Can I Optimize My Home Workspace?
17. What’s New In Drupal 9?18. How Can I Learn React?
19. What Is CUBE CSS?20. What Is Gatsby?
21. Are Modern Best Practices Bad For The Web?22. What Is Serverless?
23. What Is Next.js?24. What Is SVG Animation?
25. What Is RedwoodJS?26. What’s New In Vue 3.0?
27. What Is TypeScript?28. What Is Eleventy?
29. How Does Netlify Dogfood The Jamstack?30. Coming up on Dec. 1!

Is there a topic that you’d love to hear and learn more about? Or perhaps you or someone you know would like to talk about a web- and design-related topic that is dear to your hearts? Feel free to reach out to us on Twitter anytime — we’d love to hear from you!

Smashing Newsletter: Best Picks

With our weekly newsletter, we aim to bring you useful content and share all the cool things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve!

Also, by subscribing, there are no third-party mailings or hidden advertising involved, and your support really helps us pay the bills. ❤️

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you as soon as they can.

Take Your Figma Workflow To The Next Level

Figma’s popularity is growing and with its popularity, the number of plugins, templates, and general tips and tricks that make working with the browser-based design tool even smoother is growing, too. If you’re a Figma user yourself (or are planning to become one), we came across some useful resources that are worth checking out.

One of them is “Awesome Figma Tips,” a collection of small but powerful tips to work faster in Figma, compiled by Trong Nguyen. If the design you’re working on is based on a design system, the Design System Manager plugin might come in handy. It lets you define or update design tokens in one single panel, right from Figma, and you’ll immediately see the changes cascading through your Figma design.

Breakpoints, on the other hand, is a plugin that brings resizable frames to the design tool to help you quickly resize to a breakpoint to create dynamic layouts. Last but not least, once your design is ready and you want to present it to your team or stakeholders, Templatery has got your back with free templates that you can use for your Figma presentations. Little timesavers that take your workflow to the next level.

SVG Squircicle Maker

There are squares, there are circles, and apparently, there are also squircicles! George Francis’s Squircley is a generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.

The generator exports SVGs which they can be dropped straight into your HTML/CSS code, or used in your design application. Just a fun little application to use. If that’s not good enough, you can also use GetWaves to generate SVG waves, or Blobmaker to generate some fancy blobs. Happy experimenting!

The Ultimate Guide To UX Research

User experience research is a crucial component of the human-centered design process. But how do you tackle the task and integrate a UX research process into your team’s workflow? To get you up and running, the folks at Maze put together the “Ultimate Guide to UX Research”.

The comprehensive guide dives into the fundamentals of UX research and its various methods. It starts off taking a closer look at what UX research is all about and why it’s the backbone of building good products, dissects different research methods and tools, and shares tips for creating a research plan and establishing a UX research process. A great read for UX designers and product managers alike.

A Complete Guide To Dark Mode On The Web

Dark mode is quickly becoming a user preference with Apple, Windows, and Google having it implemented into their operating systems. But what about dark mode on the web? Adhuham wrote a comprehensive guide to dark mode that delves into different options and approaches to implementing a dark mode design on the web.

To start off, the guide looks at the technical considerations that implementing a dark mode entails, covering different approaches to toggling the themes and how to store a user’s preferences so that they will be applied consistently throughout the site and on subsequent visits. Tips for handling user agent styles with the color-scheme meta tag help avoid potential FOIT situations. Design considerations are also tackled, of course, with valuable tips to get images, shadows, typography, icons, and colors ready for dark mode.

Streamlining The Checkout Experience

56. That’s the number of actions a customer needs to complete to buy an American Airlines ticket. Let’s face it, checkout forms are often too long and a hassle to fill out. In the worst case, customers might even abandon the process. To help us do better, UX Planet published a four-part article series on streamlining the checkout experience back in 2017 which is still gold for everyone working on a checkout flow today.

The first part in the series examines examples where the checkout experience has gone wrong and why. The second part pins down the most important things that will help improve any checkout form experience in 16 easy-to-follow tips. Part three is dedicated to form validation and how to minimize the number of errors a customer might make, while also taking a closer look at differences between B2C and B2B markets that lead to differences in design. Last but not least, part four is all about bank card details, teaching you how to detect and validate a card number and how to deal with the other payment form fields. A long but worthwhile read.

The Maturity Of UX Writing

For the past five years, organizations and designers have turned their focus to the importance of writing. They’ve realized that content can indeed help to design clear and meaningful experiences. But what is UX Writing and why is it that important?

According to the UX Writing Worldwide Report, UX Writing focuses on users and helps create experiences that are relevant to their needs. The survey results are quite interesting and useful because they can help to better understand the role of the UX Writer in companies around the world.

The State of Developer Ecosystem 2020

What’s the most popular programming language among developers? Which languages do developers plan to migrate to? And which is the most studied language? These are only some of the questions that the State of Developer Ecosystem 2020 report answers.

At the beginning of this year, JetBrains surveyed almost 19,700 developers to identify the latest trends around tools, technologies, programming languages, and other facets of the development world. Some of the key takeaways: Java is the most popular primary programming language, JavaScript the most-used overall programming language, and when it comes to adopting a new language, Go, Kotlin, and Python are at the top of developers’ lists. Apart from hard facts like these, the survey also takes a closer look at open-source contribution, team tools, life habits, and information seeking. Precious insights into what moves the development community.

Designing The Inline Form Validation Experience

Sometimes you come across an article that is already a few years old but that still turns out to be gold. Like Mihael Konjević’s post about inline validation. To find out what’s the best default user experience when it comes to displaying inline validation errors, Mihael analyzed different sites. As his findings show, there’s no consensus on validation handling, but asking the right questions can help you design a bug-free and user-friendly experience.

Mihael suggests a hybrid “reward early, punish late” approach: If the user is entering data in the field that was in a valid state, perform the validation after the data entry. If the user is entering the data in the field that was in an invalid state, perform the validation during the data entry. Different forms will have different needs, of course, so be sure to adjust the approach accordingly.

Tools To Improve Your Site’s Performance

Almost every part of web design and development — from your choice of images to the performance of web servers — add up to how quickly your site will load. Metrics help you uncover bottlenecks that might stay unnoticed when you only test the site on your local setup. We collected some handy tools that make gathering and interpreting such data easy.

To help you assess how well your site performs, Measure by web.dev audits for performance, best practices, SEO, and accessibility and gives you tips to improve the user experience. The tests are run using a simulated mobile device, throttled to a fast 3G network and 4x CPU slowdown. Just like Measure, Lighthouse Metrics is also powered by Lighthouse to give you global performance insights and show you how your site performs from six different regions. Last but not least, Google’s PageSpeed Insights reports on the performance of a page on both mobile and desktop devices based on lab data which is collected in a controlled environment and field data to capture the real-world UX. If you need some more assistance to improve performance, our new performance guide with checklists, articles, and talks has got your back.

JavaScript The Right Way

Learning a new language can be quite a challenge, especially when there are so many tools and frameworks out there to get the most out of it as there are in the case of JavaScript. To prevent you from getting lost in all the possibilities and help you learn the best practices from the ground up instead, William Oliveira and Allan Esquina put together the guide “JavaScript The Right Way”.

Aimed at both beginners as well as experienced developers who want to dive deeper into JavaScript best practices, the guide gathers articles, tips, and tricks from top developers, covering everything from the very basics to code style, tools, frameworks, game engines, reading resources, screencasts, and much more to make a developer’s life easier. The guide is available in eight languages. A gold mine full of JavaScript wisdom.

Tailwind Versus BEM

Tailwind and BEM are two approaches to writing and maintaining CSS. But when to use which? Comparing them is a bit like comparing apples and oranges, as Eric Bailey points out. Based on years of practical experience of using Tailwind and BEM on a variety of projects and scales, he summarized the benefits and drawbacks of each one of them.

Tailwind’s utility CSS approach with pre-written classes makes the implementation very similar across multiple projects and teams and promotes easier cross-project familiarity. However, it does not describe all of CSS’ capabilities, especially newer features. BEM, on the other hand, allows you to describe any user interface component you can think of in a flexible, modular, extensible way, making it a great choice for highly art-directed pieces. The strengths of both approaches lie in different areas, but Eric’s list helps you find the one to master the challenges your project brings along. By the way, have you heard of CUBE CSS yet? The methodology capitalizes on the strength of both approaches and is worth taking a closer look, too.

Interactive Origami Simulation

For years, Origami has been known to be one of the most fun craft art activities worldwide, but have you ever wondered how it would look like on screen? Well, Amanda Ghassaei had exactly this thought and took on the challenge of creating an app that simulates how any Origami crease pattern folds.

With the help of a number of external libraries such as Three.js and jQuery, Origami Simulator was brought to life. This app calculates the geometry of folded (or partially folded) Origami using a dynamic, GPU-accelerated solver and illustrates the physical properties of the folded material. It also supports an immersive, interactive VR mode using WebVR. Impressive!

Enhancing User Experience With CSS Animations

Animations have become a popular way to improve the user experience in the last years. But how do we make sure that our CSS animations and transitions will be meaningful to users and not just decorative eye candy? Stéphanie Walter gave a talk about enhancing UX with CSS animations at the virtual Shift Remote conference back in August. In case you missed it, she summarized everything you need to know in a blog post accompanying the talk.

Starting with a reminder of CSS syntax to build transitions and animations, Stéphanie explores why certain animations work better than others. She shares tips for finding the correct timing and duration to make UI animations feel right and explains why and how animations do contribute to improving the user experience. And since great powers bring along great responsibility, she also takes a closer look at how you can make sure your animations don’t trigger motion sickness. A great reference guide.

A Little Game To Improve Your Pen Tool Skills

How well do you master the Pen tool? If it causes you headaches when working with Photoshop, Illustrator, XD, or other tools, the Bézier Game helps you take your skills to the next level, in a quick and fun way.

After completing the quite self-explanatory tutorial stage, the challenge begins: In the first level, an unassuming (but quite tricky) little car shape is waiting for you to redraw it using the least amount of nodes possible. Each node and each curve that snaps into place reveals a little piece of the rainbow-colored path and brings you a step closer towards becoming a Pen tool master. Don’t despair if you can’t make it on the first try. As with everything, practice makes perfect.

Tips And Tricks For Debugging JavaScript

Bugs happen, and when they happen, it’s good to know how to tackle them in a smart way. If you need to debug JavaScript code, Sean Higgings wrote a handy article to help you find the right debugging approach and master the challenge while adhering to best practices.

Sometimes you might want to log events to the console when debugging JavaScript events. For those occasions, Matthias Kupperschmidt shares a nifty trick that prevents sending and tracking browser events multiple times — perfect for when you want to see how many submit events a form sends out, for example.

Stay Smashing, And See You Next Time!

I hope you found today’s monthly update useful. As the new year approaches us with new challenges, we’re sure that there are many more good times ahead of us. Thanks for sticking around and for your ongoing support — we sincerely appreciate it! Let’s rock this together!