DEV Community: Nik Moraitis

The Video Background Stimulate

Nik Moraitis — Thu, 29 Oct 2020 10:31:01 +0000

In more than a few years, the video background has become the trend in Web design and for what I have seen so far, it tends to stay for more than a while around us.

Personally, I like to see a short movie play on the background when I first visit a homepage of a brand that tells the story within a short clip. Accompanied by a title and a short text that hits the nail right on the head.

How to present a Video Background?

Well, to present your content right it has to be as clear and visible as possible. For example, having a background video overlay with bright colours, with a similar contrast texts don’t make any favours to your design and to your website as a whole.

A trick you need to apply on your design, is to have a layer in between your video and your text. That curtain could possibly be a background colour that gives the desired contrast for the text to stick out from the background. To give an example here, a black coloured background with an opacity less than 50% in between your video and your writing content, could be creating a great contrast for your design. And that can be our filter to apply better contrast between our elements.

In my case, I had to create a video background overlay for a fashion company. The video was advertising a woman’s fashion and it is telling its short story as it should.

Now, the original video was too bright for my wanted design. If I had to use the original video as my background with my Call of Action elements (texts and button), it wouldn’t do any favours to me or to my design. Having a high brightness on my video was distracting the user’s attention, and as a result the user could not focus on the Call of Action area where I want them to focus on (as the texts were lacking of contrast and they were making it invisible for the viewers).

Solution: What I did in this example was to pin down my video by adding a black colour filter in front of it. Make sure that the opacity of the filter stays low (=<50% opacity). In this way, the Call of Action section, including titles, texts and buttons, is given a nice contrast to set the needed focus for the viewer.

So, Contrast is essential to succeed with your Call of Action campaign!

In the end, that’s what you want to achieve with your design. Less distractions and a main focus on your Call of Action campaign, even though you do want to tell your story with a short video on the background.

How big should a video be?

Your video background should be as short as it can be. Long videos produce long buffering. And a long load screens affect your traffic that eventually would put your visitors off your website.

You should be advised to limit the length of your video to 30-40 seconds long, or in the best-case scenario, you should find a short video (approx. 30 secs) that loops seamlessly. So that you give the impression that your video seems endless. Try to find or make a video that can be less than 1MB or 2MB in size.

However, if you are a business make sure you show your story within that time gap. You don’t want to tell them everything, showing every corner, every person, every aspect of your business.
You just want to stimulate their interest to buy upon your campaign or converting them from visitors to customers, to followers.

Benefits of a Video Background Stimulate

Today more and more companies use the Video Background Stimulate, some of them are Nike Air Jordan and Wayne McGregor dance studio . The videos are looking mesmerizing that complement every content of the website and adding a WOW factor on the eyes of the viewer.

notice: the homepages mentioned here may vary in time and they may change in the future, so don’t be disheartened if you can’t find the examples I am giving you here.

Speaking about mesmerising visuals, in a related article of Inc. provides with evidence that:
• Unbounce reports that including video on a landing page can increase conversion by 80%.
• YouTube reports mobile video consumption rises 100% every year.
• 90% of user say that seeing a video about a product is helpful in the decision process.
• And, 50% of executives look for more information after seeing a product/service in a video, according to Forbes.

It’s some of their reviews. For more information read the paper here.

You may say: “Video backgrounds can make pages load slower and distract visitors from your Call to Action..” but that is not entirely true. If you follow the above approach you can bring more focus on your Call to Action campaign, by pinning down your video background with a filter of your choice.

I believe that your video background case can make visitors stay longer on your page, just enough to watch what opens in front of their eyes. Curiosity is the main stimulate. You can also intrigue your visitors to talk over the social media about your page, which is quite beneficial for your website traffic.

Resources of Video Background Stimulates

There is a number of free and paid online services that provide with videos for your coming projects. The best way, if you are a company of your own, is to have your own video. Promoting your company, your visions, your ethos, your products, your team, your services is something that has your own brand signature and appears unique.

In case you don’t have that luxury of composing your own -short story- video. You can have a look around and see what suits you better for your own campaign or your own promotional landing page. However, beware of what you are choosing. Have a look around and see what your competitors are using and avoid displaying the same media. After all, you still want to keep your uniqueness and make that video look as your own.

Below I give you some of the resources I choose for my own projects too:
• Pexels
• Enveto Market
• Adobe Stock
• Videezy
• Pixabay
• and, Life of Vids.

Hamburger Menu Creation

Nik Moraitis — Tue, 14 Jul 2020 15:07:55 +0000

Hamburger menu has become one of the most recognizable icon in mobile design, and not only.

There are many names to call it. Hotdog menu, three-line menu, or menu button, to name a few. However, as Norm Cox said himself: “Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple.”

And this is what it does and what it represents.
When we design in User Experience tools or we develop a website, it has become a must icon to choose. And probably the first option we think when it comes to mobile design.

From my experience, it might seem to be a smart way to display a menu shouts: “Hey, tap me- I am a menu, I can unfold” but don’t expect everyone to hear it. It is a very clever way to wrap a list of text menu within that icon. However, when it comes to work with the older age group, that menu appears to be your worst option you have on the table. So, don’t be discouraged to consider other approaches to design your menus for smaller devices. Specially, when applies to an old age group, as most of them are not quite familiar with new trends and designs.

There are four ways following with examples of how to build a hamburger menu. All of them appear to be easy enough to understand how they work. Practices that I have been following even now myself as a web developer.

So, let’s see them:

1. Bootstrap Hamburger Menu

The first option, is probably the quickest way to build a hamburger menu.

This is a ready build icon from the infamous CSS Framework. All you need to do is to import a link in your HTML file. And voila! You have it.

To resize your menu here, size values like width & height won’t do any work for you. Instead, you can control the size of your hamburger menu with the CSS property font-size.
Yep… you read well.

Bootstrap 4 is handling the icon as a text, after all the class fa fa-bars is within the Italic tag. The good thing is you can still play around with its properties and treat it as a text.

HTML:
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="navbar" title="menu"> <i class="fa fa-bars"></i> </div> </body>

CSS:
.navbar{ color: black; font-size: 35px; margin: 25px; }

2. Unicode Character

The second option is to use a character from the Unicode IT standard. The character ☰ is nothing but a Chinese glyph, meaning the trigram for heaven.

In this case, you have even less lines of code to work on. In this example, the character is treated as a font by the CSS to give size and a color.

Also, I noticed when you display the glyph, there is an underline to it. To remove the underline completely, just set the text-decoration to none.

HTML:

<a id="nav_toggle" href="#"> ☰</a>

CSS:
#nav_toggle{ font-size: 50px; color: black; text-decoration: none; }

3. The Triad of Div

The third option is the one I prefer myself mostly.
The hamburger menu is assembled by 3 divs.

The true benefit is that later on, injecting some CSS you can adjust it to your personal liking, whether it has to do with positioning, colour, size etc. You have a complete control of your menu.

HTML:

<nav> <div class="hamburger-menu"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </nav>

CSS:

nav{ position: relative; height: 10vh; } .hamburger-menu{ position: absolute; left: 5%; top: 50%; transform: translate(-5%, -50%); cursor: pointer; } .line{ width: 30px; height: 3px; background: black; margin: 5px; }

4. Pseudo-elements ( :before , :after )

The last creation of a hamburger menu is also an option I recommend too. Injecting your class with the pseudo-elements :before and :after.

HTML:

<nav> <div class="hamburger"></div> </nav>

CSS:

nav{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; cursor: pointer; } .hamburger{ width: 50px; height: 6px; background: black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hamburger:before, .hamburger:after{ content: ''; width: 50px; height: 6px; background: black; position: absolute; } .hamburger:before{ top: -16px; } .hamburger:after{ top: 16px; }

What’s the best approach?

I’d say your approach is dependent on what you’re working on.

Always check the compatibility with each browser, specially with the Unicode character.

Like I said, it depends the type of group that your target audience is and how that menu is recognizable by that particular group.

Still you have to touch the CSS properties to give your menu the style you want.

Considering how big your project is, I’d choose something with the least code lines. And off course, I am totally hands up with having the freedom to control the design of my menu.