I didn’t realize this until it was far too late, but one of the biggest mistakes that’s made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions.
Is there a conversation about the color of your buttons that’s taking place? Great! Everyone needs a consistent set of colors so that users know what to click and so that designers don’t have to choose from a smorgasbord of options. But the tough question at the beginning isn’t what colors we should choose and when to pick them, but rather this: how many people are in that dang room?
How many people are making decisions about your design system?
Are three people talking about the buttons in your design system? Wonderful. Are there 20? Woof! That’s a serious problem because it shows that far too much energy is being spent on the wrong things; it’s nothing short of mismanagement, in fact.
(This is why I reckon design systems aren’t about design or even about systems. It’s actually about managing people and their time, attention, and focus. But that’s a rant for another day.)
Anyway, the hard call that someone on a large design team will have to make at some point or another is deciding which people need to leave the room. And that sounds really mean, I get it, but it’s the kind thing to do. If everyone has opinions then, first, nothing will get done and, second, you’ll end up causing rifts when some opinions are shunned and others are heard.
It was thoroughly shocking to me when I started my first big design systems project that the more people that joined any given meeting, the less effective we were. It was like the IQ of the room dropped by ten thousand points. And I was also shocked that the hardest problem wasn’t about building the system; learning about TypeScript, making sure components were accessible, doing audits, etc. Instead it was this: the whole too-many-people-in-a-meeting thing.
Everyone cannot possibly be allowed to voice their opinions about every tiny detail of the UI and at some point someone needs to come in and draw a line as to who is allowed to care about what things. That’s not to say that people aren’t allowed to have feedback — feedback should always be welcome! — but one of the main advantages of having a design systems team is to offset all those decisions onto someone else.
I was listening to this livestream of Jason Fried and DHH the other day and they mention that:
If you want to be even less sure about something, all you have to do is ask one more person what their take is.
That’s definitely the feeling I had when too many people were talking about buttons or borders or anything, really. This sort of hopeless feeling that change just isn’t possible. And that you can’t make a decision about something because you need to massage the egos of everyone in the room.
This also reminds me of this great post by Paul Ford about what the web is:
“Why wasn’t I consulted,” which I abbreviate as WWIC, is the fundamental question of the web. It is the rule from which other rules are derived. Humans have a fundamental need to be consulted, engaged, to exercise their knowledge (and thus power), and no other medium that came before has been able to tap into that as effectively.
Working in a big organization is shocking to newcomers because of this, as suddenly everyone has to be consulted to make the smallest decision. And the more people you have to consult to get something done, the more bureaucracy exists within that company. In short: design systems cannot be effective in bureaucratic organizations. Trust me, I’ve tried.
Anyway, the way to fight that is by drawing that line, by kicking people out of meetings that don’t need to be there. It’s really the kindest thing to do because it will make your design system much faster to build, and less stressful for you.
Going with that title instead of the classic developer clickbait version Max used. ;)
We should ban margin from our components.
Don’t use margin?! This thing I’ve been doing my entire career and don’t have any particular problems with?!
Well, that’s not exactly Max’s point. The point is that any particular component doesn’t necessarily know what context it is in, so it also doesn’t know what kind of spacing is necessary around it. His solution? Leave it to a parent component.
I don’t have any particular problem with that. Then again, constructing things can sometimes feel overwhelming when you’ve got a route component wrapping a query component wrapping a styled component wrapping a state machine component wrapping a spacer component wrapping some kind of semantic template. If that sounds like a lot, I bet a lot of y’all’s JavaScript-built codebases nest much deeper than that already.
In this world of component-driven front-ends, we need to make sure we don’t end up with such thick soup we can’t reason through it.
This also reminds me of a bold prediction from Adam Argyle, that the use of margin will decline entirely as gap is used more heavily in all-flexbox-and-grid situations.
The first “A” in the Jamstack stands for “APIs” and is a key contributor to what makes working with static sites so powerful. APIs give developers the freedom to offload complexity and provide avenues for including dynamic functionality to an otherwise static site. Often, accessing an API requires validating the authenticity of a request. This frequently manifests in the form of authentication (auth) and can be done either client side or server side depending on the service used and the task being accomplished.
Given the vast spectrum of protocols available, APIs differ in their individual auth implementations. These auth protocols and implementation intricacies add an additional challenge when integrating APIs into a Jamstack site. Thankfully, there is a method to this madness. Every protocol can be mapped to a specific use case and implementing auth is a matter of understanding this.
To illustrate this best, let’s dive into the various protocols and the scenarios that they’re best suited for.
Summon the protocols
OAuth 2.0 is the general standard by which authentication today follows. OAuth is a fairly flexible authorization framework that constitutes a series of grants defining the relationship between a client and an API endpoint. In an OAuth flow, a client application requests an access token from an authorization endpoint and uses that to sign a request to an API endpoint.
There are four main grant types — authorization code, implicit flow, resource owner credential, and client credentials. We’ll look at each one individually.
Authorization Code Grant
Of all OAuth grant types, the Authorization Code Grant is likely the most common one. Primarily used to obtain an access token to authorize API requests after a user explicitly grants permission, this grant flow follows a two-step process.
First, the user is directed to a consent screen aka the authorization server where they grant the service restricted access to their personal account and data.
Once permission has been granted, the next step is to retrieve an access token from the authentication server which can then be used to authenticate the request to the API endpoint.
Compared to other grant types, the Authorization Code Grant has an extra layer of security with the added step of asking a user for explicit authorization. This multi-step code exchange means that the access token is never exposed and is always sent via a secure backchannel between an application and auth server. In this way, attackers can’t easily steal an access token by intercepting a request. Google-owned services, like Gmail and Google Calendar, utilize this authorization code flow to access personal content from a user’s account. If you’d like to dig into this workflow more, check out this blog post to learn more.
Implicit Grant
The Implicit Grant is akin to the Authorization Code Grant with a noticeable difference: instead of having a user grant permission to retrieve an authorization code that is then exchanged for an access token, an access token is returned immediately via the the fragment (hash) part of the redirect URL (a.k.a. the front channel).
With the reduced step of an authorization code, the Implicit Grant flow carries the risk of exposing tokens. The token, by virtue of being embedded directly into the URL (and logged to the browser history), is easily accessible if the redirect is ever intercepted.
Despite its vulnerabilities, the Implicit Grant can be useful for user-agent-based clients like Single Page Applications. Since both application code and storage is easily accessed in client-side rendered applications, there is no safe way to keep client secrets secure. The implicit flow is the logical workaround to this by providing applications a quick and easy way to authenticate a user on the client side. It is also a valid means to navigate CORS issues, especially when using a third-party auth server that doesn’t support cross-origin requests. Because of the inherent risks of exposed tokens with this approach, it’s important to note that access tokens in Implicit Flow tend to be short-lived and refresh tokens are never issued. As a result, this flow may require logging in for every request to a privileged resource.
Resource Owner Credential
In the case of the Resource Owner Credential Grant, resource owners send their username and password credentials to the auth server, which then sends back an access token with an optional refresh token. Since resource owner credentials are visible in the auth exchange between client application and authorization server, a trust relationship must exist between resource owner and client application. Though evidently less secure than other grant types, the Resource Owner Credential grant yields an excellent user experience for first party clients. This grant flow is most suitable in cases where the application is highly privileged or when working within a device’s operating system. This authorization flow is often used when other flows are not viable.
Client Credential
The Client Credentials Grant type is used primarily when clients need to obtain an access token outside of the context of a user. This is suitable for machine to machine authentication when a user’s explicit permission cannot be guaranteed for every access to a protected resource. CLIs, and services running in the back end are instances when this grant type comes in handy. Instead of relying on user login, a Client ID and Secret are passed along to obtain a token which can then be used to authenticate an API request.
Typically, in the Client Credential grant, a service account is established through which the application operates and makes API calls. This way, users are not directly involved and applications can still continue to authenticate requests. This workflow is fairly common in situations where applications want access to their own data, e.g. Analytics, rather than to specific user data.
Conclusion
With its reliance on third party services for complex functionality, a well-architected authentication solution is crucial to maintain the security of Jamstack sites. APIs, being the predominant way to exchange data in the Jamstack, are a big part of that. We looked at four different methods for authenticating API requests, each with its benefits and impacts on user experience.
We mentioned at the start that these four are the main forms of authentication that are used to request data from an API. There are plenty of other types as well, which are nicely outlined on oauth.net. The website as a whole is an excellent deep-dive on not only the auth types available, but the OAuth framework as a whole.
Do you prefer one method over another? Do you have an example in use you can point to? Share in the comments!
Here’s something I’d never heard of before: Display-P3 support in CSS Color Module Level 4 spec. This is a new color profile supported by certain displays and it introduces a much wider range of colors that we can choose from.
Right now the syntax looks something like this in CSS:
It looks weird, huh? Over on the WebKit blog, Nikita Vasilyev shows how we can see these new colors in Safari’s DevTools:
Back in 2016, Dean Jackson wrote about improving color on the web and why Apple is interested in this much wider color gamut. The general idea is that more accurate colors make for a better and more vibrant user experience.
Also, it looks like all this is only available in Safari right now.
This is a stressful time to say the least. Everything is impacted by COVID-19 in some way, including our work.
Once we’ve taken time to acknowledge how lucky we are to work in digital, it’s time to assess if our current content strategy needs any adjusting based on current events.
Many marketers are finding themselves:
Wanting to write about something topical
Needing to add more content to their calendars
At a loss for how to contribute at a time like this
So, I spent hours using Ubersuggest, putting myself in the shoes of various Americans. I tested a variety of keywords to see which ones have exhibited a trend during the COVID-19 outbreak and might warrant some attention from content marketers.
The results below are for the term “Coronavirus,” so for the other keywords identified, I looked for a noticeable spike in the months of January, February, and March to make sure they matched up accordingly.
My findings reveal potential topic ideas for several primary industries. See if any provide inspiration for high-quality content you can create in the coming months.
Travel
I’ll start with one of the industries hardest hit by this pandemic: travel. This was a tough one, as more and more people are understandably opting for driving, walking, or biking to get around, and are no longer relying on air travel or public transportation as trips and work get cancelled. However, I identified a few key opportunities.
Travel insurance
While it had an increase in the summer months, interest in the topic of travel insurance has risen back up again. Perhaps those who have to travel want to make sure they’re covered if they get sick, or maybe those who canceled travel want to see what their insurance covers.
In either case, people are looking for information about travel insurance and how it can help them.
Train travel
It seems that train travel falls into an ambiguous category that people are asking about. I’m not here to say whether it’s safe or not (as that is obviously not my area of expertise). As we’ve all heard, it’s best not to travel at all, but perhaps your brand can offer some clarity in this regard and offer alternatives.
Virtual travel
For everyone stuck at home but still grappling with wanderlust, how can they still explore from the couch? Virtual travel seems to be gaining popularity as more people find themselves stuck at home.
Work and education
In some cases, companies and schools have gone from in-person to virtual nearly overnight. It’s been a huge shakeup across the board, and relevant topics are trending accordingly.
Homeschooling
Many kids are home from school, and their parents are suddenly and unexpectedly in the position of teaching them. They’re sure to have a lot of questions! Note how the search level now is the same as the summer months, when kids are also home.
Free online courses
With all plans essentially cancelled as a result of “social distancing,” people are looking for ways to spend their time at home. If you offer online courses, consider amplifying them and explaining their value. If you don’t, consider whether it makes sense to create one.
Working from home tips
Executives and staff alike are looking for advice on how to improve productivity while working from home, perhaps for the first time. Consider creating content with suggestions on how to set up a home office or maintain a schedule while dealing with at-home distractions.
How to stay focused
Whether it’s because people are working or studying at home for the first time or because they’re anxious and distracted by the developing events, more and more people are struggling to stay focused. Can your brand offer anything by way of motivation or tools for focus and efficiency?
Entertainment
Everyone’s at home either trying to distract themselves from the stressful reality of the world or looking to cure their boredom. As a result, online entertainment is on the rise. Can you offer the entertainment itself, or maybe guides on how to choose the best entertainment?
Free streaming
We’re stuck with digital for now, and people are looking for new media to consume. What can your brand provide? Also trending: “cheap digital games” and “best multiplayer video games”.
Learn to play piano online
Some folks are using their newfound free time to work on hobbies and skills they haven’t had the chance to pursue in the past. Can your brand teach them anything?
Best online shopping deals
This is particularly interesting to me. Keyword rates for this term are as high as they were over the holidays. I’m wondering if people who still have disposable income will pass the time online shopping, while others who are more financially impacted will cut back, leaving things at a net equal?
Finance
Aside from the health and safety of the population, finance cuts most to the emotional core of this pandemic. Many people are laid off or can’t work, and financial worry is skyrocketing. What can you do to provide guidance or relief?
Unemployment
Many people are unexpectedly looking to file unemployment, and plenty of those people have no idea how to do it, how much money they’ll get, or how to get that information. Informative guides and tips could be hugely helpful in this area.
Budgeting tips
With layoffs and pay cuts, people are scrambling to find new ways to save money. Also trending with the same graph results: “How to invest money wisely” -- most likely because of the fluctuating stock market. Can you provide insight?
Relationships
When tensions run high, it’s important to pay attention to all the relationships in your life, meaning several subtopics in this vertical can be of vital importance.
At home date ideas
Couples stuck inside are looking for ways to keep up their romantic lives. Does it make sense for your brand to provide dating or relationships tips at an unprecedented time like this?
Reconnecting with friends
Physically, we’re all practicing social distancing, but we shouldn’t be virtually disconnecting from the people in our lives. It looks like people are wondering if they should take advantage of this free time to reconnect with old friends. Can your brand offer advice on the topic, or possibly a forum for those connections to happen?
How to make your parents understand how you feel
There are a lot of jokes going around about Gen Zs and Millennials trying to convince their Boomer parents to stay inside. But the jokes are for a reason: Many people are having tough conversations for the first time with family that they aren’t entirely sure how to navigate. Could you provide some helpful tips to approach these conversations?
Health and fitness
Health is, unsurprisingly, a vital category right now. Rather than getting into some of the most obvious things (like hand washing, hand sanitizer, etc.), I’ll try to cover some other popular topics that might be useful.
How to get health insurance
Similar to “unemployment” above, this is probably a response to people losing their jobs who are now unsure how they can get health insurance. What other concerns might these people have that you can help with?
Indoor workouts
People might have to stay home, but they’re also trying to stay healthy. How can you assist them in this endeavor?
Also trending: “how to start running”, indicating that solitary outdoor exercise is key, too.
How to strengthen immune system
People are concerned about their health and want to do whatever they can to protect themselves from COVID-19. However, only dive into this subject matter if your brand is a legitimate medical expert. False information can damage lives.
Also trending: “healthy diet”.
Journaling
Don’t forget about mental health, which is also being affected by the pandemic. People are stressed, anxious, worried, and, well, scared. Does it make sense for your brand to provide guidance on how to emotionally or mentally approach this day and age?
Also trending: “meditation”.
Home and family
In many cases, entire families are at home, every day, for the first time since the kids were old enough to be in school. That can lead to some interesting challenges.
Natural cleaning products
In an effort to keep the house clean, people may be looking for guidance on the best type of supplies to use. Could you make a list of the most effective products?
Also trending: “organic cleaning products”.
Family recipes
Everyone’s at home for all their meals and trying to avoid restaurants, so they probably need more recipes in their arsenal. Maybe your employees have favorite family recipes you could share with your readers.
Games to play with kids
Parents are used to this over the summer, but not when it’s sprung on them for an indefinite period of time. How can your brand give them ideas and tools to entertain their kids while they’re home?
Also trending: “family conversation starters”.
Conclusion
To round out this study, I want to show the results for “uplifting stories.”
If you’re not responsible for delivering breaking news or important COVID-19 updates, look for opportunities to amplify joy, gratitude, hope, or any other positive emotion. People are looking for health and safety updates, but they’re looking for inspiration, too.
Consider how any of these topics might apply to your brand, do some further exploring in the Moz Keyword Explorer, and focus on creating a content plan you feel confident in.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!
from The Moz Blog https://ift.tt/2X2wDm1
via IFTTT
Laura Kalbag wrote How to read RSS in 2020. This would be a nice place to send someone curious about RSS: what it is, what it’s for, and how you can start using it as a reader. I like this callout, too:
Sometimes the content is just an excerpt, encouraging you to read the rest of the content on the original site. I think this defeats the point of providing RSS, where a big benefit is that the reader can customise how the posts display in their feed reader to improve their reading experience.
I absolutely love Khoi Vinh’s writing, but have long been surprised that his feed is truncated. Barely even excerpts. WHY KHOI WHY?!
Laura linked up lire as a reader, and I’d never seen that one before. It’s apparently got good screenreader support.
Louis Lazaris wrote Front-end RSS Feeds (2020 Edition). It has OPML files that are in big groups of feeds that you’ll be subscribed to once their imported into a feed reader (some have that as an option). There is also just a big list too.
I haven’t had a chance to play with Unread 2 yet for iOS, but I love the idea that it “automatically determines which feeds contain only article summaries” and goes and fetches the rest of the content from the site for you.
This is so cool. I mean, GraphQL is already cool. It’s very satisfying to write an understandable-looking query for whatever you want and then use that data in templates.
But what if you didn’t have to write the query at all? What if you just wrote the templates pretending you already had the data, and the query built itself? I haven’t even tried this project yet but it feels like how things should be.
Reminds me of how Perch CMS doesn’t ask you to model data up front. You build page templates, and the CMS creates data entry pages based on the data you need in the template.
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.
These five properties will get you up and running:
display (for the grid value)
grid-template-columns
grid-gap
grid-auto-flow
grid-column / grid-row
Here’s how simple it is. Let's assume you want to implement the following layout for small, medium and large screens.
If we apply a few baseline styles, this is what we get, which is already sufficient for small screens:
Now we can get into the grid properties!
Use display: grid to divide the page into independent layout containers
First, we need to determine which parts of the page should be aligned with grid layouts. It is possible to define a single grid layout for the whole page. However, for websites with a very complex structure (e.g. news websites), handling a large grid quickly becomes complicated to wrangle. In this case, I recommend breaking things down into several, independent grid containers.
Like this:
Where do you draw the line between what is and isn’t a grid? Here’s a personal rule of thumb I follow:
If the layout in a particular part of the page does not fit into the grid of an adjacent or surrounding part of the page, make that part its own grid container.
I have drawn the grid lines into the page section with the class .container-main in the following image You may notice that the section with the .container-inner class from the markup does not fit exactly into the grid of rows.
Here’s another possible layout where the small sections fit into the surrounding grid if a finer line raster is chosen. A separate grid container is not absolutely necessary here.
To kick this off, let’s .container-main into a grid container. This is the basic building block for CSS Grid — turning an element into a grid container with the display property:
.container-main {
display: grid;
}
We'll want to do the same with our other grid containers:
Use grid-template-columns to define the required columns
Next, we’re going to define the number of columns we need in each grid container and how wide those columns should be. My guideline for the number of columns: use the smallest common multiple of the maximum number of columns required for the different screen sizes.
How does that work? The .container-main element has a total of two columns on medium-sized screens. If we take that and multiply it by the number of columns on large screens (three), we get a total of six columns.
We can do the same for our navigation, the .container-inner element. There are three columns on medium-sized screens, which we multiple by one column on large screens to get a total of three columns.
The .container-nav element provides no number of columns. In this case, the grid system should automatically adjust the number of columns to the number of menu elements. It’s common to add or remove items in a navigation, and it’d be great if it responded accordingly, which is something grid can help us with a little later on.
OK, so we defined the number of columns for each grid container. Let’s use the grid-template-columns property to set those into place. But, first a couple of minor details:
The grid-template-columns property is only used on the grid container. In other words, you won’t find it being used (at least correctly) on a grid item inside the container.
The property accepts a bunch of different values that both define the number of columns and how wide they should be. The one we’re interested in here is the fractional (fr) unit. I’d highly suggest checking out Robin’s overview because it’s unique to grid and does an amazing job doing calculations to decide how grid elements fit inside a grid container.
We need six equal-width columns in .container-main. We can write that like this:
By default, grid uses all the space it has in a grid container to fit in grid items. Having elements flush next to one another might be a design requirement, but not for the particular layout we’re making. We want some breathing room between things!
We have the grid-gap property for that. Again, this is a property that’s just for grid containers and what it does is create vertical and horizontal spacing between grid items. It’s actually a shorthand property that combines the vertical spacing powers of grid-row-gap and horizontal spacing powers of grid-column-gap. It’s handy that we’re able to break things out like that but, in times like this where we’re working with the same amount of spacing in each direction, the shorthand grid-gap is much nicer to write.
We want 20px of space between grid items in .container-main, 10px of space in .container-inner, and 5px of space in .container-nav. No problem! All it takes is a one-liner on each grid container.
Use grid-column and grid-row to determine the size of the individual grid items
Now it is time to put the layout into the shape we want it!
First is the grid-column property, which allows us to extend a grid item across n columns, where n is the number of columns to span. If you’re thinking this sounds an awful lot like the rowspan attribute that lets us extend cells across multiple rows in HTML tables, you wouldn’t be wrong.
It looks like this when we use it on a grid .item in our .container-main element, and on the .inner-item elements in .container-inner:
What we’re saying here is that each item span six rows in our main container and three rows in our inner container — which is the total number of columns in each container.
An interesting thing about CSS Grid is that we are able to name the lines of the grid. They come with implicit names out of the box but naming them is a powerful way to distinguish between the starting and ending lines for each column on the track.
We can change the number of columns and rows the items should span at different breakpoints:
Using grid-auto-flow to control the placing of the elements
CSS Grid places elements one row after the other. This is why the result in our example looks like this at the moment:
A column-by-column placement can be achieved by setting the grid-auto-flow property to column (row is the default value). Our layout will profit from column-wise placement in two cases. First, it makes our menu items finally appear in a horizontal orientation. Secondly, it brings the elements of the container class into the desired grouping.
The final result
Conclusion: More or less specification?
The grid system allows us to work under the motto, “make as many specifications as necessary, but as few as possible.” We’ve only covered a few of the specifications necessary to turn elements into a CSS grid container and the items inside it into grid items for the sake of showing just how little you need to know to build even complex layouts with CSS Grid.
CSS Grid supports additional use cases where:
We want to make even fewer specifications in order to instead rely more on automatic positioning.
We want to make even more specifications in order to determine more details of the resulting layout.
If the first case applies, then it’s worth considering the following additional grid options:
When creating the grid with grid-template-columns, you can have the grid system automatically determine the width of individual columns with the auto keyword or adapt it to the existing content with the settings min-content, max-content, or fit-content.
You can let the grid system automatically determine the number of required columns with the help of repeat, auto-fill, auto-fit, and minmax. Even media queries can become redundant and these tools help make things flexible without adding more media queries.
If the second case applies, CSS Grid offers even more settings options for you:
You can explicitly specify the width of the columns in the unit of your choice (e.g. px or %) using the grid-template-columns property. In addition, the property grid-template-rows is available to define the number and width of rows, should there be a specific number of them.
You can also define specific column or row numbers for positioning as values for grid-column and grid-row (or use the properties grid-column-start, grid-column-end, grid-row-start, or grid-row-end).
And we haven’t even gotten into CSS Grid alignment! Still, the fact that we can accomplish so much without even broaching that topic shows how powerful CSS Grid is.
Local businesses know better than any other model what it means to fully participate in community life. You are the good neighbors who are there to serve, inspire, and sustain the people and traditions that make your town a unique and enjoyable place to call home.
As we explore this topic of what local businesses can do during the COVID-19 pandemic, I want to honor all that you have always done to take care of your community as a local business owner or marketer. Thank you.
In this article, you will find local SEO tips that could make a difference for your business in the coming weeks, innovative resources for support, advice from my own tight-knit community of some of the world’s best local SEOs, and some serious thinking about building a better local future.
Adhere to all regulations
First and foremost, start each day with a review of both local and national news to be sure you are complying with the evolving regulations for your city, county, and country. Policies designed to mitigate the harm of COVID-19 vary widely from region to region, and your business must keep informed of which forms of service you are allowed to offer in this dynamic scenario.
And, while social media can be a great connector within your community at any time, beware of misinformation and, sadly, scams in the days ahead. Get your news from sources you trust, and if you are not certain about interpreting a guideline, directly contact local authorities. This article does not take the place of laws and regulations specific to your community.
Communicate abundantly
The most helpful thing any local business can do right now, whether it’s deemed an essential or non-essential service, is to provide accurate information to its community. There are three key places to do this:
Google My Business
“More than ever, your Google Business Profile is a critical communication nexus with your customers”. —Mike Blumenthal, GatherUp
Local businesses know just how big a role Google plays as intermediary between brands and the public. This remains true during this difficult time however, Google’s local product is not running at full strength. Joy Hawkins’ article for Local University on March 23 details the limited support for or complete discontinuation of Google Q&As, posts, descriptions, reviews, and owner responses. It’s an evolving scenario, with local SEOs reporting different outcomes each day. For example, some practitioners have been able to get some, but not all, Google posts to publish.
As of writing this, there are four fields you can utilize to communicate current information to customers via GMB, but please be aware that some edits may take several days to go into effect:
Name
Google is allowing businesses to edit their business name field to reflect that they are offering curbside service, takeout, and delivery. For example, if your current name is “John’s Grill”, you are allowed to temporarily change your name to “John’s Grill — Delivery Available”.
Phone number
If regulations are keeping you at home but you still want customers to be able to reach you on your home or cell phone for information, update your work answering machine to reflect the changes and edit your GMB phone number to the appropriate new number.
Hours of operation
The discussion on how best to show that your business either has no hours or limited new hours is ongoing. I believe the best route for the present is to use Google’s method of setting special hours. This option should be especially useful for multi-location enterprises who can set special hours via the API.
Be advised, however, that there are some instances of agencies setting special hours for clients and then clients receiving emails from Google asking if the business has closed. This can alarm those clients. However, to date, it appears that when Google receives responses to this prompt that yes, the business is closed, they simply put a message about this on the listing rather than remove the listing entirely.
On March 25, Google implemented a “temporarily closed” button inside the “Info” tab of the GMB dashboard, as reported by Joy Hawkins. Utilizing this button may temporarily decrease your rankings, but you will be able to remove the label in the future and I strongly hope (but cannot guarantee) that this will remove any effects of suppression. I recommend using this button if it applies to your business because we must put safety first over any other consideration.
COVID-19 update posts
Google has newly created a Google posts type that you’ll see as an option in your GMB dashboard. While other post types have been published sporadically, I am seeing examples of the COVID-19 Update posts going live. Try to fit as much information as you can about the changed status of your business into one of these posts.
In addition to the edits you make to your GMB listing, update your most visible local business listings on other platforms to the best of your ability, including on:
Bing: A “Temporarily closed” business status is available in the Bing Places dashboard. This is currently not available in the API.
Yelp: Yelp has introduced a new field called “temporarily closed”. This is meant to be used by businesses which are or will be closed (but not on a permanent basis) due to the COVID-19 outbreak. Businesses need to indicate the “end date” for when this business status will end. Given the uncertainty surrounding timelines, Yelp is allowing users to provide an “estimate” for the end date which they can always update later. Special opening hours can be added on Yelp itself, too. Neither field is available in the API.
Website
Google My Business may be experiencing support issues right now, but thank goodness you still have full control of your website as a home base for conveying important information to the public. Here’s a quick checklist of suggested items to update on your site as soon as you can:
Put a site wide banner on all pages of the website with key information such as “temporarily closed”, “drive-up service available 9-5 Monday - Friday” or “storefront closed but we can still ship to you.”
Provide the most complete information about how your business has been affected by COVID-19, and detail any services that remain available to customers.
Edit location landing pages in bulk or individually to reflect closures, new hours, and new temporary offers.
Be sure hours of operation are accurate everywhere they are mentioned on the website, including the homepage, contact page, about page, and landing pages.
If your main contact phone number has changed due to the situation, update that number everywhere it exists on the website. Don’t overlook headers, footers, or sidebars as places your contact info may be.
If you have a blog, use it to keep the public updated about the availability of products and services.
Be sure your website contains highly visible links to any social media platforms you are using to provide updated information.
It would be a worthy public service right now to create new content about local resources in your community for all kinds of basic needs.
Social media and email
“Make it clear what you're doing, such as things like home delivery or curbside pickup. And mention it EVERYWHERE. The companies that are being successful with this are telling people non-stop how they can still support them. Additionally, don't be afraid to reach out to people who have supported you via social media in the past and ask them to mention what you're doing.” —Dana DiTomaso, Kick Point
Whether your customers’ social community is Facebook, Twitter, Instagram, YouTube, or another platform, there has never been a more vital time to make use of the instant communication these sites provide. It was Fred Rogers who famously said that in times of crisis, we should “look for the helpers.” People will be looking to your brand for help and, also, seeking ways that they can help, too.
If you can make the time to utilize social media to highlight not just your own services, but the services you discover are being provided by other businesses in your city, you will be strengthening your community. Ask your followers and customers to amplify information that can make life safer or better right now.
And, of course, email is one of the best tools presently at your disposal to message your entire base about changed conditions and special offers. My best practice advice for the present is to be sure you’re only communicating what is truly necessary. I’ve seen some examples of brands (which shall remain nameless) exploiting COVID-19 for senseless self-promotion instead of putting customers’ concerns and needs first. Don’t go that route. Be a helper!
Beyond your local business listing, websites, social media platforms, and email, don’t overlook offline media for making further, helpful informational contributions. Call into local radio shows and get in touch with local newspapers if you have facts or offers that can help the public.
Operate as fully as you can
“Find out what support is being made available for you at [the] government level, tap into this as soon as you can — it's likely there will be a lot of paperwork and many hoops through which you'll need to jump.” —Claire Carlile, Claire Carlile Marketing
While the social safety net differs widely from country to country, research any offers of support being made to your business and make use of them to remain as operational as possible for the duration of this pandemic. Here are six adjustments your business should carefully consider to determine whether implementation is possible:
1. Fulfill essentials
If your business meets local, state, or federal regulations that enable it to continue operating because it’s deemed “essential”, here are the ways different business models are adapting to current conditions:
Some healthcare appointments can be handled via phone or virtual meetings, and some medical facilities are offering drive-up testing.
Drivethrough, delivery, and curbside pickup are enabling some brands to offer takeout meals, groceries, prescriptions, and other necessary goods to customers.
Supermarkets and grocery stores without built-in delivery fleets are contracting with third parties for this service.
Farms and ranches can offer honor system roadside stands to allow customers to access fresh produce, dairy products, and meats with proper social distancing.
Companies that care for vulnerable populations, banking, laundry, and fuel can implement and communicate the extra steps they are taking to adhere to sanitation guidelines for the safety of customers and staff.
Brands and organizations that donate goods and services to fulfill essential needs are taking an active role in community support, too.
2. Evaluate e-commerce
If your local business already has an e-commerce component on its website, you’re many steps ahead in being well set up to keep selling via delivery. If you’ve not yet implemented any form of online selling, investigate the following options:
If you have a credit card processing machine, the most basic solution is to take orders over the phone and then ship them, allow curbside pickup, or deliver them.
If you lack a credit card processing service, PayPal invoicing can work in a pinch.
If your site is built on WordPress and you’re quite comfortable with that platform, Moz’s own Sha Menz highly recommends the ease of the WooCommerce plugin for getting online shopping set up with PayPal as a built-in payment option. It allows easy setup of flat rate or free shipping and local pickup options. WooCommerce automatically sends order confirmation emails to both owner and customer and even supports creation of discount coupons.
Pointy is a simple device that lets you scan product barcodes and have them catalogued online. Read my 2019 interview with the company’s CEO and determine whether Pointy plus shipping could be a solution to keep you in business in the coming months.
In my very large family, one relative has transitioned her yoga studio to online classes, another is offering secure online psychotherapy appointments, and another is instructing his orchestra on the web. While nothing can replace in-person relationships, virtual meetings are the next-best-thing and could keep many business models operating at a significant level, despite the pandemic. Check out these resources:
I especially want to highlight the exceptional job Zoom is doing in building out an entire section of resources for how to conduct business virtually, whether you are a healthcare professional, an educator, or are managing employees who have transitioned to working from home.
4. Use downtime for education
If COVID-19 has somewhat or completely paused your business, it’s my strong hope that there will be better days ahead for you. If, like so many people, you find yourself with much more time on your hands than usual, consider using it to come out of this period of crisis with new business knowledge. Please make use of this list of resources, and I want to give special thanks to my friend, Claire Carlile, for contributing several of these suggestions:
Moz is now offering free access to Moz Academy. Sign up for free courses to increase your SEO and local SEO education.
Here’s an amazing Search Starter Pack freelancers can sign up for to get access to tools and services in the coming months.
Begin working towards a stronger local future
“I would say generally it's critical for business owners to connect with one another. To the extent they can join or form groups for support or to share ideas, they should. This is a terrible and scary time but there are also potential opportunities that may emerge with creative thinking. The 'silver lining', if there is one here, is the opportunity to reexamine business processes, try new things and think — out of necessity — very creatively about how to move forward. Employees are also a great source of ideas and inspiration.” —Greg Sterling, Search Engine Land
I’d like to close with some positive thinking. Local SEO isn’t just a career for me — it’s a personal belief system that well-resourced communities are the strongest. Every community, town, and city shares roughly the same needs, which we might depict like this:
In this simple chart, we see the framework of a functional, prepared, and healthy society. We see a plan for covering the basic needs of human existence, the cooperation required to run a stable community, contributive roles everyone can play to support life and culture, and relief from inevitable disasters. We see regenerative land and water stewardship, an abundance of skilled educators, medical professionals, artisans, and a peaceful platform for full human expression.
COVID-19 marks the third major disaster my community has lived through in three years. The pandemic and California’s wildfires have taught me to think about the areas in which my county is self-sustaining, and areas in which we are unprepared to take care of one another in both good times and bad. While state and national governments bear a serious responsibility for the well-being of citizens, my genuine belief as a local SEO is that local communities should be doing all they can to self-fulfill as many data points on the chart above as possible.
While it’s said that necessity is the mother of invention, and it certainly makes sense that the present moment would be driving us to invent new solutions to keep our communities safe and well, I find models for sane growth in the work others have already contributed. For me, these are sources of serious inspiration:
Look at the policies of other countries with a higher index of human happiness than my own. For example, I am a great admirer of Norway’s law of allemannsrett which permits all residents to responsibly roam and camp in most of the country, and more importantly, to harvest natural foods like mushrooms and berries. In my community, most land is behind fences, and even though I know which plants are edible, I can’t access most of them. Given current grocery store shortages, this concept deserves local re-thinking.
Study the Economic Bill of Rights US President Franklin Delano Roosevelt introduced but didn’t live to see passed. Had this been implemented, my local community would not now be suffering from a shortage of medical providers and denial of medical care, a shortage of nearby farms for complete nutrition, homelessness and unaffordable housing, and a widespread lack of education and essential skills. From a purely commercial standpoint, FDR’s bill could also have prevented the collapse of “Main St.”, which local search marketers have been fighting every day to reverse.
Join organizations like the American Independent Local Business Alliance which exist to build more resilient local communities via methods like the Buy Local movement and community education. I strongly encourage you to check in with AMIBA for guidance in these times.
Other models and examples may personally inspire you, but I share my friend Greg Sterling’s opinion: now is the time to bring creativity to bear, to connect with fellow local business owners and community members, and to begin planning a more realistic and livable future.
For now, you will have to make those connections virtually, but the goal is to come out of this time of crisis with a determination to make local living more sustainable for everyone. You can start with asking very basic questions like: Where is the nearest farm, and how many people can it feed? What do we need to do to attract more doctors and nurses to this town? Which facilities could be converted here to produce soap, or bathroom tissue, or medical supplies?
I don’t want to downplay the challenge of forward-thinking in a time of disruption, but this I know from being a gardener: new seeds sprout best where the earth is disturbed. You have only to visit the margins of new roads being laid to see how digging is quickly followed by verdant crops of fresh seedlings. Humanity needs to dig deep right now for its best solutions to serious challenges, and this can begin right where you are, locally.
Please allow me to wish many better days ahead to you, your business, and your community, and to work by your side to build a stronger local future.
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 https://ift.tt/2Rbe0bR
via IFTTT
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:
Something like this pencil stroke would require many tens of thousands of different elements. Basically each little blob of gray in that image would be separately defined.
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is the edges of those children that matter, not some fixed snapping distance.
Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely important for websites that contain critical information for public safety. As Max writes:
In cases of emergency, many organizations need a quick way to publish critical information. But exisiting (CMS) websites are often unable to handle sudden spikes in traffic.
What’s so special about this boilerplate? Well, it does smart stuff like:
provides one-click deployment via Netlify to get off the ground quickly
The example website that Max built with this boilerplate is shockingly fast and I would go one step further to argue that all websites should feel as fast as this, not just websites that are useful in an emergency.
I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals… somehow goofed and added 33 SECONDS to their page load.
This stuff is hard even when you care a lot. The 33 seconds came from font preloading rather than the one-line wonder of font-display.
I also care about making fast websites, but mine aren't winning any speed awards because I'll take practical and maintainable over peak performance any day. (Sorry, world)
Building local pages in any amount can be a painful task. It's hard to strike the right mix of on-topic content, expertise, and location, and the temptation to take shortcuts has always been tempered by the fact that good, unique content is almost impossible to scale.
In this week's edition of Whiteboard Friday, Russ Jones shares his favorite white-hat technique using natural language generation to create local pages to your heart's content.
Click on the whiteboard image above to open a high-resolution version in a new tab!
Video Transcription
Hey, folks, this is Russ Jones here with Moz again to talk to you about important search engine optimization issues. Today I'm going to talk about one of my favorite techniques, something that I invented several years ago for a particular client and has just become more and more and more important over the years.
Using natural language generation to create hyper-local content
I call this using natural language generation to create hyper-local content. Now I know that there's a bunch of long words in there. Some of you are familiar with them, some of you are not.
So let me just kind of give you the scenario, which is probably one you've been familiar with at some point or another. Imagine you have a new client and that client has something like 18,000 locations across the United States.
Then you're told by Google you need to make unique content. Now, of course, it doesn't have to be 18,000. Even 100 locations can be difficult, not just to create unique content but to create uniquely valuable content that has some sort of relevance to that particular location.
So what I want to do today is talk through one particular methodology that uses natural language generation in order to create these types of pages at scale.
What is natural language generation?
Now there might be a couple of questions that we need to just go ahead and get off of our plates at the beginning. So first, what is natural language generation? Well, natural language generation was actually originated for the purpose of generating weather warnings. You've actually probably seen this 100,000 times.
Whenever there's like a thunderstorm or let's say high wind warning or something, you've seen on the bottom of a television, if you're older like me, or you've gotten one on your cellphone and it says the National Weather Service has issued some sort of warning about some sort of weather alert that's dangerous and you need to take cover.
Well, the language that you see there is generated by a machine. It takes into account all of the data that they've arrived at regarding the weather, and then they put it into sentences that humans automatically understand. It's sort of like Mad Libs, but a lot more technical in the sense that what comes out of it, instead of being funny or silly, is actually really useful information.
That's our goal here. We want to use natural language generation to produce local pages for a business that has information that is very useful.
Isn't that black hat?
Now the question we almost always get or I at least almost always get is: Is this black hat? One of the things that we're not supposed to do is just auto-generate content.
So I'm going to take a moment towards the end to discuss exactly how we differentiate this type of content creation from just the standard, Mad Libs-style, plugging in different city words into content generation and what we're doing here. What we're doing here is providing uniquely valuable content to our customers, and because of that it passes the test of being quality content.
Let's look at an example
So let's do this. Let's talk about probably what I believe to be the easiest methodology, and I call this the Google Trends method.
1. Choose items to compare
So let's step back for a second and talk about this business that has 18,000 locations. Now what do we know about this business? Well, businesses have a couple of things that are in common regardless of what industry they're in.
They either have like products or services, and those products and services might have styles or flavors or toppings, just all sorts of things that you can compare about the different items and services that they offer. Therein lies our opportunity to produce unique content across almost any region in the United States.
The tool we're going to use to accomplish that is Google Trends. So the first step that you're going to do is you're going to take this client, and in this case I'm going to just say it's a pizza chain, for example, and we're going to identify the items that we might want to compare. In this case, I would probably choose toppings for example.
So we would be interested in pepperoni and sausage and anchovies and God forbid pineapple, just all sorts of different types of toppings that might differ from region to region, from city to city, and from location to location in terms of demand. So then what we'll do is we'll go straight to Google Trends.
The best part about Google Trends is that they're not just providing information at a national level. You can narrow it down to city level, state level, or even in some cases to ZIP Code level, and because of this it allows us to collect hyper-local information about this particular category of services or products.
So, for example, this is actually a comparison of the demand for pepperoni versus mushroom versus sausage toppings in Seattle right now. So most people, when people are Googling for pizza, would be searching for pepperoni.
2. Collect data by location
So what you would do is you would take all of the different locations and you would collect this type of information about them. So you would know that, for example, here there is probably about 2.5 times more interest in pepperoni than there is in sausage pizza. Well, that's not going to be the same in every city and in every state. In fact, if you choose a lot of different toppings, you'll find all sorts of things, not just the comparison of how much people order them or want them, but perhaps how things have changed over time.
For example, perhaps pepperoni has become less popular. If you were to look in certain cities, that probably is the case as vegetarian and veganism has increased. Well, the cool thing about natural language generation is that we can automatically extract out those kinds of unique relationships and then use that as data to inform the content that we end up putting on the pages on our site.
So, for example, let's say we took Seattle. The system would automatically be able to identify these different types of relationships. Let's say we know that pepperoni is the most popular. It might also be able to identify that let's say anchovies have gone out of fashion on pizzas. Almost nobody wants them anymore.
Something of that sort. But what's happening is we're slowly but surely coming up with these trends and data points that are interesting and useful for people who are about to order pizza. For example, if you're going to throw a party for 50 people and you don't know what they want, you can either do what everybody does pretty much, which is let's say one-third pepperoni, one-third plain, and one-third veggie, which is kind of the standard if you're like throwing a birthday party or something.
But if you landed on the Pizza Hut page or the Domino's page and it told you that in the city where you live people actually really like this particular topping, then you might actually make a better decision about what you're going to order. So we're actually providing useful information.
3. Generate text
So this is where we're talking about generating the text from the trends and the data that we've grabbed from all of the locales.
Find local trends
Now the first step, of course, is just looking at local trends. But local trends aren't the only place we can look. We can go beyond that. For example, we can compare it to other locations. So it might be just as interesting that in Seattle people really like mushroom as a topping or something of that sort.
Compare to other locations
But it would also be really interesting to see if the toppings that are preferred, for example, in Chicago, where Chicago style pizza rules, versus New York are different. That would be something that would be interesting and could be automatically drawn out by natural language generation. Then finally, another thing that people tend to miss in trying to implement this solution is they think that they have to compare everything at once.
Choose subset of items
That's not the way you would do it. What you would do is you would choose the most interesting insights in each situation. Now we could get technical about how that might be accomplished. For example, we might say, okay, we can look at trends. Well, if all of the trends are flat, then we're probably not going to choose that information. But we see that the relationship between one topping and another topping in this city is exceptionally different compared to other cities, well, that might be what gets selected.
4. Human review
Now here's where the question comes in about white hat versus black hat. So we've got this local page, and now we've generated all of this textual content about what people want on a pizza in that particular town or city. We need to make sure that this content is actually quality. That's where the final step comes in, which is just human review.
In my opinion, auto-generated content, as long as it is useful and valuable and has gone through the hands of a human editor who has identified that that's true, is every bit as good as if that human editor had just looked up that same data point and wrote the same sentences.
So I think in this case, especially when we're talking about providing data to such a diverse set of locales across the country, that it makes sense to take advantage of technology in a way that allows us to generate content and also allows us to serve the user the best possible and the most relevant content that we can.
So I hope that you will take this, spend some time looking up natural language generation, and ultimately be able to build much better local pages than you ever have before. Thanks.
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 https://ift.tt/3brBz7K
via IFTTT
