Hi, everybody. One of the things that you're going to want to do is test your site to see how it's doing across multiple devices and multiple view ports. But unless you happen to just be flux with money, you may not have access to all these different types of platforms. So what can you do? Well, one option if you're using a desktop or a laptop, that you can resize your window and refresh the site. So if I go here. Two. The Introduction to Wed Design for everybody, of course. I can just use my mouse and resize it, take a look and see how things are going to change. Here, large view, tablet and mobile view. So, I can see that I have three different break points that all work. That works great if you're on a laptop or some sort of desktop, but what if you're on a mobile device? It isn't simple or even often possible to resize that window, so we need to come up with another solution that will help you out. What you can do is look for online tools to help you check for your responsiveness. One that you may want to look at is called ami.responsivedesign.is. I'm going to go through and I'm going to show you three different sites and how we can use this website to test the responsiveness of these webpages. Here we go. So here's a website that you can go to. Down at the bottom of the screen, you can fill in the URL of the site you want to look at. Just so you know, this is made with an HTML tag that makes it so that you have to put in a URL. So it's always going to be looking for at least that www. So let's go ahead and look at that Intro to Web Design website again. [SOUND] Oops, see right there. I forgot to put the http in. So there we go. Now if you look up at the top of the screen you can see that my website is now displayed on four different platforms. I have the desktop, the laptop, a tablet view and a mobile view, and you can see that each one is a little bit different depending upon the platform I'm using. Let's check out another site. In this case, again we can see that this is a responsive setup. Now, even though the pages may look very similar, you can see that on the mobile view that weather map isn't there, that kind of brightly colored map. In addition, the laptop and desktop view are very similar. But you can see that in the tablet view, we've really broken it down and they use more of a two column grid system rather than having quite as much content. The next site I'm going to check is one that I've made from my umich site. Going here, paste in that URL, [SOUND] and we can take a look. What I've tried to do here here is to have a little bit more distinct look, so that you can see that I've tried to develop my site for really what the people might want to be using. So in my larger view I've got my picture, because you know, everybody wants to see me. I've got my name and then my contact information. On the laptop view it's very similar. In the tablet, I've kind of just reduced the space. That information is still important, but I don't need so much space in between them. In my phone viewer, mobile view though, I've gotten rid of the picture and I've started to stack the information to make it easier for people to see. I'm able to look at all four of these views on a single website, and this makes it much easier than trying to go back and forth and resize my window. However, there is the caveat that this site doesn't always work for every different website. It may be the case that people aren't using traditional responsive web design. So on this site, the pages all look the same. But if you were actually viewing them on a browser, they would look different. The next option you can try is to use tools on your Chrome or Firefox, or whatever browser you're using. It's often the case that your browser is going to have special tools that let you simulate looking at things from different viewpoints. With Chrome, you can use inspect element to see the different viewpoints in realtime. Let's take a look. So I've gone here to my website looking at it in chrome and pretty much enlarge screen view. I'm going to drag it out a little bit here. You can see i've got my large screen I've got a lot of spacing in it. So I'm going to go in and do inspect element by right clicking Click over here. And what I can do now is up in the upper left-hand corner, there's something that looks like a small little mobile phone. It says Toggle device mode. I'm going to click on that. And when I do, I am now viewing my site as if I'm viewing it on a small mobile phone. Depending upon your operating system in the browser of the addition that you have, you can go up to the device in the upper left hand corner select mode, or model actually. And say what would it look like on an iPhone 6? It is a little bit bigger, what if I look at it on a google nexus seven. Same thing. So you can pick a number of different options to kind of see what the site would look like. Let's see, do one last one, a laptop. Depending on which type of platform people are using. So now that you know some quick and easy ways to review the responsiveness of existing sites, it's a really good idea for you to go out and get that feel for what you think looks really good, or sometimes even more importantly, what you think you want to avoid on your site. Go ahead and have some fun and mock your friends if their sites aren't responsive. Don't worry, yours will be.
