Join James Williamson for an in-depth discussion in this video Testing tools, part of Introduction to Web Design and Development.
- Testing your projects as you develop them is an important part of web design. Without thoroughly testing a web page for example, you'll have no idea if it looks and functions the way that you want it to across multiple browsers and devices. So it's really important to have a plan in place for how you're gonna test your sites and which tools you're gonna use to do it. One of the first things that you can do is make sure that you have as many browsers installed on your system as possible. Although there are several services out there that allow you to upload a site and then provide you with screen shots of how your page is gonna look across target browsers, nothing can really take the place of actually interacting with your pages in the actual browser itself.
For the most part, making sure that Chrome, Firefox and Opera are installed is fairly simple but Safari and Internet Explorer are platform-specific browsers that can be difficult to test if you don't have that operating system. For Internet Explorer you can use Microsoft's modern.ie website which contains helpful resources for developing for Internet Explorer as well as virtual machines that you can download to run versions of IE on your machine whether you're on a Mac or a PC. If you're on a PC and you want to test in Safari that's a little bit more problematic.
You can pick up an older version of Safari for Windows but of course, it's not current. You could also test in Chrome because Chrome is a WebKit based browser just like Safari is but there are some differences there so currently there's really no other way to test in Safari other than getting your hands on a Mac. So maybe you wanna go down to the local Apple Store. I'd also like to point out that testing within a browser now goes far beyond just loading your page in a browser and checking the layout. Almost all browsers now come with development tools that are baked right in.
That'll allow you to de-bug code, check styles and semantics, check performance and even test scripting. These development tools are an invaluable part of the web design process and should be something that you use every single time you test. You also want to make sure that you set up a local testing server on your development machine. Having a local server will allow you to test dynamic pages, create locals, installs of WordPress or other CMS's, and run several of the assembly level tools that you'll need to make your life easier as a designer. Now on the Mac you can install MAMP, which is a free PHP MySQL and Apache server configuration.
The Windows equivalent is WAMP and both are not only free but incredibly simple to set up. Having multiple browsers and a local server is only part of what you'll need for testing. You'll also need to start building a device lab that helps you test how your sites look and perform on mobile devices. This can be a very expensive proposition so my suggestion is to start with the more popular devices and then just add devices as you can. I recommend at least trying to start out with one iOS device and one Android device.
It's really helpful to have multiple versions of phones and tablets if you can. Don't be shy about asking your friends and families for their old devices if they're not using them anymore. I mean, the more devices the better. Of course, the actual process of testing on multiple devices while you're developing a site can be extremely tedious so thankfully, there are some tools out there that allow you to test and de-bug on remote devices while you edit your site. Adobe's Edge Inspect, for example, let's you sync up multiple devices to your computer and then previews the site you're working on simultaneously on all devices.
Vanamco's ghostlab is a similar tool that allows you to sync up multiple devices and browsers to a single development environment. They even sell a multiple device stand that makes it easier to test page across devices. There are, of course, a ton of other tools out there that are designed to help you test your sites as you develop them. Over time you'll develop a testing strategy that works for you and your projects. Just make sure that you focus on making testing your sites as you develop them a critical part of your workflow.
This course is part of a Learning Path approved by the American Marketing Association.
Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
- What is web design?
- What is a web designer?
- Learning to code
- Choosing a web host
- Working with a CMS
- Exploring how websites are structured
- Choosing your framework or software
- Designing with standards and accessibility in mind