What are the ideal/typical widths that an adaptive/responsive website should be designed for in order to accomodate the most devices possible?
2
-
1this 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.– esprithkAug 4, 2017 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.– esprithkAug 4, 2017 at 4:04
Add a comment
|
2 Answers
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.
- iPad Technical Specifications Note: iPad with Retina display still maintains a device width in the browser of 1024px in landscape, and 768px in portrait
- Android Developers: Supporting Multiple Screens
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.
- iOS Developer Library: Layout and Metrics on iPhone and iPod touch
- Android Developers: Supporting Multiple Screens
- Blackberry Development Guide: Developing applications for different screen sizes
- MSDN Blogs: The IE Mobile Viewport on Windows Phone 7
480-320px
This is the typical device width of 1:1 scale phone in portrait mode.
answered Nov 29, 2012 at 22:49
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/
