Лого vc.ru

Проблемы «отзывчивого» дизайна и способы их решения

Проблемы «отзывчивого» дизайна и способы их решения

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

Поделиться

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

Методология разработки веб-продуктов (сайтов и приложений), которая призвана обеспечить оптимальное отображение контента на разнообразных устройствах, получила название «отзывчивый веб-дизайн» (responsive web design). Термин «адаптивный веб-дизайн» (adaptive web design), появившийся несколькими годами ранее, часто употребляется как синоним, вызывая тем самым недовольство пуристов от веб-разработки. 

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

1. А нужен ли клиенту отзывчивый дизайн?

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

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

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

2. Долго, дорого, …

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

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

3. Навигация

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

Выгодная стратегия для веб-приложений здесь — подражание приложениям мобильным. Если сайт, открытый в браузере смартфона, выглядит и ведет себя, как одно из установленных приложений, пользователь без проблем освоится с навигацией по нему. Здесь важно перенять те приемы, которые сегодня являются общими у популярных мобильных ОС, чтобы пользователи любых устройств были с ними знакомы.

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

4. Качество изображений

На сегодняшний день практически все смартфоны оснащены экранами с высокой плотностью точек на дюйм (DPI). Самые продвинутые из них уже имеют разрешение FullHD, которое, к слову, до сих пор не самое популярное на десктопах! Читать текст на таких экранах — одно удовольствие: пикселей не видно. А вот иконки и картинки, будучи увеличенными до того же физического размера, что и на мониторе, выглядят размытыми и погрызенными. 

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

Так что же делать с картинками? Одно из решений — использовать в верстке фотографии большего размера (в пикселях), чем нужно для «стандартного» монитора. Тогда на «сверхчетких» экранах фото будет отображаться в масштабе 1:1, а на «стандартных» — в уменьшенном. Так, например, на сайте Apple все графические файлы ровно в два раза шире и выше, чем необходимо для обычного компьютерного экрана. Разумеется, этот подход нужно применять с осторожностью, так как он в четыре раза увеличивает «вес» графики и, соответственно, нагрузку на сервер. Однако, для рекламных фото (как в случае с Apple), он может быть вполне оправдан.

Другое решение, которое обязательно стоит взять на вооружение, – отказ от растровой графики везде, где это возможно. Сегодня все современные браузеры, включая мобильные, поддерживают формат SVG, который позволяет внедрять в веб-страницы векторные объекты. Наверняка ваши дизайнеры рисуют иконки и логотипы в векторах в Illustrator или в «шейпах» в Photoshop? Ни в коем случае не нужно их растеризовать! Их нужно сохранить как SVG, и попросить разработчика заверстать их в таком виде. 

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

5. Веб-приложения и сайты со сложной функциональностью

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

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

Во-вторых, поищите альтернативные способы представления информации. Например, вертикальное меню можно заменить выпадающим списком, а таблицу — разбить на несколько или повернуть на 90 градусов.

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

6. Конвертация существующих сайтов в адаптивные

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

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

7. Совместимость со старыми браузерами

Работа «отзывчивых» сайтов основывается на медиа-запросах CSS3, которые не поддерживает, например, Internet Explorer 8, так горячо «любимый» разработчиками.

Да, недавно IE8 отметил свое пятилетие, и, казалось бы, уже должен упокоиться на свалке технологической истории, однако по статистике W3C он все еще популярнее, чем IE9 и IE10 (по отдельности, правда).

Хорошая новость в том, что существует открытая библиотека css3-mediaqueries.js, которая добавляет поддержку медиа-запросов в старые версии IE, Firefox и Safari. Можно воспользоваться ей, однако, есть еще лучшая новость. Столь высокая доля IE8 на рынке обусловлена тем, что это последняя версия Internet Explorer, работающая под Windows XP. 

Поддержку этой ОС Microsoft прекратила в апреле 2014 года. Соответственно, крупные корпорации и государственные учреждения, использующие её, будут вынуждены перейти на новую версию ОС, и в 2015 году IE8 в статистике W3C мы уже, скорее всего, не увидим вообще. Так стоит ли сегодня инвестировать деньги и силы в прошлое? Лично мне ответ очевиден.

Статьи по теме
Библиотека стартапера: «Эмоциональный веб-дизайн»09 апреля 2014, 19:55
10 принципов веб-дизайна от разработчиков портала британских госуслуг13 августа 2014, 18:35
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Не стоит заморачиваться. Современные девайсы достаточно мощные, чтобы просмотреть полноценную веб страницу. Это лишние трудозатраты.
Если считаете себя не очередным "особенным, не имеющим аналогов проектом", то запилите приложения под популярные мобильные ОС.

Школьники, штампующие говнопроекты обиделись и заминусовали :)

Нет, просто вы глупость несёте. Дело не в мощности девайсов, дело в удобстве и разной парадигме использования.

Не ясно, как мощный процессор моего смартфона поможет мне попасть на его экране по кнопке, которую еле видно.

0

перестал читать после "с высокой плотностью точек на дюйм"

Плотность воды 999,97 кг/м³.

Вставьте нужное слово по смыслу:
Плотность .... точек на дюйм.

Получилось?
Что вы вставили?
разрашения? экрана?

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

Снобизм, не спорю, но и издание не спидинфо все таки)) И вроде как ЭКСПЕРТ вещает)

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

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

Плюс ко всему, население вы считаете материей, раз существует "плотность населения"

это не лично вам вопросы, они часть ответа на ваш вопрос.
Переубеждать вас и еще +100500 не инженеров не моя цель

Тогда, хотя бы, приводите аргументы, которые будут вызывать доверие. Когда вы утверждаете, что термин "плотность" относится к материи и только, то сразу возникают вопросы, стоит ли прислушиваться к этому человеку.
Термин "глубина разрешения" обычный человек, не инженер, как вы выразились, не поймет. Просто "разрешение" - имеет несколько другое значение, экран может быть 20 дюймов, и при этом показывать в разрешении 800х400. DPI - это удобный способ указать количество пикселей на единицу измерения - дюйм. Что и есть, по сути, плотность

А я вообще побаиваюсь людей которые утверждают что плотность не материальна, черт его знает какие еще законы природы действют в их сказочном мире)

0

>DPI - это удобный способ указать количество пикселей на единицу измерения - дюйм.
Боюсь, Вы путаете акронимы DPI (Dots Per Inch) и PPI (Pixels Per Inch). Мимопроходил.

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

А что в по смыслу вы подставили сюда? Вот теперь это вам личный вопрос, напросились)
Плотность .... точек на дюйм.

0

вот пока не ответите прямо,
нет смысла продолжать дискуссию с Вами.

0

А зачем что-то еще подставлять туда? Плотность точек и все.

Вот встречный вопрос:
Есть комната, там 100 человек, нужно подсчитать количество человек на метр квадратный. По сути нужно подсчитать насколько плотно люди там размещены. И какое слово вы подставите в фразу:
Плотность ... - 5 человек на м2
?

Плотность размещения - 5 человек на м2

0

Что такое плотность размещения?
Вы утверждаете, что плотности точек не существует в природе. А плотность размещения - существует?

Ну в таком случае почему нельзя точно так же сказать про точки: плотность размещения - 300 точек на дюйм?

плотность точек на дюйм - 100 точек на дюйм. Вот и все.

плотности точек вообще не существует в природе
точка - абстрактный объект в пространстве, не имеющий никаких измеримых характеристик

ru.wikipedia.org/wiki/%D0%A2%D0%BE%D1%87%D0%BA%D0%B0

0

по ссылке много значений слова "точка" (не все). Почему вы объяснили точку геометрическим понятием?

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

>Переубеждать не инженеров не моя цель
А вы, значит, инженер?

>точка - абстрактный объект в пространстве, не имеющий никаких измеримых характеристик
Ясно.

Не читал вообще. Буквально вчера завершил разработку адаптивного дизайна в своем сервисе — не жалею ни разу.

Это хорошо, что вам нравится. А как пользователи восприняли?

0

Мы сидим на ЦП, адаптивность у которого -> 0
Если вы смотрите статистику посетителей и видите 45% пользователей с мобильных устройств, это не означает, что вам необходимо быстрее сделать адаптивный дизайн, это значит, что ваш текущий дизайн отлично работает с мобильных устройств.

А ещё это значит что ЦП гораздо лучше в десктопной верстке.

Вот только "на ходу приходится читать со смартфона"

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

Поэтому выводим постулат - % моб аудитории НЕ ГОВОРИТ о качестве мобильной верстки. Успеха

Wat?
У цп сайт не респонсив в плане media queries, чтобы менять все при ресайзе, но у них срабатывает адаптив в момент открытия сайта (как я понимаю здесь замешан ress, так ведь?)

Блин, вот же я слепой :(

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

Один единственный вопрос относительно поста, кому он предназначен?! Если профессиональным командам, то они все это итак знают, если рядовым клиентам, то зачем им это знать?!

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
этот как его

В новости написано почему на 25 минут.

Инструмент: Focus — расширение, которое вместо отвлекающих от работы сайтов показывает список дел
0
Rusya Lo

А сайт этого ногтевого сервиса не подскажите?

Стоит ли открывать салон красоты по подписке
0
Сергей Токарев

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

7 альтернативных браузеров вместо Google Chrome, Safari и Firefox
0
Alexey Katkov

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

20 причин, почему умирают стартапы
0
Андрей Панченко
GreenRed

Руслан, не поверишь ... я тоже =)

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