Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

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.


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Edward Korcheg

Edward is a professional technical writer who is also passionate about making stunning designs in Photoshop. You can find many useful tutorials in his collection of articles at MonsterMost.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

6 responses to “iPad CSS – Any New Approach in Creating Layouts?”

  1. Daniel Thomas Pryor says:

    Thank you! This is what I was looking for after I noticed some of our designs were fine, and others had gutters on the right side of the page. I certainly appreciate your efforts, obviously! ;-))

  2. Christian Wick says:

    Sweet! Nice collection of links to some very useful resources on web development for this marvels device 🙂

  3. Liz Smith says:

    Ah this explains why I’m having problems with navigation on a certain site using the iPad. Thanks!

  4. Fahd Khater says:

    Is there any way that we can have swf files to be played on Ipads.

  5. JPM says:

    Great, just what I needed, another browser to test for compatibility issues. Some of these are pretty major (mishandling of overflow just right out at me). Let’s hope Stevie J get his act together, or the web experience on iPads is going to suffer, with both the users and developers bearing the frustration.

  6. Joelson Lopes says:

    very good, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *