FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Testing Tools

Hi and welcome to the last lesson in bomb proof web design. This final episode, I want to talk to you a little bit about the testing tools you can use to help inspect your code and your websites. To investigate all the different aspects of them and to emulate all the different types of setups that you want to create solid support for. Some of these tools you will have seen me using throughout the duration of this course, and some might be new to you. The first type of testing environment that you're going to need to find a way to set up for yourself is all the different operating systems that you have to interact with. Now naturally the best way to create a testing platform for different operating systems is just to have devices in the office that actually run on those operating systems. For me I do my primary work on a Mac and I also have a Windows laptop. And on that laptop, I do boot to Ubuntu. And the way that I do that is with a program called Wubi. Wubi is just a little Windows program that makes it easy to install Ubuntu on a partition on your drive. But it saves you having to go to all the trouble of segmenting your drive and actually installing the operating system yourself. It just installs like any other Windows program. And when you're done with it, you can uninstall it again. As well as that I also have some mobile devices around the house with Android and iOS. There's not too much you can do to really emulate those particular operating systems terribly easily. And to really get a grasp on touching directions and how different the mobile world is for people consuming websites You do need to have a few touch devices around the house. The other thing that I also have is a laptop hooked up to my television. So that I can see how these sites are coming up on a much, much larger display. So there is always restrictions of what, with what you can and can't do given your own personal circumstances. But just do the best that you can to get as many different devices set up, with as many different operating systems and displays as you possibly can. Now the other way that you can get yourself set up to look at different operating systems is to use virtual machine. So a virtual machine basically gives you something like a second computer inside your main computer. And when you saw me showing you various things on IE 8 or IE 11, that was through using a virtual box to run Windows within my Mac environment. And the place that I got the necessary bits and pieces to do that was modern.IE. Now there's another great course offered tuts plus called Cross-Platform Browser Testing. And the instructor of that course is Ray Bango and he does a great job of going through how you can actually set up all of these different Virtual machines. And a lot of different things that you can do to help with cross browser testing. So that's very well worth your time to really dig in to this course and get all of that extra information that you're going to be able to get from this Cross-Platform Browser Testing dedicated course. You also saw me using the Prepros App for a few different things. For handling, autoproof fixing, and compiling of preprocessor files. But you can also use Prepros for additional testing purposes. It does require the pro version, but with the paid version you have the option to test and expect across multiple connected devices in your office. That's well worth checking out as well. And another fantastic tool is Ghostlab. And what Ghostlab does is what's called browser syncing. So let me just give you a little demonstration of Ghostlab. This is the Ghostlab interface, and this is a single website, a project that has been added to the interface just by dragging and dropping it into this space. If I hit this little arrow button, that starts a server on your computer. Now you can hit this little browser icon and it will give you a list of all of the browsers that are installed on your machine that you can load this site up in. So we'll start with Firefox. And then we'll also open this up in Safari. Now I'm just going to have each one of these pages load up half the screen. So, you can see how browser synching works. What Ghostlab will do is mimic all of your actions across all of the browsers that you're viewing your website with on the local server that it has created. So, if I scroll down in one browser, then the other browser will scroll. If I interact, the result of my interactions will be the same across all the browsers. And that makes it very easy to get a very detailed look at a lot of different aspects of your site across several browsers at once. Another one of the tools you will have seen me working with throughout the course is the Opera Mobile Classic Emulator. As the name suggests, this is an emulator for the Opera Mobile Classic browser. When you start the Opera Mobile Emulator, you're provided with a list of preconfigured devices. For each one, there's a resolution, a pixel density, information on what type of user interface there is, as well as a user agent string and a window scale. For example, let's see what it does with a Nexus 7 emulation. So this is an example of how it would emulate the Asus Nexus 7. As well as the existing entries, you can also add your own if there's a device that you know the specs of then you can create a new entry. And you can use Opera Mobile Emulator to get an idea of how that particular device is going to make your sites look. As well as an emulator for Opera Mobile Classic, you definitely want to have an emulator for Opera Mini. As you will have noticed, a lot of the cross compatibility measures that we've taken have dealt with Opera Mini. I'll provide you with a link to this site which will let you know how to go about installing and running an emulator for Opera Mini on your computer. Another really cool emulator, even though we really didn't use it throughout this course, but it's really good to know about is Chrome's inbuilt mobile emulator. At the moment, this is only available in Chrome Canary, which is their bleeding-edge version. However, I expect we'll see this mobile emulator coming to Chrome proper fairly soon. To use Chrome's mobile emulator, open up the Developer Tools. And then click the little mobile icon that you see, right here. From here, you can then select a device from this list of all kinds of different devices. Again, let's choose the Nexus 7. And as it says here, you might need to reload the page. And it will give you a simulation of touch events and also let you see how your layout is working out on various displays. You can also rotate the device. And on top of that, you can simulate slower Internet connections by choosing some of these options here. And that's a really great tool for seeing how you're gonna go with images and video and other more loading-intensive assets. Now there are also some really good tools that you can use to help analyze how well you're doing with accessibility. In a previous video, I already mentioned the add-on to Chrome Developer Tools which is really really invaluable. You can also grab the Fangs Screen Reader Emulator which is an add-on for Firefox. What it will do is, it will pull out the text of your page in the same format that a screen reader will see it. Rather than having to just work through your page listening to screen reader content. This will give you a very quick summary of exactly what is being pulled from your page by a screen reader. I also mentioned that I think every web designer should spend some time using a screen reader to browse the internet to get a feel for what the experience is like. Now if you are on a Mac then you already have access to VoiceOver as a free installation on your machine. And I'll provide you with a link for information on how you can use that. It's also available on iOS. If you are on Windows, you can use the NVDA screen reader which is freely available. If you're on a Ubuntu or another Linux operating system, you can use the Orca screen reader, that's pre-installed on Ubuntu. And if you head to the official web page for Orca, you can get information for how to install it on any other Linux system. And finally just another mention of the quick JavaScript switcher. The extension that you saw me using to demonstrate the effect of not having JavaScript enabled on particular types of sites. You can grab that from the Chrome webstore as an extension for Chrome. Stay tuned for the next and final video where we'll recap everything that you've learned so far and let you know what to do next.

Back to the top