Designers and developers who create content for mobile devices with high-resolution screens often see the retina display as both a blessing and a curse. For instance, the new iPad, with its 2,048 x 1,536-pixel resolution, has a million more pixels than your 1080p HD television.
But while the new resolution affords stunning, visual experiences, the devices often require 4G Internet speeds, which aren’t available to everyone. Furthermore, designers are questioning how to start multi-screen projects in the first place.
Whether publishing digital content or building rich media display advertising, try these five tips.
1. If Designing for Multiple Devices, Start with the iPad.
Although historically the order of creating digital content has been desktop first, smartphone second, tablet third, you will need to port experiences to all screens eventually. Therefore, reverse the order and start with the highest resolution screen and the most interactive platform.
Start with the iPad, the device that can handle the best interactive ingredients in terms of features and resolution. Then, revise the idea when porting to more limited devices, like desktops, smart TVs, smartphones and less advanced tablets. This ensures the content will be optimized to its fullest extent on every device.
2. Use Web Fonts.
Web fonts allow you to use almost any font without having to render it as an image first. Download the font separately and render the text in the browser using the @font-face feature. This saves a lot of bandwidth on high-resolution screens.
Combine the web fonts with shading and masks for high-res, customizable results. This font example looks like a hand-painted sign on your new iPad. Access these fonts from various vendors, like Typekit.
Or apply compression technologies to an image that would normally create unwanted artifacts on your text. By keeping the text separate and using web fonts for design, you will always produce crisp, readable content.
3. Use CSS Instead of PNGs.
Web technologies like HTML5 and CSS3 help optimize high-resolution displays in a bandwidth-friendly way. Use progressive enhancement to mark up the content; that way, it will still look decent on browsers that don’t fully support the feature. Then, take advantage of colors, rounded corners, gradients and opacity to create common graphic elements. Don’t resort to PNGs for shape-based needs, such as buttons, lines, corners and tabs. It either won’t look crisp, or it will cost many more kilobytes than it’s worth.
4. Use a CSS Media Selector to Deliver Correctly Sized Images.
When creating photos and graphics to port across devices, try using a responsive design approach that scales content to the size of the canvas or browser window. Some JavaScript techniques allow you to download a high-resolution image, but may actually add weight to the page. Instead, try the CSS @media selector to download a photo sized specifically for the device.
5. Borrow Some Tricks from Game Designers.
Making high-res graphics efficient is not new to game design. Common game development techniques, like texture maps or sprite maps, can be the best approach for your content on high-res mobile screens.
With these techniques, the designer puts many images and backgrounds in one single larger image to avoid downloading and drawing multiple images. Especially when dealing with animations or backgrounds — as is often the case when designing rich media advertisements or entertainment content — bandwidth and display performance improves.
All of these techniques have been valid and viable for awhile now. However, with the advent of high-resolution mobile devices, these optimizations are even more necessary. The high pixel density revolution is forcing designers and interactive developers to save bandwidth by advancing the sophistication of their markups.
Source: http://mashable.com/2012/03/19/hi-res-content-for-ipad/
0 komentar:
Post a Comment