что такое адаптированная версия
Адаптивный дизайн, респонсив и мобильная версия: зачем это нужно и в чём различия
В мобильнике современного человека умещаются банк, супермаркет, почта и библиотека. Всё благодаря адаптивному дизайну.
Что такое адаптивный дизайн?
Это способ корректно отображать интерфейс сайта на любых устройствах. Дизайнер отрисовывает отдельные макеты веб-страниц для смартфонов, планшетов и компьютеров. Разработчик при вёрстке задаёт для каждого макета соответствующие размеры и разрешение экрана. Когда пользователь заходит на сайт, система распознаёт тип его устройства и показывает подходящий вид интерфейса.
Значит, в адаптивном дизайне каждую страницу отрисовывают трижды: для ПК, смартфона и планшета?
Нет, необязательно. Ведь, например, размеры экранов старых и новых смартфонов различаются. Планшет имеет вертикальную и горизонтальную ориентацию. А у экранов Apple разрешение больше, чем у других. Если нужно безупречное воспроизведение какого-нибудь сложного интерфейса на всех устройствах, макетов может быть гораздо больше трёх. Часто отрисовывают шесть макетов под самые популярные форматы.
А если веб-страницы простые, дизайнер может сделать всего два макета — с горизонтальной и вертикальной ориентацией. Но разработчик потом всё равно будет их незначительно изменять под все необходимые размеры.
Пишет о дизайне в Skillbox, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.
Чем различается дизайн для разных экранов?
На маленьких экранах многие элементы уменьшают. Но если бы весь десктопный сайт на смартфоне просто уменьшился, вряд ли пользователь смог бы что-то разглядеть. Поэтому размер элементов меняют не прямо пропорционально размеру экранов, а незначительно, чтобы было удобно читать и смотреть. А чтобы всё уместить, изменяют расположение блоков.
На экране ПК пользователь, не перелистывая, видит много информации: заголовки, тексты, картинки, иконки, кнопки. Со смартфона одновременно видно меньше элементов — всё рассчитано на скроллинг.
Блоки чаще всего располагают вертикально один за другим. А менее значимые элементы скрывают, например, в контекстное меню — чтобы не загромождать пространство. При необходимости пользователь может кликнуть на меню и добраться до нужного элемента.
Можно пример адаптивного дизайна?
Пожалуйста, вот сайт сети аптек:
А функциональность адаптивных сайтов различается на разных устройствах?
Обычно все версии идентичны. Люди привыкли делать со смартфонов всё то же самое, что и с компьютера: от покупок в интернет-магазинах до рабочей коммуникации. С какого бы устройства человек ни зашёл на сайт, он не должен быть ограничен.
Но это идеальный расклад. В действительности иногда функциональность для смартфонов урезают. Скажем, расширенный поиск со множеством параметров трудно сделать удобным на маленьком экране.
Логично! А все сайты адаптируют для разных девайсов или некоторые заточены подо что-то одно?
В большинстве случаев отображение на разных экранах — это мастхэв для современного сайта. Но бывают исключения. Например, иногда сайт нужен только для пользователей смартфонов. На некоторые лендинги пользователи попадают, сканируя QR-коды с упаковок или вывесок — сделать это с ПК нельзя, и адаптировать сайт для компьютера нет смысла.
Для отдельных компаний, наоборот, пользователи ПК могут быть в приоритете, и сайт сделают только в десктопной версии. Но таких сейчас всё меньше. Мобильный трафик в среднем уже превышает десктопный. Более того, поисковики учитывают этот фактор в ранжировании — преимущество отдают сайтам, которые удобно просматривать со смартфонов.
Значит, все современные сайты используют адаптивный дизайн?
Почти. Адаптивный дизайн — самый распространённый способ «подогнать» интерфейс под разные экраны. Но он не единственный. Есть ещё респонсивный дизайн и мобильные версии сайтов.
Хм, ладно, пойдём по порядку. Что ещё за респонсивный дизайн?
Это способ корректно отображать интерфейс, при котором сайт сам подстраивается под любой размер и разрешение экрана. Для этого используют программный модуль: он растягивает или сжимает один и тот же макет.
Должно быть, это удобнее, чем рисовать несколько макетов?
Да, эта технология проще и дешевле. Но есть и минусы.
Такие сайты больше весят и дольше загружаются. В случае с адаптивным дизайном загрузить надо один оптимизированный макет, и это происходит быстро. Если у сайта респонсивный дизайн, то макет с максимальным размером и разрешением загружается и сжимается — на это нужно больше времени.
А ещё респонсивный дизайн подходит не для всех сайтов. Если вёрстка сложная, страницы не будут красиво сжиматься автоматически.
Как выглядят респонсивные сайты?
Вот, например. С ПК видно по три изображения по горизонтали, а меню вверху развёрнуто. С мобильного меню скрыто, и мы видим по одной картинке на всю ширину экрана:
Понятно. А что собой представляют мобильные версии сайтов?
Мобильной версией называют отдельный мобильный сайт со своим адресом. Это ещё одна альтернатива адаптивному дизайну. Дизайн и функциональность мобильных версий могут кардинально отличаться от дизайна и функциональности десктопного сайта, нет никаких ограничений. А ещё пользователь может сам выбирать, с какой версии зайти: при желании можно открыть мобильный сайт с ПК или десктопный — со смартфона. Известный пример — мобильная версия «ВКонтакте» с отдельным адресом m.vk.com.
Мобильные версии часто используют?
Нет, достаточно редко. Они дороги в разработке — это полноценный второй сайт. Кроме того, наличие отдельного адреса — это иногда минус, пользователь может запутаться.
Выходит, адаптивный дизайн оптимален по соотношению цены и возможностей?
Это зависит от нужд конкретной компании, но большинство используют его. Он дороже респонсивного, но дешевле мобильной версии. Для любых нестандартных дизайн-решений можно настроить правильное отображение, а страницы у пользователя быстро грузятся.
Кто создаёт адаптивные сайты?
Чтобы сделать красивые и функциональные веб-страницы для разных экранов, нужны навыки дизайна и программирования. Сначала надо отрисовать внешний вид макетов, а потом воплотить задумки в коде. Адаптивные сайты может создавать команда узкопрофильных спецов или один разработчик со знаниями в дизайне.
обложка: Анастасия Телесницкая для Skillbox Media
Адаптивная версия сайта интернет-магазина: основные принципы, правила и ошибки разработки
Из общего количества посетителей коммерческих сайтов примерно 30-40% – пользователи мобильных устройств. Учитывая ежегодное увеличение этих цифр, работа над данным сегментом стала перспективным направлением развития в сфере e-commerce. Степень вовлечения мобильного трафика зависит от качества юзабилити, которое должно быть одинаково удобным для юзеров ПК и владельцев всевозможных гаджетов. Решить такой вопрос поможет адаптивная верстка.
Что такое адаптивная версия сайта
Главная цель адаптивной верстки – разработка функциональной веб-страницы, способной динамически подстраиваться под различные форматы экранов. Корректное отображение сайта на мобильных устройствах достигается за счет выполнения ряда определенных операций. Автоматическая адаптация под параметры и возможности гаджета улучшает пользовательский опыт посетителей, благоприятно сказывается на SEO, скорости работы площадки.
Компоновка содержания для каждого аппарата происходит индивидуально. К примеру, на смартфоне текстовый контент отображается в виде одной колонки, планшете – в виде двух, ноутбуке, стационарном компьютере – в оригинальном варианте на весь экран. Аналогичным образом адаптируются прочие детали веб-ресурса – кнопки, призывы к действию, изображения, шрифты, анимации, навигационные элементы. Меняется их вид, расположение, размеры, способ отображения.
Верстальщики создают адаптивную версию ресурса с помощью языка разметки HTML5, каскадных таблиц CCS3. Данные технологии позволяют настраивать нужные параметры, месторасположение объектов.
Разработка адаптива – достаточно специфический, трудоемкий процесс, качество выполнения которого влияет на правильность функционирования веб-ресурса в дальнейшем. Не имея опыта в программировании и верстке, лучше поручить его опытным профессионалам, четко изложив суть, ключевые цели и пожелания относительно проекта. Стоимость реализации определяется конкретными правилами изменения ресурса для разных форматов, способом размещения элементов, уровнем верстки, имеющимся дизайном.
Почему интернет-магазин должен быть адаптивным
На данный момент адаптивный дизайн – не просто модный тренд, а и серьезная необходимость в области электронной коммерции.
Посещая онлайн-магазин, потенциальные клиенты ожидают увидеть удобную площадку с понятным пользовательским интерфейсом. Важно не разочаровать их: не вынуждать к дополнительному скроллингу, увеличению изображений, долгому поиску нужных кнопок. Необходимо дать возможность владельцам мобильных гаджетов находить интересующую информацию и знакомиться с материалами не менее легко, просто и быстро, чем через ПК. Иначе большинство покупателей, не раздумывая, уйдут к конкурентам. В результате – нежелательный рост процента отказов, неизбежная потеря вероятной прибыли.
Помимо улучшения пользовательского опыта, наличие адаптивной версии дает интернет-магазину массу преимуществ:
Чтобы понять, нужен ли адаптив конкретному интернет-магазину, следует проанализировать конкурентов, исследовать данные веб-аналитики. Если доля посетителей площадки со смартфонов и планшетов выше 10%, самое время приступить к разработке адаптивной версии. В некоторых специфических нишах процент мобильного трафика бывает низким. Однако в большинстве направлений объем этого сегмента аудитории достигает трети от общего количества посетителей и продолжает расти.
Существуют случаи, в которых адаптив противопоказан:
Что лучше: адаптивный дизайн или мобильное приложение
У адаптирующегося дизайна есть две альтернативы – мобильная версия и приложение. Первый вариант не совсем практичный, поскольку предполагает разработку фактически еще одного сайта, который нуждается в отдельном обслуживании. Второй – не особо выгодный в финансовом плане. Создание мобильного приложения обходится в кругленькую сумму порядка 2-5 тысяч долларов и выше.
У альтернативных вариантов есть еще несколько минусов:
Адаптивная верстка подразумевает единую систему управления, наполнения сайта, делает его гибким, функциональным, наделяет универсальностью. Адаптив дешевле в реализации. Функция автоматической подгонки под браузер убирает необходимость тратить время на разработку нескольких версий веб-сайта, отдельную настройку, дополнительные вмешательства со стороны пользователя и администратора.
Но есть и нюансы. В силу новизны технологии у многих специалистов маловато опыта в ее реализации. Поэтому к выбору исполнителя стоит подходить очень тщательно, предварительно изучая портфолио и отзывы реальных клиентов.
Адаптивная верстка не позволяет выбирать между настольной и мобильной версиями. При неудачно спроектированном интерфейсе и отсутствии выбора пользователь скорее всего закроет страницу интернет-магазина в первые минуты.
Правила разработки и основные принципы адаптива
Продумывая адаптивную версию онлайн-магазина, нужно четко понимать различия между качественным юзабилити мониторов гаджетов и ПК. Также следует обращать внимание на веб-аналитику, проверять, с каких устройств пользователи зачастую посещают сайт. Это поможет определить распространенные разрешения экрана, на которые нужно ориентироваться в процессе разработки (440, 768, 980, 1220 px), выявить приоритетные потребности аудитории.
Данные, полученные при анализе поведенческих факторов, учитываются в период формирования проекта адаптивной версии в первую очередь. В дальнейшем на основании аналитики проводятся регулярные доработки, оптимизирующие магазин под нужды покупателей.
Процесс разработки ресурса с отзывчивым дизайном отличается не совсем традиционным подходом, имеет большее количество стадий. Он состоит из нескольких условных этапов:
В ходе разработки используются разные типы адаптирующихся макетов. Так называемая резиновая верстка позволяет сжимать/расширять ключевые блоки и изображения под размер экрана. При невозможности сжатия блоки выстраиваются в виде ленты. На страницах с множеством колонок применяется перемещение блоков: при уменьшении экрана они переносятся вниз (оптимально для интернет-магазинов).
В проектировании простых сайтов задействуют элементарную верстку, где типографика и изображения банально масштабируются. Реже всего адаптив реализуют достаточно сложным методом переключения, когда под каждый экран создается отдельный макет.
Кроме настраиваемых макетов, верстальщики внедряют скрипты или медиазапросы. С их помощью элементам дописывают определенные css-свойства, которые применяются при условии изменения формата экрана. Например, преобразуется размер и шрифт текста, вид и расположение блоков, скрываются/добавляются отдельные детали.
Готовый сайт должен соответствовать нескольким ключевым принципам:
В качестве отправной точки проектирования лучше брать небольшие мобильные экраны, а уже после масштабироваться на десктопную версию. Так будет легче подстроиться под оба канала и предотвратить возможные технические проблемы.
Типичные ошибки адаптивной верстки
При разработке адаптивного дизайна интернет-магазина часто совершаются похожие ошибки. Они снижают эффективность адаптива и доставляют пользователям некоторые неудобства. Перечислим нежелательные ситуации, которых нужно постараться не допускать:
Заключение
Эксперты утверждают: к 2021-2022 годам с мобильных гаджетов будет осуществляться до 70% сделок в e-commerce. Предлагаем не отставать от технологий и не игнорировать потребности целевой аудитории. Онлайн-магазин с адаптивным дизайном – отличная возможность приобрести товар максимально быстро и с минимальными усилиями, независимо от используемого гаджета и платформы. Эффективная обработка мобильного трафика с учетом разных сценариев и нюансов пользовательского опыта выведет на верный путь к повышению конверсии и наращиванию прибыли.
Адаптивный дизайн сайта: что это такое, как сделать верстку, принципы и примеры адаптивности веб-страниц
Пришло время решений, одинаково удобных и для мобильных устройств, и для стационарных компьютеров. Подробно рассмотрим адаптивный дизайн сайта: что он из себя представляет, по каким принципам строится, чем отличается от других, а также ответим на самые распространенные вопросы.
И сразу же об актуальности: сегодня он считается одним из весьма явных и даже ключевых показателей качества и современности корпоративного или частного web-ресурса во Всемирной Сети. Причем его разработка – это все еще сравнительно новое направление, и для него весьма характерны частые изменения различных мелочей. Но зато он ориентирован на перспективу – не только на те гаджеты, которыми мы пользуемся прямо сейчас, но и на те, что будем юзать лет через 5.
Что такое адаптивный веб-дизайн
Оформление сайта, при отображении которого страницы автоматически подстраиваются под разрешение и даже под текущий формат экрана устройства, а потому одинаково наглядно и удобно просматриваются на компьютерах или ноутбуках, на планшетах, смартфонах и даже телевизорах. Человеку, посещающему ресурс с телефона, не придется вручную расширять какую-то область, чтобы не промахнуться по нужной ссылке, все иконки и надписи будут четкими, а не размытыми, даже на ТВ с широкой диагональю, и так далее.
По-английски он называется Adaptive Web Design, и данный термин метко отражает, каким он должен быть – гибким и функциональным.
Зачем нужна адаптивная версия сайта
Ее стоит внедрить, как минимум, по трем причинам, каждая из которых достаточно важна сама по себе:
Преимущества и недостатки адаптивного дизайна
Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:
Минусы тоже есть, и это:
На практике достоинства гораздо существеннее недостатков.
Принципы адаптивной верстки
Разработчики стараются не только передать корпоративный дух, назначение и основные идеи проекта или обеспечивать его необходимым функционалом, но и снабдить его определенными свойствами, удобными для последующей универсальной подстройки.
Прочность
Мобильная версия должна быть схожей с десктопной по оформлению, но при этом важно, чтобы она оказывалась гораздо более компактной: чтобы при ее открытии со смартфона информационные блоки, смещаясь, автоматически выстраивались по вертикали – по порядку, так называемым потоком.
Относительность единиц измерения
Обязательно учитывайте, что 320 px разрешения на практике по-разному выглядят на айфоновском дисплее и на широкоформатном мониторе компьютера, поэтому следует задавать масштаб с координатами относительно тех объектов, что есть на каждом устройстве. Стандартом сегодня является верхняя граница экрана – равняются именно по ней.
Использование контрольных точек
Осуществляется привязка к тем элементам, местоположение которых остается статическим до тех пор, пока не будет выполнен вход с другого гаджета. Это своеобразные фиксаторы, и они не дают изображениям «уползать» за границы.
Максимальные и минимальные значения
Можно задать лимиты ширины и высоты пикселей, чтобы текстовая информация (и другой контент) либо корректно отображалась на весь дисплей, либо на его часть, но не растягивалась и оставалась читабельной.
Вложенность объектов
Если один блок зависит от размещения другого, их допустимо отправлять в общий контейнер, чтобы они были взаимосвязаны, и тогда их не придется подстраивать. Такой прием работает с кнопками, лого, да много чем еще.
Правильные шрифты
Их можно перевести в web-формат, чтобы они автоматически увеличивались/уменьшались, исходя из диагонали экрана. Но помните, что тогда они будут подгружаться, тогда как адаптивный сайт – это ресурс, контент которого отображается не только корректно, но и быстро (современный пользователь точно не станет долго ждать, чтобы посмотреть страницу, а уйдет искать другую).
Грамотное использование графики
Если изображение детализированное, стоит сделать его растровым, если же нет – векторным. И каждую картинку лучше оптимизировать, то есть сжать, но так, чтобы ее поддерживали даже старые браузеры.
Выдерживание размеров макетов
Важно соблюсти подходящее разрешение – среди стандартных вариантов:
Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.
Правильные медиазапросы
С их помощью при создании ресурса задаются:
На каждый будут подгружаться соответствующие стили CSS-языка.
Размеры макетов
Еще одно, заслуживающее отдельного внимания, правило адаптивного дизайна – это mobile first: в первую очередь разрабатывают решения под мобильные, и уже потом, на их основе, делают связанную с ней десктопную версию. Шаблоны разделяются (по ширине экрана) на 6 вариантов, растущих следующим образом, в пикселях:
Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.
Viewport и Media query
Это важные параметры, которые необходимо правильно задавать. Первый – это мета-тег, говорящий браузеру о том, нужно ли увеличивать/уменьшать страницу, и как отображать присутствующие на ней объекты. Его следует записать в таким образом:
Первая часть после него определяет, что ширины растягивания контента и экрана совпадают, вторая устанавливает масштаб 1 к 1.
Также верстка адаптивного сайта подразумевает использование css3 медиазапросов. Выше мы определили, что они должна включать в себя, теперь посмотрим способ их записи:
@media screen and (max-width: 768px) <
При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).