Creating Graphics for Device-Specific Experiences
It’s no secret that today’s consumers shop using a multitude of devices. From phones to tablets to desktops, brands need to deliver a seamless digital shopping experience or risk being left behind.
To deliver the experiences shoppers demand, brands are implementing bigger and bolder graphics and content on their sites. The challenge that site designers face, however, is getting these graphic assets to display as designed across all the devices people are using to shop.
The sheer number of different devices and screen sizes on the market today makes creating one set of perfectly sized graphics virtually impossible. Add in budget and deadline restrictions, and the situation becomes even grimmer. How, then, can designers win this battle?
Advanced Display Technology
Advanced display technology, found in Apple’s Retina screens, for example, affects how images are displayed. Retina screens display graphics at a higher pixel density compared to standard screens, ensuring text and images are as sharp as possible.
Pixel density is the number of pixels displayed at a fixed distance, whereas resolution refers to the total number of pixels across the height and width of a screen. Any device with a density of more than 200 pixels per inch (ppi, also called dpi) is considered High DPI.
In case you need a helpful guide to these technical terms, I’ve laid out some key subjects below:
- Device Pixel is the smallest physical unit displayed.
- Pixel Density is the number of pixels displayed at a fixed distance.
- Resolution is the number of pixels across the entire width or height of a device.
- Pixels per Inch, ppi or dpi, is the number of pixels divided across the physical width of the display by the number of horizontal pixels displayed.
- High DPI is a display density of 200 pixels per inch or greater.
Now, these Advanced Display Technology screens leave designers with the task of optimizing graphics for both High-DPI and Standard displays. This adds extra cost, time, and effort to projects that often can’t spare the resources. Furthermore, customers demand the streamlined digital experiences made possible by this extra effort, putting designers and brands in a difficult position.
Helpful Tools: Scaling Factors and Export Scripts
Fear not, there are some promising solutions available to rectify wasteful duplication. Adobe Photoshop has a tool called Generator that allows designers to create graphic assets in real-time as they work. Essentially, this eliminates the tedious process of copying, slicing, and exporting layers manually. For Retina displays, this tool adds in scaling factors, so your graphics can be transformed and optimized regardless of screen size or pixel density.
Designers can write commands directly in the layers to export image properties like file format, compression, and output scale. Further, this can be done to multiple graphics at a time.
Export Scripts
Outside of Adobe’s tools, there are plenty of custom Photoshop scripts that export graphics and optimize them for Retina displays. Designers don’t have as much versatility as with Photoshop’s Generate tool but these will work.
These export scripts can be a bit limiting, but if you know the exact specs of what is needed, a script can be found to help accomplish it. This one in particular exports the document to a PNG at 2X and 3X and creates a Retina folder. Understanding what treatment your graphics need is critical to finding the right script for the job.
All in all, the technology behind displays and their image quality is only improving. Consumers are snapping up these new devices, and using them to shop online. Already a requirement, brands need to develop their content to be pixel-perfect no matter what device is being used to browse their store and site, and this puts a heavy burden on today’s designers. Understanding how to efficiently generate assets for a variety of displays is a key part of the visually engaging experiences that spell success in today’s digital world.
