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

Как выбрать правильную ширину сайта

145

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

• Какие бывают форматы размеров сайта для вёрстки
• Какие есть варианты создания страницы под разные мониторы и разрешения
  • Фиксированная верстка
  • Резиновая верстка без ограничений
  • Резиновая верстка с заданной минимальной и максимальной шириной
  • Адаптивная верстка
  • Общая статистика популярных разрешений экранов мобильных и компьютеров
  • Рекомендуемые размеры сайта
  • Если у вас Яндекс.Метрика
  • Если у вас Google Analytics

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

  

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

  Поэтому, разрабатывая макет, мы хотим, чтобы пространство использовалось с умом и при этом:

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

  Но для начала разберёмся, на какую всё-таки ширину html-страницы ориентироваться.

  Какие бывают форматы размеров сайта для вёрстки

  У каждого устройства есть несколько характеристик, описывающих его размер:

  • Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма). У устройств с одинаковым размером экрана могут быть разные разрешения.
  • Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
  • Размер окна браузера — это ширина и высота области просмотра в пикселях (например, 1896 x 1080 — с учётом полосы прокрутки в 24 пикселя). Другими словами, это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но размер окна браузера пользователь может сильно менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

  

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

  Также нужно помнить об ориентации экранов — у ноутбуков, десктопов и телевизоров она альбомная (ширина больше высоты), а у смартфонов и планшетов обычно портретная (высота больше), но может переворачиваться.

  Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)

  Фиксированная верстка

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

  Резиновая верстка без ограничений

  Упрощенно это выглядит так:

  Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.

  Плюсы такой верстки:

  • Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.

  Минусы:

  • На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
  • Периодически может возникать пустое пространство между блоками.

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

  Кроме того, при маленькой ширине экрана блоки будут наползать друг на друга, если не задана минимальная ширина. Чтобы избежать данных проблем, можно применить следующий способ:

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

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

  • минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;
  • максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру сетки.

  Плюсы:

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

  Минусы:

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

  

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

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

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

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

  Плюсы:

  • Наиболее современный и правильный тип верстки.

  Минусы:

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

  Все эти методики могут сочетаться в зависимости от ситуации.

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

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

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

  Как выбрать оптимальный размер макета

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

  Но как же разобраться в этом многообразии разрешений и способов верстки? Главное – сайт должен быть максимально удобен и презентабелен для наиболее распространенного разрешения.

  Общая статистика популярных разрешений экранов мобильных и компьютеров

  Эти данные можно найти в сервисах:

  • https://www.w3schools.com/browsers/browsers_display.asp — тут статистика в первую очередь по США;
  • https://gs.statcounter.com/screen-resolution-stats — статистика в мире и по регионам.

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

  При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 17-24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

  Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:

  

  Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.

  В качестве минимальной ширины, после которой появляется полоса горизонтального скролла, можно взять 960px. Меньше делать особого смысла не вижу.

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

  Подытожим наши рекомендации для дизайна сайтов исходя из самых популярных разрешений экранов.

  Рекомендуемые размеры сайта

  Стандартная ширина страницы сайта для дизайна должна быть в пределах 1366 пикселей, из которых около 1200 пикселей это «безопасная» контентная область, а 1084 пикселя — ширина текстового блока на мониторе компьютера или планшета. Высота первого экрана на десктопе ориентировочно 700 пикселей.Для мобильной версии сайта ширина принимается за 360 пикселей, а высота — 640.

  Но лучше разрабатывать несколько шаблонов используя «опорные точки»:

  Устройство	Ширина макета, пикселей	Отступы по краям	Контентная часть, пикселей
  Большого размера (десктоп или телевизор)	от 1366	Зависят от сетки	1200
  Среднего размера (ноутбук)	от 1024	20 пикселей	992
  Маленького размера (планшеты)	от 768	15 пикселей	768
  Смартфоны	от 360	10 пикселей	360

  

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

  Если сайт ещё в разработке, вы можете посмотреть на то, как адаптированы сайты конкурентов в ТОПе. Но для действующего проекта лучшим решением будет посмотреть на свою статистику пользователей.

  Как узнать статистику своего сайта по разрешениям экрана?

  Если у вас Яндекс.Метрика

  1. Заходите в раздел Отчеты → Стандартные отчеты → Технологии → Разрешение дисплея:
  2. Получаем наглядную уникальную статистику, применимую конкретно к вашему сайту (разумеется, зачастую она будет совпадать со стандартной статистикой):

  Если у вас Google Analytics

  

  1. Технологии → Браузер и ОС → Разрешение экрана:
  2. Данные отчеты полезны еще и тем, что мы можем выявить проблемы отображения сайта на определенном разрешении. Для этого обратите внимание на колонку «Показатель отказов».
  3. Если вы видите, что на определенном разрешении показатель отказов значительно выше среднего – следует протестировать отображение сайта в этом разрешении.

  Как проверить оптимизацию сайта под разные разрешения?

  Чтобы проверить, как выглядит ваш сайт на устройствах с разными разрешениями, можно использовать средства браузера или отдельные сервисы, о которых мы ранее писали в статье «Инструменты для анализа отображения сайта на разных устройствах». Вот некоторые из них:

  1. Бесплатный онлайн-сервис http://responsivetesttool.com/Тут все довольно просто: вставляете ссылку на проверяемую страницу → выбираете готовое устройство или задаёте своё расширение → готово.
  2. Условно-бесплатный сервис https://www.browserstack.com/responsiveВставляете URL, ждёте пока система сэмулирует сайт на популярных устройствах и получаете максимально приближенный к реальности результат. Для бесплатной trial проверки нужна регистрация.
  3. Скрипт (букмарклет) для браузера Chrome https://lab.maltewassermann.com/viewport-resizer/Суть та же, что и в онлайн-сервисе, только в данном случае настройки появляются непосредственно в браузере:

  Подведем итог

  Перед созданием нового сайта или редизайном необходимо:

  • понять, какие разрешения наиболее популярны у вашей целевой аудитории;
  • определить максимальные и минимальные размеры сайта (в пикселях);
  • выбрать тип верстки;
  • после создания и реализации протестировать сайт на разных разрешениях и убедиться, что он корректно и презентабельно отображается в любом разрешении.

  Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.

  Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!

  Подписаться на рассылку

  • «Живое» юзабилити: тест-драйв сайта сети кинотеатров «Планета кино» Наша новая подрубрика – тесты юзабилити популярных сайтов. Мы будем проводить небольшие юзабилити-аудиты, находить барьеры на пути пользователя и предлагать варианты, которые позволят от них.
  • Немного о юзабилити, или Жалуюсь, пользуясь случаем! Сделать сайт или магазин удобными для своего клиента на самом деле не так и сложно. Просто нужно внимательнее относиться к мелочам и всегда ставить себя.
  • Влияет ли смена дизайна или темы CMS на ранжирование сайта в Google? Влияет ли смена дизайна или смена темы CMS на ранжирование сайта в Google без изменения контента (или минимальные изменения) и URL? Ответ Пересмотр дизайна всегда.
  • 19 примеров интересных UX-решений на коммерческих сайтах, которые улучшают ПФ Что же такое UX? Интересные примеры реализации UX 1. Листинг 2. Карточка товара 3. Структура 4. Призывы к действию (CTA) 5. Другие интересные решения UX.
  • Ошибки первого экрана, или Миф о ленивых пользователях Анализируя сайты и давая рекомендации по улучшению юзабилити, мы часто сталкиваемся с ошибками и недоработками «первого экрана» –- той области, которую посетитель видит в первую.

  

  SEO аналитик SiteClinic.ru

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

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

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

  

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

  

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

  

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

  

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

  

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

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

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

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

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

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

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

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

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

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

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

  

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

  

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

  

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

  

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

  

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

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

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

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

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

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

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

  Адаптивная верстка: задачи, преимущества и виды

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

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

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

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

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

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

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

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

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

  Отличия адаптивной верстки от других видов

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

  • фиксированная (статическая);
  • резиновая (тянущаяся);
  • адаптивная;
  • отзывчивая.

  Узнай, какие ИТ — профессии
  входят в ТОП-30 с доходом
  от 210 000 ₽/мес
  Павел Симонов
  Исполнительный директор Geekbrains

  Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

  Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

  Скачивайте и используйте уже сегодня:

  

  Павел Симонов
  Исполнительный директор Geekbrains

  Топ-30 самых востребованных и высокооплачиваемых профессий 2023

  Поможет разобраться в актуальной ситуации на рынке труда

  Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

  Только проверенные нейросети с доступом из России и свободным использованием

  ТОП-100 площадок для поиска работы от GeekBrains

  Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

  Получить подборку бесплатно
  Уже скачали 24144

  Каждый из видов основан на разных методах и преследует разные цели.
  Фиксированный вид верстки «привязывает» сайт к заданной ширине монитора и не меняет ее, то есть не подстраивает под размер экрана.

  Если размеры монитора не достаточны для воспроизведения страницы целиком, то появляется полоска прокрутки вверх-вниз. Это затрудняет восприятие, так как текст/картинку не видно полностью, что вызывает раздражение пользователя.

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

  Реализация такой верстки происходит с использованием тега body, в котором и прописывается нужный размер ширины width:

  При методе резиновой верстки задается интервал значений ширины веб-страницы. Поэтому его еще называют тянущийся или гибкий, так как есть наибольшая и наименьшая величина размера. Например, ширина страницы – min 400 пикселей, а max – 1000. Соответственно, в этих пределах и будет происходить «растяжение» страницы при отображении ее на том или ином устройстве.

  Указываются значения наибольшей (max-width) и наименьшей (min-width) ширины. Если есть необходимость, то аналогично указывают интервал и для высоты растяжения: максимальная высота – max-height и минимальная высота – min-height.

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

  Для вас подарок! В свободном доступе до 26.11 —>
  Скачайте ТОП-10
  бесплатных нейросетей
  для программирования
  Помогут писать код быстрее на 25%
  Чтобы получить подарок, заполните информацию в открывшемся окне

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

  @media all (min-width 400px)

  Если перевести вышеуказанные теги в более понятные данные, то они будут таковы: если ширина экрана превышает 1000 пикселей, то размер страницы принимает статическую величину, равную 900 пикселям. Если же ширина меньше 400 пикселей, то страница сжимается до 280 пикселей.

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

  @media all (max-width 1000px)

  @media all (min-width 400px)

  Преимущества сайта с адаптивной версткой

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

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

  Дарим скидку от 60%
  на курсы от GeekBrains до 26 ноября
  Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

  

  • Фактор юзабильности сайта

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

  Только до 27.11
  Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
  Список документов:

  

  ТОП-100 площадок для поиска работы от GeekBrains

  

  20 профессий 2023 года, с доходом от 150 000 рублей

  

  Чек-лист «Как успешно пройти собеседование»

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

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

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

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

  Кроме того, поисковые системы обращают внимание и на адаптивность сайта. Если она отсутствует, то ресурс будет стремительно терять рейтинг.

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

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

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

  8 принципов адаптивной верстки

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

  Популярные статьи

  

  

  

  

  

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

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

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

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

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

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

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

  • типы поддерживаемых устройств;
  • условия для демонстрации контента.

  Для каждого медиазапроса будут использоваться необходимые стили CSS-языка.

  Разрешения экранов для адаптивной верстки

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

  • для смартфонов — 320 px, 480 px и выше;
  • для планшетов — 768 px и выше;
  • для нетбуков — 1024 px и выше;
  • для мониторов — 1280 px, 1600 px, 1920 px и выше.

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

  На сегодняшний день выполнение адаптивной верстки осуществляется с опорой на Mobile First. То есть разработка ведется с ориентацией на мониторы мобильных устройств и только потом дорабатывается настройками под десктопные мониторы.

  4 техники адаптивной верстки

  • Flexible layout, или гибкий макет

  При этой технике происходит переход фиксированных значений в относительные. Для этого используется формула, определяющая процентное соотношение: target ÷ context = result. Другой способ – поделить ширину объекта на ширину экрана. Полученное число равно процентному значению ширины объекта, которое используется для его подстройки под размер экрана гаджета.

  Например, полная ширина макета равна 1000 пикселям, но делится на два части: левая шириной 250 пикселей и правая, шириной 530 пикселей. Далее, используя принцип прямой пропорции, получаем 25 % для левой части, 53 % для правой.Использование такого способа создания макета позволяет получить сайт, который автоматически подстраивается под любые размеры экранов.

  • Flexible media, или гибкое изображение

  Любой вид медиаконтента адаптируют, применяя свойство . Такой подход способствует изменению размеров картинок, видео и прочих видов медиа в соответствии с изменениями ширины экрана.

  • Flexible Embedded Media, или гибкое встроенное медиа

  Принцип соотношения max-width не даст результатов, если на странице сайта присутствует, например, ролик YouTube, то есть медиаконтент постороннего ресурса. Для корректного отображения подобного встроенного контента его нужно правильно разместить внутри родительского объекта. При этом родительский объект должен иметь параметры: ширина = 100 %, высота = 0. Тогда он будет менять свой масштаб в соответствии с размерами монитора.

  Далее нужно задать отступ в нижней области родительского объекта. Чтобы соблюсти пропорциональность высоты и ширины, нужно установить значение отступа согласно соотношению сторон видео.Например, стороны видео соотносятся, как 16:9. Используем формулу процентного соотношения: 9/15=0,5625 или 56,25%.

  Этот способ адаптирует сайт таким образом, что он при помощи CSS модуля приобретает способность подстраиваться под различные типы устройств. CSS устанавливает взаимосвязь между разрешением экрана и установленными стилями. Media queries находит широкое применение в мобильной и TV разработках, печати и в таких типах устройств, как 3D-очки.

  Применение техники Media queries подразумевает несколько вариантов:

  • использование правила @media для уже действующей таблицы стилей;
  • использование правила @import для интеграции новой таблицы стилей;
  • использование ссылки на таблицу стилей из документа HTML.

  Для упрощения действий, чтобы миновать лишние HTTP-запросы, лучше применять правило @media внутри имеющейся таблицы стилей.

  2 метода разработки адаптивной верстки

  Чтобы разобраться в том, как сделать адаптивную верстку, нужно понимать применяемые для этого процесса технологии: HTML5 и CSS3.

  CSS3 — новая технология в оформлении HTML документов, представляющая собой каскадные таблицы 3-го поколения. Созданные с ее применением правила позволяют «вписать» на экран устройства все объекты веб-страницы.

  При использовании этого метода появляется возможность задавать такие величины объектов, как нужный размер для конкретного разрешения монитора, процентная доля заполняемого пространства (например, 80 % рабочего пространства экрана) и прочие параметры.

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

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

  Так как метод HTML5 является языком разметки, то с помощью него задают координаты положения объектов на странице. Созданные посредством CSS3 классы прописываются в тегах HTML. Благодаря этому, элементы подстраиваются под разрешение экрана.

  На первом этапе процесса адаптивной верстки нужно создать изображение, которое будет растягиваться в соответствии с размерами монитора.

  

  Здесь все просто: это контейнер, чтобы «упаковать» изображение.

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

  

  Сейчас те 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, 5 марта 2013 г. 18:58 #

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

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

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

  Читать:

  Как переключиться на hdmi на ноутбуке