Что такое адаптивный дизайн, и почему адаптивная верстка сайта дороже? — Дизайн на vc.ru

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

30 575
просмотров

Что такое адаптивный дизайн?

Адаптивность — это способность сайта «подстраиваться» под различные технические условия (а именно, под размеры экрана пользовательского устройства). Адаптивный сайт хорошо смотрится и на десктопном мониторе (обычный ПК), и на планшетном компьютере, и на экране смартфона. Причем качество отображения не зависит ни от диагонали, ни от позиционирования экрана.

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

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

Почему так важен адаптивный дизайн

Сегодня около 50% пользователей посещают сайты с гаджетов — смартфонов, планшетов. Это удобно, ведь можно серфить по сети, находясь в любой точке пространства (где есть интернет) — лежа в кровати, на улице, в транспорте. Мобильная аудитория постоянно растет, и игнорировать ее потребности нельзя. Вот почему разработчики адаптируют сайты под портативные устройства.

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

Фактор юзабилити

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

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

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

Совершить какое-либо конверсионное действие (например, заполнить форму заявки) на не адаптированном сайте и вовсе проблема.

Условие продвижения

Сайт, не адаптированный под устройства с небольшим экраном, неизбежно теряет часть мобильных пользователей. А это означает дополнительные отказы. Мало того что сайт теряет аудиторию — так он еще и проигрывает в ранжировании. Поисковые системы (Яндекс, Google) учитывают количество отказов: чем их больше — тем ниже опускается ресурс в выдаче.

Важно! Адаптивность — один из прямых факторов ранжирования. Поисковые системы учитывают, насколько сайт «mobile-friendly», и если нет — понижают его в рейтинге.

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

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

Источник продаж

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

Адаптивный дизайн или мобильная версия?

Следует различать адаптивность сайта и создание отдельной мобильной версии.

Адаптивная верстка — это неотъемлемая часть самого сайта. При таком подходе создается один ресурс, предназначенный для разных типов устройств. Он может быть более сложно устроен, содержит несколько разновидностей элементов дизайна. Зато администрировать его проще: например, чтобы поменять цены, достаточно внести изменение в одном месте, и оно будет отображаться везде.

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

Почему адаптив дороже?

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

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

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

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

Расчет стоимости

Конечная стоимость адаптивного ресурса может отличаться от неадаптивного на 25-50%, в зависимости от типа и особенностей ресурса, выбранных технических решений и индивидуальных требований заказчика. Цена уточняется после анализа брифа и обсуждения техзадания.

Что такое адаптивный сайт? Мобильная версия или адаптивный дизайн сайта

По статистике, в Украине количество пользователей мобильными устройствами в период 2015-2016 гг. выросло на 22% и на данный момент составляет 15 миллионов человек, 65% из которых – молодые люди до 35 лет – одна из самых платежеспособных групп населения. Около 10 миллионов человек ежедневно пользуются мобильными гаджетами и мобильным Интернетом. Это означает, что четвертая часть всего населения страны посещают веб-ресурсы различного характера и готовы к покупке. Но смогут ли они купить товар, услугу или прочитать ваш пост в блоге, если страница неправильно или неудобно отображается на их устройстве? Очевидно, что нет. Именно поэтому так важна адаптивность сайта. Не путайте адаптивный сайт с мобильной модификацией – это принципиально разные понятия. А что их отличает и что собой представляет responsive website в целом, расскажет эта статья.

Что такое адаптивный сайт (веб-дизайн)

Для начала разберем что же такое гибкий сайт (адаптивный web-дизайн). Это дизайн страниц, который обеспечивает корректное и удобное для мобильного юзера представление сайта. Адаптивный web-сайт автоматически подгоняется под размеры окна браузера. Цель веб-дизайна, гибкого под электронные гаджеты – универсальность представления сайта. Это означает, что нет необходимости настраивать сайт под отдельный вид гаджета, адаптивный веб-ресурс правильно отображается на любых мобильных девайсах, лэптопах и даже на телевизоре. При этом серфинг ресурса будет равносильно удобен на любом устройстве и пользователю не нужно увеличивать выбранные блоки, чтобы не кликнуть не на ту кнопку.

Как протестировать адаптивный веб-дизайн?

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

Зачем нужен адаптивный дизайн сайта?

1. Он удобен

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

• Разработка и поддержка адаптивного сайта обходится быстро, несложно и недорого;
• Все страницы сайта в случае гибкой версии доступны по одному URL адресу, что изначально избавляет от ряда проблем в SEO-продвижении, сложному, двойному наполнению и удобству для пользователей.
• Адаптированный под мобильные устройства гаджеты при загрузки смотрится красиво, сохраняет свой дизайн и структуру.

Но стоит понимать, что адаптивный сайт имеет и свои недостатки:

• Адаптация ресурса подразумевает исключение некоторых графических и технических элементов с целью повышения удобства пользования для посетителей.
• Медленная загрузка сайта из-за большого веса. Даже если исключить все технические и графические компоненты, которые добавляют вес страниц, адаптивный сайт все равно медленнее загружается по сравнению со скоростью загрузки стандартной версии веб-сайта на ПК, либо отдельно разработанной мобильной версии;
• Невозможность сделать перелинковку на полную версию веб-страницы (в случае мобильной версии такая возможность имеется).

Однако отсутствие responsive website влияет на поведенческие факторы мобильных юзеров. Посетителям попросту будет неудобно пользоваться сайтом со смартфона и в 98% случаев он закроет страницу.

2. Он прибылен

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

3. Он продвигаем

Неадаптивные ресурсы значительно хуже ранжируются в результатах поисковой выдачи Google при поиске с мобильного гаджета. В середине 2015 года компания Google ввела новый фильтр «Mobile-friendly», который отвечает за ранжирование сайтов при поиске с мобильного устройства. Адаптация сайта очень важна для SEO-продвижения сайта. Если он дружелюбен для Гугл и грамотно оптимизирован, то обязательно попадет в ТОП и привлечет максимальное количество клиентов и повысит доходы компании. К тому же, Google уже начал отдавать приоритет сайтам с адаптивной версией. Поэтому если у вас ее нет, обязательно закажите, так как вы рискуете потерять часть мобильного трафика.

4. Он повышает лояльность аудитории

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

Отличие адаптивной версии сайта от мобильной

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

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

Как проверить сайт на адаптивность?

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

www.responsinator.com

designmodo.com

www.responsivedesigntest.net

mattkersley.com/responsive

beta.screenqueri.es

Типы адаптивного дизайна

Формирование адаптивности выполняется на стадии разработки дизайна. Поэтому важно выбрать оптимальный вид адаптивного дизайна из пяти основных:

1. Резиновый макет. Самый распространенный и простой вариант адаптировать дизайн сайта. Он подразумевает сжатие блоков по ширине до размера мобильного гаджета. А те блоки, которые невозможно сжать, настраиваются друг под другом;

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

3. Переключение макетов. Тип заключен в разработке макетов под различные разрешения экрана. Не самый популярный и очень трудоемкий способ из-за сложности стандартизации дизайна за счет разнообразия девайсов;

4. Масштабирование изображений и текстов. Самый простой тип адаптивности для простых ресурсов. Масштабируется не весь сайт, а его отдельные блоки/части;

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

Выводы

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

Автор — Игорь Кобылянский

Основатель студии

Антиспам поле. Его необходимо скрыть через css

Ваша оценка:

Адаптивный и адаптивный дизайн и ключевые аспекты

Иллюстрация Кайла Вебстера

В чем разница между адаптивным и адаптивным дизайном?

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

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

Изображение предоставлено сообществом SAP UX.

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

«Точки останова» — это термин, обычно используемый для обозначения различных размеров экрана, используемых в адаптивном дизайне. Например, целевая страница веб-сайта будет создана для просмотра на мобильном устройстве, планшете и компьютере. Это 3 точки останова, которые показывают, как будет адаптироваться дизайн. Поэтому вам не нужно проектировать для конкретных устройств, но вы можете настроить шаблон для определенной группы устройств.

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

Дизайн для различных устройств

Дизайн цифровых продуктов постоянно меняется. Постоянно появляются новые достижения, которые влияют на пользовательский опыт и трансформируют отрасли. Недостаточно просто учитывать разные размеры экрана. Мы должны учитывать устройство и то, как с ним взаимодействуют. От различных операционных систем и их встроенной функциональности до среды, в которой пользователь взаимодействует с устройством. Все это может повлиять на восприятие дизайна пользователем.

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

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

Рекомендации по межплатформенному дизайну

При разработке цифровых продуктов важно учитывать возможность использования различных функций устройств. Мобильные устройства могут использовать такие функции, как GPS, биометрический идентификатор, сканирование банковских карт и считывание QR-кода, которые могут значительно улучшить UX.

Жесты

Изображение предоставлено Powermockup.

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

Иерархия

Изображение предоставлено Райаном Джонсоном.

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

Навигация

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

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

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

Изображение предоставлено Крисом Баннистером.

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

Вкладки

Изображение предоставлено Адрианом Гойей.

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

Значки меню

Изображение предоставлено Flip Justic.

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

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

Заключение

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

Words by
Connor Delaney

Connor Delaney — XDI из Бруклина, Нью-Йорк. Он удостоенный наград дизайнер, который специализируется на создании впечатлений, использующих новые технологии для улучшения показателей здоровья. Как сертифицированный инструктор Adobe XD, он увлечен инструментами, которые расширяют возможности творческого сообщества, и считает, что владение сложными навыками открывает новые способы мышления.

Отзывчивый дизайн против адаптивного дизайна (за и против)

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

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

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

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

1. Что такое адаптивный дизайн?
2. Что такое адаптивный дизайн?
3. Плюсы и минусы адаптивного дизайна
4. Плюсы и минусы адаптивного дизайна
5. Основные выводы

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

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

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

По словам Эми Шейд из Nielsen Norman Group, UX-дизайнеры, участвующие в создании адаптивного дизайна, должны тесно сотрудничать с разработчиками, чтобы макет можно было использовать на экранах разных размеров. Пользовательский опыт будет меняться вместе с элементами страницы, поэтому для UX-дизайнера важно убедиться, что сайт сохраняет удобство использования при переформатировании. Один из способов сделать это — убедиться, что самый важный контент имеет приоритет на разных устройствах, особенно на самых маленьких размерах экрана.

В адаптивном дизайне для каждого экрана устройства создается свой макет веб-сайта. По мере загрузки сайт распознает размер экрана и отображает макет, созданный для этого окна просмотра. Фактически, вы можете создать различный пользовательский интерфейс для каждого из шести распространенных размеров экрана от очень маленького до очень большого: 320 пикселей, 480 пикселей, 760 пикселей, 960 пикселей, 1200 пикселей и 1600 пикселей.

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

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

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

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

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

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

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

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

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

5. Основные выводы

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

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

  This entry was posted in Популярное