Click to action, web fonts and simple responsive css

February 13, 2020

When you make a landing page, you will always have a goal in mind.

For niche sites, the goal could be to sell an item or a service, so you could either get their email or display a button to contact you, which will open up their default email client.

Speed up version 15.2 MB size, watch part 3 on Youtube full version

CTA or click to action

Grab a button component from Tachyons and change some classes to make the button bigger or style to your brand.

There has been some research on what makes a button look more like button, and rounded buttons seem to have better visual cues compared to square buttons.

We can also use colours to make the button stand out or contrast it with the background.

I decided to inverse the colours as we mainly have a white background, so the dark section with a white button stands out pretty well.

Web font

Sometimes to make the site unique or to align with the brand it would be great to use a web font by using font face. Young Serif is the font that has the Stranger Things look and fits well with the Niceweird theme.

If you use Google fonts, be aware of how many styles you are choosing, as the load time will be affected.

I usually choose bold and regular.

For most headings and the brand, the web font was used. For the main body text, the web safe font or default sans serif font will be used. As I feel it’s more readable when you have more text.

There are different families of fonts and some are more suited to headings such as display fonts. Others are better for long text such as sans serif or serif.

Responsive

Making your site responsive can be quite simple depending on the layout of your template. Here we have 5,3,2 columns and for mobile you can just stack the columns so it will be one column

🤩

Learn → Make → Inspire