User Experience (UX) is more than the arrangement of pages on a website. It is the combined impact that your brand creates for potential buyers.

It is the feeling that these buyers get when they interact with your content. It is the sum collection of impulses that will lead to their making a purchase…or not. In short, UX is one of the most absolutely fundamental aspects of the user-website (and by extension, the user-brand) relationship, and one that no company can afford to treat thoughtlessly.

There are countless ways to approach UX design, from focussing on an intuitive site layout to creating eye-popping graphics or persuasive, compelling text. But as video content continually proves to be one of the most popular and successful forms of content marketing, why not integrate it with your existing User Experience for a more engaging multi-channel approach? Through the power of video content, there’s no limits to the ways that you can draw in new potential customers, keep them engaged longer than ever before, and ultimately convert them to brand loyalists.

To help you out, here are five effective concepts for improving your website’s UX with video content:

1. Welcome Video

Your homepage is arguably the most important part of your User Experience, because this is the very first impression that potential buyers will have of your brand. Don’t let this opportunity slip away by not taking time to optimize your homepage’ as much as possible – and what better way to do so than with a stylish welcome video? Studies show that viewers who watch a video have a 95% retention rate of the information they receive from it, versus just 10% when that same information is read in text form. That’s why a welcome video will let you quickly introduce all the most important aspects of your brand or company in one succinct piece of content that audiences are guaranteed to retain. And even a wordless one, like the background video featured on the Lemonlight homepage, can help hook viewers right away by showing off your brand’s aesthetic.

2. Product Videos

When potential buyers click through products on most websites, they are greeted with static, ugly images and dull descriptions. With video, you can dramatically improve their perception of your products or services and stand out from the crowd. Create short-form content pieces that illustrate the benefits of each product in action, like mini commercials, rather than trusting your audience to understand based off of a couple grainy photos. These videos will help build viewers’ faith that your product will work for their needs, and act as a key deciding factor between yours and other similar products. The majority of customers prefer demo videos to written text, so give them what they already want and substantially improve your engagement along the way!

3. Testimonial Videos

Brands love to feature positive reviews and glowing endorsements as part of their UX, but walls of stars awarded by some obscure magazine will only take you so far. Audiences connect much more with a human face than a well-respected industry title, so why not create video testimonials where your most enthusiastic customers can authentically express their love for what you do? Customer testimonials are already considered to be the most effective content marketing tactic by industry professionals, and by combining them with videos they become exponentially more useful for humanizing your brand. Remember, people don’t buy from companies. They buy from other people – which is why testimonial videos always put those people front and center.

4. Team Videos

We already mentioned that having a warm human presence is essential to connecting with your customers. After all, nobody wants to make a purchase from some cold, faceless corporation if they don’t have to. That’s why the next natural step after using video to introduce your favorite customers (via their testimonials) is to use it to introduce your team. Whether it’s a quick to-camera interview with your CEO featured on an “About Us” section or a more playful event montage from your annual office holiday party, team videos are terrific for showing that audiences can trust you – because you’re just like them! They can also help illuminate every individual’s role in your company so that viewers have a better, more confident understanding of what they will receive by investing in your process.

5. Case Study Videos

Like a combination of product and testimonial videos, case study videos allow you to break down the impact that your product/service has had in the past on real, paying customers. Rather than subject potential buyers to dry, static graphs or spreadsheets, a case study video brings that same essential data to life in an invigorating way that is guaranteed to create deeper retention. Enhance your case study video with animation for an added boost that can make even the most intimidating numbers fun to engage with.

When you add video to your User Experience, you are not just redesigning your website – you are taking a bold, strategic approach to wooing potential customers across the spectrum. Try any of these ideas for a leg up on the competition, then watch conversion rates grow as your audience discovers just how brilliantly they can engage with your brand.

Unfortunately, over half (54%) of the businesses surveyed for the 2018 State of SMB Cybersecurity report believe they’re too small to be a target for hackers. But the data paints a different picture:

• 67% of small- and medium-sized businesses were attacked in 2018;
• 82% of those attacked had antivirus software installed on their systems;
• 72% had intrusion detection systems in place.

In reality, businesses aren’t failing to secure their websites because they believe they’re too small to attract the attention of hackers. The truth is, most point to a lack of resources to explain why they forego security. Here are the top three reasons given:

1. We don’t have enough personnel to manage security;
2. We don’t have enough money to pay for it;
3. We don’t know a thing about security or where to start.

But here’s the thing: websites are not difficult or expensive to secure. You just need to know which security measures are absolutely necessary for a website to have and where to procure them.

Here’s where you should start…

Find a Secure Web Host

Your choice of web host can affect your website in a number of ways, including how well it’s protected from hackers.

For starters, if security is at all a concern for you (or the client you’re building the site for), then a shared hosting plan won’t be ideal. If any website on the shared server is attacked, it could easily spread to your own.

Secondly, if your web host doesn’t prioritize security on its end, it’s a good idea to look elsewhere. While many web hosts do a good job of this, be wary of the ones who provide no information about their dataccenters, how their assets are secured, or what level of security has been implemented (e.g. physical facility monitoring, server firewalls, etc.).

Finally, look for a web hosting plan with built-in security features. It’s not necessary for hosts to go above and beyond with this, but it’s a good sign when they’re willing to lend a hand.

Use a SSL Certificate

One of those security features your web host should be able to throw in (even if it’s a paid upgrade) is an SSL certificate. It’s a form of encryption that turns a regular ol’ unsecured HTTP website:

Into one with an extra layer of protection and an HTTPS address:

You can see how my Chrome address bar calls attention to the differences in security. HTTP websites receive a “Not Secure” label while HTTPS get a trust mark either in the form of a lock or a green label.

Google’s algorithm does something similar when it ranks websites, penalizing those without this security feature and rewarding those that have it.

Use Well-Coded Software

While you may be able to control how you design or code a website on the front end, you may not have a lot of control over the code behind it all. What’s more, any time you add a new extension, the integrity of that code now has a chance to affect your site as well.

To start, choose your software wisely, including:

• Your website builder solution or content management system;
• Your theme or design template;
• Your extensions or plugins.

Even if you don’t know how to review the integrity of the code, look at user reviews. Are there any glaring issues with vulnerabilities introduced by the software? If so, steer clear.

In addition, the software developers should always be working to improve it. That’s why, depending on which software you use, you may see the occasional update to patch bugs, performance issues, and vulnerabilities.

If you don’t see these updates or the provider has a reputation for not supporting their software, that’s another reason to find another solution.

Maintain a Strongly-Enforced Password Policy

With each new application we add to our workflow, a new password needs to be generated. And while you might know that it’s bad practice to use the same or similar passwords across all applications, do your clients? Or anyone else with access to the website?

A weak login is the easiest way for a hacker to get inside a website. By enforcing a password policy across the board, you can help safe-guard against brute force attacks.

Now, some site builder solutions enable you to hide the login URL or to implement two-factor authentication. It’s a good idea to take advantage of those if you can. I’d also suggest requiring stronger passwords.

A long string of letters, numbers, symbols, and capitalization will help hackers from being able to guess your users’ login information.

Use a Spam Blocker

Even if spam isn’t too much of a concern, it’s a good idea to keep it from ever going near your website, even if just to remove the nuisance factor.

To protect your contact and comment forms from spam, there are a few things you can do. You can use a spam-blocking plugin, which turns spam into an out-of-sight, out-of-mind matter. You can use a reCAPTCHA like the one used on this website:

It’s just an extra step humans need to take to confirm their human-ness.

You can also implement a honeypot. Essentially, it’s a hidden field laid down as a trap in a form. Humans can’t see it and, so, they won’t know to fill it out. Spam bots, however, will see it and fill it out.

All-in-One Security Plugin

Ideally, your website should be running on a secure server. However, it’s not really the host’s job to ensure that your website is protected from every angle.

To make sure your website is covered as much as possible, look for a high-quality, all-in-one security plugin. It should include things like:

• A firewall
• Brute force protection
• Spam prevention
• User registration and access limitations
• Database and file security

It should also have a monitoring system built it. It will alert you to things like too many failed login attempts, unexpected file changes, and so on.

Always Backup Your Files

Finally, don’t forget to have a backup system in place. If all of the security measures above fail, you’ll want a recent backup of the website you can fall back to in order to restore your website to safety.

Some web hosts may include backups in your web hosting plan, but it’s also a good idea to automate the process with a backup plugin and then store frequently saved copies of your site in a safe and remote location (like a free Amazon S3 account).

Why Website Security Should Concern You

Hackers are creative. They can get into a website from a comment form, through the login page, and from an exposed file on the backend (among other methods). If a vulnerability exists, they will find it.

Unfortunately, when a website is left open to attack, it can have devastating consequences for a business:

• Loss of control over the website
• Stolen records
• Loss of customer trust
• Damaged reputation
• Google blacklisting
• And more

As the designer or developer who built the website for them, failing to properly secure it could be just as harmful to your business. So, it’s best to know what you can do to implement, at the very least, a minimum amount of security to every website you build.

Featured image via Unsplash.

Source

<div class="container">
   <div class="row">
      <div class="col-12 col-md-4">Column 1</div>
      <div class="col-12 col-md-4">Column 2</div>
      <div class="col-12 col-md-4">Column 3</div>
   </div>
</div>

/*
Undecorated design patterns
*/

@import 'objects/box';
@import 'objects/container';
@import 'objects/layout';

/*
UI components
*/

@import 'components/button';
@import 'components/expander';
@import 'components/typography';

/*
Highly specific helper classes
*/

@import 'utilities/alignments';
@import 'utilities/widths';

/*
Undecorated design patterns
*/
// @import 'objects/box';
// @import 'objects/container';
// @import 'objects/layout';

/*
UI components
*/
// @import 'components/button';
@import 'components/expander';
// @import 'components/typography';

/*
Highly specific helper classes
*/
// @import 'utilities/alignments';
// @import 'utilities/widths';

<div class="c-expander">
   <div class="o-box o-box--spacing-small c-expander__trigger c-expander__header" tabindex="0">
      <div class="o-layout o-layout--fit u-flex-middle">
         <div class="o-layout__item u-width-grow">
            <h2 class="c-type-echo">Toggle Expander</h2>
         </div>
         <div class="o-layout__item u-width-shrink">
            <div class="c-expander__header-icon"></div>
         </div>
      </div>
   </div>
   <div class="c-expander__content">
      <div class="o-box o-box--spacing-small">
       Lorum ipsum
         <p class="u-align-center">
            <button class="c-expander__trigger c-button">Close</button>
         </p>
      </div>
   </div>
</div>

@import 'breakpoints';
@import 'spacing';
@import 'imports';

$imports: (
   object: (
    'box',
    'container',
    'layout'
   ),
   component: (
    'button',
    'expander',
    'typography'
   ),
   utility: (
    'alignments',
    'widths'
   )
);

$imports: (
   object: (
    //'box',
    //'container',
    //'layout'
   ),
   component: (
    //'button',
    'expander',
    //'typography'
   ),
   utility: (
    //'alignments',
    //'widths'
   )
);

@mixin render() {

}

@mixin render($name, $layer) {
   @if(index(map-get($imports, $layer), $name)) {
      @content;
   }
}

@include render('button', 'component') {
   .c-button {
      // styles et al
   }

   // any other class declarations
}

$layer: null !default;
@mixin render($name) {
   @if(index(map-get($imports, $layer), $name)) {
      @content;
   }
}

$layer: 'object';

@import 'box';
@import 'container';
@import 'layout';

$layer: 'component';

@import 'button';
@import 'expander';
@import 'typography';

$layer: 'utility';

@import 'alignments';
@import 'widths';

@include render('button') {
   .c-button {
      // styles et al
   }

   // any other class declarations
}

@include render('button') {
   .c-button {
      // styles et al
   }

   // any other class declarations
}

@include render('widths') {

// GENERATE STANDARD WIDTHS
//---------------------------------------------------------------------

// Example: .u-width-1/3
@include create-widths($utility-widths-sets);

// GENERATE RESPONSIVE WIDTHS
//---------------------------------------------------------------------

// Create responsive variants using settings.breakpoints
// Changes width when breakpoint is hit
// Example: .u-width-1/3@md

@each $bp-name, $bp-value in $mq-breakpoints {
   @include mq(#{$bp-name}) {
      @include create-widths($utility-widths-sets, @, #{$bp-name});
   }
}

// End render
}

$dependencies: (
   expander: (
      object: (
         'box',
         'layout'
    ),
    component: (
         'button',
         'typography'
    ),
    utility: (
         'alignments',
         'widths'
    )
   )
);

@mixin dependency-setup() {
   @each $componentKey, $componentValue in $dependencies {
    
   }
}

@mixin dependency-setup() {
   $components: map-get($imports, component);
   @each $componentKey, $componentValue in $dependencies {
      @if(index($components, $componentKey)) {
         @each $layerKey, $layerValue in $componentValue {

         }
      }
   }
}

@mixin dependency-setup() {
   $components: map-get($imports, component);
   @each $componentKey, $componentValue in $dependencies {
       @if(index($components, $componentKey)) {
           @each $layerKey, $layerValue in $componentValue {
               @each $partKey, $partValue in $layerValue {
                   @if not index(map-get($imports, $layerKey), $partKey) {
                       $imports: map-merge($imports, (
                           $layerKey: append(map-get($imports,  $layerKey), '#{$partKey}')
                       )) !global;
                   }
               }
           }
       }
   }
}

@mixin dependency-setup() {
   ...
}
@include dependency-setup();

<div class="o-media o-media--spacing-small">
   <div class="o-media__image">
     <img src="url" alt="Image">
   </div>
   <div class="o-media__text">
      Oh!
   </div>
</div>

$dependencies: (
   expander: (
       object: (
           box: (
               'o-box--spacing-small'
           ),
           layout: (
               'o-layout--fit'
           )
       ),
       component: (
           button: true,
           typography: (
               'c-type-echo',
           )
       ),
       utility: (
           alignments: (
               'u-flex-middle',
               'u-align-center'
           ),
           widths: (
               'u-width-grow',
               'u-width-shrink'
           )
       )
   )
);

$global-filter: ();

$global-filter: (
   'o-box--spacing-regular@md',
   'u-align-center',
   'u-width-6/12@lg'
);

@if not index(map-get($imports, $layerKey), $partKey) {

}

@each $class in $partValue {
   $global-filter: append($global-filter, '#{$class}', 'comma') !global;
}

@debug $global-filter;

DEBUG: "o-box--spacing-small", "o-layout--fit", "c-box--rounded", "true", "true", "u-flex-middle", "u-align-center", "u-width-grow", "u-width-shrink"

@mixin filter($class) {
   @if(index($global-filter, $class)) {
      @content;
   }
}

@include filter('o-myobject--modifier') {
   .o-myobject--modifier {
      color: yellow;
   }
}

@include filter('o-layout__item--fit-height') {
    .o-layout__item--fit-height {
        align-self: stretch;
    }
}

// Changes alignment when breakpoint is hit
// Example: .u-align-left@md
@each $bp-name, $bp-value in $mq-breakpoints {
    @include mq(#{$bp-name}) {
        @include filter('u-align-left@#{$bp-name}') {
            .u-align-left@#{$bp-name} {
                text-align: left !important;
            }
        }

        @include filter('u-align-center@#{$bp-name}') {
            .u-align-center@#{$bp-name} {
                text-align: center !important;
            }
        }

        @include filter('u-align-right@#{$bp-name}') {
            .u-align-right@#{$bp-name} {
                text-align: right !important;
            }
        }
    }
}

.o-box--spacing-disable-left,
.o-box--spacing-horizontal {
    padding-left: 0;
}

@include filter('o-box--spacing-disable-left', 'o-box--spacing-horizontal') {
    .o-box--spacing-disable-left,
    .o-box--spacing-horizontal {
        padding-left: 0;
    }
}

@mixin filter($class...) {
    @if(type-of($class) == 'arglist') {
        @each $item in $class {
            @if(index($global-filter, $item)) {
                @content;
            }
        }
    }
    @else if(index($global-filter, $class)) {
        @content;
    }
}

$enable-all-classes: false;

@import 'settings/core';
@import 'tools/core';
@import 'generic/core';
@import 'elements/core';
@import 'objects/core';
@import 'components/core';
@import 'utilities/core';

@mixin filter($class...) {
    @if($enable-all-classes) {
        @content;
    }
    @else if(type-of($class) == 'arglist') {
        @each $item in $class {
            @if(index($global-filter, $item)) {
                @content;
            }
        }
    }
    @else if(index($global-filter, $class)) {
        @content;
    }
}

$layer: null !default;
@mixin render($name) {
    @if($enable-all-classes or index(map-get($imports, $layer), $name)) {
        @content;
    }
}

$imports: (
     object: (
        'box',
        'container'
        // 'layout'
     ),
     component: (
        // 'button',
        'expander'
        // 'typography'
     ),
     utility: (
        // 'alignments',
        // 'widths'
     )
);

$global-filter: (
    'o-box--spacing-regular'
);

In this week’s roundup, variable fonts get oblique, a new browser extension for linting, and the very first version of CSS Modules.

Use font-style: oblique on variable fonts

Some popular variable fonts have a 'wght' (weight) axis for displaying text at different font weights and a 'slnt' (slant) axis for displaying slanted text. This enables creating many font styles using a single variable font file (e.g., see the “Variable Web Typography” demo page).

You can use font-style: oblique instead of the lower-level font-variation-settings property to display slanted text in variable fonts that have a 'slnt' axis. This approach works in Chrome, Safari, and Firefox.

/* BEFORE */
h2 {
  font-variation-settings: "wght" 500, "slnt" 4;
}

/* AFTER */
h2 {
  font-weight: 500;
  font-style: oblique 4deg;
}

See the Pen
Using font-style: oblique on variable fonts by Šime Vidas (@simevidas)
on CodePen.

The new webhint browser extension

The webhint linting tool is now available as a browser devtools extension for Chrome, Edge, and Firefox (read Microsoft’s announcement). Compared to Lighthouse, one distinguishing feature of webhint are its cross-browser compatibility hints.

In other news…

• CSS Modules V1 is a new proposal from Microsoft that would extend the JavaScript modules infrastructure to allow importing a CSSStyleSheet object from a CSS file (e.g., import styles from "styles.css";) (via Thomas Steiner)
• Web apps installed in the desktop version of Chrome can be uninstalled on the about:apps page (right-click on an app’s icon to reveal the Remove... option) (via Techdows)
• Because of AMP’s unique requirements, larger news sites such as The Guardian should optimally have two separate codebases (one for the AMP pages and one for the regular website) (via The Guardian)

Read more news in my new, weekly Sunday issue. Visit webplatform.news for more information.

The post Weekly Platform News: CSS font-style: oblique, webhin browser extension, CSS Modules V1 appeared first on CSS-Tricks.

It is technically true that anyone can cook. But there’s a difference between actually knowing how to prepare a delicious meal and hoping for the best as you throw a few ingredients in a pot. Just like web development, you might know the ingredients—, background-color, .heading-1—but not everyone knows how to turn those ingredients into a beautiful, easy-to-use website.

Whenever you use HTML and CSS, you are designing—giving form and structure to content so it can be understood by someone else. People have been designing for centuries and have developed principles along the way that are applicable to digital interfaces today. These principles manifest in three key areas: how words are displayed (typography), how content is arranged (spacing), and how personalty is added (color). Let’s discover how to use each of these web design ingredients through the mindset of a developer with CSS properties and guidelines to take the guesswork out of web design.

Typography

Websites that are easy to read don’t happen by mistake. In fact, Taimur Abdaal wrote an entire article on the topic that’s chock-full of advice for developers working with type. We’re going to focus specifically on two fundamental principles of design that can help you display words in a more visually pleasing and easy-to-read way: repetition and hierarchy.

Use repetition for consistency and maintainability

Repetition comes fairly naturally on the web thanks to the importance of reusability in software. For example, CSS classes allow you to define a particular style for text and then reuse that style across the site. This results in repeating, consistent text styles for similar content which helps users navigate the site.

If, for example, you are working on styles for a new paragraph, first consider if there is existing content that has a similar style and try to use the same CSS class. If not, you can create a new class with a generic name that can be repeated elsewhere in your site. Think .paragraph--emphasize as opposed to .footer__paragraph--emphasize or .heading-1 as opposed to .hero__site-title. The first examples can be used across your site as opposed to the second which are scoped to specific components. You can even add a prefix like text- to indicate that the class is used specifically for text styles. This method will reduce the CSS file size and complexity while making it much easier to update global styles in the future.

In design, there are endless ways to experiment with styles. Designers can sometimes go a little crazy with their font styles by creating numerous slight variations of similar styles. However, in code, it’s valuable to restrict text styles to a minimum. Developers should urge designers to combine similar styles in order to reduce code weight and increase reusability and consistency.

Hierarchy provides a clear visual order to content

Hierarchy is something you really only notice when it’s not there. In typography, hierarchy refers to the visual difference between various pieces of text. It’s the distinction between headings, paragraphs, links, and other text styles. This distinction is made by choosing different fonts, colors, size, capitalization, and other properties for each type of text content. Good hierarchy makes complex information easier to digest and guides users through your content.

Out of the box, HTML provides some hierarchy (like how the font size of headings gets smaller as you go from

to

), but CSS opens the door for even more creativity. By giving

tags an even larger font size, you can quickly establish greater difference in size between heading levels—and therefore more hierarchy. To create more variety, you can also change the color, text-align, and text-transform properties.

A note on choosing fonts

With typography, we need to make sure it is as easy to read as possible. The greatest overall factor in readability is the font you choose—which is a huge topic. There are many factors that determine how “readable” a font is. Some fonts are made specifically to be used as headings or short lines of text; these are called “display” fonts, and they often have more personality than fonts designed to be used for text. Unique flourishes and quirks make display fonts harder to read at small sizes and when part of a large paragraph. As a rule of thumb, use a more straightforward font for text and only use display fonts for headings.

If you’re in a pinch and need a readable font, try Google Fonts. Add a paragraph of text to the preview field and size it roughly how it will display on your website. You can then narrow down your results to serif or sans-serif and scan the list of fonts for one that is easy to read. Roboto, Noto Sans, Merriweather, and PT Serif are all very readable options.

CSS properties for better readability

• The main paragraph font-size should be between 16pxand 18px (1em and 1.25em) depending on the font you choose.
• Manually set line-height (the vertical space between two lines of text) to make your text less cramped and easier to read. Start with line-height: 1.25 (that is 1.25 times the font-size) for headings and at least 1.5 for paragraphs (but no more than 1.9) and adjust from there. The longer the line of text, the larger the line-height should be. To keep your text flexible, avoid adding a unit to your line-height. Without a unit the line-height you set will be proportional to your font-size. For example, line-height: 1.5 and font-size: 18px would give you a line height of 27 pixels. If you changed your font size to font-size: 16px on smaller screens, the computed line height would then change to 24 pixels automatically.

• Pay attention to how many characters are in a line of text and aim for 45 and 75 characters long (including punctuation and spaces). Doing so reduces reading fatigue for your users by limiting the eye and head movement needed to follow a line of text. With the variable nature of the web, it’s impossible to completely control line length, but you can use max-width values and breakpoints to prevent lines of text from getting too long. Generally speaking, the shorter the line of text, the faster it will be to scan for quick reading. And don’t worry too much about counting the characters in every line. Once you do it a few times, you’ll develop a sense for what looks right.

Spacing

After looking at typography, you can take a step back and examine the layout, or spacing, of your content. Movement and proximity are two design principles that relate to spacing.

Movement is about content flow

Movement refers to how your eye moves through the page or the flow of the page. You can use movement to direct a user’s eye in order to tell a story, point to a main action item, or encourage them to scroll. This is done by structuring the content within individual components and then arranging those components to form the layout of the page. By paying attention to how your eye moves through content, you can help users know where to look as they scan the page.

Unlike books, which tend to have very linear structure, websites can be more creative with their layout—in literally endless ways. It is important to make sure you are intentional with how you layout content and do so in a way which guides users through your content as easily as possible.

Consider these three examples above. Which is the easiest to follow? The arrangement on the left draws your eye off the screen to the left due to how the image is positioned which makes it hard to find the button. In the center option, it’s easy to skip over the headline because the image is too large in comparison. On the right, the heading draws your attention first and the image is composed so that it points to the main action item—the button.

White space is a helpful tool for creating strong movement, but it’s easy to use too much or too little. Think about how you are using it to direct the user’s eye and divide your content. When used well, users won’t notice the whitespace itself but will be able to better focus on the content you are presenting. For example, you can use whitespace to separate content (instead of a colored box) which results in a less cluttered layout.

Proximity establishes relationships

When objects are closer together, they are perceived as being related. By controlling spacing around elements, you can imply relationships between them. It can be helpful to create a system for spacing to help build consistency through repetition and avoid the use of random numbers. This system is based off the default browser font size (1rem or 16px) and uses distinct values that cover most scenarios:

• 0.25rem (4px)
• 0.5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4rem (64px)

You can use Sass or CSS variables so that the values are kept consistent across the project. A system might look like this—but use whatever you’re comfortable with because naming things is hard:

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

Color conveys personality and calls attention

Color greatly affects a website’s personality. When used well, it gives pages life and emotion; used poorly, it can distract from the content, or worse, make it inaccessible. Color goes hand in hand with most design principles. It can be used to create movement by directing users’ eyes and can be used to create emphasis by calling attention to the most important action items.

A note on choosing colors

With color, it can be hard to know where to start. To help, you can use a four-step process to guide your color choices and build a color palette for the site.

Step 1: Know your mood

You have to know the mood or attitude of your site and brand before choosing colors. Look at your content and decide what you are trying to communicate. Is it funny, informative, retro, loud, somber? Typically, you can boil down the mood of your site to a few adjectives. For example, you might summarize The North Face as adventurous and rugged while Apple would be minimalistic and beautiful.

Step 2: Find your main color

With your mood in mind, try to visualize a color that represents it. Start with the color’s saturation (how intense the color is) and brightness (how close the color is to white or black). If your mood is upbeat or flashy, a lighter (more saturated) color is probably best. If your mood is serious or reserved, a darker (less saturated) color is better.

Next, choose a hue. Hue refers to what most people think of as colors—where does is fall on the rotation of the color wheel? The hue of a color is what gives it the most meaning. People tend to associate hues with certain ideas. For instance, red is often associated with power or danger and green relates to money or nature. It can be helpful to look at similar websites or brands to see what colors they use—although you don’t need to follow their lead. Don’t be afraid to experiment!

Step 3: Add supporting colors

Sometimes, two or three main colors are needed, but this is not necessary. Think about the colors of different brands. Some use a single color, and others have a main color and one or two that support it. Coca-Cola uses its distinct red. IKEA is mostly blue with some yellow. Tide is orange with some blue and yellow. Depending on your site’s mood, you might need a few colors. Try using a tool like Adobe Color or Coolors), both of which allow you to add a main color and then try different color relationships, like complementary or monochromatic, to quickly see if any work well.

Step 4: Expand your palette

Now that you’ve narrowed things down and found your main color(s), it’s time to expand your scope with a palette that gives your project versatility and constraint—here’s a methodology I’ve found helpful. Tints and shades are the trick here. Tints are made by mixing your main color(s) with white, and shades are made by mixing with black. You can quickly create an organized system with Sass color functions:

$main-color:          #9AE799;

$main-color-lightest: lighten($main-color, 20%);
$main-color-lighter:  lighten($main-color, 15%);
$main-color-light:    lighten($main-color, 10%);

$main-color-dark:     darken($main-color, 40%);
$main-color-darker:   darken($main-color, 50%);
$main-color-darkest:  darken($main-color, 60%);

To round out your palette, you’ll need a few more colors, like a white and black. Try creating a “rich black” using a dark, almost black shade of your main color and, on the other end of the spectrum, pick a few light grays that are tinted with your main color. Tinting the white and black adds a little more personality to your page and helps create a cohesive look and feel.

Last but not least, if you are working on an interactive product, you should add colors for success, warning, and error states. Typically a green, yellow, and red work for these but consider how you can adjust the hue to make them fit better with your palette. For example, if your mood is friendly and your base color is green, you might want to desaturate the error state colors to make the red feel less negative.

You can do this with the mix Sass color function by giving it your base color, the default error color, and the percentage of base color that you want to mix in with the error color. Adding desaturate functions helps tone down the colors:

$success: mix($base-color, desaturate(green, 50%), 50%);
$warning: mix($base-color, desaturate(yellow, 30%), 5%);
$error:   mix($base-color, desaturate(red, 50%), 20%);

When it comes to the web, there’s one color principle that you have to pay extra attention to: contrast. That’s what we’ll cover next.

Contrast

Color contrast—the difference in saturation, brightness, and hue between two colors—is an important design principle for ensuring the web is accessible to those with low vision or color blindness. By ensuring there is enough contrast between your text and whatever is behind it on your site will be more accessible for all sighted users. When looking at accessibility, be sure to follow the color contrast guidelines provided by W3C‘s Web Content Accessibility Guidelines (WCAG). There are many tools that can help you follow these guidelines, including the inspect panel in Chrome’s dev tools.

Now, it’s time to put these principles to practice! You can use these processes and CSS tips to help take the guesswork out of design and create better solutions. Start with what you are familiar with, and eventually, the design principles mentioned here will become second nature.

If you’re looking for even more practical tips, Adam Wathan and Steve Schoger wrote about some of their favorites.

The post Design Principles for Developers: Processes and CSS Tips for Better Web Design appeared first on CSS-Tricks.

(This is a sponsored post.)

If you’re on CSS-Tricks, we can probably bet that you’re in the process of building a really cool website. You’ve spent your time creating content, applying appropriate UX design techniques, coding it to perfection, and now you’re about ready to launch it to the world.

A great website deserves a domain name that represents all that you’ve built. With Hover, you have the flexibility to choose a domain name that truly reflects that. We offer not only the go-to domain name extensions, like .com and .org, or the familiar country code domain extensions, like .uk or .us, or .ca, but also the more niche extensions. We have .dev for developers, .design for designers, and .dog for your dog (yes, really!).

We have hundreds of domain names to choose from and all eligible domains come with free Whois privacy protection. We’re proud of the modern UX/UI and fabulous customer service we offer our customers. Find your next domain name with Hover!

Get Started

Direct Link to Article — Permalink

The post Get the Best Domain Name for your New Website appeared first on CSS-Tricks.

It’s 2019, if you don’t have a video marketing strategy, you’re already behind. In order to make your brand succeed, video is no longer just helpful, it’s a must.

Since video isn’t a one-size-fits-all product, you can include it in your marketing plan easily and adapt it to your audience and your goals. With all the benefits video has shown it can produce, it only makes sense to make room for it in your plans. Don’t fall further behind and get your strategy right before you start making random video content.

Why Is Video So Important in 2019?

In the past, text posts may have been the norm online, but through the years, our way of communicating has become a lot more visual. This isn’t by mere coincidence either. Creating images and video content have become easier thanks to advances in technology. For example, video making tools are everywhere and can produce great results. Posting and sharing videos online has also become much simpler than in the past, encouraging people to do it more.

Marketers also know what they’re doing when they opt to use video to communicate with their audience instead of a long text post. It’s easy enough to say that video is more visually appealing, but the stats also show how significant its impact is. In fact, 93% of marketers have gotten new customers as a result of a video posted to social media and 72% of businesses attribute improved conversion rates to video content. With stats like this, it only makes sense to include video in your already existing marketing plan.

Define Your Target Audience

Now that you’re convinced you need a video marketing strategy, there’s more work to be done before you start making your first video. Put down the camera and first define the audience you want to reach with your content. Without specifying this basic target, your video efforts won’t have much guidance and won’t hit the mark. If you already have a marketing plan in place, use this to help you define your target and your goals as well.

To decide who your target is, you can start by selecting a broad group you want to reach with your message. This can be something as simple and general as women, men, or children. Instead of stopping there, narrow this group down even further using other characteristics like age, location, and niche interests. This will help you understand your audience much better, making it easier to deliver a video that really catches their eye.

Including video on landing pages and on your website is great practice, but you’ll also want to pay close attention to social media. Video content made specifically for your social accounts is a must because of the tremendous impact it can have. Each platform has pros and cons, different demographics, and a different reach, so get to know these thoroughly before you decide which platform will help you reach your target audience best.

What’s Your Objective?

After defining your target audience, you will also need to have a clearly established objective for your video content. This means you shouldn’t make videos just to make videos. Be sure each one has a specific goal you’re working to achieve. Common objectives for a video marketing strategy may include things like increased engagement, increased follower count, increased exposure, or increased revenue.

Once you have your goal clearly defined, creating targeted video content will be much easier. You will then be better prepared to develop a concept for your video that will help you reach that goal more effectively. Think of it as a guide for your efforts or literally a target you’re aiming at. For example, if your goal is to get the word out about a sale you’re having, then a promo video that clearly highlights your best deals will be ideal. Not sure what type of video to use? Check out some of the most common types below:

• Promo video: Use this type of video to promote your brand, a new product, a sale, or anything else.
• Intro video: An intro video, like a logo animation, is a great option to introduce a new brand or project. If you don’t have animation skills, create a cool intro easily using and intro maker.
• Testimonial video: These are a great way to show potential customers the great reviews you’ve received from already existing customers.
• Step by step video: Teach your followers how to use your products or share a cool tutorial with them. Create these types of videos easily with a slideshow maker.

Posting Your Video Content on Social Media

Where you post your video matters. As we mentioned earlier, creating one video and posting it everywhere won’t have the best results. Since each social media platform has its quirks, you’ll need to make content that makes sense for each one. It’s also worth noting that each platform has different guidelines for videos, including time limits, ratios, and posting possibilities. What you can do is come up with a concept and adapt it to all of the platforms you want to post on.

To help you make the perfect content for each social networking site, check out these basic guidelines for the most important social networks:

• Facebook: This social network is popular with just about all demographics. It’s great for running targeted video ads because of it’s easy to use ads manager tool. You can post landscape, portrait, or even 1:1 aspect ratio videos. Facebook has tons of options for video posting, including regular in-feed videos, Facebook stories, Facebook canvas, video carousel ads, and so much more.
• Instagram: Instagram is loved by millennials, but keep in mind that Gen X is also fond of this very visual platform. While you can post vertical, horizontal, or square videos on Instagram, the 1:1 ratio square videos are what look best. For in-feed videos, you have a limit of 60 seconds to get your message across. Stories should be 15 seconds at their longest and in a vertical orientation. Although stories are shorter, their format means your content will take up the entire screen, meaning fewer distractions. You can also get your audience to connect with you through elements like polls, questions, and quizzes.
• Twitter: This platform allows you to share video either in portrait or landscape orientation. Make your videos for Twitter no longer than 140 seconds.
• YouTube: YouTube is basically a search engine, so you can reach just about any demographic or niche on this platform designed for video content. Videos can be up to 12 hours long and are supported in two ratios, 16:9 and 4:3. To ensure your videos are found by your audience, use your knowledge of SEO to create titles and descriptions that will help them pop up in the search results page. Don’t forget to brand your videos with your logo. If you don’t have a logo you love, create your own using a quick and easy tool like an online logo maker.

Plan Your Content

Now that you have a clear target audience, a goal, and you know where you will be posting your video, it’s time to actually create it. The type of video you’re making will define a lot of the content in it. For example, if you’re creating a promo video, it only makes sense to include information about the deals you have, make it exciting for your target audience, and use images that reflect your brand. Other important aspects to keep in mind while developing your video’s content include:

• Make it relevant to your target: Create videos that your audience will useful or interesting.
• Ensure it’s easy to understand: Don’t overcomplicate things. Keep your video’s message clear and concise.
• Make it enticing and exciting: Make video content that stands out and that really catches the attention of your audience.
• Keep your video short: Short videos tend to perform better than videos that are too long and dragged out. Keep it short and to the point.
• Include sound: Although most videos posted to social media start with the sound off, it’s still good practice to include some background music. Of course, keep in mind that your video should still function without it because many viewers will likely watch it without sound,
• Make it helpful and informative: Make video content that will be informative for your audience. To ensure they know the content is coming from you, use a logo creator to design a logo you can use to brand your videos.

Brand Your Video

If you’re just starting to branch out into video, keep in mind that this content should also cohesively fit in with your established brand. This means maintaining your brand’s style of communication, including your brand voice and tone. Visual elements are also a must. Continue to use your brand’s color palette, use the same type of imagery you use in your image-based posts, and don’t forget to include your logo design somewhere in your video. This can be easy to include at the beginning of your video in an animated video intro or at the end in a transition or end card. This is super important because you want your audience to be able to relate your video content to your brand easily. If they watch your video, love it, but have no way of knowing who made it, then it won’t do much for you. Although it may seem simple, your color palette or your logo can make it super easy to attribute your video to you in less than a second, so definitely don’t skip this step.

Optimize Your Finished Video

When your video is shot, edited, and ready to be posted, there’s one more thing to consider: optimization. You want your video to be easy to find, and optimizing it will make that happen. On a platform like YouTube, for example, SEO can make a huge difference because it’s basically another search engine. This means you’ll have to step up your YouTube marketing by looking for keywords and include these in your video’s title, description, and tags. Don’t forget to include a CTA in your video and again in your video’s description so that it doesn’t get lost on your viewers. Of course, doing keyword research also helps keep you informed on what people are searching for, giving you even more ideas for future videos.

Beyond the written descriptions of your video, you will also want to make a thumbnail for it that will make it more enticing to viewers. Thumbnails give you a tiny space to work with, so do your best to make the most of it. Include a short title, an intriguing image, and throw in your logo so that people can recognize your content before they even click on it. It may sound like a lot, but getting the perfect balance can lead to more clicks.

Start Reaching Your Goals with Your Video Marketing Strategy

Now that you’re better equipped to create a killer video marketing strategy, what are you waiting for? Put your new knowledge to use and get the results you’re after. Keep in mind that this can take some time to master, so be sure to check on how your videos are performing so that you can make the necessary changes to your next videos. In no time, you’ll be a video master!

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState.

Since states are not meant to be updated directly (because React’s state has to be immutable), things can get really complicated as states become more complex. They become difficult to understand and follow.

This is where Immer comes in and that’s what we’re going to look at in this post. Using Immer, states can be simplified and much easier to follow. Immer makes use of something called “draft” which you can think of as the copy of your state, but not the state itself. It’s as though Immer hit CMD+C on the state and then cmd+V‘d it somewhere else where it can be safely viewed without disturbing the original copy. Any updates you need to make happen on the draft, and the parts of the current state that change on the draft is updated.

Let’s say your application’s state looks like this;

this.state = {
  name: 'Kunle',
  age: 30,
  city: 'Lagos,
  country: 'Nigeria'
}

This user happens to be celebrating his 31st birthday and which means we need to update the age value. With Immer running behind the scenes, a replica of this state will be made.

Now imagine the replica is made and handed over to a messenger, who gives the newly copied version of the state to Kunle. It means there are now two copies available — the current state and the draft copy that was handed over. Kunle then changes the age on the draft to 31. The messenger then returns to the application with the draft, compares both versions, and only updates the age since that’s the only part of the draft that changed.

It does not break the idea of an immutable state, as the current state does not get updated directly. Immer basically makes it convenient to work with immutable state.

Let’s look at an example of this at work

Say you want to build a traffic light for your community, you can give it a shot using Immer for your state updates.

See the Pen
Traffic Light Example with Reactjs by CarterTsai (@CarterTsai)
on CodePen.

Using Immer, the component will look like this:

const {produce} = immer

class App extends React.Component {
  state = {
    red: 'red', 
    yellow: 'black', 
    green: 'black',
    next: "yellow"
  }

  componentDidMount() {
    this.interval = setInterval(() => this.changeHandle(), 3000);
  }
  
  componentWillUnmount()  {
    clearInterval(this.interval);
  }

  handleRedLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'red';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = 'yellow'
      })
    )
  }
  
  handleYellowLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'black';
        draft.yellow = 'yellow';
        draft.green = 'black';
        draft.next = 'green'
      })
    )
  }
  
  handleGreenLight = () => {
    this.setState(
      produce(draft => {
        draft.red = 'black';
        draft.yellow = 'black';
        draft.green = 'green';
        draft.next = 'red'
      })
    )
  }

  changeHandle = () => {
    if (this.state.next === 'yellow') {
      this.handleYellowLight()
    } else if (this.state.next === 'green') {
      this.handleGreenLight()
    } else {
      this.handleRedLight()
    }
    
  }

  render() {
    return (
      <div className="box">
        <div className="circle" style={{backgroundColor: this.state.red}}></div>
        <div className="circle" style={{backgroundColor: this.state.yellow}}></div>
        <div className="circle" style={{backgroundColor: this.state.green}}></div>
      </div>
  );
}
};

produce is the default function we get from Immer. Here, we pass it as a value to the setState() method. The produce function takes a function which accepts draft as an argument. It is inside this function that we can then set the draft copy with which we want to update our state.

If that looks complicated, there is another way to write this. First, we create a function.

const handleLight = (state) => {
  return produce(state, (draft) => {
    draft.red = 'black';
    draft.yellow = 'black';
    draft.green = 'green';
    draft.next = 'red'
  });
}

We are passing the current state of the application, and the function which accepts draft as arguments to the produce function. To make use of this inside our component, we do this;

handleGreenLight = () => {
  const nextState = handleLight(this.state)
  this.setState(nextState)
}

Another example: A shopping list

If you have been working with React for a while now, then you’re not a stranger to the spread operator. With Immer, you need not make use of the spread operator, especially when working with an array in your state.

Let’s explore that a little further by creating a shopping list application.

See the Pen
immer 2 – shopping list by Kingsley Silas Chijioke (@kinsomicrote)
on CodePen.

Here’s the component we’re working with:

class App extends React.Component {
  constructor(props) {
      super(props)
      
      this.state = {
        item: "",
        price: 0,
        list: [
          { id: 1, name: "Cereals", price: 12 },
          { id: 2, name: "Rice", price: 10 }
        ]
      }
    }

    handleInputChange = e => {
      this.setState(
      produce(draft => {
        draft[event.target.name] = event.target.value
      }))
    }

    handleSubmit = (e) => {
      e.preventDefault()
      const newItem = {
        id: uuid.v4(),
        name: this.state.name,
        price: this.state.price
      }
      this.setState(
        produce(draft => {
          draft.list = draft.list.concat(newItem)
        })
      )
    };

  render() {
    return (
      <React.Fragment>
        <section className="section">
          <div className="box">
            <form onSubmit={this.handleSubmit}>
              <h2>Create your shopping list</h2>
              <div>
                <input
                  type="text"
                  placeholder="Item's Name"
                  onChange={this.handleInputChange}
                  name="name"
                  className="input"
                  />
              </div>
              <div>
                <input
                  type="number"
                  placeholder="Item's Price"
                  onChange={this.handleInputChange}
                  name="price"
                  className="input"
                  />
              </div>
              <button className="button is-grey">Submit</button>
            </form>
          </div>
          
          <div className="box">
            {
              this.state.list.length ? (
                this.state.list.map(item => (
                  <ul>
                    <li key={item.id}>
                      <p>{item.name}</p>
                      <p>${item.price}</p>
                    </li>
                    <hr />
                  </ul>
                ))
              ) : <p>Your list is empty</p>
            }
          </div>
        </section>
      </React.Fragment>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

As items are added to the list, we need to update the state of the list to reflect those new items. To update the state of list using setState(), we’ll have to do this:

handleSubmit = (e) => {
  e.preventDefault()
  const newItem = {
    id: uuid.v4(),
    name: this.state.name,
    price: this.state.price
  }
  this.setState({ list: [...this.state.list, newItem] })
};

If you have to update multiple states in the application, you’ll have to do a ton of spreading to create a new state using the old state and the additional value. Which can look more complex as the number of changes increases. With Immer, it becomes very easy to do that, as we did in the example above.

What if we want to add a function that gets called as a callback after the state update?In this case, let’s say we are keeping a tally of the number of items in the list and the total price of all the items.

See the Pen
immer 3 – shopping list by Kingsley Silas Chijioke (@kinsomicrote)
on CodePen.

Say we want to calculate the amount that will be spent based on the price of items in the list, we can have the handleSubmit function look like this:

handleSubmit = (e) => {
  e.preventDefault()
  const newItem = {
    id: uuid.v4(),
    name: this.state.name,
    price: this.state.price
  }
  
  this.setState(
    produce(draft => {
      draft.list = draft.list.concat(newItem)
    }), () => {
      this.calculateAmount(this.state.list)
    }
  )
};

First, we create an object using the data entered by the user, which we then assign to newItem. To update our application’s state, we make use of .concat() which will return a new array that’s comprised of the previous items and the new item. This updated copy is now set as the value of draft.list, which can then be used by Immer to update the state of the application.

The callback function gets called after the state update. It’s important to note that it makes use of the updated state.

The function we want to call will look like this:

calculateAmount = (list) => {
  let total = 0;
    for (let i = 0; i < list.length; i++) {
      total += parseInt(list[i].price, 10)
    }
  this.setState(
    produce(draft => {
      draft.totalAmount = total
    })
  )
}

Let’s look at Immer hooks

use-immer is a hook that allows you to manage state in your React application. Let’s see this in action using a classic counter example.

import React from "react";
import {useImmer} from "use-immer";

const Counter = () => {
  const [count, updateCounter] = useImmer({
    value: 0
  });

  function increment() {
    updateCounter(draft => {
      draft.value = draft.value +1;
    });
  }

  return (
    <div>
      <h1>
        Counter {count.value}
      </h1>
      <br />
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

useImmer is similar to useState. The function returns the state and an updater function. When the component loads at first, the value of the state (which is count in this example), is the same as the value passed to useImmer. Using the updater function which is returned, we can then create an increment function to increase the value of the count.

There is also a useReducer-like hook for Immer.

import React, { useRef } from "react";
import {useImmerReducer } from "use-immer";
import uuidv4 from "uuid/v4"
const initialState = [];
const reducer = (draft, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      draft.push(action.item);
      return;
    case "CLEAR_LIST":
      return initialState;
    default:
      return draft;
  }
}
const Todo = () => {
  const inputEl = useRef(null);
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  
  const handleSubmit = (e) => {
    e.preventDefault()
    const newItem = {
      id: uuidv4(),
      text: inputEl.current.value
    };
    dispatch({ type: "ADD_ITEM", item: newItem });
    inputEl.current.value = "";
    inputEl.current.focus();
  }
  
  const handleClear = () => {
    dispatch({ type: 'CLEAR_LIST' })
  }
  
  return (
    <div className='App'>
      <header className='App-header'>
        <ul>
          {state.map(todo => {
            return <li key={todo.id}>{todo.text}</li>;
          })}
        </ul>
        <form onSubmit={handleSubmit}>
          <input type='text' ref={inputEl} />
          <button
            type='submit'
          >
            Add Todo
          </button>
        </form>
        <button
          onClick={handleClear}
        >
          Clear Todos
        </button>
      </header>
    </div>
  );
}
export default Todo;

useImmerReducer takes in a reducer function and the initial state, and it returns both state and the dispatch function. We can then loop through the state to display the items we have. We dispatch an action when submitting a todo item and clearing the list of them. The dispatched action has a type which we use in determining what to do in the reducer function.
In the reducer function, we make use of draft like we did before, instead of state. With that, we have a convenient way of manipulating the state of our application.

You can find the code used in the above example on GitHub.

That’s a look at Immer!

Going forward, you can begin to make use of Immer in your next project, or even slowly begin to use it in the current project you’re working on. It has proven to aid in making state management convenient.

The post Using Immer for React State Management appeared first on CSS-Tricks.