There's a new trend sweeping through our gadgets and computers these days: exceptionally fine, detailed screens. Maybe you've heard about them, such as Apple's Retina displays. Maybe you've seen them. Perhaps you even own one. For those who have used a pixel-dense display, you'll understand what all the excitement is about. They're the HDTVs of the portable world, packing extra detail into a more lifelike picture.
Whether you've got a smartphone, tablet or computer screen designed to be high-PPI (Pixels Per Inch, how many dots of color fit across an inch of a display), the experience is unparalleled. Textures and buttons look real. Text is better than print media. Images feel like professional film-based photographs. Video is so sharp, it's as if the screen isn't even there. Bloggers are so enamored, they run out of hyperbolic analogies to make. With several times (usually 4x) as many pixels packed into the same amount of space, it's easy to understand why: details are approaching the limits of what the human eye can even see.
A couple years ago, it seemed like these gorgeous screens would mostly be limited to smartphones. It wasn’t long before tablets started to get high-PPI displays, meeting or exceeding the detail level of top-end HDTVs. Just two weeks ago, Apple announced a similar update to their high-end laptop line, vastly increasing the amount of detail their screens can display. It's hard to believe that other computer manufacturers won't join the movement in coming months.
Of course, such fine hardware is wasted if you don't have good content to view on it. You wouldn't get an HDTV just to watch old VHS tapes, so why would you get a phone with a shiny new pixel-dense screen and just look at blurry pictures? The problem is especially bad for websites. When a site isn't built to take advantage of high-PPI screens (almost always), you end up with crisp text surrounded by fuzzy navigation, blurry buttons, and pixelated photos. It's like a constant reminder of the clarity which is possible, and could be there, but isn't. And that's just a shame. A website which can leverage the advantages of a high-detail display has a great opportunity to stand out, as does any service, product, or piece of content it might feature.
Here at Rise, we've got many fine displays at our fingertips (literally! Gotta love touchscreens). On our personal quest to make our own website mobile-friendly, we've been pushing our skills to new limits so we can use every last pixel on our smartphones. The results, we think you'll agree, were well worth the learning curve. If you haven't done so already, we invite you pull up rise.net on your smartphone or tablet of choice. Don't worry, we'll wait.
Now we'd like to pass some of our knowledge on to you. The next time we visit your sites on our mobile devices, we want them to be every bit as crisp as ours. In the spirit of learning and sharing, which we're all about, here are the top 3 things you can do to make your site play nicely on new, pixel-dense screens.
Keep background images to a minimum.
Try to avoid using images as background images for parts of your website--buttons, tabs, etc. These are the prime offenders which introduce blurriness on mobile sites to begin with, so the fewer you have, the better. This doesn't mean you need a minimalistic design without any graphics--just lean on CSS borders, rounded corners, gradients, and shadows to make your graphic elements. This is highly recommended for making sites which are mobile-friendly and easy to update, anyway.
When you do need background images, make high-resolution versions.
Using CSS, it's possible to detect when a user has a high-PPI screen, and target them specifically with different background images. When you absolutely have to use a background image, whether it's for a texture or any other custom graphic, make a more-detailed version at a higher resolution and use the CSS "background-size" property to draw the background at the normal size. Detailed background images result.
For regular images and thumbnails, go big or go home.
There was a time when a high-resolution image, resized in the web browser to be the size of a postage stamp, was a sign of an amateur web designer (and most of the time, it still is). But if you're targeting pixel-dense displays, that's exactly what you want to do. Just like with background images, you want to make inline images twice as large as normal and resize them with CSS. Your users will thank you, as long as you're careful about keeping file sizes reasonable.
This exciting new world of superfine displays and crisp graphics is just now getting speed, which makes it the perfect time to start leveraging it with your websites. As always, we're happy to help you bring this sort of thing to your website if the technical details are a bit out of your comfort zone.
