[Kyle Matthews]

I've been working on the iPhone version of MMi (which is fairly finished, and available at iphone.modmyi.com), and thought I'd share a few of my tips with all you who are planning on designing sites specifically for the iPhone.

• Design for a 100% width, NOT a 320 or 480 width. The iPhone automatically resizes the page to fit the screen, and I've found that even if you code it for the correct width to fit on the page well, it will still shrink it down. If its coded to a 100% width, though, it will fill the page, whether in Landscape or Portrait mode.
• Use big buttons. Your users will be browsing with their fingers. I still need to fix up the iPhone version of MMi, there are text links at the top which can be tough to hit with your fingers. EASE OF USE is key.
• Skip the unnecessary information. Users can browse your site from home if they need huge amount of info, or they can view a separate page on your site from their iPhone if they want a bunch of info. For the most part, the KISS principle (Keep It Simple, Stupid) applies to iPhone web design. As large as the screen is on the iPhone, it sucks to zoom in and out and scroll forever. Let your site have a simple purpose, which is evident and easy to use.

I'll add more as I go. If you've done any design for the iPhone, or are planning on it, post up questions and advice here.

[exNavy]

Thanks for the tips! I've been debating coding a iPhone version of my site. I wonder if we need to look at graphics any differently? The iPhone is what 160dpi instead of the usual 72 you see on a computer?

[Kyle Matthews]

Correct. So you may want to create your images in that resolution for a nicer "pop".

Which site? You may also want to specify an iPhone stylesheet, which would lend you the ability to not have to recode the whole thing.

Specify an iPhone Style Sheet

Web designers often assume a particular window size when designing their sites. If that’s the path you want to take, you may want to provide one for a Safari on iPhone specific size. You should provide conditional CSS for iPhone (or other devices, for that matter).

You can tailor the style of your webpages by providing a style sheet that adapts to iPhone. The CSS 3 media query allows you to do just that. There are several types of queries including print, handheld, and screen. iPhone ignores the print and handheld media queries because these types do not supply high-end content. So the screen query is what you need to use.

To specify a style sheet that is just for iPhone without affecting other devices, you use the only keyword in combination with the screen keyword, as follows:

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

Older browsers ignore the only keyword and won’t read your iPhone style sheet. To specify a style sheet for devices other than iPhone, use an expression similar to the following:

<link media="screen" href="fancy.css" type="text/css" rel="stylesheet" />

[exNavy]

Originally Posted by poetic_folly

Which site?

The one linked in my profile here

[Kyle Matthews]

Ah.

[Kyle Matthews]

When you create your first page for the iPhone and load it in that sweet little browser, the first thing you think is "Damn, I wish I could get rid of those giant toolbars!" It is kind of annoying to have so much space taken away from your pages.

As it turns out, it only takes a little JavaScript to get rid of the big toolbar at the top, which is much larger than the one at the bottom. All you have to do is call window.scrollTo(0, 1), and the upper toolbar will slide right out of sight!

If the user rotates the phone, it all gets messed up, so you have to detect changes to the phone's orientation and call scrollTo again at that time.

All in all, it works well. I hope that those of you out there developing iPhone apps will use this technique to get rid of that giant honkin' toolbar so I can enjoy your apps in the full glory of the iPhone screen.

Here is a demo

I'm having a lot of fun with this phone if you haven't noticed

http://www.joehewitt.com/blog/iphone_tips_loo.php

The basics:

<script type="application/x-javascript">

addEventListener("load", function()
{
setTimeout(updateLayout, 0);
}, false);

var currentWidth = 0;

function updateLayout()
{
if (window.innerWidth != currentWidth)
{
currentWidth = window.innerWidth;

var orient = currentWidth == 320 ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
setTimeout(function()
{
window.scrollTo(0, 1);
}, 100);
}
}

setInterval(updateLayout, 400);

</script>

[krag]

The iPhoney has been useful but since I haven't got a iPhone yet I'm hoping it is soemwhat accurate. I know it's for testing and isn't perfect. I'm going to spend a few hours a week on this site for iPhone and would appreciate feedback. http://www.techdictionary.com/iphone/

I'm also considering a subdomain (iphone.techdictionary.com or i.techdictionary.com) instead of a subfolder, any thoughts?

Thanks in advance.

[Kyle Matthews]

Site pulls up very small for me on the iPhone, I would code it for a 100% width instead of a fixed width.

iUi, check out the iUi post from Joe Hewitt, some GREAT info on developing for the iPhone.

[krag]

thanks for the tip.
I did make a test page wider
http://www.techdictionary.com/iphone/chat1iphone.html

It seems that the text is going to be small for these chat pages unless I have 2 columns not 4 (like emoticons).

Also iPhoney is odd that when I view the chat page abocve it's not too hard to read vertical, then I rotate it to horizontal and it's a little better, then when I rotate it back the type is smaller until I quit and restart iPhoney, just a quirk I guess.

I'll redo the pages to 100% and work on other issues.

Mahalo (thanks)

[Kyle Matthews]

iPhoney doesn't resize well like the iPhone does. At the moment, there are no good test interfaces that really show the sizing.

You're welcome...

[krag]

Shockwave flash files?

They don't run in iPhoney it seems so any ideas on how to test them for iPhone without an iPhone?

Thanks in advance.

[Kyle Matthews]

iPhone doesn't support Flash. .flv OR .swf.

[krag]

I heard swf for iPhone Safari is coming.

I don't know if it was the stores phone but the js includes (for menus, copyright, etc) didn't work on my site on the iPhone Safari, so I just used direct links, etc. It worked fine in iPhoney... so I guess you can't trust iPhoney to be 100% accurate.

Since I don't yet have a iPhone can someone give feedback on our sections, using Safari on iPhone?
Home-Search, Emoticons, IM/Chat, News, Links
http://www.techdictionary.com/iphone/

Thanks in advance!

[Cody Overcash]

I'd make the page 100% width instead of a small area with a huge background. just a suggestion

for example.

http://app.modmyi.com/browser.php#_home

looks weird on a full browser but great on an iphone

[krag]

After some trial and error I'm 99%... well 95% happy with the results.

I did make the fonts, buttons, images bigger as you suggested, and 100% width. I also tried "<meta name = "viewport" content = "maximum-scale=1.0,width=320,initial-scale=1.0">" which would be fine with the smaller font, buttons, etc., but not with the larger size.

Now it looks pretty much like I want it to. I still have to tweak a little here and there... and when .swf files work I'll have to go through this resizing again when I add .swf games.. thanks for all your help.

Krag
http://techdictionary.com/iphone