You’re a good web designer and you want to ensure that the websites you design are accessible, user friendly and display correctly for as wide an audience as possible.
Its simple enough to install the ‘big 5′: Internet Explorer, Firefox, Opera, Chrome and Safari…But what about those older versions of Internet Explorer? And what about mobile phones?
Testing your website on Multiple versions of Internet Explorer
Nobody cares about IE6 and its former brethren any more, but there are enough people still surfing the web using IE7 through 10 to warrant ensuring your website works as it should in these older versions of IE too.
Unfortunately, as you’ve probably noticed, you can’t install multiple versions of Internet Explorer on your computer, so in the past what web designers have had to do is either run a dual boot PC; or virtual PC’s; or they would use a program like Microsoft Expression SuperPreview; or a website like browsershots.org to produce screenshots. Fortunately Microsoft has recognised this need, and has made it very simple to test by incorporating a way to emulate the older browsers in the current version.
- Open your website in a newish version of Internet Explorer
- Press the F12 key on your keyboard to bring up the developer tools
- If IE10 or lower, click the ‘Browser Mode’ drop down and select which version of Internet Explorer you would like the browser to behave as.
- If IE11, click the Emulation Icon, (or hold down ‘Ctrl’ & Press ’8′) and select which version of Internet Explorer you would like the browser to behave as. In IE11 you can now also emulate Firefox, Chrome, Opera, ipad’s version of Safari, and a few others.
And what about Mobile Emulation?
If you are designing for websites mobile phones, designing responsive sites (which change shape and sometimes layout depending on the device the site is viewed upon), or are simply curious to see how mobile users see your site, Google has come to the rescue…
- Download and Install Chrome Canary, Google’s Chrome version designed for web developers.
- Open your website in Google Chrome Canary
- Hold down Ctrl + Shift + I to bring up the Dev Tools (or select Tools > Developer Tools from the top right menu)
- In the Dev Tools, click the ‘Show Drawers’ Icon (next to the gear)
- From the drawer that pops up, select the ‘Emulation’ tab
- Select the device you want to view your website on.
- You will notice that the cursor even changes to simulate touch functionality.