4 ms·

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.

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.
- mgcross 14y ago
  I've only been using 2x images for UI elements and logos. Photos still look fine at standard res (especially if 'Saved for Web' with a .25 blur). A recent project included a 25K 8-bit 2x sprite sheet, and a 13K 1x sprite sheet for LTE IE8. So not much of a difference if limited to elements that really need to be crisp.
  - harlanlewis 14y ago
    Another good approach to small elements like these is using icon fonts. For example, GitHub recently changed all of their nav icons from sprites to a custom icon font called Octicons: Say Hello to Octicons: https://github.com/blog/1106-say-hello-to-octicons https://github.com/blog/1106-say-hello-to-octicons The Making of Octicons: https://github.com/blog/1135-the-making-of-octicons https://github.com/blog/1135-the-making-of-octicons Edit: I realize icon fonts are mentioned in the Smashing Mag article, but GitHub's articles are considerably more thorough.
    - jlgreco 14y ago
      Icon fonts just seem to like such a hack to me in a world where SVG exists. Is the entire idea behind using them just that IE 7/8 doesn't have SVG support? How did lack of SVG support even happen? SVG seems like something any modern browser should have had for years.
      - yusefnapora 14y ago
        Android also lacked SVG support until 3.2. The justification I read was that they deliberately disabled it from their webkit build to save 1MB in the compiled binary. Sad, especially since pre-ICS phones are by far the most prevalent.
        justincormack 14y ago
        Although a low Res image fallback is OK there.

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.

mgcross 14y ago
I've only been using 2x images for UI elements and logos. Photos still look fine at standard res (especially if 'Saved for Web' with a .25 blur). A recent project included a 25K 8-bit 2x sprite sheet, and a 13K 1x sprite sheet for LTE IE8. So not much of a difference if limited to elements that really need to be crisp.
- harlanlewis 14y ago
  Another good approach to small elements like these is using icon fonts. For example, GitHub recently changed all of their nav icons from sprites to a custom icon font called Octicons: Say Hello to Octicons: https://github.com/blog/1106-say-hello-to-octicons https://github.com/blog/1106-say-hello-to-octicons The Making of Octicons: https://github.com/blog/1135-the-making-of-octicons https://github.com/blog/1135-the-making-of-octicons Edit: I realize icon fonts are mentioned in the Smashing Mag article, but GitHub's articles are considerably more thorough.
  - jlgreco 14y ago
    Icon fonts just seem to like such a hack to me in a world where SVG exists. Is the entire idea behind using them just that IE 7/8 doesn't have SVG support? How did lack of SVG support even happen? SVG seems like something any modern browser should have had for years.
    - yusefnapora 14y ago
      Android also lacked SVG support until 3.2. The justification I read was that they deliberately disabled it from their webkit build to save 1MB in the compiled binary. Sad, especially since pre-ICS phones are by far the most prevalent.
      - justincormack 14y ago
        Although a low Res image fallback is OK there.