Helpful Tips from w3 Nerds for Including Videography on your Website

In today's digital landscape, incorporating videography into your website can significantly enhance user engagement and elevate your brand's presence. At W3 Nerds, we understand that creating compelling video content is not just about shooting high-quality footage; it's about telling a story that resonates with your audience. Whether you're a small business looking to showcase your products or a content creator aiming to build an online community, effective videography can capture attention and convey your message clearly. In this guide, we’ll share essential tips to help you create stunning videography for your website. Let's dive in!

Basic Website Terminology 

Header 

At w3 Nerds, the design of each webpage is anchored by a consistent header, which serves as a familiar element across all pages. This header is not just a static banner; it is composed of several integral components that enhance user experience and navigation. Prominently featured is the logo, typically positioned in the top left corner of the page. While some designs may place the logo in the center, this approach is less common and generally discouraged. Accompanying the logo is the navigation menu, often abbreviated as "nav." This menu consists of a series of links that guide visitors through your website.

Call-to-action (CTA) buttons are also featured on the header as a way to encourage engagement. These buttons can take various shapes—rounded, square, or a combination of both—but should always have a button-like appearance and include icons. Contact buttons are also an essential feature of the header, but they don’t need to look like CTA’s. These buttons should display important contact information, such as the primary phone number of your business as well as a primary phone number.

Landing Section 

The landing section is the first section on each page. It often has the page title and a short description of the page. It should also have some sort of design behind the text, especially on the home page. The landing section is also sometimes called the A-section.

B-Section

The B-section is the second section on the page. This A/B/C section naming system continues in series until you reach the end of the page. 

Footer

The very last section of each page that is the same (usually) on each page is called the footer. 

Above the fold vs below the fold

Back in the times of newspapers, when you grabbed a newspaper, they were often folded in half. Everything above the fold was seen through the glass door of the newspaper dispensary, while everything below the fold wasn't seen until you opened and unfolded the newspaper.  In a similar fashion, when you land on a website, everything you see without scrolling is above the fold and everything you don't see unless you scroll down is below the fold. 

The content above the fold should be meaningful and offer a clear, succinct, and persuasive experience for the website visitor. The content above the fold should also not perfectly line up with the screen size. This is a tad difficult to explain, but in essence, the B-section should be slightly visible above the fold, even just a little, so that your users are encouraged to scroll if they wish.

Website landing sections

The home page landing section is very popular with over 50% of users' time being spent looking at that section specifically. In those precious seconds (yes seconds!), we need to accomplish a few goals:

Establish Trust & Authenticity 

If your visitors don't trust what they see, they will leave. It’s as simple as that! Trust is established collectively through modern web practices and a meaningful presentation.

Offer Benefits from the Visitor’s Perspective (Not Your Company's)

At w3 Nerds, we have this discussion with our clients quite often. Naturally, we want to say "we are a great company because" but from your user’s perspective it is better to say "you would benefit from our services because". Here is an example:

Less than ideal: Local Laundry Pickup & Delivery Services

Ideal: Save time with our same-day & next day laundry services without ever leaving the comfort of your home! 

Offer the First Step or Next Step in the Sales Process

Often, especially on eCommerce websites, we see the CTA buttons in the landing section jumping right to closing the lead, which we do not recommend. Instead, it is best to offer the next step to keep the user moving down the sales funnel. If a "closing the lead" CTA button is required, then we should display two buttons. The first button would be the next step and the second button would be the closing step. For example, "Our Services" and "Book Now".

Landing Section Videos 

At w3 Nerds, we understand that a compelling landing page can make all the difference in capturing your audience's attention. Here are some helpful tips for integrating landing section videos into your website:

• Landing section videos need to be custom made. You can't use a random video for the landing section.
• These videos must not use or require audio. Google Chrome disabled audio auto-play browser-wide several years ago. 
• While a still image is meaningful in seconds, videography takes time! This becomes problematic quickly for your users because they may not hang around long enough to watch the entire video. Watching the video should be optional to accomplish the above three goals of trust, benefits, and suggestions for next steps. 
  • The video itself takes time to load compared to a picture. This is especially true on less reliable data connections. This means that your users may have to wait to see or even know that there is a video behind the landing section. To rectify this, we suggest loading a still image first and then have the landing section video load after everything else. This offers a more seamless user experience. 
  • As a result, the first frame in the landing section video should be this same image with the same dimensions/ratio. The video itself should also be optimized for performance being as low data size as possible without a huge sacrifice in quality. 

• Because the video itself isn't a single frame, it also means that the user may need to watch the video for several seconds to get the purpose of the video. With user’s attention spans diminishing over the last few years, this also means more has to be done in less time. As a result, the video itself should be 15-30 seconds long at most.
• At w3 Nerds, our favorite landing videos are "felt and not heard", and what we mean by that is that your website visitors don't need to watch the video but can allow it to play in the background without necessarily drawing too much attention to it. Thus, the video invokes a particular set of feelings which encourages user trust, engagement and conversions. In short, the video shouldn't be too distracting. 
• Some of our clients like to put text on top of their videos. If the text content will be a light color, then the background, including the recorded scenes, should be darker.
• If text content will be left aligned, the video content should be primarily right aligned to balance the content and vice versa. This is something to keep that in mind when recording the various scenes you plan on using in your final video. 

---