When You've Got .3 Seconds to grab their attention ... Everything Matters

When You've Got .3 Seconds to grab their attention ... Everything Matters

Now we’ve got our code for our website with a sidebar.

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<title>Rapid Prototyping</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Example for rapid prototyping with CSS Grid Layout with focus on 'grid areas'.">

<style>

.topbar {

grid-area: topbar;

}

header {

grid-area: header;

}

nav {

grid-area: nav;

}

.hero {

grid-area: hero;

}

.team {

grid-area: team;

}

main {

grid-area: main;

}

aside {

grid-area: aside;

}

.teaser {

grid-area: teaser;

}

footer {

grid-area: footer;

}

/* Styles for the grid container */

.grid-container {

display: grid;

/* Styles for the placement of the grid areas */

grid-template-areas:

"topbar"

"header"

"nav"

"hero"

"team"

"main"

"aside"

"teaser"

"footer";

grid-gap: .5rem;

padding: .25rem;

}

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"topbar topbar"

"header header"

"nav nav"

"hero hero"

"team team"

"main main"

"aside ."

"teaser teaser"

"footer footer";

}

}

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"topbar topbar topbar"

"header header header"

"nav nav nav"

"hero hero hero"

"team team team"

"aside main main"

"teaser teaser teaser"

"footer footer footer";

}

}

/* Styles for the grid items */

.grid-box {

padding: .5rem;

}

/* Styles for the HTML elements */

.topbar, header, nav, .hero, aside, main, .teaser, footer, .team {

background-color: #24272B;

color: whitesmoke;

}

</style>

</head>

<body>

<div class="grid-container">

<div class="grid-box topbar">

<p>Info bar</p>

</div>

<header class="grid-box header">

<p>Logo</p>

</header>

<nav>

<p>Nav</p>

</nav>

<div class="grid-box hero">

Hero image

</div>

<main class="grid-box">

<p>Main</p>

</main>

<aside class="grid-box">

<p>nav</p>

</aside>

<div class="teaser">

<p>

Call to action

</p>

</div>

<footer class="grid-box">

<p>Footer</p>

</footer>

</div>

</body>

</html>

I want to set up our typography.

We’ve got .3 seconds to grab their attention so we need our fonts, colors, and images, to tell a story and set a Rhythm before anything ever gets read.

We’ve got 100,000 different fonts and 16.8 million colors to choose from, the combinations are limitless.

1. Select a font

Fonts are important because they help to set the website's mood.

The curves in our fonts will have an emotional impact on the viewer while saying something about our personality.

Curves are friendly. Straight lines are stiff and standoffish. Thick is bold. Too thick is a bully, while thin is sexy and stylish.

But we want to put speed and readability before anything else.

If we host a custom local font, or font hosted by a third party, it will slow down our website.

So, we want to use web safe fonts because they speed up the website and 70% of consumers say page speed influences their purchasing decisions.

Web safe fonts already have the font on the devices that are reading the page.

Verses having to have extra HTTP requests to an outside server to get the font.

Also keep in mind that everything we do has to be set up to be responsive.

This means having to test the font in all the different devices to see how they look. And out of all of them Verdana is considered to be one of the best.

So I’m going to go with Verdana because I’ve seen nothing that shows having a fancy third party font improves conversions. But I’ve seen a lot about how speed does and since Verdana will speed up my site and look good on any device I’m going to go with it.

body, {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

2. Font size

There is a problem with how Chrome handles font sizes on refreshes. They Get Bigger!

So the work around is to set the font-size in the HTML to 62.5%.

And then set the font size on the body to 1.4 em. Which should give me something that is at least 14 pixels as a base.

So I’ll do the 62.5 in the html but in the body I’m going to go with 1.6em ...

html {

font-size: 62.5%; }

body {

font-size: 1.6em;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

3. Line Height

Line Height Affects Horizontal Motion

Readers scan content both horizontally and vertically, lines of text should feel like horizontal lines.

A line height that is too tight could undermine horizontal eye movement and encourage scanning down the left edge. It could also force people to reread lines of text. On the other hand, a line height that is too loose could make lines of text visually “float away” from each other. The lines will no longer feel like a cohesive unit, and vertical scanning becomes more difficult.

For this reason I will set the line height to 1.7em.

html {

font-size: 62.5%; }

body {

font-size: 1.6em;

line-height: 1.7em;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

Colors

Now colors are important because they affect our emotions.

Colors Influence Taste

The color of your food can increase your appetite and affect the food. Orange increases your appetite. Blue makes you lose your appetite.

Black is related to power, strength and authority. Think of the black robs of a judge or the black belt in karate.

However, sports teams whose uniforms are black receive more penalties, and the players are associated with negative qualities such as aggression.

Color influences temperature

Whether you are feeling warm or cold can depend on the color tone of your environment. In a room painted in warm color temperature will feel higher than the same temperature in a cool-colored room.

Blue represents winter, ice, water, freshness, rain, wind, and your lips turn blue when you’re cold. Warm colors like red or yellow produce images like fire, sun, and summer in your mind.

Colors influence decisions

The color of a product can be the reason someone chooses it over another. Colors create emotions.

Warm colors create emotions of trust. As a consequence, it leads to loyalty and increases in purchases.

Your brand’s color also impacts your employees. One study found that red in the logo causes employees to work harder.

Red is associated with danger and failure (mistakes in exams are usually marked in red).

A study showed that when a team plays another team wearing red, they lose more often than they win because they associate the red uniforms with danger and failure.

Warm colors such as red and orange activate the survival mode, increasing speed but decreasing patience and creativity.

Cool colors like blue seem to have opposing calming effects. They are relaxing and enhance creativity. Installing blue-colored lights in train stations or streets reduces the crime rate.

Colors influence the perception of time

A red room puts you in survival mode. And this causes your perception of time to shift, where seconds feel like minutes.

But on the plus side you're paying more attention.

Red increases the heart rate and the amount of adrenaline circulating in our bloodstream.

And cool colors relax us. They calm the body, reduce respiration and lower the blood pressure. It's the reason surgeons wear green or blue.

A study, studying color on the placebo effect, showed that people given warm-colored pills, where more likely to believe they were working than people given cool-colored pills.

With that being said we have no choice but to go with red and black so the values when setting up your colors work like this.

The first two digits of a hexadecimal color are the red value, the next two are the green, and the last two represent the blue. Think of “RGB” to remember the order.

Smaller values yield darker colors, so #000000 is black while #FFFFFF is white.

A shorter version uses three digits. It’s equivalent to the six-digit format, where each digit is duplicated to give the six-digit version. The value #46A is the same as #4466AA.

The eight-digit version adds a transparency value. In the three and six-digit notations, all colors are fully opaque.

The eight-digit notation has two digits at the end indicating the degree of transparency. A value of 00 indicates a completely transparent color, and ff is completely opaque.

For example, #0000FF88 would be a semi-transparent blue color.

Similarly, you can add one digit of transparency to a three-digit color code. The four-digit value #46A8 defines a semi-transparent color and is equivalent to #4466AA88.

And you should never use a pure black or a pure white.

So for our background color I’m going to set it to #222 and for our red I’m going to set it to #d00

Now we’re going to add a pure html and css navbar.

Let's add a navbar but let's do it with pure html and css so we’re not adding anything to what the browser already has to interpret.

And then I’ll set the width to 100% so it takes up the full width of the page and doesn’t leave any white space on the edges.

body {

background-color: #d00;

color: #222;

font-family: Verdana, Geneva, sans-serif;

font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */

line-height: 1.6;

width: 100%;

}

I’m going to set up the top bar with my phone number, email and login.

<div class="grid-container">

<div class="grid-box sub-grid-topbar topbar">

I’m going to set up a sub grid inside the topbar. I’ll call it sub underscore because I want to be able to easily see which are parents and which are children.

A parent can go by itself anywhere on the page but a child needs to go inside a parent.

<div class="grid-box sub-grid-topbar topbar">

<div class="grid-box topbar sub_grid_topbar">

<div class="topbar_box_1">

<h3>Phone #</h3>

</div>

 

So I’ll call it sub_grid_box and I’ll create a second selector that will be unique to this area and call it topbar_box_1.

<div class="topbar_box_2">

Email

</div>

 

Now I’ll copy that 3 more times and the only thing I’ll change is the box number so that it will be unique for this area.

<div class="topbar_box_3">

</div>

<div class="topbar_box_4">

Login

</div>

</div>

I’ll start by defining the area I want the CSS to affect.

.topbar_box_1 {

grid-area: topbar_box_1;

}

.topbar_box_2 {

grid-area: topbar_box_2;

}

.topbar_box_3 {

grid-area: topbar_box_3;

}

.topbar_box_4 {

grid-area: topbar_box_4;

}

Then I’ll tell it I want it to show two in a row side by side and put the second two under the first.

.sub_grid_topbar {

display: grid;

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"topbar_box_1 topbar_box_2"

"topbar_box_3 topbar_box_4";

}

And then I’ll use a Media Query to say unless its a device with a screen size larger than 800px.

In that case show them side by side. 4 in a row.

@media only screen and (min-width: 800px) {

.sub_grid_topbar {

grid-template-columns: repeat(4,1fr);

grid-template-areas:

"topbar_box_1 topbar_box_2 topbar_box_3 topbar_box_4";

}

}

Check load times,

Let's pull some data from shopify's data base, add three products.

We are going to use liquids code to tell it to find three products from collections and show them on the home page.

{% for product in collections.frontpage.products limit:3 %}

{% if forloop.first or forloop.last == true %}



<section class="section hero heroYarns mobileCenter">

<div class="sectionImg"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" style="height: 550px; width: 800px;"></div>

<div class="sectionCopy" data-aos="fade-up">

<div class="new">

<span>Just In!</span>

</div>

<h2>{{ product.title }}</h2>

<p>{{ product.price | money }}</p>

<a href="{{ product.url | within: collection }}" class="button" style="margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">READ MORE</a>

</div>

</section>

{% else %}

<section class="section hero heroPatterns mobileCenter">

<div class="sectionImg"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" style="height: 550px; width: 800px;"></div>

<div class="sectionCopy" data-aos="fade-up">

<h2>{{ product.title }}</h2>

<p>{{ product.price | money }}</p>

<a href="{{ product.url | within: collection }}" class="button" style="margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">READ MORE</a>

</div>

</section>

{% endif %}

{% endfor %}

Check load times,

Let's add some CSS

start with the HTML.

<body>

<div class="grid-container">

<nav>

Inside the nav we’re going to add a <ul> tag, which is an unordered (bulleted) list. And I’ll give it some class with a topnav selector I’ll create in a second.

<ul class="topnav">

I’ll add the <li> tag and now I have an unordered list.

For the moment I’ll style inline.

Elements with a 'display' property of 'list-item' are formatted visually with a marker and I’m telling it not to display that marker.

Then I’m telling it to display inline. Which means that the element is displayed inside the current block on the same line.

<li style="list-style: none; display: inline">

<a aria-label="go to home page" href="/">

<ul>

<li>

<div class="logo"></div>

</li>

<li class="right"></li>

<li style="list-style: none">Home</li>

</ul>

</a>

</li>

<li class="right"> <a href="{%%20url%20'pages:about'%20%}">About</a> </li>

<li class="right"> <a href="{%%20url%20'contact:contact'%20%}">Contact</a> </li>

</ul>

</nav>

<main class="grid-box">

<h3 style="color:#444;">Content</h3>

</main>

<aside class="grid-box"> aside </aside>

<footer class="grid-box"> footer </footer>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

/* Defining the grid areas */

 

nav {

background-color: #00242f57;

grid-area: nav;

}

 

main {

background-color: #E5E5E5;

color: #1A1A1A;

grid-area: main;

}

 

aside {

background-color: #BFBFBF;

color: #4D4D4D;

grid-area: aside;

}

 

footer {

background-color: #4D4D4D;

color: #BFBFBF;

grid-area: footer;

}

/* Styles for the grid container */

 

.grid-container {

/* Styles for the placement of the grid areas */

display: grid;

grid-gap: .5rem;

grid-template-areas: "nav" "main" "aside" "footer";

padding: .25rem;

}

/* 2 media queries for the grid container */

 

@media only screen and (min-width: 550px) {

.grid-container {

grid-gap: .75rem;

grid-template-areas: "nav nav" "main main" "aside ." "footer footer";

grid-template-columns: repeat(2, 1fr);

padding: .5rem;

}

}

 

@media only screen and (min-width: 800px) {

.grid-container {

grid-gap: 1rem;

grid-template-areas: "nav nav nav" "aside main main" "footer footer footer";

grid-template-columns: repeat(3, 1fr);

padding: .75rem;

}

}

/* Styles for the grid items */

 

.grid-box {

border-radius: .125rem;

font-size: 1.25rem;

padding: .5rem;

}

/* 2 media queries for the grid items */

 

@media only screen and (min-width: 550px) {

.grid-box {

font-size: 1.5rem;

padding: .75rem;

}

}

 

@media only screen and (min-width: 800px) {

.grid-box {

font-size: 1.25rem;

padding: 1rem;

}

}

/*Navbar*/

 

.logo {

background: url(/img/logo.webp) no-repeat top left;

height: 45px;

margin: 10px;

width: 200px;

}

 

.logo:hover {

filter: brightness(110%);

}

 

ul.topnav {

background-color: #333;

list-style-type: none;

margin: 0;

overflow: hidden;

padding: 0;

}

 

ul.topnav li {

float: left;

}

 

ul.topnav li a {

color: white;

display: block;

padding: 14px 16px;

text-align: center;

text-decoration: none;

}

 

ul.topnav li a:hover:not(.active) {

background-color: #111;

}

 

ul.topnav li a.active {

background-color: #4CAF50;

}

 

ul.topnav li.right {

float: right;

}

 

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {

float: none;

}

}

</style>

</head>

<body>

<div class="grid-container">

<nav>

<ul class="topnav">

<li style="list-style: none; display: inline">

<a aria-label="go to home page" href="/">

<ul>

<li>

<div class="logo"></div>

</li>

<li class="right"></li>

<li style="list-style: none">Home</li>

</ul>

</a>

</li>

<li class="right"> <a href="{%%20url%20'pages:about'%20%}">About</a> </li>

<li class="right"> <a href="{%%20url%20'contact:contact'%20%}">Contact</a> </li>

</ul>

</nav>

<main class="grid-box">

<h3 style="color:#444;">Content</h3>

</main>

<aside class="grid-box"> aside </aside>

<footer class="grid-box"> footer </footer>

</div>

</body>

</html>

Now lets dress up the left menu a little.

Free shipping when you spend $50 or more.

Shop Now