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