If you’re a blogger or even just a mobile geek, you’re most likely somewhat interested in how various websites look when accessed from your phone. Obviously, you could simply pull up the side ON your phone to check it out. But what if you’re designing or customizing your own mobile site, or wanting to get screenshots of the mobile site to use on your blog or in a presentation or something? It can be a real hassle to get decent screenshots, and often you’re stuck ‘sewing’ them together in Photoshop, which is a huge pain in the backside.
Lucky for you, you’re a reader of RickyCadden.com , because I’m going to show you how to preview these sites from your desktop computer! First off, you need to get Firefox. If you’re not using Firefox already, WHAT’S WRONG WITH YOU?! You can get it here , if you need to. Next up, you’ll want to get the User Agent Switcher add-on from here . Just click that big green ‘Add to Firefox’ button, and follow the instructions. Now, the problem with that plugin is that it only comes with a couple of desktop browser user agents – not really useful if you want mobile.
To solve this problem, you’ll need to go here , and download the file at the end of the post. Obviously you need to rename it to get rid of the _.txt ending, so that the filename is just ‘useragentswitcher.xml’. Now, in Firefox, click on Tools, User Agent Switcher, Options, Options. A small box should pop up, and you’ll need to click ‘User Agents’ on the far left. You should see the list of installed user agents, with an ‘Import’ option below. Simply click ‘Import’, and then browse for that XML file we just downloaded.
That’s it! You’ll now have a host of other useful user agents, and you can go through and delete the ones you don’t need or want easily. Now, when you’re browsing, to check out the mobile version of a site, simply click Tools, User Agent Switcher, and select whichever profile you want to preview. Then refresh the page you’re on.
There are currently 2 issues with this, unfortunately. First, this add-on switches the user agent for your browser, not your tab. This means, if you’re designing a mobile site, you’ll likely be switching the user agent back and forth to preview the site if you’re using other tabs for other tasks. Second, some mobile sites are designed to be fluid, which means that when you’re viewing them from your desktop browser, they’ll be EXTREMELY wide, instead of the long skinny column you were probably expecting. I’ve not yet figured out a way to fix this, unfortunately.
Ricky Cadden 