Джеймс Янг недавно опросил своих коллег-дизайнеров, чтобы выявить самые большие проблемы адаптивного веб-дизайна (далее АВД). В своей статье он сообщает о результатах опроса и предлагает свои решения.
Я недавно сделал опрос своих коллег-дизайнеров о тех проблемах, с которыми они сталкиваются при создании адаптивных сайтов. Эта статья будет перечнем основных проблем и их решений, которые вы сможете применить к своим будущим проектам.
Информация, изложенная здесь, основана на мнении сотни опрошенных респондентов, включая проблемы, с которыми встретился я, работая на Offroadcode. Так что, не мудрствуя лукаво, перейдём к нашим баранам.
Самые распространённые проблемы адаптивного дизайна.
Несмотря на то, что адаптивный дизайн существует уже более 2х лет, но во многих случаях он продолжает оставаться молодой методологией. Дизайнеры постоянно встречаются с новыми устройствами с самими различными экранами, кодами структур и скриптами, а также с необходимостью по-новому работать с клиентами.
Так что давайте рассмотрим наиболее «популярные» проблемы, которые были отмечены опрошенными дизайнерами.
- Необходимость объяснять клиентам, что такое АВД
- Нехватка статической стадии разработки
- Навигация
- Изображения
- Таблицы
- Сложности преобразования старых «неподвижных» сайтов (с фиксированной шириной)
- Обслуживание пользователей старых версий IE
- Тестирование времени и стоимости
Проблема 1: Необходимость объяснять клиентам, что такое АВД
«Старый» процесс проектирования веб-сайтов достаточно линейный, что делает его очень простым для понимания. Клиенты сначала проходили стадию инструктажа, затем стадию файрфрейминга и структурного планирования, затем они получали ряд хорошо отрисованных страниц, из которых можно выбрать лучший вариант. Только когда всё это утверждалось, сайт был практически готов.
Есть одна вещь, с которой борются многие дизайнеры: как объяснить клиентам, что «визуального этапа» больше нет? Адаптивный дизайн является более гибким процессом и вайрфрейминг, рисование эскизов, моделирование, как правило, более мощные инструменты.
Решение: демонстрировать «мощь» адаптивного дизайна.
Лучший способ объяснить, что такое АВД - это показать его «в деле». Не заводите умных разговоров о контрольных точках, медиа-запросах и многофункциональности. Такая информация быстро забывается, даже если и звучит очень убедительно.
Лучший пример - демонстративный. Если у вас есть доступный лэптоп, планшет и телефон, на встрече с клиентом вы можете продемонстрировать ему, как сайт (возможно, тот, который вы только что создали для другого клиента) ведёт себя с различными экранами. Это просто и эффективно, а если вы ещё приведете сравнение с тем, как ведут себя с разными девайсами неадаптивные сайты, будет ещё лучше.
Адаптивные макеты
Если вы не можете показать сайт на различных устройствах, рассмотрите демонстративные примеры АВД в картинках, которые выложены на многие сайтах.
Проблема 2: Недостаток статической фазы создания дизайна
Как я заметил ранее, одна из самых больших проблем, заключается в том, что изменения в «старом» процессе создания дизайна - это то, что требуется для адаптивного сайта. Пренебрегая статическими скриншотами, дизайнеры больше, чем когда-либо, полагаются на быстрые наброски, вайрфрейминг и сделанные на скорую руку HTML и CSS прототипы.
Решение: создавайте больше элементов и меньше макетов.
Перед рассмотрением возможных решений, следует отметить, что у разных дизайнеров технологические процессы могут отличаться. Я большой фанат использовать то, что когда-то дало хороший результат. Так что придерживайтесь того, что работает для ваших клиентов.
Лично я предпочитаю использовать обычную бумагу, чтобы проверить, как мои идеи работают в различных размерах. Это быстро и просто, особенно, если вы ознакомитесь с предложениями Сэма Хардкэра для адаптивных эскизов.
Также я рекомендую, как можно раньше, проектировать в браузере и работать с HTML, а затем использовать Fireworks или Photoshop для создания активов, а не полных макетов.
Эскиз, вайрфрейм и прототип. Адаптивный веб-дизайн не значит то, что больше не надо использовать бумагу: просто используйте её по-другому.
В более крупных проектах, ты можешь мучиться с каждым вайрфреймом. Хорошие идеи по этому поводу можно взять из исследования редизайна Crayola.com Дэна Мэльса и сделать бумажные или вайрфреймовые виджеты, которые легко передвигаются.
Полезную информацию о личном технологическом процессе других дизайнеров можно найти на слайдах о технологическом процессе создания АВД Стэфана Хэя или в детализированном обзоре от Yellow Pencil на их веб-сайте responsiveprocess.com.
Проблема 3: Навигация
В прошлом, навигация сайтов обычно была горизонтальной вдоль верха страницы и иногда внизу слева страницы. Сейчас навигация требует более детальный подход. Многие респонденты отметили, что навигация сайта – это сложная проблема, для которой, к сожалению, нет готового решения.
Решение: использовать хороший последовательный дизайн.
Выбор навигационной стратегии является широкомасштабным делом, и должен быть основан на контенте вашего сайта вместе с конструктивными соображениями.
Вместо того, чтобы просто загружать скрипт или демо, сперва я подтолкну вас оценить, как это работает и почему именно так, и, самое важное, - как это работает для сайта, который вы создаёте.
Следующие статьи могут быть полезными:
- Responsive navigation patterns, by Brad Frost
- We need a standard show navigation icon for navigation, by Andy Clarke
- Don’t let your menu take over, by Stu Robson
- Scalable navigation patterns in responsive web design, by Palantir's Michael Mesker
Адаптивная навигация в действии. Сайт Starbucks
И помните: проверяйте, как ваша навигация работает, на самых различных девайсах и столько раз, сколько это возможно. Вы даже себе не представляете, как часто я сталкиваюсь с сайтами, на которых навигация не работает должным образом.
Проблема 4: Изображения
Как и навигация, набор функций доступный для обработки изображений в адаптивном дизайне является чересчур фрагментированным. Пока ещё W3C community group не поддержала спецификации, так что нам приходится лично выбирать из широкого круга скриптов, чтобы заполнить недостающую функциональность и поставить соответствующие активы на устройства.
Также дизайнеры должны всегда думать о следующем поколении дисплеев с высокой плотностью пикселей, например: о новом iPad и Macbook Pro и другой технике не из круга Apple. Такие вещи, как код, изображения, иконки должны быть гибкими, чтобы графика на экранах с высокой плотностью пикселей не выглядела размытой, из-за того, что они были плохо расширены.
Решение: скрипты, SVG и символьные шрифты.
Пока ещё нет «официальных» решений для адаптивных изображений, зато есть пару отличных из серии «неофициальных», которые дают положительные результаты без необходимости прибегать к взломам и «обходам» кодов.
Семантические шрифты набора символов Oak Studios отлично адаптируются к различным экранам.
Здесь вы сможете ознакомиться с различными методами и средствами для адаптивных изображений и дисплеев с разной пиксельной плотностью:
- Adaptive Images by Matt Wilcox
- Using SVG graphics today, by Josh Emerson
- Resolution independence with SVG, by David Bushell
- Using CSS sprites to optimize your website for Retina displays, by Maykel Loomans
- Flowchart: how to retinafy your website, by Thomas Fuchs
- Symbolset icon fonts, by Oak Studios
Проблема 5: Таблицы
Часть опрошенных респондентов заметили, что таблицы данных создают большие проблемы, особенно, если они содержат комплексную информацию или просто большое количество строк и столбцов. «Втискивание» всей этой информации в маленький экран - отнюдь не решение проблемы. Тем не менее, некоторые обнадёживающие шаги уже сделаны.
Решение: выбирайте различные варианты.
Крис Койер в своём блоге выложил ряд хороших советов для адаптивных таблиц. Несколько лет я работал с сайтами путешествий, содержащими большие и детализированные таблицы, и я могу сказать, что ни одно из рассмотренных Крисом решений полностью не отвечает этим требованиям. Однако, если говорить в целом, я уверен, что там есть хоть один вариант, подходящий для вашего сайта.
Здесь можно найти пару сильных опций для адаптивных таблиц:
- Responsive Tables, from Zurb
- Responsive Tables, from David Bushell
- Break a table out of its container (создатель неизвестен)
Некоторые дизайнеры предлагают скрывать «менее важные данные». Но я, лично, выступаю против сокрытия контента от пользователей из-за того, что у них какой-то не такой девайс.
Проблема 6: Сложности преобразования старых сайтов с фиксированной шириной
По результатам опроса было выявлено, что одна из самых больших проблем это обновление базы кода старого «неподвижного» для того, чтобы сделать его адаптивным. Как я заметил выше, процесс создания адаптивного дизайна очень отличается от «старого» процесса, где код спроектирован менее гибким путём. Так что когда сталкиваешься с обновлением старого сайта, перед тобой сразу встаёт вопрос: переделывать существующие шаблоны и стиль или всё делать с нуля?
Решение: стройте с нуля.
Все опрошенные, без исключения, заявили, что в таких ситуациях они выбирали восстановление с нуля. И только в крайних случаях, когда не было другого выбора, они просто перепроектировали код.
Проблема 7: Как обслуживать пользователей старых версий IE
Я просто уверен, что вы все ждали того момента, когда буду говорить гадости об Internet Explorer. Конечно, я подтверждаю, что работая со старыми версиями браузера (IE8 и более ранние), главная проблема возникает в нехватке поддержки медиа-запросов CSS. Это значит, что если вы работаете с первыми мобильной техникой, такой как 320 and Up, ваши медиа-запросы не будут взламываться, и ваш макет не будет должным образом отражаться на настольных браузерах, так что в конечном итоге вы получите маленький макет на большом экране.
Решение: Polyfill’ы или не парьтесь.
Печально то, что несмотря на желаемое видение мира дизайна (и фактический прогресс Microsoft ), мы всё ещё должны рассматривать более старые версии Internet Explorer (особенно 8), когда планируем создавать сайт. Но с другой стороны, у нас есть мощные опции для поддержки адаптивными сайтами старых версий IE.
Если вы стремитесь к тому, чтобы ваш макет поддерживался максимально большим количеством версий IE, рассмотрите respond.js polyfill на ваших страницах. Для более полного объяснения вариантов, я рекомендую прочитать Методы Изящной деградации медиа-запросов Льюиса Наймэна.
Если вы хотите отказаться от поддержки старых версий браузера и сохранить контент доступным, то в этом случае, лучше всего ничего не делать. Если вы конструировали сайт для первого мобильного и не включали скрипт respond.js, ваши юзеры старых версий IE будут видеть ваш мобильный вариант.
Это, конечно, не идеальный вариант для большого монитора, но, по крайней мере, контент останется доступным. В противном случае, вы могли бы рассмотреть простой условный стиль IE и добавить некоторый рудиментарный стайлинг, потому что простой линеарный вид может быть не лучшим для многих пользователей.
И всё-таки, как ни крути, вопросы обслуживания юзеров старых версий Internet Explorer, сводятся к требованиям ваших клиентов. Как говорится, желание клиента – закон.
Проблема 8: Тестирование времени и цены
Опрошенные дизайнеры отметили, что часто проблематичным становится вопрос, как тестировать, с помощью каких устройств проводить тестирование и как измерить потенциальный размер цены проектирования испытательного набора устройств.
Для многих дизайнеров, особенно фрилансеров, очень сложно создать набор испытательных устройств, кроме тех, что они имеют в личном пользовании. Многие умудряются осуществлять осмотр в браузере и перемещение окна, а также тестирование на личном телефоне или планшете. Естественно, этот вариант далёк от идеала. Разработка даже самой скромной коллекции девайсов, на данный момент, является стандартными бизнес-расходами.
Тестирование времени – также проблематично. Время, необходимое для тестирования сайта, безусловно, выросло, но часть этого возмещается более лучшим проектированием в браузере и меньшим полаганием на статические, фиксированные визуальные эффекты.
Решение: применяйте устройства и изменяйте размеры.
Радует тот факт, что появляется всё больше агентств, таких как Clearleft, которые готовы поделиться своей огромной коллекцией испытательных устройств со всеми, кто хочет посетить их офис. Пока что это не так распространено, но я уверен, что эта инициатива не останется без сторонников.
Clearleft делится своими разнообразными испытательными девайсами со всеми, кто посещает их студию. Агентства, следуйте их примеру!
Если вам интересно посмотреть, что ваши коллеги-дизайнеры используют в качестве инструментов тестирования, я рекомендую вам эту ссылку Мой испытательный набор. Брэд Фрост также написал полезную инструкцию, как провести тестирование на реальных девайсах, не тратясь на кругленькую сумму.
Конечно, это не заменит тестирование на реальных устройствах, но если вы не можете себе позволить собрать большую коллекцию девайсов, вы можете хотя бы убедиться в том, что большая часть вашего сайта работает так, как вы этого хотели, используя один из многих инструментов тестирования адаптивного дизайна. Это реально помогает!
Автор: Джеймс Янг (James Young)
Оригинал статьи http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
Главное фото: архив dConstruct, от Jeremy Keith. См. оригинал.
Добавить комментарий