Designing Web Pages for the iPhone - iPhone Forums at ModMyiFone.com - iPhone

**poetic_folly** · #1 (**permalink**) 07-04-2007, 01:32 PM

I've been working on the iPhone version of MMi (which is fairly finished, and available at iphone.modmyiphone.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 · #2 (**permalink**) 07-06-2007, 08:04 PM

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?

**poetic_folly** · #3 (**permalink**) 07-06-2007, 08:11 PM

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.

Quote:

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:

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:

exNavy · #4 (**permalink**) 07-07-2007, 03:12 AM

Quote:

Originally Posted by poetic_folly

Which site?

The one linked in my profile here

**poetic_folly** · #5 (**permalink**) 07-07-2007, 03:51 AM

**poetic_folly** · #6 (**permalink**) 07-08-2007, 10:45 AM

Quote:

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:

krag · #7 (**permalink**) 07-12-2007, 02:05 PM

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.

**poetic_folly** · #8 (**permalink**) 07-12-2007, 02:13 PM

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 · #9 (**permalink**) 07-12-2007, 03:14 PM

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)