4 ms·

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, fo

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.
    - msbarnett 14y ago
      You can hint a font. You can't hint an SVG.
      - jlgreco 14y ago
        Huh, that is unfortunate. Is hinting still important on devices with such high DPI though?
        Chris_Newton 14y ago
        It’s not usually the high-dpi devices that you’d be adding hints for. The point is that anything that is going to replace today’s pixel-perfect bitmap graphics still has to look pixel-perfect when rendered on lower-dpi devices, which is going to remain by far the majority of visitors to most sites for a while yet.
    - mgcross 14y ago
      I would love to use SVG, but support just isn't robust enough. Hard to deal with hover/active states too. Icon fonts are one request and easy to style with CSS color and text-shadow (even simulating glows). I just wish there was an easy way to generate a small font set from a the handful of vector elements I need for a given website (custom elements, that is, not using a service like Pictos).
    - sopooneo 14y ago
  - mgcross 14y ago
    Nice, I love that they created a large and small version so that the details weren't interpolated away when down sampled. The 'making of' is great, I'm going to forward this to our designers.
- jchavannes 14y ago
  I've actually taken it even further and bumped up to 4x+ to account for zooming as well. Especially for charts.
harlanlewis 14y ago
Mobile bandwidth is somewhat of a red herring. While ubiquitous 4G isn't reality, most smartphones and networks are already capable of fairly high bandwidth. Latency is the bottleneck you should tackle first when addressing mobile performance, not asset size - the world has already spent a lot of time optimizing asset size for web delivery. But phones are bad at handling lots of requests. Serving a single high-resolution graphic will have significantly less impact on page rendering speed (and even more important, perceived rendering speed) than a handful of smaller assets which add up to the same size. For a real world example, a mobile phone can download and render a single large photo faster than the gaggle of javascript, css, and social network share icons typically presented next to it. Many have examined and written about this. Here's a blog article that Google ranks on the subject: http://www.webperformancetoday.com/2012/04/02/mobile-versus-desktop-latency/ http://www.webperformancetoday.com/2012/04/02/mobile-versus-...
- gaelian 14y ago
  It's neither bandwidth nor latency that I would be most concerned about (though I agree they are a problem) but the other point he raises: > ... the amount of data included in their plans before insane pricing kicks in is frequently still measured in megabytes. Mobile data plans are a joke in my country[1]. 1. http://blog.binarybalance.com.au/2012/05/12/internet-anemia-in-australia http://blog.binarybalance.com.au/2012/05/12/internet-anemia-...
  - harlanlewis 14y ago
    Agreed it's an issue - considered including it but didn't. It's fair to question how much developers should concern themselves with external costs for using their service. Do we have a responsibility to design for data caps to prevent unnecessary charges? Do we have a responsibility to do the opposite, as an industry exerting pressure on carriers to increase cap levels? Somewhere in between? Honestly, I don't know. I'm inclined to design for a user's reality rather than a principle, but that "in the real world" thinking allowed the web to be dominated by "best viewed in IE6" sites.
    - 14y ago
printer 14y ago
Just use SVG for logo's and icons. I use it all the time. They even render better than reduced PNG logo's.
- Chris_Newton 14y ago
  They even render better than reduced PNG logo's. Unfortunately, SVG hasn’t been well supported on Android until quite recently, and likewise for IE. Also, you still have the problem that SVG doesn’t support hinting, so for small icons its value is limited.

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.
  - msbarnett 14y ago
    You can hint a font. You can't hint an SVG.
    - jlgreco 14y ago
      Huh, that is unfortunate. Is hinting still important on devices with such high DPI though?
      - Chris_Newton 14y ago
        It’s not usually the high-dpi devices that you’d be adding hints for. The point is that anything that is going to replace today’s pixel-perfect bitmap graphics still has to look pixel-perfect when rendered on lower-dpi devices, which is going to remain by far the majority of visitors to most sites for a while yet.
  - mgcross 14y ago
    I would love to use SVG, but support just isn't robust enough. Hard to deal with hover/active states too. Icon fonts are one request and easy to style with CSS color and text-shadow (even simulating glows). I just wish there was an easy way to generate a small font set from a the handful of vector elements I need for a given website (custom elements, that is, not using a service like Pictos).
  - sopooneo 14y ago
- mgcross 14y ago
  Nice, I love that they created a large and small version so that the details weren't interpolated away when down sampled. The 'making of' is great, I'm going to forward this to our designers.
jchavannes 14y ago
I've actually taken it even further and bumped up to 4x+ to account for zooming as well. Especially for charts.

harlanlewis 14y ago

Mobile bandwidth is somewhat of a red herring. While ubiquitous 4G isn't reality, most smartphones and networks are already capable of fairly high bandwidth. Latency is the bottleneck you should tackle first when addressing mobile performance, not asset size - the world has already spent a lot of time optimizing asset size for web delivery. But phones are bad at handling lots of requests. Serving a single high-resolution graphic will have significantly less impact on page rendering speed (and even more important, perceived rendering speed) than a handful of smaller assets which add up to the same size. For a real world example, a mobile phone can download and render a single large photo faster than the gaggle of javascript, css, and social network share icons typically presented next to it. Many have examined and written about this. Here's a blog article that Google ranks on the subject: http://www.webperformancetoday.com/2012/04/02/mobile-versus-desktop-latency/ http://www.webperformancetoday.com/2012/04/02/mobile-versus-...

gaelian 14y ago
It's neither bandwidth nor latency that I would be most concerned about (though I agree they are a problem) but the other point he raises: > ... the amount of data included in their plans before insane pricing kicks in is frequently still measured in megabytes. Mobile data plans are a joke in my country[1]. 1. http://blog.binarybalance.com.au/2012/05/12/internet-anemia-in-australia http://blog.binarybalance.com.au/2012/05/12/internet-anemia-...
- harlanlewis 14y ago
  Agreed it's an issue - considered including it but didn't. It's fair to question how much developers should concern themselves with external costs for using their service. Do we have a responsibility to design for data caps to prevent unnecessary charges? Do we have a responsibility to do the opposite, as an industry exerting pressure on carriers to increase cap levels? Somewhere in between? Honestly, I don't know. I'm inclined to design for a user's reality rather than a principle, but that "in the real world" thinking allowed the web to be dominated by "best viewed in IE6" sites.
  - 14y ago

printer 14y ago

Just use SVG for logo's and icons. I use it all the time. They even render better than reduced PNG logo's.

Chris_Newton 14y ago
They even render better than reduced PNG logo's. Unfortunately, SVG hasn’t been well supported on Android until quite recently, and likewise for IE. Also, you still have the problem that SVG doesn’t support hinting, so for small icons its value is limited.