Feature
Post

Category
Design


Designing Websites for the iPad

Whatever you personally think of Apple’s iPad, the thing will probably sell like hotcakes. And with wi-fi web browsing as its main feature, you want the sites you design to look great on the iPad’s browser. If they look okay on iPhone screens, just “okay” won’t cut it anymore- not with the large screen on the iPad. Here, some things to keep in mind for iPad-friendly web design:

Fluidity & Flexibility is important.

The iPad has a screen resolution of 1024 by 768- so if you, like most of us, have been designing with 960 pixels (or the 960 grid system), you should be fine. However, it’s important to note that the iPad can and will show your website in both portrait and landscape modes automatically- so having some fluidity or flexibility is a good idea. The multi-touch screen means that visitors will probably put your design to work, pinching and zooming and so forth.

Good Contrast and White Space is important.

Remember: it’s a touch screen. That means people will be interacting with their fingers. Some of these fingers are large- which is why it’s so important to make your clickable links as clear as possible. And use white space wisely- don’t group a bunch of tiny links together. They might be easy to click on with a mouse pointer, not so much with the tip of your finger.

Flash is less important.

The iPad doesn’t support Flash, and probably won’t anytime soon. Create less elements that are wholly dependent on Flash (and hey! We have tips for you!)

Testing is important.

Test, test, test. Until you get yourself an iPad, testing on an iPhone browser or on Safari in OSX is always a good idea. Test that your XHTML and CSS is valid, test whether javascript is supported, and so on.

How important do you think web design for iPads is?


  1. By scottish media posted on February 11, 2010 at 9:53 am
    Want an avatar? Get a gravatar! • You can link to this comment

    What is it with apple being so against flash ? same with the iPhone, this technology screams for the use of flash to me, that full page harry potter style newspaper, with moving images, cool usable interactive interfaces…. stuff like the murder finder from the film minority report….

    I think there limiting its UI by keeping flash out, yes if it was opened up you would get those adverts we all loath but flash is so much more than that now.

    Just my opinion though.

    John

  2. By Victoria Blount posted on February 11, 2010 at 10:18 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I think designing for the latest generation of technology is important, maybe not to dedicate the design completely to it, but just to bear things in mind, like the Ipad not supporting flash and the ability to view a site portrait as well as landscape.

  3. By Ryan posted on February 17, 2010 at 12:43 am
    Want an avatar? Get a gravatar! • You can link to this comment

    If you want to do fancy things in portrait and landscape you can use CSS3 media queries to detect screen size, the iPhone already supports this (and is guaranteed on the iPad as it uses the iPhone OS).

    I used CSS3 media queries on my portfolio, http://www.ryanseddon.com, to change the layout when viewed on an iPhone as well as changing the layout depending which orientation the phone is in.

  4. By Lorraine Nepomuceno posted on February 17, 2010 at 6:24 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Ryan, I like your site. Looks great on my browser.

  5. By Jason Grant posted on February 18, 2010 at 12:22 am
    Want an avatar? Get a gravatar! • You can link to this comment

    iPad is as important as any other device people (will be) accessing Internet with.

    What’s not clear in this article is whether iPad is 1024px wide in landscape or portrait mode? If it is 1024px in landscape mode, then surely 960px width won’t really do properly for optimal experience?

  6. By Chris Thurman posted on February 18, 2010 at 2:40 am
    Want an avatar? Get a gravatar! • You can link to this comment

    It will be interesting to see how the fluidity affects the design of sites. I’ve seen some talk of completely separate layouts depending on the perspective. It may have just made our jobs as designers a little bit harder. Great post!

  7. By Peter Cooper posted on February 18, 2010 at 2:43 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Jason: I can’t share too much due to the NDA of being a registered iPhone/iPad developer, but the iPad SDK comes with a simulator that includes Safari. In testing, I’ve found that most 1024-width sites render fine even in portrait, despite the horizontal resolution being 768. Apple are doing some clever scaling that’s actually quite tricky to notice at first.

  8. By Jason Aswell posted on February 18, 2010 at 2:43 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @ jason

    that last part of your comment about 1024px is one of the stpidest things i’ve read lately.

    just sayin’

  9. By Peter Cooper posted on February 18, 2010 at 2:45 am
    Want an avatar? Get a gravatar! • You can link to this comment

    For what it’s worth, I just tested this page on the iPad simulator and it looks good. All scaled properly. I tried Ryan Seddon’s portfolio above and the result was major horizontal scroll – no scaling at all there it seems.

  10. By Greg posted on February 18, 2010 at 2:57 am
    Want an avatar? Get a gravatar! • You can link to this comment

    The fact that the iPad can be viewed either in landscape or portrait with a quick physical rotation means that you DON’T actually have to design for both. 960px wide will be just fine, fluid or not. If the person viewing your site has to scroll horizontally while viewing in portrait orientation, they’ll figure it out almost immediately that viewing in landscape will be optimal.

    Designing FOR the iPad is a mistake. Designing something that will remain iPad friendly is not. And 960px wide is iPad friendly enough for rock-n-roll.

  11. By Hector Lee posted on February 18, 2010 at 3:04 am
    Want an avatar? Get a gravatar! • You can link to this comment

    With Apple not supporting Flash. It challenges designers/developers to push the limits of what they have and be creative with their work.

  12. By Nathan Pope posted on February 18, 2010 at 3:32 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I think designing for the ipad is very important. It is bound to be widely accepted groundbreaking device.

  13. By Preston posted on February 18, 2010 at 3:35 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Excellent Post. Thanks for sharing your thoughts on the issue. Your readers might also enjoy this:

    “Will the iPad change the way YOU design?”

    It’s a great addition to the conversation. Anyway… here’s the link.
    http://graphicdesignblender.com/will-the-apple-ipad-change-how-you-design

    Thanks for sharing.

  14. By Brad Landers posted on February 18, 2010 at 4:25 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Some more to add to the list:

    There is no ‘hover’, so things like drop down menus that require a user to mouse over them won’t work.

    There is no drag and drop. When a user touches the screen, the event is registered as a click. If they touch and drag, the browser captures the event and uses it to reposition the page on the screen. This is equivalent to “scrolling” to use a desktop metaphor. No click event reaches the DOM.

  15. By kay posted on February 18, 2010 at 4:42 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Does anyone know what the user agent will be? iPad?

  16. By Matthew Frederick posted on February 18, 2010 at 5:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s worth considering that Apple’s Human Interface Guidelines suggest a minimum tapping target size of 44 pixels in both dimensions.

  17. By v-render posted on February 18, 2010 at 7:15 am
    Want an avatar? Get a gravatar! • You can link to this comment

    great tips and overview here..
    i think designing specially for some device is not a good idea but like mobile version we can keep these tips in mind for ipad. Not using flash just because ipad doesn’t support is bad idea. As we treat IE6, 7 same way ipad is lagging in flash rendering so we dont care if your browser supports it or not. Adding specific CSS for each device type is also impossible and time consuming. so Putting note on website for best viewing or putting optional css is good idea on this.

    Now a days, we are moving to open platform of operating system and we want it to happen. As per my reading on net, people want services not the operating system. so we do not design for any os as website is concerned. but every big company is trying to create their monopoly and keep users bound with them. so its getting tougher.
    quiet a big note but a personal opinion. :)

  18. By Tom posted on February 18, 2010 at 9:20 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Jason, you can probably answer that question regarding whether the iPad is 1024px wide or high yourself. The device itself really gives it away ;)

  19. By Calgary Web Design posted on February 26, 2010 at 1:53 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I was a bit surprised to see your article given that the launch is still a way aways – but those who are ahead of the curve can be those who define the next era of web design. Thanks for the food for thought.

  20. TrackbackSome links for light reading (16/02/10) | Max Design