10

What are the ideal/typical widths that an adaptive/responsive website should be designed for in order to accomodate the most devices possible?

  • 1
    this screen size has a name called "viewport". you just need to search viewport size of the device and write responsive web design according to this resolution. – esprithk Aug 4 '17 at 4:03
  • most people set it 480 width (or less) to active mobile web design layout, but this is somewhat outdated. There is a smartphone by HTC => HTC Evo 3D (viewport is 540 width). So using 540 width as a guideline for responsive web design is the better choice. – esprithk Aug 4 '17 at 4:04
12

Below are the sizes I like to design for; not all of these may be ideal for your needs, however I find this tend to provide the cater to the most common configurations of devices out there. When I refer to device width, it is in "device independent pixels" :P

1024px

This is the typical device width of 1:1 scale tablet in landscape mode, which also lends itself well to larger computer monitors.

1023-980px

This is the default viewport width for iOS devices (which is supposed to represent the "average" website width), which also lends itself well to average sized computer monitors.

979-768px

This is the device width of an Apple iPad in portrait mode. Note: Many 16:9 Android tablets have a device width of 720px: Android Developers: Supporting Multiple Screens

  • iPad Technical Specifications Note: iPad with Retina display still maintains a device width in the browser of 1024px in landscape, and 768px in portrait

767-480px

This is the typical device width of 1:1 scale phone in landscape mode.

480-320px

This is the typical device width of 1:1 scale phone in portrait mode.

4

I design for 320px wide and up. You shouldn't design for a specific set of device sizes because the range of sizes is continuously increasing - a comprehensive list of device sizes isn't comprehensive for very long.

The current trend is to design breakpoints with concern for content, not device widths, and I think this approach will work well going forward, I don't see it obsolescing any time soon.

Some articles:

http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design

http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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