Сайт в масштабе: В Масштабе. Чертежи, 3D Модели, Проекты

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

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

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

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

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

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

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

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

«Контент превыше всего»: Веб-дизайнеры должны помнить, что контент должен определять дизайн их веб-сайта, а не наоборот. Веб-сайты со слишком большим количеством элементов, таких как таблицы, формы, диаграммы и т. д., становятся сложными, когда их нужно масштабировать на мобильных устройствах. Разработчики в конечном итоге скрывают контент для мобильных пользователей, и в результате настольная версия и мобильная версия веб-сайта становятся несовместимыми. Цель дизайна должна заключаться в том, чтобы сосредоточиться на основной структуре и содержании, а не на включении декоративных элементов на веб-сайте. В соответствии с методологией Mobile-First дизайнеры должны обеспечить единую версию контента как для настольных компьютеров, так и для мобильных пользователей. Таким образом, веб-дизайнеры должны тщательно продумывать, создавать и оптимизировать контент, чтобы он не только удовлетворял бизнес-целям, но и обращался к мобильным пользователям. Контент, который не отображается в мобильной версии, может даже не отображаться в настольной версии.

Адаптивные изображения . При проектировании следует учитывать небольшие портативные устройства, работающие в зонах с низким уровнем сигнала. Большие фотографии и сложная графика не подходят для мобильных устройств, работающих в таких условиях. Дизайнеры должны убедиться, что изображения, используемые на веб-сайтах, оптимизированы для разных размеров окон просмотра и плотности пикселей. Рекомендуемый подход заключается в использовании «переключения разрешения», с помощью которого можно указать браузеру выбрать и использовать файл изображения соответствующего размера в зависимости от размера экрана устройства. Переключение изображения по разрешению осуществляется с помощью двух атрибутов: srcset и размеры. С этими атрибутами (включенными в фрагмент кода, показанный ниже) браузер будет использовать ширину устройства для выбора наиболее подходящего состояния мультимедиа, указанного в списке размеров, выбирать размер слота на основе этого условия и загружать изображение, указанное в srcset, который точно соответствует выбранному размеру слота.

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

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

Таблица не будет рассматриваться как таблица, так как столбцы будут транспонированы в строки. Каждый столбец будет иметь такой же размер, как и экран, чтобы избежать необходимости горизонтальной прокрутки. Используя соответствующую окраску (1 строка данных), каждую строку данных можно отличить от другой. В этом случае для каждой «ячейки» содержимое, сгенерированное CSS (:before), следует использовать для применения метки, чтобы каждый фрагмент данных можно было четко идентифицировать.

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

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

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

В приведенном ниже примере показано использование <управления видео>, в котором теги позволяют разработчику указать несколько различных типов видеоформатов (обозначенных элементом type), из которых может выбирать браузер. При таком подходе переключение на нужный формат происходит на стороне клиента, и на сервер делается только один запрос. Это уменьшает задержку в сети и позволяет браузеру выбирать наиболее подходящий формат видео без необходимости сначала загружать видео для проверки его формата.

Свойства videoWidth и videoHeight элемента video помогают определить закодированный размер видео. Размерами видео можно управлять с помощью JavaScript или CSS. Максимальная ширина: 100 процентов помогает подогнать размер видео под размер экрана. Запросы мультимедиа CSS можно использовать для установки размера на основе размеров области просмотра. Существует также несколько библиотек и плагинов JavaScript, которые можно использовать для сохранения соотношения сторон и размера видео.

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

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