Pick of the Week - Nov 10 [Show all picks]
Path Finder 5 - A feature-laden Finder replacement
Submit Hint Search The Forums LinksStatsPollsFAQHeadlinesRSS
12,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.)
    •    
  • Currently 0.00 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (0 votes cast)
 
[11,197 views]  

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 whomever posted them. This site is not responsible for what they say.
Reformat standard web pages for better iPhone display
Authored 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

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: joshforman on Thu, Jul 24 2008 at 8:52AM PDT
I would just paste the URL into Safari's bookmarks and then synchronize.


---
Josh Forman

http://www.joshforman.com/

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: channui on Thu, Jul 24 2008 at 9:08AM PDT
If you're temporarily stuck without your mac though you can still enter javascript bookmarklets with a little trouble:

1) Turn on Settings->Airplane Mode
2) Launch safari and tap OK on dismiss the "Turn off Airplane Mode" dialog.
3) Enter your the bookmarklet in the location bar.
4) Dismiss the "Safari can't open the page" dialog
4) Bookmark the page
5) Turn off Airplane mode.



[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: ridogi on Thu, Jul 24 2008 at 10:48AM PDT
If you don't sync bookmarks because you have too many on the mac and don't want them on your phone you can use tinyurl.com to get the bookmarklet onto your phone.

Make a tinyurl that has http:// at the front of it (so it would look like http://javascript:<script_continues_here>;). Then email the tinyurl to your phone and click on the link. It will open Safari but not load. Bookmark the page that failed to load, and then edit the bookmark to remove the http://.

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: asmeurer on Thu, Jul 24 2008 at 9:12AM PDT
Create a link in Safari and sync it over.

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: xkalibur on Thu, Jul 24 2008 at 12:11PM PDT
Bookmark ANYTHING with Safari on the iPhone. (e.g. google.com).

Go to your bookmarks, touch "Edit".

Touch the new bookmark you just made.

Edit the address to be the "javascript:..." line from above.

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: stevec on Fri, Jul 25 2008 at 6:45AM PDT
Thanks everyone for the (Obvious in retrospect) tips. I turned off bookmark syncing just to keep the number of bookmarks on the iPhone down under a thousand... (sigh)

The Airplane Mode tip worked just fine!

One interesting note I discovered when doing this, if WiFi is turned on Airplane Mode can't be turned off.

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored 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.

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored 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)

[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored 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!

[ Reply to This | # ]