Tech Tip: Preview iPhone Websites in Safari

Interested in Adobe Creative Suite? This is a weekly newsletter for creative professionals who use Macs (but Windows users are welcome too). If you're new here, you may want to subscribe via RSS or Email or Twitter for a mix of new tips each week. Thanks for visiting!

Safari-Developer-Mobile.png

Last year we published a tip showing how web designers could test their website designs on Apple’s iPhone Simulator. Here is another, simpler, tip along those lines.

Many companies today are creating special versions of their website that automatically display for iPhone visitors. Some examples include Amazon, Google, Bank of America, and even our CreativeTechs Tips blog.

Turn on Safari’s Developer Menu option and you can easily tell Safari to impersonate an iPhone (or other browser types) when visiting different webpages. It isn’t the same as a full iPhone simulator, but this can be pretty useful for web designers testing custom site designs.


Accessing Safari’s Developer Menu.

Go to the Advanced section of Safari’s preferences dialog, and turn on the checkbox for “Show Developer menu in menu bar.”

Safari-ShowDeveloperMenu.png

There are a number of intriguing options to explore in the newly visible Develop menu. Choose Develop > User Agent  Mobile Safari to impersonate an iPhone while browsing websites.

Safari-DeveloperUserAgent.png

This isn’t the same as a full iPhone simulator. For example, you’ll have to reduce the width of your page to properly fit an iPhone design. But it still provides a quick way to test and preview iPhone-optimized sites.

Here is what the Amazon.com website looks like when Safari is impersonating an iPhone User Agent:

Safari-Amazon.png

Source: I ran across this feature while testing the new Safari 4 beta and realized that the option was included in earlier copies of Safari as well. Read more about this feature in Apple’s Safari User Guide for Web Developers.

3 Responses to “Preview iPhone Websites in Safari”

  1. Norman Says:

    Something came to my mind that Applications cannot work everywhere, an iPhone app would work only on iPhone and not on blackberry or any other. This is why i think that iPhone compatable websites (like m.digg.com) are a better in comparison to applications. Cost effective, work on every platform, Just a browser needed, and so many benefits. And after some googling this is what i got:
    ‘Made for iPhone’ websites by SDPlabs makes it even simpler and easier to have a iPhone compatible website.
    Hope that helps someone.

  2. Norman Says:

    I believe iPhone optimised websites are proving better than apps. I dont know why everyone is running behind apps. Here i got something ‘Made for iPhone’ websites

  3. Ashley Sheridan Says:

    This will only work with sites developed specifically for the iPhone and deliver the website by inspecting the user agent. If a website hasn’t got this set up, then a lot of the features that Safari has the Mobile Safari doesn’t (such as a Flash player) will incorrectly display. Obviously making it a little unreliable for anything more than playing around to look at other sites.

Leave a Reply