Wrapping up a new design and development project and preparing for launch is both an exciting and stressful time for our team. We’re doing everything possible to ensure a successful launch and transition from a client's old site to a brand new infrastructure.
After the designer has passed the final design pieces off, and the developers have written the final line of code for the site, the quality assurance testing begins.
So after a lot of hard work and experience, here's how to do browser testing:
As we've discussed, supporting old browsers is a delicate art form. Our clients demand cutting edge websites and we demand the same of ourselves. The face of the web and its technologies change almost daily. So we build for and support the two most current versions of major browsers (Internet Explorer, Firefox, Chrome, and Safari).
Our browser testing includes a couple of tests. First off, we take screenshots of each template on a website. For example, the home page, an inner page, and the blog templates are the pages we most often test. But yet there are times when a website can have multiple templates. When we launched our new website on the COS, almost every page had a unique template.
So that meant that every page had to go through screen shot testing.
For our screenshot test we currently use a service called CrossBrowserTesting. Using this service, we can select a number of browsers and operating systems to run tests on. We’ll look at the same browser on a few different operating systems (Windows Vista, 7, 8 and Mac OS X 10) to ensure full compatibility.
We let the test run, and then take full high resolution screenshots of each page. Then we carefully compare them to the original design files to ensure we have compatibility across all browsers.
Because every browser is different, you won’t be able to achieve a picture perfect look on every browser. With that in mind, you should strive to build a website that is as compatible and as perfect as possible.
Take a look at the above comparison. On the top we’re looking at our navigation in Safari 6.1 on Mac OS X 10.8, and on the bottom we’re looking at it in Google Chrome 32 on the same OS. To the untrained eye the navigation may look identical, but the font weight is slightly heavier in Chrome. This is an inconsistency that we are okay with. Both browsers render fonts slightly different.
While inspecting every screenshot, we compile a list of any bugs we find and document them with screenshots. Then our developers can go back and test and fix any bugs.
For example, the iPad screen shot (left) is not lining up, and in another browser (right) it is. This is an issue we would document for our developers to troubleshoot. Knowing what browser and OS is having issues enables them to do some testing on their own and helps them debug the issue faster.
These screenshots are useful because we can carefully inspect the website in 23 different browsers. Then we can test those browsers on eight different operating system versions (Mac, Windows, iOS and Android). Without this tool we’d need to have several computers with different operating systems and browser versions on them.
Besides taking screenshots of each template, we also do live walk-throughs of the site in many browsers.
We create a virtual machine with the specs of the computers from our screenshot tests, then watch how the site loads and reacts. Does it load differently from browser to browser? Do forms and redirects behave as intended? We fill out forms and make purchases on eCommerce platforms, while ensuring the checkout process flows correctly. Then we make sure that any email nurturing campaigns or workflows trigger correctly.
Depending on the project scope and website, the Q/A process could take a few hours. Or in the case of some of our more robust projects, they could take days of testing, debugging and retesting.
Q/A is important for all projects, and our Q/A process and planning begins on day one. Everything that needs to set up, from sliders, newsletter sign ups, to CRM syncing needs to be tested. Our project managers create detailed Q/A worksheets that many members of our team work through and test. The more eyes we can get on a project, the better. This ensures that our project is successful, and that your new website hits the ground running on day one.
Photo Credit: TheBusyBrain
You May Also Like
