When we started the Ambrosi Cutlery project, we wanted to create a website that would captivate and hold the user’s attention. We wanted to show the products in action. In today’s fast paced world, the best way to capture and hold attention is through video – professionally shot, visually exciting video. So that’s what we gave Ambrosi. Here’s how we did it.

First, we sent our video guy, Mike Liebensohn of Videoactive, out on location to get exactly the footage we needed. Many times clients want to skimp on the cost of professional photographers and videographers, but a good photographer or vidographer is like an artist and they can really make or break your design. This is one point where your money will be well spent. If you look through MarkNet’s portfolio, you will see that our best designs use great photography. With videos, you need someone who will not only make your video look great, but give it to you in the best format for the web.

Mike created a video for us that loops at just over 20 seconds. We hosted the videos on our own server instead of streaming though a service like YouTube or Vimeo, but with that said, keep in mind that you need a top of the line hosting service who can deliver these streaming videos without a problem. Some of the $4/month hosting services you’re thinking of just can’t deliver the kind of bandwidth speed needed to stream these videos.

Then the design was off to the Lead Engineer, Taqi, who created a custom theme based on the Genesis framework to showcase a different video on almost every page. The videos are full screen right at the top so you can’t miss them. Then Taqi used the WordPress add_meta_box feature, and added the UI at backend, so the client can easily manage videos. When the client edits the page, he will see the new custom meta boxes under the text editor at the bottom of the page.

You’ll notice in the screenshot, he also created an option for page video poster to use as a fallback for those devices that don’t work with mp4 video. Some old devices like iPhone 2 & 3G don’t play mp4 files directly. For those devices, this fallback image will show up in place of the video, so the site looks great even on these older devices.

At that point, the client had a place to add the video to the page in the back end, but we still wanted to make sure the video displays when the page loads on the front end of the website. To do that, Taqi created a custom function, which he added to the functions.php file.

You’ll see that he set the width of the video to 100% to make it full screen. This site is responsive, so it has to look good no matter the screen size. If you look at the website and drag the edge of your browser screen in and out, you’ll see the layout automatically adjusts. This design feature is a must because more and more visitors are using their tablets and phones to access the web. We have to make sure that websites will look great to all viewers.

Next, Taqi had to create the code to display the client’s logo and text over the top of the video.

This needed to be repeated for each page that would have different text over the video.

Adding this video element was just the icing on the cake for an already engaging website. Just scroll down the pages of the website, for example, and watch the images fade in and out of color; elements like that will make your customers want to stay and learn more.

Pull all of this together and you have a visually stunning, attention grabbing website that will impress your customers. Are you ready for a website like this one? We’d love to build one for you. Contact MarkNet group today to find out what we can do for your business.

Co-authored by Taqi Hasnain