All geek questions in one place

Responsive Web Design Checkpoints? Why for 1280, 1024, 640?

I got a site layout in Photoshop for three different resolutions: 1280, 1024, and 640 pixels wide. Since my experience with RWD is somewhat limited, I would like to get a better idea of ​​how a web designer should think in terms of breakpoints, fluidity, etc. (At the time of writing).

My specific questions arising from this project:

  • Why should a designer agree to these three resolutions, given that the project is a typical company website?
  • Are these resolutions usually optimal or should I ask others?
    (Could it make sense 1024, 768, 320? Or maybe I should look for "natural breakpoints, not canonical ones?"
  • How do I think about implementing the layout of 640 in relation to the iPhone 3 (@ 320px) and 4 (@ 640px)?

Thanks for any help.

+4
source share
2 answers

  • These are apparently the more common landscape resolutions, 1280 is the wide version for the desktop, 1024 is a regular tablet for the desktop / landscape, and 640 is the landscape for mobile devices. Personally, however, I have not seen these exact resolutions for flexible frameworks.

  • I will give you 2 cool adaptive frameworks as a link. Skeleton works on 3 main levels: 960px + (desktop), 768px (tablet) and <480px (mobile). I think these are really good resolutions to work with, especially if you are new to reacting and still used to working with pixels. Alternatively, you can use the Goldilocks approach, which uses the same principles (desktop, tablet, mobile), but uses ems instead of pixels and is designed for mobile devices first mind (as in, you start the design with a small version and add "extra material "for the desktop). For cool articles and other responsive content, I would also recommend checking out This is a reciprocal blog .

  • The design of the iPhone is special. Do not think of them as different resolutions. It has the most subtle state (portrait, but even in landscape it is one and the same state), you are working on 320x480 (older models). The above frameworks aim at this in their mobile states. The models used in the retina basically work in the same “resolution”, but each pixel with double precision is used to determine high definition. Your main concern for your design is here with retina images. As for this, this SmashingMag article should clear everything!

+7
source

They are probably intended for widescreen desktop, desktop, and landscape phone formats. See: http://astronautweb.co/2012/01/responsive-web-design-four-states/

(I hope that the design with a resolution of 1024 screens will not have a width of 1024 pixels.)

0
source

Source: https://habr.com/ru/post/1438942/

More articles:


All Articles