We know how to make websites, but how can we make good websites?
What is a web page?
A normal web page have several different disired actions. They want the user to click on different links (CTA). You might want the user to fill out a contact form of make them sign up for a free trial. The same story for blog posts, about pages and so on.
What is a landing page?
A landing page are designed to do a single action, such as making a purchase, filling out a form, signing up for a free trial og entering an email address.
It is called a landing page, because it is a page, where the user 'land' after clicking on a link in a Facebook post, Google Ad, Instagram post og any other traffic source.
The difference from a web page is that a landing page usually have ONE goal and ONE call to action.
How to make a landing page
A landing page have focus on ONE thing.
It could be
- Email signup page
- Sales page
- Free trial page
Email signup page
A email signup page is a page where you can collect emails in exchange for a ebook, report og newsletter.
Sales pages are used to sell online courses, one-on-one training, event tickets and so on.
Free trial page
The main goal to a free trial page is to get someone into your sign up flow.
- Wow that is some pretty icons! Did you make it?
No I used Font Awesome
- What is that?
Font Awesome is a font and icon toolkit based on CSS. It helps you make icons on a site in a easy way.
Insert the link in the head of your document
Find the icon(s) you want and insert the shortcode in your HTML
Menu with icons
A hamurger menu is the three horizontal lines you see at the top corner of the screen on apps and responsive websites. Designers call it "hamburger menu". It is the icon which is used to collocate a load of menu options in one slide menu and stow them away.
The first time we saw the hamburger menu was in the 1980's where Norm made it. Nobody belived in the hamburger menu, so nobody used it. When the phone came, did designers find it again, and began to use it.
The hamburger menu is first visible when we go on the phone. When we look at the desktop will we see a normal menu.
Many sites use them on there phone version or apps. These companyes are using the hamburger menu:
When do we NOT use it?We DO NOT use it..
- to hide core features - like settings, optionsor features that are important
- if your site is to interaction heavy - By making a hamburger menu will the user have to many clicks
- to hide the native navigation - Do not make it interfere with a device like the iPhone’s native navigation elements
When DO we use it?We DO use it..
- to scale down a menu
- to give the user easy access to the menu
How can we make it?
A hamburger menu can be at the right or left. When you are on the site are you reading it like a F. Therefore have menus been places on the left site. But with smartphone devices, whose screens seem to get bigger every year, it’s more of a stretch for the user to bring their thumb up to the top left of the screen, causing them to have to change their grip. Placing it to the right slightly reduces this physical workload
Lets make a dropdown menu