User Tag List

  1. Kyle Matthews's Avatar
    I've been working on the iPhone version of MMi (which is fairly finished, and available at, 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.

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-04 08:32 PM
  2. exNavy's Avatar
    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?
    2007-07-07 03:04 AM
  3. Kyle Matthews's Avatar
    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" />

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-07 03:11 AM
  4. exNavy's Avatar

    Which site?
    The one linked in my profile here
    2007-07-07 10:12 AM
  5. Kyle Matthews's Avatar

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-07 10:51 AM
  6. Kyle Matthews's Avatar
    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

    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);
    window.scrollTo(0, 1);
    }, 100);

    setInterval(updateLayout, 400);


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-08 05:45 PM
  7. krag's Avatar
    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.

    I'm also considering a subdomain ( or instead of a subfolder, any thoughts?

    Thanks in advance.
    2007-07-12 09:05 PM
  8. Kyle Matthews's Avatar
    Site pulls up very small for me on the iPhone, I would code it for a 100&#37; 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; 2007-07-12 at 09:35 PM. Reason: Automerged Doublepost

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-12 09:13 PM
  9. krag's Avatar
    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&#37; and work on other issues.

    Mahalo (thanks)
    2007-07-12 10:14 PM
  10. Kyle Matthews's Avatar
    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...

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-12 10:31 PM
  11. krag's Avatar
    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.
    2007-07-13 04:45 AM
  12. Kyle Matthews's Avatar
    iPhone doesn't support Flash. .flv OR .swf.

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-13 04:55 AM
  13. krag's Avatar
    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&#37; 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!
    2007-07-21 03:36 AM
  14. Cody Overcash's Avatar
    I'd make the page 100% width instead of a small area with a huge background. just a suggestion

    for example.

    looks weird on a full browser but great on an iphone
    Last edited by Cody Overcash; 2007-07-22 at 09:32 AM. Reason: Automerged Doublepost
    2007-07-22 09:31 AM
  15. krag's Avatar
    After some trial and error I'm 99&#37;... 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.

    2007-07-28 12:46 AM
  16. Kyle Matthews's Avatar
    Looks much much better. I like it.

    Of course, from the iPhone links section, you left out the most important link., the only iPhone App List you need.

    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews
    2007-07-28 12:56 AM
  17. krag's Avatar
    You're right, I musta missed it. It's there now.
    2007-08-04 05:10 AM
  18. krag's Avatar
    Now I'm finished with testing would some others check this URL and give me any feedback

    Also read about it on this thread.

    2007-10-17 07:54 PM
  19. taqi's Avatar
    Now You can send SMS in any language as you want with iPhone
    2007-12-30 09:25 AM
  20. Chris555's Avatar
    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
    2008-01-02 09:59 PM
31 12