Previous 1 2 3 4 Next 47 Replies Latest reply: Feb 4, 2013 7:21 AM by Cottonsocks Branched to a new discussion.
edos Level 1 Level 1 (0 points)
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)
  • edos Level 1 Level 1 (0 points)
    Wyodor that is very interesting but does not really answer my question

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

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

    Thanks !
  • Wyodor Level 6 Level 6 (19,465 points)
    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.
  • timmy toad Level 1 Level 1 (5 points)
    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 !
  • edos Level 1 Level 1 (0 points)
    maybe you did not understand the question ?

    what is the ideal screen size when designing a web site for the ipad ?

    does anyone have an answer ?

    Thanks !
  • Old Toad Level 10 Level 10 (120,250 points)
    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
  • Wyodor Level 6 Level 6 (19,465 points)
    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.
  • Rick A Level 1 Level 1 (85 points)

    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,265 points)

    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)

    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,265 points)

    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)

    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)

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

  • Roddy Level 6 Level 6 (17,265 points)

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

Previous 1 2 3 4 Next