In these previous articles, we used Google-supported browsers to achieve browsing the mobile web on our resource-limited computers and connections. Doing the same on the Mac wouldn’t be as easy. Thankfully, there are three different methods available to us on Apple’s desktop platform that are just as capable.

Where as we emulated the Android browser on Windows and Linux, it only seems appropriate that we act like Safari Mobile for iPhone on Mac OS X. There are three ways we can do this: changing the user-agent in Safari, creating an app with Automator on OS X Lion, and using a specialized single-site web browser called Fluid. Each have their advantages and disadvantages.

Using the Develop menu in Safari

One of the easiest methods to fool web sites into thinking you’re a mobile browser is built right into Safari. It’s hidden away at first but can be brought into the limelight by clicking a checkbox in the app’s Preferences.

Open your Safari preferences via the Safari application menu or pressing Cmd + , on your keyboard. On the preferences window, click the Advanced icon, then check the box labeled Show Develop menu in menu bar. Once you’ve done that, a new Develop menu will appear in the menu bar between Bookmarks and Window. You can close the preferences window.

Clicking this new Develop will reveal a menu item labeled User Agent. Within there, you will find a few pre-set web browsers listed. For our purpose, we’ll choose Safari iOS 4.3.3 – iPhone. (Note: the Safari iOS version number may change as newer versions of iOS and Safari are released.) You can now start browsing the web as if you’re using Safari on an iPhone. No need to restart your browser.

The thing to remember is that by using this method, any web site you visit will assume you’re using an iPhone. Some web sites restricted access to them and require you to download their iPhone app. Since we’re not really on an iPhone, that doesn’t quite do us a lot of good. You can easily use the Develop menu to switch back to a default browser. Remember that these settings are only temporary and will switch back after you quit Safari.

Selectively Use Mobile Sites by Using Them as Mobile Apps

There may be some situations where you only want to use the mobile version of web sites for specific sites. The best way to handle this is to treat these web sites as mobile apps, just like you would find them on a smartphone.

There are two ways to handle this.

Mac OS X Lion

Hidden away in Mac OS X Lion, the newest version of OS X, is the option to emulate various iOS devices for just a single web site.

As discovered by Andy Ihnatko (contributor to various media outlets), Apple tucked away in their automation app Automator the ability to build site-specific web browsers optimized for iOS devices.

To create a mobile web app using Automator, start by launching Automator in your Applications folder. When Automator starts, you’ll be asked to Choose a template for your workflow. From the list of options, select Application, then click the Choose button in the bottom-right.

In the Library on the left side of Automator, select Internet. A list of available actions will appear in the column to its right. From this list, click and drag Get Specific URLs to the workflow area on the right.

In the workflow area, You will see a box for Get Specific URLs. To add a web site, click the Add button to add a new web site. To change the web address, double-click where it currently says http:// and type in the address of the site you want to use.

Next, select Website Popup from the list of actions on the left and drag it into the workflow area under the Get Specific URLs box on the right. You can change the settings to whatever you like, but it’s important that the User agent is set to iPhone and Output is set to Selected Text.

Once all the settings are in place, save the Automator application to your Applications folder. Be sure to name it to something related to the web site you’ll be using with it. You’ll now be able to launch the mobile web site just as if it were any application on your computer.

This method does come with one major limitation: it only works on OS X Lion. For those us of on older hardware or that haven’t made the jump to Lion, there is another way.

Fluid

As web sites started becoming more and more like full desktop applications, people wanted the ability to be able to run these web sites as their own application. Google Chrome made this possible with their Create Application Shortcut feature. Unfortunately, this ability is not available on Mac OS X.

Fluid does exactly what Chrome can’t on the Mac. Fluid offers the ability to create what’s known as a site-specific browser or a single-site browser for your commonly accessed web apps. It’s purpose is to create a web browser for a single site.

Upon launching Fluid, you’ll be asked for four things: the URL (address) of the web site you want to access, the Name of the web site, the Location you want to save the web app on your computer, and the Icon to use. After clicking the Create button, you have a new web app ready to use.

As your app is set up right now, it’ll only run like a regular web browser. We still need to make one change to make it work like a mobile app. Although there are presets in Fluid for other browsers like there is in Safari, they’re not the most up-to-date versions. Therefore, we’ll need to manually add a user agent. Upon launching your newly created web app, click the Application menu in your menu bar. From there, select User Agent, then Other….

As we’re on an Apple platform, it’s only appropriate we emulate Apple hardware. In this case, we’ll use the Apple iPhone. Copy and paste the following user-agent into the user-agent window:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5

This new user agent won’t take affect until you restart your web app. Upon launching it again, you’ll notice your web app now shows off its mobile version.

When navigating your new site-specific browser, clicking any links that lead you outside of the current web app will open in your default browser. But what if we always wanted the stay on the Mobile Web? There is a way to do that.

Using Fluid to create Safari Mobile

Much like before, we’re going to create a new Fluid app. This time, set whatever you want your home page to be as the URL, Name it something to indicate it’s for browsing the mobile web only (such as Safari Mobile), and give it an appropriate icon. If you search hard enough, you can find some similar to the Safari Mobile icon. Click Create when the settings are to your liking and Launch the new app.

Once your new app has launched, head to the Application menu, then User Agent, and select Other…. Use the same user agent listed in the section above, click OK to save it, quit your application, then relaunch it.

Like before, if we try to navigate to any other site outside of Google right now, it’ll launch in your default browser instead of our new mobile browser. To fix this, click on the Application menu and select Preferences (or press Cmd + , on your keyboard). In the application preferences, click the Advanced icon. By default, the application is set up to just browse to google.com domains. To fix this, select the Allow browsing to any URL button. Close the Preference window once the setting has been changed.

You can now browse anywhere you want on the mobile web using your new mobile browser app. You may notice browsing might be a little tough without your navigation buttons and address bar. This can easily be fixed by opening the View menu and selecting Show Toolbar.

If at any point you want to open a link in your default browse, just hold the Control key and click the link (or secondary/right-click if your mouse is configured as such) and select the Open in Default Browser from the contextual menu that appears. This is useful when you come across a site that wants you to download an app instead of using their web site.

 

As much as all these tips are great for making the best of your limited resources, they’re not perfect. For example, some sites still don’t offer mobile versions, thus these regular web pages still take a while to load. And what about media rich sites that use plugins like Flash? In the next post, I’ll show you ways to optimize your web browser to avoid these troublesome issues.