How to develop a website for retina display?

Question

I have to develop a responsive website with 4 designs [desktop, mobile, tablet and retina display].

First three are fine and can be done but retina display in a new thing. So it will be very helpful if any one can share the correct way to develop HTML for it.

Any plugin of Jquery, Hack of HTML/CSS will be helpful ! Many thanks!

Answer 1

You can use a few CSS framworks like

1. Skeleton
2. Foundation

and search for Responsive web design in Google

For retina Display and Mobile layout use Media queries

Here is a link from CSS-tricks which would be helpfull Css-tricks

Answer 2

On the iPhone/iPad, iOS is pretty smart about making things look good without any help from you. Though I haven't tried it, I'm sure OSX also does the same for desktops/laptops with Retina.

However, there are a couple of things you should definitely consider/user:

• Viewport meta information

• Use vector graphics to avoid fuzzy-looking images (since Retina has higher PPI, it must scale raster graphics)

• Keep pages light and fast (general good rule for mobile)

• CSS Media queries (general good rule for responsive development)

• become familiar with -webkit prefixed proprietary CSS properties which give fine-grained control over many things.

• Test often! most of the time I am pleasantly surprised by how well things "just work" (and how great they look with high PPI), but it doesn't always work the way you expect.

Answer 3

Whenever I create a site, I use retina.js. It automatically replaces lower resolution images on your page with the high resolution on your server if the user has a retina display.