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

Bonus Materials with Purchase

Dedicated Landing Page Design Best Practices

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Isaac Rudansky

Globally-recognized Google Ads and PPC expert with millions in revenue generated across 450+ businesses internationally and over 900k students worldwide.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design Web Design Design Thinking Business

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.

2,000+ classes ranging from fundamentals to advanced techniques.

Making Your Landing Page Design Work Better With Custom Javascript Snippets

Making Your Landing Page Design Work Better With Custom Javascript Snippets

Lesson Info

40. Making Your Landing Page Design Work Better With Custom Javascript Snippets

Lessons

Laying the groundwork for good design

The Myth Of The Perfect Landing Page Conversion Rate

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

Business Models and Understanding Your Conversion Actions

The AIDA Sales Funnel and The Online Decision Making Process

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

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

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

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

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

Making Your Landing Page Design Memorable

Quiz: Landing Page Design Fundamentals

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

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

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

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

Readability and Visual Hierarchy Landing Page Design

Respecting Web Conventions in Landing Page Design

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

Information Architecture and Accessibility - Landing Page Design Best Practices

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

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

Dedicated Landing Page Design Best Practices (Part 1)

Dedicated Landing Page Design Best Practices (Part 2)

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

Using Scarcity to Improve Conversion Rates on Your Landing Pages

Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages

Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory

User Scenarios and Contextual Perception in Landing Page Design

Quiz: Principles Of Persuasion in Conversion Rate Optimization

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

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

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

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

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

Discussing Landing Page Design Changes and Creating our Primary Content Section

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

Publishing Your Unbouonce Landing Page on Your Custom Domain

Adding Custom CSS in Unbounce to Create Professional Drop Shadows