Адаптивный дизайн — это дизайн сайта, который подстраивается под разрешение устройства, с которого выполнен вход на сайт. Расскажу о принципах проектирования адаптивных сайтов и зачем нужны разные версии сайтов. Скачайте PSD-исходник адпативного сайта.
Есть принцип «сначала мобильные», об этом есть полезная книга. Больше книг для дизайнеров в статье «книги для веб-дизайнеров». Книга хорошая, но её суть можно изложить в двух предложениях.
1. Компании, которые не делают мобильную версию сайта, теряют много денег.
2. Веб-разработчики и дизайнеры должны разрабатывать концепты сайта сначала для мобильных, потом для компьютеров.
Принцип «сначала мобильные» (или “mobile first”) основан на том, что самый важный параметр любого сайта — контент, то есть содержание вашего сайта. Он максимально важен и должен хорошо отображаться на любых устройствах. Когда начинаешь рисовать дизайн сначала для большого экрана, есть вероятность, что напичкаешь его совершенно ненужным контентом. Пропадают акценты. Помимо заголовков на первый план может выйти корзина или какие-то кнопки. Когда пользователь заходит на сайт, он не понимает с чего начать. Такая беспорядочная структура распространена на старых сайтах. Если начинаешь проектирование сайта с мобильной версии и у тебя мало пространства, ты сделаешь акцент на нужной вещи, будь то заголовок или какой-то товар. Принцип «сначала мобильные» дисциплинирует, когда создаешь макет.
Как выглядит адаптивный сайт
Есть один и тот же сайт, но на разных устройствах он выглядит по-разному:
Как адаптивный сайт выглядит на разных устройствах
Адаптивный дизайн, когда ваш сайт подстраивается под разные разрешения. Важно понимать, что у разных устройствах разрешение разное и надо стараться, чтобы на всех устройствах ваш сайт отображался корректно и удобно. Для этого есть 2 принципа, которых нужно придерживаться при создании адаптивного дизайна:
Принцип 1. Сначала мобильные
Принцип 2. Адаптивный контент
Как понять адаптивный сайт или нет
Мой блог, который ты сейчас читаешь, адаптивный. Чтобы проверить адаптивный сайт или нет, бери за край браузера и сжимай по горизонтали. Адаптивный сайт должен начать подстраиваться под новый размер браузера, а у обычного сайта, появится горизонтальная прокрутка. В определенный момент возникает ситуация, когда левое меню моего блога схлопывается и его не видно. Оно переходит на верх.
Блог перестроился версии для ПК на версию для планшета при сжатии браузера
Такие моменты перехода называют контрольной точкой или точкой перегиба. Если сжимать дальше (минимальный размер 460 пикселей), то можно увидеть как сайт будет отображаться на айфоне. Есть несколько точек перегиба, в которых меняется дизайн. Таким простым способом можно определить адаптивность сайта. Адаптивный дизайн — когда вы делаете не одну версию сайта, которая отображается везде одинаково, а несколько версий под разные устройства.
По принципу «сначала мобильные» нужно начинать с разработки версии для мобильного устройства (например, айфона), то есть с размер макета 460 х 960. Второй размер для планшета 768×1024, третий — разрешения ноутбука 1280×802. Последний контрольный размер 1600×992. Под эти разрешения нам нужно разрабатывать наши дизайн-макеты.
Создание адаптивного дизайна сайта в Фотошоп
Проектирование сайта для настольного ПК. Создаешь макет как обычно с использованием модульной сетки и 12 колонок.
Макет адаптивный дизайн сайта для ПК и ноутбука
Далее создаете новый файл с разрешением 768 х 1024 рх. Перестраиваешь макет сайта так, чтобы его было удобно смотреть в таком формате. Например, вынеси меню наверх. Следует учесть, что на планшетах люди будут работать не мышкой и стрелочками, а нажимать пальцами. Поэтому стоит сделать кнопки крупнее и не делать ссылки близко друг к другу. Обычным меню сайта уже будет не очень удобно пользоваться, поэтому лучше сделать раскрывающееся. Размер карточек товара не стоит изменять в размерах, можно уменьшить их количество в строке. Здесь в сетке уже не 12 колонок, а 9.
Адаптивный дизайн сайта для планшета
На разрешении для телефона ваш сайт должен стать еще проще. Остается логотип, корзина, меню, подписка и дальше идут товары с кнопкой «загрузить больше», чтобы не тратить деньги и время клиента на загрузку, возможно, ненужных ему страниц. Здесь остается двухколоночная верстка.
Адаптивный дизайн сайта для планшета
Поскольку это интернет-магазин, то проектирование удобнее начинать с компьютерной версии и постепенно сжимать до мобильной версии. Если вам надо сделать лендинг или сайт компании, то стоит начинать с компании.
Раньше люди отдельно создавали 2 версии сайтов: для компьютера и для телефона. Адаптивный дизайн позволяет делать 1 сайт, но с разрешениями для различных устройств.
Адаптивный контент
Если вы сделали блог и хотите, чтобы он удобно читался на всех устройствах, надо предусмотреть все возможные разрешения, на которых сайт будет открываться. После отрисовки макетов для всех устройств, верстальщик их превратит в действующий html. В коде есть возможность отключать ненужные элементы и я советую помимо адаптивного дизайна делать адаптивный контент. Допустим, у вас есть в интернет-магазине карточка товара для наушников. В версии для компьютера вы ставите фотографию, пишете название, цену, кнопку купить и большую таблицу с техническими характеристиками. Для мобильной версии сайта в той же карточке товара важно оставить название, фото, цену и кнопку купить. Характеристики, желательно, прятать в специальную вкладку, чтобы она дополнительно загружалась, при желании клиента. С телефона вся остальная информация избыточна и её тяжело читать, да и не заходят с мобильного для того, чтобы информацию читать. Если же человеку это действительно нужно прочитать, он сможет это подгрузить. Это принцип адаптивного контента. В мобильных версиях старайтесь использовать минимум контента. Исходи из принципа «было бы мне удобно?». Представляй себя человеком, который заходит на сайт в метро, одной рукой держится за поручень, другой открывает твой сайт. Было бы тебе удобно перемещаться по сайту и искать нужную информацию?!
Сервисы для тестирования адаптивного дизайна
Есть простейший сервис для презентации проектов заказчику. Вбиваешь адрес сайта и он показывает как сайт отображается на различных устройствах. Этот сервис хорошо помогает при презентации проекта, чтобы не читать заказчику лекцию про адаптивность, а просто показать на деле. Более продвинутый сервис, в нем крупнее все видно, он загрузит ваш сайт на разные устройства, можно посмотреть даже как он будет выглядеть в горизонтальном положении телефона или планшета.
Такие сервисы используются для готовых и сверстанных сайтов.
Дополнительная информация по адаптивному дизайну
Если понравилась статья и увлекла тема адаптивности дизайна сайтов, советую прочитать книги: «Сначала мобильные» и «отзывчивый веб-дизайн». Суть этих книг я кратко рассказал, но почитать советую, читаются легко и быстро. Можешь еще ознакомиться со статьей про тестирование адаптивного дизайна, есть примеры хороших сервисов для тестирования.
Не теряй деньги клиента из-за неудобного сайта, создавай адаптивные сайты и зарабатывай больше 🙂
