Home/ Questions/Q 8659287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:58:46+00:00

I received a website layout in Photoshop for three different resolutions: 1280, 1024 and

  • 0

I received a website layout in Photoshop for three different resolutions: 1280, 1024 and 640 pixels wide. As my experience with RWD is somewhat limited, I would like to get a better understanding of how a web designer should think in terms of size breakpoints, fluidity etc. (at the time of writing).

My specific questions, stemming from this project are:

  1. Why would a designer go with these 3 resolutions, given that the project is a typical company website?
  2. Generally, are these resolutions optimal or should I our ask for others?
    (Wouldn’t 1024, 768, 320 make more sense? Or perhaps I should be looking for “natural breakpoints as opposed to canonical?)
  3. How should I think about implementing the 640 layout in regard to iPhone 3 (@320px) and 4 (@640px)?

Thanks for any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1. These seem to be the more common landscape resolutions, 1280 being a wide version for desktop, 1024 being normal desktop/land scape tablet, and 640 being landscape for mobile. Personally though, I haven’t seen these exact resolutions for responsive frameworks.

    2. I’ll give you 2 cool responsive frameworks as reference. Skeleton runs at 3 basic levels: 960px+ (desktop), 768px (tablet) and <480px (mobile). I think these are really good resolutions to work with, particularly if you’re new to responsive and are still accustomed to working with pixels. Alternately, you can use the Goldilocks approach which uses the same principles (desktop, tablet, mobile) but uses ems instead of pixels, and is designed with a mobile-first in mind (as in, you start the design from the small version, and add the “extra stuff” for desktop). For cool articles and stuff on responsive, I also would encourage checking out the This is Responsive blog.

    3. iPhone design is special. Don’t think of them as different resolutions. In it’s thinnest state (portrait, but even in landscape it’s the same state), you are working at 320×480 (older models). The above frameworks target this in their mobile states. Retina-using models basically work at this same “resolution”, but double each pixel for the high definition you are used to seeing. Your main concern with your design here is in regards to retina-ready images. As for that, this SmashingMag article should clear things up!

    • 0