Java, UX, HTML, CSS, WEB-design

Есть ли оправдание адаптивному тексту?

Краткое описание по статье Есть ли оправдание адаптивному тексту?

Название: Есть ли оправдание адаптивному тексту? . Краткое описание: [ad_1] ⭐ Джеймс . Дата публикации: 18.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Джеймс Янг

  • 0 Комментарии

Есть ли оправдание адаптивному тексту?

  • 7 минут чтения

  • Мобильный, Контент, Адаптивный дизайн

Краткое резюме ↬

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

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

Одним из примеров этого является эксперимент дизайнера Фрэнки Роберто. Еще одно меню навигации на веб-сайте для приложения Sifter. Роберто и Сифтер используют медиа-запросы, чтобы фактически скрывать и отображать текст в зависимости от размера экрана (т. е. не переписывать и не доставлять другой контент в зависимости от контекста — как, например, в случае с текстом, ориентированным на мобильные устройства).

Дальнейшее чтение на SmashingMag:

  • По-настоящему плавная типографика с единицами vh и vw
  • Представляем адаптивную веб-типографику с помощью FlowType.JS
  • Балансировка длины строки и размера шрифта в RWD
  • Пример адаптивной веб-типографики, ориентированной на искусство

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

Еще после прыжка! Продолжить чтение ниже ↓

Веб-сайт приложения Sifter
Изменение содержимого вкладок в меню навигации в Sifter. Большой вид.

Как это достигается?

В этом примере (и в демонстрации Роберто) вы заметите несколько вещей. На снимках экрана показаны две версии веб-сайта Sifter с разным размером экрана, чтобы продемонстрировать, что происходит в двух контрольных точках.

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

Означает ли изменение формулировки, что информация о планах Sifter предлагается только пользователям на больших устройствах, или часть «Планы» избыточна? Мы можем предположить, что нет, потому что вкладка на всех размерах экрана ссылается на …/plans страница. Это может сбивать с толку пользователей на небольших устройствах: они нажимают «Цены», но перенаправляются на страницу, которая сначала описывает планы.

Чтобы показать и скрыть часть вкладки «Планы и», дизайнер Sifter обернул элемент в диапазон. Для одного пункта меню это не конец света, но удачи на пути, который Фрэнки Роберто демонстрирует своими абзацами. Я не могу себе представить, каким кошмаром было бы поддерживать несколько версий фактического содержимого страницы, а затем связывать их с точками останова! (Не говоря уже о нашем более раннем вопросе о том, является ли текст, скрытый при определенных размерах, излишним в первую очередь.)

Надеюсь, мы все знаем, как не скрывать контент с помощью display: none !important;. Отзывчивый дизайн — это много вещей; его многочисленные маленькие хитрости и методы представляют собой замечательный подход к тому, чтобы сделать веб-сайты гибкими. Но скрытие элементов на экране таким образом не должно быть одним из них.

Это всего лишь демонстрация, правда?

Демо Фрэнки Роберто — это просто демо. Ему это ясно, и он предлагает вариант использования. Я приветствую усилия — каждый должен экспериментировать с Интернетом. Веб-сайт Sifter — это живой веб-сайт, а не демонстрация или доказательство концепции — и то, что он сделал, описывается как «отзывчивый текст».

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

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

Проблемы с техническим обслуживанием возникнут быстро и тяжело

Фрэнки Роберто добивается остроумного эффекта в своем демо. На большом экране вы видите всю копию. И по мере того, как экран сжимается, уменьшается и количество контента (и наоборот, конечно).

Отзывчивая текстовая демонстрация на большом экране
Полный контент Роберто на экране рабочего стола.

Отзывчивая текстовая демонстрация на маленьком экране
На меньшем экране содержание уменьшается.

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

Некоторые потенциальные проблемы, которые следует учитывать

  • Копия должна быть хорошо структурирована, чтобы ее можно было прочитать, когда ее части скрыты на небольших устройствах. Например, если в блоке контента 10 строк, он все равно должен отображаться, когда строки 2, 5, 9 и 10 скрыты на планшете, а строки 2, 4, 5, 9 и 10 скрыты на телефоне.
  • Писателю потребуется какой-то механизм в CMS для пометки точек останова в содержимом. В результате метод обновления контента оказался бы довольно техническим.

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

Есть ли потенциальное применение для адаптивного текста?

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

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

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

Стефани Ригер отмечает что создание контента без раздувания на большом веб-сайте может занять невероятно много времени:

@welcomebrand @froots101 Обсуждения с заинтересованными сторонами показали, что последний раунд копирайтинга занял 6 месяцев. Конечный результат: скрыть текст на «меньшем» экране.

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

В заключение

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

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

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

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Есть ли оправдание адаптивному тексту?

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»