Чего вы могли не знать о масштабировании веб-сайта на мобильных устройствах. 5 нюансов адаптивной веб-разработки

По официальной статистике доля мобильного трафика в России сейчас составляет 80%. Поэтому наиболее успешные сайты разрабатываются с ориентацией на мобильные устройства.

Большинство из нас выходят в Интернет, совершают покупки в Интернете и даже оплачивают счета с помощью мобильных устройств, потому что они удобны и легко доступны. Согласно исследованию Forrester «Цифровой бизнес-императив», 43% клиентов банковского сектора в США использовали мобильные телефоны для совершения банковских операций в течение трех месяцев.

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

Веб-страницы обычно состоят из одного или нескольких из следующих компонентов: верхний и нижний колонтитулы, основное содержимое (текст), изображения, формы, видео и таблицы. Устройства различаются по таким функциям, как размер экрана (длина x ширина), разрешение экрана (плотность пикселей), вычислительная мощность (процессор и память) и операционная система (iOS, Android, Windows и т. Д.). Эти различия значительно влияют на общую производительность и визуализацию веб-компонентов, таких как изображения, видео и текст, на разных устройствах. Еще одним важным фактором является то, что мобильные пользователи не всегда могут быть подключены к высокоскоростной сети, поэтому веб-страницы должны быть тщательно спроектированы для эффективной работы в соединениях с низкой пропускной способностью.

Самые неприятные проблемы на мобильных платформах

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

1. Сайты не адаптируются автоматически к разным размерам экрана. Некоторые веб-сайты предназначены для форматирования для экранов переменного размера, но их элементы могут не масштабироваться автоматически. Это приведет к тому, что сайт автоматически подстраивается под различные размеры экрана, но элементы сайта могут выглядеть слишком большими на небольших устройствах. Некоторые сайты могут быть не предназначены для настройки экрана с переменным размером, из-за чего элементы выглядят очень маленькими на устройствах с меньшими экранами. Подробнее об этом вы можете прочитать в нашем руководстве по адаптивному  веб-дизайну для начинающих.
2. На сайтах слишком много контента для мобильных устройств. Некоторые веб-сайты перегружаются контентом, чтобы заполнить пустое пространство на экране рабочего стола. Веб-сайты, разработанные без учета мобильных пользователей, обычно подпадают под эту категорию. Этим сайтам требуется больше времени и пропускной способности для загрузки, и, если страницы не предназначены для мобильных устройств, часть контента может даже не отображаться.
3. Сайты слишком долго загружают изображения. Веб-сайты со слишком большим количеством изображений или тяжелыми файлами изображений, вероятно, будут загружаться долго, особенно если изображения не были оптимизированы на этапе проектирования.
4. Данные в таблицах выглядят сложными и загружаются слишком долго. Многие веб-сайты представляют данные в виде таблиц (например, сравнения конкурирующих продуктов, данные о стоимости авиабилетов с разных сайтов путешествий, расписания рейсов и т. Д.), а на мобильных устройствах эти таблицы могут быть медленными и трудными для понимания.
5. На веб-сайтах размещены видео, которые не воспроизводятся на некоторых устройствах. Не все мобильные устройства поддерживают все форматы видео. На некоторых веб-сайтах размещены медиафайлы, требующие лицензии, Adobe Flash или другие проигрыватели, которые могут не поддерживаться некоторыми мобильными устройствами. Это вызывает разочарование и плохое взаимодействие с пользователем.

Создавайте свои сайты адаптированными к различным устройствам

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

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

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

1. Адаптация к любому размеру экрана.

Как минимум, веб-страницу необходимо масштабировать под размер экрана любого мобильного устройства. Современные мобильные устройства имеют очень высокое разрешение экрана. Плотность пикселей на мобильных устройствах намного выше, чем на экранах настольных компьютеров, поэтому важно отформатировать страницы так, чтобы они соответствовали ширине экрана мобильного устройства в пикселях, не зависящих от устройства. Тег «meta viewport», включенный в документ HTML, соответствует этому требованию.

Мета-область просмотра HTML: Значение мета-области просмотра помогает отформатировать всю HTML-страницу и отобразить содержимое в соответствии с любым размером экрана.

2. «Контент — это король веб-сайта»

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

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

3. Адаптивные изображения.

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

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

Например, если устройство с окном просмотра 320 пикселей загружает страницу, условие мультимедиа (max-width: 320 пикселей) в списке размеров будет истинным, и будет выбран соответствующий слот 280 пикселей. Ширина первого изображения, указанного в srcset (elephant-320w.jpg), ближе всего к этому слоту. Браузеры, которые не поддерживают переключение разрешения, отображают изображение, указанное в атрибуте src, как изображение по умолчанию. Этот подход не только подбирает правильное изображение для области просмотра вашего устройства, но также предотвращает загрузку излишне больших изображений, которые потребляют значительную долю ресурсов.

4. Адаптивные таблицы.

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

К счастью, есть несколько способов создания адаптивных таблиц. Вот один из самых эффективных:

• Столбцы таблицы переставляются в строки. Размер каждого столбца соответствует ширине экрана, что исключает необходимость горизонтальной прокрутки. Использование цвета помогает пользователям четко различать каждую отдельную строку данных. В этом случае для каждой «ячейки» сгенерированный CSS контент (:before) должен использоваться для применения метки, чтобы можно было четко идентифицировать каждый фрагмент данных.
• Другой подход — отображать данные в одном из двух форматов в зависимости от ширины экрана: в формате диаграммы (для узких экранов) или в формате полной таблицы (для более широких экранов). Если пользователь хочет щелкнуть диаграмму, чтобы увидеть полную таблицу, можно использовать описанный выше подход для отображения данных в табличной форме.
• Третий подход — показать мини-графику на узком экране, чтобы указать на наличие таблицы. Пользователь может щелкнуть изображение, чтобы развернуть и отобразить таблицу.

5. Видео, которые воспроизводятся самостоятельно.

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

Управление видео

Размеры видео можно контролировать с помощью JavaScript или CSS. max-width: 100% — помогает подстроить размер видео по размеру экрана. Медиа-запросы CSS можно использовать для установки размера на основе размеров области просмотра. Также существует несколько библиотек и плагинов JavaScript, которые могут поддерживать соотношение сторон и размер видео.

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

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

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

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

Мухтасипов Иван, менеджер по развитию бизнеса Digital-агентства «Business Boom»