11

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

Andrew Odri
  • 503
  • 2
  • 4
  • 11
  • 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 04 '17 at 04: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 04 '17 at 04:04

2 Answers2

15

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.

Glorfindel
  • 3,320
  • 5
  • 21
  • 36
Andrew Odri
  • 503
  • 2
  • 4
  • 11
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/

obelia
  • 11,514
  • 23
  • 39