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

Если вы подпишитесь на услугу по ссылке на этой странице, Reeves and Sons Limited может получить комиссию. Смотрите наши заявление об этике.

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

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

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

Если это все твое responsive design на самом деле делает это при просмотре на мобильном устройстве, у вас могут возникнуть проблемы. Насколько серьезна проблема, зависит от вашего отношения, но хорошие дизайнеры заботятся о хорошем 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 в правильном порядке, чтобы они сворачивались в правильном порядке.

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

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

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

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

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

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

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

Богдан Рэнца

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

Комментарии Ответ 1

  1. М р говорит:

    Mobile first просто означает, что в базе кода CSS «по умолчанию» предназначен для мобильных устройств, и вы вносите изменения для более широких возможностей. formatс оттуда. Я действительно не понимаю вашего первого пункта

Оставьте комментарий

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

Рейтинг *

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.