In less than five minutes, I had successfully forced the site to serve-up it’s mobile version in my desktop’s FireFox browser. 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.
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). cnn.com in desktop FireFox AFTER using Modify HeadersĬoincidentally, I also just checked out FireFox Developer Edition. But when it comes to the first 90% of the general development grunt-work, FireBug’s CSS panel and JavaScript console just always feel more natural to me. I cannot stress enough, how outstanding Chrome’s developer tools are, and how much they are improving every day. The main reason for this is that even though FireFox has become possibly the slowest browser and always feels painfully sluggish, I still prefer FireBug over Chrome’s built-in developer tools. But I still prefer to do my front-end development in FireFox. Also, Google Chrome’s Device Mode Mobile Emulation is awesome, especially for testing mobile-specific gestures. Given the amount of work ahead of me, I preferred to work in a desktop browser. But that is mainly useful for previewing my work and interacting with the DOM through the console. I knew I could leverage Safari to view the page on my iPhone and yet have complete control of the DOM via the JavaScript console. There were a few obvious options that first came to mind.
cnn.com in desktop FireFox before using Modify Headers Device detection is done on the back-end, and then either the desktop or mobile version of the page is served. But the most significant challenge has been the fact that there is no dedicated mobile URL for this site. 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. This has been one of the more ambitious experiments I’ve developed. This past week, I’ve been developing an optimizely experiment for a new client.
If you prefer to develop in FireFox, but need to emulate a mobile experience, the Modify Headers add-on is very helpful Resizing your browser down to 320px doesn’t always do the trick.