How to get a live view of your mobile website on any computer
Chances are, you and most of your newsroom co-workers carry smartphones with you all the time. But yet we all stare at computer screens all day and probably don't pull our phones out as much as we do when we are out of the office.
So all this means journalists don't view their story, video, or section on their news organization's mobile website as often as we should.
So here's an easy way for you your colleagues to be able to see your news organization's mobile web site on their computers. And if you have "mobile" in your title, you should offer to set this up for colleagues.
I've done this in my newsroom at CNN and have immediately seen benefits. For instance, the weekend editor told me that during her shift, she glanced up and saw that an important story had a really bad headline on the mobile web site, so she fixed it. Had she not had the mobile website right in front of her, she wouldn't have known and that bad headline would have remained. These instructions can be used to show the mobile website on your personal workstation or on big screens that are already showing your desktop site. If you are doing this on a big screen, just shrink the width of the desktop page down a little bit so you can show the mobile website alongside the desktop site.
Here's an example of this on a big screen TV in the CNN newsroom. If your website is responsive, then it's really easy. All you have to do is drag the browser window down to the size of a mobile phone screen. If you aren't going to be manually refreshing the webpage yourself, then you should install an auto refresh plug-in or extension. If your website is not responsive, then you'll just have to install install some browser plugins. I'd suggest using a browser that you don't use for your main web browsing. To see your mobile website on a computer you'll be changing the "user agent" of your browser so that your browser thinks you are viewing the webpage on a phone instead of a computer. NOTE: As of the date of this writing, I have tested all of these extensions and they work as expected. There are other extensions available that do the same thing, but these are the ones I have used. As with all extensions, it's possible that these may not work in the future, but you should always be able to find similar extensions to use. Safari Safari is the easiest to do this on because you don't need to install any extensions or plugins.
Choose "Preferences" from the Safari menu
Click the "Advanced" tab and then check "Show develop menu in menu bar." You will now see a menu called "Develop" in Safari
When you are on your news organization's website, click on the "Develop" menu, click on "User Agent" and then choose the one for Safari on an iPhone. You should now see your website switch from a desktop view to a mobile phone view.
Resize your browser window to the size of a mobile phone. Any links you click on will retain the mobile phone view so you can see how article pages, videos and photo galleries look.
If you want to have the page automatically refresh, install an auto refresh extension like this one from Andrew Griffin. Google Chrome There is a way to change the user agent on a Google Chrome browser without installing a third party extension, but I find it easier to use the extension.
Open up Chrome and install the “User-Agent Switcher for Chrome” extension.
Go to your news organization's website.
In the upper right corner of your browser, you’ll see a little icon that looks like a piece of paper with some glasses on it. That’s the icon for the “User-Agent Switcher.”
Click that icon and click on “iOS” and then choose “iOS” and then click “iPhone 4” (or another mobile phone user agent listed)
You should see the page switch from the desktop view to the mobile web view. You may have to click “iPhone 4” more than once to make this happen.
Resize your browser so it’s roughly the width of a mobile phone. Any links you click on will retain the mobile phone view so you can see how article pages, videos and photo galleries look.
If you want the page to refresh automatically, install an auto refresh extension such as the “Easy Auto Refresh” Chrome extension.
Photo shows a computer at CNN using Chrome to show mobile web
Firefox
Open up Firefox and install the "Go-Mobile" add-on.
Go to your news organization's website.
Click the "Go-Mobile" icon in the upper right corner of your browser, choose the phone type (i.e. "iPhone 5 browser") and then click to turn it on. You should now see the page site from desktop view to mobile phone view.
If you want the page to reload automatically, install an auto refresh add-on such as "Tab Auto Reload." While all of these methods will make it easier for more people to keep an eye on your news organization's mobile website, it's still best to view it on an actual phone, the way real consumers do so.
This tip was first presented as part of the "20 Tips to Turbocharge Your Mobile Efforts (Before It's Too Late)" panel at the 2013 Online News Association Conference in Atlanta.