Build Your First: HTML & CSS

Loading the player…


Introduction to browser and device testing:

Now it’s time to talk about testing. But what do we mean by browser or device testing? Well, browser testing is where you test your HTML and CSS layouts in a range of different browsers and devices to make sure the layout operates as expected. In most real world situations, a list of supported browsers and devices is defined before any work commences. And ideally, you should check your layouts regularly during the build process, rather than right at the end, as this means you can find and resolve layout issues much more quickly and easily. Now if you work on one particular platform, like Mac only, or Windows only, how can you check your layouts in different operating systems and across different devices? Well, there are a wide range of free and paid online services that you can use to check your layouts across different operating systems, different browsers, and different devices. So there are online tools like Browserstack, Browsershots, Netrenderer, SauceLabs, Browsera, and Browserling. There are also a range of online responsive testing tools. And these include things like Mattkersley responsive tool, and The Responsinator. Now I use a range of these different tools during testing but I also use VMWare Fusion. And this allows me to run two full versions of Windows 7 while running on my Mac. And I have one of them with IE8 and the other with IE11. I also use Xcode which allows me to emulate various Apples devices while on my Mac. Well, it’s time for some browser checking. On Mac, we’re going to quickly check in Chrome, Firefox, Safari and Opera. On Windows, we’re going to check in Windows 11, Chrome and Firefox. And iOS, we’re going to check in iPhone5, 6 and iPad2. Now for these tests, I’m going to be using my own demo version of the site. But you can use the live demo version of the site, and that is

Testing in various browsers and operating systems:

Okay, what we’re going to do is open up our start folder find the index file and we’re going to look at it in four different Mac browsers. First of all, we look in Chrome. And this is one that I’ve been using for the build. And it looks pretty good in that browser. Nothing too problematic. Now obviously when you’re doing browser checking you’d pay a lot more attention than what we’re doing here. Let’s now look at Opera, and again, quick glance down the page. Nothing seems to be a problem. And then Firefox. All looking pretty good. And then Safari. Now again, no major problems in the layout. Now as I mentioned before on the real world side you’d be testing quite heavily across these browsers as you’re building, not right at the very end. In case you come across some sort of major problem, and then you’d have to reverse engineer the page. So the sooner you can find a bug, the easier it is to resolve. Let’s now have a look at our layout in Windows. So here we have Windows open on a Mac using VMWare. And I’m going to open up IE 11, Chrome and Firefox. Now we just want to take our Start folder, and drop it, like a Mac user, into each of our browsers. Have we got them all here? Here we go. So here’s IE11. Have a quick glance down the page. Nothing catastrophic. Then to Chrome. All looking good, and then we can do the same in Firefox. Now again, we’re doing very cursory little checking here, but again in the real world, you would do a lot more detailed testing and throughout the process. But that’s a quick demonstration of how you can run VMWare and check various browsers in different operating systems.

Testing in various devices using simulation tools:

Now, let’s go and have a look at X Code and how we can run a simulator. So I’ve just loaded up the iOS simulator. And currently we’re looking at a version of iPhone 5. And all we need to do is click on Safari, and I’ve already brought up the webpage ready so we can have a quick glance down it and see what the page looks like. And it looks pretty good. Now we can swap this out for a different device. So if we want to go for iPhone 6 or iPhone 6 Plus, we might need to scale it down a bit so we can see it. And what we do is similarly, open up Safari, paste in our url. And there you’d go. And I’m going to reduce that a little bit smaller, so we can see the iPhone 6 in full vert. Now with these simulators you can run them at all sorts of different sizes but I’m just reducing it down so we can see it on screen. And let’s now go and have a quick look in iPad 2. Again, click on Safari, paste in our URL, and then we can see our layout as it would look in an iPad. Now, you can also swap these around. So, we can see how they look in a wide as well as tall versions. So, there we have it. A very rough and dirty version of how we can check a single layout across multiple different devices, operating systems, and browsers. Now, that’s the end of the course. So I hope you found it useful. My name’s Russ Weakley. Thanks very much for taking part, and I hope to see you online.