How To Make Your Website Mobile Responsive

Lesson Details:

Video Transcription: This course is brought to you by Appy Pie as part of our academy series next up is responsive editing and this is one of the most powerful features of thrive architect I believe it's about half of all website traffic is on a mobile these days so if you've designed your website to look great on a desktop but it looks like crap on a mobile device then you are creating a poor experience for half of your visitors if you want your site to look professional and to be used in 2018 it's got to look good on mobile and thrive architect is great at this like I mentioned before when you click on this responsive view you can see what it looks like on a mobile device and start to make changes and the way thrive architect attacks this problem of editing on a mobile is really cool and I want to walk you through how it works but to keep things simple I'm just gonna clean this up a little bit so let's get rid of these columns get rid of this background section and just make a really simple simple website I'm gonna try a heading in here this is my website header at a paragraph welcome to my website you are going to love it and let's add a few more things just to get an idea I'm gonna add a column do half in half put an image in there add a header sign up for my awesome email list and put a button below that enter and now just one last thing I'm just gonna add some padding here okay that's it so let's say you've designed your website actually let's lower this image you designed your website you're super proud of it you think this looks amazing and now you want to edit it on mobile well what happens when we edit on mobile maybe it looks the way you want it to but most often it's gonna look like crap so we have to fix it and the way thrive architect works is any changes you make when you're in the desktop view will also change in the tablet view and change in the mobile view so for example if I were to select our background section and I add 200 margin to the top if I go to the tablet or mobile there's also going to be a 200 margin at the top but if I were to edit on a mobile device select that background section and add 200 margin to the top watch what happens when we go back to the desktop it didn't affect the desktop so this is called a cascading rule where if you're on the desktop any changes are applied to the tablet and to the mobile and then if you were to edit the MOE or the tablet device any changes here do not affect the desktop because that's higher up in the hierarchy but all changes in the tablet view will affect the mobile view and then all changes in the mobile view will only affect the mobile view so this is another thing where as soon as you play with it it will make more sense but it's actually a really really cool design because what it means is there's a very logical way to go about creating your websites you want to start in the desktop view and do whatever you can to make sure that the page looks great on desktop once you're happy with how the page looks then you switch to tablet and you start changing things until they look the way you want them to so let's say on the tablet I want the image to be a little bit smaller I want the button to be smaller and I also don't want all this padding I can change that but that doesn't change my desktop so my desktop still looks the way I want it to so then let's say your desktop looks the way you want it to the tablet looks the way you want it to now you can start editing the mobile and this is actually pretty close in this example of how I want it to look but let's say I don't like this being so close to the edge well now I can select the background section and add in some padding right there so I'm going to say 20 pixels 20 pixels and get where did that top space now if I click save and if I were to preview this on a mobile device which you can simulate by opening preview and then shrinking your browser window or by opening on your phone then you'll see what it looks like so there's only one exception to this cascading role so most changes when you make them on a desktop they apply to tablet and mobile but if you make them on the mobile they do not apply to the tablet and desktop and that rule is true for any of the options on the sidebar but you also have something called inline options so let's say you select this text now if you were to edit this text so delete it and type something else this is my website flowers or if you were to change any of these inline options like align left those will apply to tablet and desktop so it's a really simple idea but I know it can trip up new people the idea is anything that is edited inline which means with these options or in the box itself will be affected on all three views no matter what [Applause] so then that begs the question what if I want to have a different header on my desktop than I do on my mobile so an example of this is let's say you have a really great heading here are my 10 secrets on how to overcome your big mental blocks and let's just make that uppercase and let's say that's great I love that heading on my desktop but if I go to mobile maybe that heading is too long just for the sake of this example so that's when the responsive option comes in so with most elements inside of thrive architect one of the boxes on the left hand side is responsive and that shows you the rules for this element so what you can do is you can duplicate this header so you have two headings and for the first heading let's say I only want that heading to show up on desktop well I can leave desktop selected but I can uncheck tablet and I can uncheck them and for this one I'm going to rename it so this is the exam all heading just removal and now let's say I don't want this heading to be visible on the desktop it goes away and let's say I don't want it to be visible on the tablet so now if we go to mobile see this is the example heading just for mobile showing up on my mobile device and the other one for desktop is hidden so this gives you a lot of flexibility when you're optimizing for mobile devices and you can always just click on this box and show all of your heading elements so then you could select this and say wait a minute I actually want this on desktop and then now I can uncheck this and it's still there so that's editing for responsiveness in a nutshell just play with it it's really powerful and you're gonna love it when you get familiar with it.