8 ms·

Designing for A Retina Web

128 points by Charles__L 14y ago

damirkotoric 14y ago
I find vector images to be a godsend when creating responsive web sites. They are easy to implement and 'future proof' your website so when the next iDevice comes out with twice the resolution as the current gen retina devices your icons will look just as crisp. Of course Bitmap images remain a pain in the bum.
- rglover 14y ago
  Out of curiosity, how do you handle bitmap images? My course of action up until this point has been to open up the original in Photoshop and double the size (mileage varies a bit but seems to work well). Do you have any recommendations for another approach?
  - Retric 14y ago
    I would suggest increasing the compression levels as well. With 4x the DPI bandwidth is an issue, but you don't notice compression artifacts as much.
- lowboy 14y ago
  Vector images are fine for larger or very simple elements, but we're not at a point where we can rely on them for icons. http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
  - masklinn 14y ago
    Especially since SVG is not hintable, so this won't be fixable until either SVG is fixed or SVG is replaced.
  - damirkotoric 14y ago
    Good point. What you can do though, is to use media queries to load up different SVGs based on the screen resolution of the device. With a progressive enhancement approach you would load up the icons minimized for small displays by default, then work your way up.
Lewisham 14y ago
One thing I have noticed is that there is a weird transitional period we are in with a number of major sites who have optimized for the iPhone and iPad already. For example, photos in the News Feed on Facebook are HiDPI, as are some images on Google. My guess is these were already being used for places to be served for iOS and Android. However, it's hit and miss: the Google logo is never HiDPI. Last time this came up was when Marco wrote a post saying "design for Retina" and a bunch of comments complained asking why people should design for just the Retina Macbook Pro. That's not just short-sighted, it's wrong now: the number of high density mobile platforms means designers should be very worried how their site looks. And, for the most part, sites look terrible.
- esonderegger 14y ago
  I had noticed that images in my news feed on the Facebook app on my iPad 2 were displaying weirdly, but it hadn't occurred to me that it was likely a HiDPI problem. ("weirdly" = some images are blown up 2x bigger than you'd expect them to be with the full vertical dimension showing, but the right half of the image being cut off by the instant messenger window) Now it makes sense, assuming that in the iPad app the News Feed is just HTML and that they probably didn't test the new HiDPI News Feed on older, non-retina iPads. I make that assumption with a healthy dose of doubt because I have no way of knowing how the Facebook app is designed or tested. The takeaway for me is that there is now an even larger pool of devices/browsers/resolutions for which we need to test our designs. Choosing to go the HiDPI route, a noble decision in my opinion, comes with an even greater testing burden.
- Chris_Newton 14y ago
  That's not just short-sighted, it's wrong now: the number of high density mobile platforms means designers should be very worried how their site looks. And, for the most part, sites look terrible. It’s not that simple, though. While mobile (a.k.a. small) devices have been leading the way in higher pixel densities, they also tend to have Internet access at speeds rivalling a carrier pigeon, and the amount of data included in their plans before insane pricing kicks in is frequently still measured in megabytes. All those double-resolution assets might look great, if (and only if) you have a screen that can render them, but they are also slowing things down and eating up people’s data allowance. Not everyone is going to thank you for that.
chrisdroukas 14y ago
I can't speak toward the other icon font resources the article mentioned, but IcoMoon did a great job taking SVG files and turning them into a font. The app supports custom character mapping and comes with a sample icon library. App: http://keyamoon.com/icomoon/#toHome http://keyamoon.com/icomoon/#toHome Sample library: https://github.com/Keyamoon/IcoMoon--limited- https://github.com/Keyamoon/IcoMoon--limited-
- SwellJoe 14y ago
  There are still outstanding accessibility issues with icon fonts. Until there is standards coverage for icon fonts, widespread browser support, and accessibility tool (like screen reader) awareness of those standards, I consider it a backward step for the web.
  - chrisdroukas 14y ago
    Very true, handling accessibility issues is a challenge when using icon fonts. In certain browsers, the ARIA specifications suggest you could do something like <button aria-label="Close">X</button> to deal with screen readers to an extent. There's also the (pretty much completely unsupported) ACSS property {speak: none;} in conjunction with <aria-hidden="true"> and then describe the icon with an offscreen span, pretty much as described here: http://css-tricks.com/html-for-icon-font-usage/#jump-alone http://css-tricks.com/html-for-icon-font-usage/#jump-alone. Still not even close to a good solution, though. If you have any insight into better handling icon fonts, I'd love to know.
OlivierLi 14y ago
I really wish people would stop saying "Retina" when they mean HiDPI.
- lovskogen 14y ago
  It's more human. I think it's a better word.
  - arrrg 14y ago
    Also, likely annoying as hell for Apple lawyers. I don't think they want retina to become a generic word for high DPI displays, so I'm happy whenever I see it become one.
    - squarecat 14y ago
      https://en.wikipedia.org/wiki/Genericized_trademark https://en.wikipedia.org/wiki/Genericized_trademark
- rimantas 14y ago
  "Retina" takes into account viewing distance. HiDPI (whatever that may be) does not.
  - bookwormAT 14y ago
    Retina does not take viewing distance into account. There is no definition of the term retina as far as I know. Apple just uses it for all their displays with higher pixel densities.
    - arrrg 14y ago
      The definition is pretty clear: The pixel grid is not visible. For that three variables have to be taken into account: screen size, screen resulution and viewing distance. Actually, four: visual acuity, too (though it makes sense to just set that at 20/20). That's the definition Apple repeadtedly gave in so many words. They were actually pretty explicit about that. Sure, it's their trademark. They are in no way obligated to respect that definition. They can turn around tomorrow and call every one of their screen a retina screen - but when people use the term retina they usually mean Apple's original definition. It's a squishy term, sure, but I like it. It makes a ton of sense since it puts human perception on the center stage and that's what matters. Human perception is squishy, so it makes sense that the retina term would also be squishy.
mxfh 14y ago
I was hoping that with the advent of the Retina display, high density displays would lead to a transition back from pixels to ratios but apparently that call was to early; instead we get CSS pixels.
- wwweston 14y ago
  Amen. The fact that we have to worry about an implementation detail like pixels at this point means something's broken. Give us some points or viewing angle or something. Also, I was hoping that they'd discourage people from using Photoshop to create assets; raster layers have never been a really good match for either illustrations or web layout design, and the mismatch between that model and SVG is going to mean either a slower uptake or some rube-goldberg accretion to the tooling (my money's on the later).
  - subleq 14y ago
    The CSS pixel is defined as an angular measurement. http://www.w3.org/TR/CSS21/syndata.html#length-units http://www.w3.org/TR/CSS21/syndata.html#length-units http://inamidst.com/stuff/notes/csspx http://inamidst.com/stuff/notes/csspx
  - timerickson 14y ago
    Photoshop can just as easily create vector layers. The site design I'm currently working on is entirely vector shapes with the exception of real world photographs. I can design great pixel-snapped icons and UI, and resize the document to 200% and instantly have crisp retina elements as well. Photoshop can be fantastic for web layout design. It comes down to a matter of preference.
    - cageface 14y ago
      Use Slicy: http://macrabbit.com/slicy/ http://macrabbit.com/slicy/ And you don't even have to resize.
      - timerickson 14y ago
lolryan 14y ago
Something to add into the mix: I've had a few friends have decent success with Cedexis' tools for content targeting. One of the complaints that I hear about retina-enabling websites is the performance impact on mobile users. I had a demo whipped up for me once that will serve up different site versions depending on a number of factors, including platform and connection type/quality. So someone on a 3G iPad connection can get the non-retina version, while someone on a wifi link will get the full-res version. The long and the short is that I have a feeling that we are going to see more and more interesting tools popping up in the near future as more and more web designers purchase hidpi computers and decide to write up some library to make their life easier when they decide to retina-enable their websites because it looks horrible on their machine.
- Chris_Newton 14y ago
  It would certainly be helpful if we had a simple, standardised way for browsers requesting content from a web server to specify some kind of preferred quality level, based on both hardware capabilities and some mechanism for determining expected download speeds and the user’s preference for higher quality vs. saving bandwidth.
Kiro 14y ago
If you put a retina display next to a normal display, will a site not optimized for retina look the same on both? (Just trying to understand retina.)
- timerickson 14y ago
  It will be close, but in comparison to the surrounding retina (eg. @2x) elements, the lower resolution will look blurry, as it is being mathematically upscaled.
  - Chris_Newton 14y ago
    Yes, this is a very real problem. I’m working on a project that involves CGI animations, and we’ve had considerable debate about what resolution(s) to offer for the video files. On a desktop or laptop, a size similar to YouTube works fine. On an iPad with a Retina display, the videos can sometimes appear to be of a lower quality than they really are, because we’ve got sharper icons and text nearby. Having said that, it’s not so much the video itself that can look awkward (since people are used to somewhat lossy video compression on the web anyway, and in motion you’re not really seeing the individual pixels) but rather the static poster image that displays until you start to play that video.
  - wamatt 14y ago
    I've never understood this. Since on the hardware level it's exactly 2x, so one pixel becomes 4 pixels. Why on earth would it look blurry? There is no interpolated upscaling needed.
    - sopooneo 14y ago
      He's saying compared to retina elements visible in the browser chrome or (on a laptop screen) in other applications open at the same time. If everything on both the retina and traditional screens was not retina optimized than I can't imagine there would be any noticeable difference.
mrspeaker 14y ago
"Pay us to fix X. It'll cost a bunch, and you end up with the what you had before." Where X in [y2k, ajax, retina, ...]. I love this field!
- DeepDuh 14y ago
  I don't agree. If you've ever had a taste of one of apple's retina screens, you'd probably also see that it's a significant improvement. Text is so much clearer and easier to read that I feel it's less straining on the eyes.
- regularfry 14y ago
  This is called "maintenance".
josteink 14y ago
You should probably start realizing that there are more devices than ever before. They are all different and iOS/retina is taking smaller and smaller shares of it. Designing for that is designing for last generation platform-specific web and has little future.
- freyr 14y ago
  You should probably start realizing that displays have higher pixel densities than ever before. More and more devices will be providing high resolution displays. Designing for low-resolution displays is designing for last generation devices and has little future. Of course, designers should aim for a solution that is as device-agnostic as possible. The linked article provides designers with a number of alternative ways to support high resolution displays. Perhaps their use of Apple marketing speak ("Retina") is self-limiting, but to dismiss the article out-of-hand for using that term is no better.
taylorfausak 14y ago
This is a good, comprehensive overview of the options for high-density web pages. However, I'm curious about their CSS media queries. device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … } I was under the impression that you should put the vendor-prefixed versions first, followed by the unprefixed one. (Also, I don't think "-Webkit-" should be capitalized, but I don't know if it matters.) To wit: -o-device-pixel-ratio, -moz-device-pixel-ratio, -webkit-device-pixel-ratio, device-pixel-ratio { … }
- TazeTSchnitzel 14y ago
  I personally put normal version first, but I'm not sure it matters.
- tagawa 14y ago
  Yes, unprefixed properties should go last. This is because CSS rules lower in a stylesheet have priority. In theory, it's possible for a browser's experimental (prefixed) implementation of a property to behave differently to its stable (unprefixed) implementation, so you'd want the stable property to supersede the experimental one, hence putting it last. As for capitalisation, it doesn't matter in a CSS stylesheet but it does matter if you work with styles in JavaScript, so it's better to keep them lowercase.
cpeterso 14y ago
If you are using Firefox on a Retina MacBook Pro, you can get crisp HiDPI text if you download Firefox Aurora 16* and change about:config pref layers.acceleration.disabled to true. (This workaround is temporarily broken in Nightly 17 builds.) Disabling Firefox's accelerated layer renderer is clearly a temporary workaround, but the improvement in text quality is awesome. To track Mozilla's progress on full support for HiDPI text, you can follow https://bugzil.la/674373 https://bugzil.la/674373 * https://www.mozilla.org/en-US/firefox/aurora/ https://www.mozilla.org/en-US/firefox/aurora/
newman314 14y ago
IMO, what none of these techniques address is being able to on-the-fly detect if Retina and show higher-res images in a slideshow format. There is plenty of talk out there about how to display bg images but not much (none?) that I have found to address the use case I talked about above.
mochizuki 14y ago
In the world of mobile displays and retina displays, people need to start using percentages more and fixed widths less.

128 points by Charles__L 14y ago

I find vector images to be a godsend when creating responsive web sites. They are easy to implement and 'future proof' your website so when the next iDevice comes out with twice the resolution as the current gen retina devices your icons will look just as crisp. Of course Bitmap images remain a pain in the bum.

rglover 14y ago
Out of curiosity, how do you handle bitmap images? My course of action up until this point has been to open up the original in Photoshop and double the size (mileage varies a bit but seems to work well). Do you have any recommendations for another approach?
- Retric 14y ago
  I would suggest increasing the compression levels as well. With 4x the DPI bandwidth is an issue, but you don't notice compression artifacts as much.
lowboy 14y ago
Vector images are fine for larger or very simple elements, but we're not at a point where we can rely on them for icons. http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
- masklinn 14y ago
  Especially since SVG is not hintable, so this won't be fixable until either SVG is fixed or SVG is replaced.
- damirkotoric 14y ago
  Good point. What you can do though, is to use media queries to load up different SVGs based on the screen resolution of the device. With a progressive enhancement approach you would load up the icons minimized for small displays by default, then work your way up.

Lewisham 14y ago

One thing I have noticed is that there is a weird transitional period we are in with a number of major sites who have optimized for the iPhone and iPad already. For example, photos in the News Feed on Facebook are HiDPI, as are some images on Google. My guess is these were already being used for places to be served for iOS and Android. However, it's hit and miss: the Google logo is never HiDPI. Last time this came up was when Marco wrote a post saying "design for Retina" and a bunch of comments complained asking why people should design for just the Retina Macbook Pro. That's not just short-sighted, it's wrong now: the number of high density mobile platforms means designers should be very worried how their site looks. And, for the most part, sites look terrible.

esonderegger 14y ago
I had noticed that images in my news feed on the Facebook app on my iPad 2 were displaying weirdly, but it hadn't occurred to me that it was likely a HiDPI problem. ("weirdly" = some images are blown up 2x bigger than you'd expect them to be with the full vertical dimension showing, but the right half of the image being cut off by the instant messenger window) Now it makes sense, assuming that in the iPad app the News Feed is just HTML and that they probably didn't test the new HiDPI News Feed on older, non-retina iPads. I make that assumption with a healthy dose of doubt because I have no way of knowing how the Facebook app is designed or tested. The takeaway for me is that there is now an even larger pool of devices/browsers/resolutions for which we need to test our designs. Choosing to go the HiDPI route, a noble decision in my opinion, comes with an even greater testing burden.
Chris_Newton 14y ago
That's not just short-sighted, it's wrong now: the number of high density mobile platforms means designers should be very worried how their site looks. And, for the most part, sites look terrible. It’s not that simple, though. While mobile (a.k.a. small) devices have been leading the way in higher pixel densities, they also tend to have Internet access at speeds rivalling a carrier pigeon, and the amount of data included in their plans before insane pricing kicks in is frequently still measured in megabytes. All those double-resolution assets might look great, if (and only if) you have a screen that can render them, but they are also slowing things down and eating up people’s data allowance. Not everyone is going to thank you for that.

chrisdroukas 14y ago

I can't speak toward the other icon font resources the article mentioned, but IcoMoon did a great job taking SVG files and turning them into a font. The app supports custom character mapping and comes with a sample icon library. App: http://keyamoon.com/icomoon/#toHome http://keyamoon.com/icomoon/#toHome Sample library: https://github.com/Keyamoon/IcoMoon--limited- https://github.com/Keyamoon/IcoMoon--limited-

SwellJoe 14y ago
There are still outstanding accessibility issues with icon fonts. Until there is standards coverage for icon fonts, widespread browser support, and accessibility tool (like screen reader) awareness of those standards, I consider it a backward step for the web.
- chrisdroukas 14y ago
  Very true, handling accessibility issues is a challenge when using icon fonts. In certain browsers, the ARIA specifications suggest you could do something like <button aria-label="Close">X</button> to deal with screen readers to an extent. There's also the (pretty much completely unsupported) ACSS property {speak: none;} in conjunction with <aria-hidden="true"> and then describe the icon with an offscreen span, pretty much as described here: http://css-tricks.com/html-for-icon-font-usage/#jump-alone http://css-tricks.com/html-for-icon-font-usage/#jump-alone. Still not even close to a good solution, though. If you have any insight into better handling icon fonts, I'd love to know.

OlivierLi 14y ago

I really wish people would stop saying "Retina" when they mean HiDPI.

lovskogen 14y ago
It's more human. I think it's a better word.
- arrrg 14y ago
  Also, likely annoying as hell for Apple lawyers. I don't think they want retina to become a generic word for high DPI displays, so I'm happy whenever I see it become one.
  - squarecat 14y ago
    https://en.wikipedia.org/wiki/Genericized_trademark https://en.wikipedia.org/wiki/Genericized_trademark
rimantas 14y ago
"Retina" takes into account viewing distance. HiDPI (whatever that may be) does not.
- bookwormAT 14y ago
  Retina does not take viewing distance into account. There is no definition of the term retina as far as I know. Apple just uses it for all their displays with higher pixel densities.
  - arrrg 14y ago
    The definition is pretty clear: The pixel grid is not visible. For that three variables have to be taken into account: screen size, screen resulution and viewing distance. Actually, four: visual acuity, too (though it makes sense to just set that at 20/20). That's the definition Apple repeadtedly gave in so many words. They were actually pretty explicit about that. Sure, it's their trademark. They are in no way obligated to respect that definition. They can turn around tomorrow and call every one of their screen a retina screen - but when people use the term retina they usually mean Apple's original definition. It's a squishy term, sure, but I like it. It makes a ton of sense since it puts human perception on the center stage and that's what matters. Human perception is squishy, so it makes sense that the retina term would also be squishy.

mxfh 14y ago

I was hoping that with the advent of the Retina display, high density displays would lead to a transition back from pixels to ratios but apparently that call was to early; instead we get CSS pixels.

wwweston 14y ago
Amen. The fact that we have to worry about an implementation detail like pixels at this point means something's broken. Give us some points or viewing angle or something. Also, I was hoping that they'd discourage people from using Photoshop to create assets; raster layers have never been a really good match for either illustrations or web layout design, and the mismatch between that model and SVG is going to mean either a slower uptake or some rube-goldberg accretion to the tooling (my money's on the later).
- subleq 14y ago
  The CSS pixel is defined as an angular measurement. http://www.w3.org/TR/CSS21/syndata.html#length-units http://www.w3.org/TR/CSS21/syndata.html#length-units http://inamidst.com/stuff/notes/csspx http://inamidst.com/stuff/notes/csspx
- timerickson 14y ago
  Photoshop can just as easily create vector layers. The site design I'm currently working on is entirely vector shapes with the exception of real world photographs. I can design great pixel-snapped icons and UI, and resize the document to 200% and instantly have crisp retina elements as well. Photoshop can be fantastic for web layout design. It comes down to a matter of preference.
  - cageface 14y ago
    Use Slicy: http://macrabbit.com/slicy/ http://macrabbit.com/slicy/ And you don't even have to resize.
    - timerickson 14y ago

lolryan 14y ago

Something to add into the mix: I've had a few friends have decent success with Cedexis' tools for content targeting. One of the complaints that I hear about retina-enabling websites is the performance impact on mobile users. I had a demo whipped up for me once that will serve up different site versions depending on a number of factors, including platform and connection type/quality. So someone on a 3G iPad connection can get the non-retina version, while someone on a wifi link will get the full-res version. The long and the short is that I have a feeling that we are going to see more and more interesting tools popping up in the near future as more and more web designers purchase hidpi computers and decide to write up some library to make their life easier when they decide to retina-enable their websites because it looks horrible on their machine.

Chris_Newton 14y ago
It would certainly be helpful if we had a simple, standardised way for browsers requesting content from a web server to specify some kind of preferred quality level, based on both hardware capabilities and some mechanism for determining expected download speeds and the user’s preference for higher quality vs. saving bandwidth.

Kiro 14y ago

If you put a retina display next to a normal display, will a site not optimized for retina look the same on both? (Just trying to understand retina.)

timerickson 14y ago
It will be close, but in comparison to the surrounding retina (eg. @2x) elements, the lower resolution will look blurry, as it is being mathematically upscaled.
- Chris_Newton 14y ago
  Yes, this is a very real problem. I’m working on a project that involves CGI animations, and we’ve had considerable debate about what resolution(s) to offer for the video files. On a desktop or laptop, a size similar to YouTube works fine. On an iPad with a Retina display, the videos can sometimes appear to be of a lower quality than they really are, because we’ve got sharper icons and text nearby. Having said that, it’s not so much the video itself that can look awkward (since people are used to somewhat lossy video compression on the web anyway, and in motion you’re not really seeing the individual pixels) but rather the static poster image that displays until you start to play that video.
- wamatt 14y ago
  I've never understood this. Since on the hardware level it's exactly 2x, so one pixel becomes 4 pixels. Why on earth would it look blurry? There is no interpolated upscaling needed.
  - sopooneo 14y ago
    He's saying compared to retina elements visible in the browser chrome or (on a laptop screen) in other applications open at the same time. If everything on both the retina and traditional screens was not retina optimized than I can't imagine there would be any noticeable difference.

mrspeaker 14y ago

"Pay us to fix X. It'll cost a bunch, and you end up with the what you had before." Where X in [y2k, ajax, retina, ...]. I love this field!

DeepDuh 14y ago
I don't agree. If you've ever had a taste of one of apple's retina screens, you'd probably also see that it's a significant improvement. Text is so much clearer and easier to read that I feel it's less straining on the eyes.
regularfry 14y ago
This is called "maintenance".

josteink 14y ago

You should probably start realizing that there are more devices than ever before. They are all different and iOS/retina is taking smaller and smaller shares of it. Designing for that is designing for last generation platform-specific web and has little future.

freyr 14y ago
You should probably start realizing that displays have higher pixel densities than ever before. More and more devices will be providing high resolution displays. Designing for low-resolution displays is designing for last generation devices and has little future. Of course, designers should aim for a solution that is as device-agnostic as possible. The linked article provides designers with a number of alternative ways to support high resolution displays. Perhaps their use of Apple marketing speak ("Retina") is self-limiting, but to dismiss the article out-of-hand for using that term is no better.

taylorfausak 14y ago

This is a good, comprehensive overview of the options for high-density web pages. However, I'm curious about their CSS media queries. device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … } I was under the impression that you should put the vendor-prefixed versions first, followed by the unprefixed one. (Also, I don't think "-Webkit-" should be capitalized, but I don't know if it matters.) To wit: -o-device-pixel-ratio, -moz-device-pixel-ratio, -webkit-device-pixel-ratio, device-pixel-ratio { … }

TazeTSchnitzel 14y ago
I personally put normal version first, but I'm not sure it matters.
tagawa 14y ago
Yes, unprefixed properties should go last. This is because CSS rules lower in a stylesheet have priority. In theory, it's possible for a browser's experimental (prefixed) implementation of a property to behave differently to its stable (unprefixed) implementation, so you'd want the stable property to supersede the experimental one, hence putting it last. As for capitalisation, it doesn't matter in a CSS stylesheet but it does matter if you work with styles in JavaScript, so it's better to keep them lowercase.

cpeterso 14y ago

If you are using Firefox on a Retina MacBook Pro, you can get crisp HiDPI text if you download Firefox Aurora 16* and change about:config pref layers.acceleration.disabled to true. (This workaround is temporarily broken in Nightly 17 builds.) Disabling Firefox's accelerated layer renderer is clearly a temporary workaround, but the improvement in text quality is awesome. To track Mozilla's progress on full support for HiDPI text, you can follow https://bugzil.la/674373 https://bugzil.la/674373 * https://www.mozilla.org/en-US/firefox/aurora/ https://www.mozilla.org/en-US/firefox/aurora/

newman314 14y ago

IMO, what none of these techniques address is being able to on-the-fly detect if Retina and show higher-res images in a slideshow format. There is plenty of talk out there about how to display bg images but not much (none?) that I have found to address the use case I talked about above.

mochizuki 14y ago

In the world of mobile displays and retina displays, people need to start using percentages more and fixed widths less.