Making Your Landing Page Design Work Better With Custom Javascript Snippets
Isaac Rudansky
Making Your Landing Page Design Work Better With Custom Javascript Snippets
Isaac Rudansky
Lesson Info
40. Making Your Landing Page Design Work Better With Custom Javascript Snippets
Lessons
Laying the groundwork for good design
13:23 2The Myth Of The Perfect Landing Page Conversion Rate
12:05 3The 3 Main Types of Landing Pages and How To Use Them Effectively
18:57 4Business Models and Understanding Your Conversion Actions
06:04 5The AIDA Sales Funnel and The Online Decision Making Process
16:48 6The Awareness Stage of the Funnel ... Where It All Begins
17:26 7The Interest Stage of the Funnel ... Tell Me More
14:10The Desire Stage of the Funnel ... I Want What You Sell
12:44 9The Action Stage of the Funnel ... I'm Going to Buy What You Sell
09:05 10The Fogg Behavior Model and how it Applies to Good Landing Page Design
19:25 11Making Your Landing Page Design Memorable
12:44 12Quiz: Landing Page Design Fundamentals
13The Primacy of Product and The Concept of Usability in Landing Page Design
15:23 14Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks
11:17 15The 5 Second Usability Test in Landing Page Design (and how you can use it now)
12:25 16The Art and Science Behind Designing High-Converting Calls To Action (CTA's)
18:29 17Readability and Visual Hierarchy Landing Page Design
19:50 18Respecting Web Conventions in Landing Page Design
13:22 19Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates
19:53 20Information Architecture and Accessibility - Landing Page Design Best Practices
19:51 21Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices
15:34 22Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices
08:43 23Dedicated Landing Page Design Best Practices (Part 1)
14:57 24Dedicated Landing Page Design Best Practices (Part 2)
12:18 25Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices
26Using Scarcity to Improve Conversion Rates on Your Landing Pages
09:46 27Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages
12:07 28Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory
18:56 29User Scenarios and Contextual Perception in Landing Page Design
16:37 30Quiz: Principles Of Persuasion in Conversion Rate Optimization
31My Favorite Landing Page Builders and Getting Started With Our Unbounce Page
10:02 32Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
07:28 33Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
16:25 34Working With Background Imagery in Landing Pages and Developing Our Hero Section
15:36 35Creating a Form, Action Block, and Finishing the Hero Section in Unbounce
19:27 36Discussing Landing Page Design Changes and Creating our Primary Content Section
16:17 37Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce
10:42 38Publishing Your Unbouonce Landing Page on Your Custom Domain
03:43 39Adding Custom CSS in Unbounce to Create Professional Drop Shadows
06:03 40Making Your Landing Page Design Work Better With Custom Javascript Snippets
08:08 41Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines
02:30 42Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form
03:30 43Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights
12:20 44Integrating Your Unbounce Form Submissions With Your Mailchimp Account
09:06 45Quiz: Building a High Converting Landing Page From Scratch
46Wester Computer Audit (Part 1)
08:28 47Wester Computer Audit (Part 2)
09:16 48Wester Computer Audit (Part 3)
15:19 49Wester Computer Audit (Part 4)
13:52 50Quiz: Landing Page Audit in Action
51Conclusion
02:52 52Final Quiz
Lesson Info
Making Your Landing Page Design Work Better With Custom Javascript Snippets
How do you design fans and welcome back? Of course if we're gonna be sending traffic to mobile devices, we should have a mobile optimized page and then bounced makes that really easy. So this desktop version is gonna be your version for desktops and tablets. It's not gonna be, it's not fluid. Like we said, it's not gonna be responsive grid, but we could design a specific mobile version, which is really cool because it allows us to hide certain elements and rearrange things in whatever order we want. Right? So we're gonna go over to mobile down here in the bottom. Right? That's how we toggle between desktop and mobile. If you're doing this for the first time, you might get a window that shows you a few different aspects of the mobile designer and then you just click don't show that message again. The first thing I want to select is to show mobile version two visitors. Right. If I don't have that selected the page will not be responsible and they'll get no mobile version and look over he...
re. Right? Everything is a complete mess. One thing one bounced does not do a very good job of is redesigning my page on mobile for me and everything really works the same way. Right, Dragon drop. Um and you're able to lay out your elements differently. However you want them to be laid out. You're not able to change the width of the breakpoints over here. These guidelines. But what we could do is potentially have everything just span the entire page. So we don't on mobile where we don't have a lot of margins, we can get everything to span. So one thing that's really important to remember when you're designing for mobile is that as you're moving and redesigning and re sizing elements you should hold down the command or control key to avoid moving that element on the desktop version as well. It's kind of a finicky sort of system. Sometimes it will affect the desktop element, sometimes it won't but if you do something on mobile that affects the affects that same element on desktop, you'll get a little bit, you'll get a little warning notification here pop up on the desktop button but let's just start kind of rearranging things. So I'm gonna bring my logo to the center. Right simple enough. Maybe you could make it a little bit smaller, holding down the command key the entire time center it. Again, I'm not gonna make this necessarily totally perfect right now, just for the sake of getting this done quickly. Alright, fast and easy. CPAP enrollment should be the first thing up here. Now you can change around text formatting for mobile. Right? So if I made this, if I centered this look you see that changes have affected the other view on desktop, it's going to be centered on the desk, it's gonna be centered on desktop as well so I can go back over here. Um What you could do if you really wanted to center text on desktop, you could hide this element, you can make this element invisible on mobile and duplicate it and create another and have it centered right? But we're not going to go and do that now, that might be something that I will do what you can resize things. Right? So I'm gonna have this up here, just my main call to action. Right over here we have the new york state cd path experts and obviously once it's red, that means it's outside of the guidelines. Okay, I could I could make it smaller like that. Alright, so make the text a little bit smaller um maybe give a little bit more breathability. Obviously I'm just holding down command as I move along. This picture is going to get much smaller over here, put this on the bottom and we're gonna maybe have the form above or you know? And also you can direct you can resize obviously resize the size of sections, so I'm gonna bring this section down quite a bit here. Alright, We can keep this background image for now. We can get rid of it, we'll see how it looks on mobile devices. Bring this white box in like so resize the box first and then we'll resize the elements inside the box. All right. And we can make this a little bit smaller and we have our our icons once again they're all in a box. So we have to kind of move everything off here. Everything I kind of put on top of each other there. Once again not a big deal. Um a line, make sure everything's a line, snap it into the grid. Alright, easy enough to take care of it. Easy enough to take care of these issues. I would love to see unbound to get a little bit more sophisticated with their mobile layout. But listen it is what it is, we work with it, grab my form which is all out here, bring that in, resize the blue, Resize the form. I'm just talking you through everything here. Um Just to give you a sense you could, you could speak obviously it is getting a little bit too intense, you can speed through this. I just want to give you a sense of how all this works again, if you're feeling ambitious, feel free to, you know, you could hide elements and then and duplicate them and hide them on the other on the other view. So you know that's definitely a tool that you could use if you want to. We've got to make this section bigger to give ourselves room for this nice image over here. Um We got to line up the button and line up my box again. Okay, Alright so we didn't know it didn't take too long, just a few minutes but this is looking pretty pretty good. Okay let's save that. Always double check your mobile device, your I'm sorry, always double check your desktop layout to make sure everything is in its right place and still functioning as it should be functioning now. We got to just do a couple of things here with this button and the link we set. In fact you were going to have to put in our actual domain name because you're gonna need to put in a full U. R. L. So we just go to let's see get Cpap dot com copy that and paste it in and add and it comes in with your forward slash. Alright so that's how that's gonna work. So go ahead and click save and then republish your site right? And I'm going to de select, select not to see this morning again republished. And they will be able to test to see how our buttons are working. Go back to my site. I can refresh and see how we're looking. Right? Alright so now we can go down here, hit this button and it does pop me up to the top, right? But it's not popping me up to the top smoothly. So in the very next lecture I'm gonna quickly show you how to add a very simple smooth scrolling effect. So you get a more professional feel on your landing pages as you send people back up to your main form and I will see you very soon in that next lecture
Class Materials
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 Classes
UX Design