The iPad. The most killing word on everyone’s lips lately… This newest mobile computing device (a.k.a. Apple Tablet) claims to revolutionize how we consume the web content. Boldly enough, however let’s admit that this tablet has a huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.
But what do they need to do when designing pages to perform on this interesting Apple’s 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 1024×768 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.
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 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. When 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 portrait encourage 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 go. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its turn makes it very natural 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 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 well 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; 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 a pop it over in portrait mode. And don’t fall over filling the space since 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 more big, 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 potential for a richer, more textured interaction will cause traditional navigation bars 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 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 adopted 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.
No comments:
Post a Comment