How To Prepare for The High-Resolution Web

How To Prepare for The High-Resolution Web

Whether we’re ready or not, the future of the web is going to be in High Definition. However, by following a few simple techniques, you can future-proof your web designs today.

iOS, iPad and Skeuomorph Interface DesignIt’s been predicted for years now, but recently we are starting to see things really change. So, what is the HD web exactly?

Well, simply put, we’ve now reached the stage in display technology development, where we are seeing huge increases in the pixel density resolution of mobile and computer screens.

Much like the introduction of HD TV, these increases are huge jumps from anything we've ever seen before, and there will undoubtably be a crossover phase for web designers and developers. During this phase we will need to adjust how we produce our web designs, to ultimately create an overall better experience for all web users in the future.

Pixels Per Inch

Here is a little background information on PPI (pixels per inch, not payment protection insurance). Dispelling common myths, and defining what PPI actually means for design on the web, and in relation to screen resolution.


PPI Myths & Facts

Currently, almost every image that you find on the web is 72 ppi. And there are all sorts of myths as to why the number 72 was chosen to be the standard ppi for screen.

Some web users used to actually think that it made their images un-printable, because printed images should ideally over 300 ppi. But of course, the far more popular myth, is that all computer screens are 72ppi.

The truth however is that neither of those statements are true. In fact it doesn’t actually matter in the slightest what pixel density you use for images on screen. The ppi value is only relevant when creating images for print. The only value that matters on screen is the actual width by height resolution of the image.

For example a 200 x 200 pixels image at 72ppi, 150ppi, and 300ppi will all display exactly the same on the web. And a 3000 x 2000 72ppi image will be much more printable than a 300 x 200 72ppi image.

Also, almost all computer screens are now in excess of 100 ppi, not 72ppi as they are widely considered to be.

How to 'Future Proof' Your Web Design.

So, the HD web is essentially the result of a huge increase in pixel densities on devices that browse the web. For example what we have seen with the Retina displays on the iPhone and iPad. And to take full advantage of this, designers and developers need to do a few things.

iOS app designers and developers have their own method of dealing with the doubling in screen resolutions on the iPhone and new iPad. It’s certainly not painless, but it is quite simple: Include high resolution versions of all images in your app and append '@2x' to the filename. Doing this one thing automatically makes your app HD, and displays the '@2x' versions of images on Retina displays.

But it‘s not so simple on the web, we aren’t targeting just one or two devices. A whole plethora of devices can browse the internet, but as of yet designers are doing very little to fully prepare for the future. However, by following a few simple techniques, you can future-proof your web designs today!

Resolution-Responsive Techniques

So, without further a-do. Here are our top tips for preparing for the HD web. If you utilize these techniques, then your designs will look more stunning than ever on new devices…


retina web design

Always Design Using Vectors

The first place that you can start preparing for the HD web is within Photoshop (or your graphics application of choice). When making graphics for high resolution displays, you should avoid using bitmaps at all costs. Instead always opt to use vectors, or Smart Objects in Photoshop. By using vectors it is possible to quickly and easily scale your artwork to different dimensions without losing any quality.

And if you increase your designs by whole, even numbers they stay just as crisp and sharp. For example increasing the resolution by 2x rather than a fraction such as 1.5x. In this respect Apple was very thoughtful of designers when chose a resolution for their Retina displays that was exactly twice the original.

retina web design

SVG for Vector Graphics

SVG stands for Scalable Vector Graphics, it is a format that can be used on the web and consists of shapes and paths, with fills, gradients etc. All of the information for SVG files is stored as XML, not bitmap data. So it is completely scalable!

Where as in the past, you could only use bitmap images on the web. Most modern browsers are now perfectly capable of displaying vector graphics with SVG. But do be cautious with this one as browser support is still in progress, and some browsers may only support certain filter types.

retina web design

Use CSS to Render UI Elements

Designers have actually been preparing for an HD web for years. Because using CSS3 to render user interface elements, with properties such as border-radius and box-shadow works in much the same way as vector graphics do. They are completely resolution independent and will display crisp and smooth no matter how much you zoom into them. So wherever possible use CSS properties for user interface elements.

retina web design

@font-face Icon Kits

Utilising icon web fonts is another great way to get vector-esque scaling and flexibility on the web. By using the @font-face CSS property we can embed a custom font which has been specially designed with simple pictographs, in place of the normal characters.

This method of font replacement is a quick and easy way to have an arsenal of re-useable vector icons at your disposal on the web. This method currently has much better browser compatibility than using SVG. Checkout out: Our latest icon font.

retina web design

Use Fluid/Responsive Layouts

Traditionally there has always been two types of layout on the web: A fixed layout in which every element has a predefined width and height in pixels. Or a fluid layout that is relative, and will adjust it’s width and sometimes height to suit how much viewing space is available.

However, due to the small screens of phones and tablets, most static layout websites are now becoming forced to be fluid. Think about what happens when you are viewing any website on an iPhone, and switch from portrait to landscape or vice versa. The width of the page adjusts to suit the available viewing area.

This essentially spells the end of static websites. The main selling points of static layouts in the first place, were being able to control exact dimensions and having pixel perfect designs. Therefor, why not begin with a fluid layout in the first place? or even go one better and use responsive layouts that adjust drastically depending on the type of device their are being viewed on.

retina web design

Use Higher Resolution Images Dynamically

So far, all of these tips have focused on scalability and vector alternatives. However when it comes to photos, there aren’t any vector-based alternatives. So what can you do to make sure your photos look as vivid and crisp as possible on the new HD devices?

The problem currently is that if you have a photo that you want to appear crystal clear on the web at 300 x 200 pixels. Then you may find that on retina devices each 1 x 1 pixel of your 300 x 200 image, is actually occupying 2 x 2 pixels on the HD screen. The solution?

If you don’t mind taking a hit with your loading times, then one simple idea is to include higher resolution images and use them dynamically with JavaScript. So in the aforementioned scenario you would include both a 300x200 image and a 600 x 400 pixel image and use Javascript to serve the correct image. A simpler but messier version of this is to use html to define the width and height to 300 x 200 pixels -- making your image appear to be 300 x 200, but provide a higher resolution version for Retina displays.

retina web design

Target Known HD/Retina Displays with CSS Media Queries

This could prove as a very useful method during the cross-over period. Just like vendor prefixes in CSS allow us to directly target particular browsers (ie. -webkit), Media Queries allow us to directly target particular devices, and apply special rules to them. The end result of this is similar to the above JavaScript switching, only it is lighter weight and in the future may provide better compatibility with browsers (but not yet).

Here is a great tutorial explaining CSS Media Queries, it also has some examples for targeting the iPhone 4 and iPad with different CSS and imagery.

The Next Five Years of Resolution?

In a lot of ways the HD web is a thing of the future, but in many instances these technologies are already in use (notably on the consumer side). From a producer's perspective, though, the tools to fully implement HD resolution or resolution-independent features are still being developed -- making it more difficult for web designers and developers to keep up.

The complete transition from our current stage of web design to a resolution-independent or extremely high-resolution web is going to take years, maybe even a decade. In the interim period we are left choosing standards to adopt or ignore, finding new methods to employ that we can hack into compatibility, and we are left with a situation maybe even more difficult than the IE6 testing days of yore.

There are many questions still to be answered, and this is where we need your input:

  • What high-resolution techniques actually work NOW?
  • What standards are in the pipeline that will make a difference?
  • What do we need to learn to stay ahead of this trend?

Share Your Experiences

Let us know how you would answer these questions in the comments below. If any of you have first-hand experience deploying high-resolution apps or websites we would all benefit from information about how you went about it and what was learned in the process.


Comments

X

You've successfully logged in!