Под какие разрешения верстать сайт
Перейти к содержимому

Под какие разрешения верстать сайт

  • автор:

Размеры адаптивной вёрстки для сайта

Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 2021 года. Выясним какие размеры адаптивной вёрстки для сайта использовать и под какие браузеры оптимизировать сайт.

Когда-то давно делали отдельные сайты под мобильные устройства, но сегодня более популярная и любимая поисковиками адаптивная вёрстка (сайт растягивается/перестраивается в зависимости от экрана устройства). За последние несколько лет вёрстка, как таковая, сместилась в сторону векторных форматов из-за разных размеров экранов и чёткости отрисовки векторных изображений (значков, логотипы, элементы дизайна, итп). Растровыми остаются только фотографии на сайте. Т.е. рисование дизайна в Фотошопе как таковое отходит, сейчас популярны разные векторные редакторы и в первую очередь онлайновые типа Фигмы.

Теперь перейдём непосредственно к исследованиям, посмотрим статистику разных сервисов собирающих данные и сведём их в общую таблицу. Затем вычислим среднее значение. Сервисов этих много, все рассматривать смыла нет, плюс минус они показывают одно и то же. Часть данных откинем как погрешность (меньше процента, оставлю только Internet Explorer, некоторые всё ещё думают что он актуален, в то время как его поддержка закончена в 2015г и выпущен взамен Edge), задача выявить самые используемые и популярные, на которые и стоит ориентироваться при создании сайтов.

Популярные браузеры и разрешения экранов

Начнём с того, кто к нам поближе — Яндекс.Радар за 2020 год radar.yandex.ru/browsers:

  • Google Chrome — 40.42% (движок Blink: Google — Chromium (ответвление от WebKit))
  • Яндекс.Браузер — 21.49% (Chromium)
  • Safari — 11.34% (WebKit: Apple)
  • Opera — 4.41% (Chromium)
  • Android Browser — 3.09% (WebKit)
  • Samsung Internet — 2.41% (Chromium)
  • Firefox — 2.22% (Gecko: Mozilla)
  • MIUI browser — 1.96% (WebKit)
  • Microsoft Edge — 1.45% (Chromium, EdgeHTML: Microsoft (2014—2019) )
  • Internet Explorer — 0.39% (Trident (MSHTML), Tasman — Mac OS X. (1995—2015))

Итого:
Chromium: Google Chrome 40.42% + Яндекс.Браузер 21.49% + Opera 4.41% + Samsung Internet 2.41% + Microsoft Edge 1.45% = 70.18%
WebKit: Safari 11.34% + Android Browser 3.09% + MIUI browser 1.96% = 16.39%
Gecko: Firefox — 2.22% = 2.22%

Типы устройств

  • Смартфоны — 59.62%
  • Десктоп — 37.44%
  • Планшеты — 2.94%

LiveInternet в среднем за 3 месяца по февраль 2021 liveinternet.ru/stat/ru/browsers.html?date=2021-01-31&period=month

Chromium: Google Chrome 56.8% + Яндекс.Браузер 22.3% + Opera (Blink) 4.5% = 83.6%
WebKit: Mobile Safari 9.7% + Safari 0.9% = 10.6%
Gecko: Firefox 2.5% = 2.5%

Internet Explorer 11 = 0.6% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).

Разрешения экранов

  • 800×600 — 27.1%
  • 1024×768 — 21.0%
  • 640×480 — 14.8%
  • 1920×1080 — 8.7%
  • 1366×768 — 8.7%
  • 1600×1200 — 5.0%
  • 1280×800 — 2.8%
  • 1280×1024 — 2.3%
  • 1440×900 — 1.5%
  • 1152×864 — 1.0%
  • 1680×1050 — 0.8%
  • 240×320 — 0.1%

Hotlog за январь 2021 hotlog.ru/global/screen

Chromium: Chrome 65.42% + Яндекс 12.27% + Opera 0.31% + Edge 0.32% = 78.32%
WebKit: Safari 14.45% = 14.45%
Gecko: Firefox 5.05% = 5.05%

Internet Explorer = 2.22%.

Разрешения экранов

  • 360×640 — 12.29%
  • 1366×768 — 12.29%
  • 1920×1080 — 12.01%
  • 375×667 — 4.47%
  • 393×851 — 3.99%
  • 360×780 — 3.78%
  • 360×720 — 3.74%
  • 1536×864 — 3.58%
  • 1280×1024 — 3.50%
  • 1024×768 — 3.41%
  • 414×896 — 2.78%
  • 360×760 — 2.76%
  • 1600×900 — 2.51%
  • 768×1024 — 2.41%
  • 412×892 — 2.04%
  • 375×812 — 1.97%
  • 800×600 — 1.83%
  • 1280×800 — 1.78%
  • 320×568 — 1.77%
  • 1440×900 — 1.69%
  • 412×915 — 1.48%
  • 1280×720 — 1.27%

W3Counter: Global Web Stats за январь 2021 года w3counter.com/globalstats.php?year=2021&month=1

Chromium: Chrome 65.3% + Edge 2.35% + Opera 1.5% = 69.15%
WebKit: Safari 17.0% = 17.0%
Gecko: Firefox 4.1% = 2.22%

Статистика по версиям и она не вся показана, Internet Explorer примерно 5.6% — 2.35% = 3.25% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).

Разрешения экранов

  • 1366×768 — 9.17%
  • 640×360 — 7.83%
  • 1920×1080 — 7.70%
  • 1024×768 — 4.46%
  • 896×414 — 4.28%
  • 667×375 — 4.22%
  • 780×360 — 3.20%
  • 812×375 — 3.03%
  • 760×360 — 2.80%
  • 1536×864 — 2.74%

StatCounter Global Stats с января 2020 по январь 2021 года gs.statcounter.com/screen-resolution-stats

Chromium: Chrome 64.1% + Samsung Internet 3.33 + UC Browser 2.61 + Edge 2.35% + Opera 2.26% + Edge Legacy 2.17 + Edge 0.01 = 76.83%
WebKit: Safari 17.21% = 17.0%
Gecko: Firefox 4.7% = 4.7%

Internet Explorer = 1.68%.

Разрешения экранов

  • 360×640 — 9.7%
  • 1366×768 — 8.98%
  • 1920×1080 — 8.46%
  • 375×667 — 4.07%
  • 414×896 — 3.92%
  • 1536×864 — 3.39%
  • 360×780 — 3.3%
  • 360×760 — 2.99%
  • 375×812 — 2.78%
  • 1440×900 — 2.77%
  • 360×720 — 2.53%
  • 768×1024 — 2.53%
  • 414×736 — 2.12%
  • 1280×720 — 1.99%
  • 412×846 — 1.91%
  • 412×892 — 1.79%
  • 412×869 — 1.67%
  • 1600×900 — 1.63%
  • 360×740 — 1.62%
  • 1280×800 — 1.5%

Типы устройств

  • Смартфоны — 52.02%
  • Десктоп — 45.29%
  • Планшеты — 2.7%

Screen resolution statistics за 2020 год ru.screenresolution.org/year-2020

  • 1920×1080 — 18.14%
  • 1366×768 — 12.02%
  • 1536×864 — 6.19%
  • 1440×900 — 4.55%
  • 360×640 — 3.86%
  • 800×600 — 3.13%
  • 2560×1440 — 3.03%
  • 1024×768 — 3.03%
  • 1280×720 — 2.98%
  • 1600×900 — 2.90%
  • 1680×1050 — 2.49%
  • 1280×1024 — 1.99%
  • 1280×800 — 1.77%
  • 360×780 — 1.69%
  • 375×667 — 1.66%
  • 393×851 — 1.38%
  • 1360×768 — 1.35%
  • 375×812 — 1.32%
  • 414×896 — 1.25%
  • 360×760 — 1.24%
  • 360×720 — 1.17%
  • 1920×1200 — 1.12%
  • 384×800 — 1.01%

Типы устройств

Выборка 1 Выборка 2 Средний процент
Смартфоны 59.62% 52.02% 55.82%
Десктоп 37.44% 45.29% 41.365%
Планшеты 2.94% 2.7% 2.82%

О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.

Браузеры под которые оптимизировать сайты

Chromium
(Google Chrome)
WebKit
(Safari)
Gecko
(Firefox)
Trident
(Internet Explorer)
Яндекс.Радар 70.18% 16.39% 2.22% 0.39%
LiveInternet 83.6% 10.6% 2.5% 0.6%
Hotlog 78.32% 14.45% 5.05% 2.22%
W3Counter 69.15% 17.0% 2.22% 3.25%
StatCounter 76.83% 17.0% 4.7% 1.68%
Средний процент: 75.616% 15.088% 3.338% 1.628%

Как видим, браузеры на движке Chromium (Google Chrome, Яндекс.Браузер, Opera, Vivaldi, Samsung Internet, Microsoft Edge итп.) жёстко доминируют и процент по моим наблюдениям прирастает.
На втором месте движок WebKit (Safari, Android Browser, MIUI browser итп.) и он уверенно держится в районе 10-15% последние годы.
На третьем месте Gecko (Firefox), долго был моим любимым браузером, но постепенно начал становиться проблемным из-за некоторых решений разработчиков, плюс выравнивание текста на пиксель ниже, как итог пользователи убывают, тенденция всё хуже из года в год — не вижу смысла в его поддержке..
И специальный столбик Trident (Internet Explorer) также показывает почти мёртвый браузер.
Остальным браузерам остаётся только догонять или оставаться в районе погрешности, смысла в оптимизации под них нет.

Актуально проверять вёрстку в браузерах Google Chrome и Safari (аналог на том же движке Arora под Windows/Linux), тем самым покрываем около 90% пользователей.

Разрешения экрана

Теперь самый трудный пункт, разрешения экрана устройств, оно может иметь большее пикселей (px), но размер экрана всё равно будет 375px. Например, iPhone 7 имеет дисплей разрешением 1334×750 пикселей, но вёрстка сайта всё равно будет под 375x667px. И вот нам необходимо в первую очередь определить минимальный размер экрана для смартфона, как стартовую точку адаптивной вёрстки. Долгое время это был размер 320x568px (iPhone 5), до этого 240px, но данные устройства уже отжили.
Очевидно на 2021 год, устройства с экраном 360px являются той самой минимальной стартовой точкой, диапазон смартфоновых устройств будет примерно до 640 .. 780px, имеет смысл делать «резиновый» дизайн в этом промежутке, дизайнеру так же стоит по 10-15 пикселей по бокам оставить на отступы..
Далее планшеты iPad mini 768px, iPad pro 11 — 834px, и LiveInternet показал 800×600 — 27.1%. При таких показателях 768px всё ещё остаётся обязательным.
Следом обязательно размер на 1000px, это и старые мониторы разрешением 1024px, ноутбуки, планшеты итп устройства. Так же популярные ноутбучные разрешения 1280x и 1366x. На мой взгляд достаточно дизайна на 1000px на экранах побольше просто будут поля по краям 140 и 183px соответственно.
Остаются большие разрешения экранов, посмотрим по таблице ниже.
Разных астрономических размеров 2570×798, 3840×848 (4k) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.

LiveInternet Hotlog W3Counter StatCounter Screen resolution Средний процент
320x 0.1% 1.77% 0.935%
360x 22.57%
(12.29 + 3.78 + 3.74 + 2.76)
20.14%
(9.7 + 3.3 + 2.99 + 2.53 + 1.62)
7.96%
(3.86 + 1.69 + 1.24 + 1.17)
16.89%
768x 2.41% 2.53% 2.47%
800x 27.1% 1.83% 3.13% 10.69%
1024x 21% 3.41% 4.46% 3.03% 7.975%
1280x 5.1%
(2.8 + 2.3)
6.55%
(3.5 + 1.78 + 1.27)
3.49%
(1.99 + 1.5)
6.74%
(2.98 + 1.99 + 1.77)
5.47%
1366x 8.7% 12.29% 9.17% 8.98% 12.02% 10.232%
1440x 1.5% 1.69% 2.77% 4.55% 2.6275%
1536x 3.58% 2.74% 3.39% 6.19% 3.975%
1600x 5.0% 2.51% 1.63% 2.90% 3.01%
1920x 8.7% 12.01% 7.70% 8.46% 19.26%
(18.14% + 1.12%)
11.226%
2560x 3.03% 3.03%

Имеем обязательное разрешение для адаптивной вёрстки 360pх, лучше «резиновое» до 640px, оно покроет практически все смартфоны, я думаю примерно 50% устройств от общего количества с учётом возможного разворота.
768x и 800x дают в сумме около 13% смартфонно-планшетного парка, плюс разные расширения типа 896×414 — 4.28% накинут ещё около 10% устройств, итого более 20%, имеет смысл делать!
Далее ноутбучные расширения 1024px обязателен, 1280x можно пропустить, отступ с боков в 140px приемлем и хорошо смотрится. Этим закрываем около 13% устройств.
1366x — стоит делать обязательно — 10% устройств, плюс: 1440x, 1536x, 1600x так же можно ничего не делать, отступ с боков: 74, 85, 117px
1920x — обязателен. Всё что выше не имеет особого смысла и скорее является прихотью, тем более что майнинг на добрую пятилетку отложил приход 4k мониторов из-за отсутствия видеокарт, и судя по курсу Биткоина — это ещё надолго.

Идеальный вариант адаптивной вёрстки на 2021 год:

  • 360pх до 640px растягивающийся, минус отступы по 10 — 15 пикселей с боков
  • 768px
  • 1000px -> 1024x (минус 24 пикселя на скролл браузера = 1000px для дизайна, отступы по желанию (пункты ниже так же)).
  • 1342px -> 1366x
  • 1512px -> 1536x по желанию, чтоб накрыть 1600x и чуть большие расширения, около 10% устройств.
  • 1896px -> 1920x

24px вычислил практическим путём, переключая стили оформления Windows XP, с тех пор ещё ни разу не подводил данный выбор.

Экономный вариант адаптивной вёрстки на 2021 год:

  • 360pх
  • 768px
  • 1000px -> 1024x
  • 1896px -> 1920x

Совсем экономный вариант адаптивной вёрстки на 2021 год:

Послесловие

Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.

Следующее подобное исследование имеет смысл проводить ещё лет через пять, ситуация немного изменится к тому времени.

Меню раздела «Всякое разное»

Страница сгенерирована за 0.001518 сек.
На один процесс веб-сервера: 659 стр./сек.
Всего Apache может отдать: 168 704 стр./сек.
Выделено PHP памяти: 446.3 KB
(real_usage: 2 MB)

Браузер построил за сек.
Полное время сек.

С момента выгрузки предыдущей страницы
из памяти браузера: сек.

Адаптивная версия для сайта. Набор требований и особенностей. Тестирование.

Сначала, давайте кратко разберемся, что такое адаптивная верстка и чем она отличается от мобильной версии сайта.

Адаптивная верстка – это html-верстка сайта сразу под несколько наиболее популярных разрешений. Например — 340px, 420px, 768px, 1024px, 1200px (все в ширину). Таким образом, сайт будет занимать всю или почти всю рабочую область на большинстве устройств – телефонов, планшетов, ноутбуков, настольных ПК. Но т.к. сейчас выпускается очень много устройств с абсолютно разными экранами, то при адаптивной верстке сайт не всегда занимает 100% ширины экрана.

extrusion_adaptive

Респонсив верстка – это более сложный вид адаптивной верстки, который позволяет сайту всегда занимать 100% ширины экрана.

adaptiv-niris

Мобильная версия сайта – предполагает наличие или отдельного шаблона (как минимум) или вообще наличие отдельного сайта.

При адаптивной и респонсив верстке – контент сайта один и тот же, просто отображается в разном виде.

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

Все подходы, имеют свои плюсы и минусы:

Адаптивная верстка

Плюсы: наибольшая простота из наших вариантов. Включая поддержание и наполнение.

Минусы: не всегда занимает 100% ширины экрана, лишний трафик для пользователя.

Респонсив верстка

Плюсы: красота, всегда занимает 100% ширины экрана.

Минусы: сложно для создания и поддержания, лишний трафик для пользователя.

Отдельная мобильная версия

Плюсы: свобода реализации.

Минусы: т.к. имеем в этом случае дублирование контента, то очень сложно поддерживать актуальность данных и идентичность стилистики сайта. И это одновременно является негативным фактором для SEO. К тому же, т.к. сейчас очень большое разнообразие разрешений и устройств, то этот вид постепенно теряет былую популярность.

В итоге, что выбрать?

Самый оптимальный вариант с точки зрения цена\качество – адаптивная верстка. Если нужно качество – респонсив-верстка. Если у вас сложный функционал на сайте (портал, много интерактива), то можно рассмотреть отдельную мобильную версию или мобильное приложение.

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

Для каких разрешений нужно делать адаптивную верстку

Проанализировав статистику нескольких корпоративных сайтов за 2018 год, можем утверждать, что на текущий момент нет явного лидера и присутствует очень большое разнообразие разрешений. Посмотрим примерный график:

main

По графику видно, что наибольшей популярностью при посещении корпоративных сайтов является разрешение 1366px. За ним, примерно в равной пропорции 1280 и 1920px. И далее идут все остальные – 360px, 1600, 1024, 1440 и 768px.

Эти данные в целом вполне коррелируют со статистикой LiveInternet и StatCounter.

Интересная особенность – бывает, что в праздники выходные увеличивается количество заходов с мобильных устройств. Не во всех сферах корпоративных сайтов, но во многих.

В целом, нужно отметить, что разрешений очень много, выбрать из них явного лидера – не справедливо. Поэтому из-за такого разнообразия, мы рекомендуем своим клиентам при разработке сайта сразу добавлять адаптивность.

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

320px, 360px, 768px, 1024px, 1280px, 1440px, 1920px. Этот диапазон, от 320 до 1920px охватывает, как правило, 90% всей аудитории корпоративных сайтов. На этих разрешениях Ваш сайт должен выглядеть хорошо.

Продвигаем сайты с гарантией
Растим продажи, позиции и посещаемость

Если разрабатывается сайт, его так же имеет смысл делать под эти разрешения, с той поправкой, что из списка убираем крайние 1440px и 1920px, т.к. для большинства сайтов нет возможности растянуть контент на такую ширину.

Существуют некоторые ограничения на максимальную ширину сайта. В первую очередь – удобная длина строки. Если делать длинную длину строки, то текст, растянутый на нее, станет очень неудобно читать. Поэтому, к сайту добавляются сайдбары – левая и\или правая колонки. Информация разбивается на блоки, но на корпоративных сайтах это часто невозможно. Поэтому, максимальное разрешение для корпоративного сайта мы оставляем 1200 или 1300px.

Рассмотрим аналогичный график по браузерам (отмечаю, график среднестатистический – в разных тематиках, соотношение может меняться):

main

Здесь наметились два явных лидера – Google Chrome и Яндекс.Браузер(только на территории РФ). Если к Хрому добавить статистику по его мобильной версии, то их суммарная доля составит около 60% всех посещений. Следом идет FireFox с 10% посещений и далее менее 10%: Opera, MSIE 11, Mobile Safari, Edge.

Т.о. основные браузеры под которые нужно разрабатывать – Google Chrome и Яндекс.Браузер. Однако, все же не стоит забывать проверить отображение сайта в Opera, IE11 и Safari. Это больше вопрос престижа, чем необходимости.

Еще одной частью адаптивной верстки является повышенные требования к изображениям.

Сначала поговорим о том, что при масштабировании фотографий в большую сторону (увеличении) происходит неприятное размытие. При масштабировании в меньшую сторону (уменьшении), размытие малозаметное или вообще незаметное.

Разумеется, это утверждение относится к растровым изображениям, фотографиям (jpeg, jpg, png)

Одно и тоже изображение на адаптивном сайте должно выглядеть хорошо на всех устройствах – и на больших мониторах, и на смартфонах. Для этого применяют масштабирование в меньшую сторону, т.е. на всех устройствах у нас отображается большая картинка, только под маленькие разрешения она масштабируется. Это конечно негативно сказывается на величине траффика, но делать каждое изображение в нескольких разрешениях – слишком трудоемко и нецелесообразно.

Но, с учетом того, что Россия является одним из мировых лидеров по скорости мобильного интернета, проблема лишнего траффика становится совсем неактуальной.

В последнее время, в требованиях предъявляемых к изображениям на адаптивном сайте появилось еще одно. Разрешение картинки должно быть не просто соответствовать верхней границе диапазона адаптивности, но и превышать ее на 50-100%. Это необходимость возникла с массовым появлением компактных мониторов с повышенной плотностью пикселей.

Сейчас, например, ваш покорный слуга пишет эту статью за 15 дюймовым ноутбуков с разрешением 1900px по ширине. А т.к. при таком разрешении все сайты казались бы очень маленькими, то в операционную систему внедрено автоматическое масштабирование всего содержимого браузеров. Раньше эта особенность касалась только экранов Apple с технологией Retina, но уже несколько лет похожая технология применяется и на windows-ноутбуках, т.е. она приобрела массовый характер.

Как следствие, картинки предназначенные для отображения на сайте масштабируются в большую сторону на 25-50%, что ведет к их заметному размытию. В моем конкретном случае – на 25%, но можно выставить увеличение и на 50, и на 75%.

По нашему опыту, считаем, что достаточно закладывать в размер картинки 50% увеличение.

Альтернативой растровым изображениям сейчас является векторный формат SVG. Не будем вдаваться во все нюансы этого формата, отметим лишь, что его применение на данный момент затруднено тем, что многие старые браузеры его не поддерживают.

Поэтому приходится подстраховывать svg-картинку обычной, растровой jpg-картинкой. Несомненно, за этим форматом – будущее веб дизайна, но … не сейчас.

Как следствие, применение svg оправдано только в критически-важных изображениях – логотипах, отдельных важных иллюстрациях.

Особые приемы, которые должны быть использоваться на всех адаптивных сайтах

Что бы уместить информацию с большого экрана на маленький, нужно постараться. Но нет ничего невозможного.

Рассмотрим интересные приемы, которые используются в адаптивных сайтах.

Бургер-меню

В первую очередь, конечно – это мобильные меню. Как правило, они раскрываются при клике на «три полоски» (т.н. «бургер-меню»)

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

Встречаются разные способы появления этого меню. В целом, ограничение тут только одно – полет фантазии дизайнера. Однако, у нас сложился достаточно большой опыт в использовании мобильных сайтов, и мы можем вам предложить пару наиболее удачных вариантов:

1. Выезжающее слева или справа, со значком закрытия и блокирующее прокрутку контента сайта. Скриншот для примера:

menu_1

2. Появляющееся поверх сайта, со значком закрытия и блокирующее прокрутку контента.

menu_1

3. Раскрывающее вниз от бургер-меню, без значка закрытия, но тоже блокирующее прокрутку контента. Скриншот примера:

menu_1

Разумеется, в бургер-меню обязательно должны располагаться все основные страницы сайта. Если подпунктов не много, их так же можно добавить в бургер-меню. Но размещать в бургер-меню все категории каталога – плохой тон, пользоваться таким меню будет неудобно. Поэтому, как всегда, при составлении структуры бургер-меню старайтесь пользоваться принципом разумности.

Так же, обязательно бургер-меню должно поддерживать смахивание (т.н. «свайп») – это когда бургер-меню можно закрыть, проведя пальцем по смартфону, одним смахивающим движением. Это очень удобно.

Однако очень не рекомендуем ставить свайп для открытия меню – при прокрутке страниц сайта можно случайно свайпнуть и вызвать меню. Все, что делается не по воле посетителя – плохо, нужно этого стараться избегать.

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

Кликабельные телефоны и мессенджеры

Незаменимой особенностью мобильной адаптивной верстки должно являться наличие кликабельных телефонов, значков мессенджеров WhatsApp, Viber, Telegam и формы обратного звонка. По тому, как разместить у себя на сайте кликабельные значки мессенджеров читайте в статье моего коллеги, Алексея – читать.

Обратите внимание, значки мессенджеров, поиск по сайту, ссылку на профиль – очень удобно размещать в бургер-меню.

Адаптация таблиц под мобильные устройства

Еще одной проблемной частью при разработке адаптивного сайта являются таблицы. Не те, что в верстке сайта, а таблицы в контенте, прайс-листы, характеристики товаров и прочее.

Рассмотрим несколько примеров адаптации таблиц

1. Использование горизонтальной и вертикальной прокрутки внутри таблицы. Честно, считаем этот способ самым грубым и не заслуживающим внимания. Пример вживую можно посмотреть здесь: https://www.w3schools.com/howto/howto_css_table_responsive.asp

table

2. Транспонирование (замена строк на столбцы). Очевидный способ, который применяется, когда на сайте используются таблицы очень широкие, но с маленьким количеством строк. Удобным будет так же добавить в него прилипание шапки по мере вертикальной прокрутки.
Пример вживую можно посмотреть здесь: https://codepen.io/dbushell/full/8e6a1ee85418f3c5abe839647dbcdec5/

table

3. Скрытие ненужных столбцов внутрь строки. Например, скриптом FooTable. При таком способе, контент-менеджер заранее выбирает столбцы, которые обязательно отображаются, остальные столбцы транспонируются – для каждой строки отдельно.
Пример вживую можно посмотреть здесь: http://fooplugins.github.io/FooTable/docs/examples/basic/single-header.html

table

4. Преобразование строк таблицы в карточки(отдельные мини-таблички). Например, скриптом Stackable. При этом способе происходит почти тоже самое, что и в предыдущем, только без скрытия:
Пример вживую можно посмотреть здесь: http://johnpolacek.github.io/stacktable.js

table

5. Аналогичный скрипт по превращению таблиц в карточки предлагается скриптом Responsive Tables.
Пример вживую можно посмотреть здесь: https://elvery.net/demo/responsive-tables

table

Нет смысла в этой статье перечислять все способы – их очень много, под каждый случай можно подобрать свой скрипт. Естественно, чем сложнее таблицы – тем сложнее подобрать скрипт.

Кнопки «Читать далее»

Еще один интересный способ отображения информации на мобильным устройстве – добавления к длинным текстам ссылки «читать далее». Разумеется, этот способ актуален только в случаях, когда на странице несколько равнозначных блоков с текстами и какой из них будет интересен посетителю неизвестно.

Скрытие части контента, перемещение блоков

Иногда, при разработке адаптивной верстки возникает необходимость какой-либо из блоков перенести в другую часть страницы, например в самый низ. А другие, просто поменять местами и т.д. С помощью верстки такие изменения сделать не получится, тут на помощь нам снова приходят JS-скрипты, которые позволяют выбранные нами блоки, при определенных разрешениях перемещать в любую часть страницы. Это позволяет избежать лишнего дублирования информации и облегчить жизнь контент-менеджерам.

Не стоит забывать о необходимости разделения информации на важную и не важную. Мы – не сторонники сокращения информации на сайте для мобильных устройств, но тем не менее, иногда это оправдано. Подумайте, вся ли информация, представленная на полной версии нужна пользователю смартфона? Если такие блоки информации присутствуют – их можно скрыть для мобильных устройств.

Еще раз можем сказать, что современный дизайн должен корректно отображаться на мобильных устройствах и оптимальным вариантом является для этого является создание адаптивной верстки.

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

Популярные размеры экранов телефонов

Сейчас те 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-смартфонов.

Сервис responsinator

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

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

Сервис studiopress

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

Комментарии

Bizzona, 5 марта 2013 г. 18:58 #

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

Олег, 20 мая 2013 г. 08:49 #

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

Под какие разрешения рисовать адаптивный дизайн?

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

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

В принципе, этого достаточно, чтобы верстальщик справился.

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

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

Ответ написан более трёх лет назад
Комментировать
Нравится 32 Комментировать

IonDen

JavaScript developer. IonDen.com

Если немного подумать логически, то получится что расклад примерно такой:
1. Мобилы. На примере Iphone 4 (другие мобилы, кроме лопатофонов имеют схожие размеры). Если держать телефон в руке вертикально, то ширина экрана 320 пикселей, если горизонтально то 480.
2. Далее планшеты. На примере iPad (другие планшеты соответственно похожи по разрешениям). Если держишь вертикально, то 768, если горизонтально то 1024.
3. Далее десктоп. Тут самое популярное на сегодня 1200+, рисовать варианты еще шире, обычно не имеет смысла, сайт просто центрируется на более высоких разрешениях. К тому же, большинство пользователей огромных экранов обычно не открывают браузеры на весь экран.

В общем у вас должно получится примерно 5 разрешений в итоге (+ каждое из этих разрешений должно обладать некоторой гибкостью (+/- 30 пикселей), чтобы можно было учесть все разнообразие адройдовских экранов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *