Разрешения экрана, на которые нужно делать упор при верстке сайта

Сейчас те web-разработчики, которые не делают адаптивные сайты на HTML5, вымрут как мамонты, так как рынок всегда диктует свои условия, а конкуренция не дает малейшего повода в этом усомниться.

Сегодня нашел 2 офигенских web-сервиса, которые помогают автоматизировать некоторые вещи при разработке пользовательского интерфейса.

Поэтому сегодня небольшая статья-заметка обо всем об этом.

При разработке сайтов, разработчику следует сделать упор на 6 разрешений экрана, которые считаются основополагающими в адаптивном сайтостроительстве.

Самые важные разрешения экрана, при адаптивной верстке

Вот они:

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

Дополнительные сервисы

Помимо этого есть как минимум 2 web-сервиса, которые позволяют немного автоматизировать процесс тестирования разрабатываемого сайта:

Первый сервис – responsinator.com

Есть возможность удобно протестировать на большинстве популярных устройствах, начиная с iPhone 3GS и заканчивая “стандартными” экранами для Android-смартфонов.

Второй сервис – studiopress.com

Можно тестировать как на устройствах, так и на популярных разрешениях экрана без привязки к конкретным устройствам.

P.S. Эти сервисы я использую только как средства тестирования, но разработку веду по старинному дедовскому способу – постепенно уменьшая размеры окна браузера. Никто не знает, ведь, на каком устройстве в Будущем или в каком окне браузера будет открыт ваш сайт.

Комментарии:

  1. Bizzona опубликовал комментарий 5 Март 2013, 18:58 #

    Спасибо, за предупреждение про вымирание. Я как раз думал, какой дизайн для сайта покупать – красивый фиксированный или минималистский адаптивынй.

    | Ответить
  2. Олег опубликовал комментарий 20 Май 2013, 08:49 #

    Доброго времени суток!
    У Вас закралась ошибочка вот здесь “Есть возможность удобно притестировать” должно быть “протестировать”

    | Ответить
    • Mut@NT опубликовал комментарий 21 Май 2013, 05:45 #

      Спасибо, поправил!

      | Ответить
  3. максим опубликовал комментарий 18 Май 2014, 00:55 #

    Про дедовский сопособ очень верно написал! Спасибо за статейку!

    | Ответить
  4. Роман опубликовал комментарий 28 Июль 2015, 18:08 #

    Искал значения ширины экранов для адаптивной верстки. Спасибо, то, что нужно!

    | Ответить
  5. Коля опубликовал комментарий 1 Август 2015, 17:52 #

    Спасибо

    | Ответить
Имя
e-mail
Сайт
Текст комментария: