html

How to build a responsive landing page in 10 min

Build a responsive layout using mainly CSS (Grid and Flex)

To skip the tutorial, feel free to download the source code template from my Github repo here.

There are quite a few templates and tutorials out there for building landing pages. However, most tend to overcomplicate or add heavy design (such as multiple pages, forms, etc), to what in most cases requires very simple and lean design. Moreover, I’ll be showing you how to use mainly CSS (Grid and Flex) to create a responsive UI, instead of using old school CSS libraries (such as bootstrap). So let’s get to it! 💪

We’re going to build a basic landing page layout, and focus mainly on the fundamentals so you can hopefully take it from there on to the landing page you desire. Here’s an example of the result:

lp4.gif

The page will be constructed of four main components: Navigation bar, cover image, a grid of cards and finally the footer. 

The index.html is pretty straight forward, which contains mainly div tags and overall page structure:

<!DOCTYPE html>
<html>
<head>
  <title>Basic LP Layout</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <nav class="zone blue sticky">
      <ul class="main-nav">
          <li><a href="">About</a></li>
          <li><a href="">Products</a></li>
          <li><a href="">Our Team</a></li>
          <li class="push"><a href="">Contact</a></li>
  </ul>
  </nav>
  <div class="container">
      <img class="cover" src="img/cover.jpg">
      <div class="coverText"><h1>Making the world a better place</h1></div>
  </div>
  <div class="zone blue grid-wrapper">
      <div class="card zone">
          <img src="./img/startup1.jpg">
          <div class="text">
              <h1>Team play</h1>
              <p>We work together to create impact</p>
              <button>Learn more</button>
          </div>
      </div>
    <div class="card zone"><img src="./img/startup2.jpg">
        <div class="text">
            <h1>Strategy</h1>
            <p>Every goal is part of our strategy</p>
            <button>Learn more</button>
        </div>
    </div>
    <div class="card zone"><img src="./img/startup3.jpg">
        <div class="text">
            <h1>Innovation</h1>
            <p>We're focused on thinking different</p>
            <button>Learn more</button>
        </div>
    </div>
  </div>
  <footer class="zone"><p>2019 Assaf Elovic All right reserved. For more articles visit <a href="www.assafelovic.com">www.assafelovic.com</a></p></footer>
</div>
</body>
</html>

Therefore, we’ll focus strictly on the styling (CSS). If you’re new to html and page structure, click hereto learn the basics before moving forward.

Styling layouts with Grid and Flex

Rule of thumb: Use Grid when you need grid-like views such as tables, cards, album media (like in Instagram). In all other use cases consider using Flex. I highly recommend diving deeper into both, since once you master them, you won’t need much else to create beautiful responsive web pages.

Navigation bar

We’ll use flex so we have a one direction row as needed for our navigation bar. Since we’re using a <nav> tag, we want to remove the dots (list-style). Finally, we’d like to remove any default margins set by the browser, so we reset margin: 0.

.main-nav {
    display: flex;
    list-style: none;
    margin: 0;
    font-size: 0.7em;
}

When changing the width size of our browser, we can see some of the nav bar cut out, so we need to modify how it’ll look when the width is smaller:

@media only screen and (max-width: 600px) {
    .main-nav {
        font-size: 0.5em;
        padding: 0;
    }
}

We’d like the ‘Contact’ option to stick to the right so we set margin-left to ‘auto’. This will automatically set a maximum margin to the left of the hyperlink:

.push {
    margin-left: auto;
}

Finally, we’d like the navigation bar to stay sticky and always appear at the top of the page. Also, we’d like it to appear above all other elements (z-index):

.sticky {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
}

Cover

We use Flex since we want to keep things simple (just center content). After setting our display to flex, justify-content centers content horizontal (X axis) within the container and align-items centers vertical (Y axis). We want the image to fit the entire screen so we set the height to 100vh, which means 100% of view height:

.container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Also, we’d like the cover text to appear above the image and in the center:

.coverText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
}

See the full CSS style sheetfor additional minor adjustments.

Grid of cards

As described above, we want to create a grid of cards so we’ll use Grid this time. grid-template-columns sets the style of each column (or div). FYI: If we were to just set 1fr, we would see just one block per column. So we set it to repeat (just like typing 1fr 1fr …) and autofill display with anything from min 350px to whole screen (1fr). Finally, we set the gri-gap (padding between grid objects) to 20px:

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 10px;
}

Next, we’ll style each cardwithin the grid. The below is pretty straight forward for setting the margin per card and background color:

.card {
    background-color: #444;
    margin: 50px;
}

We’d like each card to have an image fit the entire top area, and under it have a title and paragraph and a button for ‘read more’. Also, we just want to manipulate images, titles and paragraphs within the class card, so we set it with the below:

.card > img {
    max-width: 100%;
    height: auto;
}

.card h1 {
    font-size: 1.5rem;
}

.card p {
    font-size: 1rem;
}

While the image fits 100% of the card’s width, we’d like to add some nice padding to the text area of the card:

.card > .text {
    padding: 0 20px 20px;
}

Finally, we set the button design that appears within each card. We’ll set the border to 0 (since default appears with a border), and add some padding, color, etc:

button {
    cursor: pointer;
    background: gray;
    border: 0;
    font-size: 1rem;
    color: white;
    padding: 10px;
    width: 100%;
}

button:hover {
    background-color: #e0d27b;
}

Footer

Last but not least, our footer is pretty straight forward. We’d like the inner text to be smaller than default, and pad the footer with some color:

footer {
    text-align: center;
    padding: 3px;
    background-color: #30336b;
}

footer p {
    font-size: 1rem;
}

That’s it! Following this simple responsive layout, you can further build almost any landing page your heart desires. To take this layout to the next level with some amazing animation libraries, here are some of my favorites:

  1. Sweet Alert — Add stylish alerts

  2. Typed.js — Add typing animation to your headers.

  3. Auroral — Add animated gradient backgrounds.

  4. Owl Carousel — Add animation to you elements

  5. Animate.css — Add styling animations upon loading elements.

To download the full source code click here!

How to create a dynamic HTML Email Template

HTML automated emails  have come a long way in the past couple of years. What used to be a text-only email, today contains various forms, dynamic links, images, depending each company on there personal style displays.

Today, receiving HTML emails is a standard to most leading companies, which is why adapting this principle over regular text only emails has become a must. 

Developing HTML templates doesn't require a lot of coding skills, however knowing how to code the template to appear correctly on all devices and old email clients is the real challenge.

In this blog post I will go through a step by step guide of how to build a dynamic email template via HTML and PHP.

Basic guidelines

As I've described above, the biggest challenge with developing an HTML email template, is making sure it's cross-platform-compatible. There are so many email clients such as Google Mail, Apple Mail, Outlook, AOL, Thunderbird, Yahoo!, Hotmail, Lotus Notes and etc. Some of these clients and others are light years behind the eight-ball in terms of CSS support, which means we must resort to using HTML tables to control the design layout if we really want our email template to display consistently for every user. In fact, using HTML tables is the only way to achieve a layout that will render consistently across different mail clients. Think of the template as being constructed of tables within tables within tables...

Secondly, we must use inline CSS to control elements within your email, such as background colors and fonts. CSS style declarations should be very basic, without use of any CSS files.

To emphasize the HTML tables rule above, see the example below, where I've modified the border attribute of each table to be visible. Please note that the %s is a placeholder where dynamic text and images will be filled as I'll see soon describe (Scroll to the end to see the final email template):

 
Screen Shot 2016-04-29 at 14.12.47.png
 

As you can see above, the whole layout is built by HTML tables. We'll be using PHP libraries to parse the %s place holder and fill it with dynamic text before an email is sent to the user.

Developing the static template

So let's start programming! Before we begin the template itself, you'll need to begin your HTML file with an XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

I recommend defining all tables with border="1" as seen above since it's easier to spot errors and see the skeleton of the layout as you go along. At first, let's create the basic layout:

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    My first email template!
   </td>
  </tr>
 </table>
</body>

Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table. Also set the width to 100% since this table acts as a true body tag for our email, because styling of the body tag isn't fully supported.

Now we'll add instead of the text 'My first email template!' another table which will present the actual email template display.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   This is the email template body
  </td>
 </tr>
</table>

As you can see, the width is set to 600 pixels. 600 pixels is a safe maximum width for your emails to display correctly on most email clients. In addition, set the border-collapse property to collapse in order to make sure there are no unwanted spaces between the tables and borders.

In the example above, you can see that our email template consists of five sections (rows) which is why we'll create these rows and then add tables accordingly to each in order to complete the template.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td>
   Row 1
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
   <tr>
  <td>
   Row 4
  </td>
 </tr>
   <tr>
  <td>
   Row 5
  </td>
 </tr>
</table>

At each row, we'll create a new table in which the mythology is similar to the above. We'll also add columns accordingly and the right paddings to align all objects to reach the desired template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Automatic Email</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin:0; padding:10px 0 0 0;" bgcolor="#F8F8F8">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="95%%">
    <tr>
        <td align="center">
            <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"
                   style="border-collapse: separate; border-spacing: 2px 5px; box-shadow: 1px 0 1px 1px #B8B8B8;"
                   bgcolor="#FFFFFF">
                <tr>
                    <td align="center" style="padding: 5px 5px 5px 5px;">
                        <a href="http://url-goes-here" target="_blank">
                            <img src="http://logo.png" alt="Logo" style="width:186px;border:0;"/>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <!-- Initial relevant banner image goes here under src-->
                        <img src="%s" alt="Image Banner" style="display: block;border:0;" height="100%%" width="600"/>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
                        <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                            <tr>
                                <td style="padding: 10px 0 10px 0; font-family: Avenir, sans-serif; font-size: 16px;">
                                    <!-- Initial text goes here-->
                                    %s
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#E8E8E8">
                        <table border="1" cellpadding="0" cellspacing="0" width="100%%" style="padding: 20px 10px 10px 10px;">
                            <tr>
                                <td width="260" valign="top" style="padding: 0 0 15px 0;">
                                    <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                                        <tr>
                                            <td align="center">
                                                <a href="tel:phone number goes here" target="_blank">
                                                    <img src="url for call image goes here.png" alt="Call us"
                                                         style="display: block;"/>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center"
                                                style="font-family: Avenir, sans-serif; color:#707070;font-size: 13px;padding: 10px 0 0 0;">
                                                GIVE US A CALL
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="font-size: 0; line-height: 0;" width="20">
                                    &nbsp;
                                </td>
                                <td width="260" valign="top">
                                    <table border="1" cellpadding="0" cellspacing="0" width="100%%" >
                                        <tr>
                                            <td align="center">
                                                <a href="mailto:emailgoeshere@gmail.com">
                                                    <img src="url for email image goes here" alt="Email us"
                                                         style="display: block;"/>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center"
                                                style="font-family: Avenir, sans-serif; color:#707070;font-size: 13px;padding: 10px 0 0 0;">
                                                EMAIL US
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="font-size: 0; line-height: 0;" width="20">
                                    &nbsp;
                                </td>
                                <td width="260" valign="top">
                                    <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                                        <tr>
                                            <td align="center">
                                                <a href="url to faq page goes here" target="_blank">
                                                    <img src="url for faq image goes here" alt="FAQ Page"
                                                         style="display: block;"/>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center"
                                                style="font-family: Avenir, sans-serif; color:#707070;font-size: 13px;padding: 10px 0 0 0;">
                                                BROWSE FAQ PAGE
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#66989c" style="padding: 15px 15px 15px 15px;">
                        <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                            <tr>
                                <td align="center">
                                    <table border="1" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                                <a href="facebook url goes here" target="_blank">
                                                    <img src="facebook image goes here" alt="Facebook" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="youtube page link goes here" target="_blank">
                                                    <img src="youtube image link goes here" alt="Youtube" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="twitter page goes here" target="_blank">
                                                    <img src="twitter image goes here" alt="Twitter" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="linkedin page goes here" target="_blank">
                                                    <img src="linkedin image goes here" alt="Linkedin" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="home page goes here" target="_blank">
                                                    <img src="homepage image goes here" alt="GreenIQ" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

A few observations: 

  1. Add alt attributes where needed in order to present text instead of images incase the email client was unable to load them properly. 
  2. Add %s place holders where you'd like the data to appear dynamically depending on the email use case.
  3. If you look carefully, the percentage values appear with an extra '%'. This is so the PHP library used to making this dynamic, knows how to parse the text properly.

Note! I've removed the URLs for security and privacy issues. You can replace them with your own images and personal links.

And that is it! You've successfully developed your own email static template. Now let's get our hands dirty and make it dynamic!

Developing the dynamic template

Save the above code as a template.html file. Now let's create a new PHP file.

On the server side, create the email send method below:

function send_mail_template($to, $from, $subject, $message)
{
  $headers = "MIME-Version: 1.0" . "\r\n";
  $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
  $headers .= "From: ContactNameGoesHere <" . $from . ">\r\n";
  $response = mail($to, $subject, $message, $headers);
}

Now if you look carefully back to the HTML email template, you'll see that I've added %s place holders in certain places. More particularly, in the image banner element, and body text. Now all we need to do is import the above HTML template, parse it like regular text, add the relevant text in place of the '%s' and use the above send_mail_template method.

function build_email_template($email_subject_image, $message)
{
    // Get email template as string
    $email_template_string = file_get_contents('template.html', true);
    // Fill email template with message and relevant banner image
    $email_template = sprintf($email_template_string,'URL_to_Banner_Images/banner_' . $email_subject_image. '.png', $message, $mobile_plugin_string);
    return $email_template;
}

After we've got that taken care of, we can use both methods and send are very first dynamic email! Let's use an example. Say a new user has just verified his email. We'd like to automate that use case on the server side and send the user a 'Your email has been successfully verified' email. 

Assume we have the users verified email 'user@user.com' and the company's email is 'company@company.com'. We can now send an automated email:

$from = "company@company.com";
$to = "user@user.com";
$body_text = "Your email has been successfully verified...";
$banner_image_subject = "account_verified";
$final_message = build_email_template($banner_image_subject, $body_text);
send_email($to, $from, "You email has been verified", $final_message);

Finally! You can now use this methodology any way needed. After sending this example, while applying the GreenIQ's company images and text, this is the final email template sent to the user:

Feel free to ask any question below!