Resizing your browser down to 320px doesn’t always do the trick. If you prefer to develop in FireFox, but need to emulate a mobile experience, the Modify Headers add-on is very helpful
This past week, I’ve been developing an optimizely experiment for a new client. This has been one of the more ambitious experiments I’ve developed. It requires not only a complex reworking of an existing slideshow, but back-end reporting on the user’s choices, form submission and exit point as well. But the most significant challenge has been the fact that there is no dedicated mobile URL for this site. Device detection is done on the back-end, and then either the desktop or mobile version of the page is served.
Coincidentally, I also just checked out FireFox Developer Edition. Now while it clearly had some pretty cool features, I wasn’t getting what I needed quickly (and to be fair, this may be purely due to my inexperience with the new FireFox developer edition).
Nearly exasperated, I thought to myself: “Wait a minute, there has to be a plugin that lets me spoof the headers…” After about 7 seconds with Google search, I came across Modify Headers 0.7.1.1 by Gareth Hunt. Problem solved. In less than five minutes, I had successfully forced the site to serve-up it’s mobile version in my desktop’s FireFox browser. I quickly re-sized the browser down to 320px (or as close as FF would allow me to get to that). I then set my FireBug location to “detached”, and set these two windows side-by-side.
The Modify Headers add-on is simple and easy to use. By default, it appears in a new window, but can also be set to appear in a new tab via the options pane. You can add new headers or override existing ones (e.g. Accept, User-Agent, Cache-Control, etc.). Without the use of a manual, it is easy to figure out how to save and edit headers, as well as change their order. What I liked most about this add-on is that the features are few, it’s easy to configure, and it just works.
There are multiple options when it comes to emulating a mobile device in a desktop browser. Safari’s user-agent spoofing is quite helpful, Google Chrome’s Device Mode Mobile Emulation Emulation feature is simply outstanding, and FireFox Developer Edition shows great promise. Choosing the right tool depends on your needs. I prefer to do as much of my front-end grunt-work as possible in FireFox because I still work faster when using FireBug. But many prefer Google Webmaster Tools. Because of my preference for FireBug, I found Gareth Hunt’s Modify Headers 0.7.1.1 to be the tool that solved my problem. If you also prefer to work in FireFox, then I recommend this add-on. If FireFox is not your development browser of choice, then I hope you will find some of the below links helpful.
Helpful Links for mobile development in a desktop browser
Modify Headers 0.7.1.1
Device Mode Mobile Emulation – Google Chrome
Using Safari for iPhone, iPad and iPod Touch Website Testing
FireFox Developer Edition