Pick of the Week - Nov 10 [Show all picks]
Path Finder 5 - A feature-laden Finder replacement
Submit HintSearchThe ForumsLinksStatsPollsFAQHeadlinesRSS 10,000+ hints and counting!
Reformat standard web pages for better iPhone display
iPhone
Mobile Safari on the iPhone does an amazing job displaying web pages. However, I find that in the context of viewing some web pages on the go, that this view isn't necessarily the best way to read some pages. For example, even though the iPhone interface is awesome, I don't really want to waste time zooming and messing with a page to read the actual content. I'd rather just load up a page, read my content, and move on. (Of course, the best solution would be if web designers designed alternate "iPhone-optimized" views that would look great on the iPhone, but only a few mainstream sites do this as of the time of this post.)

I discovered back in my Treo days that Google has a page that translates web pages to "mobile-friendly" versions. I find that loading pages using this URL reduces page load time, and makes them easier to read on the iPhone. So, I created a bookmarklet that allows you to take the current page in Mobile Safari and run it through the Google page to display a mobile optimized version of the site.

Here's how:
  1. Create a bookmark on your iPhone with the following URL:
    javascript:location.href='http://www.google.com/gwt/n?u='+encodeURIComponent(location.href);
  2. Name and store the bookmark somewhere where you will have easy access from Mobile Safari on your iPhone. (I call my bookmark Google Mobilize or Open in GWT, and I store it in a folder called Hotlist (where I put my commonly-used iPhone URLs.)
  3. Visit a web page on your iPhone that is painfully large and/or formatted to be seen on a desktop screen. (For example: http://abcnews.com/ or http://sfgate.com/.) Note: You don't have to let the page completely load; just enough so that the address shows up in the URL field.
  4. While on the large page, open your bookmarks and open the new bookmarklet you just created. This will send and process the current URL through the Google mobile translation service.
  5. View the page and get to the content quicker.
Another side perk is that Google GWT is sometimes smart enough to know if the site already has a mobile version, and direct you there instead. For example: http://nytimes.com/. If you load that up in Mobile Safari, you will get the standard page, and if you apply the bookmarklet, Google will direct you to: http://mobile.nytimes.com/ instead of translating the site themselves. (I also posted this on the Google Reader Discussion forum.)
    •     [9,450 views]   
Rate this hint: [ 1  · 2  · 3  · 4  · 5 ] Average rating:

Hint Options

Reformat standard web pages for better iPhone display | 10 comments | Create New Account
Click here to return to the 'Reformat standard web pages for better iPhone display' hint
The following comments are owned by the person who posted them. This site is not responsible for what they say.
Reformat standard web pages for better iPhone display
By: stevec on Thu, Jul 24 2008 at 8:20AM PDT
OK call me an idiot, or just a new iPhone user how do you "Create a bookmark on your iPhone with the following URL?"

When I email myself the link the first part is not recognized as part of the link:

javascript:location.href='

Everything after that, just fine
Reformat standard web pages for better iPhone display
By: Ile on Thu, Jul 24 2008 at 1:05PM PDT
ABC news has a pretty decent cell phone optimized web site, located at the ridiculously non-obvious website:

http://wireless.go.com/wireless/abcnews/

The easiest way to find sites like this is to surf news.google.com from your phone. You can read articles linked from there on your iPhone, and bookmark those sites that look good. No fuss, no URL memorization, no typing. Google does a good job of indexing news articles from sites optimized for mobile reading. This works for other phone browsers as well besides the iPhone.
Reformat standard web pages for better iPhone display
By: bruijnesteijn on Fri, Jul 25 2008 at 3:53AM PDT
I am using an alternative approach. I use RapidWeaver for website development. RapidWeaver can very easy switch between THEMES (CSS style sheets) used for your website. I use a personal template (bought from BlueBall) for my normal website, but I use the iPhone template delivered with RapidWeaver for my iPhone website. You can tweak or extend the style sheets easily.

Publish the normal version to your (hosted) server and publish the iPhone version to MobileMe. Have a hyperlink on your homepage to switch between the two website.

Believe my a limited effort with good results (not perfect) and completely independent on the quality of service of third parties. Just hope they translate your CSS styling correctly...

To get a glimps of the result if your interested http://www.noorselijster19.com (regular version) or http://homepage.mac.com/bruijnesteijn/ (iPhone version)
Reformat standard web pages for better iPhone display
By: morespace54 on Fri, Jul 25 2008 at 9:16AM PDT
Thanks for the tip!!!
Thanks for the Google link (I didn't knew that one) and thanks for the bookmarklet.

Until every website has a mobile version ;), that saves some serious time!
Copyright © 2009 Mac Publishing LLC (Privacy PolicyContact Us
All trademarks and copyrights on this page are owned by their respective owners.

Visit other IDG sites:


Powered By Geeklog Created this page in 0.12 seconds