MOOSYLVANIA. Independent Digital Agency.

MOOSYLVANIA
News

According to a recent study, 2% of all web traffic will come through the iPad in North America in 2011. If you are in the process of updating your website design, it’s a good time to start thinking about what you can do to improve your web experience for iPad users – especially since many of the guidelines for designing for an iPad are similar to the guidelines for any website design project.

The following are general  guidelines for improving your iPad users’ experience on your website — I would recommend against designing your website specifically for the iPad, because you might end up alienating the other 98% of web traffic. But, keep these iPad usability elements in mind when designing your website.

Navigation


iPad users are clicking with their finger, not a cursor – so keeping the most commonly used element on a website, the navigation, usable is very important. Make the clickable area of your navigation as large as possible and avoid putting navigation links too close together.  If the user has to zoom in to use your navigation, they will likely not feel comfortable clicking through your site and will leave quickly.

Also be sure to fully test your navigation system on the iPad if you are using drop-down style menus. These menus are meant to help the user find information quickly – if they don’t work on the iPad then they are not serving your user.

Buttons


Website users like big buttons, iPad users like them even more. For common button type elements on a website, such as Read More, Next Page, Search, Submit, and Buy make the button large enough to be clicked easily, and keep it adequately spaced from other items as much as possible.

Copy


Reading large amounts of copy on the web is more difficult on the iPad, especially at small sizes. Be sure to use an adequate font size (at least 12px) and break up content as much as possible using paragraphs and section titles when designing your website.

Photography and Video


iPad users love photographs and video – if you have the opportunity to present stand along images and videos that can be clicked to enlarge, take advantage of it. Test and test again to make sure your photos zoom and videos play correctly when clicked.

Avoid Flash


The iPad does not support Flash, avoid using Flash for your website navigation at all costs. Flash Video is also not supported on the iPad – so if you have Flash video on your site now upload it to YouTube or Vimeo and replace your Flash video.

Test Javascript


Almost all websites use Javascript in some way – it might be used on your homepage to power your scrolling banner, to validate your contact form before it is submitted, or to display a popup dialog when a user is signing in to your site. Be sure to check all instance where javascript is used to make sure it works on the iPad.

Design for the Optimal Screen Resolution


20% of ALL web users are browsing on a 1024 wide by 768 high pixel screen – which also happens to be the screen size of the iPad. Modern websites are usually designed for a 1024px wide screen, so this shouldn’t be an issue for most new web designs, but compatibility with the iPad is another reason to optimize for this screen resolution.

Keep in mind, you don’t have all 1024 pixels to work with – your website should use a grid system around 960 pixels wide – for more on that checkout 960.gs

Other Resources


So now you know some things to look out for – here are some additional resources that you might find useful:

  • Don’t have an iPad? You can still get a general idea of how your website will look on the iPad. However, for optimizations like navigation and button size, nothing can replace testing the experience on the device itself.
  • iA (Information Architects) has an in-depth article on design and user experience on the iPad.
  • Apple has a list of “iPad ready websites”, claiming these are sites that “take advantage of (the) web standards to deliver content that looks and functions beautifully on iPad”.

Related Posts:

Starting a Website Design Project? How to Prep

Website Design by the Numbers: Homepages of the Fortune 500

 

SUBSCRIBE TO THE MOOSELETTER
THANK YOU FOR SUBSCRIBING!