-2

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!

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Mandeep Pasbola
  • 2,631
  • 2
  • 26
  • 50
  • possible duplicate of [how to get retina-ready?](http://stackoverflow.com/questions/9748252/how-to-get-retina-ready) – Michael Petrotta Aug 17 '12 at 05:10
  • 2
    @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 Aug 17 '12 at 05:32
  • That's really beside the point. @jfriend00. But please do improve the answers on that question, if you're able. – Michael Petrotta Aug 17 '12 at 05:34
  • 2
    @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 Aug 17 '12 at 05:44
  • It's not really a better question than the dupe I've linked to, @jfriend00, and Stack Overflow is built around maximizing canonicity. Better to have a single, useful answer, than several, mediocre ones. – Michael Petrotta Aug 17 '12 at 05:50
  • 1
    @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 Aug 17 '12 at 06:00
  • Answers shouldn't be fragmented across different questions. I don't think we're going to agree on this, @jfriend00. Oh well. – Michael Petrotta Aug 17 '12 at 06:08
  • @MichaelPetrotta - fragmentation isn't my desire either, but closing this as a dup of that other question won't drive any more answers so nobody wins by that. We've made our points - I'll step aside now and hope for some good answers. – jfriend00 Aug 17 '12 at 06:11

3 Answers3

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

Naveen Kumar
  • 4,543
  • 1
  • 18
  • 36
0

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.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
0

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.

jacobgelman
  • 334
  • 2
  • 12