Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.
Again, this is an experimental feature. Not only does that mean it’s still in progress, but it means you’ll have to enable it to start using it in DevTools.
Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
Head over to DevTool Settings (? or Function+F1 on Mac; ? or F1 on Windows)
Click open the Experiments section
Enable the CSS Overview option
And, oh hey, look at that! We get a new “CSS Overview” tab in the DevTools menu tray when the settings are closed. Make sure it’s not hidden in the overflow menu if you’re not seeing it.
Lovely color palette you got there, Mr. Coyier. 😍
Notice that the report is broken out into a number of sections, including Colors, Font info, Unused declarations and Media queries. That’s a lot of information available in a small amount of space right at our fingertips.
This is pretty nifty though, huh? I love that tools like this are starting to move into the browser. Think about how this can help us not only as front-enders but also how we collaborate with designers. Like, a designer can crack this open and start checking our work to make sure everything from the color palette to the font stack are all in tact.
The title of this Sara Soueidan article speaks to me. I’m a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I’m less interested in how that is done and more interested in just seeing that conceptual approach used in some fashion.
Sara details an approach where components don’t have too much styling by default, but have CSS custom properties applied to them that are ready to take values should you choose to set them.
For each pattern, I’ve found myself modifying the same properties whenever I needed to use it — like the font, colors (text, background, border), box shadow, spacing, etc. So I figured it would be useful and time-saving if I created variables for those properties, define those variables in the ‘root’ of the component, and ‘pass in’ the values for these variables when I use the pattern as I need. This way I can customize or theme the component by changing the property values in one rule set, instead of having to jump between multiple ones to do so.
One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context.
<div class="span-12"></div> <!-- we want this for small screens -->
<div class="span-6"></div> <!-- we want this for medium screens -->
<div class="span-4"></div> <!-- we want this for large screens -->
It’s common to use a prefix to target each breakpoint:
This works well until we start adding multiple classes. That’s when it becomes difficult to keep a track what relates to what and where to add, remove. or change stuff.
These aren’t lost of classes but a whitespace-separated list of attributes we can select using [attribute~="value"], where ~= requires the exact word to be found in the attribute value in order to match.
It may be a bit odd-looking but I think translating atomic classes to attributes is fairly straightforward (e.g. .sm-span-1 becomes [sm~="span-1"]). Plus, attribute selectors have the same specificity as classes, so we lose nothing there. And, unlike classes, attributes can be written without escaping special characters, like /+.:?.
That’s all! Again, this is merely an idea that aims to make switching declarations in media queries easier to write, read and manage. It’s definitely not a proposal to do away with classes or anything like that.
I’ve been working with Aquent Gymnasium to produce a series of five short tutorial videos, which have been launching over the course of this past week. Since the last video just went live, I’m thrilled to share the whole list with you:
Over the years, I’ve often referred to our link building work as “campaigns”, which isn't wrong, but isn’t completely right, either. I think that as an industry we need to alter our mindset to focus on what link building should be: an ongoing, integrated, business-as-usual activity.
Link building processes that work for brands now and that will continue to work in the future need to sit closer to the rest of the business. This means tighter integration with other disciplines, or at the very least, acknowledgment that link building isn’t a siloed activity or dark art like it used to be.
In this post, I’d like to propose how we should think about link building and share some ways to make it more sustainable, efficient, and effective.
The problem with campaigns
I want to start by being super clear on something, and I make no apologies for reiterating this throughout this post: Link building campaigns aren’t a bad thing. My core point is that they should be thought of as one piece of the puzzle — not something we should focus all of our time and attention on.
“Campaign”, in the context of link building or digital PR, implies a few things:
It has a start and an end point
It is a one-off activity
It is about a specific “thing”, whether that be a topic, product, or piece of content
There is nothing wrong with these as such, but link building shouldn’t be thought about only in these ways. If link building is seen as a series of one-off activities, or about a specific thing and with a start and end point, it’s never going to be integrated into a business the way it should be. It will always sit around the edges of marketing activity and not benefit the bottom line as much as it could.
Even if you are reading this thinking that you’re okay because you have lots of campaigns lined up — maybe one a week, one a month, or one a quarter — the core problems still exist, but at a more zoomed-out level.
As digital marketers, we want link building to be:
Taken seriously as a tactic which helps support SEO within a business
Integrated with other areas to allow for efficiency and wider benefits
Fit into the overarching digital strategy of a business
Have measurable, consistent results
Let me demonstrate the final point with the graph below, which is the monthly performance of an Aira client on a 6-8 week campaign schedule:
On the face of it, this looks pretty good. We built over 200 links in 12 months, and were ahead of target in terms of individual campaign objectives.
This graph is the reality of link building campaign execution. We were honest and up-front with clients about the results, and those peaks and dips are perfectly normal.
But it could (and should) be a lot better.
Let’s take a quick step back.
An uncomfortable truth
The uncomfortable truth for many link builders is that a business shouldn’t really need to worry about link building as an intentional, proactive activity. Instead, links should be a natural consequence of a fantastic product or service which is marketed and branded well.
However, companies in this position are the exception rather than the rule, which means that as link builders, we still have a job!
I’d argue that there are only a relatively small number of businesses that truly don’t need to worry about link building. Think of the likes of well-established and popular brands like Apple, McDonalds, Amazon and Coca-Cola. These companies truly are the exception, rather than the rule.
Trying to be an exception and aiming to reach the nirvana of never actively worrying about link building should absolutely be your goal. Putting efforts into areas such as product development, customer service, content strategy, and brand building will all pay dividends when it comes to link building. But they all take time and you need to generate organic traffic sooner rather than later in order to grow the business.
Link building, as part of your larger integrated and robust digital strategy can get you there quicker. I worry that businesses often leave money on the table by waiting for that nirvana to come. They may indeed get there, but could they have gotten there sooner?
The question then becomes, how do they move quicker toward that ideal state, and what does link building look like in the interim? Running campaigns can help for sure, but you’re not really building upward as quickly as you could be.
This is the crux of my worry and problem with running link building campaigns and allowing our strategies to lean on them too heavily:
When the campaigns stop, so will the links.
I know, I know — Aira launches campaigns all the time.
Yes, we have launched many, many link building campaigns at Aira over the years and have been nominated for campaign-specific awards for some of them. I’ve even written about them many times. Campaign-led link building has a very valuable part to play in the world of link building, but we need to reframe our thinking and move away from campaigns as the primary way to generate links to a business.
Driving the right behaviors
It’s not just about results. It’s about driving the right behaviors within businesses, too.
Putting link building in the corner of a one-off project or campaign-led activity is not going to encourage habitual link building. It will drive behaviors and thinking which you don’t really want, such as:
Link building is a line item which can be switched on and off
Internal processes have to bend or break in order to accommodate link building
There is little desire or motivation for wider team members to learn about what link builders do
Link building is an isolated activity with no integration
Link building results aren’t consistent (you get those huge peaks and dips in performance, which can bring into question the marketing spend you’re being given)
Working under these pressures is not going to make your life easy, nor are you going to do the best job you possibly can.
I worry that as an industry, we’ve become too focused on launching campaign after campaign and have gotten too far away from effecting change within organizations through our work.
As digital marketers, we are trying to influence behaviors. Ultimately, it’s about the behaviors of customers, but before that point it’s about influencing stakeholders — whether you’re an agency or in-house SEO, our first job is to get things done. In order to do that, link building needs to be thought of as a business-as-usual (BAU) activity. Campaigns have a place, but are part of a much, much bigger picture. Link building needs to get to the point where it’s not “special” to build links to a content piece, it’s just done. If we can get there, not only will we accelerate the businesses we work with toward link building nirvana, but we will add much, much more value to them in the meantime.
Link building as a BAU activity
It is my firm belief that in order to mature as an industry, and specifically as an activity, link building needs to be understood much more than it currently is. It still suffers from the issues that plagued SEO for many years in the early days when it truly was a dark art and we were figuring it out as we went along.
Don’t get me wrong, we’ve come a long way, especially since April 2012 (can you really believe it was over eight years ago?!) when link building began evolving into a content-led practice thanks in part to the Penguin update.
But we still have further to go.
We need to get out of the corner of “launching a campaign” and train our bosses and clients to ask questions like, “How can link building help here?” and “Is there a link building opportunity in this activity?”.
A case study
The best way I can explain this shift in thinking is to give you a real example of how we’ve done it at Aira. I can’t give you the exact client, but I can give you an overview of the journey we’ve been on with them, supporting an SEO team that is relentlessly committed to getting things done — the perfect partners for such an initiative.
I should also point out that this has never been easy. We are on this journey with a number of our clients, and some of them are barely into it. The examples here show what happens when you get it right — but it does take time, and the reality is that it may never happen for some businesses.
Where it started
One campaign. That was it. One shot to get links and show the client what we could do.
We failed.
This was back in 2016. We were lucky in that the client trusted the process and understood why things had gone wrong on this occasion. So, they gave us another chance and this time did a great job.
From there, the project grew and grew to the point where we were launching scaled campaigns like clockwork and getting links consistently. All was well.
Then I was asked a question by someone on the client’s team:
“What’s the evolution of our link building?”
Whilst link building is never far from my mind, I didn’t have a mental model to answer this straight away with any conviction — particularly given what I knew about this client and their industry. I took some time to think about it and consolidate a bunch of observations and opinions I’d actually had for years, but never really made concrete.
Side note: It’s often hard to take a step back from the day-to-day of what you’re doing and think about the bigger picture or the future. It’s even more difficult when you’re growing a business and generally doing good work. It can be hard to justify “rocking the boat” when things are going well, but I’ve learned that you need to find time for this reflection. For me at that point in time, it took a direct question from my client to force me into that mindset.
My answer
I confirmed that our existing model of link building for them was something that was likely to continue working and adding value, but that it should NOT be our sole focus in the coming years.
Then, I explained what I’ve talked about in this post thus far.
I told them that our work wasn’t good enough, despite them being one of our happiest, most long-standing clients. We were getting hundreds of links a month, but we could do better.
Running campaign after campaign and getting links to each one would not be good enough in the future. Sure it works now, but what about in two years? Five?? Probably only partly.
We knew we needed to bridge the gap between different content types:
Content for links (aka campaigns)
Content for traffic (informational and transactional pages)
Content for building expertise and trust
We’d only been focusing on the first one, pretty much in isolation. We’d come up with some relevant topic ideas, build them out and get links. Job done.
This wouldn’t be good enough a few years down the road, because link building would be taking place in a small pocket of a very large organization with limited integration.
It’s now been over a year since that conversation and guess what? Our campaigns are still working great, but we are evolving to do so much more.
What happened
If you haven’t taken a look at what else your business is doing and where link building can add value, this is the first step towards better integration, and thus better link building. By the time the conversation above happened, we’d already recognized the need to integrate with other teams within the client’s organization, so we had a head start.
With the help of the client’s SEO team, we started to discover other activities within the organization which we could add value to or leverage for greater wins:
The traditional marketing team had been running campaigns for years on different industry topics. Some of these crossed over with the topics we’d created content for.
The internal PR team had lots of activity going on and had often seen our coverage pop up on their trackers. As it turned out, they were just as keen to meet us and understand more about our processes.
The brand team was starting to review all on-site assets to ensure conformity to brand guidelines. Working with them was going to be important moving forward for consistency’s sake.
With our help, the client were building out more informational content related to their products, with us helping brief their internal copywriters.
All of these opportunities sowed the seeds for a new focus on the evolution of link building, and pushed us to move quicker into a few things including:
Running joint projects with the internal PR team where we collaborate on ideas and outreach that don’t just focus on data visualization
Running ideation sessions around topics given to us by the SEO team, which are also focused on by their traditional marketing team
Building relationships with several subject matter experts within the organization who we are now working with and promoting online (more on this below)
Testing the informational product content for link building after noticing that a few pieces naturally attracted links
Working alongside the PR team to carry out brand-reclamation-style link building
Where we are now
Just one year from that open and honest conversation, we have been able to show our value beyond launching campaign after campaign whilst still building links to the client’s content. This will hold value for years to come and mean that their reliance on campaigns will be reduced more and more over time.
We’re making good progress toward taking our reliance off campaigns and making it part of our strategy — not all of it. Yes, campaigns still drive the majority of links, but our strategy now includes some key changes:
All campaigns (with the odd exception) are evergreen in nature, can always be outreached, and have the ability to attract links on their own.
We are launching long-form, report-style content pieces that demonstrate the authority and expertise the client has in their industry, and then building links to them. (They’re far slower in terms of getting links, but they are doing well.)
We are raising the profile of key spokespeople within the business by connecting them with writers and journalists who can contact them directly for quotes and comments in the future.
We are doing prospecting and outreach for informational content, aiming to give them a nudge in rankings which will lead to more links in the future (that we didn’t have to ask for).
Link building isn’t quite a BAU activity just yet for this client, but it’s not far off from becoming one. The practice is taken seriously, not just within the SEO team, but also within the wider marketing team. There is more awareness than there has ever been.
Content strategy framework
I want to share the framework which we’ve used to support and visualize the shift away from campaigns as our sole link building strategy.
We’ve been aware for a while that we need to ensure any link building work we do is topically relevant. We’d found ourselves defaulting to content which was campaign-led and focused on links, as opposed to content that can serve other purposes.
Link builders need to take a long, hard look at the topics we want our clients and businesses to be famous for, credible to talk about, and that resonate with their audience. Once you have these topics, you can start to plan your content execution. After that, you’ll start to see where link building fits in.
Contrast this with the approach of “we need links, let’s come up with some relevant content ideas to help do that.” This can work, but isn’t as effective.
To help clients shift their strategies, we put together the framework below. Here’s how it works:
Let’s imagine we sell products that help customers sleep better. We may come up with the following themes and topics:
Notice that “Campaigns” is only one format. We’re also acknowledging that topics and themes can not only lead to other forms of content (and links), but also that our KPIs may not always be just links.
If we put together a long-form content guide on the science of sleep, it may not get on the front page of the New York Times, but it may get a slow, steady stream of links and organic search traffic. This traffic could include potential customers for a sleep product.
Once you have a specific topic in mind, you can go deeper into that topic and start thinking about what content pieces you can create to truly demonstrate expertise and authority. This will differ by client and by topic, but it could look something like this:
In this case, the blue circles denote a topic + format which may be link-worthy. While the orange ones denote a valuable execution that aren’t as link-worthy, we may still want to create this content for longer-term link and traffic generation.
To wrap up
Link building campaigns still have huge amounts of value. But if that’s all you’re doing for clients, you’re leaving opportunities behind. Think bigger and beyond campaigns to see what else can be done to move you and your business closer to link building nirvana.
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/2Ag6mrj
via IFTTT
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways.
So this is going to be a post about the issues I’ve encountered, how I go around them, and why I still find Sass necessary these days.
The errors
If you’ve played with the new min() and max() functions, you may have ran into an error message like this when working with different units: “Incompatible units: vh and em.”
An error when working with different types of units in the min()/ max() function
This is because Sass has its ownmin() function, and ignores the CSS min() function. Plus, Sass cannot perform any sort of computation using two values with units that don’t have a fixed relation between them.
For example, cm and in units have a fixed relation between them, so Sass can figure out what’s the result of min(20in, 50cm) and doesn’t throw an error when we try to use it in our code.
The same things goes for other units. Angular units, for example, all have a fixed relation between them: 1turn, 1rad or 1grad always compute to the same deg values. Same goes for 1s which is always 1000ms, 1kHz which is always 1000Hz, 1dppx which is always 96dpi, and 1in which is always 96px. This is why Sass can convert between them and mix them in computations and inside functions such as its own min() function.
But things break when these units don’t have a fixed relation between them (like the earlier case with em and vh units).
And it’s not just different units. Trying to use calc() inside min() also results in an error. If I try something like calc(20em + 7px), the error I get is, “calc(20em + 7px) is not a number for min.”
An error when using different unit values with calc() nested in the min()function
Another problem arises when we want to use a CSS variable or the result of a mathematical CSS function (such as calc(), min() or max()) in a CSS filter like invert().
In this case, we get told that “$color: 'var(--p, 0.85) is not a color for invert.”
var() in filter: invert() error
The same thing happens for grayscale(): “$color: ‘calc(.2 + var(--d, .3))‘ is not a color for grayscale.”
calc() in filter: grayscale() error
opacity() causes the same issue: “$color: ‘var(--p, 0.8)‘ is not a color for opacity.”
var() in filter: opacity() error
However, other filter functions — including sepia(), blur(), drop-shadow(), brightness(), contrast() and hue-rotate()— all work just fine with CSS variables!
Turns out that what’s happening is similar to the min() and max() problem. Sass doesn’t have built-in sepia(), blur(), drop-shadow(), brightness(), contrast(), hue-rotate() functions, but it does have its own grayscale(), invert() and opacity() functions, and their first argument is a $color value. Since it doesn’t find that argument, it throws an error.
For the same reason, we also run into trouble when trying to use a CSS variable that lists at least two hsl()or hsla() values.
var() in color: hsl() error.
On the flip side, color: hsl(9, var(--sl, 95%, 65%)) is perfectly valid CSS and works just fine without Sass.
The exact same thing happens with the rgb()and rgba() functions.
var() in color: rgba() error.
Furthermore, if we import Compass and try to use a CSS variable inside a linear-gradient() or inside a radial-gradient(), we get another error, even though using variables inside conic-gradient() works just fine (that is, if the browser supports it).
var() in background: linear-gradient() error.
This is because Compass comes with linear-gradient() and radial-gradient() functions, but has never added a conic-gradient() one.
The problems in all of these cases arise from Sass or Compass having identically-named functions and assuming those are what we intended to use in our code.
Drat!
The solution
The trick here is to remember that Sass is case-sensitive, but CSS isn’t.
That means we can write Min(20em, 50vh)and Sass won’t recognize it as its own min() function. No errors will be thrown and it’s still valid CSS that works as intended. Similarly, writing HSL()/ HSLA()/ RGB()/ RGBA() or Invert() allows us to avoid issues we looked at earlier.
As for gradients, I usually prefer linear-Gradient() and radial-Gradient() just because it’s closer to the SVG version, but using at least one capital letter in there works just fine.
But why?
Almost every time I tweet anything Sass-related, I get lectured on how it shouldn’t be used now that we have CSS variables. I thought I’d address that and explain why I disagree.
First, while I find CSS variables immensely useful and have used them for almost everything for the past three years, it’s good to keep in mind that they come with a performance cost and that tracing where something went wrong in a maze of calc() computations can be a pain with our current DevTools. I try not to overuse them to avoid getting into a territory where the downsides of using them outweigh the benefits.
Not exactly easy to figure out what’s the result of those calc() expressions.
In general, if it acts like a constant, doesn’t change element-to-element or state-to-state (in which case custom properties are definitely the way to go) or reduce the amount of compiled CSS (solving the repetition problem created by prefixes), then I’m going to use a Sass variable.
Secondly, variables have always been a pretty small portion of why I use Sass. When I started using Sass in late 2012, it was primarily for looping, a feature we still don’t have in CSS. While I’ve moved some of that looping to an HTML preprocessor (because it reduces the generated code and avoids having to modify both the HTML and the CSS later), I still use Sass loops in plenty of cases, like generating lists of values, stop lists inside gradient functions, lists of points inside a polygon function, lists of transforms, and so on.
Here’s an example. I used to generate n HTML items with a preprocessor. The choice of preprocessor matters less, but I’ll be using Pug here.
- let n = 12;
while n--
.item
Then I would set the $n variable into the Sass (and it would have to be equal to that in the HTML) and loop up to it to generate the transforms that would position each item:
However, this meant that I would have to change both the Pug and the Sass when changing the number of items, making the generated code very repetitive.
CSS generated by the above code
I have since moved to making Pug generate the indices as custom properties and then use those in the transform declaration.
- let n = 12;
body(style=`--n: ${n}`)
- for(let i = 0; i < n; i++)
.item(style=`--i: ${i}`)
Sure, I could generate it as a list variable from Pug, but doing so doesn’t take advantage of the dynamic nature of CSS variables and it doesn’t reduce the amount of code that gets served to the browser, so there’s no benefit coming out of it.
Another big part of my Sass (and Compass) use is tied to built-in mathematical functions (such as trigonometric functions), which are part of the CSS spec now, but not yet implemented in any browser. Sass doesn’t come with these functions either, but Compass does and this is why I often need to use Compass.
And, sure, I could write my own such functions in Sass. I did resort to this in the beginning, before Compass supported inverse trigonometric functions. I really needed them, so I wrote my own based on the Taylor series. But Compass provides these sorts of functions nowadays and they are better and more performant than mine.
Mathematical functions are extremely important for me as I’m a technician, not an artist. The values in my CSS usually result from mathematical computations. They’re not magic numbers or something used purely for aesthetics. A example is generating lists of clip paths points that create regular or quasi-regular polygons. Think about the case where we want to create things like non-rectangular avatars or stickers.
Let’s consider a regular polygon with vertices on a circle with a radius 50% of the square element we start from. Dragging the slider in the following demo allows us to see where the points are placed for different numbers of vertices:
Putting it into Sass code, we have:
@mixin reg-poly($n: 3) {
$ba: 360deg/$n; // base angle
$p: (); // point coords list, initially empty
@for $i from 0 to $n {
$ca: $i*$ba; // current angle
$x: 50%*(1 + cos($ca)); // x coord of current point
$y: 50%*(1 + sin($ca)); // y coord of current point
$p: $p, $x $y // add current point coords to point coords list
}
clip-path: polygon($p) // set clip-path to list of points
}
Note that here we’re also making use of looping and of things such as conditionals and modulo that are a real pain when using CSS without Sass.
A slightly more evolved version of this might involve rotating the polygon by adding the same offset angle ($oa) to the angle of each vertex. This can be seen in the following demo. This example tosses in a star mixin that works in a similar manner, except we always have an even number of vertices and every odd-indexed vertex is situated on a circle of a smaller radius ($f*50%, where $f is sub-unitary):
We can also have chubby stars like this:
Or stickers with interesting border patterns. In this particular demo, each sticker is created with a single HTML element and the border pattern is created with clip-path, looping and mathematics in Sass. Quite a bit of it, in fact.
Another example are these card backgrounds where looping, the modulo operation and exponential functions work together to generate the dithering pixel background layers:
This demo just happens to rely heavily on CSS variables as well.
Then there’s using mixins to avoid writing the exact same declarations over and over when styling things like range inputs. Different browsers use different pseudo-elements to style the components of such a control, so for every component, we have to set the styles that control its look on multiple pseudos.
Sadly, as tempting as it may be to put this in our CSS:
input::-webkit-slider-runnable-track,
input::-moz-range-track,
input::-ms-track { /* common styles */ }
…we cannot do it because it doesn’t work! The entire rule set is dropped if even one of the selectors isn’t recognized. And since no browser recognises all three of the above, the styles don’t get applied in any browser.
We need to have something like this if we want our styles to be applied:
input::-webkit-slider-runnable-track { /* common styles */ }
input::-moz-range-track { /* common styles */ }
input::-ms-track { /* common styles */ }
But that can mean a lot of identical styles repeated three times. And if we want to change, say, the background of the track, we need to change it in the ::-webkit-slider-runnable-track styles, in the ::-moz-range-track styles and in the ::-ms-track styles.
The only sane solution we have is to use a mixin. The styles get repeated in the compiled code because they have to be repeated there, but we don’t have to write the same thing three times anymore.
Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common — especially when establishing grid layouts and boundaries for the elements inside them — that it’s easy to take them for granted and reach for them without stepping back to consider how they work, why we use them, and how to use them effectively.
Ahmed Shadeed wrote up the most exhaustive article on wrappers I’ve ever read. He provides a brief overview of them before diving into a bunch of considerations and techniques for working with them, including:
When to use them
How to size them
Positioning them
Adding margin and padding
Working with CSS grid and other display values
Breaking out of the wrapper
Using CSS custom properties
If you take the images from the article, it tells a pretty cool story.
Ya know, for a site called “CSS-Tricks” that I’ve run for well over a decade, it’s a little funny we’ve never done a book under that name. I’ve written a book about WordPress and SVG, but never CSS!
Well, allow me to change that. I’ve been working on a “book” called The Greatest CSS Tricks Vol. I, as my attempt to stay true to this site’s name! The big idea to make it like a coffee-table book for CSS, where each chapter is totally independent and talks about one literal CSS trick that I’ve found to be exceptionally clever and useful. A book about quite literally the best CSS tricks I’ve come across over the years.
I quoted the word “book” above because this is the loosest possible definition of a book. I have not yet made it into an eBook format. I have not even considered printing it yet (although there is a “full book” URL available with the whole book together for printing and print-to-PDFing). This book exists as URLs which are essentially fancy blog posts grouped together. I’m also calling it Volume I as there are already ideas for another one!
Some chapters are fairly broadly known concepts that I’m writing up to put a point on. But many of the chapters are based on ideas that can be traced back to individual people and I always try to credit them directly.
I say so far because I might add a few and rearrange them and such, not to mention it could still use a healthy bit of editing. But I think the bulk of the value of the book is already there.
Value? I think so. While it’s fun to learn some CSS trickery, I think there is value beyond the tricks themselves. Tricks help you see how CSS works at a deeper level. When you understand the trick, you’re seeing how that part of CSS works through a new lens and it helps you be more in tune with the nature of that CSS. It will help you reach for those CSS properties more intuitively when you know what they are capable of.
In another sense, it’s like taking a walk with weights in your backpack. You do it on purpose so that when you walk normally, it feels easier. The tricks are like mental weights. They make writing non-tricky CSS feel easier.
So about buying the book. You don’t buy the book directly. What you buy is an MVP Supporter membership to this site. When you’re an MVP Supporter, you have access to the book, and more. This is the whole package:
No Ads. You see no ads on this site, except for sponsored posts which are just blog posts and I try to make useful anyway.
Extra Content. You can read the digital books I’m making (you can already read some chapters, but they are under progress.)
Easier Commenting. You’ll be logged in, so leaving comments is easier and won’t require the delay for approval.
Good feels. An extreme sense of satisfaction of supporting this site and our commitment to bringing you useful tech knowledge.
It’s just just $20/year.
Have I, or this site, helped you out over the years? This is the best way to say thanks.
Also, if you would really like to have access to read the book, and can’t afford it right now, I totally get it. Email me at chriscoyier@gmail.com and we can work that out.
Fractl has produced thousands of content marketing campaigns across every topic, and for the past seven years, we’ve been keeping track of each and every campaign in order to refine and improve the content we produce on behalf of our clients.
In my last post for Moz, I explained how to set realistic digital PR expectations for your content based on your niche. In this topic, I want to dive a little bit deeper into the data and share insights about how the source of your content can be just as important in determining how your content will perform.
In this analysis, I looked at 1,474 client content campaigns across six different data source categories:
Client data
Social media
Participatory methods
Publicly available data
Survey
Germ swab
It’s important to note that there are countless other data sources that we use for content campaigns every day at Fractl that are not mentioned in this article. In this analysis, each category has at least 20 campaigns, while some categories have several hundred campaigns.
It’s also important to note that averages were collected by excluding upper outliers. For campaigns that went “viral” and performed well above the norm, we excluded them in the calculation so as not to skew the averages higher.
In addition to sharing link and press averages, I will also be walking through how to produce pressworthy, sharable content from each data source and providing examples.
Managing expectations across content types
Across the entire sample of 1,474 campaigns, a project on average received 24 dofollow links and 89 press mentions in total.
A press mention is defined as any time the content campaign was mentioned on a publisher’s website.
There were some individual data source category averages that were on par with the sample average, while other categories deviated greatly from the sample average.
Publicly available data
For almost any niche out there, you can bet there is a publicly available data set available for use. Some examples include data from the CDC, the U.S. Census, colleges and universities, the WHO, and the TSA. The opportunities really are endless when it comes to using publicly available data as a methodology for your content.
While free data sets can be a treasure trove of information for your content, keep in mind that they’re not always the simplest to work with. They do require a lot of analysis to make sense of the massive amount of information in them, and to make the insights digestible for your audience.
Take for example a campaign we produced for a client called Neighborhood Names. The data was free from the US Census, but in order to make any sense of it, our researchers had to use QGIS, Python, text-mining, and phrasemachine (a text analysis API) just to narrow it down to what we were looking for.
And what were we looking for? Looking at neighborhood names across America seems boring at first, until you realize that certain words correspond to wealth.
I was the outreach specialist for this project, and by using the wealth angle, I was able to secure two notable placements on CNBC as well as a press mention on MSN. The project quickly made its way around the internet after that, earning 76 dofollow links and 202 total press mentions by the end of our reporting period.
Survey
Unlike scouring the internet for free data, using a survey as a methodology can be more costly. That being said, there is one major advantage to using a survey to shape your content: you can find out anything you want.
While publicly available data will tell a story, it’s not always the story you want to tell, and that’s where surveys come in.
Of course, when it comes to surveys, anyone can create one without paying attention to research method best practices. That's one of the problems we need to address. With “fake news” in the forefront of everyone’s minds in 2020, building trust with journalists and editors is of the utmost importance.
As content creators, we have a responsibility to ensure that content is not only attention-grabbing and entertaining, but also accurate and informative.
Survey campaigns, in particular, require you to analyze responses through a rigorous methodological lens. When collecting data for surveys, be sure to pay close attention to ethical upholdance, data validity, and fair visual representations.
Germ swab
From my own personal experience, germ swab content campaigns are the most fun, and often, the most disturbing. Fractl did some research a while back about the emotions that make content go viral, and oftentimes, germ swab campaigns hit all of the right emotions in the viral equation.
Negative emotions like disgust are often evoked when reviewing the results of germ swab campaigns. Our study found that when negative emotions are paired with emotions like anticipation or surprise, they can still achieve viral success (internet viral, not germ viral). What is more surprising than finding out the airplane tray table is dirtier than a toilet seat?
Publishers around the world seemed to think the content was surprising, too. This campaign performed above the norm for a typical content campaign earning 38 dofollows and 195 total press mentions — and this was before the COVID-19 pandemic.
Participatory methods
Participatory methods are campaigns that require active participation for the methodology. These are unique ideas — no two are alike. Some examples of campaigns that fall under the participatory methods category are when we had team members do a 30-day squat challenge, asked respondents to draw brand logos from memory, or when we literally drove from D.C. to NYC with a dash cam to record traffic violations.
These campaigns have a certain level of risk associated with them. They require a lot of upfront effort and planning without the promise of any return — and that’s scary for clients and for our team who put in tremendous effort to pull them off.
As you can see from the chart above, however, these ideas collectively performed right on par with other campaign types, and even better than survey methodologies for both the number of dofollow links and press mentions. In order to reap big benefits, it seems you need to be willing to take a big risk.
Social media
Social medIa as a data source is almost a no-brainer, right up there with survey methodologies and publicly available data sets. Unlike participatory methods campaigns, you don’t have to leave your computer in order to produce a campaign based on social media data.
Through our seven years of content creation, Fractl has produced campaigns based on data scrapes from Twitter, Instagram, Facebook, LinkedIn, Reddit, and more. From this experience, we know firsthand what kinds of social campaigns work and which ones fall flat.
The best thing about using social media as a source for content is that it can be applied to all verticals.
The biggest lesson we’ve learned from producing content based on social media data is that the methodology is typically subjective, so you need to keep the project lighthearted in nature in order to earn major coverage.
For example, we produced a campaign for a client in which we looked at Instagram posts with the hashtag #sexy and a geolocation. From this, we were able to glean the “sexiest” countries in the world as well as U.S. states.
While it would be impossible to learn what the actual sexiest places in the world were, (what does that even mean?) we were able to produce a fun campaign that used geo-bait to appeal to lighthearted publishers, like Glamour, E! Online, Women's Health, and Elite Daily.
Make sure that no matter the topic, whatever you produce contributes to an ongoing conversation. Statistics that don’t point to anything meaningful won’t be relevant for writers actually trying to add to the conversation.
Client data
Client data is often the most underappreciated data source for content marketers. You may be sitting on a wealth of actionable industry insights and not even know it.
You might think of internal data as only being useful for improving your internal processes at work, but it can also be valuable outside of your organization.
Unlike publicly available data, internal data is never-before-seen and 100% unique. Journalists eat this up because it means that you’re providing completely exclusive resources.
Think of this article, for example. This article is filled with data and insights that Fractl has gleaned after producing thousands of content marketing campaigns.
An added bonus of using internal data to craft your content is that, according to our analysis, it performs on par with surveys. Unlike surveys, though, it’s completely free.
Conclusion
No matter what methodology you’re using or vertical you’re creating content for, it’s important to realize that as content creators, we have an ethical and moral responsibility to create with an audience in mind.
With “fake news” on the forefront of everyone’s minds, building and maintaining trust with writers and editors is of the utmost importance.
All of the content you produce and promote must be assessed through a rigorous methodological lens to ensure that content is accurate and informative as well as eye-grabbing and entertaining.
Regardless of your methodology, if you don’t take the proper steps to make sure your data sources are accurate, you are contributing to the fake news epidemic.
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/2BLLSab
via IFTTT
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
Here’s the first trick:
[…] if the default CSS outline property doesn’t give you the visual effect you want [in WHCM] for focus states, there’s a very simple fix. Instead of overriding default browser focus styles with outline: none, make it transparent instead: outline 3px solid transparent.
That will essentially do nothing outside of WHCM, but in WHCM, it will be a thick white border, which is a strong, good visual focus style.
One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It’s probably one of the best decisions I’ve ever made, as it’s been a direct source of fun, career development and, eventually, income.
I always chuckle at little blogging is coolagain declarations from the community. It’s always cool, my friends. But it is always nice to see more people pick it back up.
I enjoyed this post from Max Böck that gets into how what is old is new again. Server side rendering! Personal websites! Blogging! Heck yes.
The other day, I was doom-scrolling Twitter and saw a delightful article titled “The Case for Fussy Breakfasts.” I love food — especially breakfast — and since the pandemic hit I’ve been using my breaks in between meetings (or, shh, sometimes in meetings) to make a full bacon, poached egg, vegetable plate. Suffice to say, I really got into the article. This small joy of creating a bit of space for myself for the most important meal of the day has been meaningful to me — while everything else feels out of control, indulging in some ceremony has done a tiny part to offset the intensity of our collective situation.
It caused me to think of this “fussiness” as applied to other inconsequential joys. A walk. A bath. What about programming?
While we’re all laser-focused on shipping the newest feature with the hottest software and the best Lighthouse scores, I’ve been missing some joy on the web. For example, I’ve come across apps that seem to convey little care for UX, guidance, richness, and… well, let’s just say that for humans trying to communicate through a computer, we’re certainly bending a lot to… the computer.
Which is a good reminder for us all: the web is more than a mere document reader. While I do love me a healthy Lighthouse score, some of these point matrixes seem to be driven more by our own developer ego in some form of gamification race to the creative bottom rather than a challenge or opportunity. It’s like a hyper-focused attention to shedding bytes and server requests is coming at the expense of creative ways to accomplish delightful experiences. It’s still possible to dazzle users with a solid combination of content, color, and layout if we’re willing to be a bit adventurous — with little to no additional weight at all!
A few of my favorite personal developer sites these days are from Josh Comeau, Johnson Ogwuru and Cassie Evans. The small touches and careful attention to detail lead to these little a-ha! moments that make me want to stick around for a while. I wander around the site, exploring, learning, and feeling more connected to each of these talented devs as people. And notice how they pull it off without laggy performance. They flex their creative and technical muscles and put pure pride into their work and it intrigues me!
Just Corneau uses clever illustration and layout combinations that make his site fun to look at — not to mention great content we can all learn from.
It’s easy to get stuck in absolutes and one absolute to watch out for is the belief that anything fun or featuring a flair of style mean it’s “not useful.” I’d argue that the opposite is true. Emotions attach to the limbic system, making memories easier to recall. If your site is a flat bit of text, how will anyone remember it?
Don’t you want to build the site that teams in companies the world over remember and cite as an inspiration? I’ve been at four different companies where people have held up Stripe’s site as an aspirational example. Stripe took chances. Stripe told stories. Stripe engaged the imagination of developer and spoke directly to us.
It honestly makes me a little sad to acknowledge the irony of using a site as an example of what to do then tossing out the things that make it great for other priorities. Any creativity, risk, and intention that goes into great experiences like this gets slowly, piece by piece, chipped away by the drumbeat of “usefulness.” It’s like missing the forest for the trees.
It’s clearly apparent when a site is done with care and excitement. You feel it as you visit, that hum of intention. These are the sites with low bounce rates and the best engagement metrics. They’re the ones that elicit questions like “How can I contribute?” No gimmicks necessary.
Sure, there are lots of factors at play. I get it. Every person or company has constraints and competing priorities. Of course, we all have to get things over the line.
Perhaps a challenge: What small thing can you incorporate into a project that adds a dash of delight to the user experience? Can you start with a something like a hover effect on a link or button? Hey, I didn’t start my new breakfast regimen with a perfectly poached egg; I started by making a goofy scrambled one and I improved on it from there. We can all do the same when it comes to finding opportunities to create engaging websites. Can you outsource one graphic? Can you introduce a tiny easter egg? Perhaps you can write something with a little more personality than the typical corporate lingo.
If something is meaningful to you, the audience you gather will likely be the folks that find it meaningful too.
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.
The trick is that the top and bottom lines aren’t just a straight <line /> but a <path /> that curves up, down, and around forming the cross. You can only see part of the line (making it appear straight at first) because the stroke-dasharray only reveals part of the line. Then, by animating both the stroke-dasharray and stroke-dashoffset, the ✕ is formed.
Link building is never-ending in SEO, but a little creativity and smart tactics can help you ferret out great link opportunities from their hiding spots. In this episode of Whiteboard Friday, Britney Muller kicks off a series on modern link building (including the sage advice: let people choose their own anchor text!)
Click on the whiteboard image above to open a high resolution version in a new tab!
Video Transcription
Hey, Moz fans. Welcome to another edition of Whiteboard Friday. Today we are going to be looking at the easiest ways for you to get backlinks to your website. None of these involve content creation whatsoever.
Really excited to dive into this. It will be part of a larger "Link Building in 2020 Series and Beyond." So really excited to dive into some of the easiest things that you can do today to enhance your backlink profile. Let's take a look.
No-brainer link building
☑ Unlinked brand, product, name, etc. mentions
This is simply just going to Google, doing a search for these things within quotes, and looking at the first several pages of results to ensure that all of those results are linking back to your site.
They likely are not, so those will be your opportunities to send a message or an email asking for the webmaster or the writer to provide a link back to your site with your mention. It's one of the easiest things to do. So is unlinked images.
☑ Unlinked images
This is a gold mine if you're working with a website that has a lot of proprietary images or really great graphic design, maybe you have infographics or some things that are special to the brand or the domain. Use Google reverse image search and put in the images that you think might have been taken or used on other websites.
You will immediately see what those websites are and whether or not they link back to your site. So again, very similar to this first one. You're basically just asking for them to credit the website and link back accordingly.
☑ Redirect your 404 pages with backlinks
This is completely within your control. No outreach required. In fact, Moz Link Explorer provides this really, really easily within Moz Pro. You basically take a look at all of your pages that have backlinks, and you can filter by status code.
You just change that to 400s, 404s, and you can see all of the pages to your website that currently have backlinks but the page is no longer there. All you want to do with that is just simply 301 redirect that old broken page to a new relevant page, and you're kind of saving that authority that is being sent to your site.
So, so easy. A lot of people forget about that one. It's great.
☑ Keep an eye on recently lost links
The keyword here is "recently." If you can engage with another website that has recently either by accident or changed things around on purpose on the page, you are more likely to reclaim your lost link.
It's also just important to really understand why.
Is that website going through a redesign?
Have they gotten rid of pages?
Did a competitor come in and provide a better resource than what you currently had?
There are all sorts of reasons why you really want to identify what's going on.
☑ Move backlink targets
This is a new tactic that was recently brought to my attention by the brilliant Sarah Hollenbeck at Siege Media. They have a brilliant team. I highly recommend you checking out this article that's basically all about moving backlink targets, which has never really occurred to me, where you basically have backlinks to older resources or older content or products that you want restructured to newer or more important pages on your website.
Sarah goes into great detail about this and can help explain just how you can do this successfully and what that means for your site. So really, really neat. I highly suggest that.
☑ Sites that list competitors, but not you
Check out sites that list competitors but not you. These might be resource pages or roundups of information of sorts.
You can play around with this in Google as well by providing competitors within quotes and then minus your company or the website you're working on.
It really starts to give you an idea of what websites might be great opportunities for a backlink, because you fit within that vein. It makes sense.
☑ Sites that provide topic/industry + geo information
Similarly sites that provide topic or industry plus geo information, so again finding those resource pages, those roundups. Oftentimes you will see these on lots of .edu sites or even .gov. So you can do some different searches around, if you were Columbia, outdoor clothing in Minnesota.
Play around with this a bit. This could be in the Midwest, in the United States. You can change these words around and really start to identify some higher-quality link prospects.
☑ Build relationships
Lastly, build relationships. I cannot speak more highly about this.
Just for your own career longevity and what you do in SEO and marketing in general, it is so important to develop genuine, real relationships with individuals that work in the industry, whether that be at other websites or just in the same vein of things.
Not only can you bounce ideas off of these people and really get help with different things, but you get to help support the incredible things that they're working on. It's just an all-around, feel-good, help each other out situation. So if you're not already reaching out and building relationships, I highly suggest you do that.
It's a lot of fun, and I can't stress enough there are so, so many good people within our industry it's incredible.
☑ BONUS: Let people choose anchor text!
Lastly, we really want to take a modern look at link building practices in 2020 and beyond, and a big part of that goes around things like let people choose the anchor text for your backlink.
Five or 10 years ago it was standard to request very specific anchor text for the keyword you wanted to rank for. It's not really the case anymore. Especially with the addition of BERT, Google has gotten so much more sophisticated in understanding text and language and websites that it's really unnecessary and might even cause problems to ask for those specific anchor link texts.
Definitely take a look at this article we'll link to down below by David Farkas here, who wrote about link building lies. It's a really great article. We'll continue to build upon this series to provide you with some fresher information around link building today. I really look forward to hearing your comments and suggestions down below.
Feel free to let us know what you liked about this, what you didn't like. If you have any great ideas, please let us know down in the comments, and I look forward to seeing you all next time. Thanks so much. See you.
Scoop up more SEO insights at MozCon Virtual this July
Don't miss exclusive data, tips, workflows, and advice from Britney and our other fantastic speakers at this year's MozCon Virtual! Chock full of the SEO industry's top thought leadership, for the first time ever MozCon will be completely remote-friendly. It's like 20+ of your favorite Whiteboard Fridays on vitamins and doubled in size, plus interactive Q&A, virtual networking, and full access to the video bundle:
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/2NIJkwt
via IFTTT
