user experience

Practical Guidelines for Using Background Videos on Your Website

Posted on by Mario

When to use background videos on your websites

Nowadays, as a web developer you can use background videos as a great way to improve your website’s look. Moreover, it will also make your videos more enjoyable for visitors. Why? Because good videos can tell the story of a business which each business will surely have their own story that can be told better. So, now you are interested in making background videos, but don’t know how to start? Let us guide you! All you have to do is just keep scrolling and reading.

Best Practices for Adding Background Video

The best reason why you use a background video is because when you use it, your website will look better. Therefore, it is tempting to use any video that looks shiny and interesting without considering its impact. Even though those shiny things may contribute you a lack of minimal advantage, in most cases, they are also the biggest factors that contribute you a slower site. Therefore, trading a static image for video must be worth it.

Below are some things to consider:

  • Select a short length video that loads quickly.
  • Don’t use sound. Sound adds the file size and gives little value.
  • Use a placeholder. This is used to anticipate if the video is stopped or can’t be played.
  • Replace the video with an image for the mobile experience. You can hide the background video element at mobile breakpoints to reveal the background image. Besides, it will give the best experience for the mobile visitor.

When You Shouldn’t Use a Background Video

For some reasons, a background video is good at grabbing attention. However, instead of focusing on your copy, a background video might take up all the attention on them.

On the other hand, if you are too aggressive with your background video, it will overpower the important content. When you want to present complex ideas, like sales-related content to read, videos can be distracting. In terms of explaining, words are still the best. So, don’t run the risk of distracting or losing visitors with a video.

Choose Useful Over Complex

When we are deciding whether or not to add an element, you have to think about the mistakes that it might cause. For instance, it’s easy to make the mistake of thinking you’ll enhance an experience by sprinkling in some fun animations or by hiding and revealing elements, but you might actually be adding an obstacle.

So, the simplest way to keep thing simple is to make it as simple as possible. Your background video should reinforce the content message, eliminate barriers, and complement the rest of your site’s content. In other words, it should bring out the aesthetic element of the website, not stand alone or get in the way.

The Smarts behind Adding a Background Video

A best-case scenario is when background videos supplement or enhance the CTA.

  • Make It Personal

Generally, people want to see other people. It will be easier for users to decide whether they have to take an action, like signing up, making a purchase, or getting in touch once they see a person. Therefore, adding a short video will allow people to visualize themselves working with you.

  • Make it Pop

Most of the case, people want to have text layered on top of the background video, so make sure it’s easy to read throughout the entire video loop. Furthermore, you can aim for a strong light/dark contrast between the background video on the copy.

You can also apply a solid, monochromatic filter on top of the video to ensure full, legible contrast. This technique will not only make this look super professional, but the color contrast also makes the text, form, and landing page CTA look impressive. Other method that you can also try is by including a text shadow, or a semi-opaque color block behind the text.

  • Keep It Short

It is important to keep the video short. Therefore, it is better to make a video with the length no longer than 10 seconds, but make sure that this short, looping video should be enough to get the point across without impacting the load time.

Sometimes, creating a loop can be challenging, the loop will appear out of place or incomplete if the video is too short. On the other hand, if the video is too long, your visitors can easily click away from the site or to another page before the video’s had a chance to do a great thing.

If you can’t produce your own video, you can search for other places to get stock video clip. Double check the copyrights associated with any video before you use it. However, we would recommend you to always produce your own video to make it more personal.

  • Make It Unstoppable

Be confident, as long as you give a good quality and on brand video content, your visitors will likely press play or pause. The best way that you can offer is to play the background videos automatically. This will surely grab the visitor’s attention and keep them interested, as soon as they see the video element.

Don’t Forget the Analytics

It’s important to run a test, such as an A/B test to compare how your page performs with a background video compared with a static image. Just to be safe, you can start by pushing a small portion of your traffic towards the page. However, most usability specialists lean on experience, gut, and personal opinion when deciding what design brings customers satisfaction. This method is, of course, not right as you can use data as a great way to know what your customers actually think, as opposed to what they say they think.

So, have you tried background video in your website? It’s worth trying the method that will surely make your site look more sophisticated and smart. Good Luck!

Create the Perfect Website Layout System

Posted on by Mario

create-the-perfect-website-layout-system

If you are web developers or web designers who are looking for ways that can create sites that work on any device, this article is for you. In this opportunity, we are going to discuss about how to create the perfect website layout system. Take a look!

Multi-Column

You may not see multi-column as the most-used CSS columns in many websites. This is quite surprising, since it’s one of the most highly flexible techniques. In fact, this would be terribly suitable to be used by those who want perfection for lists of links, like navigations, footers, search results or photo blog.

However, multi-column may not be beautiful to be used for long passage article. This is because CSS columns will require people to scroll down and up again while reading.  The only wat to present your article nicely in CSS columns is by convincing your users to scroll horizontally.

To create a simple horizontally scrolling multi-column layout by setting the height of the article to a maximum of 100 percent of the viewport, and by telling it to use columns of no less than 20em. These few line is what it takes to create good multi-column:

article {
columns: 20em; /* never be smaller than 20em */
height: 100vh; /* be as high as the viewport */
width: 75vw; /* be 75% of the width of the viewport */
}

Flexbox and the Viewport

It may seem a bit like float, but much more powerful. With Flexbox, you can tell items what to do with any leftover white space. You can leave it at one of the ends, you can distribute it evenly between (or around) them, or you can choose to stretch the items – which basically gets rid of the white space. You can use this code to simply fit as many items on each row as possible.

ul {
display: flex;
flex-wrap: wrap;
font-size: 2.5em;
}

Viewport-relative units

You can use the vw unit, instead of using em and media queries to make sure our layout works in different viewports. However, in terms of text, viewport has a serious usability problem with using the viewport width as a unit for text though. At one point it can become too small to read on very small screens. The problem gets bigger when the user can’t increase the font size.

To avoid the font size becomes too small, you can use a calc function: font-size: calc(1em +1vw).

Viewport Calculations

To fit any text into any viewport with CSS, there’s a brilliant CodePen, such as explained in this line below:

font-size: calc(4vw + 4vh + 2vmin);

With this specific calculation, this one sentence, set in a certain font, will always fit in any viewport.

Quantity Selectors

By applying this technique, you can order the browser to behave in a certain manner. Instead of designing every possible layout for every possible screen size, you let the browser and the content figure it out together.

Container Queries

We can’t use element queries, but we might be able to use container queries. However, you cannot style the element itself; you could only style its children which cause something like this:

article:media( min-width: 30em ) screen {
…
}

Quantity Selectors

Quantity selectors are quite handy for search results, where you don’t know if there will be one single result or hundreds of them. Moreover, you can also change the way they look through the number of results. The selectors that make this possible look quite complex at first. At first, I didn’t understand how they worked at all. You can apply a fantastic job in explaining quantity selectors in this article:

article {
flex-basis: 100vmax;
}
article:nth-last-of-type(n + 2),
article:nth-last-of-type(n + 2) ~ article {
flex-basis: 50vmax;
}
article:nth-last-of-type(n + 6),
article:nth-last-of-type(n + 6) ~ article {
flex-basis: 33.33vmax;
}

A Simple Guide for Designing Better Buttons

Posted on by Mario

simple-ways-in-designing-better-buttons

In website development, the role of buttons is important in determining the next actions. Moreover, having a good button design will automatically improve your user experience. If you’d like to take a look on how to create better buttons, you can follow several steps below:

Make Buttons Look Like Buttons

With visual cues, people can determine the click-ability, then understand that an element is a button. Due to this, it is important to use proper visual signifiers on clickable elements to make them look like buttons.

  • Shape
    For a long time ago, square or square with rounded corners is the most popular button’s design. Due to this, users are very familiar with this button shape. Even though, in some cases, the button shape can be circles, triangles, and etc., depending on the style of the site or app. However, using unique ideas to replace the traditional shapes will be a bit riskier. The main point is to make sure that people can easily identify each varying shape as a button.

But what elements can help you identify icons as buttons? There are two elements that can        give clear and distinct labels to icons as buttons. First, be consistent about the shapes to              provide a more familiar experience for users. The picture below demonstrates this point              perfectly.

  • Shadows and Highlights
    Shadows will help you a lot in making the element stand out against the background. Moreover, with shadows and highlights, you can easily identify an element as a tap-able or clickable. Since the effect makes the elements look like as if they can be pressed down.

Make It Easy for Users to Interact with Buttons

The next step is to make sure that your users have a good experience when they press the buttons. This includes size and visual feedback of buttons.

  • Size and Padding
    A good button should have bigger size than a person’s tap size. This will ensure the buttons you design are large enough for people to interact with. To choose a proper size for your buttons, you can rely on the MIT Touch Lab study. This study reveals that the average size of finger pads is between 10-14mm and fingertips are 8-10mm, making 10mmx10mm a good minimum touch target size.
  • Put Buttons Where Users can Find Them
    Locate your button in an easy to find area. Don’t make your users hunt for buttons.
  • Location and Order
    When it comes to web-based apps, you should determine about which placement truly works best for users. The right way to find out is by testing. If you design mobile navigation it’s worth paying attention to the best practices for buttons location.