This action might not be possible to undo. Are you sure you want to continue?
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 have quickly embraced this technology. Retailers have reported that on average 21% of their mobile traffic come from tablets, with several companies anecdotally reporting figures north of 50%. The tabletsphere, 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 verticals including retail, healthcare, entertainment, education, and publishing. By 2016, one in three Americans is expected to own a tablet. This means that the industry will have sold almost 293 million tablets in 6 years from 2010 to 2016. This amount is enough to provide a tablet to the entire populations of Canada, Japan, and Mexico combined.
As of 2011, Apple owned a fair share of the tablet market, having sold over 55 million iPads and commanding 73% 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 current iPad owners (56.7%) were planning to upgrade their current models and 72% were planning buy this latest version. The new iPad features a list of upgrades and enhancements from previous iPad generations. The following are three key upgraded features and their considerations for apps and websites.
Retina Display Apple has increased the resolution of the iPad to 2048 x 1536. This new retina-display quality is better than the HDTVs in most people’s homes. This almost lifelike and detailed display provides a great opportunity for brands to tell a much more visually stunning story with crisper illustrations and finer graphical details.
What does this mean for existing apps and websites as well as upcoming opportunities? First off, all existing apps and websites will continue to work on the new iPad. No updates are required for them to continue displaying on the first generation iPad or the iPad 2. Existing text will automatically be upscaled to take advantage of the retina display. Existing images and graphical elements, however, will now need careful consideration. Should all images be immediately updated to the higher resolution? A decision needs to be made between beauty vs. performance. High-quality images usually command a significant jump in file size. For example, Apple.com’s high-retina image of the iPad increased 300+% from 111KB to 352KB. Consequently, converting all site or app images to high-retina versions can increase download time several folds and consume more of the monthly carrier-bandwidth allotment. Depending on the number of images, it’s recommended only key images should have high-resolution versions to minimize page weight and download time. Hero images and product images will benefit most by having crisper resolution. Supporting images may not reap the same visual benefits by having an increased load time. Note that though the new iPads can leverage the faster AT&T and Verizon 4G LTE networks, it will not be available in all markets. Even in those markets, not all iPads will take advantage of the faster connection speeds. There are a couple of approaches in creating and displaying images on retina displays for iPad apps and websites. 1. Low and high resolutions of the same image The notion of pixels has been replaced with points on retina displays. Because of automatic pixel doubling on these displays, two pixels are now represented as one point in the iPad universe. This representation allows for backwards compatibility with the nonretina-display resolution of 1024 x 768 pixels.
Image-editing software such as Adobe Photoshop has an option to create images for various display-pixel resolutions. This is a great tool to create retina and non-retina images. First, create the initial image in the iPad pixel resolution of non-retina displays at 132 pixels per inch (ppi). Afterwards, double the resolution for the new iPad at 264 ppi to create the retina image. Naming the retina images with an @2x suffix, e.g., firstname.lastname@example.org, will allow it to be automatically rendered in apps with retina displays. Websites can leverage media queries to detect display characteristics and serve appropriate quality images. The advantage of this approach is finer control on the quality and 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 higherquality retina images at the higher resolution of 264 ppi. Afterwards, programmatically scale the images down as needed for the non-retina version. The advantage of this approach 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 are scalable and can efficiently adapt to different resolutions. They are defined via mathematical formulas that the browser interprets and resizes on the fly. There are no image distortions when the images are zoomed and expanded for retina displays. More importantly, file size will not increase if the image size increases. SVGs can also be easily controlled and manipulated by CSS. They are not, however, supported in all Web browsers. Notable is its incompatibility with IE 7 and 8. It is recommended that SVG detection be used in these circumstances and alternative lower-quality images. CSS3 CSS can provide HTML effects such as rounded corners, gradients, and shadows. These treatments are independent of the actual images. Instead, by relying on this approach, the same effects can be achieved programmatically and scaled seamlessly on retina displays. Consider responsive design to serve up the appropriate higher and lower-resolution images. This technique migrates from the philosophy of fixed-width elements and page design to autoadjusting layouts and characteristics. CSS3 media queries are an essential part of responsive design and help apply appropriate styling effectively and quickly. As mentioned above, media queries 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 the iPhone 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. Only modern browsers support CSS3 and media queries. For other browsers, additional stylesheets or conditional treatments might be required to handle the serving of standard images.
The new iPad is Apple’s first true 4G LTE device. AT&T and Verizon versions are available at launch. Actual speeds will definitely vary depending on your location and where you frequently use your iPad. They can range anywhere from 10 to 20 times current mobile 3G connections. In fact, the 4G LTE wireless connections are faster than most home cable wired connections. There are several specific considerations. 1. Not all iPads will be running on 4G LTE. If iPad 2 productions are any indication, Apple still expects a large percentage of sales on Wi-Fi–only models. Consider the extra time needed to download a complete set of high-resolution images for your website or app. Users may not have the patience and abandon your app download or website all together. This is one reason why Apple might have increased the 20MB over-the-air download limit to 50MB. In addition, the 4G LTE is only being rolled out in select cities. It does not yet have national coverage. 2. Most users have a limited, tiered data plan. They range from AT&T’s 250MB plan for $14.99 to Verizon’s 10GB for $80.00. (Unlimited plans are no longer available for new subscribers.) The latter plan only allows users to view about four hours of Netflix HD content and visit several websites before reaching the 4G LTE data limit for the whole month. If retina-display images and streaming-video viewing become commonplace, these data limits can be reached very quickly.
Apple has increased the rear-camera resolution to five megapixels with automatic image stabilization. It is now on par with the iPhone 4’s rear-facing camera in terms of quality. The camera also has the ability to record 1080p-quality videos. Sadly, the new iPad’s front-facing camera remains VGA quality. Native apps should consider these rear-camera upgrades when designing or upgrading features and functionalities. Mobile Web and HTML5 sites do not yet have standardized access to camera features.
The new iPad is a stunning device for brands to tell their story. However, upgrading to highquality retina images must be made with careful considerations. Websites and apps that are textheavy have fewer concerns and will automatically scale. Updating image-heavy websites or apps can increase file size and download times. Modern development techniques with vector graphics and responsive design should be considered when possible, especially if mobile and tablets are the first screens for design.
Contact For More Information
Peter C. Ng, VP/Director, Technology & Mobile, Digitas email@example.com
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue listening from where you left off, or restart the preview.