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

Сейчас те 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. Mut@NT опубликовал комментарий 21 Май 2013, 05:45 #

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

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

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

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

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

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

    Спасибо

    | Ответить
  7. Серж опубликовал комментарий 19 Декабрь 2016, 18:30 #

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

    | Ответить
  8. Катерина опубликовал комментарий 12 Август 2017, 21:24 #

    Мой интернет магазин работает почти полтора года, а мобильной версии у него до сих пор нет. Я решила, что удобство заказа со смартфона значительно повысит продажи. Времени разбираться с созданием адаптивного дизайна у меня совершенно нет, потому я решила обратиться к профессионалам. Именно адаптивный дизайн я считаю оптимальным вариантом – пусть сайт самостоятельно подстраивается под разные размеры экранов, не требуется кнопка перехода в мобильную версию. На одном из форумов мне посоветовали обратиться в mobile-version.ru. Откровенно говоря, я очень боялась за безопасность сайта, но прочитав особенности работы команды и отзывы, я стала значительно спокойнее.[url=http://www.mobile-version.ru/]Здесь[/url] я отправила запрос на проверку, указала свои пожелания и выбрала способ оплаты ( в моём случае это перевод на карту Сбербанка). После предзаказа ребята со мной связались, пообещали выполнить работу не более, чем за неделю. Уже черз три дня (3!) адаптивная версия моего сайта была готова. Их работой я более чем довольна, а если учесть те копейки, которые я за нее заплатила, команда работает за спасибо. Кстати, по моей просьбе они устранили некоторые ошибки сайта, которые были до их работы. В целом я осталась очень довольна и всем своим друзьям я уже порекомендовала mobile-version.ru

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