Friday, 18 August 2017

Pattern Library Workflow

Jon Gunnison documents some things that have made pattern libraries successful at Allstate. Tidbits I found interesting:

  • There are specific jobs (part of what he calls "governance") for maintaining the library. I love that they are called librarians. A "designer librarian" and a "UI dev librarian".
  • Acknowledgment that there are "snowflakes", or single instances that don't fit into a pattern (at least right now).
  • The pattern library is fed by information that comes in from lots of different places. Hence, requiring librarians to triage.

Direct Link to ArticlePermalink


Pattern Library Workflow is a post from CSS-Tricks



from CSS-Tricks http://ift.tt/2sSgzSy
via IFTTT

Using Custom Properties to Modify Components

Instead of using custom properties to style whole portions of a website’s interface I think we should use them to customize and modify tiny components. Here’s why.

Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website’s interface in one fell swoop. For example, if you’re working at somewhere like a big news org then we might want to specify a distinct visual design for the Finance section and the Sports section – buttons, headers, pull quotes and text color could all change on the fly.

Custom properties would make this sort of theming easy because we won’t have to add a whole bunch of classes to each component. All we’d have to do is edit a single variable that’s in the :root, plus we can then edit those custom props with JavaScript which is something we can’t do with something like Sass variables.

A while back Chris wrote about this use case in a post about custom properties and theming and the example he gave looked like this:

:root {
  --mainColor: #5eb5ff;
}

header {
  background: var(--mainColor);
}

footer {
  background: var(--mainColor);
}

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

But the more I learn about building big ol’ systems with CSS, the more I think that changing global styles like this is really difficult to keep the code clean and consistent over the long haul. And if you’re working on any large web app then you’re probably using something like React where everything is made of tiny reusable components anyway, especially because at this scale the cascade can be scary and dangerous.

If we’re working on larger, more complex systems then how should we be using custom properties then? Well I think the best option is to keep them on the component level to help make our CSS really clean. So instead of adding variables to the root element we could bind them to the component instead, like this:

.btn {
  --btnColor: #5eb5ff;
}

After which we could set properties such as color or border to use this variable:

.btn {
  --btnColor: #5eb5ff;
  border: 1px solid var(--btnColor);
  color: var(--btnColor);
  
  &:hover {
    color: white;
    background-color: var(--btnColor);
  }
}

So far so good! We can then add modifier classes that simply change the value of the custom property:

.btn-red {
  --btnColor: #ff6969;
}

.btn-green {
  --btnColor: #7ae07a;
}

.btn-gray {
  --btnColor: #555;
}

See the Pen Custom Properties by Robin Rendle (@robinrendle) on CodePen.

See how nice and tidy that is? With just a few lines of CSS we’ve created a whole system of buttons – we could easily change the font-size or add animations or anything else and keep our classes nice and small without messing with the global scope of our CSS. Especially since all this code is likely to live in a single file like buttons.scss it’s helpful that all the logic exists in one place.

Anyway, for sure this method of using custom properties on a component level isn’t as exciting or stylish as using a single variable to style every part of a website but I’m not entirely sure how useful that sort of theming is anyway. A lot of the time a design will require a bunch of tiny adjustments to each component for usability reasons so it makes sense to break everything down to the component level.

What do you think is the most useful thing about custom properties? I’d love to hear what everyone thinks about this stuff in the comments below.


Using Custom Properties to Modify Components is a post from CSS-Tricks



from CSS-Tricks http://ift.tt/2uPdXch
via IFTTT

Saving SVG with Space Around It from Illustrator

Web Development Reading List: Announcing Changes, A Design Kit, DNA Malware, And Why Meaning Is An Advantage

The Perfect Blog Post Length and Publishing Frequency is B?!!$#÷x - Whiteboard Friday

Posted by randfish

The perfect blog post length or publishing frequency doesn't actually exist. "Perfect" isn't universal — your content's success depends on tons of personalized factors. In today's Whiteboard Friday, Rand explains why the idea of "perfect" is baloney when it comes to your blog, and lists what you should actually be looking for in a successful publishing strategy.

the perfect blog post length and frequency

Click on the whiteboard image above to open a high-resolution version in a new tab!

Video Transcription

Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week we're going to chat about blog posts and, more broadly, content length and publishing frequency.

So these are things where a lot of the posts that you might read, for example, if you were to Google "ideal blog post length" or "ideal publishing frequency" will give you data and information that come from these sources of here's the average length of content of the top 10 results in Google across a 5,000-keyword set, and you can see that somewhere between 2,350 and 2,425 words is the ideal length, so that's what you should aim for.

I am going to call a big fat helping if baloney on that. It's not only dead wrong, it's really misleading. In fact, I get frustrated when I see these types of charts used to justify this information, because that's not right at all.

When you see charts/data like this used to provide prescriptive, specific targets for content length, ask:

Any time you see this, if you see a chart or data like this to suggest, hey, this is how long you should make a post because here's the length of the average thing in the top 10, you should ask very careful questions like:

1. What set of keywords does this apply to? Is this a big, broad set of 5,000 keywords, and some of them are navigational and some of them are informational and some of them are transactional and maybe a few of them are ecommerce keywords and a few of them are travel related and a few of them are in some other sector?

Because honestly, what does that mean? That's sort of meaningless, right? Especially if the standard deviation is quite high. If we're talking about like, oh, well many things that actually did rank number one were somewhere between 500 words and 15,000 words. Well, so what does the average tell me? How is that helpful? That's not actually useful or prescriptive information. In fact, it's almost misleading to make that prescriptive.

2. Do the keywords that I care about, the ones that I'm targeting, do they have similar results? Does the chart look the same? If you were to take a sample of let's say 50 keywords that you cared about and you were to get the average content length of the top 10 results, would it resemble that? Would it not? Does it have a high standard deviation? Is there a big delta because some keywords require a lot of content to answer them fully and some keywords require very, very small amounts of content and Google has prioritized accordingly? Is it wise, then, to aim for the average when a much larger article would be much more appreciated and be much more likely to succeed, or a much shorter one would do far better? Why are you aiming for this average if that's the case?

3. Is correlation the same as causation? The answer is hell no. Never has been. Big fat no. Correlation doesn't even necessarily imply causation. In fact, I would say that any time you're looking at an average, especially on this type of stuff, correlation and causation are totally separate. It is not because the number one result is 2,450 words that it happens to rank number one. Google does not work that way. Never has, never will.

INSTEAD of trusting these big, unknown keyword set averages, you should:

A. look at your keywords and your search results and what's working versus not in those specific ones.

B. Be willing to innovate, be willing to say, "Hey, you know what? I see this content today, the number one, number two, number three rankings are in these sorts of averages. But I actually think you can answer this with much shorter content and many searchers would appreciate it." I think these folks, who are currently ranking, are over-content creating, and they don't need to be.

C. You should match your goals and your content goals with searcher goals. That's how you should determine the length that you should put in there. If you are trying to help someone solve a very specific problem and it is an easily answerable question and you're trying to get the featured snippet, you probably don't need thousands of words of content. Likewise, if you are trying to solve a very complex query and you have a ton of resources and information that no one else has access to, you've done some really unique work, this may be way too short for what you're aiming for.

All right. Let's switch over to publishing frequency, where you can probably guess I'm going to give you similar information. A lot of times you'll see, "How often should I publish? Oh, look, people who publish 11 times or more per month, they get way more traffic than people who publish only once a month. Therefore, clearly, I should publish 11 or more times a month."

Why is the cutoff at 11? Does that make any sense to you? Are these visits all valuable to all the companies that were part of whatever survey was in here? Did one blog post account for most of the traffic in the 11 plus, and it's just that the other 10 happened to be posts where they were practicing or trying to get good, and it was just one that kind of shot out of the park there?

See a chart like this? Ask:

1. Who's in the set of sites analyzed? Are they similar to me? Do they target a similar audience? Are they in my actual sector? What's the relative quality of the content? How savvy and targeted are the efforts at earning traffic? Is this guy over here, are we sure that all 11 posts were just as good as the one post this person created? Because if not, I'm comparing apples and oranges.

2. What's the quality of the traffic? What's the value of the traffic? Maybe this person is getting a ton of really valuable traffic, and this person over here is getting very little. You can't tell from a chart like this, especially when it's averaged in this way.

3. What things might matter more than raw frequency?

  • Well, matching your goals to your content schedule. If one of your goals is to build up subscribers, like Whiteboard Friday where people know it and they've heard of it, they have a brand association with it, it's called Whiteboard Friday, it should probably come out once a week on Friday. There's a frequency implied in the content, and that makes sense. But you might have goals that only demand publishing once a quarter or once a month or once a week or once every day. That's okay. But you should tie those together.
  • Consistency, we have found, is almost always more important than raw frequency, especially if you're trying to build up that consistent audience and a subscriber base. So I would focus on that, not how I should publish more often, but I should publish more consistently so that people will get used to my publishing schedule and will look forward to what I have to say, and also so that you can build up a cadence for yourself and your organization.
  • Crafting posts that actually earn attention and amplification and help your conversion funnel goals, whatever those might be, over raw traffic. It's far better if this person got 50 new visits who turned into 5 new paying customers, than this person who published 11 posts and got 1 new paying customer out of all 11. That's a lot more work and expense for a lot less ROI. I'd be careful about that.

*ASIDE:

One aside I would say about publishing frequency. If you're early stage, or if you were trying to build a career in blogging or in publishing, it's great to publish a lot of content. Great writers become great because they write a lot of terrible crap, and then they improve. The same is true with web publishers.

If you look at Whiteboard Friday number one, or a blog post number one from me, you're going to see pretty miserable stuff. But over time, by publishing quite a bit, I got better at it. So if that is your goal, yes, publishing a lot of content, more than you probably need, more than your customers or audience probably needs, is good practice for you, and it will help you get better.

All right, everyone. Hope you've enjoyed this edition of Whiteboard Friday. We'll see you again next week. Take care.

Video transcription by Speechpad.com


Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!



from The Moz Blog http://ift.tt/2wlBXDv
via IFTTT

Pattern Library Workflow

Jon Gunnison documents some things that have made pattern libraries successful at Allstate. Tidbits I found interesting: There are specifi...