Что такое адаптивный дизайн, и почему адаптивная верстка сайта дороже?

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

Что такое адаптивный дизайн

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

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

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

Зачем нужен адаптивный дизайн и адаптивная верстка

Также необходимо учитывать, как ваш сайт будет выглядеть на других типах устройств, таких как планшеты и смарт-телевизоры. Многие инструменты веб-аналитики, такие как google analytics и yandex.metrika, теперь предлагают корректировки для этих устройств.

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

Знаете ли вы, что число пользователей планшетных устройств действительно растет? Возможно, не намного, но все же растет.

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

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

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

Мобильная версия — это сайт, созданный специально для маленьких экранов. Она максимально оптимизирована для мобильных устройств. Но администрирование усложняется, ведь теперь вам придется вносить изменения не в один, а в два сайта. Это требует дополнительных ресурсов

Сложности адаптивной разработки

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

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

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

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

Почему адаптив дороже

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

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

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

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

Плюсы

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

1. Гибкость: контент сохраняется на дисплее, но меняет свое расположение в зависимости от разрешения экрана;
2. Производительность: Независимо от того, на каком устройстве находится пользователь, сайт будет доступен и удобен для просмотра;
3. Вы можете сэкономить время и деньги на разработке сайта, используя адаптивный дизайн, поскольку вам не придется создавать отдельные версии для десктопных и мобильных устройств.
4. Оптимизация: У вас будет единый сайт с адаптивным дизайном, поэтому вам нужно будет продвигать только его (в отличие от разработки отдельных версий для десктопных и мобильных устройств).

Минусы

Некоторые люди считают, что новый дизайн сайта не очень удачен. Их основные аргументы таковы:

1. Для удобства сайт должен иметь мобильную версию. Адаптивный дизайн означает, что все содержимое будет загружено на устройстве, включая информацию, которая может быть не нужна, что может привести к медленной загрузке сайта. Мобильная версия будет загружаться гораздо быстрее.
2. Пользователи не могут переключиться на полную версию с адаптивным дизайном. Обычно на сайтах для мобильных устройств внизу есть возможность переключиться на полную версию сайта. Чаще всего пользователи используют полную версию сайта, если они привыкли заходить на него с компьютера и видеть его десктопную версию — им проще ориентироваться там. В этом случае им будет неудобно привыкать к новому, адаптивному дизайну сайта, который они будут видеть на экране мобильного телефона без всякого выбора. Кроме того, адаптивный дизайн может иметь некоторые недостатки (которые вы не сразу заметите), и у пользователя даже не будет возможности перейти на полную версию.
3. Мобильная версия зачастую удобнее, и пользователь, скорее всего, сможет быстрее найти там нужную информацию. А если не сможет — вернемся к предыдущему пункту — он сможет перейти на полную версию сайта.
4. При переходе на адаптивный дизайн вы можете потерять трафик из социальных сетей, поэтому удобнее будет сделать отдельную версию для мобильных телефонов. В этом случае разработка мобильной версии сайта может оказаться дешевле, чем разработка адаптивного сайта.
5. Если большинство посетителей вашего сайта приходят с десктопных устройств, есть ли смысл что-то менять? Прежде чем вносить какие-либо изменения, следует подумать о потребностях вашего бизнеса, а не переходить на адаптивный макет только потому, что это «модно и современно».

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

Мобильная версия сайта так же имеет некоторые недостатки по сравнению с адаптивным дизайном. Это:

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

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

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

Вернемся к адаптивному дизайну.

Как проверить адаптивность сайта

Вы можете увидеть, насколько хорошо сайт адаптируется к различным браузерам, используя сочетание клавиш ctrl + shift + m в mozilla firefox.

Чтобы проверить, как выглядит ваш сайт на разных устройствах, вы можете использовать комбинацию горячих клавиш google chrome ctrl + shift + i или просто нажать f12. Затем нажмите на значок эмуляции устройств (панель инструментов «Переключение устройств»).

Так же проверить адаптивность сайта можно при помощи инструмента «Проверка оптимизации для мобильных» от Google.

Почему так важен адаптивный дизайн

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

Фактор юзабилити

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

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

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

Условие продвижения

Если сайт не рассчитан на маленькие экраны, он потеряет часть мобильных пользователей. Это, в свою очередь, вызывает дополнительные проблемы. Сайт не только теряет свою аудиторию, но и падает в рейтинге поисковых систем. Yandex, google и другие поисковые системы учитывают количество людей, которые покидают сайт после того, как попали на него. Чем больше людей уходит, тем ниже становится рейтинг сайта.

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

С 2018 года при ранжировании сайтов google использует правило mobile-first index. Это означает, что поисковая система в первую очередь анализирует контент, который отображается на мобильных устройствах, при этом ранжирование десктопных версий сайтов подчинено мобильному поиску. Более того, контент мобильной и десктопной версий должен быть идентичным, т. е. Приоритет отдается адаптивным ресурсам.

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

Источник продаж

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

Особенности адаптивной вёрстки

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

Однородность

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

Кроссбраузерность

Некоторые разработчики ориентируются только на google chrome, самый популярный браузер, и забывают о пользователях, которые используют opera, firefox или yandex.browser. Несмотря на то, что все они основаны на хроме, в каждом браузере есть свои свойства css, которые не поддерживаются. Например, css не поддерживается в opera mobile, который часто используется владельцами смартфонов.

Медиа-запросы

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

Медиаконтент

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

Основные правила адаптивного дизайна

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

Размеры макетов. Брейкпоинты

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

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

“Канонические” размеры для адаптивного дизайна следующие: для смартфонов — от 320 до 480 пикселей и выше; для компьютерного монитора — от 1280 пикселей и выше; для планшетов — от 768 пикселей и выше; для нетбуков — 1024 пикселя.

Относительность координат, размеров и масштабов

Мы не можем использовать какие-либо конкретные единицы измерения при проектировании для такого широкого разнообразия экранов и устройств. В адаптивном дизайне мы используем относительные величины вместо абсолютных. Это связано с тем, что каждый экран имеет свою плотность пикселей, на которую также влияет его размер. Например, разрешение 360 × 240 пикселей будет выглядеть совершенно по-разному на экране планшета и телевизора. Используя относительные значения, мы можем учесть эти различия. Например: координаты/размер/масштаб блока определяются по отношению к верхней границе или к другому элементу.

Вложенность

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

Поточность

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

Графические форматы

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

Шрифты

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

Принципы адаптивного дизайна сайта

В адаптивной вёрстке выделяют следующие правила:
1. Если в мобильной версии сайта чего-то не хватает, пользователю не придется искать настольную версию и искать нужную информацию. Дизайнер должен убедиться, что вся информация из десктопной версии перенесена в мобильную версию, ничего не упуская.
2. Дизайн не должен отличаться между настольной и мобильной версиями. Например, если в настольной версии используется синий цвет, зеленый не должен быть основным цветом мобильной версии. Если пользователь уже посещал сайт с компьютера, он может не узнать его на телефоне и подумать, что ввел неправильный запрос или зашел не на тот сайт.
3. Порядок расположения элементов важно соблюдать. Заголовки, подзаголовки, текстовые блоки, иллюстрации и кнопки должны располагаться в порядке, который имеет смысл для цели сайта. Например, если сайт продает кружки-термосы, то сначала следует описать продукт, рассмотреть возражения и только потом разместить форму заказа. Если десктопная версия настроена по логике «товар — возражения — заказ», то нет смысла перемещать блок с заказом на первое место в мобильной версии. Это изменит путь пользователя и не приведет его к желаемому действию.
4. Минимальная высота и ширина для кликабельных элементов — 44 пикселя. Для настольной версии сайта навигация осуществляется с помощью мыши. В мобильной версии навигация осуществляется только с помощью пальца, а область кликабельности составляет 44–48 пикселей. Если кнопка или знак подсказки меньше этих значений, пользователю будет сложно их выбрать.
5. Функциональность десктопного сайта должна быть повторена в мобильной версии. Если с компьютера доступны фильтры и различные режимы отображения товаров, например, списком и карточками, то эта функциональность должна быть повторена и в мобильной версии. В противном случае пользователи, скорее всего, покинут сайт и найдут решение своей проблемы у конкурентов.
6. Количество колонок уменьшается. На сайтах для настольных компьютеров обычно используется сетка из 12 колонок, но для узкого экрана мобильного телефона не нужно так много колонок — обычно достаточно одной, максимум четырех колонок. Для экрана планшета вполне подойдет сетка из шести или восьми колонок.
При адаптации сайта под разные разрешения дизайнеру следует помнить о двух вещах: компактность и наведение.
Мобильная версия имеет более компактный макет, где карточки и другие элементы расположены в ряд, по сравнению с настольной версией. Это связано с тем, что на компьютере вы просматриваете содержимое слева направо, а на телефоне — сверху вниз.

На компьютере карты располагаются в два или три ряда. На телефоне карты укладываются друг под другом, а не располагаются рядами.

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

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

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

Типы макетов

1. Резиновый – При уменьшении размера экрана блоки просто сжимаются, на мобильном устройстве они могут выстраиваться в одну длинную ленту.
2. Перенос блоков – Если разрешение экрана снижено, блоки будут перемещены в нижнюю часть экрана.
3. Несколько макетов – Для каждого разрешения экрана создается новый макет. Наиболее удобный, но трудозатратный метод.
4. Масштабирование сайта – Если у вас простой сайт, вы можете масштабировать его.
5. Панели – Дополнительное меню, подобное тем, что используются в мобильных приложениях.

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

Основных разрешений для адаптивной вёрстки три:

• 1600 пикселей — для компьютеров;
• 960 пикселей — для планшетов;
• 375 пикселей — для телефонов.

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

Например, Bootstrap теперь имеет шесть различных брейкпоинтов, которые вы можете использовать для настройки дизайна вашего сайта: 1920, 1200, 992, 768, 576 и 376 пикселей. Вы можете использовать эти брейкпоинты, чтобы определить, какой шаблон выбрать для отображения на экранах разных размеров.

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

Какой экран учитывать изначально

Есть два основных подхода.

Первый. Основа для экрана смартфона увеличивается в размерах, и расположение элементов перемещается в направлении увеличения размера экрана.

Второй: Для отображения элементов вместо классического экрана монитора используется экран меньшего размера.

Концепция mobile first сегодня более актуальна, чем второй вариант. Этот метод развития изначально более логичен и прост.

Полезные инструменты для разработчиков

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

Bootstrap

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

Startup

С помощью этого визуального конструктора вы можете быстро и легко создавать темы для bootstrap из готовых блоков. Просто соберите вместе нужные элементы, чтобы получить желаемую структуру, а затем экспортируйте проект на свой компьютер. Вы получите готовый к использованию сайт с html, css и js файлами, которые будут оптимизированы для просмотра на различных устройствах. А поскольку за все хорошее нужно платить, минимальный тарифный план обойдется вам всего в 249 долларов в год. Но если вы заплатите за 12 месяцев вперед, то сэкономите 99 долларов.

Responsinator

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

Caniuse

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

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

Ошибки при разработке адаптивной вёрстки

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

При кадрировании изображение не сжимается. Пользователь начинает видеть часть изображения, а не все изображение целиком.

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

❌ Мелкий кегль. Кегль— это вертикальный размер буквы в пикселях. В настольных версиях сайтов обычно используется размер шрифта от 16 до 18 пикселей, а подписи к фотографиям могут быть 14 или 15 пикселей. При просмотре сайта с телефона кегль 14 и 15 выглядит слишком мелким, и пользователю приходится увеличивать масштаб пальцами, чтобы прочитать текст.

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

❌ Длинные строки. Если дизайнер использовал метод mobile first, может возникнуть проблема длинных строк. У мобильного телефона маленький, узкий экран, а контент часто располагается в одну колонку. В результате дизайнер может использовать всю ширину колонки, оставляя лишь крошечные поля.

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

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

Рекомендуемая длина строки для настольных сайтов — 60–70 символов с пробелами. Для мобильных версий лучше, чтобы длина строки не превышала 40–60 символов.

Как сделать адаптивную верстку сайта

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

Css3 — это последнее поколение каскадных таблиц стилей. С помощью css3 можно создавать правила, определяющие отображение элементов веб-страницы.

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

Теперь, когда появился css3, программисты могут создавать различные классы для соответствия определенному разрешению экрана (media queries).

При использовании css3 размеры объектов указываются в процентах, а не в пикселях, как в css2.

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

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

Ничего сложного: просто создали контейнер для «упаковки» картинки.

• CSS

1 div {

2    width: 100%;

3    text-align: center;

4 }

5 div img {

6   width: 100%;

7   height: auto;

8 }

Ширина контейнера div должна быть установлена равной ширине изображения img, так что img будет уменьшаться/увеличиваться по мере уменьшения/увеличения div.

Это означает, что у нас есть изображение, которое заполнит весь экран независимо от разрешения, даже если оно составляет 320×240 пикселей или 1920×1080.

При изменении разрешения экрана качество изображения снижается. Например, при высоком разрешении изображение становится растянутым, а при низком — сжатым.

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

• CSS

1 div {

2    margin: 0 auto;

3    width: 1000px;

4   max-width: 90%; /* контейнер не превышает 90% ширины экрана */

5   min-width: 500px;

6 }

7 div img {

8   max-width: 100%;

9    height: auto;

10 }

Мы заставили наш контейнер изменять края «пакета» в пределах 500–1000 пикселей (оптимальные значения). Изображение будет меняться вместе с контейнером.

Адаптивная верстка сайта подразумевает работу со всеми материалами сайта. Усложним задачу и создадим мини-галерею.

Руководствуемся уже знакомыми принципами.

• CSS

1 div.image_gallery {

2   margin: 0 auto;

3   width: 1000px;

4   text-align: center;

5   max-width: 90%; /* контейнер не превышает 90% ширины экрана */

6  min-width: 500px;

7 }

8 img {

9   float: left;

10  max-width: 48%;

11  height: auto;

12  padding: 1%; /* небольшие оступы для изображений */

13 }

Каждое изображение, попадающее в галерею, теперь будет «действовать» в соответствии с «действием» контейнера, изменяя свой размер. Мы установили небольшой отступ с каждой стороны (всего 1%), чтобы изображение выглядело лучше.

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

Но работа еще не завершена.

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

Совет эксперта

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

Вывод

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