Every year, we enter that ominous season of holiday shopping. As a marketer, your to-do list quadruples in size as you make sure that every special offer or campaign you’re running this season is ready to go. And then there’s that one piece that is somehow forgotten.
If you’re missing a landing page for your campaign or special offer, I have a few tips below that can help you get that up and running in short order.
If you implement any of the styles shown later in this article, you will want to remove the highlighted portion so it does not compete/override the styles you put in your <style> tag.
My page includes a coupon for a group we will call my VIP shoppers. I want to encourage them to shop with us over the Black Friday weekend, so I would send them an email, linking to this page.
Note: I used canva.com to design my coupon graphic, but I highly recommend that you work with your design team to get a branded graphic for all your offer/campaign needs.
With just my content in place, my page is very simple, as you can see below.
But there are a few fun ways that I can dress it up.
Option 1: Adding Dimension
My page is very flat so I want to add some dimension to it. First, I need to add a <style> tag to my page’s source code.
Then, I can then add the following CSS (in between the <style> and </style>) to target the <html> and <body> tags.
- margin: 1% 0;
This provides a buffer between the edge of the page and my <html> tag. When it’s written as shown above, it means that the top and bottom margins of the page are at 1% each, and the left and right page margins are both at 0. I used a percentage instead of a fixed number, such as 5px (5 pixels), as percentages are mobile-responsive but fixed numbers are not.
- background-color: #e6e5e5;
I used a hex number to set the color for the background color attribute. The hex number begins with a hashtag and is followed by six alphanumeric characters; numbers range from 0-9 and letters from A-F. The combination of those characters dictates the color that is being used. There are other options for defining colors in CSS/HTML.
The <html> tag holds all other content on the page, so by adding these elements, I am setting it up as the background for the rest of the content on our page.
Now, I’m going to add some styles to the <body> tag, including some font styles which we will see more of in Option 3 below.
The three highlighted styles are important for centering the content on the page. Without those, everything will left-align as is standard. You can adjust the width and padding numbers as needed; I referenced the guides shown here for centering various elements on a page and just modified the recommendations for my page’s content.
- margin: auto;
This needs to stay at the auto setting so that the content in the <body> tag can display in the center of the page. This is one of the settings referenced in the centering guidelines I linked to above.
- width: 80%;
Following the centering guidelines (linked to above), this should be at least at 50%. I’m setting the width of the body, which holds all the content on the page, so I gave my content 80% of the space to use. Again, putting a percentage, instead of a fixed width like 500px, allows this to scale down when the page is viewed on a mobile device.
- padding: 7%;
This is the third item needed to assist with centering the content. I set this to one number (7%) so it will apply to the top, right, bottom and left side of the <body> tag equally. What this does is add spacing within the body tag so that my content is not flush against the edge of the <body> tag. (A margin is different because it sets the spacing around the outside area; in this case, the <body> tag.)
- background-color: #ffffff;
I want the content of my page to be on a white background, but if I wanted to put another color in there, I could. You will notice that I used #ffffff which is the hex number for white.
- box-shadow: 1px 1px 10px 1px #888;
This is one of my favorite CSS/HTML attributes to use. It’s a little complicated depending on how precise you want to be when adding your shadow, but basically it adds a shadow behind whichever element you choose and at the angle and spacing you select. What I set here is my horizontal shadow to 1px, vertical shadow to 1px, the blur (distance between the shadow and the <body> tag) to 10px, the spread (the shadow’s size) to 1px, and the color to a dark black/grey (#888). The last three items—blur, spread and color—are optional so they are not required, but to smooth out my shadow, I added them in. You will also notice that I abbreviated my hex number to just three numbers–#888. Since my grey/black color is all 8s (#888888), I can abbreviate it down to three 8s and save a little time.
- max-width: 700px;
This setting is purely to ensure that on a wide device—typically desktop—my content isn’t going to display at a width wider than I prefer. In this case, I set it to 700px so that the content in my <body> tag will never try to display at a width that is wider than 700px.
With the styles set on those two tags, our page is starting to take shape. Here’s how it looks now:
Option 2—Use Borders to Enhance Images
My coupon graphic is nice but on our page, I think it needs a little something extra.
One of the easiest ways to enhance an image is to add a border. Since this is a coupon, I’m taking it a little further and adding a dashed border so it looks like a coupon you could cut out.
- border: 5px dashed #8cc540;
This specifies that I’m adding a border with a width of 5px and a dashed style (so not a solid line). The hex number shown there is for the green color that I want my dashed border to be.
- padding: 1%;
Again, this is to provide some buffer between our image and the surrounding content. It applies to all sides of the image (inward), essentially pushing each side in 1%.
What I set up there is a class called coupon-border. In CSS, you designate a class by putting a period before it, so .coupon-border in my CSS means that any style assigned to it will be shared with whichever tags I add that class to. When I add that class to my <img> tag, it looks like this.
And when I view my image after that class is added, it looks like this.
I also decided to center that image and any other image on my page so I targeted the <img> tag with the highlighted styles shown below.
- display: block;
The display attribute just indicates how my image should display. If I wanted it to be on the same line with other content, I would set it to inline-block, but since I want it to just be the primary content right here, I set it to block.
- margin: auto;
Again, this is part of the code we need to help center the image. Setting the margin to auto ensures equal spacing around all sides of any <img> tag on the page.The additional styles shown above, but not highlighted, were put in place to help with making my images mobile-friendly.
And here’s my styled and centered image.
Option 3: Add Custom Fonts
One of the beautiful differences in designing for web versus designing for email is that web allows us to pull in just about any font we want to. For my page, I can find our company’s standard fonts and add those in, or I can have a little bit of fun and pull in a special font or two.
I chose to use a couple of Google Fonts—Open Sans and Fredericka the Great. Typically, you’ll want to have a serif and sans serif font available, so I chose one sans serif (Open Sans) and then a cursive font (Fredericka the Great) to complement it and add a little flair.
- Serif fonts are fonts that includes the curly “tear drop” on letters such as r or t. Times New Roman is a good example of a serif font.
- A sans serif font simply means that the font’s letters do not have that extra “tear drop” on them; Arial is a good example of a sans serif font.
As you can see below, Google Fonts provides the code needed to pull in the font families I selected. Further down in the screenshot, you will also see how it showed the CSS I need to reference each of the fonts in my CSS.
In order to use these fonts in my CSS, I have to put the supplied <link> tag in the <head> of my email’s source code.
I used Open Sans for all the content on my page by default; that was visible when I showed you the <body> CSS earlier. The cursive font I selected is what I used for the <h1> text of my page; it adds some contrast from the body text.
- font-family: ‘Fredericka the Great’, cursive;
This attribute is used to specify either one font or a couple fonts as what should be used for body, header or other text. In the example above, my font (Fredericka the Great) is shown first followed the generic “cursive.” My Google Font will be the first font that the page uses, but if for some reason, it can’t use that font, it will use a default cursive font instead. So “cursive” is my backup if my Google Font can’t be used. (Backup fonts for web pages are dependent on the fonts available in the browser.)
- font-size: 1.9em !important;
This attribute shows what size the font for the <h1> tag should be. You will typically see sizes such as 14px (pixels) or 14pt (points). Those are fixed sizes so keeping with a mobile-friendly design, I’ve opted to use the em measurement instead. The em will scale down well when my page is viewed on mobile.
The addition of !important at the end just means that this sizing should take precedence over any other CSS styles that may try to change the size of the text.
Here’s what my final page looks like:
I did add a few additional styles on my page, but with just the three sections we looked at, you can easily enhance a (quick) landing page that you need to make. And if you want to check out the page and view its source code, you can find it here.
Please note—the code provided in the examples above is intended to show how these styles like these can be implemented using ClickDimensions landing pages. However, we will not be able to troubleshoot or provide support on use of any code shown here. We recommend that you work with a web developer or other internal code expert if you have questions.