Wednesday 31 January 2018
Designer-Oriented Styles
James Kyle:
Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers ...
Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process.
(Okay okay... most designers. You're special. But we both knew that already.)
I think James makes strong points here. I'm, predictably, in the camp in which I like CSS. I don't find it particularly hard or troublesome. Yet, I don't think in CSS when designing. Much easier to think (and work) in components, nesting them as needed. If the developer flow matched that, that's cool.
I also agree with Sarah Federman who chimed in on Twitter:
It seems a bit premature to look at the current landscape of component CSS tooling at say that it's designer-friendly.
The whole conversation is worth reading, ending with:
Tooling that treats component design as an interface with the code is where it's at/going to be. Hopefully, designers will be more empowered to create component styles when we can meet them closer to their comfort zone.
Direct Link to Article — Permalink
Designer-Oriented Styles is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2nqnTn8
via IFTTT
A Comprehensive Guide To Product Design
from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2rSVH0F
via IFTTT
Tuesday 30 January 2018
Respect Always Comes First
from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2rUMmVY
via IFTTT
People Writing About Style Guides
Are you thinking about style guides lately? It seems to me it couldn't be a hotter topic these days. I'm delighted to see it, as someone who was trying to think and build this way when the prevailing wisdom was nice thought, but these never work. I suspect it's threefold why style guides and design systems have taken off:
- Component-based front-end architectures becoming very popular
- Styling philosophies that scope styles becoming very popular
- A shift in community attitude that style guides work
That last one feels akin to cryptocurrency to me. If everyone believes in the value, it works. If people stop believing in the value, it dies.
Anyway, in my typical Coffee-and-RSS mornings, I've come across quite a few recently written articles on style guides, so I figured I'd round them up for your enjoyment.
How to Build a Design System with a Small Team by Naema Baskanderi:
As a small team working on B2B enterprise software, we were diving into creating a design system with limited time, budget and resources ... Where do you start when you don’t have enough resources, time or budget?
Her five tips feel about right to me:
- Don’t start from scratch
- Know what you’re working with (an audit)
- Build as you go
- Know your limits
- Stay organized
Style guide-driven design systems by Brad Frost:
I’ll often have teams stand up the style guide website on Day 1 of their design system initiative. A style guide serves as the storefront that showcases all of the design system’s ingredients and serves as a tangible center of mass for the whole endeavor.
This Also published their style guide (Here's 100's of others, if you like peaking at other people's take on this kind of thing).
What is notable about this to me is that it's the closest to the meaning of style guide to me (as opposed to a pattern library or design system that are more about design instructions for building out parts of the website). They only include the three things that are most important to their brand: typography, writing, and identity. Smart.
Everything you write should be easy to understand. Clarity of writing usually follows clarity of thought. Take time to think about what you’re going to say, then say it as simply as possible. Keep these rules in mind whenever you’re writing on behalf of the studio.
Laying the foundations for system design by Andrew Couldwell:
I use the term ‘foundations’ as part of a hierarchy for design systems and thinking. Think of the foundations as digital brand guidelines. They inspire and dovetail into our design systems, guiding all our digital products.
- At a brand level they cover things like values, identity, tone of voice, photography, illustration, colours and typography.
- At a digital level they cover things like formatting, localization, calls to action, responsive design and accessibility.
- And in design systems they are the basis of, and cover the application of, things like text styles, form inputs, buttons and responsive grids.
Again a step back and wider view. Yes, a design system, but one that works alongside brand values.
How to create a living style guide by Adriana De La Cuadra:
Similar to a standard style guide, a living style guide provides a set of standards for the use and creation of styles for an application. In the case of a standard style guide, the purpose is to maintain brand cohesiveness and prevent the misuse of graphics and design elements. In the same way LSGs are used to maintain consistency in an application and to guide their implementation. But what makes a LSG different and more powerful is that much of its information comes right from the source code
An easy first reaction might be: Of course our style guide is "living", we aren't setting out to build a dead style guide. But I think it's an interesting distinction to make.
Style guides can sit in your development process in different places, as I wrote a few years back.
It's all to easy to make a style guide that sits on the sidelines or is "the exhaust" of the process. It's different entirely to place your style guide smack in the middle of a development workflow and not allow any sidestepping.
Lastly, Punit Web rounds up some very recently published style guides, in case you're particularly interested in fresh ones you perhaps haven't seen before.
People Writing About Style Guides is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2nrdkiy
via IFTTT
Enter The Dragon (Drop): Accessible List Reordering
from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2nlUIBn
via IFTTT
An Introduction to Google Tag Manager
Posted by Angela_Petteys
Digital marketing thrives on data. No matter what type of site you have, whether it’s a large e-commerce site, a personal website, or a site for a small business, it’s essential to understand how people interact with your site. Google Analytics can provide a lot of the important insights you’re looking for, but when used alone, it does have its limitations. But by tagging your site and using Google Tag Manager in conjunction with Google Analytics, you’re able to collect much more data than you can otherwise.
Tags are snippets of code which are added to a site to collect information and send it to third parties. You can use tags for all sorts of purposes, including scroll tracking, monitoring form submissions, conducting surveys, generating heat maps, remarketing, or tracking how people arrive at your site. They’re also used to monitor specific events like file downloads, clicks on certain links, or items being removed from a shopping cart.
Sites commonly use several different tags and the amount of code needed to create them all can be pretty overwhelming, especially if you’re trying to add or edit tags by going directly into the site’s source code. Google Tag Manager is a tool with a user-friendly, web-based interface that simplifies the process of working with tags. With GTM, you’re able to add, edit, and disable tags without having to touch the source code.
While GTM is, obviously, a Google product, it’s hardly limited to just working with tags for other Google services like AdWords or Analytics. You can use it to manage many different third-party tags, including Twitter, Bing Ads, Crazy Egg, and Hotjar, just to name a few. If there’s another tag which doesn’t have a template in GTM, you can add your own custom code. There are only a few types of tags GTM doesn’t work well with.
The pros and cons of GTM
Lessens reliance on web devs
By far, the biggest benefit to Google Tag Manager is that it makes it easier for marketers to implement tags without having to rely on web developers to do it for them. Developers are usually busy with other high-priority projects, so tagging often ends up on the back burner. But since Google Tag Manager helps you avoid touching the source code, marketers can quickly add and make changes to tags on their own. This is a big advantage if, for example, you only need to use a tag to collect data for a very brief amount of time. Without GTM, there’s a good chance that it would take longer for the tag to be added than it would actually be live for.
Still requires some technical implementation
Although GTM helps reduce the reliance on developers, it doesn’t completely eliminate it. You’ll still need someone to add the container code to each page of your site. And while GTM has plenty of tag templates to choose from which are easy enough for a non-developer to work with, more complex customized tags will likely require the help of someone who really understands coding. If you have existing tags that were manually added to your site’s source code, those will need to be removed first so that you don’t end up with duplicate data.
Most businesses can benefit from using it
Businesses of any size can potentially benefit from GTM. Since GTM makes it so much easier to add and edit tags without a developer, it’s great for smaller businesses that might have limited access to technical support. And since sites for enterprise-level businesses can easily use dozens of tags, GTM makes it easier to manage them all and improves site speed by helping them load more efficiently.
Tags can slow down site speed if fired synchronously
One issue with traditional tracking tags is that if they fire synchronously, they can slow down site speeds. When tags fire synchronously, one tag being slow to load slows down all the other tags that are waiting on it. And the longer a site takes to load, the more likely it is that people will leave without converting. But tags created in GTM load asynchronously by default, meaning each tag can fire anytime it’s ready to. If you need to control the order in which your tags are fired, there is tag sequencing and firing priority functionality to let you do that.
Can be used for AMP sites and mobile apps, as well
You’re not even limited to just using GTM with standard websites. GTM can also be used to manage tags for AMP sites and mobile apps. In the case of mobile apps, GTM can be a huge help since it lets you add and edit your tags without having to issue an updated version of your app, which users might not be quick to actually download. In some respects, using GTM for AMP sites or mobile apps is pretty similar to using it for a regular website, but they do have their differences. In this guide, we’re going to focus on using GTM for web.
Components of tags & GTM
On the surface, tags and tag managers are pretty straightforward. But before you can start working with them, there are a few main concepts you’ll need to know about.
Containers
When you start working with GTM, the first thing you’ll need to do is create a container. A container essentially “holds” all the tags for your site.
After creating a new container, GTM gives you some code to add to your site. This is your container code and it will need to be added to the source code so it displays on each page of your site. Some CMSes, such as WordPress, have plugins to help add the container code for you, but you may need to contact your web developer to have it added. Once you’ve done that, you’ll be able to add, edit, disable, or remove your tags as needed through GTM.
Triggers
Each tag on a site needs to serve a specific purpose. Maybe you want to have a tag send information when someone downloads a file, when an outbound link is clicked, or when a form is submitted. These sorts of events are known as triggers and all tags need to have at least one trigger assigned to it; otherwise, it’s not going to do anything.
Triggers can be broken down into two main components: events and filters. When you go to configure a trigger in GTM, you’ll be given a long list of types of triggers to choose from. These are your events. Once you choose an event, you’ll be able to set up your filter.
Filters can be divided further down into three parts: variables, operators, and values. We’ll talk more about variables in just a minute, but in this case, it refers to the type of variable involved. The operator tells the tag whether an event needs to equal (or if it should be greater or less than a certain value, contain a certain value, etc.) And of course, the value is the condition which needs to be met. Even though the word “value” is typically used in reference to numbers and prices, remember that in this case, it doesn’t necessarily have to be a numerical value. In many cases, your value will be something like a URL or a keyword.
For example, let’s say I wanted to see how many people were reading the blog content on my site in depth. I could create a tag with a Scroll Depth event trigger that should fire when the vertical scroll depth reaches 75%. If I wanted this to fire on every page of my site, I could leave the “All Pages” option selected in the trigger configuration box and I wouldn’t have to create any further filters. But since I’m focusing on blog content, I’d choose “Some Pages” and create the filter “Page URL” “Contains” “fakewebsitename.com/blog.”
There might also be some circumstances when you don’t want a tag to fire. In this case, you can create a blocking trigger to prevent it from firing on those occasions. GTM prioritizes blocking triggers over other types of triggers, so if you have a blocking trigger that contradicts a condition set by another trigger, Google Tag Manager will follow what’s specified by the blocking trigger. For instance, if you have a tag that’s set to fire on all of your pages, but there are a few pages you’d like to have excluded from that, you can just use a blocking trigger to prevent it from firing on those few pages.
Variables & constants
While tags depend on triggers, triggers depend on variables. Variables contain the value a trigger needs to evaluate to know whether or not it should fire. The tag compares the value of the variable to the value defined in the trigger and if the variable meets the conditions of the trigger, the tag will fire.
Tags also use variables to collect information that can be passed onto the data layer as a user interacts with the site. A common example of this would be if a tag was set to fire when a person adds a certain amount of products to their shopping cart.
Variables can often be reused between tags. One of the most popular tips for using GTM is to create constant variables with the ID numbers or tracking codes you’ll need to use more than once. For example, if you’ll need to use your Google Analytics property ID number in multiple tags, you could just create a constant string variable with the value being your ID number. That way, instead of repeatedly having to look up and enter your ID number, you could just select the variable name.
When using GTM, you’ll be working with two different types of variables: built-in variables and user-defined variables. Built-in variables are some of the most commonly used types of variables, so Google went ahead and made them easy to access in GTM.
Once you select a built-in variable, you’ll be able to configure its settings however you’d like. Note that these are just a few of the built-in variables for regular web containers. You can find more built-in variables by clicking the “Configure” button. If you’re using GTM for AMP sites or mobile apps, you may see different options to choose from.
If you need another type of variable that’s not included as a built-in variable, you can create a user-defined variable. When you go to add a user-defined variable, you’ll be given a list of types of variables to choose from. For more information on each type of variables, Simo Ahava has a very helpful guide to different variable types.
Variables can be created from the GTM dashboard by clicking on the “Variable” option on the left side menu. You can also create them while you’re creating a tag by clicking on the button next to the field that looks like a Lego block with a plus sign on it.
Data layers
Tags need information to know whether or not they should fire, but how (or where) do they get that information? One way they could find it is by checking the page’s HTML structure, but that’s really not an ideal solution. When tags need to search through HTML to find what they’re looking for, it can take longer for them to fire. And if the site’s HTML structure changes over time, tags can break. Besides, there are certain types of information a tag might need which won’t be found in a page’s HTML, like a transaction total.
A data layer is a JavaScript object which keeps the information tags need separate from the rest of your site’s code. Since tags don’t have to spend time searching through the HTML to find the information they need, this is another way GTM can help improve site speed. Instead, everything they’re looking for can be found in one place and it’s readily available when the page loads.
Technically, data layers are optional. You don’t have to specifically define one yourself; GTM can initiate one for you. But if you want to use GTM to track specific events, you’ll need to have a data layer.
To start off with, a new data layer object will look like this:
When adding a data layer, the object needs to be placed before the GTM container code. If the data layer object is placed after the container code, GTM won’t be able to access the information in it and the data layer will basically reset after loading.
Once the data layer object has been added to a page’s code, the brackets in the second line can be populated with information, variables, and events. Some types of information can be written directly into the data layer, but other types of information can be pushed into the data layer dynamically as a user interacts with your site, such as if someone downloads a file or if they add a certain amount of products to their shopping cart.
Working with GTM
Creating accounts and containers
To get started, go to tagmanager.google.com and create an account. Under “Setup Account,” enter the name of the company whose site is being managed and hit “Continue.”
Next, you’ll set up your container. Enter your domain name as the container name, choose which type of page or app it will be used on, and click “Create.” If you choose iOS or Android, you’ll also have to specify whether you’re using Firebase SDK or a legacy SDK.
Note that I specifically said to use the company name as the account name and the site’s domain for the container name. In theory, you can name these anything you want. This is just how Google recommends naming them as a best practice. Generally speaking, one of the best things you can do when working with GTM is make sure everything is named very clearly. Otherwise, it’s very easy for mistakes to be made.
Multiple GTM accounts can be managed within a single GTM account, but Google advises creating one container per domain. You don’t have to create separate containers for each individual tag or for every individual page on a site; all tags can all be placed within one container.
For most companies and organizations, one container is all they’ll need. But in the case of a company that has subsidiaries or owns separate businesses, the website for each subsidiary/business should get its own container and all the containers can be managed from one main GTM account. If a site has a subdomain that is treated separately from the main domain, the subdomain should also be given its own container.
When a marketing agency is managing tags on behalf of a company, Google recommends that the company create their own GTM account, then add the agency’s Google account as a user. This way, the agency can access GTM, but it’s easy for the company to revoke access should they decide to change agencies.
After creating your container, accept the GTM terms of service and you’ll be given your container code.
Once the container code has been added, you’re able to start creating tags. But before you get started, it’s a good idea to take some time to figure out exactly which tags you want to add. Even though there aren’t any limits to the amount of tags you can put in a container, for best performance, Google advises keeping the amount of tags you use to a minimum. If you’re migrating your tags to GTM from another tag manager or are making the switch from tags coded in your source code, this is a good time to review the tags currently on your site. In many cases, sites have tags that are associated with services they’re no longer using or were used to track things that aren’t being monitored anymore, so this is a good opportunity to "clean house," so to speak.
Creating a tag
When you create or select a container, the first thing you’ll see is the GTM dashboard. We’ll eventually get around to talking about almost everything you see here, but let’s begin by creating a tag. Click “Add a New Tag” to open up a window where you’ll be able to name and configure your tag.
Before we go any further into the process of creating tags, remember to name your tags very clearly. Since sites often use several different tags, you won’t want there to be any confusion about which tag does what. Google’s recommended tag naming convention is: Tag Type - Detail - Location. For example, a Google Analytics tag that tracks form submissions on a Contact Us page would be named “GA - Form Submission - Contact Us.” Including the location of a tag in its name is a good idea because it helps distinguish it from similar tags on other pages. So if I had other GA form submission tags on my site, specifying that this one is on the Contact Us page would help me avoid editing the wrong one by mistake.
Putting the tag type at the beginning of a tag name also helps keep your tags organized. GTM lists tags alphabetically, so if you’re creating multiple tags for the same service or tool, all of those tags will all be grouped together and easy to find.
Now, back to creating a tag. When you click “Add a new tag” on the dashboard, this is the window you’ll see. Choose “Tag Configuration” and you’ll be given a long list of tag templates, which includes many of the most commonly used types of tags. If any of these are what you’re looking for, click on it and enter the information requested. If you don’t see the type of tag you want to create listed, choose “Custom HTML” to add your own code.
Since the exact information you’ll need to provide will vary depending on which type of tag you’re working with, I can’t possibly go into how to make every single type of tag. But as an example, let’s say I wanted to notify Google Analytics anytime someone views my pricing page. After choosing Universal Analytics, this is what I’d see:
All I would need to do is choose “Page View” from the “Track Type” dropdown menu, then enter the variable with my Google Analytics account information. If I hadn’t created that variable ahead of time, I could make one now by clicking the dropdown menu under “Google Analytics Settings” and choosing “New Variable.”
If I wanted to make changes to the tag firing sequence or create a firing schedule, I could do that by clicking on the “Advanced Settings” option. Click outside the tag configuration window to go back to the previous screen.
Next, you’ll need to create at least one trigger. Click the “Triggering” box underneath “Tag Configuration” to get started. If you don’t have a previously created trigger to choose from in the list that opens up, click the + sign in the upper right corner of the window. This will bring up a new window where you’ll be asked to name your new trigger. Do that and click on the “Tag Configuration” box so see a list of trigger types. In my case, I’d choose “Page View.”
Since I only want my tag to fire on one page, I’d choose “Some Page Views,” then create a filter specifying that the page URL needs to equal the URL of my pricing page. If I had another filter to add, I could click the plus (+) button next to the filter to set one up. If I had created multiple filters for this tag and later decided to get rid of one of them, all I’d have to do is hit the subtract (–) button next to the filter in question. When you’re done, click outside the window to exit.
Once your tag and trigger have been configured, save it and you can either keep working by creating more tags or you can preview your tag and make sure it’s working correctly before publishing it.
Previewing, debugging, and publishing tags
GTM’s “Preview & Debug” mode lets you test tags before publication so that you can make sure everything is working correctly and that you won’t have any errors throwing off your data.
To enter “Preview & Debug,” click the “Preview” button in the upper right corner of the GTM dashboard and you’ll see an orange banner notifying you that you are now in “Preview” mode. Next, open the site you’re tagging. If you already have your site open in another tab, refresh the page and you should see a “Debug” panel at the bottom of your screen. (Don’t worry, visitors to your site won’t be able to see it.)
The “Debug” panel shows all sorts of detailed information about your tags, triggers, and data layer. On the left side of the panel is an event timeline summary, which outlines all the events that occur in the data layer. At a minimum, you should be seeing at least three events listed here: Page View, DOM Ready, and Window Loaded. It’s OK to see more than three events, but if any of those three are missing, there’s a problem that needs to be fixed.
When you click on any of the events in your timeline, you’ll see all the tags which are set to fire when that event occurs. Click on any of the tags to see more detailed information about its triggers, properties, and if there are any blocking triggers associated with it.
As you work in “Preview & Debug” mode, you’re the only one who can see the information about your tags. But let’s say you’re working as part of a team on a tagging project and you find an issue you want to bring to another person’s attention. There is a way to do that. Switch back over to your GTM dashboard and look at the orange banner. On the right, there’s a “Share Preview” button. Click on it and you’ll bring up a box where you can enter the URL of the page in question. This will generate a preview link you can use to send to another person.
If you’re having a hard time getting “Preview & Debug” to work correctly, Analytics Mania has a great guide to solving some of the most common reasons why this happens.
Even after a tag has been published, Google still makes it easy to go back and check to make sure there aren’t any problems. Google Tag Assistant is a free Chrome extension and once it’s installed, you can visit any page on your site and it will tell you if your tags are firing correctly or if there are any improvements that could be made. GTA uses a three color system to indicate its findings: green, blue, and red. Green means all of your tags are working, blue means GTA has suggestions for how a tag could be improved, and red means it’s not working.
Once it appears that all of your tags are firing correctly, you can go ahead and publish them. From the GTM dashboard, hit the “Submit” button in the upper right corner and you’ll be asked to review your changes. If everything looks OK, enter a name and description for your new container version and publish it.
When you publish changes in GTM, it creates a new version of your container. If there’s ever a problem and you have to revert to an earlier version of your container, all you have to do is click the “Versions” button at the top of the GTM dashboard, choose the version you’d like to revert to from the list, click “Action,” then “Publish.”
If you’re migrating your tags from another tag manager or from hard-coded tags on your site, Google advises setting up all of your tags in GTM, then removing your old tags all at once and publishing the GTM container with your new tags as quickly as possible. You might have a very small gap in your data collection, but there shouldn’t be any more issues after your new tags are live.
Workspaces, workspace changes, and activity history
If you have multiple people working on a tagging project at the same time, workspaces can help make life a little easier. Even if you’re not collaborating with others, sometimes having the option to create separate workspaces can still be very helpful.
In older versions of GTM, all edits had to be made in a common container draft. If one person or team finished adding tags before another person/team, they couldn’t publish their new tags without also publishing the other team’s tags-in-progress. But with workspaces, multiple users can work on tagging at the same time without interfering with each other’s work.
Each workspace uses the current published container version as a basis, but tags in each workspace can be edited, previewed, debugged, and even published independently from the tags in other workspaces. If you’re working with the free version of GTM, you can have up to three different workspaces, one default workspace and two others, but if you use Google Tag Manager 360, you can create an unlimited amount of workspaces.
When one workspace is published, it creates a new version of the container. If there are any other workspaces with unpublished changes saved in them, the user(s) working in those spaces will see a notice saying that they need to update the workspace. Updating the workspace syncs the changes in the container to their workspace. While it’s not required to do so to continue working, it’s generally best to stay on top of updates so that you’re not working with an outdated version of the container.
After syncing changes in a workspace, you’ll be notified if there are any conflicts which need to be resolved. If any conflicts exist, you’ll be asked to review them and either ignore the conflict or copy the change. When you copy the change, the field in question in your workspace will be overwritten with the information from the latest container version.
If necessary, you can set user permissions on workspaces to prevent users from making unwanted changes. For example, if you had a developer working on some really complicated custom tags, the developer might want to create a separate workspace to work in and limit the user permissions so that only they can make changes to it. This way, marketers will be able to go in and make changes without accidentally making changes to the custom tags.
Another great thing about GTM, particularly if you have more than one person working on tagging, is that it lets you see which changes were made, when they were made, and who made them. On the dashboard, you’ll see a Workspace Changes section, which outlines some of the most recent changes that have been made to tags and triggers. If mistakes any mistakes have been made, you can use the “Abandon Change” option to delete those changes. Beneath Workspace Changes, there’s Activity History, which shows all activity on a GTM account.
Additional resources
Google Tag Manager has a lot to offer, but learning how to use it in depth can be pretty overwhelming. This guide helped introduce you to the tool, but there’s still a lot more to learn if you want to use GTM to its full potential. LunaMetrics and Simo Ahava have written about GTM very extensively, so they’re excellent places to start if you have any questions or want to learn more. Of course, Google also has a lot of helpful information. Even if you’re not a developer, Google’s Tag Manager Guide for Developers is worth taking a look at since it does a great job of explaining some of the concepts related to GTM and has a lot of good information about how to use it. With all these resources, you should have all the information you need to get the most out of GTM.
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!
from The Moz Blog http://ift.tt/2BEt9HP
via IFTTT
Monday 29 January 2018
Variable Fonts with Jason Pamental
We've already hit you with a one-two punch of variable fonts today. Robin shared Richard Rutter's post on real-world usage of them. Ollie Williams introduced us to the in's-and-out's of using them on the web.
I figured we'd make it a trifecta and link up our discussion about variable fonts with Jason Pamental. Dave and I talk with Jason for an entire hour digging into the real story, possibilities, and future of all this variable fonts business. Don't miss his or Mandy Michael's demo Collections either.
Direct Link to Article — Permalink
Variable Fonts with Jason Pamental is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2nmovd6
via IFTTT
How to use variable fonts in the real world
Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that’s the technology that allows us to bundle multiple widths and weights into a single font file). Here’s the really exciting part though:
Two months ago browser support for variable fonts was only 7%, but as of this morning, support was at over 60%. This means font variations is a usable technology right now.
And the nifty thing is that there’s a relatively large number of variable fonts to experiment with, not only in browsers but also in desktop design apps, too:
Variable font capable software is already more pervasive than you might think. For example, the latest versions of Photoshop and Illustrator support them, and if you’re using macOS 10.13+ or iOS 11+ the system font San Francisco uses font variations extensively. That said, the availability of variable fonts for use is extremely limited. At the time of writing there are not really any commercial variable webfonts available, but there is a growing number of free and experimental variable webfonts, as showcased in the Axis Praxis playground.
Adobe also made a bunch of variable fonts available a while back, if you’re looking for more typefaces.
Direct Link to Article — Permalink
How to use variable fonts in the real world is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2rIhB6Q
via IFTTT
Google Questions and Answers: A Case Study
Posted by MiriamEllis
Ever since Google rolled out Questions and Answers in mid-2017, I’ve been trying to get a sense of its reception by consumers and brands. Initially restricted to Android Google Maps, this fascinating feature which enables local business owners and the public to answer consumer questions made it to desktop displays this past December, adding yet another data layer to knowledge panels and local finders.
As someone who has worked in Q&A forums for the majority of my digital marketing life, I took an immediate shine to the idea of Google Questions and Answers. Here’s a chance, I thought, for consumers and brands to take meaningful communication to a whole new level, exchanging requests, advice, and help so effortlessly. Here’s an opportunity for businesses to place answers to FAQs right upfront in the SERPs, while also capturing new data about consumer needs and desires. So cool!
But, so far, we seem to be getting off to a slow start. According to a recent, wide-scale GetFiveStars study, 25% of businesses now have questions waiting for them. I decided to hone in on San Francisco and look at 20 busy industries in that city to find out not just how many questions were being asked, but also how many answers were being given, and who was doing the answering. I broke down responders into three groups: Local Guides (LGs), random users (RUs), and owners (Os). I looked at the top 10 businesses ranking in the local finder for each industry:
| Industry | Number of Questions | Number of Answers | LGs | RUs | Os |
|---|---|---|---|---|---|
| Dentists | 1 | 0 | 0 | 0 | 0 |
| Plumbers | 2 | 0 | - | - | - |
| Chiropractors | 0 | - | - | - | - |
| Mexican Restaurants | 10 | 23 | 22 | 1 | - |
| Italian Restaurants | 15 | 20 | 19 | 1 | - |
| Chinese Restaurants | 16 | 53 | 49 | 4 | - |
| Car Dealers | 4 | 5 | 3 | 2 | - |
| Supermarkets | 7 | 27 | 24 | 3 | - |
| Clothing Stores | 4 | 1 | 1 | - | - |
| Florists | 1 | 0 | - | - | - |
| Hotels | 44 | 142 | 114 | 28 | - |
| Real Estate Agencies | 0 | - | - | - | - |
| General Contractors | 1 | 0 | - | - | - |
| Cell Phone Stores | 14 | 3 | 3 | - | - |
| Yoga Studios | 1 | 0 | - | - | - |
| Banks | 1 | 0 | - | - | - |
| Carpet Cleaning | 0 | - | - | - | - |
| Hair Salons | 1 | 0 | - | - | - |
| Locksmiths | 1 | 0 | - | - | - |
| Jewelry Stores | 0 | - | - | - | - |
Takeaways from the case study
Here are some patterns and oddities I noticed from looking at 123 questions and 274 answers:
- There are more than twice as many answers as questions. While many questions received no answers, others received five, ten, or more.
- The Owners column is completely blank. The local businesses I looked at in San Francisco are investing zero effort in answering Google Questions and Answers.
- Local Guides are doing the majority of the answering. Of the 274 answers provided, 232 came from users who have been qualified as Local Guides by Google. Why so lopsided? I suspect the answer lies in the fact that Google sends alerts to this group of users when questions get asked, and that they can earn 3 points per answer they give. Acquiring enough points gets you perks like 3 free months of Google Play Music and a 75% discount off Google Play Movies.
Unfortunately, what I’m seeing in Google Questions and Answers is that incentivizing replies is leading to a knowledge base of questionable quality. How helpful is it when a consumer asks a hotel if they have in-room hair dryers and 10 local guides jump on the bandwagon with “yep”? Worse yet, I saw quite a few local guides replying “I don’t know,” “maybe,” and even “you should call the business and ask.” Here and there, I saw genuinely helpful answers from the Local Guides, but my overall impression didn’t leave me feeling like I’d stumbled upon a new Google resource of matchless expertise. - Some members of the public seem to be confused about the use of this feature. I noticed people using the answer portion to thank people who replied to their query, rather than simply using the thumbs up widget.
Additionally, I saw people leaving reviews/statements, instead of questions:
And with a touch of exasperated irony: 
And to rant: 
- Some industries are clearly generating far more questions than others. Given how people love to talk about hotels and restaurants, I wasn’t surprised to see them topping the charts in sheer volume of questions and answers. What did surprise me was not seeing more questions being asked of businesses like yoga studios, florists, and hair salons; before I actually did the searches, I might have guessed that pleasant, “chatty” places like these would be receiving lots of queries.
Big brands everywhere are leaving Google Questions and Answers unanswered
I chose San Francisco for my case study because of its general reputation for being hip to new tech, but just in case my limited focus was presenting a false picture of how local businesses are managing this feature, I did some random searches for big brands around the state and around the country.
I found questions lacking owner answers for Whole Foods, Sephora, Taco Bell, Macy’s, Denny’s, Cracker Barrel, Target, and T-Mobile. As I looked around the nation, I noted that Walmart has cumulatively garnered thousands of questions with no brand responses.
But the hands-down winner for a single location lacking official answers is Google in Mountain View. 103 questions as of my lookup and nary an owner answer in sight. Alphabet might want to consider setting a more inspiring example with their own product… unless I’m misunderstanding their vision of how Google Questions and Answers is destined to be used.
Just what is the vision for Google Questions and Answers, I wonder?
As I said at the beginning of this post, it’s early days yet to predict ultimate outcomes. Yet, the current lay of the land for this feature has left me with more questions than answers:
- Does Google actually intend questions to be answered by brands, or by the public? From what I’ve seen, owners are largely unaware of or choosing to ignore this feature many months post-launch. As of writing this, businesses are only alerted about incoming questions if they open the Google Maps app on an Android phone or tablet. There is no desktop GMB dashboard section for the feature. It’s not a recipe for wide adoption. Google has always been a fan of a crowdsourcing approach to their data, so they may not be concerned, but that doesn’t mean your business shouldn’t be.
- What are the real-time expectations for this feature? I see many users asking questions that needed fast answers, like “are you open now?” while others might support lengthier response times, as in, “I’m planning a trip and want to know what I can walk to from your hotel.” For time-sensitive queries, how does Questions and Answers fit in with Google’s actual chat feature, Google Messaging, also rolled out last summer? Does Google envision different use cases for both features? I wonder if one of the two products will win out over time, while the other gets sunsetted.
- What are the real, current risks to brands of non-management? I applauded Mike Blumenthal’s smart suggestion of companies proactively populating the feature with known FAQs and providing expert answers, and I can also see the obvious potential for reputation damage if rants or spam are ignored. That being said, my limited exploration of San Francisco has left me wondering just how many people (companies or consumers) are actually paying attention in most industries. Google Knowledge Panels and the Local Finder pop-ups are nearing an information bloat point. Do you want to book something, look at reviews, live chat, see menus, find deals, get driving directions, make a call? Websites are built with multiple pages to cover all of these possible actions. Sticking them all in a 1” box may not equal the best UX I’ve ever seen, if discovery of features is our goal.
- What is the motivation for consumers to use the product? Personally, I’d be more inclined to just pick up the phone to ask any question to which I need a fast answer. I don’t have the confidence that if I queried Whole Foods in the AM as to whether they’ve gotten in organic avocados from California, there’d be a knowledge panel answer in time for my lunch. Further, some of the questions I’ve asked have received useless answers from the public, which seems like a waste of time for all parties. Maybe if the feature picks up momentum, this will change.
- Will increasing rates of questions = increasing rates of business responses? According to the GetFiveStars study linked to above, total numbers of questions for the 1700 locations they investigated nearly doubled between November–December of 2017. From my microscopic view of San Francisco, it doesn’t appear to me that the doubling effect also happened for owner answers. Time will tell, but for now, what I’m looking for is question volume reaching such a boiling point that owners feel obligated to jump into management, as they have with reviews. We’re not there yet, but if this feature is a Google keeper, we could get there.
So what should you be doing about Google Questions and Answers?
I’m a fan of early adoption where it makes sense. Speculatively, having an active Questions and Answers presence could end up as a ranking signal. We’ve already seen it theorized that use of another Google asset, Google Posts, may impact local pack rankings. Unquestionably, leaving it up to the public to answer questions about your business with varying degrees of accuracy carries the risk of losing leads and muddying your online presence to the detriment of reputation. If a customer asks if your location has wheelchair access and an unmotivated third party says “I don’t know,” when, in fact, your business is fully ADA-compliant, your lack of an answer becomes negative customer service. Because of this, ignoring the feature isn’t really an option. And, while I wouldn’t prioritize management of Questions and Answers over traditional Google-based reviews at this point, I would suggest:
- Do a branded search today and look at your knowledge panel to see if you’ve received any questions. If so, answer them in your best style, as helpfully as possible
- Spend half an hour this week translating your company’s 5 most common FAQs into Google Questions and Answers queries and then answering them. Be sure you’re logged into your company’s Google account when you reply, so that your message will be officially stamped with the word “owner.” Whether you proactively post your FAQs while logged into your business’ account is up to you. I think it’s more transparent to do so.
- If you’re finding this part of your Knowledge Panel isn’t getting any questions, checking it once a week is likely going to be enough for the present.
- If you happen to be marketing a business that is seeing some good Questions and Answers activity, and you have the bandwidth, I’d add checking this to the daily social media rounds you make for the purpose of reputation management. I would predict that if Google determines this feature is a keeper, they’ll eventually start sending email alerts when new queries come in, as they’re now doing with reviews, which should make things easier and minimize the risk of losing a customer with an immediate need. Need to go pro on management right now due to question volume? GetFiveStars just launched an incredibly useful Google Q&A monitoring feature, included in some of their ORM software packages. Looks like a winner!
- Do be on the lookout for spam inquiries and responses, and report them if they arise.
If you’re totally new to Google Questions and Answers, this simple infographic will get you going in a flash:
For further tips on using Google Questions and Answers like a pro, I recommend following GetFiveStars’ 3-part series on this topic.
My questions, your answers
My case study is small. Can you help expand our industry’s knowledge base by answering a few questions in the comments to add to the picture of the current rate of adoption/usefulness of Google’s Questions and Answers? Please, let me know:
- Have you asked a question using this feature?
- Did you receive an answer and was it helpful?
- Who answered? The business, a random user, a Local Guide?
- Have you come across any examples of business owners doing a good job answering questions?
- What are your thoughts on Google Questions and Answers? Is it a winner? Worth your time? Any tips?
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!
from The Moz Blog http://ift.tt/2GpXL3x
via IFTTT
Friday 26 January 2018
Why It Can Pay to Get Links from Domains that Don't Always Rank Highly - Whiteboard Friday
Posted by randfish
Contrary to popular belief, the top ranking pages aren't always the best targets for your link building efforts. There are good reasons to chase those links, sure, but there are also drawbacks — as well as some hidden alternatives you may not have considered trying. This Whiteboard Friday delves into the pros and cons of targeting high-ranking sites for links and why you should consider a link intersect strategy, targeting sites that rank for broader topics, and earning links from publications ranking beyond page one of the SERPs.
Click on the whiteboard image above to open a high-resolution version in a new tab!
Video Transcription
Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week we're chatting about why it may not actually pay to get links expressly or exclusively from the websites and pages that are ranking highly for your keywords. There's a bunch of reasons why behind this. There's a corollary to it, which is high-ranking websites may not always be the best link targets.
Are these the *best* links you can get to rank for "target keyword(s)"?
So okay, let's start with this question of when you're trying to rank for a target keyword, let's say you're trying to rank for "stylish sofas." You've decided you want to replace your couch, and you want something stylish. So you search for "stylish sofas." The results that come up, we're not talking about the paid results. That would be a mistake to try and get links from those. They're pretty commercially focused. They probably don't want to link to you, and I'm not sure it's all that valuable, necessarily, at least from an SEO perspective. But are these links, the ones that rank in the organic results top five, are they necessarily the best links you could possibly get? There are some reasons for and some reasons against.
In favor:
Let's talk about in favor of why these are good link targets. The first one is pretty simple and pretty obvious.
A. These pages get lots of real visitors interested in this topic who may click on/visit your site (if it's linked-to here)
These pages get a lot of search volume, get a lot of search visits from this query. If you're somewhere in this page, if my website is linked to here, that's actually a really nice thing. Maybe someone will click on the top result and then they'll find me and they'll click on it and they'll go to my page instead. That would be great. So if it's linked to there, you could get direct traffic from those pages, so nice link to have.
B. Google has put some trust/indication of authority in these pages and sites
Google has put some sort of trust and a signal of authority for this keyword by ranking it here. It's saying, "Hey, you know what? This top result and these top results are all highly relevant and authoritative for this particular query."
So those are absolutely true things, but I think they bias SEOs and link builders to think in terms of, oh, if I want to rank well for this, these are the only things I should be looking at or the first things I should be looking at or the best places to get links from.
Against:
Here's why that's not necessarily the case, so some points against.
A. Ranking is not actually an explicit signal from Google that these are the best quality links
By putting a page here, in the top of the results, Google is saying, "We, Google, believe that this page will do a great job of solving the searcher's query," not, "We, Google, know that if you get a link from here, you have a very good chance to rank for this keyword." That's not explicitly or implicitly said. It's not an implication. Google has never stated that publicly. I don't think it's necessarily the smartest thing to do in their ranking algorithm to have this recursive system that looks at who that already ranks is linking to someone else and replace them. That would be poor for Google's own user experience for a bunch of reasons.
B. Google and searchers expect that these pages that rank here are going to solve the searcher's query themselves (not force another click)
Not they're going to link to something that's going to solve the searcher's query, at least certainly not necessarily, and definitely that they're not going to force you to make another click. Google wants to rank pages here that solve the searcher's problem directly. So saying, "Oh, well, I don't think they do that and maybe they should link to me to solve this aspect of the problem," this is a spurious connection.
C. Of course, earning links from these pages, incredibly difficult
These people, especially if they're ranking for a commercial, non-branded query, like "stylish sofas," they really, really don't want to link to one of their competitors, to someone who's trying to actively outrank them. That would be pretty challenging.
I recognize that many times when link builders go about this, they look at, okay, this page is ranking. Let me see if I can find another page from this domain from which I can get a link. That's not terrible logic. That's a totally reasonable way to go about link building. But whether it's the best or the only one is what I'm going to challenge here. I don't think it is necessarily the best or only way that you should go about doing your link building for all these reasons we've just talked about.
Alternatively, links like these may be more achievable and provide more ranking value:
Now, what are the alternatives? You might be asking yourself, "Well, Rand, show me where should I be doing this if not from here?" I'm going to present a few alternatives. There's obviously an infinite number of link building tactics you could pursue, but I think some of the smarter ones would be to think about some alternatives like...
1. Sites and pages that link to multiple high-ranking targets
For example, if one and three and four are all linked to by SiteA.com, SiteA.com seems to carry, not necessarily for sure, it could be correlation and not causation, but it's certainly worth looking at as to whether Site A is relevant and provides high-quality links and could conceptually link to you and whether that's a good resource. I think that link intersect concept is a really good one to start with. In fact, I think, from a logic perspective, it makes more sense that sites and pages that tend to link to these top results probably provide more potential power to your ranking authority than just the pages that are already ranking.
2. Sites and pages that rank well for what I'd call broader keywords/broader topics related to the space you're in
So if it's "stylish sofas," you might look at keywords like, well, who's ranking for "interior design" or "interior design magazines" or "interior design events" or perhaps it's "decoration ideas." If I can find the people who are ranking for those sorts of things, that probably is going to say those are the types of places that will link out to other resources that have more specific targeting, like targeting "stylish sofas," and probably provide a lot of value there.
3. Influential publications and resources in the topic space that may not be doing good keyword targeting or SEO
I like going and trying to find influential publications and resources, that are in the topic space, that might not actually be doing good keyword targeting or good SEO, which means it's hard to use Google to find them. You may find them ranking on page two, page three, or page four. You may need to do some other types of research, like look on Instagram and see what companies or what publications are using these hashtags and have lots of followers in this interior design or decoration or furniture space.
From there, that will lead you to influential publications in the space that maybe have lots of readership, lots of engagement on social channels or on their website, but haven't done a particularly great job in Google. Those influential publications, I think Google is doing a very good job of identifying, "Hey, wait a minute. Here's a bunch of publications that are in important in space X and they are all linking to this website, which is doing a good job of targeting these keywords. So, therefore, that's who we should potentially rank."
So hopefully, this Whiteboard Friday will help you to expand your link building opportunities and also to recognize why the top ranking pages might not always be and certainly aren't necessarily the best link targets.
Thanks everyone. We'll see you again next week for another edition of Whiteboard Friday. 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!
from The Moz Blog http://ift.tt/2rGrwtA
via IFTTT
Thursday 25 January 2018
Bend any Website’s CSS to Your Will With Stylish or Stylebot
As a self-professed CSS nerd, I take it upon myself to inject my own CSS onto websites when I need to to fix bugs or just fiddle them up to my liking.
This is a post that details how I do that using the Stylish and Stylebot browser extensions.
Direct Link to Article — Permalink
Bend any Website’s CSS to Your Will With Stylish or Stylebot is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2n7verw
via IFTTT
New Features Coming Soon in Safari
Here’s a great thread by Ricky Mondello that outlines all of the nifty new features in the latest Safari across macOS and iOS. Some of my favorites include the ability to replace gifs with mp4s, the Payment Request API and support for the Web App Manifest.
Direct Link to Article — Permalink
New Features Coming Soon in Safari is a post from CSS-Tricks
from CSS-Tricks https://twitter.com/rmondello/status/956236581987172354
via IFTTT
Be Watchful: PHP And WordPress Functions That Can Make Your Site Insecure
from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2rDXKFU
via IFTTT
Using Gradients In User Experience Design
from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2n8FKia
via IFTTT
Wednesday 24 January 2018
Tuesday 23 January 2018
Creating Vue.js Component Instances Programmatically
This article assumes basic understanding of Vue.js framework and how to create components in it. If you are new to Vue, then this CSS-Tricks series is a good place to start.
I have been on a Vue.js project that required the ability to create components programmatically. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translate to JavaScript code.
Normally if you are working with the recommended Single File Component style, you would have a Button component like so:
<template>
<button :class="type"><slot /></button>
</template>
<script>
export default {
name: 'Button',
props: [ 'type' ],
}
</script>
To use it in another component, all you have to do is import the Button component and insert its tag in the template:
<template>
<Button type="primary">Click me!</Button>
</template>
<script>
import Button from 'Button.vue'
export default {
name: 'App',
components: { Button }
}
</script>
In my case, I don't know which component to insert in the template and also where to insert it. This information is only available at runtime. So I needed a way to dynamically create component instance for any passed component and insert it in the DOM, during runtime.
Creating the Instance
The very first idea I had to create a dynamic instance of a given component was to pass it to new and it would give me the actual instance. But if you notice carefully the script block in any of the above component code, they are all exporting a simple object, and not a class (constructor function). If I do this:
import Button from 'Button.vue'
var instance = new Button()
...it fails. We need a class. Or, in simple terms, a constructor function. The way to do that is to pass the component object to Vue.extend to create a subclass of the Vue constructor. Now we can create an instance out of it with the new keyword:
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
Hooray! Step 1 cleared! Now we need to insert it in the DOM.
Inserting in DOM
Every Vue instance has a method called $mount on it which mounts the component instance on the element you pass to it (i.e. it replaces the passed element with the component instance). This is not a behavior I wanted. I wanted to insert my component instances inside some DOM element. There is a way to do that too. From the official docs:
If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.
That’s what I did:
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)
There are a couple of things to note in the code above.
First, $refs is the recommended way to get reference to a DOM element in Vue.js. You specify an attribute on the DOM element you want to reference (<div ref="container"></div> in this case) and then that element is available on the set key on component's $refs property.
Second, to get the native DOM element reference from a Vue component instance, you can use the $el property.
Passing Props to the Instance
Next, I had to pass some props to my Button instance. Specifically, the type prop. The Vue constructor function accepts an options object that we can use to pass in and initialize related things. For passing props, there is a key called propsData which we can use, like so:
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass({
propsData: { type: 'primary' }
})
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)
We are almost done, with one final remaining bit. With the normal template method, we used button like: <Button>Click me!</Button>;. We simply wrote the inner text between the tags and it rendered inside the final button tag with the help of slot. But now how do we pass it?
Setting the Slot
If you have used slots in Vue.js, you might be aware that the slots are accessible on any instance on the $slots property. And if named slots are not used, then slots are available on $slots.default as an array. That is the exact key we'll modify on the instance to set our button's inner text. Remember, this needs to be done before mounting the instance. Note that in our case we just put a simple string in the slot because that is all we required. But you can pass more complex DOM to it in form for Virtual nodes or VNode using the createElement function. You can read about creating Virtual nodes in the Vue.js documentation. Thanks to a Vue core team member, Rahul, for suggesting this technique.
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass({
propsData: { type: 'primary' }
})
instance.$slots.default = [ 'Click me!' ]
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)
Final Demo
Hope you liked this article. Follow me on Twitter where I share more articles and side projects of mine.
Creating Vue.js Component Instances Programmatically is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2n33IKM
via IFTTT
Work-Life Balance: Tips From The Community
from Articles on Smashing Magazine — For Web Designers And Developers http://ift.tt/2DEwITk
via IFTTT
Why Search Agencies Should Embrace the Adjacency of Email Marketing
Posted by davidmihm
As someone who’s spent virtually his entire career in local search, I’m by no means an early proponent of email. But in my interactions at marketing conferences, studies of industry research, and social media conversations, I get the feeling that many of my peers are even further down the adoption curve than I’ve been.
With this post, I encourage you to take a hard look at email marketing for yourselves, or an even harder look if you’ve already done so. If you’ve focused exclusively on offering SEO and SEM services to clients in the past, I hope I’ll convince you that email should be a natural and profitable complement to those offerings.
And if you’re a local business reading this post, I hope many of these points convince you to take a look at email marketing yourselves!
Making the case for email
High ROI
With a return on investment (ROI) of 44:1, marketers consistently rate email as the top-performing channel. According to Campaign Monitor, that ROI has actually increased since 2015, and it’s particularly true for B2B companies. Despite the supposed unpopularity of email among millennials, it remains far and away the most-preferred channel by which to receive communication from a business.
Just plain cheap
The fact that email’s so cheap helps the denominator of that 44:1 stat a bunch. Mailchimp is free up to 2,000 subscribers, as are MailerLite and SendinBlue, and many other providers offer plans under $10/month depending on your number of subscribers.
It’s also cheap in terms of time cost. Unlike social media where daily or even hourly presence performs best, email allows you to duck in and duck out as you have time.
As far as the numerator, average open rates far exceed social media reach on most platforms. And even if they don’t open, ⅓ of people report purchasing based on an email they received from a brand (!). Search provides better purchase intent, but the top-of-mind awareness and referral potential from email is unmatched.
Makes other channels more effective
Gathering customer email addresses is essential for other critical forms of local business marketing already — you need an email address to ask for a review, build lookalike audiences, and make customer intelligence solutions like FullContact most effective.
Actually offering something of value, whether that’s a discount code, loyalty program, whitepaper, or newsletter subscription, increases the odds of earning that email address for all of those purposes.
Last best option?
Frankly, the number of organic digital channels available to small businesses is shrinking. Facebook’s latest announcement signals a tough road ahead there for businesses without the budget to Boost posts, and Google’s expansion of its Local Service Ad program to verticals and locales across the United States in the next couple of years seems inevitable to me. Now is the time to start building an email program as these monetization pressures intensify.
Why agencies should offer email
Your customers know it works.
Local businesses might be more aware of email’s potency than some of the agencies that are serving them. Email consistently rates among the top three marketing channels in industry surveys by the Local Search Association, StreetFight, Clutch, and more.
At the very least, email requires barely any client education. Unlike the black box of SEO or the complexity of PPC, by and large, small businesses inherently understand email marketing. They know they should be sending emails to their customers, but many of them just aren’t yet doing it, or are doing it poorly.
It’s a concrete deliverable.
Unlike so much of the behind-the-scenes work that leads to success in SEO, clients can actually see an email campaign delivered to their inbox, as well as the results of that campaign: every major Email Service Provider tracks opens and clicks by default.
It leverages existing offerings.
I already mentioned some of the ways that email marketing complements other channels above. But it can tie in even more closely to an agency’s existing content offering: many of you are already developing full content calendars, or at the very least social content.
<pitch>(For those clients whom you’re helping with social media, their newsletter can be built using Tidings with no additional effort on your part.)</pitch>
Building email into your client content strategy can help their content reach a deeper audience, and possibly even a different audience.
It’s predictable.
Though you could argue that the Gmail and Apple Mail interface configurations are algorithms of a kind, generally speaking, email marketing is not subject to wild algorithmic changes or inexplicable ranking fluctuations.
And unlike Google’s unrealistic link building axiom that great content will naturally attract inbound links, great content actually does naturally attract more subscribers and more customers as they receive forwarded emails.
You can expand it over time.
Unlike SEO for local businesses, which generally includes relatively easy wins up front and gets progressively harder to deliver the same value over time, email marketing offers numerous opportunities to expand the scope of your engagement with a client.
Beyond fulfilling the emails themselves, there are plenty of other email-related services to offer, including managing and optimizing list sign-up, welcome emails and drip campaigns, A/B testing subject lines and content, and ongoing customer intelligence.
Tactical ingredients for success with email
Use a reputable Email Service Provider.
Running an email marketing program through Gmail or Outlook is an easy way to get your primary address blacklisted. You also won’t have access to open rate or click rate, nor an easy way to automate signups onto specific lists or segments.
Be consistent.
Setting expectations for your subscribers and then following through on those expectations is a particularly important practice for email newsletters, but also holds true for explicitly commercial emails and automated emails.
You should be generally consistent with the day on which you send weekly specials, appointment reminders, or service follow-ups. Consistency helps form a habit among your subscribers.
Consistency also applies to branding. It’s fine to A/B test subject lines and content types over time, but don’t shoot yourself in the foot from a brand perspective by designing every email you send from scratch. Leave that kind of advanced development to big brands with full in-house email teams.
The other reason to be consistent is that designing for email is really, really difficult — a lesson I learned the hard way last year prior to launching Tidings. Complex email clients like Microsoft Outlook use their own markup languages to render emails, and older email clients can’t interpret a lot of modern HTML or CSS declarations.
Choose a mobile-first template.
Make sure your layout renders well on phones, since that’s where more than 2/3 of email gets opened. Two- or three-column layouts that force pinching and zooming on mobile devices are a no-no, and at this point, most subscribers are used to scrolling a bit to see content.
As long as your template reflects your brand accurately, the content of that layout is far more important than its design. Look no further than the simple email layouts chosen by some of the most successful companies in their respective industries, including Amazon, Kayak, and Fast Company.
Pick a layout that’s proven to work on phones and stick with it.
Include an email signup button or form prominently on your website.
It’s become a best practice to include social icons in the header and/or footer of your website. But there’s an obvious icon missing from so many sites!
An email icon should be the first one in the lineup, since it’s the channel where your audience is most likely to see your content.
Also consider using Privy or Mailmunch to embed a signup banner or popover on your website with minimal code.
The specific place of newsletters
Plenty of people way smarter than me are on the newsletter bandwagon (and joined it much earlier than I did). Moz has been sending a popular “Top 10” newsletter for years, Kick Point sends an excellent weekly synopsis, and StreetFight puts out a great daily roundup, just to name a few. As a subscriber, those companies are always top-of-mind for me as thought leaders with their fingers on the pulse of digital marketing.
But newsletters work far beyond the digital marketing industry, too.
Sam Dolnick, the man in charge of the New York Times’ digital initiatives, puts a lot of stock in newsletters as a cornerstone channel, calling them “a lo-fi way to form a deep relationship with readers.”
I love that description. I think of a newsletter as a more personalized social channel. In the ideal world it’s halfway between a 1:1 email and a broadcast on Facebook or Twitter.
Granted, a newsletter may not be right for every local business, and it’s far from the only kind of email marketing you should be doing. But it’s also one of the easiest ways to get started with email marketing, and as Sam Dolnick said, an easy-to-understand way to start building relationships with customers.
For more newsletter best practices, this ancient (1992!) article actually covers print newsletters but almost all of its advice applies equally well to digital versions!
A great option or a strategic imperative?
Facebook’s ongoing reduction in organic visibility, Google’s ongoing evolution of the local SERP, and the shift to voice search will combine to create an existential threat to agencies that serve smaller-budget local businesses over the next 2–3 years.
Agencies simply can’t charge the margin to place paid ads that they can charge for organic work, particularly as Google and Facebook do a better and better job of optimizing low-budget campaigns. More ads, more Knowledge Panels, and more voice searches mean fewer organic winners at Google than ever before (though because overall search volume won’t decline, the winners will win bigger than ever).
Basic SEO blocking-and-tackling such as site architecture, title tags, and citation building will always be important services, but their impact for local businesses has declined over the past decade, due to algorithmic sophistication, increased competition, and decreased organic real estate.
To grow or even maintain your client base, it’ll be critical for you as an agency to offer additional services that are just as effective and scalable as these techniques were a decade ago.
As a concrete, high-margin, high-ROI deliverable, email should be a centerpiece of those additional services. And if it just doesn’t feel like something you’re ready to take on right now, Tidings is happy to handle your referrals :D!
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!
from The Moz Blog http://ift.tt/2DvtoGM
via IFTTT
Passkeys: What the Heck and Why?
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022 , gained support in Saf...
-
Posted by Dr-Pete On December 3rd, Google announced that they were rolling out the latest Core Update . Initially, the bulk of the impact s...
-
Posted by MiriamEllis Image credit: Abraham Williams If you’re marketing big brands with hundreds or thousands of locations, are you cert...
