How wide do you draw responsive websites?

Question

Design

Hello

I am engaged in designing and designing websites. I'm still a beginner and I take on simple projects.

I read the books Mobile First and Responsive Design. I also started making adaptive versions for my works. There was a question about what width to choose to illustrate the versions for tablets and mobile phones? For example, I have a phone 480x856 and a book-tablet 800x600, but these are not very standard extensions.

I started looking on the Internet, and there is even more variety: www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Personally, I think I will stop at these widths:
- mobile - 320
- tablet - 720
- PC - 960-980 (depending on visit and content statistics)

They just fit the standard 960 pixel grid well.

PS Thanks in advance to those who want to harshly criticize my work or give advice to me by mail . There are no familiar website and interface designers and there is no one to criticize.

Answer 1

Take the Twitter Bootstrap numbers as a standard.

Answer 2

Whatever you're looking for, from Twitter Bootstrap:

Large display 1200px and up
Default 980px and up
Portrait tablets 768px
Phones to tablets 767px
Phones 480px and below

I'll stick with 720 for tablets though. Android tablets are popular with HD Ready 720p.
PS Incredibly glad that now on Habré. There is an opportunity to ask professionals who actually do this.

Answer 3

Based on the practice of creating adaptive sites, we use the following set of widths (for layout using breakpoints):
320 or 480 - phones / smartphones
800 - smartphones / tablets
1024 - laptops / tablets
1280 - desktops / tablets / laptops
1600 - desktops
In general, the essence of a responsive site is to automatically adjust to any screen size, and ideally it is better to do without breaking points at all, but simply smoothly adjust site elements (block sizes, font sizes, etc.) to fit the screen size.

Answer 4

I tried to use similar grids, in the end I came to the conclusion that each site needs its own grid. Simply, slowly changing the resolution (size) of the browser, I myself determine the key points for changing certain elements.

Answer 5

Design Targets:
Layout 1: iPhone ( 320 /640px) in Portrait is a good candidate for the PSDs. Since this is often a fluid width layout, it can grow or shrink in width to fit other devices in this layout.
Layout 2: iPad ( 768 /1536px) is a good choice for the PSDs here. This layout can scale to fit other devices with the same layout.
Layout 3: Desktop full width ( 960px ) fixed-width with a background generally makes the most sense for PSDs.
if budget allows to create 4 layouts, then
Layout 4: Desktop HD full width ( 1350px ) fixed-width with a background generally makes the most sense for PSDs.

Answer 6

Useful related link:
design.google.com/resizer

Answer 7

where is 640*480? statistics http://avtodailynews.ru http://clip2net.com/s/6cpVEg

Answer 8

Grids? It's all prank. On mobile phones it does not "roll". There is most likely a problem with the standards for pictures. www.cotonti.mobi/page.php?al=model_style_css&pg=Se...and I draw one rubber skin, which, as it turns out, fits all resolutions. To switch to a mobile site, I use a special plugin that has screen resolution standards. For example, there is option 0, this is when the entire screen of the mobile phone is filled with a picture, and there is option 1 when it is necessary that there is one control line above and below the picture (comment, title ...) in addition to a lot of other problems that the fathers of HTML5 did not think, for example, a loose site on a computer and overloaded on a mobile phone. In general, the path of grids is a dead end, implanted by all sorts of SEOs, such as adaptive design in an evening and a million in your pocket. Take a specialized engine.
It's easier and you don't have to sweat it.
Here is the test www.responsinator.com/?url=www.cotonti.mobimove the slider, you will see that there can be no talk of any columns. So everything is small. What about the pictures? Pictures must be prepared on the server for each, almost standard size. There are so many problems here that not one article.
Now statistics on browsers mobtop.ru/stat/browsers well, these browsers from the first three, grids, roundings and other things from CSS3 do not know.