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. Utilize software testing tools to test multiple browsers and automate your process. 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?
