Blog We love to talk!

Jul Wed

4 Steps to cross-browser test an existing website

  •  7-11-2012
OLYMPUS DIGITAL CAMERA

In this post I’ll show you how to cross-browser test your existing website more efficiently. All 4 steps will be performed using the cross-browser testing tool BrowseEmAll.

To start off your cross-browser testing we will create a quick overview for all desktop browsers to pinpoint where to investigate further. In steps 1 and 2 we will concentrate on rendering issues in the different browsers. Once the rendering looks good we will move to step 3 and test dynamic content like JavaScript, Flash, Silverlight and so on. Finally, we will test the website for mobile devices such as iPhone, iPad and Android phones and tablets. I’ll use a modified version of the BrowseEmAll homepage to demonstrate the process. For comparison, this is what the page should look like:

Step 1: Spot rendering errors using the cross-browser report

To get a quick overview of the cross-browser compatibility progress we will start by creating a cross-browser report for our website. This will automatically iterate through all desktop browsers integrated in BrowseEmAll. To get this going just launch BrowseEmAll and select the report tool:

Now you can enter the URL (localhost or files are supported) of your page and select a resolution. Hit the “Start” button to create the report.

Now you can go get a coffee while BrowseEmAll creates the report for you. The report contains screenshots and detailed HTML / CSS analyses for every desktop browser.

Use this information to pinpoint the browsers you need to investigate further. As indicated by the report, we should take a detailed look at Internet Explorer 7. The screenshot for this browser looks like this:

The red dotted outline around the tagline “Do cross-browser testing. Faster” is missing. Fortunately, the report provides some details about the HTML tags and CSS properties used in this webpage that could cause problems in Internet Explorer 7.

With this information we can move on to step 2.

Step 2: Analyze and resolve any errors using the different browsers

Now you know which desktop browsers encounter rendering problems with your website. Once again we will use BrowseEmAll to help resolve the issues. We select Internet Explorer 7 in BrowseEmAll and browse the website we want to test. You can see that the red dotted outline is missing here as well.

If we are not 100% sure what is causing the issue you can open “Inspect and compare” on the bottom right part of the screen. There you can inspect CSS and calculated layout for the selected browser.

Without a reference point it’s sometimes hard to tell which variables are off, so try selecting another browser for comparison (Internet Explorer 9 in this example). Once again we navigate to the h1-tag and compare the different CSS styles and layout.

Using this and the information of the cross-browser report we are now able to fix the rendering issue. We’ll just change our CSS to work in the old and the new Internet Explorer.

After this you can start over with step 1 (maybe the fix has broken something else?). Do this until your website renders correctly in every browser.

Step 3: Test dynamic content using the integrated desktop browser

Your website now renders correctly in all desktop browsers! This is your first great achievement. Don’t worry, it get’s easier after that…

Maybe you are lucky and your website does not contain any dynamic content. No JavaScript? No CSS animations or effects? Good on ya! You can leave this out and jump to step 4.

Otherwise, you will need to test all of this dynamic content using the different browsers. To do this, you need to iterate through all browsers using BrowseEmAll and test your dynamic content. This way you will be able to spot all problems without installing many different browsers or firing up virtual machines.

A quick look at the console – using “Inspect and compare” – can tell you more about JavaScript errors. Go ahead and correct every bug and retest all browsers to make sure nothing is broken.

After you did this for all dynamic content we can move on to step 4.

Step 4: Use the mobile simulators to test for mobile devices

In this last step we are going to test the website on different mobile devices. Unfortunately, I don’t have every single revision of the iPhone or iPad let alone all of the Android versions out there. So we will, once again, use BrowseEmAll for this test.

Fire up BrowseEmAll, navigate to your website and select the first mobile simulator on the top left.

The simulator will render the page just as the real device would do. You can zoom, scroll and switch between landscape and portrait mode.

As in step 3, you need to iterate through all mobile devices to test your website. There are iPhone, iPad, Android and Android tablets to test.

Finally! You made sure that the website renders correctly and is useable on all of these mobile devices. Now relax and upload your perfect cross-browser compatible website.

Want to try this using BrowseEmAll? Download the free 30-Day Trial now:

No Comments

Leave a Reply

Your email address will not be published.