<http://schema.org/articleBody>
"\u2028Designers 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. \nBut while the new resolution affords stunning, visual experiences, the devices often require 4G Internet speeds, which aren't available to everyone.\u00A0Furthermore, designers are questioning how to start multi-screen projects in the first place. \u00A0\nWhether publishing digital content or building rich media display advertising, try these five tips.\u2028\u2028\n1. If Designing for Multiple Devices, Start with the iPad.\nAlthough 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.\u00A0\nStart 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.\u2028\u2028\n2. Use Web Fonts.\nWeb 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.\u2028\u2028\nCombine the web fonts with shading and masks for high-res, customizable results.\u00A0This font example looks like a hand-painted sign on your new iPad. Access these fonts from various vendors, like Typekit.\u2028\u2028\nOr 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.\u2028\u2028\n3. Use CSS Instead of PNGs.\n\u2028\u2028Web technologies like HTML5 and CSS3 help optimize high-resolution displays in a bandwidth-friendly way.\u00A0Use progressive enhancement to mark up the content; that way, it will still look decent on browsers that don\u2019t fully support the feature. Then, take advantage of colors, rounded corners, gradients and opacity to create common graphic elements. Don\u2019t resort to PNGs for shape-based needs, such as buttons, lines, corners and tabs.\u00A0It either won\u2019t look crisp, or it will cost many more kilobytes than it's worth.\u2028\u2028\n4. Use a CSS Media Selector to Deliver Correctly Sized Images.\n\u2028\u2028When 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.\u2028\u2028\n5.\u00A0Borrow Some Tricks from Game Designers.\nMaking high-res graphics efficient is not new to game design.\u00A0Common game development techniques, like texture maps or sprite maps, can be the best approach for your content on high-res mobile screens. \nWith 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 \u2014 as is often the case when designing rich media advertisements or entertainment content \u2014 bandwidth and display performance improves.\u2028\u2028\nAll 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."^^<http://www.w3.org/2001/XMLSchema#string>
<http://mashable.com/2012/03/19/hi-res-content-for-ipad/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+mashable%2Fmobile+%28Mashable+%C2%BB+Mobile%29>