Skip to main content

Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

Lesson 41 from: Creating High Converting Landing Pages

Isaac Rudansky

Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

Lesson 41 from: Creating High Converting Landing Pages

Isaac Rudansky

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

41. Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

Lessons

Class Trailer

Landing Page Design Fundamentals

1

Laying the groundwork for good design

13:23
2

The Myth Of The Perfect Landing Page Conversion Rate

12:05
3

The 3 Main Types of Landing Pages and How To Use Them Effectively

18:57
4

Business Models and Understanding Your Conversion Actions

06:04
5

The AIDA Sales Funnel and The Online Decision Making Process

16:48
6

The Awareness Stage of the Funnel ... Where It All Begins

17:26
7

The Interest Stage of the Funnel ... Tell Me More

14:10
8

The Desire Stage of the Funnel ... I Want What You Sell

12:44
9

The Action Stage of the Funnel ... I'm Going to Buy What You Sell

09:05
10

The Fogg Behavior Model and how it Applies to Good Landing Page Design

19:25
11

Making Your Landing Page Design Memorable

12:44
12

Quiz: Landing Page Design Fundamentals

Principles of Good Landing Page Design: Examples, Case Studies & Best Practices

13

The Primacy of Product and The Concept of Usability in Landing Page Design

15:23
14

Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks

11:17
15

The 5 Second Usability Test in Landing Page Design (and how you can use it now)

12:25
16

The Art and Science Behind Designing High-Converting Calls To Action (CTA's)

18:29
17

Readability and Visual Hierarchy Landing Page Design

19:50
18

Respecting Web Conventions in Landing Page Design

13:22
19

Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates

19:53
20

Information Architecture and Accessibility - Landing Page Design Best Practices

19:51
21

Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices

15:34
22

Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices

08:43
23

Dedicated Landing Page Design Best Practices (Part 1)

14:57
24

Dedicated Landing Page Design Best Practices (Part 2)

12:18
25

Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices

Principles Of Persuasion in Conversion Rate Optimization

26

Using Scarcity to Improve Conversion Rates on Your Landing Pages

09:46
27

Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages

12:07
28

Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory

18:56
29

User Scenarios and Contextual Perception in Landing Page Design

16:37
30

Quiz: Principles Of Persuasion in Conversion Rate Optimization

Building a High Converting Landing Page From Scratch

31

My Favorite Landing Page Builders and Getting Started With Our Unbounce Page

10:02
32

Getting Familiar With the Unbounce Page Builder and Adding Our Header Section

07:28
33

Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool

16:25
34

Working With Background Imagery in Landing Pages and Developing Our Hero Section

15:36
35

Creating a Form, Action Block, and Finishing the Hero Section in Unbounce

19:27
36

Discussing Landing Page Design Changes and Creating our Primary Content Section

16:17
37

Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce

10:42
38

Publishing Your Unbouonce Landing Page on Your Custom Domain

03:43
39

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

06:03
40

Making Your Landing Page Design Work Better With Custom Javascript Snippets

08:08
41

Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

02:30
42

Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form

03:30
43

Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights

12:20
44

Integrating Your Unbounce Form Submissions With Your Mailchimp Account

09:06
45

Quiz: Building a High Converting Landing Page From Scratch

Landing Page Audit in Action

46

Wester Computer Audit (Part 1)

08:28
47

Wester Computer Audit (Part 2)

09:16
48

Wester Computer Audit (Part 3)

15:19
49

Wester Computer Audit (Part 4)

13:52
50

Quiz: Landing Page Audit in Action

Conclusion

51

Conclusion

02:52

Final Quiz

52

Final Quiz

Lesson Info

Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

how do you design fans? And welcome back this is gonna be super quick. So we want to create a smooth scroll effect. So when I click on this button it smoothly drags me back up to this top form as opposed to just quickly bouncing me there. Where it sometimes gives users a sense of disorientation, a little bit of confusion. It's just not super professional. So the first thing we're gonna have to do go back to our button element and remove the you are full U. R. L. Right so do it as I have it, you just have the hashtag and your element that you're gonna be scrolling too. Alright so remember we want to scroll to this top section, we just grab this element over here and you just paste that in whatever you wherever you want to scroll to. If you want to just scroll to your form itself you can just scroll to scroll up here, you can do that too and just grab that I. D. So I want to scroll to the top section. Um So we have it like that. The next thing you're going to do is going to have to add s...

ome custom javascript. So open up your javascript window over here, you can name it, let's say you want to make it smooth scroll. And I have some custom um javascript that I found online that does this really well and I'm going to add this exact code in the resource section for this lecture. All you gotta do is just paste it in and literally save it. That's all you don't need to customize it whatsoever, ignore the little mobile view notification and because the javascript is also going to apply on mobile click save click republish, go back to your site and refresh and now when we scroll down and hit this button, watch what happens. Beautiful. Right? Which is a smooth scroll back up to the top now. So you want to have it scroll a little bit faster, you can customize that javascript, go back into your website. Open up the javascript. Open up smooth scroll. So you find this number over here. So this is basically declaring that should take milliseconds to get to the top of just 2000 which is two seconds. So if I change that to 1000 milliseconds that'll be one second doubling the speed. Save the code. Save the page republished the page. Wait for paige to be republished. Once it's republished, we're gonna go back to our live site and refresh and see if we like that speed and waiting there. It is done refresh click faster. Alright, I like that. I like 1000 milliseconds in this instance. You can do it however you want, you can make it slower faster. You don't want to be too slow cause that'll just be weird. But this is a pretty typical traditional speed I think it looks great. Alright so that's how you add a custom scroll javascript to Euron bounced pages. Um to give you that professional feel if you're linking back to your main call to action from anywhere else on your landing page. And that was pretty cool. So I will see you guys very shortly in the next lecture.

Class Materials

Bonus Materials with Purchase

Dedicated Landing Page Design Best Practices

Ratings and Reviews

a Creativelive Student
 

Great Job!! Isaac's energy is contagious, he is insightful and engaging. It is a lost of valuable content and I feel I learned so much from him in this short time. He is a reason I will end up with the subscription so I can watch this course again along side of his other courses. My only complaint was live streaming kept turning off and I missed information.

Student Work

RELATED ARTICLES

RELATED ARTICLES