Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.
07-04-2007, 01:32 PM #1
Designing Web Pages for the iPhone
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.
07-06-2007, 08:04 PM #2
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?Hmm...
The Following User Says Thank You to exNavy For This Useful Post:
07-06-2007, 08:11 PM #3
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" />
07-07-2007, 03:12 AM #4
07-07-2007, 03:51 AM #5
07-08-2007, 10:45 AM #6
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.
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
var currentWidth = 0;
if (window.innerWidth != currentWidth)
currentWidth = window.innerWidth;
var orient = currentWidth == 320 ? "profile" : "landscape";
07-12-2007, 02:05 PM #7
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.
07-12-2007, 02:13 PM #8
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.
Last edited by Kyle Matthews; 07-12-2007 at 02:35 PM. Reason: Automerged Doublepost
07-12-2007, 03:14 PM #9
thanks for the tip.
I did make a test page wider
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.
07-12-2007, 03:31 PM #10
iPhoney doesn't resize well like the iPhone does. At the moment, there are no good test interfaces that really show the sizing.
07-12-2007, 09:45 PM #11
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.
07-12-2007, 09:55 PM #12
iPhone doesn't support Flash. .flv OR .swf.
07-20-2007, 08:36 PM #13
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
Thanks in advance!
07-22-2007, 02:31 AM #14
I'd make the page 100% width instead of a small area with a huge background. just a suggestion
looks weird on a full browser but great on an iphone
Last edited by Cody Overcash; 07-22-2007 at 02:32 AM. Reason: Automerged Doublepost
07-27-2007, 05:46 PM #15
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.
07-27-2007, 05:56 PM #16
Looks much much better. I like it.
Of course, from the iPhone links section, you left out the most important link. app.modmyi.com, the only iPhone App List you need.
08-03-2007, 10:10 PM #17
You're right, I musta missed it. It's there now.
10-17-2007, 12:54 PM #18
Now I'm finished with testing would some others check this URL and give me any feedback
Also read about it on this thread.
12-30-2007, 02:25 AM #19
Now You can send SMS in any language as you want with iPhone
01-02-2008, 02:59 PM #20
This is exactly what I'm trying to do except remove the bottom bar on loading my webpage which I just don't need and robs screen space. As I say my webpage is a home control server viewed over the internet only and not an application running on the iphone. I'd be very grateful for advise on how to hide etc this bottom bar....many thanks Chris555