/ Новости и уроки / Адаптивный и отзывчивый веб-дизайн

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

76
Адаптивный и отзывчивый веб-дизайн
В настоящее время существует три популярных подхода к разработке сайта One Web: использование адаптивного дизайна; адаптивные проекты на стороне клиента; и адаптивные конструкции на стороне сервера.

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

Отзывчивый веб-дизайн

Отзывчивый веб-дизайн является наиболее распространенным подходом One Web. Подход использует медиазапросы CSS для изменения представления веб-сайта в зависимости от размера дисплея устройства. Количество отзывчивых сайтов быстро растет, от Бостонского Глобуса до Диснея и Индокино.

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

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

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

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

Адаптивность на стороне клиента

Адаптивный дизайн основывается на принципах отзывчивого дизайна, чтобы предоставить пользователям возможности, ориентированные на конкретные устройства и контексты. Он использует JavaScript для обогащения веб-сайтов с расширенными функциями и настройкой. Например, адаптивные веб-сайты доставляют изображения с качеством Retina только на дисплеи Retina (такие как новый iPad), в то время как дисплеи стандартной четкости получают изображения более низкого качества.

Существует два подхода к адаптивному проектированию: один, когда адаптация происходит на стороне клиента, в браузере пользователя, и другой, когда веб-сервер выполняет тяжелую работу по обнаружению различных устройств и загрузке правильного шаблона. Примеры адаптивных сайтов на стороне клиента включают Threadless и Ideeli. Одной из сильных сторон адаптивного шаблонного подхода является возможность многократного использования одного набора HTML и JavaScript на разных устройствах, что упрощает управление изменениями и тестирование.

Адаптивный подход на стороне клиента означает, что вам не нужно перестраивать свой сайт с нуля. Вместо этого вы можете опираться на существующий контент, в то же время предоставляя адаптивный для мобильных устройств макет. Для опытных разработчиков этот подход также позволяет вам ориентироваться на конкретные устройства или разрешения экрана. Например, для многих онлайн-клиентов Mobify 95% их мобильного трафика приходится на iPhone. Адаптивность на стороне клиента означает, что они могут оптимизироваться специально для Apple Smartphone.

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

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

Адаптивность на стороне сервера

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

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

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