Before the iPhone came, only the largest websites had a separate version exclusively for mobile visitors which was usually based on WAP. And since there weren’t too many mobile visitors anyway, a lot of site owners just didn’t bother with creating a lighter version of their websites. The mobile web was a mess and those of us (un)fortunate enough to have meddled with it back then were a bruised lot !
The iPhone definitely changed the mobile web landscape for the better. The iPhone’s browser was probably the first mobile browser that could actually display regular websites almost as well as desktop based browsers.
But, the consumers wanted even more. They weren’t happy with pinching, zooming and double tapping their way around to navigate a website and wanted all websites to have a version for the iPhone.
So, let’s say you have made the decision to build an iPhone version of your website, coded it all up and now want a way to test your new iPhone optimized site. What are your options ?
If you’re using OS X and are not afraid of installing the iPhone SDK, you can use the bundled emulator to browse through to your site and see how it looks. If you’re not using OS X, then you can use one of the many sites online that let you do the same. The problem with these websites is that they’re not very accurate and the results depend on the desktop browser that you’re using to access those sites.
The third option is the one that we’re going to talk about today. We’ll be using Automator to create a workflow that’ll let you see how your site would look like on an iPhone.
First of all, you need to download and install the Website Popup action.
Once, the action is installed, Launch Automator and select the Workflow template.
Select the action titled “Get Specified URLs” from the library. Remove the apple.com URL from the list and add your website’s URL.
The next step is to search for the “Website Popup” action that you just installed and drag it over to the workflow area.
By default, the Website Popup action displays the website that you pass to it in a large window as would be displayed by a regular desktop browser. To make it display an iPhone sized window, select both the Site size and User agent as iPhone.
That’s it. Save the workflow as an Application and quit Automator. Execute the workflow Application to look at your site in all it’s iPhone enabled glory.
Automator is an awesome tool that I’ve been exploring a lot lately. Let me know if you guys would want to see more automator related posts. Are there any specific tasks that you’d like me to help you automate ? Let me know in the comments.