What are the ideal/typical widths that an adaptive/responsive website should be designed for in order to accomodate the most devices possible?
Tell me more
×
User Experience Stack Exchange is a question and answer site for
user experience researchers and experts. It's 100% free, no registration required.
|
|
|
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
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. |
|||
|
|
|
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/ |
|||
|
|
