1. Copy
1.1. How to create a scanable copy
1.1.1. The Truth
1.1.1.1. A study by Nielsen group showed that only 16% of the people read word to word.
1.1.1.2. 79% people are scanners
1.1.1.3. There is guarantee that people are reading your content online, so you have to design your content in a way that it compels them to read or at-least scan properly
1.1.2. The tips to make your content more scannable
1.1.2.1. Be concise and keep everything short
1.1.2.2. Choose the right font
1.1.2.2.1. Use font pairing
1.1.2.2.2. Fastest way is to use fontpair.co
1.1.2.3. Create a visual hierarchy using headlines and sub headlines
1.1.2.3.1. Massthetic Activation
1.1.2.4. Use visual cues like bullets, checklists, boxes etc
1.1.2.4.1. Massthetic Activation
1.1.2.5. Make your text Bold, italicized, colored, or underlines, which makes it more noticeable and easy to consume
1.1.2.5.1. Massthetic Activation
1.1.2.6. White space: better white space helps to improve readability
1.1.2.7. Single-point paragraphs. One idea one paragraph.
1.1.2.7.1. Video Marketing: The Definitive Guide
1.1.2.8. Add visuals and infographics
1.1.2.8.1. Video Marketing: The Definitive Guide
1.2. Short landing page vs longer landing page?
1.2.1. The funnel
1.2.1.1. Draw the funnel showing the customer journey first
1.2.1.2. Funnel
1.2.2. POV 1: The commitment
1.2.2.1. Long landing page
1.2.2.1.1. A good rule of thumb to follow is that The bigger the offer or price the longer the landing page should be - Neil patel
1.2.2.1.2. Only people who really wants your offer will read or scroll the entire thing to buy your product
1.2.2.1.3. Advantage
1.2.2.1.4. Disadvantage
1.2.2.2. Short landing page
1.2.2.2.1. Rule: If you have a less ask or a simple lead generation, go for shorter page
1.2.2.2.2. Use if for people who are new to your brand and you just want to get them from top of your funnel
1.2.2.2.3. Advantage
1.2.2.2.4. Disadvantage
1.2.3. POV 2: The Jump
1.2.3.1. It depends on the length of journey
2. Working on
2.1. Gifs might be better than video
2.1.1. Why use white space
2.1.1.1. We utilize this principle to direct user attention to our CTAs or Forms
3. Design
3.1. Use plenty of white space
3.1.1. Why people tend to make this mistake
3.1.1.1. They think putting together too many things will make it look better and convince the reader that they are valuable
3.1.1.2. They think empty space is a wasted space
3.1.1.3. white space isn’t necessarily “white”, its mean empty or negative space.
3.1.2. Why use white space
3.1.2.1. Let me first show you some examples
3.1.2.2. Increased readability
3.1.2.2.1. Headline are better readable
3.1.2.2.2. Less overwhelm
3.1.2.3. Better structure
3.1.2.4. Improved focus
3.1.2.4.1. People will focus more on CTA through the web page, apple does this effectively
3.1.3. Couple of examples
3.1.3.1. Good websites
3.1.3.1.1. Joe Polish - One of the most sought after marketers alive today
3.1.3.1.2. Sell Like Crazy By Sabri Suby
3.1.3.1.3. Home - Jay Shetty
3.1.3.2. Specific examples
3.1.3.2.1. Pricing section
3.1.3.2.2. Testimonial section
3.1.3.2.3. Genius Network
3.1.3.2.4. Faq section
3.1.3.2.5. Sign up form
3.2. How to choose font
3.2.1. Never use more than two fonts
3.2.1.1. It slows down your website
3.2.1.2. It makes your design look unprofessional
3.2.1.3. It overwhelms the brain of your readers
3.2.1.4. Example
3.2.1.4.1. Don't be this guy
3.2.2. Know the difference between serif and san serif
3.2.2.1. Sans means without
3.2.2.2. Serif: It is more trust able, as it was a print font for magazines.. Better readability. Good for text, gives newspaper like feeling.
3.2.2.3. San serif: More modern, tech and app companies use it, all social media use it. Best for heading and text both.
3.2.3. Use font pairing
3.2.3.1. Simply go to one of the famous font pairing website and choose the one you like.
3.2.3.2. There are free and paid fonts, Choose according to what you are looking for.
3.2.3.3. FontPair helps you pair Google Fonts together.
3.2.3.4. Fontjoy - Generate font pairings in one click
3.2.3.5. Typ.io: Fonts that go together
3.3. Reduce attention ratio
3.3.1. What is attention ratio
3.3.1.1. Attention ratio = Number of links on the page / Number of campaign goals
3.3.1.2. The ratio should be 1:1 because every landing page has one campaign goal and there should only be one call to action to click on
3.3.1.3. The mall analogy
3.3.1.3.1. Imagine there is a mall with different shops. In that mall each shop is serving only one type of product or service.
3.3.1.3.2. Landing page is like the one shop in that mall, optimized to sell only one item
3.3.1.3.3. Visitors in those shops knows exactly what they are there for without any confusion
3.3.1.4. Similarly by eliminating all the links, you are eliminating distraction and your visitor is more likely to click.
3.3.2. Decision paradox: Lets talk about selling jams
3.3.2.1. How more choices can make your visitors buy less
3.3.2.2. There was a study done in 2000 by Columbia and Stanford University on Jams
3.3.2.3. In food market, people would display a table with 24 different kind of jams, then another day at the same food market people were only given 6 different type of choices
3.3.2.4. 24 jams looked interesting but generated far less sales than display of 6
3.3.2.5. Results
3.3.2.5.1. Study shows that while more choices may seem appealing at first, choice overload generates the wrong results
3.3.2.5.2. Stats
3.3.3. What is an exception
3.3.3.1. Yes there is one exception
3.3.3.2. If your landing page is long you can have multiple CTA leading to the same goal throughout the page
3.3.3.3. You could use different copy for different CTAs and see which one works best for you
3.3.3.4. Long page example
3.3.3.4.1. Genetics Unlocked – Your Genetic Type
3.3.4. Examples
3.3.4.1. search for - accident attorney new york
3.4. Point to your CTA with visual cues
3.4.1. What is it?
3.4.1.1. Our brain is drawn towards obstructive items
3.4.1.1.1. Red notification bars
3.4.1.1.2. Flashing images
3.4.1.1.3. Annotation, arrow etc
3.4.1.2. Our brain identify visual elements faster than text
3.4.1.3. We utilize this principle to direct user attention to our CTAs or Forms
3.4.2. Here are some examples
3.4.2.1. Kopywriting Kourse: The Copywriting Blog That Teaches You To Sell
3.4.2.2. SEO Training and Link Building Strategies – Backlinko
3.4.2.3. Annual Event - Genius Network
3.4.2.4. HIIT MAX ™ V2
3.4.2.5. The Doctor's Farmacy - Podcast by Dr. Mark Hyman
3.4.2.6. More examples
3.4.2.6.1. Hillary
3.4.2.6.2. Body Beast Workout DVDs - Carve Lean, Defined Muscle & Burn Fat - Beachbody.com
3.5. Capture attention with your heading
3.5.1. Why nothing can replace a good headline
3.5.1.1. Videos take too much time to watch (often both to load and communicate your message).
3.5.1.2. Images aren’t specific enough without text clarification. Some people might get it other wont.
3.5.1.3. Graphical elements can’t communicate a complex enough message. It can only support the text, without text it is a bad UX
3.5.1.4. Text descriptions aren’t powerful enough. You need to get your point across as fast as you can
3.5.1.5. Interactive elements are slow to load, there are compatibility issues and rely heavily on either text clarification or user understanding.
3.5.1.6. In the end, headline is the best way to get your message across and improve conversion
3.5.2. How to optimize design of your headline for better conversion
3.5.2.1. Before anything, your copy should be solid and compelling enough
3.5.2.1.1. If you copy sucks, no amount of CRO, or optimization would help it.
3.5.2.1.2. So first make copy of your headline better
3.5.2.1.3. Search on google and you find thousand of articles about how to write compelling headlines by some of the best copywriters
3.5.2.1.4. I am not going to talk about copy in this video because its not my expertise
3.5.2.2. Place your headline prominently
3.5.2.2.1. Now once you get the copy right, next most important task is the placement of your headline
3.5.2.2.2. Headline should take up the significant amount of real estate, so give it a plenty of room.
3.5.2.2.3. Your headline should be the most contrasting, the biggest and boldest thing at the beginning of your page.
3.5.2.2.4. It should be hard to miss, because headline is what leads them to read rest of your page
3.5.2.2.5. Example 1
3.5.2.2.6. Example 2
3.5.2.2.7. Visual hierarchy explained
3.5.2.3. It immediately attracts attention
3.5.2.3.1. Your headline should be able to immediately attract user attention and lead them to the next step
3.5.2.3.2. Next headline should do the same and keep the user engaged throughout the page
3.5.2.3.3. Use big bold heading to create obstruction and get the most important points across the user
3.5.2.3.4. Example
3.6. Ditch the navigation
3.6.1. The differences and what it is
3.6.1.1. First of all: What are navigation links?
3.6.1.1.1. These links is like a map which takes user deeper into the website content
3.6.1.1.2. Here is what it looks like
3.6.1.2. Home page vs landing page
3.6.1.2.1. Home page
3.6.1.2.2. Landing page
3.6.2. Why you should remove navigation from your landing pages
3.6.2.1. Navigation give user a chance to get distracted
3.6.2.2. It will cost you money if you are running PPC ads to your landing page
3.6.2.2.1. Study: “44% of clicks for B2B companies are directed to a homepage, not a post-click landing page.”
3.6.2.2.2. Which means that it must be costing the millions of dollars worth of business
3.6.2.3. User have limited attentions span, and you need to hook their attention from the get go, adding navigation will not help us.
3.6.2.4. Even nav links on footer could be a distraction.
3.6.2.4.1. Imagine someone reaches to your CTA after reading the long landing page
3.6.2.4.2. and then got distracted by links in the footer
3.6.3. Three great examples
3.6.3.1. Google Search | About Google app
3.6.3.2. Scroll page
3.6.3.3. Simple without nav
3.7. Why you should use real photos instead of stock photos on your website
3.7.1. Problem with stock photos
3.7.1.1. Everybody in your vertical is probably using the same photos
3.7.1.2. The worst is that your direct competitors is using the same photo
3.7.1.3. Everywhere girl
3.7.1.3.1. Jennifer Anderson stock photo of college graduation
3.7.1.3.2. It became so popular that Dell & Gateway ended up using it at the same time in “Back to School” campaign
3.7.1.3.3. It became so famous that there are communities of people who would post her photos if they spotted it somewhere
3.7.1.4. Associating with a wrong image
3.7.1.4.1. Our brain associates more with photos rather than with text
3.7.1.4.2. So if they associate the particular stock photo with your brand you are screwed
3.7.1.4.3. People are being scammed by using same stock photos because certain photos have built trust
3.7.1.4.4. and if the negativity is associated, they your brand will ignored as well
3.7.2. How to use stock photos
3.7.2.1. Reverse search it on tools like tiny eye
3.7.2.2. See who and how many website are using it
3.7.2.3. Modify the hell out of it
3.7.3. What to use if not stock photos
3.7.3.1. If software landing page use real screenshots of your software
3.7.3.2. If personal branding, use your own images as much as you can
3.7.3.3. Use real client images in testimonial section
3.7.3.4. Use modified vector graphics
3.7.3.5. Snap real photos from your mobile
3.7.3.6. Use infographics, icons and diagrams
3.7.4. Examples
3.7.4.1. Cize™
3.7.4.2. David Bach
3.7.5. Great reference article:
3.7.5.1. Which Stock Photos Convert Higher?
3.7.5.2. https://conversionxl.com/blog/stock-photography-vs-real-photos-cant-use/
3.7.5.3. The Art & Science of High-Converting Landing Page Images
3.8. How to use explainer video throughout your marketing funnel
3.8.1. Why
3.8.1.1. The average attention span of people visiting your website is less that 8 seconds
3.8.1.2. On the top of that most of the landing pages are boring and non engaging
3.8.1.3. Almost everybody is a visual learning
3.8.1.4. 1 min of video is equal to 1.8 millions words, crazy?
3.8.2. Using it throughout your funnel
3.8.2.1. Top of the funnel
3.8.2.1.1. This stage is all about creating awareness and agitation among your customer
3.8.2.1.2. It could be an
3.8.2.2. Middle of the funnel
3.8.2.2.1. Now that they have shown you their interest
3.8.2.2.2. At this stage we will build trust and show that your product is the best solution for their problem
3.8.2.2.3. At this stage EV could be
3.8.2.3. Bottom of the funnel
3.8.2.3.1. This is a decision stage, They are almost ready to buy but still might have a slight doubt
3.8.2.3.2. You can help them pull the trigger by
3.8.2.4. Even make after purchase video
3.8.2.4.1. This makes them use your product faster and more often
3.8.2.4.2. Reduces the refunds
3.8.2.4.3. Helps them transition from free trail to paid version or upgrade their plan
3.8.3. Examples
3.8.3.1. CaseComplete Increased Their Conversion Rate by 23%
3.8.3.2. CrazyEgg Increased Revenue by $21,000 Per Month
3.8.3.3. 8 Landing Page Animated Explainer Videos that Nailed it
3.8.4. Great reference article:
3.8.4.1. How To Use Explainer Videos Through The Buyer's Journey
3.9. How to avoid false bottom issue in your landing page
3.9.1. What is false bottom
3.9.1.1. False bottom happens when a user get an illusion that the page will not scroll further, despite the fact that there is more content below that point.
3.9.1.2. So if the bounce rate on your home page is high, it could be due to the false bottom problem.
3.9.1.3. Example: Advance chance to secure your seat 2019 | The Titan Summit
3.9.1.4. Semplice - Create your custom online design portfolio
3.9.1.5. Vinyl Flooring & Lino Flooring Specialists | Atrafloor
3.9.2. How to avoid it
3.9.2.1. Don't add horizontal line above the fold, it gives illusion that this it the footer of the page and there is nothing below this point
3.9.2.2. Use directional cue, this is the reason you might see a lot of people using arrows right after the hero banner
3.9.2.2.1. Joe Polish - One of the most sought after marketers alive today
3.9.2.3. Reduce the size of your hero banner so that the second section can slide up a little further up, giving people the cue that there is more on this page
3.9.2.4. Use less white space, sometimes people end up using soo much of the white space on their landing page that it gives the illusion that the page have been completed
3.9.2.5. Add call to action button: something like learn more → which allows the landing page to smoothly scroll down to other sections.
3.10. Will adding background video to your website increase your conversion?
3.10.1. Why people use it
3.10.1.1. It looks cool and tempting as a new technology
3.10.1.2. Trendy and looks modern, boost ego of the marketer
3.10.1.3. There are alot of stats supporting that video improves the conversion
3.10.2. The problem
3.10.2.1. There are many problems with the video background
3.10.2.1.1. It loads slow
3.10.2.1.2. It can distract user from the main CTA
3.10.2.1.3. Increases cognitive load in human brain
3.10.2.1.4. Even if you use async technology to load website faster, there is still a video placeholder before it loads
3.10.3. Bad examples
3.10.3.1. Examples
3.10.3.1.1. Story & Heart
3.10.3.1.2. Dadaab Stories
3.10.3.1.3. HLK | HughesLeahyKarlovic Advertising Agency
3.10.3.2. Why they are bad
3.10.3.2.1. Distracting form call to action
3.10.3.2.2. Makes it worse for landing page
3.10.4. Good examples
3.10.4.1. Toggl - Free Time Tracking Software
3.10.4.2. Wistia - Brand Affinity Marketing Software That Helps You Grow Your Brand with Video
3.10.4.3. Grain & Mortar
3.10.4.4. Vandal New York
3.10.4.5. Kalexiko - Web Design Birmingham & SEO Agency. Based in the Midlands
3.10.5. The balance
3.10.5.1. Only use if it makes sense
3.10.5.2. Mostly on website rather than landing pages
3.10.5.3. If you want to focus more on brand showcase instead of conversions or signup
3.10.5.4. Add alot of good contrast to make CTA prominent
3.10.5.5. 6-10 seconds loop is more than enough
3.10.5.6. Turn of the auto audio, reduce load too