Page 1 of 2 12 LastLast
Results 1 to 20 of 31

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: Designing Web Pages for the iPhone

  1. #1
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    Default 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.
    .


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews

  2. The Following 2 Users Say Thank You to Kyle Matthews For This Useful Post:

    bjlawrence11 (05-14-2008), thurbs190 (03-05-2009)

  3. #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...

  4. The Following User Says Thank You to exNavy For This Useful Post:

    bjlawrence11 (05-14-2008)

  5. #3
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    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

  6. The Following 2 Users Say Thank You to Kyle Matthews For This Useful Post:

    bjlawrence11 (05-14-2008), MooShoo (07-22-2007)

  7. #4
    Quote Originally Posted by poetic_folly View Post

    Which site?
    The one linked in my profile here
    Hmm...

  8. #5
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    Ah.
    .


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews

  9. #6
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    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>
    .


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews

  10. #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.

  11. #8
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    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; 07-12-2007 at 03:35 PM. Reason: Automerged Doublepost
    .


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews

  12. #9
    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&#37; and work on other issues.

    Mahalo (thanks)

  13. #10
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    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

  14. #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.

  15. #12
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

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


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews

  16. #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&#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
    http://www.techdictionary.com/iphone/

    Thanks in advance!

  17. #14
    Owner / Founder - ModMyi
    aka cash7c3
    Cody Overcash's Avatar
    Join Date
    May 2007
    Location
    Denver, CO
    Posts
    11,904
    Thanks
    340
    Thanked 15,277 Times in 652 Posts

    I'd make the page 100&#37; 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
    Last edited by Cody Overcash; 07-22-2007 at 03:32 AM. Reason: Automerged Doublepost

  18. #15
    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.

    Krag
    http://techdictionary.com/iphone

  19. #16
    Owner / Founder - ModMyi
    aka poetic_folly
    Kyle Matthews's Avatar
    Join Date
    May 2007
    Location
    Tampa, Florida, United States
    Posts
    8,484
    Thanks
    570
    Thanked 4,809 Times in 1,229 Posts

    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.
    .


    ↑ ↑ ↓ ↓ ← → ← → B A [select] [start] Kyle Matthews

  20. #17
    You're right, I musta missed it. It's there now.
    THX!

  21. #18
    Now I'm finished with testing would some others check this URL and give me any feedback
    http://techdictionary.com/iphone

    Also read about it on this thread.
    http://www.modmyi.com/forums/showthr...highlight=krag

    Thanks!

  22. #19
    Hi,
    Now You can send SMS in any language as you want with iPhone

  23. #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

Page 1 of 2 12 LastLast
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •