За несколько лет трафик со смартфонов значительно увеличился. Вот почему важно позаботиться о его адаптивном дизайне! Ваш веб-сайт может отлично выглядеть на компьютере, но нечитаемым на телефоне или планшете. Узнайте, что такое адаптивный дизайн и как его улучшить с помощью различных советов, и каковы альтернативы адаптивному дизайну для увеличения посещаемости вашего сайта!
Адаптивный дизайн: обзор
До появления мобильной сети ландшафт конечных устройств с доступом в Интернет был относительно однородным: ноутбуки и настольные компьютеры, которые были очень похожи с точки зрения носителей ввода и вывода. Оба типа устройств имели клавиатуру, мышь или трекпад, а также экран шириной 1000-2000 пикселей.
Тогда не нужно было прилагать особых усилий для разработки веб-страницы, которая корректно отображалась бы на любом устройстве. Самым простым решением было ограничить ширину страницы наименьшим общим знаменателем. Популярным подходом было отображение страниц шириной 800 пикселей с выравниванием по центру или по левому краю. На больших экранах может быть лишнее пустое пространство, но страницы легко читаются на всех устройствах.
Ситуация изменилась с появлением мобильных устройств и значительной диверсификацией конечных устройств. Экраны смартфонов и планшетов отличаются от экранов настольных компьютеров по нескольким параметрам.. Размеры пикселей теперь играют важную роль, и физическое разрешение (пикселей на дюйм, или ppi) также вошло в картину с появлением дисплеев Retina. И, конечно же, эти устройства управляются пальцем, а не мышью. Помимо смартфонов и планшетов на рынке также появились большие мониторы с высоким разрешением, а это значит, что современная веб-страница должна работать на экранах шириной от 320 пикселей до более 4000 пикселей.
| меньший экран | большой экран | Фактор | |
|---|---|---|---|
| До мобильного Интернета | ~1000 пикселей | ~2000 пикселей | ~2 |
| После мобильного интернета | ~320 пикселей | > 4000 пикселей | > 10 |
Адаптивная веб-страница соответствует доступному пространству на экране. В этом контексте часто упоминается «экранная недвижимость». Веб-страница должна хорошо выглядеть на всех устройствах и гарантировать оптимальное взаимодействие с пользователем (UX).
Адаптивный дизайн включает в себя широкий спектр технологий и подходов, которые объединяются для разработки полностью адаптивной веб-страницы. Это включает в себя:
- Элементы HTML5, такие как изображение, и атрибуты, такие как исходный набор и размеры
- CSS медиа-запросы
- Единицы CSS
- Использование нескольких активов из одного ресурса
- Мобильный подход
Почему веб-страница должна иметь адаптивный дизайн?
Разработка адаптивной веб-страницы дает несколько преимуществ. Основное соображение пользовательский опыт (UX). Теоретически вы можете реализовать хороший UX без адаптивного дизайна, но для этого потребуется собственная мобильная страница или использование JavaScript. В конечном счете, этот тип подхода будет намного сложнее, чем адаптивный макет на основе CSS, и потребует большего обслуживания.
Адаптивная веб-страница для оптимального дизайна
Дизайн веб-страницы играет важную роль в том, как посетители воспринимают информацию, представленную на странице. Хороший дизайн отражает личность организации, стоящей за веб-сайтом, и помогает связать пользователя с вашим брендом. Посетители должны иметь положительный опыт при посещении вашего сайта. Давайте рассмотрим два примера важности адаптивного дизайна для взаимодействия с пользователем:
- Давайте представим, что заголовок занимает весь экран на мобильном устройстве. Однако в десктопной версии тот же заголовок с тем же размером шрифта вообще не выделяется. В десктопной версии заголовок должен отображаться крупнее чтобы привлечь внимание посетителя.
- Давайте представим веб-страницу для блога, в которой рядом со статьями есть боковая панель. Боковая панель содержит ссылки на другие статьи с небольшими миниатюрами. В настольной версии боковая панель ограничивает ширину статей, облегчая чтение страницы. На мобильном устройстве боковая панель занимала почти половину экрана. Поэтому, дизайн должен отличаться на мобильных устройствах и боковая панель должна отображаться под статьями.
Адаптивный веб-сайт для оптимального взаимодействия с пользователем
Как правило, неотзывчивая веб-страница будет отображаться на маленьком экране мобильного устройства точно так же, как и на настольном компьютере, только меньшего размера. Это заставляет пользователя увеличивать отдельные части страницы. Следовательно, это гораздо лучше предложить оптимизированную версию. Несколько примеров:
- В десктопной версии кнопка на сайте кликается мышкой. Но на мобильных устройствах вы перемещаетесь пальцем. Поэтому, кнопка должна быть больше в мобильной версии и оставьте больше места между элементами.
- Давайте представим, что у нас есть форма на нашем сайте. Обычно текст, содержащийся в форме, расположен так, чтобы его можно было легко прочитать и он не касался краев формы. Отступ в 20 пикселей слева и справа является нормальным и хорошо смотрится на больших экранах. Но на мобильных устройствах с шириной экрана 320 пикселей мы только что потеряли восьмую часть площади экрана. Чтобы предотвратить это, маржа должна быть уменьшена на мобильных устройствах.
Минусы неотзывчивого сайта
Все больше и больше пользователей выходят в Интернет с мобильных устройств. Выбор адаптивной веб-страницы имеет существенные недостатки. Некоторые известные примеры:
- Низкие показатели конверсии и высокие показатели отказовиз-за деоптимизированного дизайна и плохого взаимодействия с пользователем.
- Плохая позиция в поисковых системахтак как Google распознает, например, когда веб-элементы расположены слишком близко друг к другу.
- Низкая производительностьиз-за длительного времени загрузки ресурсов, которые не были оптимизированы.
Минусы адаптивного дизайна
Однако адаптивный дизайн не позволяет создавать сайты, полностью оптимизированные для мобильных устройств. Действительно, ваш сайт останется очень похожим на мобильном устройстве и на компьютере. Некоторые ресурсоемкие функции могут отсутствовать на мобильных устройствах, так как время загрузки может превышать рекомендуемый максимум.
Также может быть очень сложно реализовать адаптивный дизайн, потому что вам всегда нужно делать тесты. Действительно, некоторые вещи могут пойти не так, как планировалось, и может потребоваться некоторое время, чтобы получить полностью функциональный адаптивный дизайн. Вам предстоит провести там много времени и быть дотошным в каждом действии.
На какие аспекты веб-разработки влияет адаптивный дизайн?
Адаптивный дизайн включает в себя различные подходы и технологии. Обычно есть несколько решений для разных сценариев что может возникнуть. Развитие все еще в движении.
Отзывчивый дизайн
С момента появления Интернета реализация сложных проектов в Интернете была наукой. В языке HTML есть несколько типов элементов, которые ведут себя по-разному в зависимости от макета. Рассмотрим, в частности, блокировать, в соответствиии встроенный блок типы элементов. Блочные элементы занимают всю доступную ширину и располагаются друг над другом. Встроенные элементы занимают только то пространство, которое им необходимо для их содержимого, и отображаются рядом. Эта таблица должна дать обзор соответствующих элементов адаптивного дизайна.
| тип элемента | Ширина | поток элементов |
|---|---|---|
| блоки | Вся доступная или выделенная ширина | Столбец |
| в соответствии | Ширина элементов, которые он содержит | Ряд |
| встроенный блок | Ширина содержащихся в нем элементов или назначенная ширина | Ряд |
| сгибаться | вся доступная ширина | строка или столбец |
| сетка | вся доступная ширина | сложная компоновка |
Реализация макета часто требует размещения элементов блока рядом друг с другом. Есть несколько способов добиться этого. До появления CSS макеты на основе таблиц были стандартом; появление CSS принесло с собой плавающие макеты. Сегодня CSS Flexbox используется для простых макетов на основе столбцов или строк, а CSS Grid — для более сложных макетов. Относительные размеры CSS используются во всех случаях, чтобы учесть изменение количества элементов, отображаемых рядом друг с другом.
Хороший пример: давайте представим страницу с четырьмя элементами предварительного просмотра для сообщений в блоге. Каждый из элементов предварительного просмотра содержит изображение, заголовок, тизери кнопку «Подробнее». С помощью Flexbox можно легко реализовать следующий адаптивный макет. :
- Отображается на большом экране: все элементы предварительного просмотра отображаются рядом друг с другом. Каждый элемент занимает 25% доступного пространства.
- Просмотр на экране половинного размера: элементы отображаются рядом в двух рядах, по два элемента в каждом. Каждый элемент занимает 50% доступного пространства.
- На маленьком экране: все элементы отображаются один под другим в строке. Каждый элемент занимает 100% доступного пространства.
Это пример классовой реализации адаптивной CSS-инфраструктуры Tachyons. Для каждого контейнера предварительного просмотра мы определяем классы «w-100, w-50-m, w-25-l». Четыре оболочки предварительного просмотра находятся в оболочке с надписью «flex-wrap».
Иногда это имеет смысл отображать элемент только на экранах определенного размера. Например, табличные данные отображаются в виде таблицы в HTML с помощью тега
Однако, в зависимости от размера таблицы, может быть сложно правильно масштабировать ее для маленького экрана. Вот тут-то и приходит на помощь простой трюк: попросите пользователя повернуть свое устройство, чтобы создать достаточно места для отображения таблицы. Этот текст, конечно, должен появляться только на устройствах с маленьким экраном, когда устройство удерживается вертикально.
Элементы можно легко скрыть с помощью дисплей: нет Свойство CSS. С помощью специального CSS Media Query можно запросить как ширину экрана, так и ориентацию устройства. Дополнительный текст должен появляться только в том случае, если ширина экрана меньше 640 пикселей при вертикальном отображении. В противном случае элемент должен быть скрыт:@media screen and (min-width: 640px) and (orientation: landscape) { .dn-landscape-ns { display: none; } }
В сочетании со следующим HTML-кодом функция завершена: поверните устройство, чтобы увидеть таблицу. Типографика и адаптивный текстовый контентДля лучшего взаимодействия с пользователем, размер шрифта текстовых элементов должен быть адаптирован к используемому экрану.
Есть несколько техник адаптивного дизайна для реализации этого. Основным компонентом является CSS. бэр элемент («корневой элемент»), который связывает размер шрифта элемента пропорционально «корневому» элементу HTML. Чтобы последовательно масштабировать текст, просто отрегулируйте размер шрифта «корневого» элемента с помощью контрольных точек CSS. Давайте посмотрим на пример.
Во-первых, в соответствии с подходом Mobile First, мы установим размеры шрифта для маленьких экранов:/* mobile first */ html { font-size: 16px; } h1 { /* corresponds to 3 * 16px = 48px */ font-size: 3rem; }
Далее мы настроим размер шрифта элемента HTML для больших экранов. Поскольку размер заголовков H1 определяется бэрон будет масштабироваться автоматически:/* 'not-small' breakpoint */ @media screen and (min-width: 30em) { html { font-size: 18px; /* H1 then has font size 3 * 18px = 54px */ } }
Другой популярный подход заключается в использовании вх и оч единицы CSS для плавно масштабировать размер шрифта по высоте или ширине экрана. Теоретически этот подход не требует точек останова, но иногда он может привести к тому, что текст будет казаться крошечным на маленьких экранах. В этом случае вы можете реализовать выборочные точки останова или использовать CSS вычислять функция для установки минимального размера шрифта. оптимизировать заголовки, заполняющие экран на небольших устройствахсуществует подход без использования CSS.
Заголовки должны привлекать к ним внимание. Это позволяет пользователю быстро понять содержание страницы. Однако иногда это может привести к проблемам с отображением, особенно при работе с более длинными словами. С помощью указаний HTML «неделимый пробел» ( ) и «высокий тире» () мы можем определить, где слово должно быть разделено. адаптивные изображения — важная часть адаптивного дизайна.
Очевидно, что не имеет смысла загружать изображение длиной 1920 пикселей на экран шириной всего 400 пикселей. Во-первых, большое изображение должно быть уменьшено в браузере, используя приличную вычислительную мощность. Кроме того, размер файла изображения увеличивается по сетке с размером его самой длинной стороны. Изображение размером 1920 x 1080 пикселей займет в четыре раза больше места, чем изображение размером 960 x 540 пикселей. Кроме того, изображение будет намного дольше загружаться на мобильном устройстве.
При всем этом ясно, что неадаптивные изображения очень негативно влияют на производительность и удобство использования веб-сайта..Внедрение HTML5 принесло с собой два новых атрибута для < изображение > тег. исходный набор и размеры атрибуты используются для определить несколько файлов для изображения, также называемые «активами». Каждый отдельный файл прикрепляется к запросу медиа-элемента CSS. Это позволяет браузеру загрузить изображение из списка доступных ресурсов, оптимальное для рассматриваемого устройства. Давайте рассмотрим краткий пример.
Следующий HTML-код определяет изображение, для которого есть два ресурса, определенные с помощью исходный набор : один длиной 480 пикселей и один длиной 800 пикселей. Также было определено размерами, что 480-пиксельное изображение должно использоваться на экранах шириной до 600 пикселей. В противном случае браузер должен загрузить изображение размером 800 пикселей.
Традиционно экраны были шире, чем в высоту. Сегодня экраны смартфонов больше в высоту, чем в ширину. Изображения в альбомном формате кажутся относительно небольшими на экранах смартфонов или экранах любого другого портретного формата. Для достижения наилучших результатов вы должны использовать квадратное или портретное изображение, которое вы сами обрезали.
Выбор различных разрезов изображения называется «художественное направление». Это можно реализовать с помощью HTML5 < картина > элемент. < картина > позволяет определить несколько эквивалентных изображений для различных вариантов использования. Давайте рассмотрим пример. Следующий HTML-код определяет < картина > элемент, который устанавливает различные активы для горизонтального и вертикального форматирования. В обоих случаях существуют разные версии, оптимизированные для разных размеров экрана:
Адаптивная навигацияТрадиционно навигация по веб-странице отображается в верхней части страницы, обычно в виде горизонтального списка меню с подменю, которые открываются при наведении. Этот тип навигации явно не подходит для мобильных устройств: места мало и мыши нет.Существует несколько подходов к просмотру на мобильных устройствах.
Все они экономят место и не требуют мыши. Внимание пользователя обычно направлено на навигацию с анимацией. Наиболее популярные подходы к адаптивной навигации включают:
- Значок «гамбургер-меню» (три параллельные горизонтальные линии): при касании этого элемента меню активируется.
- Навигация «вне холста»: меню выдвигается от края экрана и отодвигает текущее содержимое экрана в сторону.
| размеры изображения | Размер экрана | Эффект |
|---|---|---|
| маленькое изображение | Большой экран | Изображение загружается быстро и выглядит пиксельным |
| Большая фотография | маленький экран | Изображение загружается медленно, выглядит четким и снижает производительность сайта. |
| Большая фотография | Большой экран | Изображение загружается медленно, выглядит четким и работает оптимально. |
| маленькое изображение | маленький экран | Изображение загружается быстро, выглядит четким и работает оптимально. |
Важные советы по адаптивному дизайну
Совет № 1: знайте интернет-пользователей
Обычно, когда вы создали свой веб-сайт и опубликовали на нем контент, вы знаете, к какой целевой аудитории вы хотите обратиться. Вы уже должны были создать своего покупателя, но важно знать его поисковые намерения и то, что они хотят найти.
Действительно, изучив, что целевые интернет-пользователи хотят видеть на вашем сайте, вам будет проще дать им это, особенно на мобильном носителе. Большинству нужна плавность, скорость загрузки и удобство использования: помните об этих критериях, сохраняя свою личную ценность!
Совет № 2: упростите свой сайт
Если вы решили внедрить расширенный дизайн и виджеты на свой компьютерный веб-сайт, для вашего адаптивного дизайна, безусловно, было бы разумно отказаться от этого сложного и сложного кодирования. Это связано с тем, что у телефона будет меньше энергии, чем у компьютера, и может потребоваться больше времени для загрузки каждого элемента каждой страницы на вашем сайте. Как вы наверняка знаете, через слишком долгое время пользователь Интернета покидает сайт, не заинтересовавшись. Обязательно максимально облегчите свой веб-сайт, сделав его менее впечатляющим на мобильных устройствах, но более функциональным и плавным.
Совет № 3: адаптируйтесь к мобильным устройствам
Некоторые виджеты более популярны на мобильных устройствах, чем на настольных компьютерах. Действительно, можно отметить рекламные баннеры или даже чаты для вопросов, когда они не занимают слишком много места на экране. Меняются и меню: адаптируйтесь к мобильной эргономике, чтобы создать меню, в котором легко ориентироваться и находить то, что вам нужно.
Совет № 4: займитесь программированием!
Для успешного адаптивного дизайна вам нужно иметь реальное представление о кодировании. Действительно, вам нужно будет освоить HTML и CSS, если вы хотите полностью контролировать свой адаптивный дизайн. Но не паникуйте! Многие учебные пособия в Интернете могут помочь вам с этими загадочными интернет-языками.
Во-первых, вам нужно будет определить размеры ваших страниц, используя метатег области просмотра. Это позволяет имитировать размер веб-сайта без потери разрешения и качества присутствующих элементов.
Вам также нужно будет использовать медиа-запросы. Благодаря им вы сможете контролировать ширину, высоту или ориентацию вашего сайта в браузере или на мобильном устройстве. Это спецификации, представленные на листах CSS.
Заключение
Достижение вашего адаптивного дизайна имеет важное значение для трафика вашего сайта на мобильных телефонах. Действительно, все больше и больше пользователей используют свой смартфон вместо компьютера для просмотра веб-страниц. Вместо адаптивного дизайна вы также можете выбрать создание приложения, если у вас есть интернет-магазин, решение, которое может быть более сложным в настройке, но гораздо более приятным для ваших клиентов.
Не стесняйтесь обращаться к профессионалам, если вам нужна помощь в кодировании или разработке вашего адаптивного дизайна, это может быть сложно и занять много времени, чтобы справиться с такой задачей в одиночку и без знаний!