iPad CSS – Any New Approach in Creating Layouts?

Being a salvation for Apple geeks, the iPad caused a painful headache for web designers that faced the layout issues. And some time ago we’ve started thinking on this and highlighted web design issues that might occur with developing websites for the iPad. In general creating website layout with the help of CSS is not really that much of a challenge for the experienced web designer. But the whole nature of the iPad will surprise with some small problems that will cause a real pain in you-know-where while trying to fix them. So while a creating website or optimizing it for iPad you should remember several important things about CSS and the iPad.

Links and Hover effects

Yes, the iPad has a touch screen and you have to use what appears to be a totally different technique for placing and displaying links at your website. It means that you have to avoid links in text placing them aside and marking them out to make them larger (actually it also concerns all other interactive elements of your website). Such great CSS effect as hover will not be user-friendly for touch screen and you should consider that too. And don’t forget that jQuery mouse events are not for iDevices either, so you’ll gain some extra problems along with them (for example you have to click the link twice, first time will show you a hover, second time will actually click the link).

Fixed position

If you want to use such CSS property as

position: fixed

it won’t be working in Mobile Safari. Front-end developer Richard Herrera has mentioned at his blog that this happens because:

Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.

Interesting solution on how to fix this is offered by cubiq.org in their Scrolling DIV on iPhone and iPad devices article.

Orientation

We all know that iPad’s landscape and portrait modes are great but they’re not really CSS-friendly. So you have to put certain efforts to make your website displayable correctly in both modes. The solution is to create two different CSS files (portrait.css and landscape.css). Here is what it will look like:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">"

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

But that was a simple solution. Also we want to offer you to take a look at the iPad CSS Layout with the landscape / portrait orientation modes that was made up by australian web designer Matthew James Taylor. Hopefully it might be handy for you. And of course we recommend you to read the additional info called “iPad orientation CSS revised”. Of course you shouldn't forget that you can use the user agent string that will help you with the CSS for iPad of your website. In case you don’t know what it is - it basically defines whether or not the device accessing your website is an iPad. Here is the string:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

The Frames Issue

Summary of overflow problems on the iPad (current status according to webmanwalking.org):

• Scrollable divs with overflowing content don't show scroll bars.
• Frames with overflowing content refuse to honor height and width.
• Frames problem is not caused by mishandling overflow as "overflow:visible", because border expands along with content.
• Even if frames did honor height and width, and allowed scrolling to overflow content, they probably STILL wouldn't put up scroll bars, because: (1) scrollable divs don't, and (2) Apple likes to be internally consistent with its UI.

As the result we can state a fact that you can easily use CSS properties for creating some simple and basic things while optimizing a website for the iPad. But if you decide to dig deeper than that we are sure that you'll face certain issues. It is hard to name the reasons behind this because the iPad is a new technology and maybe it needs some time to correspond to all web standards (though Mr. Jobs wanted us to think it does correspond to the latest web standards). Or maybe this is an inherent feature of many Apple products - to amaze on one hand and to drive you insane on the other. Anyways, lives of developers won't be interesting without such challenges as the iPad.

What do you think of the iPad CSS issue? Do you expect any universal solutions to emerge in the near future? Let us know in the comments! Besides, we have recently published an article exploring the most conspicuous mobile web design trends for 2011. You might be interested to have a look at them and find some graphic approaches to consider for your custom mobile designs.