2.2 Responsive and Mobile Friendly
1.Introduction1 lesson, 00:36
2.WordPress Themes Under the Hood10 lessons, 1:23:49
3.Conclusion1 lesson, 05:00
2.2 Responsive and Mobile Friendly
Hey welcome back to WordPress themes things to check before you buy. In this lesson, we're gonna check out how you can make sure that a theme you buy is responsive and mobile friendly. So what that means is, it has to look good and function well no matter what kind of device or what size screen a person Is looking at your site on. Your site has to accommodate a massive range of different sizes of screens and different types of devices. So on the one end of the spectrum, you might have a tiny little mobile phone with an itty bitty screen that only allows for about 320 pixels of width. But then on the other end of the spectrum, you might have somebody on a 27 inch monitor and they've got 2000 pixels of width or higher to deal with. And if you have a theme that's only looking good on a little screen then, anyone who is looking on that big monitor is not gonna be able to enjoy your site properly and vice versa. If you have a theme that only looks good on a giant screen, than all of your mobile phone users are gonna suffer. What you need is a theme that's able to adapt seamlessly to any type of device that gets thrown at it. So without being a web designer yourself, how are you supposed to figure out if a theme is probably responsive or not? Well, don't worry, because you don't any special expertise. All you need is a couple tricks of the trade that we use to test our own sites. And I'm gonna show you how to use these evaluations methods so that you can check on a theme, make sure it's responsive before you purchase it. And we talked about evaluating each one of the topics that we gonna be covering in this course and how important it is for your specific site. This category, this is pretty relevant to everybody. You can it as a given fact that people are gonna be looking at your site on all different kinds of devices. So no matter what kind of project you've got this is something you definitely need to check on, and that's why we're going through it first. And the way that I'm gonna show you the things that you should look for in a responsive theme is just by showing you some good examples of themes that do it right. Now, let's have a look at a couple of specific things that you wanna check on. One of the gotchas that you can have happening in themes that don't adapt very well to a large monitor size is a theme like this, for example. Where we've got these really big, wide images that are the full width of the screen. Sometimes you might find that a theme developer has not considered the largest possible size that a layout could be. And you might find that down the right side here for example this image gets clipped off. So instead of having the image stretch the full width it hits a maximum size, and then it doesn't handle it very well, or you might get a really clear seam down the side where the image repeats itself. But this theme is a really good example of a theme that does the right thing with its site with images. So this one we can see that if I resize the browser window it doesn't matter what width I have this browser window, the images up in this slider stay at the correct size. So that's one of the first things that you can check on. Another thing that you wanna look at is the width of any text content here. So there's a certain number of words per line that are comfortable for the human eye to read. If you have only a few words per line then your eye gets tired from having to continually go down to the next line and the next line and the next line. And if you have too many words per line, then your eye gets tired from having to go too far to the left and right in order to take in that whole line. So when you're checking to make sure that a theme looks good at a really wide size like this. You wanna make sure that the theme developer has contained any text to a nice, readable width. And this theme is a really good example. So this text here is just right. If this column that the text is in was as wide as this site, so let's say if it went from here to here, that would be uncomfortable to read. And it would definitely be uncomfortable to read if it went all the way from this edge over to this edge. So you wanna have a look at a theme at the widest size that you can get it. And make sure that you feel like it's comfortable to read the text. Another thing that you wanna check on is making sure that the columns that might form the layer collate properly. So I'll show you what I mean, we'll go back to this theme and this is actually a really good example of collapsing columns. So you can see here that we've got three different columns, but on a thin device like a mobile phone, you're not gonna be able to split that little amount of space into three columns and still be able to comfortably absorb that content. So a well designed theme is going to reduce the number of columns that are in the layout as the amount of available space reduces. So let's see how that works in action. We've got three columns in this theme at its widest size. And then as we reduce it down, you can see that the columns is already shrinking in width. And there we go, so now we've reached the point where having three columns would be too much of a squeeze, it's collapsed down to two columns so that it's much more readable. And if we keep going, we can see it's squeezing down even more and there we go, now we've got it collapse down to a single column. And you wanna make sure that every theme that you have does this for you. Everything needs to collapse down to a single column at its narrowest width. So those considerations alone will take you a long way towards making sure that your site is fully responsive. Make sure that it works at the widest possible layout and at the narrowest possible layout. And then on top of just making sure that the layout as adoptable to different widths, you also need to make sure that the theme is gonna work well on different types of devices. So the first and the easiest thing to do is just to get the URL of a demo of the theme that you're interested in buying. And just plug into any device that you have, every phone, every tablet, every laptop, every desktop, just check on all of devices that you can get your hands on. But obviously, there's only so many devices in every individual has, and you can't test everything. So what you need is a way to emulate the devices that you don't personally own. And you can actually do that totally free by using the Chrome browser. And there are other browsers that give you this device emulation functionality, too. But we'll just focus no Chrome for now. All you need to do is open up the demo in Chrome and then press Ctrl + Shift + I. And that is gonna brings up Chromes developer tools. Then if you look down in a bottom left here, there's a little button that says toggle device toolbar. If you click that, you can see we have toolbar across the top that's opened up. And this is where we can simulate different types of devices. So, for example, if I click this little drop-down list here and I want to emulate an iPhone 7, it's automatically changed this preview to be the same dimensions that an iPhone 7 display has and you can see that we've got this little circle. Instead of a cursor, so that simulates touch functionality for us, so now we can use it to drag the screen up and down. We can make sure that the menu remains accessible, remains usable when you're working with touch. We can double check and make sure that our initial test of the layout are still solid in this format that everything's still looking right. And we can also flip this orientation, so that we get to see a couple more different layouts to check on. So you can have a look through this list here, and you can try emulating a whole bunch of different devices And you can also jump in here and create your own additions here. So if there's a device that's not showing up in that drop down list and you want to add it, then you can go ahead and do so by just checking the box for the device that you wanna add. Or you also have the option to add your own custom device here. So for the purposes of evaluating a theme and making sure it's responsive and mobile friendly, that's really going to be enough to confirm that the theme is getting across the line and it is gonna work for your site visitors using all different types of devices. So just to recap, get onto the largest monitor you can get access to and just resize the browser window with your theme demo inside it. And make sure everything looks right. Spin it up on as many different devices as you can access and just test it that way. And then for all the devices that you don't have access to, use this emulation tool that's bundled in with the Chrome web browser free of charge. All right, so now that you know how to check if a theme is responsive and mobile friendly, the next step is to make sure that it's going to work on all the different browsers that your site users might be using. So every different browser can have slight differences in the way that it's going to render a web page. So something that works perfectly in one browser might not be perfect in another browser. So in the next lesson we're gonna go through how you can check and make sure that a theme you're interested in is properly cross browser compatible. I'll see you there.