

How to make your Apps Retina ready - andreasklinger
http://www.allanberger.com/post/49938151321/how-to-make-your-apps-retina-ready

======
crazygringo
If you're designing for mobile _at all_ , then retina is _meaningless_ ,
unless you're disabling page zooming.

Because zoom levels can be anywhere from 0.25, say, to 8x. One user might be
viewing part of the page at 2.78x. Another, at 1.3x.

So all this talk of "2x" or "4x", or serving up different files for diffrent
resolutions, or aligning to pixel boundaries is quickly becoming meaningless.

~~~
tosh
That's why scalable solutions like CSS & SVG are a great idea for UI elements.

That said right now often you still need raster graphics (e.g. screenshots)
and making sure you provide them in a way that takes zoomability and devices
with high pixel density in account makes a lot of sense :)

If you go mobile-first you can avoid many of these mindset pitfalls :)

------
PixelCut
Our app WebCode (<http://www.webcodeapp.com>) helps with many of the hassles
of making your website Retina ready. It is a vector drawing app that generates
Retina ready CSS, JavaScript Canvas and SVG code.

~~~
tosh
Wow, looks neat :)

------
Aardwolf
Isn't retina just another word for higher resolutions?

Why do they make it sound like it's all magical and needs you to be "retina
ready"? I don't remember seeing that kind of stuff back when computer
resolutions could be anything from 320x200 pixels to 1024x768 pixels...

~~~
zyb09
Technically it stands for high DPI, not necessary high Resolution, but one
implies the other I guess. Anyway "Retina" is used, because it's established
and everyone knows what it means. Don't see the point in fighting terminology.

~~~
tosh
Spot on. It's just easier to communicate than "devices with higher than
'usual' DPI" :)

------
ryanpetrich
Missed one of the most important points, which is to design for Retina first,
but design so all graphical elements are aligned to two pixel boundaries.

~~~
mikeg8
Can you elaborate more on the two pixel boundaries? I'm not familiar with that
and don't really know what it means... Thank you

~~~
ryanpetrich
By that I mean designing with all graphical features having a size that's a
multiple of two pixels and aligned such that all features fit entirely within
a 2x2 grid. One common way to do this is to design everything in vector at the
normal size with features aligned to the usual one pixel grid, scale up to
200% to add details and export the @2x asset, before scaling back down to
export the @1x asset. For fine details, it may even be convenient to scale up
to 400% or 800%. Another useful tip is to set your graphics program to show
gridlines every 2 pixels.

------
codygman
Can the title be changed to something along the lines of:

"How to make your Apps Retina(AKA High Res, High DPI) ready?

Perhaps something that doesn't perpetuate the incorrect thinking that Retina
is any different than other high definition/high resolution monitors?

I don't mind using Retina as the main keyword for communications sake, but it
seems we should communicate that high res/high dpi are the same thing :D

