32.a Mobile Optimization Overview & Inspect Tool

Video Summary

We have our web page or landing page all set up. One of the last few things we need to do is make sure every section of our website looks good on all devices, whether you’re on a phone, a tablet, a laptop, a desktop, we need to make sure everything is optimized. And before I hop in and start doing these mobile optimizations, the first thing I always do is I go to the Inspect tool. 

And I just start looking around and seeing what things look like at different sections. So for right now, I’m gonna start at, if you if you go here and you make sure that you click on this mobile feature, versus little phone and a tablet icon. And what you want to do too, is make sure you come here and click and make sure you’re on the responsive mode. Now these these different sections down here, or these different options could allow you to pick an exact device and see what it will look like on there. But really, all we really care about is the width of everything. You know, because the website can be super tall, it doesn’t matter what we pay everyone. In this lesson we’re at different points. So let’s just start here at laptop L. If we hover over, then we can go to lap just laptop and laptop L is large. This is kind of a smaller laptop. 

We need we definitely need to move some stuff around for the tablet. Let’s see what a large mobile phone looks like. All we’ll definitely have to change something there. And you know, you could always go down to these mobile assets the super small and see how that that looks. I believe that the 320 pixel wide is like one of the old iPhones with the iphone four. I don’t think they make phones that fit anymore. So usually right around 375 and above is where you would want you know you really want to optimize for but I kind of kind of just go after I kind of go through each section I’ll just pick out and I’ll go okay, we’ll do the medium mobile size and I’ll just kind of scroll through and just see what everything looks like. 

You know, I want to make sure that this is I don’t have this much whitespace or blue space. But other than that, that looks pretty good. Pretty good. On the testimonials. That section looks pretty great. And I think everything else was pretty, pretty great as well. And then I’ll just kind of go up and put a tablet and then I’ll kind of scroll up on a tablet. This photo doesn’t really necessarily work. 

So we might want to change either the photo at this width or the placement of the photo or potentially just take the photo out and just have the the like the quote or the get a free inspection, contact form section. So that’s usually what I do before I start any mobile optimization like to get a good idea of what I’m looking at how things look like or what things look like in different sections. And then once I feel like I’ve got a good grip on everything what I’ll do is I’ll get out of Get out of the Inspect tool. and with Elementor we can do pretty much 90% of all our mobile optimizations from the editor. So with that being said I think the next step is to go through and start optimizing, all of our sections are I’ll see you in the next lesson. 

PHP Code Snippets Powered By : XYZScripts.com