One of the many things we use Jetpack for here on CSS-Tricks is all of its features related to social media integration. For example, Jetpack can automatically share published content to different social media accounts simultaneously, add sharing buttons to your site’s theme, and allow for social login on the comment form. There is even more than that, but let’s dig into these three as we use them.

Auto-Sharing Posts

I like the idea that everything we published goes out to social media. Many people only follow the site that way, so they should see what we’re writing. We’re specifically into Twitter and Facebook.

With Jetpack installed connected to WordPress.com, I can now flip on the setting:

Then authenticate the services you want to connect:

Now as we publish new articles, there are Publicize controls right there allowing us to send it to the services we want along with a custom message and the featured image:

Tada!

If you want to get even fancier with social sharing, you can schedule social media posts and do re-sharing through the WordPress.com interface.

Sharing Buttons

Social Media sites tend to have official buttons for features like sharing content on their site or following accounts. You can always add those buttons manually to a theme (it’s a bit of HTML the site will give you):

But it’s nice to leave this kind of functionality to a plugin, where you can easily configure them and flip them on and off. Jetpack does this. After I’ve toggled on “Add sharing buttons” in my Jetpack settings, I now have Sharing settings like this where I can get everything as I want them:

I like the “text only” option there which have just about zero performance overhead. Here’s an example of simple little buttons capping off an article:

Social Login for Comments

So much of the type-a-reaction we all do these days has super low friction. We reply to a tweet or Facebook post. If it’s a blog post comment, a lot of times even those are powered by Facebook or a system like Disqus that has social login. Rarely do we need to manually type our name, email, and website to leave a comment. Yet that’s the default for WordPress comments. It’s great that is possible, but for increased engagement, allowing people to have a one-click social login is great for a comment form.

If the user is already logged into Twitter, Facebook, Google, or WordPress.com, it is quite literally one-click and they don’t need to fill out three additional fields. Even if they aren’t, it’s likely they have a password manager or it is easier for them to type out their log in credentials quicker than it is to fill out those three fields.

Yay for well managed community discussions!

---

If you’re interested in learning more about Jetpack, this link is great at explaining all it offers. Plus, we go into more detail about the features we use right here on this page.

Here’s me with a quick endorsement and explaination of the three things we covered above:

The post Jetpack’s Social Integration Features appeared first on CSS-Tricks.

The hotly anticipated Smashing Book 6: New Frontiers in Web Design, is released today. Dedicated to some of the thorniest problems we face in our professional lives, it takes a swing at some of the biggest headache-triggering issues in contemporary web design, from the accessibility of single-page apps in React and Angular, to designing for Smart watches.

You’ll find solutions to problems with CSS’ latest layout tool CSS Grid, as well as CSS custom properties—the much needed answer to variables in CSS—plus asset loading in the world of HTTP/2.

As well as the developer-focused content that makes Smashing popular, you’ll also find some design-specific topics. The book covers implementing design systems in the real world, designing conversational user interfaces, both augmented and virtual reality design, working with chatbots, and the hot topic of the moment: responsive art direction.

Authored by some big-names in the industry, including a few WebdesignerDepot favourites, the book includes content written by Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmueller, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon, and Vitaly Friedman.

Smashing Book 6 is available now, as a hardcover or an ebook, direct from Smashing Magazine.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Development time is a precious resource. In order to be more efficient and responsive, product teams continuously try to use advanced techniques for product creation. One of the most popular frameworks that help the product team to achieve this goal is a design sprint.

A design sprint is a framework that helps answer critical business questions through rapid prototyping and user testing. Basically, it’s a shortcut to learn without building and launching a real product.

In this article, I want to highlight key things that should be taken into account when running a sprint.

Before the Sprint

Preparing for a sprint is one of the most critical steps in the process. Proper preparation will help make the best use of the time you’ll spend on this activity.

1. Write a Sprint Brief

A sprint brief is a document that outlines the sprint challenge, key goals, and the deliverable that the team plans to produce during the sprint. The focus of the sprint should be clear to everyone on the team. And a clear sprint brief will get everyone on the same page.

2. Consider Testability when Selecting a Sprint Challenge

Testability should be a critical factor in the process of challenge evaluation. If the problem you are looking to solve cannot be tested, then it may be not suitable for a sprint.

3. Invite People From Different Departments

A lot of sprint benefits come from bringing together a cross-functional team of people — UX designers, developers, product managers, researchers. Team members will be able to review the problem from different angles.

4. Prepare the Environment

While it’s possible to run a remote sprint, nothing beats the feeling of real people in a same physical space. The space itself should be good for this activity. A design sprint requires a dedicated space for the entire week with whiteboards to cover in user journey maps, sticky notes, sketches, storyboards, etc. Conference rooms aren’t normally the most creative spaces.

5. Have a Sprint Leader

The sprinter (or sprint leader) is a person who’s in charge of the event. Sprinters are the most critical people for the design sprint. These are the people that are responsible for creating the work in the sprint — they make sure that the team works efficiently.

During the Sprint

During the sprint the team should go from understanding a problem to building and test a solution for that problem.

6. Don’t Try to Build a Solution on Day One

It might be tempting to create a solution on the day one. But it’s better to avoid that temptation. Slow down a bit and try to build a solid foundation for your project first. By doing that you’ll be sure that you’re not wasting your team time focusing on the wrong part of the problem.

7. Start at the End

Fast forward and look ahead a year (or even further). Imagine what your product will look like. It will help you establish a long-term goal. You should also try to understand what can prevent you from achieving this long-term goal.

8. Ask the Experts

Invite experts to give talks to your sprint team. Those experts might be people from different departments or even external experts. Ask questions or interview them. The knowledge you get from experts will help you improve your understanding of the problem and ultimately refine your solution.

9. Take Notes in a “How Can We…” Format

When all team members use the phrase “How Can We…” to frame the core problem, it’ll be much easier to organize and process the notes.

10. Don’t Allow Anyone to Leave

Everyone needs to be a consistent participant in a sprint. When someone leaves early (or shows up in the middle of proceedings) the productivity of the whole team suffers significantly (in fact, the team might need to start from the beginning).

11. Document Your Progress

Try to write a daily summary after each day. This will help you look back at what was done and get better at designing sprints in the future.

12. Follow Time Limits

The sprint is a five-day process. That means that the team should find a solution to the problem and discover whether or not that solution actually works in five days.

Avoid breaking the sprint — make sure you’ll have five consecutive days. It doesn’t matter whether it’s Monday-Friday or Wednesday-Sunday, as long as the days are consecutive. It will create valuable momentum that will help you achieve your goals.

13. Avoid Using Devices in the Room

You won’t have much time during the sprint, so it shouldn’t be wasted on reading news or checking emails. Use devices during breaks or step outside the room to use them, if necessary.

14. Ask the Right Questions

The questions you ask during each phase of the Design Sprint always play a vital role in a final result. Ask questions that start with “Is…”, or “Can…”, “Will…” These questions can spark discussions which are great when you’re brainstorming solutions.

15. Use Crazy 8s Technique

The sprint team should explore all possible solutions to the problem. Sketching is a great way to go from a general understanding of a problem to a concrete solution that everyone can understand and evaluate.

To increase the speed of sketching it’s a good idea to use the Crazy 8s technique: Each team member takes an idea that most excites them and rapidly sketches eight variations for this idea in 8 minutes. For example, if you design a page layout, this might be eight variations of that layout. By the end of the day, you should have a tall stack of solutions to the problem.

16. Create a Realistic Prototype

The more realistic prototype will be the more valuable insights you’ll get from your users.

Here are a few tips for creating a prototype:

• The prototype shouldn’t be too complicated. You need to build a realistic solution — something you can put in front of your users and get a real reaction.
• To create a prototype use tools that you work with the most of the time. For example, if you usually use Adobe Photoshop or Sketch to create screen designs, use that tools to create a prototype. Remember that you need to move fast.
• It’s essential to divide the process of creating a prototype between team members. You don’t need to have a single person responsible for creating every single part of a prototype.
• Trial run your prototypes. A trial run of a prototype makes sure that it all makes sense. A trial run will help you fix some mistakes before the testing with users.

17. Validate any Prototype with Real Users

The validation stage answers the most critical question in product design — “How do I know if my work is any good?” During the validation phase, you should test your prototype with real users. Show a user the prototype you’ve built and watch their reactions.

• Validate your product in a format of 1 to 1 interviews. You need to have a series of such interviews (preferably, five interviews).
• You need to hire a user/customer who matches your target user profile.
• Make sure the entire team can watch the interview with a customer. The sprint team shouldn’t be in the same room during the interview, but they should be able to watch the translation and take the notes in the real time. The notes will reflect what goes well, and what didn’t go so well. It will help the team to find patterns.

Before Wrapping up the Sprint

18. Make a Plan

Talk with your team and make a plan about what to do next. This plan will help you to understand the next step for your product development process.

Conclusion

A design sprint is an excellent framework that can help a team move from idea to learning in just five days. Remember the concept of learning is at the core of any design sprint framework.

If you succeed, at the end of the sprint you will have a prototype that your product team can turn into a real product. But if you’ve failed…don’t worry, it’s also a great result. Now you know that you had a bad idea, you don’t need to invest your time in it. The great thing is that you were able to figure this out in just a few days, not months or years.

Featured image via Depositphotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead:

Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden:

• clip-path: polygon(0 0)
• display: none
• opacity: 0
• visibility: hidden

For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able to read the default radio element. This also prevents us from using the :focus pseudo-element on the hidden input, so those are out of the picture.

Which leaves us with option 1 and option 3. I sort of like option 1, because clip-path is fun. Clip-path creates a clipping region which defines what portion of an element is visible. This clipping region can be a basic shape or a url referencing a clipping path element.

And, while we’re on the topic of styling and accessibility, it’s worth checking out Scott O’Hara’s repo of accessibility-focused styled form components and Dave Rupert’s nutrition cards for accessible components.

Direct Link to Article — Permalink

The post Customise radio buttons without compromising accessibility appeared first on CSS-Tricks.

Tatum Design got our attention with their flawless designs lately, and we decided to share their work with you. They dare their clients to embrace elevation, and hopefully by the end of this article you will be ready to do it, too!

Who is Tatum Design?

Tatum Design is a Birmingham, Alabama based Design Studio that brings pride to their clients by creating brands that authentically represent who they are. Their team consists of:

We empower organizations to achieve greatness. When you work with us, you embrace elevation. You enlist in a league of brands who stand for excellence, because they understand that a company’s future is only as strong as the brand that guides it. Partnering with us creates momentum. We are visionaries who build brands that command attention, create favor and generate loyalty.

What do they do?

Well, the truth is, I don’t know if you are ready for it, but they do quite a variety of jobs. Not only that, but they do them right. Tatum Design specializes in: Company Naming

• Logo Design
• Brand Messaging
• Advertising
• Brand Videos
• Digital Content
• Websites, Packaging
• Print
• Brochures
• Sales Kits
• Signage Design
• Interior Experience
• Brand Strategy

Our work transcends industry. This means that no matter what unique challenges you face, you will receive strategic and crafted solutions designed to overcome them. When we work together, you commit to the next level, and we commit to getting you there.

Stay tuned if you are interested to see some of the studio’s amazing projects. Below, we have listed a tiny bit of their work, but following this link, it will take you to their full collection on their blog. Check this awesomeness out!

The Loop Tour

We positioned the brand as a design leader to an audience that is all about design.

Brownell

Read More at Tatum Design: Embrace Elevation AOTW#11

Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!

Here’s a typical (um) sticky situation:

See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen.

Sticky elements (position: sticky;) are very similar to fixed elements ( position: fixed;) in that they both maintain their position on the screen, even as the user scrolls up or down the page. The difference? A sticky element remains confined to the parent container it is in. Compare sticky example above with this one that uses the same concept using a fixed element instead:

See the Pen position:sticky (CSS) by CSS-Tricks (@css-tricks) on CodePen.

Say we want to create an effect where elements either slide in or out of view on scroll — sort of like parallax. For example, a header that slides out and a footer that slides in:

Well, guess what? We can do that with sticky elements!

See the Pen Slide In and Out Effect using “position:sticky” by Preethi Sam (@rpsthecoder) on CodePen.

How do we do that? Glad you asked. Let’s break it down.

HTML setup

There are three sticky elements in our example:

• The first one is the category header that slides under the body of the article once it reaches the top of the screen.
• The second is the title of the article and it stays visible at the top of the screen, while the body of the content disappears behind it on scroll (which is the typical sticky element behavior).
• The third element is a footer that slides out of the article and is revealed when the article is scrolled above a certain threshold.

Let’s see how it’s done. Here’s the HTML we’re working with… basically two articles:

<article>
  <div class="category">Category Header</div>
  <h1 class="title">Article 1 Title</h1>
  <p>Body content would go here.</p>
  <!-- More content -->
  <div class="footer">
    <p>Article 1 Footer</p>
  </div>
</article>

<article>
  <div class="category">Category Header</div>
  <h1 class="title">Article 2 Title</h1>
  <p>Body content would go here.</p>
  <!-- More content -->
  <div class="footer">
    <p>Article 2 Footer</p>
  </div>
</article>

The sticky CSS

The .category, .title, and .footer elements will get position:sticky; along with a placement property saying where on the screen they’ll start “sticking” when scrolled.

.category,
.title,
.footer {
  position: -webkit-sticky; /* Required for Safari */
  position: sticky;
  height: 50px;
}

.category {
  top: 0;
}

.title {
  top: 0;
}

.footer {
  bottom: 100px;
  z-index: -1;
}

I’m not doing much to the sticky elements, except styling them. They’re already doing what they need to do: stick to the screen. All that’s left is to create a cover and some space for the elements to come in and leave as the page scrolls.

There are probably a bunch of ways we can create a cover on the article that sticky elements can pass and hide under on a page — I went with a background-image.

article {
  background-image: linear-gradient(
    to bottom,
    transparent 50px,
    #F5A623 50px,
    #F5A623 calc(100% - 50px),
    transparent 0
  );
  margin: auto auto 50px auto;
}

The background linear gradient is applied to the article and runs from top to bottom, starting with 50px of transparency and a color change with a hard stop at 50px. The calc stuff? That’s how I’m telling the color to continue but leave 50px at the bottom. Then we go transparent again. That means we have two 50px transparent stripes, one at the top and one at the bottom with equal heights matching the heights of the category heading and the footer.

The category header and the article footer are the elements that slide in and out of the text, so their heights are the ones that determine how long the transparent stripes will be at the top and bottom of the gradient.

How this all comes together is that both the category header and article title stick to the screen when their tops align with the top of the viewport. The title stacks on top of the category header and, when it starts sticking at the top of the viewport, hides the category header altogether.

As for the footer, it’s already stuck 100px above the bottom of the screen (within the article’s boundary), but you won’t see it since it’s pushed behind the content using z-index:-1. It’ll be visible once we scroll past the beginning of the last transparent stripe of article’s background.

.footer {
  bottom: 100px;
  margin: 50px auto auto auto;
  z-index: -1;
}

Because the category header is just content with nothing to conceal with but the text itself, it’s a good idea to give the last sticky element (the footer) a top margin of 50px (to keep things equal) so that you won’t see it behind the category header while scrolling.

That’s it!

Now, of course, you’ll want to make this your own and change it up, like the dimensions, number of elements, and type of content. The key is to create those covers that allow your sticky elements to hide behind and be revealed as they pass through — again, probably different ways to go about that, but I went with transparent stripes in a gradient.

What, another example? Sure!

Here’s another example with horizontal scrolling (and a horizontal gradient), that might be ideal for applying this concept to mobile devices:

See the Pen Horizontal slide in and out effect using sticky elements by Preethi Sam (@rpsthecoder) on CodePen.

See how the food gets revealed as one article leaves the viewport and then is hidden when the next article passes over it?

Same sort of HTML setup:

<article>
  <div class="title">Article 1 Title</div>
  <p>Article content goes here.</p>
  <img class="image" src="/path/to/revealed/image.png">
</article>

<article>
  <div class="title">Article 2 Title</div>
  <p>Article content goes here.</p>
  <img class="image" src="/path/to/revealed/image.png">
</article>

I’m going to my linear gradient solution for creating the covers, this time going from left-to-right to account for a horizontal scroll:

article  {
  background-image: linear-gradient(
    to right,
    transparent 50px,
    #F5A623 50px,
    #F5A623 calc(100% - 50px),
    transparent 0
  );
}

.title,
.image  {
  position: sticky;
  position: -webkit-sticky;
  z-index: -1;
  width: 50px;
}

.title  {
  left: 20px;
  margin-right: 52px;
}

.image  {
  left: 150px;
}

Notice again that we’re going with the same two 50px transparent stripes as before — the only difference being that we’re applying it to the width instead of the height.

Both of the sticky elements (the title and image) will slide under and through the article. So, in order to avoid overlapping them during scroll, the title gets a right margin that’s equal to the image’s width, which is 50px (plus an additional 2px for a cleaner line in Chrome).

Here’s what’s going on: as we scroll horizontally, the title sticks 20px from the screen’s left edge and the image sticks 150px from the same. Because they both have z-index: -1;, they’ll disappear under the article (well, the background gradient) — they are hidden as they pass through the solid color of the gradient and are revealed by the transparent stripes.

OK, one more example

Before wrapping up, let me show you one more example that inspired this post. It’s a site footer that reveals itself on scroll. I first saw this design at Ryan Seddon’s website a long time ago.

This design is usually done by using a “fixed” footer that’s given some space at the end of the page to come out to, using margin. I thought if fixed elements can do that for the whole page, then maybe sticky elements can do something similar for individual elements — and hence what I came up with so far.

Consequently, we can accomplish this same effect using the sticky techniques we’ve covered so far.

First, our HTML:

<main>
  <h1>Site Title</h1>
  <p>Site content</p>
</main>
<footer>
  Site Footer
</footer>

html {
  background-color: #fff;
}

body {
  background-image: linear-gradient(
    to top,
    transparent 60px, 
    #fff 60px, 
    #fff 0
  );
}

footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 50px;
  padding: 5px 0;
  z-index: -1;
}

See the Pen Page footer slide-out using “position:sticky” by Preethi Sam (@rpsthecoder) on CodePen.

A sticky footer and background gradient on the body does the trick.

The post Creating sliding effects using sticky positioning appeared first on CSS-Tricks.

This is a great explanatory microsite by Sam Richard.

CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds. Much like Service Workers are a low-level JavaScript API for the browser’s cache, Houdini introduces low-level JavaScript APIs for the browser’s render engines.

What’s important to know is that Houdini is broken up into these different parts, each of which will be implemented separately. We have an intro to the paint API here and a number of other articles that touch on it. Here’s a very cool collection Dan Wilson put together of Houdini + Custom Properties.

Direct Link to Article — Permalink

The post Interactive Introduction to CSS Houdini appeared first on CSS-Tricks.