How to Make an iPhone Web Site and Icon
Add to iTunes | Add to YouTube | Add to Google | RSS Feed
Yes, I have an iPhone. If you look closely, you can see my little Chris icon on there. It’s also on my home screen. When I tap it, it opens my blog. When you open my blog on your iPhone, it’s going to look a lot different than it would on a browser. That’s due to a plugin I am running in WordPress.
WP Touch is a plugin that was designed specifically for your iPhone or iPod Touch. What it does it to automagically reformat my blog (or any WP blog), and optimizes it specifically for the iPhone and iPod Touch. It gives it a whole new layout, even, that is designed to just render better on your Apple mobile device. There’s no better way of giving you a better experience than to use WP Touch on a blog that is running WordPress.
As I drill down into the actual content on the home page, I can cascade out and read brief previews. Or, I can dive deeper and go so far as to leave a comment. It loads fast, and it’s clean. It’s a great way of getting content specifically optimized. It even uses Gravatars! There’s even a little search button at the top. Simply tap that, and you’ll be able to run a search through my blog.
How did I get the little Chris icon, you ask? If someone is viewing your website and they press the little plus (+) icon at the bottom in their Safari browser, they can select “add to home screen”. When they do that, the little graphic that is on my web server (or yours) is automatically pulled in when it’s added to their home screen. Even if you don’t have the iPhone or the iPod Touch, you still want to do this. You don’t know who out there in your audience does have one. You want to give them an amazing experience. Just open up your favorite photo editor. You’ll need to create a .png file. The size can vary up to 60×60 pixels. I uploaded mine to my root directory. It’s very important to name it properly: apple-touch-icon.png. That has to be the name, and it has to be in the root directory. This way, the plugin will be able to pull in this icon.
Think of it: you’re doing something simple and free for your audience. If you’re like me, you want to do everything you possibly can in order to keep people coming back for more.
FirstRSS+ThunderIT AWS HMAC ERROR: "http://xml-us.amznxslt.com/onca/xml?AWSAccessKeyId=05G128QTRXN0J06J6PG2&ContentType=text%2Fxml&Keywords=ipod%2Btouch&Operation=ItemSearch&ResponseGroup=Large&SearchIndex=Blended&Service=AWSECommerceService&Signature=DH3k0JXiJ8wSDwoC5bGn0YtIipxCHL2t2ookDf39k8U%3D&Style=http%3A%2F%2Ftagjag.com%2Fcss%2Famazon.xslt&Timestamp=2010-03-16T08%3A25%3A34Z&Version=2005-07-26" NOT FOUND!
Want to embed this video on your own site, blog, or forum? Use this code or download the video:









14 Comments
Kat’s Kontemplations
June 12th, 2008
at 7:00am
Chris Pirillo What?s in the Next Mac OS X: Snow Leopard? Father?s Day Gift IdeasHow to Make an iPhone Web Site and IconHave you Ever Owned any Apple Products? What are Popular Home Repair Scams?
Matthew Rutledge’s Blog Space
June 13th, 2008
at 3:06am
| <a href=”http://media.pirillo.com/”>Video Help</a> | <a href=”http://feeds.pirillo.com/ChrisPirilloShow”>Add to iTunes</a> Apple’s Announcements Disappoint (29) Apple iPod vs Microsoft Zune (7)How to Make an iPhone Web Site and Icon (5)Thoughts on Apple’s WWDC 2008, iPhone 3G? (41) What’s the Future of Portable Computing? (60) It’s Official: iHate the iPhone (75) AppleTV (32) Why is the iPhone SDK Important? (39) Apple iPhone SDK (33)
Useful Habits
July 23rd, 2008
at 8:51pm
The Best Hard Drive Enclosure USB Charger for Airplanes What’s in a USB Adapter Travel Kit? How do You Install Apps on the iPhone? Do You Want to Remove USB Flash Drive Software? Is the iPhone 3G Worth Buying?How to Make an iPhone Web Site and IconWhat do you Need to Know about USB? A USB Grommet Hub for your Home Office Chris Which USB / Firewire Car Charger do You Use?
Daniel
June 11th, 2008
at 10:34pm
hey chris pulled this up on my iPod touch. Love it. Can you make this available for lockergnome.com?
YouTube - How to Make an iPhone Web Site and Icon
June 12th, 2008
at 8:28am
[...] Loading… Sites linking to this video (5) Clicks URL 18 http://chris.pirillo.com/ 3 http://chris.pirillo.com/2008/06/11/how-to-make-an-i... 1 http://www.google.co.uk/reader/view/ 1 [...]
Chandler
June 12th, 2008
at 8:34am
I’m replying to this blog on my iPod touch! I need to buy the January update for the iPod touch so I can add the chris pirillo icon onto my home screen : p
cananito
June 12th, 2008
at 11:49am
Pretty nice, iPhone and iPod Touch are just amazing, I’ll sure try to make my wordpress blog into wpt.
Dimitry
June 13th, 2008
at 10:34pm
Thats pretty cool man. But I have no idea how to do all that stuff to get the logo on the i phone lol
keeheon
June 15th, 2008
at 11:55am
hey I’m putting a comment on my iPod touch. This is really cool. I want to make an app for chris that’s an chris pirillo chat room app. That would be awesome.
dabrace1984
June 26th, 2008
at 11:22am
If you have either Safari 3 for Windows or Mac, you can see what the website looks like for Apple mobile devices by activating the Developer tab.
Windows
1. “Edit” menu –> select “Preferences” –> “Advanced” Tab
2. “Show Develop menu in menu bar”
3. “Develop” menu –> “User Agent” –> “Mobile Safari 1.1.3″ (either option should work)
Mac
1. “Safari” menu –> select “Preferences” –> “Advanced” tab
2. “Show Develop menu in menu bar”
3. “Develop” menu –> “User Agent” –> “Mobile Safari 1.1.3″ (either option should work)
Changing « Kyle’s Blog
July 2nd, 2008
at 11:30am
[...] big reason I did this was after reading a post on Chris Pirillo’s blog. It optomizes the page for when you are viewing it on an iPhone or [...]
Changing » Kyle’s Tech Blog
July 31st, 2008
at 3:49pm
[...] big reason I did this was after reading a post on Chris Pirillo’s blog. It optomizes the page for when you are viewing it on an iPhone or [...]
somebody
January 27th, 2010
at 5:12am
This is crap
Joe
February 22nd, 2010
at 2:03pm
Thanks Chris for the tip, I will be sure to check it out