YOU: I have fantastic news for you Ms. Client… your new website is done and it’s really gorgeous, check it out!
MS. CLIENT: Ok… let me just type it in here…. [click click click]… UUUmmm… Yeah… It looks ok I guess… but why is the logo overlapping the navigation menu and some the text is off the screen?
YOU: [cough] uummm I’m sorry… what?
MS. CLIENT: Yeah…. it’s just… [sigh] I don’t think it looks very nice.
That above conversation, in some variation, has happened to me waaayyyy more times than I’d like to admit.
At least for me, when I finally get a website “done” I want to rush to show the client as fast as possible to move the project ahead (and let’s be honest here… closer to me getting paid).
However, that sometimes means I forget to test the site in multiple browsers.
See, I’m typing this to you on a MacBook Air using Chrome so I have no idea what this post is going to look like in Internet Explorer (excuse me… Microsoft Edge) on a Windows desktop. So in my little world everybody else is going to read this on a MacBook Air using Chrome… but that is unfortunately not true.
I always end up thinking to myself… “wouldn’t the world be so much better if everyone used the same browser?”, well until that happens you and I need to get better at testing in multiple browsers, and I’m going to show you a super-simple way to do that.
In our house we’re all about Apple products, so Intenet Explorer is like a different planet to us. For you, maybe you’re all about Windows computers and Safari is something you never think about. Either way, we all need to be thinking about different browsers.
The way to get around this is not to go out and buy a new computer.. it’s to test multiple browsers and computer operating systems using the browser/computer you already have.
What type of sorcery is this? I’ll tell you.
There are online tools that virtualize different machines / browsers and give you screenshots of how your website looks in them… for free. Yes, free!
Here are two of them:
I do find BrowserStack to be a bit more easy to understand as they already have the most common browsers selected for you, but try em both to see what you like.
Either one you choose to use, they both function essentially the same way, enter the URL to your newly designed site like this:
Choose what browsers you want to test it in (or just use the default ones) and click the generate screenshots button.
Once you click that button, there will be a little delay (a few minutes) while the system looks at your site in all those browsers, takes a screenshot of each and adds them to the page you are on.
But the end result will be something like this:
* See the live version of the above screenshot here
* Some browsers might time out on you, like Windows XP Firefox 3.6 did, you can either run the test again or just forget that one.
You can now click on any of those screenshots and see an enlarged version and look for problems that might arise. You can also click the download zip button (the orange button on the right) to download all of the screenshots with just one click.
How handy is that?
Amy & Ian Anderson
BONUS TIP: If you just want to test your new site in different resolutions (like for responsiveness), you’ll love this: http://whatismyscreenresolution.net/multi-screen-test