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

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

26 988
просмотров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое адаптивная верстка сайта и зачем она нужна

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

Что такое адаптивная верстка

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

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

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

Зачем нужна адаптивная верстка

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

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

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

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

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

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

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

Как правило, чем меньше ширина экрана — тем концентрированнее подача информации и тем меньше блоков задействовано. При этом пользователю нет необходимости изменять масштаб: всё просто и понятно даже на небольшом экране.

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

Важные факты, которые нужно знать об адаптивных сайтах

1. Адаптивный сайт и мобильная версия — это не одно и то же.

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

2. Функционал на всех устройствах один и тот же.

Здесь всё ясно: так как сайт один, то и возможности его одинаковы, независимо от того, с какого устройства пользователи заходят на сайт.

3. У адаптивного дизайна есть ограничения.

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

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

4. Адаптивность может быть полной и частичной.

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

5. Не все сайты выигрывают от полностью адаптивного дизайна.

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

6. За идентичность отображения в разных браузерах отвечает кроссбраузерность.

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

Что нужно знать, если вы хотите заказать адаптивную верстку

Компания «Технологии успеха» оказывает услуги по созданию адаптивной верстки сайта. Лучше предусмотреть адаптивный дизайн еще на этапе разработки основного сайта и прописать это в ТЗ. Но если вы придете к нам с готовым дизайном в формате.psd, мы тоже сможем помочь вам. За верстку макетов, сделанных в CorelDraw, мы не беремся — в таком случае мы предлагаем клиентам сначала подготовить дизайн и только потом верстку.

Не зная особенностей сайта и ТЗ, невозможно сориентировать по срокам вёрстки.

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

Мы никогда не передаем верстку на следующий этап — программирование — пока клиент не проверил адаптивность сайта и корректность работы всех его элементов согласно ТЗ.

Остались вопросы: заказать адаптивный сайт или мобильную версию? Звоните по бесплатному номеру 8 800 775-17-11 или оставьте свой номер, и мы вам перезвоним и все расскажем.

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

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

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

Знание разницы между этими двумя подходами поможет вам решить, какой из них лучше всего подходит для вашего следующего 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-проекта, помните, что:

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

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

• 5 блестящих примеров UX-дизайна
• Как провести UX-редизайн
• 9 вдохновляющих примеров каркасов веб-сайтов и приложений

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

Google всегда рекомендовал адаптивный веб-дизайн (RWD), особенно после того, как 21 апреля 2015 г. было выпущено большое обновление, в результате которого сайты, оптимизированные для мобильных устройств, получили более высокий рейтинг.

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

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

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

Перейти к разделу:

• В чем разница между адаптивным и адаптивным дизайном?
• Зачем использовать адаптивный веб-дизайн?
• Зачем использовать адаптивный веб-дизайн?
• Адаптивный или адаптивный? Учитывайте скорость сайта, контент и UX
• Что лучше: отзывчивый или адаптивный дизайн?
• Дизайн пользовательского интерфейса в UXPin

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

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

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

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

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

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

• 320
• 480
• 760
• 960
• 1200
• 1600.

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

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

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

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

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

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

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

Примеры адаптивного веб-дизайна

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

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

Amazon

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

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

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

USA Today

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

Источник: USA Today

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

IHG

При рассмотрении подходов к адаптивному веб-дизайну гостиничные компании обычно не приходят на ум.

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

Источник: IHG 

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

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

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

Фото предоставлено Smashing Magazine

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

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

Узнайте, как сделать свой дизайн адаптивным: 8 шагов к адаптивному дизайну .

Примеры адаптивного веб-дизайна

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

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

Slack

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

Известная адаптируемость приложения между настольными и мобильными устройствами подчеркивается тем, насколько плавно экран переходит и меняет макет. Используя Flexbox и CSS Grid Layout, адаптивный интерфейс Slack стал на шаг выше.

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

Источник: Slack

Shopify

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

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

В то время как ПК и планшеты Shopify CTA и изображения отображаются справа от формы, на мобильных устройствах вы найдете эти элементы под ней и в центре. Этот адаптивный подход к дизайну позволяет пользователям наслаждаться более разнообразным UX, сохраняя при этом оптимизированные возможности взаимодействия, независимо от размера экрана.

Dribbble

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

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

Пользователи, заходящие на сайт с 13-дюймового экрана ноутбука или ПК, увидят сетку 4×3, а пользователи меньшего экрана смогут увидеть то же портфолио, представленное в формате одной колонки.

Источник: Dribbble

Адаптивный или адаптивный? Учитывайте скорость сайта, контент и UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, вывод?

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

Адаптивный и адаптивный дизайн веб-сайта: распространенные ошибки 

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

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

Слишком много внимания уделяется настольным версиям

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

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

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

Без учета жестов 

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

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

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

Кнопки слишком маленькие

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

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

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

Дизайн важнее функциональности 

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

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

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

Наличие отдельного URL-адреса для мобильных устройств

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

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

Без учета будущих затрат на техническое обслуживание и разработку

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

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

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

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

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

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