
Designing for A Retina Web - Charles__L
http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
======
Lewisham
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_.

~~~
Chris_Newton
_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
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
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>

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
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
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
Although a low Res image fallback is OK there.

------
damirkotoric
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.

~~~
lowboy
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-...](http://www.pushing-pixels.org/2011/11/04/about-those-vector-
icons.html)

~~~
masklinn
Especially since SVG is not hintable, so this won't be fixable until either
SVG is fixed or SVG is replaced.

------
taylorfausak
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 { … }

~~~
tagawa
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.

------
mxfh
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
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).

~~~
timerickson
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
Use Slicy: <http://macrabbit.com/slicy/>

And you don't even have to resize.

~~~
timerickson
I do. I was illustrating a point by mentioning a 200% resize.

------
mrspeaker
"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
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.

------
lolryan
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
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.

------
chrisdroukas
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>

Sample library: <https://github.com/Keyamoon/IcoMoon--limited->

~~~
SwellJoe
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
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>. 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
I really wish people would stop saying "Retina" when they mean HiDPI.

~~~
lovskogen
It's more human. I think it's a better word.

~~~
arrrg
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
<https://en.wikipedia.org/wiki/Genericized_trademark>

------
josteink
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
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.

------
cpeterso
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://www.mozilla.org/en-US/firefox/aurora/>

------
newman314
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.

------
Kiro
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
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.

~~~
wamatt
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
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.

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

