Полное руководство по исправлению Responsive Проблемы дизайна в 2023 году

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

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

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

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

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

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

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

1. "Mobile First" - дебильно

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

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

• Desktop
• Пейзаж Мобайл
• Портрет Мобайл

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

изображение заголовка любезно предоставлено Артур Мартыновский