Holiday Landing Page Tutorial
‘Tis the season, and the one question that always comes up this time of year is, "do we really need to send holiday cards to our clients?" The answer is "yes", and for very good reasons. In addition to spreading good cheer, holiday cards provide an excellent opportunity to engage your audience in a way that can only be done once a year. Not only do they allow you to promote your brand, but you also get the chance to really connect and speak to your target audience directly. Furthermore, holiday cards create relationships for your business and let your customers know that you acknowledge and appreciate them. There are many approaches to sending seasons greetings, but I’m going to show you the “video landing page” approach. So put down the smartphone, pause the cat videos you’re watching, and show some love to your loyal customers with a killer holiday landing page.
“Hold the door!” What if I’m not a programmer? This is a question that most of you are probably asking yourselves but with a little guidance, you’ll find that you can do this in less than ten minutes and without any prior programming knowledge. Plus, all of the source files can be downloaded for free at the bottom of this page, courtesy of MGH.
Why Video?
Video has become a major player in web content for many reasons. Not only is it proven to be the most attention-demanding medium on the web, but according to Brainshark, 65 percent of video viewers watch more than three-fourths of a video. With this level of retention, text-based content just can’t compete.
What You’ll Need
- Any plain text editor - Notepad, Wordpad, Textmate, BBEdit.
- Motion graphics software - Adobe After Effects (optional).
What We’ll Create
In this tutorial, I will provide you with start-to-finish training on how to make both the video (using Adobe After Effects) and the HTML landing page (using any text editor). I understand that the majority of you won’t have access to Adobe After Effects, so feel free to skip the next section and go straight to the How It’s Done – The Code section.
How It’s Done – The Video
As the focus of this guide is setting up the HTML page, allow me to quickly walk you through the video process. This will not cover every detail, however I will be happy to create a more focused video tutorial at a later date if enough readers show interest.
How It’s Done – The Code
1. Lay the Foundation
Open your text editor and create a basic HTML page including the standard elements. Be sure to save this file with the ".html" extension. For example, "mylandingpage.html."
[html]
[/html]
2. Add the Building Blocks
Add a little structure by including header, footer and body elements. First, we'll add overall structure, starting with the body tag. Next, we'll add containers for the header, video and footer content.
[html]
[/html]
3. Embed the Video
Now, we can embed our video created in the previous section. I personally prefer using Vimeo or YouTube for embedding video, primarily for the social media capabilities that they offer. However, feel free to host the video yourself, and serve it up via your own web server if you’d like.
[html]
[/html]
If you take a look at the code above, you will notice that I have autoplay set to 1. This tells the video embed to play the video as soon as the page loads. You can disable this functionality by simply changing it from 1 to 0.
4. Add Some Style
Create a few CSS rules to add a little creativity. You can simply copy and paste this for now, as an explanation of CSS is beyond the scope of this tutorial. In short, this style snippet controls the colors, fonts, and the positioning of the elements on the landing page.
[css]
html, body { background:#a32022; height:100%; margin: 0; padding: 0; }
.video-content { height:100%; position: relative; }
.video-content iframe { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.footer { bottom:15px; right:15px; position:absolute; }
.footer p a { color: #f37072; font-family: arial; font-size: 12px; text-decoration:none; }
[/css]
5. Make it Mobile Friendly
Last, lets make this landing page appear nicely across devices. To summarize, the two rules below are only activated when the screen size is below the specified “max-width:” respectively. For example, when the screen is below 900 pixels, the video width reduces down to 600 pixels.
[css]
@media screen and (max-width: 900px) {
.video-content iframe { height: 346px; width: 600px; }
}
@media screen and (max-width: 600px) {
.video-content iframe { height:300px; width:90%; }
}
[/css]
6. The Completed Code
[html]
html, body { background:#a32022; height:100%; margin: 0; padding: 0; }
.video-content { height:100%; position: relative; }
.video-content iframe { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.footer { bottom:15px; right:15px; position:absolute; }
.footer p a { color: #f37072; font-family: arial; font-size: 12px; text-decoration:none; }
@media screen and (max-width: 900px) {
.video-content iframe { height: 346px; width: 600px; }
}
@media screen and (max-width: 600px) {
.video-content iframe { height:300px; width:90%; }
}
[/html]
7. And, You’re Done!
Before we call this a day, I always recommend testing your code in all major browsers. However, if you've followed along with this guide, your page should display beautifully across browsers.
Please feel free to leave comments, suggestions and outcomes below.
View the Finished Product
View Source Files
Categories
Recent Posts
Related Posts
