responsive design - What are the ideal widths a website should be designed for on a phone/tablet/computer?

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

Answer

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.