Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Reformat standard web pages for better iPhone display iOS devices
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 2.75 / 5
  You rated: 1 / 5 (8 votes cast)
 
[19,523 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 whoever posted them. This site is not responsible for what they say.
Reformat standard web pages for better iPhone display
Authored by: stevec on Jul 24, '08 08:20:28AM

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 Jul 24, '08 08:52:12AM

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 Jul 24, '08 09:08:38AM

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 Jul 24, '08 10:48:05AM
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 Jul 24, '08 09:12:27AM

Create a link in Safari and sync it over.



[ Reply to This | # ]
Reformat standard web pages for better iPhone display
Authored by: xkalibur on Jul 24, '08 12:11:59PM

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 Jul 25, '08 06:45:20AM

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 Jul 24, '08 01:05:32PM
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 Jul 25, '08 03:53:48AM
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 Jul 25, '08 09:16:00AM

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 | # ]