Scott Hanselman

Make your Website Mobile and iPhone Friendly - Add Home Screen iPhone Icons and Adjust the ViewPort

July 25, '08 Comments [18] Posted in ASP.NET | ASP.NET MVC
Sponsored By

If you're noticing when looking at your blog traffic logs that more and more people are visiting your site from a mobile device, you likely want to be accommodating.

I have noticed recently that mobile devices like the iPhone, iPod Touch and Danger Hiptop (well, that's probably just one guy) have been creeping up my list of Browsers+OSs that visit this blog.

image

How can I make their experience suck less? Just because the iPhone has Safari and can handle most full-size doesn't mean I should go bonkers with the HTML. There's a few simple things that can be done to make the experience more seamless.

Add Home Screen iPhone Icons for your Website

If you visit a website on an iPhone and hit the plus button and click Add to Home Screen...

NOTE: Hold down HOME and the LOCK button to take iPhone screenshots.

IMG_0004

You'll get this screen with a generated thumbnail icon of the current browser's screen. In this case, it's way too tiny and doesn't really well represent my site. It's certainly not an icon that I'd want on an iPhone's Home Screen.

IMG_0005

However, if you make a 60x60 PNG image file and name it "apple-touch-icon.png" and put it in the root of your website, you'll get control over that icon.

apple-touch-iconIf you don't have control over the root of your domain you can add a <link> to your pages and point it to whatever PNG you like wherever you like:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Now, if you hit Add to Home Screen, you'll get a nice image with automatically rounded corners and a shiny bevel (the phone does that), your icon like this, will show up like this:

IMG_0007 IMG_0008

Very little effort for a considerable amount of polish.

Adjust the ViewPort for a "Pre-Zoomed" iPhone Experience

Next, if you visit a web page with Mobile Safari and you always double tap to select the content and zoom to the width of it, why not just set that as an initial default? Just add a <meta> tag like this:

<meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45"/>

That will set the width of the "viewport" - the part of the page that is visible in the zoomed-in view - as well as the the initial zoom scale and minimum scale. This makes for a pre-zoomed and easily scrolled experience that doesn't change the way the page is laid out.

IMG_0003

It's still the full content, just pre-zoomed for the iPhone.

Enabling All Mobile Devices

Next, to the mobile users who are not using an iPhone, about two years ago I added support to DasBlog for a custom Mobile Theme that would enable Windows Mobile and Blackberry Mobile Browser users to browse DasBlogs more comfortably. In the DasBlog web.config there is a huge section at the end that was populated from this CodeProject article on BrowserCaps. It uses the older ASP.NET 1.1 style of browser detection.

dasblogblackberry

For example, if I wanted to serve a Mobile Theme to iPhone users that visit my blog, I could add these lines to the filter areas for platforms and OS's:

<case match="iPhone">
platform="iPhone"
</case>
...snip...
<case match="iPhone">
os="iPhone"
</case>
...snip...
<case match="iPhone" with="%{os}">
isMobileDevice="true"
</case>

DasBlog then just checks like this and does the right thing. DasBlog uses its own theming engine, but you can use this kind of detection and "downgrade" your site for any device you like.

//Are we on a Mobile Device? See if we have a mobile theme and use it instead.
System.Web.Mobile.MobileCapabilities mobile = (System.Web.Mobile.MobileCapabilities)Request.Browser;
if(mobile.IsMobileDevice == true)
{
theme = themes["mobile"];
if(theme == null)
{
loggingService.AddEvent(new EventDataItem(EventCodes.Error,
String.Format("If you have a theme called 'mobile' in your themes folder,
readers who visit your site via a Mobile Device will automatically
get that theme. User-Agent: {0}",Request.UserAgent),
String.Empty));
}
else
{
return theme;
}
}

Either way, if you choose to setup a custom Mobile theme for a visitor, or you just add a few bits of "chrome" like friendly icons and some browser specific metadata, it's important to at least be conscious of who is visiting your site in which devices and feel empowered to make good experiences for them.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Friday, July 25, 2008 8:36:30 PM UTC
Great posts!!! Where do you find the gems of knowledge!!!
Friday, July 25, 2008 8:47:52 PM UTC
It's like the iPhone's bevel was specifically designed to hilight the five-head. Apple thinks of everything.
MarcT
Friday, July 25, 2008 9:23:56 PM UTC
Hey, I love your blog and all (really!), but having your face on my home screen all the time would just freak me out a little bit ;)
Adam
Friday, July 25, 2008 9:27:50 PM UTC
Heh. What's a better icon? Maybe put me on Page 4. ;)
Friday, July 25, 2008 10:06:09 PM UTC
I've started making my icons 158 x 158 after reading this a while back:

iPhone bookmark iconage
Friday, July 25, 2008 10:08:36 PM UTC
Does that make them clearer?
Saturday, July 26, 2008 3:33:48 AM UTC
I'm about 6 months into the iPod/iPhone experience. I truly believe this thing is going to revolutionise mobile computing. If you haven't experienced showing a Samsung user your iPhone for the first time, it will amuse you to no end. As you put it "to make their experience suck a little less". The ZUI is here to stay. So what do we do now?
Greg Green
Saturday, July 26, 2008 8:50:58 AM UTC
Another great topic.

Is there an iPhone "emulator" by chance to allow testing a given site in terms of how it will render on the device and to also test elements like the icon? Or is the only real way via hands on with a real iPhone or iTouch, I assume the iTouch would be identical in the browsing features to the iPhone would it not? I currently use a Nokia N800 for mobile browsing but for compatibility testing it would be nice to have some means to test the iPhone experience, due to the growing market share.
Mark Langille
Sunday, July 27, 2008 2:45:00 AM UTC
Thank you very much for this blog entry. You get it!! I tend to want to read many blogs (sometime, mobile technology oriented blogs) and it is shocking how many do not cater to the very readership they claim to represent! Furthermore, I would have thought that Microsoft, in the interests of furthering user experience for their Windows Mobile platforms, would have developed blog templates for their msdn blogs that can be viewed comfortably on a Windows Mobile device, without excessive pannning and scrolling. But no! I want you to fly to Redmond and do a formal presentation to the employees at Microsoft responsible for the msdn blogs, on how it can and should be done. Thanks again. May the word get out.
Twain
Sunday, July 27, 2008 4:02:00 PM UTC
Very nice. Updated by site with the iPhone tweaks. Thanks, Scott.



Monday, July 28, 2008 3:46:31 PM UTC
Here's my question: How do the boys at Redmond feel about their employees walking around with the enemy in their pocket?

KevDog
Monday, July 28, 2008 5:09:06 PM UTC
KevDog - I dunno. I have 2 macs at home, 3 PCs, I have two windows mobile phones, I'm trying the iPhone, I mean, I'm just a consumer like you so it's not like I'm going to only use Microsoft stuff blindly. I'll try to support The Company if the stuff is awesome, but you have to draw the line somewhere and keep it real.

Mark - Apparently there's like a $99 SDK you can get for the iPhone but it only runs on a Mac. That said, I did it with the User Agent Switcher and FireFox.
Monday, July 28, 2008 6:48:36 PM UTC
Actually, the SDK is free. If you want to sell your app through the iPhone store, that's where the $99 kicks in.

Go to http://www.apple.com/developer

Scott, was just poking fun about the iPhone. Though I had heard some rumors back a couple of years ago that some of the people in the Windows Media group would tend to freak if they saw an iPod laying around.

I would like to note one other thing that I find weird, maybe you as well. As a consumer, I feel well taken care of by Apple. The interface is usually everything I want and more and the functionality is just forward-looking enough to keep me happy. Let's just say that's not what I get from MS.

As a developer, I feel well taken care of by Microsoft. The toolset is rich, the developer community robust, and the people from MS are open with where things are headed and are great at responding to issues from the field (particularly in the blog space). Let's just say that's not what I get from Apple.

Any thoughts?
KevDog
Monday, July 28, 2008 7:04:34 PM UTC
Ah, I didn't realize that was how the $99 worked. I tried to download it and got confused.

I think you nailed the contrast. As a dev, I love MSFT, as a user I love Apple.
Tuesday, July 29, 2008 8:26:16 PM UTC
Scott,

I thought you had taken the iPhone back? Must have changed your mind or got the 3G...

Thanks for these tips! I've have my iPhone for a year and didn't know about the screenshot trick.

I got the SDK and am just having fun learning ObjC/Cocoa. It's a trip!

I have to agree with you: dev -> MSFT, user -> Apple. I just wish I could meld the two easier and without a Parallels virtual!
John Baughman
Tuesday, July 29, 2008 8:39:40 PM UTC
I'm testing an iPhone 3G. I took back the original iPhone because it just flat sucked for Business use. The new one is better, but it crashes 2-3 times a day and the battery only lasted 4-5 hours, so I got a car charger. Also, I can't "teather" it and use it's internet connection for my laptop which is a bummer.
Wednesday, July 30, 2008 5:39:14 PM UTC
Very very nice Scott, I added the icon for my site .. will adjust other stuff soon.

The 4-5 hours on your new IPhone, is that with heavy use or is the battery really unsuable?

Cheers
Vishal
Saturday, August 16, 2008 1:23:53 AM UTC
@vishal -- I'm coming to this posting a little late ... I was on vacation and didn't look at a thing even close to work related.

In any case with respect to the charge that the battery seems to be holding, it could be a bad charger. My iPhone had one out of the box that was bad. It would not charge the phone at all. The phone would charge from a computer via the USB connection cable. While that worked, it was an inferior quality of a charge. "Full" really only yielded a couple of hours without having to be charged again.

We determined that the wall adapter was bad by testing with my son's wall adapter and my phone. It charged just fine.

I took the adapter back to the Apple store at Pioneer Place (Portland, OR). At first they didn't believe me. But the person I talked to tried everything I did and did believe. They gave me a new power adapter. The iPhone now holds a charge for about 7 days of stand by (haven't actually clocked it, but it's somewhere in that neighborhood).

The person at the store strongly recommended always charging the iPhone from the power adapter rather than from the computer. They felt that the quality of the charge was better. In my experience, they were right.

@Scott -- If your iPhone isn't holding a charge long enough, it might be worthwhile to ask the Apple store to replace the powere adapter.
Mike
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.