{ "author_name": "Konstantin Panphilov", "author_type": "self", "tags": ["\u043a\u043e\u043b\u043e\u043d\u043a\u0430","\u0434\u0438\u0437\u0430\u0439\u043d","\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439_\u0434\u0438\u0437\u0430\u0439\u043d","\u0440\u0435\u0441\u043f\u043e\u043d\u0441\u0438\u0432"], "comments": 42, "likes": 16, "favorites": 1, "is_advertisement": false, "section_name": "default", "id": "5577", "is_wide": "1" }
Konstantin Panphilov
7 068

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

Кирилл Стрельченко, эксперт по юзабилити и арт-директор компании-разработчика 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 мы уже, скорее всего, не увидим вообще. Так стоит ли сегодня инвестировать деньги и силы в прошлое? Лично мне ответ очевиден.

#Колонка #Дизайн #отзывчивый_дизайн #респонсив

Статьи по теме
Библиотека стартапера: «Эмоциональный веб-дизайн»
10 принципов веб-дизайна от разработчиков портала британских госуслуг
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]