How to make your Apps Retina ready | Hacker News Reader

How to make your Apps Retina ready

allanberger.com

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.

yep, also regarding the web, as it goes more in the direction of supporting vector images in the browser by using svg files and icons fonts for example, it will hopefully become easier soon.

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 :)

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.

Wow, looks neat :)

Great stuff

that’s an awesome framework, will check it out

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

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.

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

The difference is that a 2048x1536 display would generally just offer 4x the screen space whereas Retina and other high density screens display the same page scaled up 2x. "Make Your Website Retina-Ready!" is like saying "Make Your Website Look Good When Scaled to 200%!" You can test this by using Ctrl-+ in your browser.

On a 13" CRT monitor, 1024x768 was also higher DPI than 320x200...

Yeah, and people custom designed screens for each resolution. It was a different world. You could never take a 640x480 VGA game and play it in 320x200.

Yes, you could -- and people often did if they got better performance out of 320x200. When SVGA cards became widely available, multiple resolution support became a hallmark of even some of the DOS games of the day. Especially 3D ones, but I remember being able to play Jazz Jackrabbit 2 (a 2D platformer, and a Windows DirectX game) at 320x200 or 640x480.

I don't recall any web browsers scaling images or other UI elements based on that, though. Everything assumed 72 or 96 DPI (depending on Mac or Windows), or just showed images at a 1:1 pixel ratio.

The widespread idea of actually serving different images to devices with different DPIs is fairly new.

we’re right in the transition period of switching to higher pixel density devices, until we completely switch over to infinite scalable graphics with small file sizes only it will still take some time, but maybe not too long :) and in the very near future we may focus on hi-res graphics only without the need to worry about standard-resolution images anymore.

for further infos there is also a quora answer regarding why apple called it retina-displays

http://www.quora.com/Retina-Display/Why-are-Retina-Displays-...

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.

Thanks for the tip Ryan.

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

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.

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

Reply on news.ycombinator.com