Skip navigation

Screen size for ipad-friendly web sites?

176530 Views 47 Replies Latest reply: Feb 4, 2013 7:21 AM by Cottonsocks RSS Branched to a new discussion.
1 2 3 4 Previous Next
edos Level 1 Level 1 (0 points)
Currently Being Moderated
Mar 28, 2011 8:49 AM
What is the ideal screen size for the ipad ?

I am designing a site using iweb 09 www.casasnaareia.com currently 1000px wide and 480px high

Any thoughts / suggestions much appreciated !

*I may receive some form of compensation, financial or otherwise, from my recommendation or link.


<Edited by Host>
MacBook, Mac OS X (10.5.2)
  • Wyodor Level 6 Level 6 (19,335 points)
    Currently Being Moderated
    Mar 28, 2011 8:58 AM (in response to edos)
    24" Alu iMac 4GB RAM 500GB HDD, Mac OS X (10.6.4), iPad simulator
  • Wyodor Level 6 Level 6 (19,335 points)
    Currently Being Moderated
    Mar 28, 2011 9:20 AM (in response to edos)
    but does not really answer my question


    Yes, it does. But finding out requires more than the 9 minutes between my previous post and your reply.

    I am really wondering how wide can I go without needing to scroll with the ipad or is the screen automatically resized ?


    The screen is not resized. It's a bit hard to do that. It's made of glass.

    So I gave samples of pages that shows how to calculate the width and height of a page without scrolling.

    http://myipad.atspace.com/size/768-946.html


    guess I need to play around with an ipad for a while and test the site ...


    Until I have the money for the real thing, I use the iPad simulator that came with the Xcode SDK.
    24" Alu iMac 4GB RAM 500GB HDD, Mac OS X (10.6.4), iPad simulator
  • timmy toad Level 1 Level 1 (5 points)
    Currently Being Moderated
    Mar 28, 2011 12:02 PM (in response to Wyodor)
    Wyodor wrote:
    Yes, it does. But finding out requires more than the 9 minutes between my previous post and your reply.


    Nice one Wyodor, i can fully understand your cryptic remark !
    mac book pro 2.2ghz, Mac OS X (10.6.7), just switched
  • Old Toad Level 10 Level 10 (112,990 points)
    Currently Being Moderated
    Mar 28, 2011 1:50 PM (in response to edos)
    The iPad screen is 1024-by-768-pixels. You could set the page width to the 1024 if you wanted to utilize a wider view requiring the iPad to be rotated. This would necessitate more scrolling but that's easy with the iPad.

    Or use 768 for the width for the normal iPod orientation and less scrolling. Personally I would let the height of the page be larger as it's faster to scroll up and down a page than to move to a new page to get additional information.



    OT
    3Ghz iMac, 4G RAM, 1TB HD; MBP 2.16 Ghz 2G RAM; 1.5TB/160GB HDs;, Mac OS X (10.6.7), Canon:i850/8600F, Epson R280; 4G Nano, 30G Video iPod; iPad 3G
  • Wyodor Level 6 Level 6 (19,335 points)
    Currently Being Moderated
    Mar 28, 2011 11:55 PM (in response to edos)
    maybe you did not understand the question ?


    Maybe you didn't understand the answer.

    Here are 5 ideal sizes :

    http://myipad.atspace.com/size/768-946.html
    http://myipad.atspace.com/size/800-985.html
    http://myipad.atspace.com/size/848-1045.html
    http://myipad.atspace.com/size/900-1109.html
    http://myipad.atspace.com/size/980-1208.html


    Try them all and see which one is the ideal one.
    24" Alu iMac 4GB RAM 500GB HDD, Mac OS X (10.6.4), iPad simulator
  • Rick A Level 1 Level 1 (85 points)
    Currently Being Moderated
    Nov 4, 2011 9:34 AM (in response to edos)

    Here is the easy answer, which is probably what most people come here looking for.

     

    From Apple's iPad2 specs:

     

    1024-by-768-pixel resolution at 132 pixels per inch (ppi)

     

    Would've saved everyone a lot of time

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Nov 4, 2011 10:08 AM (in response to Rick A)

    Well, the question should really have been, "What is the ideal page width for the iPad?".

     

    The answer is that there isn't one since the iPad, like most portable devices, has two screen widths depending on whether its used in portrait or landscape mode.

     

    If you are designing a layout specifically for the iPad, one solution is to use a folding design where the sidebar folds down to the bottom in portrait and jumps back up to the side in landscape. This will only work for personal computers and iPads.

     

    The popular way of designing a layout to suit a large range of portable devices is to use a liquid, or semi liquid, layout that will automatically adjust to the fixed width browsers used on these devices.

     

    Something like this...

     

    ipad-1.jpg

     

    ipad-2.jpg

    Neither of these methods are possible using a template based editor like iWeb and this is probably one of the main reasons that Apple has given up on the application. Surfing the internet on mobile devices is growing daily and its now become essential to have a mobile version of your website or one that can be viewed on all devices.

  • Rick A Level 1 Level 1 (85 points)
    Currently Being Moderated
    Nov 4, 2011 10:19 AM (in response to Roddy)

    Absolutely agree, but I think the OP was just looking for the basic dimensions, whether they're 1024 x 768 or 768 x 1024. That's what I was looking for, not a series of condescending and snarky comments that never revealed the info.

     

    First responder could've easily said the above, and then, for more info and variables, see these links...

     

    As the immortal Rodney King once said, "...can we all get along?"

     

    Just my two cents...

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Nov 4, 2011 10:43 AM (in response to Rick A)

    I suppose the whole topic is superlfuous since its not possible to build a website that's "ideal" for the iPad using iWeb due to the fact that it does have two screen widths!

     

    It certainly didn't answer the OP's questions since a quick look at his website will show that it is not really suitable for viewing on an iPad in either landscape or portrait mode.

  • Rick A Level 1 Level 1 (85 points)
    Currently Being Moderated
    Nov 4, 2011 10:57 AM (in response to Roddy)

    And now I see "Old Toad" did answer the question! Silly me!

     

    I'm not in the web design field so I don't have to worry about orientation. I just like to display a flight schedule or a map as my lock screen for quick access.

     

    Thanks for the validation!

  • josemari Level 1 Level 1 (110 points)
    Currently Being Moderated
    Nov 4, 2011 11:08 AM (in response to Rick A)

    The default dimensions of most iWeb templates display just fine on the iPad.

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Nov 4, 2011 11:52 AM (in response to josemari)

    Its not that they don't display OK. After all, the iPad in landscape mode is as wide as a lot of laptops.

     

    iWeb built sites can be made more mobile friendly by using fingertip sized buttons for navigation, the appropriate input types for launching specific keypads in contact forms and optimizing the files before upload to the server.

     

    There are also quite a few JQuery slideshows out there that allow portable device users to finger swipe through the images.

     

    Avoid dragging movie and music files onto iWeb pages since these require the QuickTime plugin. Use HTML5 - with fallback to flash for those browsers that don't suport it.

     

    Avoid flash completely or, at least, provide fallback to HTML5 if possible. And so on...

1 2 3 4 Previous Next

Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • This solved my question - 10 points
  • This helped me - 5 points
This site contains user submitted content, comments and opinions and is for informational purposes only. Apple disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Apple Support Communities Terms of Use.