Когда адаптивный дизайн идет не так (и как это исправить)

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

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

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

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

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

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

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

1. «Мобильный Первый» дебил

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

Наилучшим подходом является физическое проектирование как минимум трех (и вплоть до 11) разных макетов. Минимальные, которые вы можете рассмотреть, включают:

  • рабочий стол
  • Пейзаж Мобайл
  • Портрет Мобайл

Если вы хотите быть немного более тщательным, вы должны также рассмотреть:

  • Пейзажный планшет
  • Портретная таблетка

И полный список, если вы хотите быть абсолютно полным, будет:

  • Огромный рабочий стол
  • Обычный рабочий стол
  • Большой ландшафтный планшет
  • Большой портретный планшет
  • Малый пейзажный планшет
  • Маленький портретный планшет
  • Большой пейзаж Мобильный
  • Большой портрет Мобайл
  • Малый пейзаж Мобильный
  • Маленький портрет Мобайл
  • Крошечный / Носимый

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

2. Приручить этот растягивающийся нижний колонтитул

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

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

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

4. Вы можете скрыть контент, который не вносит вклад в основное сообщение

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

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

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

5. Вы можете использовать альтернативные фоны

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

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

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

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

6. Вручную контролировать порядок свертывания (или избегать пространственных привязок внутри контента)

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

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

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

7. Вам могут понадобиться разные размеры шрифта для разных макетов

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

8. Лучше всего использовать адаптивные изображения

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

изображение заголовка любезно предоставлено

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.