Screen size for ipad-friendly web sites?

OT

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

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

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.

Setting the "viewport" meta tag appropriately will take care of things on mobile devices.

If you want to control the width in desktop and laptop browsers, set a reasonable max-width which would be about 980px. Since its not a good idea to use column layouts for mobile devices, I set the max-width a lot less than this.

If you use a single column liquid layout with the header and footer divs inside the main content div, you can apply this max-width to the content div.

Otherwise, add a "wrap" inside the opening and closing body tags and apply the max-width to it.

Columns can be made to fold down for narrower devices but this creates a long, long page for smart phone users.

Web designers who like to impress with all the whistles and bells will have a hard time adapting to mobile design where less is definitely more. I am constantly looking for ways to simplify mobile designs. Here's a test site which I have named "simple"...

http://www.ezmacwebdesign.com/simple/

You can look at the source to see how little code is used compared with an average web page. The navigation is adapted from a standard "select" drop down using some javascript to get the items to act as hyperlinks. This is how it works on the iPhone...

There probably is some law against doing this but it seems to work OK.

iWeb is actually quite useful for deciding how much content to add for mobile devices. While doing this design for iPhone...

http://www.iwebformusicians.com/iWeb/Mobile-iWeb.html

... it struck me that I could set up a page with a width of 320px and a height of about 1500px to see how much content I could get into it as a rough guide to what is reasonable for smart phone users.

but does not really answer my question

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

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

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

maybe you did not understand the question ?

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

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

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.

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!

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

The second link actually shows an image of the size the website should have for viewing on an iPad.

Assuming that view the webpage in landscape mode (which I think most people do). This was exactly what I was looking for.

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

I believe he meant if the content of the screen resized... *cough* *cough*

Also, Roddy's reply about a "semi-liquid" screen format is probably the most usable format across all devices. However, if you are just aiming your site at iPad users, a 1024 wide x 768 tall format will be the most intuitive to use, based on my own iPad usage.

🙂

You will need to take into consideration the new iPad screen which is 2048-by-1536-pixel resolution at 264 pixels per inch (ppi).

Create two test pages in your site, one at 2048-by-1536-pixels and the other at 1024 x 768. Add some items that can be used to check for resolution and appearance to both and make your decision based on which looks best.

OT

Safe? Of course they are safe. Nobody will get hurt.

All examples above only show vertical dimensions ...

That's because I WANTED them that way. It's intentionally. On purpose. And if my visitors do not like it vertical they can turn the device 90 degrees. I won't hurt my feelings.

So you are totally, absolutely, 100% free, with no obligations whatsoever, to create the pages the way YOU want them.

And to see what rubbing a finger over a sheet of glass can accomplish, visit my "Made on an iPad" HTML Egg pages :

http://www.wyodor.net/htmlegg/

Have fun.