Адаптивный и адаптивный дизайн: что лучше?

1. Какая разница?
2. Зачем использовать адаптивный?
3. Зачем использовать отзывчивый?
4. Соображения, которые необходимо учитывать
5. Решение
6. Следующие шаги

Google имеет всегда рекомендуется адаптивный веб-дизайн (RWD), особенно после развертывания большое обновление на 21.04.15, который оценил мобильные дружественные сайты выше.

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

Имея это в виду, давайте рассмотрим плюсы и минусы адаптивного и адаптивного дизайна с точки зрения производительности и UX.

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

Какая разница?

Итак, прежде всего, в чем основные различия между адаптивным и адаптивным дизайном?

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

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

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

Примечание редактора: в UXPin вы можете использовать различные точки останова. Если вы хотите поиграть с ними, начать бесплатную пробную версию ,

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

Зачем использовать адаптивный?

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

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

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

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

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

Зачем использовать отзывчивый?

В настоящее время большинство новых сайтов используют адаптивный интерфейс, что стало проще для менее опытных дизайнеров и разработчиков благодаря доступности тем, доступных через системы CMS, такие как WordPress, Joomla и Drupal.

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

Кредит фотографии: Smashing Magazine

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

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

Соображения, которые необходимо учитывать

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

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

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

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

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

Решение

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

Кредит фотографии: Джереми Кит

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

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

Однако, если у клиента или компании есть бюджет, то адаптивный может быть лучшим выбором, в соответствии с тест, проведенный Catchpoint , Они создали два сайта в WordPress, один из которых использует стандартную адаптивную тему WP TwentyFourteen, а другой - плагин под названием Wiziapp ,

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

Результаты во время загрузки говорят сами за себя:

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

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

Итак, заключение?

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

Следующие шаги

Если вы хотите начать создавать свой собственный адаптивный дизайн, вы можете сделать это с помощью UXPin. Платформа для совместной работы поставляется с заранее установленными и настраиваемыми точками останова. Как только вы закончите, активируйте Spec Mode, чтобы автоматизировать вашу передачу разработчикам.

Похожие

Комментарии