Life's easy with Medialoot.

Unlimited access for only $14/mo.

Sketch 2: A Worthy Photoshop Competitor?
Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know
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

  • Reply »
    Jake

    Jake

    I’m a photographer as well as a web designer so more often than not I have BIG slideshow images on the home page. Unfortunately.. there’s not a whole lot you can do around that. As an iphone/mac user I’m very keen on high resolution graphics, so I typically export images to the full 300ppi and cut back else where, such as tiling images, using simple and minimal graphics I can export as small GIFs, and generally pinch every pixel I can.

    Fortunately, web design is heading further and further away from typical web 2.0 shiny buttons and fancy graphics and more towards decent, simple elegant design.. and this is something that will surely help towards the transition into HD devices.

    I’m not sure I’ll have enough time to fully delve into all of these options, however I like to think what I have going works pretty well.

    Mar 28, 2012 at 3:11 pm
  • Reply »
    Roland van Ipenburg

    Roland van Ipenburg

    - What high-resolution techniques work depends on what problem you want them to solve. Most of them are broken some of the time, but not all of them are broken all of the time. That makes HD web development a bit harder than reading some blog posts that make unrealistic claims about how it is all supposed to work. CSS UI elements and vector based images for instance are no silver bullet and can be rendered like crap. Bitmaps are still more predictable and unless you only care about iOS it’s probably easier to render some bitmaps for various resolutions on a server then to try to get a myriad of rendering engines to do that flawlessly within the limited resources of a mobile device.

    - If we need a new standard for every new device Apple releases there isn’t much point in having standards, and maybe we need to come to the conclusion Apple isn’t correctly applying existing standards to it’s new devices? The easy days of development for the single iPhone type on the market are long over and Apple is moving into a swamp of iOS fragmentation that developers who jumped on the iOS bandwagon when they got their first iPhone just can’t seem to handle. The iPhone is the IE6 of the future.

    - To stay ahead of this trend: Stop focusing on Apple consumer products and check the less popular stuff that’s coming out years before Apple wraps it up in a shiny package for the masses. I you only start to read about 4K display devices when Apple has one coming out, you’re late to the game. Same goes for Kinect like interfaces, 3D, 7.1 surround, etc. The future is here, but it’s not Apple.

    Mar 29, 2012 at 7:01 pm
  • Reply »
    Tim

    Tim

    @Roland Android devices are 20 times harder to design for than Apple because there IS NO set size. If you want to complain about a screen, complain about those devices.

    Apr 3, 2012 at 9:21 am
  • Reply »
    Roland van Ipenburg

    Roland van Ipenburg

    @Tim I’m not complaining about devices, I’m complaining about a mentality that resembles that of the old print designers who thought the web was just print with some added tricks they could learn: The HD web isn’t just Apple with some added tricks you can learn. Making a design for print and trying to make that work on the web is just as stupid as making a design for retina and to try to make that work on other devices, so it’s just not that effective to focus on that particular process. The question shouldn’t be “What techniques work now?” but “What value can be added now?”. Once you have that question answered maybe you don’t even need new techniques, standards or to stay ahead of some trend.

    Apr 3, 2012 at 3:03 pm
  • Reply »
    Tim

    Tim

    The other issue with an “HD” web is not only the download time, but also high resolution files themselves. I am an artist and I will NEVER put high resolution files of my work online. I’ve had multiple issues in the past with people stealing desktop wallpapers that I made (and that was only at 1280 res) and using them to create all kinds of stuff and selling it both on Zazzle and in brick and mortar stores. 72 ppi is as high as I will ever go with web graphics.
    There are literally thousands of articles online about how to make your website load fast and compressing css and caching techniques, and now people are supposed to start throwing high-res files on their sites. That is just plain ridiculous.

    Just as ridiculous are fluid layouts. We have these mobile devices today that have full fledged web browsers in them and can render websites just like a desktop and people want to change the look of their site for these devices? That just doesn’t make any sense whatsoever to me. Let these devices view your sites as they should be viewed. That’s why they have full browsers built into them.

    These devices will all scale things up or down anyway, so who cares?

    Apr 3, 2012 at 6:21 pm
  • Reply »
    Thorvald

    Thorvald

    Light grey bodytext on white? #fail

    Apr 4, 2012 at 5:47 am
  • Reply »
    Diego

    Diego

    I’ve been doing some research and just want to point out the following:

    - There are JS libraries that avoid the problem of taking the hit on the bandwidth, by defining if the device that’s requesting the page can handle HD, both in terms of screen capabilities and bandwidth. Haven’t tried them yet.

    - Fluid grids are great, although they require a change in the design process. Responsive images can be achieved in a number of ways.

    HOWEVER: Images are displayed not only in IMG tags, but also in backgrounds. I haven’t found any way to properly scale down (50%) a background image for a div. The only solution I see, is to create a JS that takes every div on the page, turns it into a self contained <IMG> + <DIV> combo.

    If the author wants to follow up with me to collaborate on this and maybe come up with a better solution to the problem at hand, I’d be happy to.

    Apr 4, 2012 at 1:32 pm
  • Reply »
    Jared White

    Jared White

    Great summary of the basics! Thanks for the refresher course.

    (P. S. I LOOOOVE MediaLoot!!!)

    Apr 5, 2012 at 12:50 pm
  • Reply »
    SEO

    SEO

    quote Jared White
    GOOD!

    Apr 19, 2012 at 6:16 pm
  • Reply »
    McShefferty

    McShefferty

    Good article that covers a lot of info about the differing PPI’s that are now becoming prevalent.

    @Tim Agree with most of your points, but do you really think we should just display our web sites exactly the same on mobile devices as on traditional desktop machines? There are various reasons for why you wouldn’t want to do this, ranging from the size of screen to download speeds etc. Using responsive design techniques and patterns, a tailored experience can be delivered to suit various delivery methods (mobile/tablets/desktop etc).

    May 9, 2012 at 9:00 am
  • Reply »
    myhyv

    myhyv

    muy bueno, excelente sitio ¡¡

    May 14, 2012 at 8:36 am
  • Reply »
    Niall

    Niall

    I work on a 26inch 1920x1080 monitor (full HD). I find that most sites are a pain at this resolution as the font sizes are too small to read so I have to zoom in using my browser to see things more easily and reduce eyestrain; when I zoom in the lower resolution and highly compressed images start to show their pixels. Not good!

    The full width sites such as Facebook, Amazon, Google etc. are a pleasure at this resolution are a pleasure as they utilise the full width of the browser so although the font sizes are still a bit small the increased whitespace makes it easier to view and read content.

    Responsive sites may fill the screen width but a lot have a maximum specified width well below full HD so they aren’t much different to a non-responsive site and they usually have the same problem of too small font sizes.

    The best solution is to go with a responsive layout that specifies font-sizes relative to the browser width; that way the site accommodates HD resolution and large-size monitors, as well as accommodating lower resolutions, tablets, mobile devices etc.

    Thanks for the article; makes me rethink the design ideas for my new portfolio site.

    May 23, 2012 at 11:01 am
  • Reply »
    Des

    Des

    So what do others recommend for images on high res retina displays… Is double the size sufficient or higher still?
    e.g if we currently have 72ppi, will 150ppi be enough for the retina displays or should we go higher still…like 225ppi/300ppi?

    Jun 18, 2012 at 1:31 am
  • Reply »
    Des

    Des

    Can I also add that its no good to say we need to just now use vectors and CSS3 for the design. Spend a week or two in the real world of customer/client expectations, they just will not get it if we say to them…. “NO.. you cant have your design with a nice image like that in there..”

    Jun 18, 2012 at 2:11 am
  • Reply »
    Jakubgg

    Jakubgg

    @Diego:  For resizing background images you might try “background-size: <size> [, <size>];”  That does the job perfectly well for me.
    Say i have a logo image inserted as a background-image. I have two versions, one is 320x40px (standard), one is 640x80 (for high res screens).  First I declare the normal one (usually in @media ... and (max-width:320px)) then in separate section for hi res ( ... and (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px) )
    background-image: url(‘images/[email protected]’);
    background-size: 320px, 80px;

    That nicely resizes background to a crisp and clear image for hi res displays.

    @Des : doubling resolution on a typical image seems to do the job. So going from 320px to 640px seems to look good on phones and tablets (havent checked it yet on the new iPad) and does not make files too large (with a little PS magic). Size (saved in PNG) when going from 320x40 to 640x80 is 6kb -> 8kb.

    Jul 2, 2012 at 8:04 am
  • Reply »
    Kris

    Kris

    What’s the point of high-resolution when sites like this use a small gray font and low-contrast color scheme for text? It’s just not as readable as it could be; therefore, not very user friendly. There’s a *huge* difference between what looks nice and what’s usable.

    Jul 11, 2012 at 4:44 pm
  • Reply »
    Günter Wagner

    Günter Wagner

    Also, I have been of the opinion’s images for web should have 72dpi. There you with me so nicely cleaned up with this myth. I had been wondering if you are for the Retina display has to use new-dpi sizes. Thanks for the post - and excuse my english. I need to practice a little again. ;-)

    Aug 29, 2012 at 9:44 am
  • Reply »
    Nuno

    Nuno

    Excellent, I Finally found the tuto that I was looking for. Thanks for the good article, by the precious advise. Now, I need to go back to work to realize my website from scratch. :(

    Jan 12, 2013 at 5:58 am
  • Reply »
    Ann

    Ann

    Oh, so many PPI myths. But I’ve never heard them. I guess I have to learn graphics theory…

    Jan 16, 2013 at 8:35 am
  • Reply »
    Saira

    Saira

    It is a sure thing that lots of changes are going to happen in the future of web since technology is developing day by day. This is really an informative post pointing towards the future. Thank you for sharing it with us.

    Sep 18, 2013 at 7:34 am
  • Reply »
    consulente seo palermo

    consulente seo palermo

    And for mobile device support? With the new smarphone like iphone5 and Galaxy wich is the better resolution for website? Thank a lot

    Sep 19, 2013 at 10:05 am
  • Reply »
    Progettazione siti web

    Progettazione siti web

    well ... it’s all true, but how heavy are these images? of course it is nice to see websites with HD graphics, but it is also nice when web pages load instantly!

    Sep 20, 2013 at 3:52 am
  • Reply »
    Andrea

    Andrea

    i agree: vector image & responsive layout is the right mix for the present/future.

    Sep 30, 2013 at 2:26 pm
  • Reply »
    Robert

    Robert

    I don’t see HD capturing the web, just because users prefer speed and functionality over “shiny looks”, and I think that flat design, responsive design, alongside some others techniques suffice for a great online experience, both on desktop and mobile.

    But in a world where the internet speed is very high and the devices are powerful enough, I think that no one will mind a website designed with HD elements only.

    Oct 14, 2013 at 8:58 am
  • Reply »
    You know it

    You know it

    I think this article may be jumping the gun here when it comes to planning for the HD even 4K market. We still do not have practical 4K applications or 4K browsers. I think a point has to be made that 4K web browsing may include multiple standard res browsers open at one time. So generally a maximum value of 1920 or less may be sufficient designing resolutions.

    Dec 17, 2013 at 3:18 pm
  • Reply »
    Dan White

    Dan White

    You say that 72 ppi is a myth, yet even myths can be based on facts. I am well over 50 years old and have been working on the web, and web design, since the early 1990s.  I worked for America Online (AOL) at the time the World Wide Web became publicly available back in 1993. Prior to that, AOL and a few others were experimenting with being able to post scanned images online. There were no digital cameras, and very image scanners at the time that were priced in range that most consumers could afford.  So most of those were scanned images from commercial print shops.  At the time, dots per inch were the only measurement that those print shops understood. The term ppi wasn’t used until a much later time because early CRT monitors were still measured in dot pitch, which roughly translates to dpi.  With the typical scan resolution from the print shops at 1200 dpi and the monitors we had to work with at much lower resolution, that would produce a HUGE nearly unmanageable onscreen image of which you would see only a fraction of it at a time. After much experimentation, collaboration, and a bit of math calculation, it was determined that scanned images reduced to 72 dpi would work across the majority of monitors of the era.  Thus there was a logical reason for application at the time, but because people tend to want to work with standards, and because most do not understand the original reasons behind it, it became a defacto “standard” that has resisted change even after the necessity for it has become obsolete.

    So there you have it, not really a myth. As with many other examples, this is just an illustration of how people tend to carry something forward as a “standard” when the reasons for it have changed significantly over time.

    Jan 17, 2014 at 3:20 pm
  • Reply »
    Faraz

    Faraz

    Thank you for clearing! Very good Article.

    Feb 22, 2014 at 5:18 am
  • Reply »
    johnledas23451

    johnledas23451

    Are all the PPI facts true? If so, I’m kinda surprised by some of it.

    Jul 22, 2014 at 1:14 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all