Адаптивный дизайн сайта: задачи, элементы, особенности разработки

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

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

Понятие адаптивного дизайна сайта

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

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

Источник: shutterstock.com

Понятие «адаптивный дизайн сайта» появилось сравнительно недавно. Выделяют несколько условных этапов в истории становления этого процесса:

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

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

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

3. Адаптивный дизайн. Этап, сменивший «резиновые» сайты. Концепция адаптивного дизайна: для каждого экрана создается отдельный макет. Их должно быть как минимум два: для десктопной и для мобильной версий сайта, но можно и больше.

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

Плюсы и минусы адаптивного дизайна сайта

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

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

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

• Увеличение количества показов в аналитике поисковиков. Поскольку запросы с разных устройств, включая смартфоны и компьютеры, синхронизируются, то в аналитических отчетах Google и Яндекс наблюдается рост показателей сайта.

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

  
  

  Источник: shutterstock.com

• Упрощение администрирования. Предположим, вам нужно поменять стоимость товара в интернет-магазине. В таком случае новую цену нужно ввести только в одном месте, и она автоматически преобразится везде.

• Оптимизация продвижения в соцсетях. Так как страницы имеют одинаковый URL, количество лайков и репостов в разных социальных сетях увеличивается.

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

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

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

Дублирование контента десктопной и мобильной версий сайта

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

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

Неизменный дизайн

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

Это вводит посетителей в заблуждение: они могут подумать, что зашли со смартфона не на тот сайт или неправильно ввели запрос.

Сохранение иерархии элементов

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

Источник: shutterstock.com

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

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

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

Повторение функционала десктопного сайта

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

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

Уменьшение числа колонок

Когда разработчики верстают десктопные сайты, они пользуются сеткой, состоящей из 12 колонок. Мобильный экран не такой широкий, как экран компьютера, здесь достаточно не более 4 (обычно хватает одного столбика). Для экрана планшета применяется сетка, содержащая 6—8 колонок.

Источник: shutterstock.com

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

Первая подразумевает, что в мобильной версии элементы нужно располагать вертикально, даже если на десктопной они идут горизонтально, ведь на гаджете человек просматривает страницы сверху вниз, на ПК — слева направо. Карточки на компьютере стоят по 2-3 в строке, а на телефоне они — одна под другой (рядов здесь нет).

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

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

Этапы создания адаптивного дизайна сайтов

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

• Для смартфонов — не менее 360 пикселей. Чаще всего это 375 пикселей (самое распространенное разрешение для iPhone).

• Для планшетов — не менее 960 рх.

• Для мониторов — минимум 1440 пикселей. Для ПК это 1920 рх, для ноутбуков — 1440.

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

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

Источник: shutterstock.com

Принимать решение о базовой версии нужно с учетом:

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

2. Типа ресурса (интернет-магазин, сайт, В2В-кабинет). Например, на В2В-порталы пользователи чаще заходят с ПК (доля смартфонов составляет в этом сегменте не более 45 %), а вот в ситуации с интернет-магазинами мобильный трафик занимает 75—80 %.

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

Обязательные элементы, которые должны быть на экране смартфона:

1. Логотип небольшого размера, чтобы пользователь мог вернуться на стартовую страницу.

2. Меню-бургер, содержащее главные разделы сайта.

3. Кнопка «Позвонить» либо контактный телефон компании в формате «+7...».

4. Мессенджеры и онлайн-чат с менеджером.

5. Кнопка обратного звонка, оформления заявки или выполнения другого целевого действия.

Источник: shutterstock.com

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

• Использовать лаконичные формыс небольшим количеством полей (достаточно поля с именем и контактным телефоном). Для развернутой часто мало места.

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

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

• Указывать время, в течение которого пользователю поступит обратный звонок. Например: «Мы перезвоним вам не более чем через 5 минут».

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

• Размещать важные разделы, такие как «Цены», «Услуги», «Контакты», в начале списка. Для удобства пользователей внесите в меню поиск, режим работы компании, ссылки на мессенджеры и социальные сети.

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

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

Макеты для адаптивного дизайна

Каждый разработчик сам решает, как именно он будет делать адаптивный дизайн. Можно воспользоваться каким-либо способом от Люка Вроблевски, основателя концепции «Сначала мобильные!», либо создать собственный вариант. Рассмотрим некоторые макеты.

MostlyFluid (в переводе: «самый гибкий»)

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

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

Column Drop (в переводе: «сброс колонок»)

В шаблоне используется следующий принцип: при уменьшении размеров экрана колонки постепенно располагаются вертикально друг под другом (не одновременно, как в MostlyFluid).

Источник: shutterstock.com

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

LayoutShifter (в переводе: «сдвиг макета»)

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

Tiny Tweaks (в переводе: «маленькие хитрости»)

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

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

Off Canvas (в переводе: «за границами»)

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

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

ТОП-7 кейсов
из разных ниш с ростом
от 89% до 1732%

Узнать подробнее

Тестирование адаптивного дизайна сайта

После завершения верстки дизайн веб-ресурса необходимо апробировать. Тестирование выполняется по следующим направлениям:

• соответствие дизайну;

• выявление ошибок разметки CSS и HTML;

• кросс-браузерность;

• корректное функционирование на экранах разного размера.

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

• Google Chrome;

• Safari (macOS и iOS);

• Mozilla Firefox;

• Opera;

• Microsoft Edge.

Есть специальные сервисы, с помощью которых можно провести тестирование сайта, не устанавливая дополнительные программы. К таким относятся https://www.browserstack.com/, https://www.browserling.com/, http://browsershots.org/. Однако стабильность доступа к ним гарантировать нельзя, поскольку в основном они являются иностранными.

Источник: shutterstock.com

Неточности в HTML-коде помогает найти сервис https://validator.w3.org/ (бесплатный), а ошибки в CSS можно обнаружить с помощью https://jigsaw.w3.org/css-validator/.

Адаптивность также можно вручную проверить на различных устройствах, но сложность в том, что для этого нужно иметь рядом много разных гаджетов. Чтобы облегчить задачу, используйте инструменты разработчика (DevTools), встроенные в браузер. Алгоритм такой:

• зайти на сайт через браузер;

• нажать горячие клавиши:

1. дляmacOS — Cmd+Alt+I;

2. для Windows — F12;

3. дляLinux — Ctrl+Alt+I.

• включить режим адаптивного дизайна в открывшейся панели.

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

Проверить адаптивность можно не только инструментами разработчика, но и используя специальные онлайн-сервисы, такие как http://www.responsinator.com/.

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

Проблемы и ошибки адаптивного дизайна сайта

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

Сжатые изображения

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

Маленький шрифт

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

Неправильный размер заголовков

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

Источник: shutterstock.com

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

Неподходящая длина строк

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

Поэтому нужно соблюдать правило: на компьютерах строки с текстом должны состоять из 60—70 символов, а на мобильных устройствах — из 40—60. Иначе пользователям будет тяжело воспринимать материал.

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

Низкая скорость загрузки сайта

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

Источник: shutterstock.com

Какие меры предпринять:

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

• Минимизировать CSS/JS — нужно убрать из кода все лишние теги и символы, которые не оказывают влияния на функциональность сайта.

• Использовать «ленивую загрузку» (от английского «lazy loading») — элементы страниц открываются не одновременно, а по необходимости, позволяя ускорить открытие сайта.

Сложности с настройкой навигации на смартфонах

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

Какие меры предпринять:

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

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

Совместимость с разными браузерами

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

Какие меры предпринять: для старых бродилок применять полифиллы, префиксы-webkit-, -moz-.

Проблемы с таблицами

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

Какие меры предпринять:

• вместо таблиц использовать диаграммы, инфографику, аккордеоны(accordion), графики;

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

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

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

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

• Естественное изменение величины шрифта.

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

• Вертикально расположенное меню.

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

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

Источник: shutterstock.com

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

• Переключение навигационной панели на экране.

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

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

• Переключение навигационной панели с видимой на незаметную и наоборот.

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

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

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

• Перестройка навигации.

Актуальной тенденцией построения интерфейса является группировка элементов меню с изменением их расположения.

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

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

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Часто задаваемые вопросы об адаптивном дизайне сайта

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

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

Почему нужно отделять мобильные версии приложений от десктопных?

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

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

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

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

Этот подход предполагает применение чистого HTML и CSS. В CSS задаются правила изменения стиля в зависимости от того, какой размер экрана имеет устройство, используемое человеком.

Будет ли корректно работать адаптивный сайт в устаревших браузерах?

Да, будет. Старые версии IE не поддерживают медиазапросы HTML5 и CSS3, которые применяются в адаптивном дизайне. Но выход есть. Можно использовать такие средства модернизации как respond.js от JavaScript, чтобы подстроить HTML5 и CSS3 под IE6 и другие неактуальные версии.

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону