Barry Saunders explains how designers and developers can lessen the impact of mobile data limitations when producing high-quality graphics for Retina displays.
In the previous article, we walked through the issues that are going to arise for web developers and designers as Retina devices become more popular on phones, tablets, and computers.
For iOS app developers, it's relatively trivial to support Retina displays by creating 300dpi imagery alongside standard imagery, and pointing to it with an @2x modifier. However, in some cases that will make the app five times as large. If your app doesn't use a lot of imagery, and doesn't have regular updates, then this will probably suffice to make your app Retina ready. Bear in mind that if your app goes over 20MB, users won't be able to download it on a 3G connection.
If your app does have a lot of imagery, you're going to come up against a number of issues. The limited background processing capabilities of iOS tablets are already causing consumption bottlenecks for shovelware magazine apps that try to replicate the static magazine experience. Updating these apps to support @2x imagery will blow out the file sizes massively, and the user experience will suffer.
If your app is a magazine-stye app, with a focus on content consumption, then you're be better off taking design cues from apps like Flipboard and Instapaper. These apps provide a quality user experience with substantially lower data usage. They do this by separating text and imagery from hard typesetting (think the PDF approach of many magazine apps) and using the app's functionality to create a readable layout and a magazine feel. The trade-off is that the content conforms to the app's design, rather than the content provider's. That said, if you're designing an app for a specific magazine or publication, there's no reason why you can't design your app to replicate the look and feel of that publication. It just means that you can't do it by exporting a PDF and uploading it to your app.
To deal with these issues on the web, web designers will need to start adopting responsive design or similar, and start delivering logos, gradients, progress indicators, and non-photographic imagery with vectors and CSS3. Much of what is currently delivered in image files can be delivered with careful use of CSS, massively reducing the size of the web page.
Responsive approaches can reduce the file size and latency (and therefore load times) for the majority of websites. Brand sites, blogs, financial websites, and web services can all benefit from this approach.
An additional benefit of this approach is that using responsive design will allow you to create a quality tablet experience without needing to create a separate tablet site.
If your website delivers a lot of photography or video, then we need to figure out how to find a balance between the resolution and the bandwidth. Delivering high-resolution photography and video takes a lot of bandwidth.
Both of these issues require an approach that accounts for user bandwidth, as well as browser/device detection. At this point, media queries don't support bandwidth detection, so an approach that combines media queries and server side components will help to mitigate this.
Server side components, such as bandwidth detection, can help the site to deliver content at the correct bandwidth, while the responsive design will ensure that the site displays correctly.
And because you've moved a lot of your imagery into vectors and CSS, you've freed up a bit more bandwidth, and your site feels faster!
Barry Saunders is a UX Architect.