Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
Peter Ng - The New iPad Perspective

Peter Ng - The New iPad Perspective

Ratings: (0)|Views: 157|Likes:
Ready to design for the iPad 3? Digitas' Peter Ng, VP of Technology & Mobile, takes us through the three new iPad features that you need to consider.
Ready to design for the iPad 3? Digitas' Peter Ng, VP of Technology & Mobile, takes us through the three new iPad features that you need to consider.

More info:

Published by: DigitasLBiPerspectives on Mar 27, 2012
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





The New iPad Perspective
Three New Features That You Need To Consider
Tablet and iPad Explosion
Tablet usage has exploded over the past couple of years. Consumers and enterprises alike havequickly embraced this technology. Retailers have reported that on average 21% of their mobiletraffic come from tablets, with several companies anecdotallyreporting figures north of 50%. Thetabletsphere, along with its app usage and website usage, must be given special considerations.Exponential growth is expected to continue over the coming years across major verticalsincluding retail, healthcare, entertainment, education, and publishing. By 2016,one in three Americansis expected to own a tablet. This means that the industry will have sold almost 293million tablets in 6 years from 2010 to 2016. This amount is enough to provide a tablet to theentire populations of Canada, Japan, and Mexico combined.
As of 2011, Apple owned a fair share of the tablet market, having soldover 55 million iPadsandcommanding73% of the total tablet market. Apple hopes their latest iPad, simply “the new iPad,”will help increase this dominance. Immediately after its announcement, more than half of currentiPad owners (56.7%) were planning to upgrade their current models and72% were planning buy 
this latest version. The new iPad features a list of upgrades and enhancements from previousiPad generations. The following are three key upgraded features and their considerations forapps and websites.
Higher Resolution
Retina Display
Apple has increased the resolution of the iPad to 2048 x 1536. This new retina-display quality isbetter than the HDTVs in most people’s homes. This almost lifelike and detailed display providesa great opportunity for brands to tell a much more visually stunning story with crisper illustrationsand finer graphical details.
What does this mean for existing apps and websites as well as upcoming opportunities? First off,all existing apps and websites
continue to work on the new iPad. No updates are required forthem to continue displaying on the first generation iPad or the iPad 2. Existing text willautomatically be upscaled to take advantage of the retina display. Existing images and graphicalelements, however, will now need careful consideration.Should all images be immediately updated to the higher resolution? A decision needs to be madebetween
beauty vs. performance
. High-quality images usually command a significant jump infile size. For example, Apple.com’s high-retina image of the iPad increased
from 111KBto 352KB. Consequently, converting all site or app images to high-retina versions can increasedownload time several folds and consume more of the monthly carrier-bandwidth allotment.Depending on the number of images, it’srecommended only key images should havehigh-resolution versions to minimize page weightand download time. Hero images and productimages will benefit most by having crisperresolution. Supporting images may not reap thesame visual benefits by having an increasedload time. Note that though the new iPads canleverage the faster AT&T and Verizon 4G LTEnetworks, it will not be available in all markets.Even in those markets, not all iPads will takeadvantage of the faster connection speeds.There are a couple of approaches in creating and displaying images on retina displays for iPadapps and websites.
1. Low and high resolutions of the same image 
The notion of
has been replaced with
on retina displays. Because ofautomatic pixel doubling on these displays, two pixels are now represented as one pointin the iPad universe. This representation allows for backwards compatibility with the non-retina-display resolution of 1024 x 768 pixels.
Image-editing software such as Adobe Photoshop has an option to create images forvarious display-pixel resolutions. This is a great tool to create retina and non-retinaimages. First, create the initial image in the iPad pixel resolution of non-retina displays at132 pixels per inch (ppi). Afterwards, double the resolution for the new iPad at 264 ppi tocreate the retina image. Naming the retina images with an @2x suffix, e.g.,header@2x.png, will allow it to be automatically rendered in apps with retina displays.Websites can leverage media queries to detect display characteristics and serveappropriate quality images. The advantage of this approach is finer control on the qualityand appearance for each version of the image.
2. High-resolution-image only and downscale 
Instead of creating low and high resolutions of the same image, create only the higher-quality retina images at the higher resolution of 264 ppi. Afterwards, programmaticallyscale the images down as needed for the non-retina version. The advantage of thisapproach is smaller file size in apps, as only one version of the images will be bundled.
Vector Graphics
Start considering the use of scalable vector graphics (SVG) where possible. Vector graphics arescalable and can efficiently adapt to different resolutions.
They are defined via mathematicalformulas that the browser interprets and resizes on the fly.There are no image distortions whenthe images are zoomed and expanded for retina displays. More importantly, file size will notincrease if the image size increases. SVGs can also be easily controlled and manipulated byCSS. They arenot, however, supported in all Web browsers. Notable is its incompatibility with IE7 and 8. It is recommended that SVG detection be used in these circumstances and alternativelower-quality images.
CSS can provide HTML effects such as rounded corners, gradients, and shadows. Thesetreatments are independent of the actual images. Instead, by relying on this approach, the sameeffects can be achieved programmatically and scaled seamlessly on retina displays.Consider responsive design to serve up the appropriate higher and lower-resolution images. Thistechnique migrates from the philosophy of fixed-width elements and page design to auto-adjusting layouts and characteristics. CSS3 media queries are an essential part of responsivedesign and help apply appropriate styling effectively and quickly. As mentioned above, mediaqueries can detect the type of device and serve the appropriate images and styling.One example is the popular pixel-ratio query which helps identify high-retina displays, such as theiPhone 4/4S and the new iPad in this example:
@media only screen and (-webkit-min-device-pixel-ratio: 2) and(min-device-width: 1536px) and (max-device-width: 2048px)
By targeting these specific retina devices, appropriate images and styles can be served. Onlymodern browsers support CSS3 andmedia queries. For other browsers, additional stylesheets orconditional treatments might be required to handle the serving of standard images.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->