We are working on few websites which have PSDs designed for 1920, 1170, 640 and 320 resolution. What is the best way to handle the designs on 1920 resolution?

As lots of people using large monitors which have resolution of 1920x1080, should we consider this resolution or stick to lower sizes?

  • 1
    What do you mean 'best way to handle the designs on 1920 res'? You say you have designs for that size already, and that you have users with monitors that size, so it's not really clear what it is you are looking for advice for here? – JonW Dec 2 '14 at 16:19
  • If the PSDs are designed before a line of code is written, good luck--as they likely will be a gigantic pain to translate into a properly responsive layout. (That said...1920? That's huge. Are you sure the designers didn't mis-interpret a retina screen?) – DA01 Dec 2 '14 at 16:27
  • client want to make sure it looks good on 1920, not tiny as other sites. but we are looking for best approach to make it work on 1920 and higher resolutions. – Om Bissa Dec 2 '14 at 16:40
  • It's really quite confusing calling it '1920 resolution'. 1920x1080 or 1080p are both generally understood, but that's a weird one. It doesn't help that it's generally very unclear what you're actually asking. – Thor84no Dec 2 '14 at 17:27

Responsive usually means changing the placement of elements at each breakpoint. You can combine a fluid design for 1170+ and then use responsive at lower resolutions.

Did your design team check the break points as they were designing? Rarely do designs "break" exactly where we think they will. A simple way of designing is to make a mockup and then expand and contract the browser to see where the design fails; then make a design change at that point.

I would also recommend using HTML prototypes in this process as opposed to PSDs. There is a difference.

  • client need same look on both 1920 and 1170 resolution, expect the size of elements. – Om Bissa Dec 2 '14 at 16:46
  • @Om Bissa - that's usually accomplished by fluid design. See: smashingmagazine.com/2009/06/02/… – Mayo Dec 2 '14 at 16:49
  • It's an Parallax design and I am not sure if i can use fluid techniques on that. – Om Bissa Dec 2 '14 at 16:54
  • @OmBissa - that might be problematic :-) You may have to go to a responsive with that. – Mayo Dec 2 '14 at 16:57
  • A parallax design isn't a page layout concept. It's an animation concept. – DA01 Dec 3 '14 at 7:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.