How to develop a website for retina display?

1
votes

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!

3
jqueryhtmlcssretina-display
possible duplicate of how to get retina-ready? – Michael Petrotta
@MichaelPetrotta - except that question doesn't really have very good answers. It may be a similar question, but that question isn't really answered yet. – jfriend00
That's really beside the point. @jfriend00. But please do improve the answers on that question, if you're able. – Michael Petrotta
@MichaelPetrotta - my point was that it doesn't help the OP to close their question as a dup of another question that has no good answers. It's much better for everyone to give this question a chance at some new attention. IMO, it's a very good question. I don't know the answer to this question - I've marked it as a favorite to follow it because I'd like to see the answers too. – jfriend00
@MichaelPetrotta - point me to a single complete answer in that other question and I'll agree with you. I didn't see one in that other post. This question is at least driving some new answers and answers with better info in them. The most important thing for SO is getting the best info. – jfriend00

3 Answers

1
votes

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

0
votes

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.

0
votes

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.