Как переделать сайт в адаптивный: scss — Как переделать под адаптивную верстку текущий сайт?

25.01.2023 alexxlab

Содержание

Адаптивный веб-дизайн

Опубликовано 02.10.2017

Чтобы переделать сайт с фиксированным дизайном в сайт с адаптивным дизайном, достаточно (но не обязательно) изменить только таблицу стилей CSS, не меняя код HTML.

Первый шаг — гибкие шрифты

Размер шрифтов указываем не в абсолютных единицах — пикселях, а в относительных — em.

Например, размер 2em означает, что размер шрифта должен быть в 2 раза больше размера шрифта контекста (шрифта родительского контейнера).

Второй шаг — гибкая сетка

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

Высоту блочных элементов и внешних полосок (margin), размеры внутренних (padding) полосок указываем не в абсолютных единицах — пикселях, а в относительных — в em.

Пример

 article {
width: 50%;
margin: 1em 5%;
padding: 1em 2em;
}

Третий шаг — гибкие картинки

Для картинок необходимо задать правило, которое запретит картинкам выходить за пределы родительского контейнера:

 img {
max-width: 100%;
}

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

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

Четвёртый шаг — медиа запросы (Media Queries)

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

Медиа типы
Медиа тип	Описание
all	все типы устройств
print	принтеры
screen	экраны ПК
speech	голосовые браузеры
Нерекомендуемые
braille	устройства Брайля для слепых
embossed	принтеры Брайля
handheld	мобильные устройства
projection	проекторы
tty	устройства с фиксированным размером символов (телетайпы и терминалы)
tv	телевизоры

Характеристики устройств
Характеристики	Описание	Значение	Префиксы `min-/max-`	Пример
width	ширина окна браузера	длина	+	1920px
height	высота окна браузера	длина	+	1024px
device-width	ширина дисплея	длина	+	10cm
device-height	высота дисплея	длина	+	25cm
orientation	ориентация устройства	portrait или landscape
aspect-ratio	соотношение ширины и высоты окна	отношение	+	16/9
device-aspect-ratio	соотношение ширины и высоты дисплея	отношение	+	1280/720
color	количество битов на цвет	количество цветов	+
color-index	количество цветов	целое число	+	256
monochrome	количество бит на пиксель для устройств с монохромными экранами	целое число (0 — для цветных дисплеев)	+
resolution	плотность пикселей	разрешение	+	300dpi, 118dpcm
scan	тип развёртки для телевизионных устройств	progressive (прогрессивная) или interlace (чересстрочная)
grid	тип устройства: grid или bitmap	1 — если устройство поддерживает только один шрифт (телетайп) 0 — для всех других устройств

Синтаксис медиа запросов

 @media not|only mediatype and (expressions){
    	CSS-Code;
}

Пример кода CSS

 /*Маленькие экраны c вертикальной ориентаций*/
@media screen and (max-width: 768px) and (orientation: portrait){
#wrapper{width: 100%;}
body{font: normal 80% verdana, sans-serif;}
aside{display: none;}
section{width: 95%;}
nav li, ul {display: block;}
}
/*Маленькие экраны c горизонтальной ориентаций*/
@media screen and (max-width: 768px) and (orientation: landscape){
#wrapper{width: 100%;}
body{font: normal 90% verdana, sans-serif;}
aside{display: none;}
 section{width: 95%;}
nav li, ul{display: inline-block;}
}
/*Средние экраны*/
@media screen and (min-width: 769px) and (max-width: 1279px){
#wrapper{width: 80%;}
body{font: normal 90% verdana, sans-serif;}
aside{width: 20%;}
section{width: 75%;}
nav li, ul{display: inline-block;}
}
/*Большие экраны*/
@media screen and (min-width: 1280px){
#wrapper{width: 70%;}
body{font: normal 100% verdana, sans-serif;}
aside{width: 25%;}
section{width: 70%;} 
 nav li, ul{display: inline-block;}
}

Как создать форум

Индексация веб-страниц

3 недостатка адаптивного дизайна по сравнению с мобильной версией — CMS Magazine

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

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

За последний год число «мобильных» пользователей Рунета выросло в разы. По данным liveinternet, с сентября 2011 по сентябрь 2012 с мобильных устройств (статистика по ОС) в интернет стали ежедневно выходить 12,6 млн вместо 4,8 млн человек. Это уже шестая часть всех активных участников Рунета, и их нельзя просто так взять и проигнорировать.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

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

Верстка на телефоне сжимается с трех до одной колонки-шахты и сокращает число изображений в нижней части экрана с шести до одного (пример с http://spigotdesign.com/)

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

m.shell.com — мобильная версия, копирующая контент полного сайта Shell практически без сокращений.

Недостаток 1: «Деревянная» подстройка под поведение телефонных посетителей

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

Возьмем для примера банки. С десктопа пользователи просматривают все разделы: ставки по вкладам, калькуляторы по автокредитам, РКО, контакты пресс-службы, даже изъятую у должников и выставленную на продажу недвижимость.

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

У разработчиков всегда есть выбор, как поступить с мобильными пользователями:

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

Недостаток 2: EDGE и 3G против красоты

Пока российские сотовики не выстроили повсеместно сети 4G, «вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. В автомобильной пробке под перегруженной базовой станцией лишние 200 Кб превращаются в полторы минуты ожидания.

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

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

Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная — еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти. В итоге получается ощутимо медленнее, и от этого страдают «телефонщики», ради которых все и затевалось.

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

Недостаток 3: Выхода нет

Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

Значение размера

Проблемы адаптивного дизайна незаметны на простых сайтах. Когда набор страниц ограничен главной, контактами и портфолио, нет смысла переделывать систему навигации: в трех соснах грамотный заказчик не потеряется. Вес сайта в килобайтах на таком масштабе невелик, на худой конец, им легко управлять. Нет нужды и в функции отключения мобильной версии. Если все выглядит хорошо, посетитель быстро прокликает на страницу контактов, а потом — finita la comedia, он забудет о вашем веб-ресурсе до следующего раза.

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

Мобильные версии крупнейших корпораций

Мы выбрали верхние 30 пунктов списка Global Fortune 500 и посмотрели, что крупнейшие корпорации мира используют для работы с мобильными посетителями. Для определения и поиска мобильной версии использовался эмулятор Cowemo Pixmobi, плагин User-Agent Switcher for Chrome, обычный Iphone 4 и поиск в Google по запросу с названием корпорации + mobile website.

Есть ли мобильные версии у сайтов крупных корпораций?

m. shell.com — мобильная версия, копирующая контент полного сайта Shell практически без сокращений.

Из 30 корпораций в списке 16 не сделали мобильную версию корпоративного веб-сайта. Большинство из них стали крупными без опоры на веб. И сегодня успех нефтегазовых и энергетических гигантов, возглавляющих список, слабо зависит от того, насколько пользователям удобно просматривать их глобальные корпоративные веб-ресурсы с мобильных телефонов. Но когда дело доходит до розницы, например, до путевых потребностей автомобилистов, производители бензина заказывают мобильные приложения и версии. Например, у BP есть подразделение Aral с сетью автозаправок в Германии и мобильной версией сайта http://mobil.aral.de.

Совсем другая картина в отрасли, где доходы напрямую зависят от качества сайтов. Например, все автоконцерны в списке (Toyota, Ford, GM, Volkswagen, Daimler) позаботились о создании мобильной версии для основного сайта. Можно предположить, что игроки авторынка, жестко борющиеся за покупателей, вынуждены более активно использовать инструменты розничного онлайн-маркетинга. Кроме того, сайты автоконцернов грешат использованием крупных изображений автомобилей, неудобных при просмотре с телефонов. Это заставляет их выбирать мобильные версии, а не адаптивную верстку.

От редакции

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

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

Подходы к созданию мобильных версий

m.shell.com — мобильная версия, копирующая контент полного сайта Shell практически без сокращений.

m.toyota.com — в центре мобильной версии сайта Toyota находится каталог продукции, но и другие разделы основного сайта присутствуют.

m. ing.com — версия нацелена на одну группу ЦА — инвесторов. Большую часть пространства занимает информация о биржевых котировках.

Инструменты адаптивного дизайна используются в списке очень мало. Например, ни один из сайтов не меняет изображения в зависимости от размеров экрана и не подключает другие таблицы стилей. Как правило, разработчики используют «резиновую» верстку (Газпром, General Electric), либо просто изначально делают сайт небольшого размера (Total, ExxonMobil).

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

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

Сайт Microsoft.com — яркий пример адаптивного дизайна. В большом окне элементы расположены горизонтально, а в небольшом телефонном — вертикальной «шахтой».

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

Хотя подавляющее большинство сайтов-лидеров используют мобильные версии, выбор Microsoft, Paypal, Apple и других в пользу адаптивного дизайна показывает, что не существует единого ответа на вопрос, как подстроиться под пользователей с мобильными устройствами. Пока быстрый интернет 4G и крупные экраны телефонов остаются доступными малой доле пользователей, мобильные версии продолжат доминировать на крупных и технологичных проектах. Но когда браузинг с телефона перестанет быть препятствием, адаптивный веб-дизайн начнет завоевывать позиции. В некоторых отраслях сферах это произойдет быстрее. Как обычно, будущее уже наступило, просто оно «не очень равномерно распределено».

Соавтор: Константин Дранч

Как работает адаптивный веб-дизайн

Не секрет, что все больше и больше людей выходят в Интернет, используя свои мобильные устройства в дополнение к настольным компьютерам или вместо них. На самом деле во всем мире насчитывается почти 7 миллиардов мобильных пользователей. (Для справки: в настоящее время население мира составляет 7,8 миллиарда человек. Это очень много мобильных устройств.)

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

40% потребителей используют свои мобильные устройства для проведения исследований перед совершением покупки лично. Более половины обычно совершают покупки с помощью своих смартфонов, а 55% покупателей совершают покупки с мобильных устройств, найдя товары в социальных сетях.

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

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

Что такое адаптивный веб-дизайн?
Почему адаптивный веб-дизайн важен
Как сделать адаптивный веб-дизайн
Рекомендации по адаптивному веб-дизайну
Адаптивные шаблоны веб-дизайна

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

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

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

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

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

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

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

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

Много клиентов — и доход.

Давайте рассмотрим три основных преимущества адаптивного веб-дизайна.

1. Адаптивный веб-дизайн помогает потребителям найти ваш сайт.

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

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

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

Показатель отказов веб-сайтов на смартфонах составляет почти 40% (по сравнению с 27% для планшетов). Кроме того, веб-страница, которая загружается менее чем за пять секунд, гарантирует увеличение времени просмотра на 70%.

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

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

3. Адаптивный веб-дизайн повышает узнаваемость бренда и доверие потребителей.

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

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

Как создать адаптивный веб-дизайн

Можно создать собственный адаптивный веб-сайт с помощью CSS и HTML. Но это все равно, что ехать по длинной проселочной дороге, когда есть скоростная автомагистраль. В этом случае скоростной дорогой будет система управления контентом (CMS) или конструктор веб-сайтов.

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

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

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

2. WordPress
WordPress — самая популярная в мире CMS, которая поддерживает эту превосходную степень, предлагая один из самых простых конструкторов веб-сайтов — редактор Gutenberg.
WordPress предлагает тысячи тем и шаблонов для начала, включая множество шаблонов с адаптивным дизайном. (Более адаптивные темы WordPress можно найти здесь и здесь.)
Источник
Примечание : После того, как вы настроили тему для своего веб-сайта WordPress, привлекайте и конвертируйте своих посетителей с помощью бесплатных форм, живого чата, электронного маркетинга и аналитики, добавив плагин HubSpot для WordPress.

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

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

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

1. Не пренебрегайте кнопками.
Что вы хотите, чтобы посетители сайта делали, когда они попадают на ваш сайт? Примите меры, не так ли? Это может быть нажатие на призыв к действию (CTA), например Узнать больше , Скачать или даже Купить .
Как посетители сайта взаимодействуют с этими кнопками на вашем настольном сайте? Если эти призывы к действию всплывают, прокручиваются или находятся внизу вашей веб-страницы, вам может потребоваться переоценить, как мобильные посетители могут получить к ним доступ.
Например, предположим, что вы предлагаете основной призыв к действию, такой как Загрузите HubSpot Free в верхней части сайта, где посетители смогут увидеть его на каждой странице.
Однако когда вы просматриваете свой мобильный сайт, он не помещается в заголовок. Вместо того, чтобы полностью удалять ее, подумайте о том, чтобы переместить кнопку или включить ее в свое гамбургер-меню (три строки в верхнем углу), где посетители все еще могут ее видеть и нажимать на нее.
Кроме того, учитывайте размер интерактивных областей на вашем мобильном сайте. В отличие от рабочего стола, где посетители могут использовать курсор мыши для нажатия кнопок и ссылок, они используют пальцы для навигации по вашему сайту на своем смартфоне или планшете.
Рекомендуется, чтобы кликабельные элементы на мобильных устройствах имели высоту не менее 48 пикселей. Сюда входят кнопки, поля форм, встроенные ссылки и навигация по меню.

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

3. Убедитесь, что ваши изображения масштабируются.
Иллюстрации и значки — не единственный тип мультимедиа, размер которого меняется на разных устройствах. Ваши изображения тоже должны масштабироваться.
Например, для настольных веб-сайтов могут потребоваться изображения с разрешением 1200 пикселей, тогда как для мобильных веб-сайтов могут потребоваться изображения с разрешением 400 пикселей. Использование большего разрешения на всех устройствах может замедлить скорость страницы, поэтому такой подход не рекомендуется.
Источник
Вместо этого рассмотрите возможность загрузки изображений с различным разрешением и укажите, какое изображение вы хотите отображать на каждом устройстве. Обычно это достигается путем назначения различных тегов «медиа» конкретным «исходным» объектам (например, планшету или мобильному телефону) в коде вашего веб-сайта.
Примечание : HubSpot позволяет автоматически изменять размер изображения в контенте — еще одна причина создать адаптивный веб-сайт на CMS Hub!

4. Подумайте о типографике.
Шрифт, который великолепно выглядит на вашем настольном сайте, может не так хорошо читаться на мобильном устройстве, размер которого в четыре раза меньше. Если посетители не могут читать ваш сайт, они, конечно же, не будут нажимать на него или покупать что-либо.
Источник
В качестве альтернативы, использование шрифтов вашего веб-сайта для мобильных устройств может привести к тому, что пользователи вашего настольного компьютера будут использовать уродливые слова, которые будут слишком большими и будут противоречить вашему бренду.
Вот наш лучший совет по типографике в адаптивном веб-дизайне:
Тип текста 16pt — это эмпирическое правило для настольного и мобильного веб-контента.
Избегайте очень тонких шрифтов, которые исчезают на небольших экранах.
Убедитесь, что все заголовки явно больше основного текста и подзаголовков.
Используйте контрастные цвета для типографики, чтобы она не сливалась с фоновыми цветами вашего сайта.

5. Воспользуйтесь преимуществами функций устройства.
Хотя потенциальные клиенты и клиенты не могут звонить вам со своих компьютеров, они определенно могут это делать со своих смартфонов. Рассмотрите возможность изменения вашего «Chat Now!» CTA с по «Позвоните сейчас!» и укажите свой рабочий номер телефона вместо электронной почты.
Кроме того, если у вашей компании есть мобильное приложение, предложите посетителям сайта открыть ваше приложение с вашего веб-сайта — то, что они могут не сделать на своих компьютерах.

6. Чаще проверяйте свой веб-сайт.
Как всегда, протестируйте адаптивный веб-сайт на разных устройствах и в разных браузерах. Воспользуйтесь инструментом Google Mobile-Friendly Test, чтобы узнать, как работает ваш сайт.
Этот удобный инструмент от Мэтта Керсли также позволит просматривать ваш веб-сайт на устройствах разного размера. Вы, конечно, можете использовать и собственные мобильные устройства.

Адаптивные шаблоны веб-дизайна
Лучший способ обеспечить адаптивность веб-сайта — начать с адаптивного шаблона веб-дизайна. Ниже представлены пять великолепных шаблонов, доступных на HubSpot Asset Marketplace, которые сделают просмотр вашего сайта удобным для мобильных устройств.
Получите доступ к тысячам шаблонов с HubSpot Marketing Professional.

1. Шаблон адаптивного дизайна DjanGo
Цена : $200
Шаблон DjanGo — это полностью настраиваемый и адаптивный шаблон сайта. Его современный минималистичный дизайн позволяет посетителям сосредоточиться на содержании вашего сайта и информации о продукте.

2. Шаблон адаптивного дизайна Prodigy
Цена : Бесплатно
Шаблон Prodigy — это чистый шаблон веб-сайта, который привлекает вашу аудиторию с помощью ярких медиа и нескольких CTA. Он автоматически преобразует свой дизайн, чтобы он подходил для любого устройства, используемого посетителями вашего сайта.

3. Шаблон адаптивного дизайна Quantum
Цена : 75 долларов США
Шаблон Quantum — это многоцелевая тема, привлекающая внимание аудитории жирными заголовками и фоновым видео. Настройте свой сайт с помощью различных макетов страниц и настраиваемых модулей.

4. Шаблон адаптивного дизайна Kalahari
Цена : $199
Шаблон Kalahari — это адаптивная тема, которая предлагает динамическую навигацию и настройку на уровне страницы. Используйте этот шаблон, чтобы преобразовать свою аудиторию с помощью ярких, выдающихся CTA.

5. Шаблон адаптивного дизайна Startup Framework
Цена : Бесплатно
Шаблон Startup Framework — это уникальный шаблон веб-сайта с ярким шрифтом и яркой графикой. Создавайте его в редакторе контента HubSpot и выбирайте из тысяч значков и десятков настраиваемых модулей.

Откликнитесь на свою аудиторию с помощью адаптивного дизайна
Когда так много потребителей совершают покупки и просматривают сайты на своих мобильных устройствах, адаптивный дизайн просто необходим. Без этого вы можете упустить потенциальных клиентов, клиентов и доход.
Используйте эти инструменты, шаблоны и рекомендации, чтобы начать работу с адаптивным веб-дизайном уже сегодня.
Примечание редактора: этот пост был первоначально опубликован в сентябре 2014 года и обновлен для полноты.
Темы: Отзывчивый дизайн
Не забудьте поделиться этим постом!
Адаптивный веб-дизайн (v.
1) — Документация Nicepage
Резюме
Обзор
Концепция адаптивного дизайна
Возможные проблемы
Перемещение блока
Переключение режимов
Поддерживаемые области просмотра
Использовать сетки
Макеты без сетки
Коробка для использования
Пустой блок
Блоки редактирования
Добавить контент
Добавить изображение
Добавить текст
Добавить кнопку
Тестировать мобильные просмотры
Полная настройка
Скрыть на устройствах
Распространенные ошибки
Удалить блоки
Сложные макеты
Предварительный просмотр сайта
Обзор
Сегодня очень важно, чтобы ваши посетители могли удобно читать содержимое вашего веб-сайта на разных экранах. Эта демонстрация покажет, как быстро и легко сделать адаптивный веб-дизайн.
<noscript><img loading='lazy' src='/800/600/http/marketplace.1c-bitrix.ru/upload/resize_cache/update/2a3/1024_600_175511db9cefbc414a902a46f1b8fae16/skrin_2_6_.jpg' /></noscript> youtube.com/embed/Hc2X3K3t4Fk» frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen=»»>
Адаптивная концепция
Что такое адаптивный веб-дизайн? Отзывчивый веб-дизайн — это то, как ваш сайт будет выглядеть на различных устройствах в мобильных представлениях.
Возможные проблемы
Если не следовать правилам адаптивного веб-дизайна, веб-сайты трудно читать из-за крошечных шрифтов, маленьких изображений и некоторых элементов, которые могут перекрываться.
Движение блоков
Для адаптивного веб-дизайна крайне важно понимать, что происходит с вашими данными в мобильных представлениях. Обычно ширина вашего сайта уменьшается, а блоки контента перемещаются один под другой.
Переключение адаптивных режимов
В рассмотренном пользовательском интерфейсе Nicepage есть специальная область для переключения мобильных представлений. Это позволяет просматривать и изменять дизайн для каждого конкретного вида. А вот так ваш сайт будет выглядеть на разных мобильных устройствах и на десктопе.
Давайте рассмотрим самые популярные мобильные представления (отзывчивые режимы), поддерживаемые Nicepage.
Поддерживаемые области просмотра
Первый вид — это вид рабочего стола, самая широкая поддерживаемая область просмотра. Далее следует вид «Ноутбук», вид «Планшет», затем «Пейзаж телефона» и, наконец, самый узкий и один из самых популярных современных экранов — вид «Портрет телефона».
Самый распространенный вопрос: как создавать сайты, которые красиво выглядят в адаптивных режимах? Если данные не помещаются на мобильных устройствах по ширине, нужно использовать макеты сетки или столбцы, другими словами. И мы объясним почему.
Использование сеток
Как сетка (столбцы) помогает с мобильными представлениями? Например, обычно имеется много данных контента, которые не помещаются на экране телефона. В Nicepage макеты сетки созданы таким образом, что при нехватке ширины экрана ячейки сетки автоматически перемещаются одна под другую. Мы рекомендуем использовать макеты сетки, чтобы сразу разместить ваш Контент на мобильных устройствах.
В Nicepage в диалоговом окне «Новый блок» большинство готовых блоков уже используют сетку. Добавляя эти блоки, вы можете не беспокоиться, так как все мобильные представления уже сделаны правильно, и вам не нужно ничего делать.
Добавить новый блок.
Выберите изображения.
Выберите тематическую категорию «Бизнес».
Выберите стиль слева.
Давайте добавим этот блок галереи с тремя изображениями.
Нажмите Готово.
Немного отрегулируйте поля блока.
В этом блоке используется сетка с тремя ячейками. Переключая Mobile Views, мы видим движение ячеек.
Макеты без сеток
Добавить блок
Некоторые блоки содержат меньше содержимого, например, блоки введения (или основного изображения).
Добавить новый блок.
Выберите изображение с текстом.
Выберите любой блок.
Нажмите Готово.
Use Box
В некоторых блоках вместо сетки используются контейнеры. Давайте добавим блок введения для демонстрации. При необходимости уменьшите высоту блока. Переключите представления, чтобы увидеть результат.
Пустой блок
Теперь давайте создадим простой блок с двумя ячейками, чтобы показать, как легко и быстро сделать адаптивный веб-дизайн с помощью Nicepage. Вот блок, который мы будем использовать в качестве примера.
Добавить новый блок.
Выберите Пусто.
Увеличьте высоту блока.
Добавить сетку.
Выберите Добавить -> Сетка.
В списке выберите Сетку с двумя ячейками.
Нажмите Готово.
Блоки редактирования
Сетки добавляются с фоновым изображением по умолчанию, поэтому ячейки легко распознать.
Уменьшить высоту сетки.
Выравнивание сетки в блоке.
Добавить содержимое
Во время перемещения вы видите красные магнитные направляющие и цифры, которые помогают выравнивать содержимое.
Добавить изображение
Замените изображение в левой ячейке, перетащив элемент изображения из локальной папки.
Выберите нужную ячейку.
Отключить заливку для этой ячейки.
Добавить текст
Добавить заголовок 2.
Щелкните Добавить элементы -> Текст -> Заголовок 2.
Изменить ширину текстового блока. Магнитные направляющие и размеры снова выгодны.
Введите текст заголовка.
Добавьте текст.
Нажмите Добавить-> Текст -> Текст.
Выровнять текст.
Изменить текст.
Кнопка добавления
В качестве альтернативы добавьте кнопку.
Щелкните маленький плюс в центре ячейки.
Выберите кнопку.
Выравнивание любой кнопки.
Изменить текст кнопки.
Выровняйте содержимое в ячейке.
Проверка мобильных представлений
Переключите мобильные представления, чтобы увидеть результат. Вы понимаете, что необходимые изменения макета для адаптивных режимов выполняются автоматически.
Полная настройка
Следует отметить, что все функции редактирования поддерживаются во всех мобильных представлениях.
Давайте переключимся на альбомную ориентацию телефона.
Изменить обрезку изображения.
Теперь измените размер заголовка.
Скрыть на устройствах
Вы можете скрыть любые элементы макета, ячейку изображения, для определенного вида, например, для телефона Альбомная. Также легко отобразить этот элемент обратно. При необходимости поменяйте местами ячейки одной строки.
Распространенные ошибки
Контейнеры не используются
Мы рассмотрим самые распространенные ошибки, которые допускают люди при создании макетов. Можно предпочесть не использовать Сеть. В Nicepage это возможно без каких-либо ограничений. Однако для этого требуется гораздо больше работы и модификации макета для каждого мобильного представления.
Добавление блока
Давайте посмотрим.
Добавить пустой блок.
Увеличьте высоту блока.
Добавить изображение.
Щелкните Добавить -> Изображение.
Выровняйте изображение и уменьшите его размер.
Выберите изображение.
Добавить и изменить содержимое
Добавить заголовок 2.
Нажмите Добавить элементы-> Текст -> Заголовок 2.
Измените размер и положение блока текста заголовка.
Видите ли, в отличие от сетки, это сложнее.
Изменить текст заголовка.
Добавить текст.
Щелкните Добавить элементы-> Текст -> Текст.
Изменить текст.
Добавить кнопку.
Щелкните Добавить элементы-> Кнопка.
Выравнивание кнопки.
Изменить текст кнопки.
Редактировать мобильные представления
Переключение мобильных представлений.
В режиме ноутбука переместите кнопку вправо.
В режиме планшета элемент Button снова не на месте.
Хуже всего обстоят дела с просмотрами телефона.
В альбомной ориентации телефона текстовый блок перекрывает изображение из-за недостаточной ширины.
Переместите, измените размер и вручную выровняйте текстовые блоки и кнопку.
Повторите все движения для портретной ориентации телефона.
Напоминаем, что поддерживаются все функции редактирования.
Давайте скроем и отобразим изображение в альбомной ориентации телефона для этого блока.
Готово.
Удалить блоки
Итак, давайте удалим этот блок.
Откройте меню Блок в Навигаторе страниц слева и
Выберите Удалить.
Сложные макеты
Есть современные Блоки со сложными макетами, которые не совсем вписываются в макеты сетки. Кроме того, в настоящее время перекрытие очень популярно в веб-дизайне. В конструкторе веб-сайтов Nicepage HTML сетки обычно не используются для блоков со сложным перекрытием. Тем не менее, мобильные представления для таких блоков также предварительно созданы.
Давайте добавим блок с перекрытием.
Добавить новый блок.
Перейти к перекрывающейся категории
Выберите блок.
Видите ли, макет этого Блока создан с использованием контейнеров. Переключите мобильные представления, чтобы увидеть, как перемещаются блоки.
Предварительный просмотр сайта
Наконец, просмотрите страницу.
Надеемся, вам понравилась эта демонстрация создания адаптивного веб-дизайна с помощью Nicepage.
См. также
Конструкторы Nicepage
Меню Nicepage
Контейнеры Nicepage
Сетки Nicepage
Блоки Nicepage
Nicepage на YouTube
Видеоуроки Nicepage
Конструктор веб-сайтов HTML
## Резюме — Обзор — Отзывчивая концепция — Возможные проблемы — Блокировать движение — Переключение адаптивных режимов — Поддерживаемые видовые экраны — Используйте сетки — Макеты без сетки — Используйте коробку — Пустой блок — Редактировать блоки — Добавить контент — Добавить изображение — Добавить тексты — Добавить кнопку — Тестировать мобильные просмотры — Полная настройка — Скрыть на устройствах — Распространенные ошибки — Удалить блоки — Сложные макеты — Предварительный просмотр сайта ## Обзор Сегодня очень важно, чтобы ваши посетители могли удобно читать содержимое вашего сайта на разных экранах. Эта демонстрация покажет, как быстро и легко сделать адаптивный веб-дизайн. ##
## ### Адаптивная концепция Что такое адаптивный веб-дизайн? Отзывчивый веб-дизайн — это то, как ваш сайт будет выглядеть на различных устройствах в мобильных представлениях. !response-concept.jpg! ### Возможные проблемы Если не следовать правилам адаптивного веб-дизайна, веб-сайты трудно читать из-за крошечных шрифтов, маленьких изображений и некоторых элементов, которые могут перекрываться. ### Блокировать движение Для адаптивного веб-дизайна крайне важно понимать, что происходит с вашими данными в мобильных представлениях. Обычно ширина вашего сайта уменьшается, а блоки контента перемещаются один под другой. !block-response.jpg! ### Переключение адаптивных режимов В рассмотренном пользовательском интерфейсе Nicepage есть специальная область для переключения мобильных представлений. Это позволяет просматривать и изменять дизайн для каждого конкретного вида. А вот так ваш сайт будет выглядеть на разных мобильных устройствах и на десктопе. Давайте рассмотрим самые популярные мобильные представления (отзывчивые режимы), поддерживаемые Nicepage. ## Поддерживаемые области просмотра Первое представление — это представление рабочего стола, самое широкое поддерживаемое окно просмотра. Далее следует вид «Ноутбук», вид «Планшет», затем «Пейзаж телефона» и, наконец, самый узкий и один из самых популярных современных экранов — вид «Портрет телефона». Самый распространенный вопрос: как создавать сайты, которые красиво выглядят в адаптивных режимах? Если данные не помещаются на мобильных устройствах по ширине, нужно использовать макеты сетки или столбцы, другими словами. И мы объясним почему. !блок-движение.jpg! ## Использовать сетки Как сетка (столбцы) помогает с мобильными представлениями? Например, обычно имеется много данных контента, которые не помещаются на экране телефона. В Nicepage макеты сетки созданы таким образом, что при нехватке ширины экрана ячейки сетки автоматически перемещаются одна под другую. Мы рекомендуем использовать макеты сетки, чтобы сразу разместить ваш Контент на мобильных устройствах. !сетка-макеты.jpg! В Nicepage в диалоговом окне «Новый блок» большинство готовых блоков уже используют сетку. Добавляя эти блоки, вы можете не беспокоиться, так как все мобильные представления уже сделаны правильно, и вам не нужно ничего делать. 1. Добавьте новый блок. 2. Выберите Изображения. 3. Выберите тематическую категорию «Бизнес». 4. Выберите стиль слева. 5. Давайте добавим этот блок галереи с тремя изображениями. 6. Нажмите Готово. 7. Немного отрегулируйте поля блока. В этом блоке используется сетка с тремя ячейками. Переключая Mobile Views, мы видим движение ячеек. ## Макеты без сеток ### Добавить блок В некоторых блоках меньше содержания, например, в блоках введения (или основного изображения). 1. Добавьте новый блок. 2. Выберите Изображение с текстом. 3. Выберите любой блок. 4. Нажмите Готово. ## Использовать коробку Некоторые блоки используют контейнеры вместо сетки. Давайте добавим блок введения для демонстрации. При необходимости уменьшите высоту блока. Переключите представления, чтобы увидеть результат. ## Пустой блок Теперь давайте создадим простой блок с двумя ячейками, чтобы показать, как легко и быстро сделать адаптивный веб-дизайн с помощью Nicepage. Вот блок, который мы будем использовать в качестве примера. 1. Добавьте новый блок. 2. Выберите Пусто. 3. Увеличьте высоту блока. 4. Добавьте сетку. 5. Выберите Добавить -> Сетка. 6. В списке выберите Сетку с двумя ячейками. 7. Нажмите Готово. ## Редактировать блоки Сетки добавляются с фоновым изображением по умолчанию, поэтому ячейки легко распознать. 1. Уменьшите высоту сетки. 2. Выровняйте сетку в блоке. ## Добавить контент Во время движения вы видите красные магнитные направляющие и цифры, помогающие выравнивать Контент. ### Добавить изображение Замените изображение в левой ячейке, перетащив элемент изображения из локальной папки. 1. Выберите нужную ячейку. 2. Отключите заливку для этой ячейки. ### Добавить тексты 1. Добавьте заголовок 2. 2. Щелкните Добавить элементы -> Текст -> Заголовок 2. 3. Измените ширину текстового блока. Магнитные направляющие и размеры снова выгодны. 4. Введите текст заголовка. 5. Добавьте текст. 6. Нажмите Добавить->Текст->Текст. 7. Выровняйте текст. 8. Измените текст. ### Добавить кнопку 1. В качестве альтернативы добавьте кнопку. 2. Щелкните маленький плюс в центре ячейки. 3. Выберите кнопку. 4. Выровняйте любую кнопку. 5. Измените текст кнопки. 6. Выровняйте содержимое в ячейке. ### Проверка мобильных просмотров Переключите мобильные представления, чтобы увидеть результат. Вы понимаете, что необходимые изменения макета для адаптивных режимов выполняются автоматически. ## Полная настройка Мы должны отметить, что все функции редактирования поддерживаются во всех мобильных представлениях. 1. Давайте переключимся на альбомный вид телефона. 2. Измените обрезку изображения. 3. Теперь измените размер заголовка. ## Скрыть на устройствах Вы можете скрыть любые элементы макета, ячейку изображения, для определенного вида, например, для телефона Альбомная. Также легко отобразить этот элемент обратно. При необходимости поменяйте местами ячейки одной строки. ## Распространенные ошибки **Контейнеры не используются** Мы рассмотрим самые распространенные ошибки, которые допускают люди при создании макетов. Можно предпочесть не использовать Сеть. В Nicepage это возможно без каких-либо ограничений. Однако для этого требуется гораздо больше работы и модификации макета для каждого мобильного представления. ### Добавление блока Давайте посмотрим это. 1. Добавьте пустой блок. 2. Увеличьте высоту блока. 3. Добавьте изображение. 4. Щелкните Добавить -> Изображение. 5. Выровняйте изображение и уменьшите его размер. 6. Выберите изображение. **Добавить и изменить содержимое** 1. Добавьте заголовок 2. 2. Нажмите Добавить элементы-> Текст -> Заголовок 2. 3. Измените размер и положение блока текста заголовка. 4. Видите ли, в отличие от сетки, это сложнее. 5. Измените текст заголовка. 6. Добавьте текст. 7. Нажмите Добавить элементы->Текст->Текст. 8. Измените текст. 9. Добавить кнопку. 10. Нажмите Добавить элементы->Кнопка. 11. Выровняйте кнопку. 12. Измените текст кнопки. **Редактировать мобильные представления** 1. Переключите мобильные представления. 2. В режиме ноутбука переместите кнопку вправо. 3. В режиме планшета снова элемент кнопки не на месте. 4. Хуже всего обстоят дела с просмотрами телефона. 5. В альбомной ориентации телефона текстовый блок перекрывает изображение из-за недостаточной ширины. 6. Переместите, измените размер и вручную выровняйте текстовые блоки и кнопку. 7. Повторите все движения для портретной ориентации телефона. 8. Напоминаем, что поддерживаются все функции редактирования. 9. Давайте скроем и отобразим изображение в альбомной ориентации телефона для этого блока.