Пользователи заходят на сайты с устройств, которые обладают экранами разных типов — телефонов, ноутбуков, стационарных компьютеров и других. Важно, чтобы на каждом из них страницы отображались так, чтобы было удобно читать текст, рассматривать картинки и заказывать товары. Для этого фронтенд-специалисты и дизайнеры создали немало способов оптимизации, среди которых особое место занимает адаптивная верстка. Сегодня расскажем, как она делается и в чем ее плюсы.
История возникновения
На заре интернета никто не знал, что значит словосочетание «адаптивная верстка». В ней просто не было нужды — сайты выглядели минималистично и открывались только на стационарных ПК. Но время шло, страницы заполнялись все более сложной графикой, а вместе с этим появлялись новые устройства для выхода в интернет — вначале ноутбуки и мобильные телефоны, а затем смартфоны и планшеты. Владельцы сайтов стали сталкиваться с ситуациями, когда на маленьких экранах ресурсы отображались некорректно, а пользователям было трудно взаимодействовать с элементами страниц. Возникла потребность в оптимизации сайтов для мобильных устройств — и фронтэнд-специалисты начали разработку решений, благодаря которым интернет-страницы смогли бы сохранить свою красоту и функциональность на любых экранах.
Первыми появились отдельные мобильные версии. Они существовали параллельно с десктопными и предназначались специально для пользователей портативных устройств. Однако разработка отдельных мобильных версий была крайне затратным делом, и позволить ее себе могли только владельцы крупных сайтов. Проблема нуждалась в более универсальном решении, которое бы не потребовало больших финансовых вложений.
Фронтенд-специалисты начали постепенно отказываться от отдельных мобильных версий в пользу сайтов, которые сами могли бы подстраиваться под экраны пользователей. Вначале появились так называемые «резиновые» страницы — при их уменьшении картинки, текст и другие элементы также изменялись в размерах, но продолжали полностью отображаться. Однако у этого метода были свои изъяны — после уменьшения нормально отображались только простые сайты с одной колонкой текста, заголовком и парой картинок. Те страницы, которые имели много элементов, попросту становились трудночитаемыми.
Тогда и возникла адаптивная верстка, когда заранее делается несколько макетов страницы и при открытии сайта используется тот, который лучше других подходит для экрана устройства.
К плюсам этого метода относят:
- Сохранение целостности внешнего вида. Благодаря готовым макетам размер текста останется удобным для чтения, картинки будут сразу показываться полностью, а элементы оформления не начнут смещаться.
- Относительную простоту реализации. Не нужно разрабатывать с нуля отдельный сайт — достаточно настроить несколько шаблонов отображения для уже существующего.
- Помощь в расширении аудитории сайта. Сейчас, по данным «Яндекса», около 66% пользователей выходят в интернет с мобильных устройств. Страницы, с которыми неудобно взаимодействовать, попросту не будут им интересны. Однако если ваш сайт получит адаптивную верстку, велика вероятность, что на него придут новые посетители.
- Приоритет в поисковой выдаче. Способность адаптироваться под разные экраны — важный параметр сайта, на который обращают внимание поисковые роботы «Яндекса» и Google. Если адаптивная верстка выполнена качественно, выше вероятность, что ресурс получит хорошую позицию на поиске.
Ресурсы с несколькими вариантами отображения охватывают более широкую аудиторию, чем те, которые разрабатывались исключительно для десктопов или мобильных устройств. Далее расскажем, как создаются версии сайтов, заточенные под разные экраны.
Как сделать адаптивную верстку
Главный инструмент, который потребуется — графический редактор Figma. Он предлагает большой выбор шаблонов, на основе которых создаются макеты для отображения сайта на экранах разного типа. Эти шаблоны выглядят как рамки (фреймы), внутри которых вы сможете разместить графические элементы страниц и скорректировать их так, чтобы они смотрелись органично.
Среди доступных к выбору шаблонов легко запутаться, поэтому для начала лучше всего воспользоваться теми, которые считаются наиболее универсальными:
- Для мобильной версии обычно используются шаблоны, ширина которых рассчитана на диапазон от 375 до 960 пикселей.
- Версии для планшета потребуется шаблон на размер от 960 до 1200 пикселей.
- Десктопная версия самая большая — ее ширина составляет от 1200 до 1920 пикселей. Однако разработчики часто отдают предпочтение шаблону на 1600 пикселей.
Значения в 375, 960 и 1200 пикселей еще называют брейкпоинтами, так как они обозначают четкие границы возможных размеров версий сайта. Иными словами, мобильная версия не может превышать 960 пикселей, а десктопная всегда больше или равна 1200 пикселей в ширину. Также достаточно часто используются шаблоны на 992, 768, 576 и 376 пикселей.
В первую очередь лучше сделать версию для стационарного ПК — она получится самой крупной и подробной, поэтому на ее основе будет удобно создавать макеты меньшей ширины. Некоторые разработчики ставят в приоритет версию для показа на мобильных устройствах и сначала моделируют именно ее, однако такое случается нечасто.
Количество макетов будет зависеть от размера сайта — для небольшого лендинга достаточно двух (один для показа на ПК, а другой — на смартфонах), а крупному многостраничному ресурсу потребуется от трех и более. При работе с макетами для адаптивной верстки придерживайтесь следующих правил:
- Все версии должны иметь один дизайн оформления. Это касается таких элементов как цвет фона, шрифт текстов, начертание логотипов. Если в верстке сайта для мобильного устройства они будут отличаться от десктопных, пользователь может решить, что попал на страницу мошенников, и поспешит уйти.
- Функционал версий должен совпадать. Важно проследить, чтобы при отображении страницы на мобильном устройстве сохранились все необходимые фильтры, кнопки и формы заказа, способы показа контента. Иначе пользователи не задержатся надолго.
- Содержание версий не может отличаться. Открывая одну и ту же страницу с компьютера и с телефона, пользователь должен видеть одинаковую информацию. Если данные не будут совпадать, это снизит доверие к сайту.
- Иерархию элементов следует сохранить. Иными словами, если в десктопной версии сначала идет заголовок, затем текст, а после него форма заказа, в мобильной должно быть точно так же.
- Высота и ширина элементов, на которые можно нажимать, в верстке для мобильного устройства должны быть больше 44 пикселей. В противном случае посетитель сайта просто не сможет попасть пальцем по кнопке или строке меню.
- Для мобильной верстки не нужно много колонок. Обычно достаточно от одной до четырех. В десктопных версиях их около 12, а на планшетах — шесть.
- Важно учитывать особенности расположения контента. На десктопах отдельные информационные блоки (например, карточки с товарами) размещаются горизонтально, в несколько рядов, а на смартфонах — вертикально, в одну колонку. Так их лучше видно на небольшом экране и не возникает неудобств с прокруткой.
- Не стоит забывать о всплывающих подсказках, которые упрощают навигацию по сайту. В мобильной версии важно выбрать такой значок для их вызова, на который легко нажать пальцем.
При соблюдении этих правил даже начинающий дизайнер сможет сделать макет адаптивной верстки, который технические специалисты воплотят в жизнь без особых затруднений. Однако никто не застрахован от обидных ошибок, приводящих к переделке макета или внесению корректировок уже на сайте. Так, могут возникнуть сложности со следующими элементами:
- Изображениями. Чтобы они поместились на экране мобильного устройства, потребуется кадрирование либо пропорциональное уменьшение. Первый способ стоит использовать только в том случае, если при обрезке не теряются важные элементы картинки. Он особенно пригодится, когда большое место отведено надписи — из-за уменьшения без обрезки она может стать слишком мелкой. А при отсутствии текста на изображении лучше использовать пропорциональное уменьшение. Тогда картинка на мобильном устройстве будет видна целиком и никакой важный элемент не пострадает.
- Шрифтами. Их размер измеряется количеством пикселей в букве по вертикали и часто обозначается термином «кигель». На десктопах обычно используются шрифты размером от 16 до 18 пикселей для основного текста, и 14-15 — для подписей к картинкам. Однако с маленьких экранов текст 14-15 кигеля трудно читать, поэтому при подготовке версий, предназначенных для смартфонов, лучше использовать более крупные шрифты.
- Заголовками. Создание макета часто начинается еще до завершения всех текстов, которые будут размещены на сайте. Из-за этого дизайнер может оставить слишком мало свободного места под заголовок, и позже верстку придется корректировать. Чтобы такие меры не потребовались, сделайте отступ достаточно крупным — тогда поместится любой текст.
- Длиной строк. Мобильные устройства имеют узкие, вытянутые вверх экраны, поэтому строки текста располагаются на них во всю ширину, не оставляя по бокам свободного пространства. Однако с десктопными версиями так не получится — строки, растянутые от одной границы экрана до другой, будет тяжело читать. Их оптимальная длина для десктопов — 60-70 символов с пробелами, а для мобильных устройств — 40-60.
Для того, чтобы ошибки не появлялись на поздних этапах, когда уже сложно что-то изменить, все версии адаптивной верстки нужно своевременно тестировать. Так вы сможете точно убедиться, что на вашем сайте после завершения работ будет удобно пользователям любых устройств.
