Apple Articles

Web Design for iPad – WTF or FTW?

5/5 (2)

The iPad. The killer word coming off everyone's lips lately... This is the newest mobile computing device (a.k.a. Apple Tablet) that claims to revolutionize how we consume web content. We must admit that this tablet has huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.

What do they need to do when designing pages to perform on this interesting Apple invention? For general design principles, we've rounded up a few options below that will give a little guidance. Now's the time to keep your eyes open for the iPad-optimized design tips:

Specific Features of iPad Display

iPad has the high-resolution, 9.7-inch (screen resolution of 1024x768 pixels) LED-backlit IPS touch-sensitive screen which is remarkably vivid for web browsing, media consumption, gaming etc. Its tactile and luscious interface invites amazing close-ups putting the objects almost literally in the hands of the gadget user.

ipad web design

  • Landscape and Portrait Mode Styling

The iPad allows for both horizontal and vertical style viewing. This will pose some interesting possibilities for web designers to incorporate features that wouldn't have worked before. The point is that the styling has completely changed when the orientation changes, and for the designers this means two completely different layouts for which to design.

The fact is that the iPad marks the return to magazine formats introducing the web's first truly vertical screen orientation. While computer monitors have always had a landscape styling, now we can see a lot of web content consumption in a vertical mode which will result in new web designs and web information architecture.

Since the portrait mode encourages vertical scanning and the user can now see the entire page without having to scroll, web pages will no longer be viewed one half at a time and the designers can finally design pages that are meant to be scanned and read all at one time. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its own way makes it very easy to browse sites that display content horizontally. It's for this specific reason that more of an emphasis is placed on smart and fluid layouts that can easily work both ways adapting the content according to the screen resolution.

  • Design for 960 Pixels Layout

Any website with a width larger than the iPad screen resolution will be scaled down and zoomable. If your site is narrower than the iPad screen orientations, that could cause unnecessary margins. In this case you'll need to adjust the viewport settings. Your content should be scaled so that the number of visible pixels matches the screen width. You can also set the width to a specific number to fit content designed for that exact size.

While designing web pages for the iPad, it's advisable to use the 960 grid system. This most widely used width has become extremely popular due to its ability to fit a large number of modern screen resolutions. If your website is designed to be around 960 pixels wide, it will then show up full scale on the iPad. In general, make your web page work seamlessly in landscape and portrait mode. Note that Safari (the browser that the iPad runs) always calculates device width based on the portrait orientation. If you rotate to landscape mode, the content is not reflowed, but scaled up to fit the wider screen.

  • Text-Background Relation

The point is that the iPad has high pitched light contrast. Black text on white background is more difficult to scan on the iPad than on a regular screen. The way to get around hard contrast noise is using delicate text-to-background combinations. This means you can deploy like a sepia background with a dark umbra font, or a light font on dark background, etc. This will work quite well to reduce sharpness. Additionally note that designing long text passages for good readability is a tough matter; you better have carefully arranged and simplified content model.

  • A Better Minimalism for the iPad

Accessible functionality of the iPad could inspire graphic designers to simplify their websites and make them easier to navigate. This suggests creating limited information architecture with linear form use. As for the navigation, it's better to reduce it to a left side bar in landscape mode and pop it over into portrait mode. Don't overfill the space since a structurally organized and clean look will enable the users to more easily process the content on the website.

About iPad Multi-Touch Interface

It is important to understand that the iPad is not navigated using a mouse. Its highly precise and responsive touch screen interface is controlled with human fingers which are a lot larger than a typical mouse pointer, plus they may obscure the visibility of the elements. What this means is that there will be less of the traditional hyperlinks, concealed in a text, and bigger, bold and touchable buttons which now have to be accommodated to the size of a fingertip. It requires more space between interactive elements as well. In short, the touch experience with the potential for a richer, more textured interaction will cause traditional navigation bars to give place to contextual and highly visible menus. Key action items and areas will likely gravitate to the middle of the screen.

It is also important to note when designing a website for iPad that the use of hover effects creates a usability problem. Those favorable effects for pointer-based devices will be a hurdle in user experience on the iPad, so keep in mind the tactile nature of the iPad interface.

iPad doesn't Support Flash and Java Content

The iPad runs Safari browser which doesn't support plug-ins to be installed on this particular device. This important point is that it might be a good thing to find other alternatives to use instead of the mentioned technologies. CSS3 and HTML5 will continue to rule over the page layout and will become widely used for iPad development. This is the perfect chance to try out all those new techniques while such web standards can do almost all of the desirable things that Flash performs. HTML5 has the video and audio element, and animation via CSS animations can provide all necessary multimedia embedding options.

* * *

It's simply amazing how rapidly Apple's tablet has impacted the web design sphere. It adds loads of new twists to the complex and evolving design tasks for graphic developers. To finish this off, we wanted to let you know of the iPad Peek tool that will let you see how any website will be rendered on the iPad - too bad it doesn't allow you to see the website you want in a portrait mode. If you know other tools that emulate the iPad browsing experience, or have any other suggestions on how to efficiently design websites for the iPad - please be sure to let us know with your comments!

We have recently published an article exploring the most conspicuous mobile web design trends for 2011. You might be interested in having a look at them and find some graphic approaches to consider for your custom mobile designs.

37 Responses

  1. Thanks for a very illuminating article, sounds like html5 is definitely the way to go!

  2. I agree with the touch problem, but…
    Why should designers/developers again adapt to another device and not the other way around? Isn’t it time that manufacturers of these things adjust to the existing way of working in stead of forcing people to learn yet other ways of doing things?
    If I want to use certain technologies that already exist for years, than Apple should make sure it also supports that.

    1. They don’t support it because they say that Flash might not be secure enough, and because of performance issues with Flash (one reason out of many others).

      I think it’s a good thing to finally force people to write HTML5 and develop new standards. Personally I hate sites that uses Flash for Ads etc., they clog up my CPU every time. If Apple wouldn’t force people into HTML5, it would probably take years until HTML5 would become a popular alternative for Flash.

      I would personally rather learn HTML5 instead of Flash if I would start learning now. I think that Flash has plagued my internet experience long enough.

    2. Why aren’t we driving Model-Ts or walking for days to visit the relatives? Don’t be so quick to slam innovation. The, “that’s how we’ve always done it in the past…” argument stifles advancement and limits creativity.

      Apple’s purposeful abandonment of “mainstream” interface and display technologies, and support for emerging standards, confirms their commitment to being a forward looking organization, with enhancing user experience being the primary goal.

      How many iPads were sold when it was released? How many are continuing to be grabbed up? Do you think these people are worried about not being able to see Flash content or web pages that require ActiveX or Java support? I’d say that they’re shouting, “Give us something new and cool and fun to work with!”

      As web and online application designers and developers let’s embrace the new technologies of HTML5/CSS3. Let’s get behind touch interfaces and aspect-flippable displays. Give users a reason to be excited about working with online content instead of saying, “Nope, that’s just not the way we do it around here.”

    3. It’s called evolution. Did you think the web was going to stay the same forever? If we followed your train of logic, we would be writing on stone tablets.
      As for “certain technologies,” Flash is garbage. It always has been. We just thought it looked cool. Now most of the useful things done with Flash (note I said useful) can be done with conventional technologies.

  3. I agree that HTML5 and CSS3 are the future BUT… The big problem I see here is that HTML5 and CSS3 are not really here yet. In fact most people that own an iPad will have moved on to the next generation before HTML5 even shows up as a standard…. These tools are still being developed and very few browsers support them. Safari and a couple other browsers may be starting to support CSS3 and HTML5 now, however Safari on Windows …sorry to say ….absolutely sucks.
    The point being, why would I step back in development for one device? Especially one that is behind the line to start with?

    Lemmis…. you obviously haven’t got a clue as to what you are saying!
    If it is so insecure or such a bad program then why is it on most of the computers in the world (99%)?
    I promise you that when HTML5 gets out there, you will still get all the ads that annoy you except thay will be made with HTML5 because it is the designer that created the ads not flash or html and sadly they will continue to design the same way
    lastly …. You would rather learn HTML5 than Flash? So you don’t design at all?

    1. I’m sorry, but if you think “Safari” is the only browser supporting HTML 5, you’re really out of touch. If you think its not, and yet you’re criticizing the benefit of supporting HTML 5 by only pointing to Safari, you’re deliberating being deceptive… which is probably worse. Let’s instead do this. Let’s take all the browsers supporting many of the major HTML5 elements… like Firefox, Chrome, Safari, and Opera… combine that with the fact that the Webkit rendering engine (the basis of Chrome and Safari) is being used on the majority of mobile smartphones today (Android, Apple, Nokia, and soon RIM)… and you’ve got some major significance to HTML 5 support as an exposure vehicle. Combine that with the fact that IE 9 will support it, and IE as a whole, as recently dropped under 60% of browser marketshare. Then, carefully rethink your premise.

      1. Out of Touch or Deliberately Deceptive…. my my the choices.
        Well I’m sorry that you got that impression from my statement but the fact of the matter is that I’m excited for HTML5 to get here ……. but HTML4 is still the standard. So I don’t want to be premature and jump the gun just because “iPad” has arrived.

        The browsers are coming on line with HTML5 but that does not mean that they are being used.
        Many large companies do not upgrade to the latest browser because they want them proven before putting them in a working enviroment.

        The good news is that many of the browsers are good at keeping you update. Firefox and Opera are actively updated.
        Safari is updated every month or so but takes over your computer for 20 minutes while it downloads & install its entire program (and apple complains about have to install plugins?).
        Chrome I don’t know about… I’ve never seen it update.
        IE updates once every couple of years. IE9 BETA is out now but the release isn’t scheduled til the end of the year or start of next year and does not work on OS’s prior to Vista SP1…including XP… (I’ll bet that takes a chunk out of those numbers??)
        All in all I think I’m being realistic

  4. Safari still only counts for about 5% of total web trafic. Unless your are building for the smart phone mobile market which the iphone is pulling about 50% of the us us market share currently. Most will not notice or care. I am 50% mobile and 50% web. So build both is the only option for me. Until old partners stop thier technology pissing contests. It all still sucks!

  5. IE6 users still outnumber OSX, iPhone and iPad users combined. Especially in the corporate world.

    I’ll start worrying about how sites Apple’s newest plastic toys when my demographic upgrades to a browser that’s heard of html5… Probably another 10 years.

  6. About iPad Peek, you said: “too bad it doesn’t allow to see the website you want in a portrait mode.”

    Just click on the black frame —the top one above the url field— and the virtual iPad will change its orientation.

  7. One of the problems I find with the Flash thing is, though HTML5 will most likely be more prevalent in the future Flash is still majorly used. And because of that it seems like a bad idea to just not use Flash because “eventually” it wont be used.

    1. You should NOT simply avoid Flash. Just use it judiciously, like everyone should have always been doing. Ideally, if they have HTML 5, then you use that (or offer a choice to use it). If they only have Flash, then use Flash. If they do not have either, then you should NOT give them a broken page with a Flash button saying to download Flash. Give them a decent experience and a simple message at the bottom suggesting they upgrade their browser or install Flash.

  8. The iPad Peek does do a portrait mode: simply click on its borders (the black part of the iPad emulator) 😀

  9. Blah, this whole flash v html 5 debate has become completely stupid. HTML 5 is not a replacement for flash! or actionscripting or authorware, its just a way of displaying video in multiple formats with a few extra features thrown in, like buttons and linking. It might (might) replace flash video .flv files but not swf interactives, that is years away! till then we are stuck with flash and java. For godsake you can write html 5 video element tags right now… do search and see for yourself.

    Also iPad is not some new fangled way of viewing web pages, its just a lo tech dedicated hardware device almost exactly the same as an iPhone but without a camera or a usb port… so much rubbish talked on apples behalf, I think the ipad has a real market and is a very good solution for certain situations, but it does not replace anything! certainly not your laptop or even your high powered netbook and pretty soon they will be giving away all sorts of slate solutions with long battery lives to allow you free roaming net browsing and standard run of the mill ebook reading all at a far cheaper price than an ipad.. and yes…. telephone calls too! Flash is what it is, a development platform, vector animation and scripting language for interactive media, that’s all it ever was.

  10. If the ipad not support flash player, this not a “best” product…
    Alby from italy

  11. Nice post, i dont have a ipad i think its just a marketing product. There are better windows machines which use flash etc. I

  12. Is there a way to make our website feels the resolution of the screen or the device then according to that will choose the suitable CSS file ?

  13. I’m writing this on my iPad – it really is an outstanding device. Unless you truly experience it, you will tend to write it off as a “toy” or a “dumbed down machine”. It truly is not. I have been a ms windows user for twenty years… I started with my iPad two weeks ago almost to the day. I never boot up the pc at home anymore, and I use the iPad all day at work, as I have full exchange integration available to me.
    As to the html5 debate- please please do some deep research. I consider this forum of users a well informed group of people who are creating user experiences for web users around the world. Html5 is NOT just a way to display video without flash. It is a rich collection of tools that allow unprecedented interactivity to the browser- vector objects, browser to desktop activity, edit in place elements and so much more. Check out html5demos dot com for more info on that.
    I strongly urge all of you to keep well informed in this tech as it evolves, there is much more beneath the surface than it appears.

    Will

  14. Looks like HTML 5 is the best way to go for iPads but we should start rethinking how we navigate pages when desiging websites since every screen will be a touch screen in the next 2-5 years.
    This means more images as buttons, or bigger bolder text with good seperation for navigation menus. The touch era is here to stay and iPad is ushering it in even faster!

  15. Well Apple launched a war against flash. They want to sell their own products. Adobe themselves are not defending Flash. I like this article thanks for the info

  16. Apple thinks Flash is already a dinosaur and has no future. By my opinion it is the market that defines the ‘right of existence’ of a product or sofware technique. I think Apple executes whisfull thinking, hoping it becomes a fact in time. I’m affraid they will lose this discussion, in fact they already did.

    1. Not when the product or software technique is not appropriate or unwilling to change to meet the new market. Flash is a closed system that requires a heavy third party interpreter to deliver the payload. HTML5 is open and does not require this to achieve the exact same thing.

      1. The fact that you wrote your reply on your iPad Will,doesn’t make it true. What are we going to do while HTML5 or Java needs further development, no animation or other rich dynamic content on Apple products? Come on man!

        1. that’s not true – go read about HTML5 some more. It’s not just a single trick pony. HTML5 is a specification for video (H.264), vector animation (canvas), interactive logic (JavaScript) and layout (CSS/HTML). Not just video, as some think.

  17. Besides, if Apple can’t design and produce hardware that is not capable of reproducing Flash media, the technical state of processors etc is not sophisticated enough to produce and sell stuff like the iPad’s. But as always consumers are easy tempted in buying electronics that don’t comply with the promis. The HTC Touch Diamond mobile is a classic example, it is slow, using it is a disaster (Mobile windows 6.1) and battery’s are quickly worn out. So it is not only a complete failure as a product but also HTC is a liar for giving consumers the idea it can work wonders as a pocket pC.

    The same with this Apple stuff, don’t be fooled. Just wait a couple of years before buying gadgets like this.

    1. That’s like saying that if the car you purchase isn’t strong enough to haul 5 tons of bricks, it’s not a good car. Hauling 5 tons of bricks isn’t a need that everyone needs.

  18. If the rest of the market concists of cars that are capable of transporting 5 tons of briks, and yours can’t, your on the loosing side Will

  19. Hmmm, quite a discussion here… I think Jake has a point here. The example of the first HTC Touch Diamond (P3700) is realy striking. That phone also was introduced as a “fantastic this” and “amazing that”. It turned out to be a complete failure.

    Most irritating is that Apple have kept us waiting for a couple of years on the why and how on the missing Flash player issue in the iPhone. Now they claim suddenly that it absorbs to much resources, the same for the iPad. They knew this already years ago and probably could not find better battery’s or processors to build better hardware. Well i think they should have waited selling the iPhone and iPad, now other manufacturers have an easy task in offering hardware that offer what it promises. The best of both worlds: Flash and HTML5!

    I think Apple was a bit too fast with producing their gadgets, and also steeling NOKIA innovations for the iPhone (plus iPad).

  20. Apple will never allow Flash on their platform simply because it will undermine sales on the App Store. ie. why would you buy a silly little game when you can just play the same Flash one for free?

    In my opinion you’d be crazy to build a 100% Flash site in tis day and age – you deserve what you get going down that route.. do yourself a favour and learn some jQuery!

    The only place I really miss Flash on the iPhone is the video sites, and – when it gets here – HTML5 has the answer for that.. think consistent play controls, hardware accelerated video, etc..

    My only gripe is that Apple wields way too much power over what gets approved in the App Store – meaning there is little innovation in important areas of the device. eg. I am sure someone would have written a better podcast app.. you can’t even read the titles with iTunes! But Apple will never approve of such an app. Crazy!

    Will be interesting to see how long Apple can play the bully before the cheaper and open Android wins the race… All of this has happened before, and it will happen again. ;-P

  21. Bells and whistles guys, bells and whistles, here we are spending hours of our time on forums and ye gads without html5 or flash hindering our web experience…
    It’s remarkable really because the way some of you hear are talking you would think that without these technologies the internet would be void of any value. No one would want to spend anytime on the internet unless Flash or some other interactive wiz bang in your face graphical animation was there to hold our attention.

    The internet is many things to many people. A wonderful web experience is more about finding the information that you are interested in. It’s not going to be devastating for the vast majority of people who browse the web if they can’t see something because there browser needs to download a plug-in or dies not support something on a site or a site is not available to them because it has been designed in Flash. After all, there are hundreds if not thousands of websites out there for every topic conceivable… The big sites have more than one version of there site for various browsers so the end user can still get to the information they seek.

    You don’t need Flash or HTML5 to read my post, you just need an internet connection and a bog standard browser. And apparently even that new fangled device called the iPad allows you to see this page and read our posts, fabulous hay what!!!!

    The truth is you don’t need html5 or flash to have a great internet experience, do they improve the web experience? Yes I hear you say, but the lack of either does not stop you from getting the information you seek. As I pointed out before, there are thousands of websites for every topic conceivable with or without java, php, flash or html5.

    Don’t let yourself be fooled into thinking that there is only one way to skin a cat. Don’t get caught up in this very small minded Apple v Adobe corporate muscle power play.

    Don’t by an iPhone or an iPad, don’t by Adobe products don’t go out the front door you might fall over and scratch your knee.

    Now doesn’t it sound silly when someone states they are not going to buy a product because in there opinion the sky is falling? You only live once, if you want an iPhone or an iPad get one. If you like designing sites in Flash keep doing it.

    It’s a big world out there and the sky is not falling. Flash is going to be around for a long time to come. You should not really care that it is not available on a few hardware devices. Don’t buy them if it means that much to you.

    Millions of people will still access the web through these devises and thousands of website developers will design for these devises. It is not a war, really it isn’t. Not for you or I, we are just website developers and we design for love and money. If one of my clients want a Flash website, that’s what I will give them. If they want a website that is able to be browsed on an iPhone, iPad that is what I will design for them.

    For the most part we live in a free society, free to have our own opinion free to buy or not buy a product. Free to criticise, and be criticised.

    Where do I stand on the whole Flash and html5 debate? There is no need in my mind to worry about something that in the end does not stop you or I from being creative. The tools my change but creativity lives in our hearts and souls and not in the devises people may use to see our creations. Can’t see it on the iPad? look at it on your laptop or home computer…. These devises are everywhere, life goes on… design for both, or pick one. Your world will not come crashing down around you.

  22. Is this ‘harmonics’ as in third harmonics distortion? Or what?

    Thanks for your help in offering us enlighted insight! Your are totaly right! And now let’s get on with our lives…and forget about it.

  23. The iPad is not the first and even though it has captured peoples imagination for the time being there will be many more slate computer devises to follow over the next 5 years that will offer Flash browsing. Flash is not dead nor is html5. The market place is volatile, one year it’s this product then the next year it’s another…. I personally like the idea of an A4 ish size hand held touch screen. The more the merrier, bring it on I say.

    Let the conversation be about design in what ever your field of expertise. I love designing websites, I will keep an open mind and enjoy the ever changing world we live in.

    Yes Gerard… as in third harmonic distortion…

    To save those who may be interested time in google this is what third harmonic distortion is…

    Third harmonics distortion is the standard test used on analog magnetic tape recorders to determine the maximum output level, the second harmonic is difficult to hear because it reinforce the pitch of the fundamental. The third harmonic is easier to detect on pure tones. 🙂

Leave a Reply

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