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

Сейчас те 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. Эти сервисы я использую только как средства тестирования, но разработку веду по старинному дедовскому способу – постепенно уменьшая размеры окна браузера. Никто не знает, ведь, на каком устройстве в Будущем или в каком окне браузера будет открыт ваш сайт.

Теги: и

Комментарии

Bizzona, 05.03.2013 18:58 #

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

Олег, 20.05.2013 08:49 #

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

Mut@NT, 21.05.2013 05:45 #

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

максим, 18.05.2014 00:55 #

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

Роман, 28.07.2015 17:08 #

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

Коля, 01.08.2015 16:52 #

Спасибо

Серж, 19.12.2016 18:30 #

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






Интересное
Важное событие
Первый дистрибутив Ubuntu<
Первый дистрибутив Ubuntu
Узнать подробнее
Оглавление
  1. Самые важные разрешения экрана, при адаптивной верстке
  2. Дополнительные сервисы
    1. Первый сервис – responsinator.com
    2. Второй сервис – studiopress.com