Учитывая стратегию развития мобильного интернета, и выбирая между адаптивным дизайном стандартной веб-страницы и сайтом мобильной версии, нужно помнить, что наиболее важным показателем для пользователя является функциональность сайта. И речь здесь идёт не только об улучшенной организации контента таким образом, чтобы его было удобно просматривать на маленьких экранах. Мобильные (впрочем, как и стандартные) вебсайты должны просто находиться, быстро загружаться, они должны быть лёгкими в навигации и интеграции.
Если мы не будем забывать об этом, то, учитывая на каком этапе находится Интернет сейчас и как ему ещё предстоит развиться, мы найдем много убедительных аргументов в пользу адаптивного дизайна страниц.
Постановка проблемы
Рассмотрим что-нибудь простое, например, дудлы от Google. Google серьёзно продвигается в позициях вверх благодаря этим небольшим, казалось бы, каждодневным изменениям своего логотипа, и к тому же они предлагают что-нибудь удивительное и интересное о дне сегодняшнем. Вспомните также, как вебсайты типа Facebook обновляют свой код дважды в день. И первый, и второй пример намекают на то, что в будущем пользователи сети Интернет будут требовать всё более частых обновлений контента и форм его подачи.
А так как люди информационно голодны, то происходит и процесс, обратный поглощению информации – люди начинают делиться информацией быстрее, чем когда-либо, что создаёт потребность в организованном новейшем контенте и надёжном доступе к нему.
К сожалению, это не единственные проблемы, вызванные быстрым развитием сети Интернет. Но именно их можно решить с помощью адаптивного дизайна.
Прежде чем вдаваться в подробности и объяснять, почему я верю, что адаптивность более эффективна как сейчас, так и в будущем, я бы хотел прояснить одну вещь.
Миф о контенте
Чтобы развернуть эту дискуссию, очень важно отойти от старого мифа о том, что контент должен быть строго разграничен, упрощён и урезан для пользователей мобильных версий.
Раньше урезание контента было целесообразным. Особенно на том этапе, когда мобильные веб-браузеры только появлялись. Но сегодня все понимают, что мы не можем делать выводы о том, ЧТО ищут пользователи только по тому, какой версией сайта пользуется человек – стандартной или мобильной. Как мы можем решать за пользователей, какую информацию оставить, а какую отбросить? Пользователям нужен полный набор функций в их мобильных девайсах, потому что неизвестно, где они ими в данный момент пользуются и для каких целей. 28% взрослых владельцев смартфонов в Америке заходят в интернет в основном со своих мобильных устройств. Это означает, что многие пользователи буквально требуют, чтобы мобильная версия по функционалу не отличалась от стандартной.
Итак, мы не можем урезать контент или юзабилити, но мы также и не можем вывести всё сразу на маленький экран. Это означает, что нам необходимо реорганизовать контент в более компактном виде и спрятать под кат второстепенную информацию более разумным образом. Это не обязательно легко, но это обязательно! =)
Теперь, когда мы знаем, что контент должен быть просто реорганизован, а не урезан, перед нами есть два пути решения этой проблемы. Первый – это адаптивный веб-дизайн, а второй – отдельная мобильная версия сайта.
Корректная система ссылок
В настоящее время система ссылок очень важна в сети Интернет. Люди делятся ссылкой на ваш сайт различными способами, и ваш сайт могут загружать из разных мест и с различных устройств. Пользователи переходят на сайт из поисковых систем, они кликают на рекламные объявления, переходят на ваш блог с Facebook или получают информацию о вашей компании в электронном письме от друга.
Те устройства, с которых пользователи отправляют ссылки, прописывают эти ссылки особым образом, и если вид этой ссылки не соответствует устройству, на которое она отправляется, то существует вероятность, что у получившего ссылку пользователя сайт отобразится некорректно. Эта ошибка может быть исправлена с помощью редиректа, но усложняя мобильную версию и его функционал, мы добавляем сложностей в работе с сайтом. Зачастую это не выход.
Мы все кликаем по ссылкам из поисковых систем, с электронной почты или из твитов, и нам иногда случалось попадать на некорректную версию сайта. Например, ваш друг хочет отправить вам в электронном письме ссылку на статью в wikipedia. Он с телефона, поэтому отправляет ссылку вида en.m.wikipedia.org/wiki/Responsive_web_design, а вы, в свою очередь, переходите по ссылке с ноутбука. У вас сайт отображается одной колонкой, вытянутой по всей длине вашего 13-дюймового экрана. Это раздражает и более того – это отпугивает посетителей сайта.
SEO
Далее. www.mysite.com и m.mysite.com – это разные адреса. Если переадресация не настроена должным образом, то поисковые и рейтинговые системы не распознают, что оба этих сайта обслуживают один и тот же контент просто для разных устройств. Релевантный поиск и аналитические счётчики в данном случае могут принимать эти ссылки за два разных сайта.
Ещё хуже дело обстоит с такой системой ссылок, когда ссылка на мобильную версию сайта абсолютно отличается от ссылки на стандартную версию. У некоторых сайтов, например, вместо общепринятого добавления к ссылке префикса m. существует вообще отдельная система страниц для мобильной версии. Этого нужно избегать, и неважно отдельный у вас веб-сайт или нет!
Google, как поисковая система, делает всё возможное, чтобы индексировать и обслуживать корректные версии сайтов для каждого устройства, но мы не можем надеяться на то, что машина сообразит, что две различные ссылки на один и тот же контент следует индексировать, ранжировать и анализировать как один и тот же сайт. Поэтому, чтобы быть уверенным, что Google проиндексирует ваши ссылки правильно, вам необходимо придерживаться его основополагающих принципов и добавлять дополнительный код на сайт. Google объясняет как это сделать, в практическом руководстве, но вверху страницы Google ясно даёт понять, что для seo “рекомендуемой конфигурацией Google” является адаптивный дизайн.
Время загрузки
Нам необходимо сохранить ту же структуру страницы и те же ссылки, организовав отображение контента в соответствии с параметрами мобильного устройства. Впрочем, именно это и представляет некоторую трудность для адаптивного дизайна. Запаситесь терпением.
Используя одну кодовую базу для реорганизации контента, нам не избежать создания дополнительных div-блоков и других скрытых элементов. Для мобильных устройств с их сетями передачи данных и с ограниченной скоростью загрузки, здесь и кроется проблема, потому что телефон загружает все элементы кода, неважно, скрыты они или нет.
Умный и эффективный кодинг может уменьшить время загрузки. Иногда люди ошибочно принимают адаптивный веб-дизайн за новшество, “экономящее время”, но на самом деле кодирование адаптивного дизайна с соблюдением всех нюансов – это непросто. Уменьшение времени загрузки требует опыта в кодировании и четкого понимания того, как работают коды и браузеры. А подавляющее большинство программистов может добиться более быстрой загрузки только с помощью “облегчения” текста и контента.
Но на самом деле проблема с картинками более серьёзна. И на сегодняшний день еще не существует её четкого решения.
Изображения
Изображения на сайтах с адаптивным дизайном должны быть достаточно большими для отображения в стандартной версии сайта, даже несмотря на то, что для маленьких экранов они визуально уменьшаются в размерах. То есть мы должны использовать большие картинки, но тогда наши мобильные версиии сайтов страдают, потому что, даже отображая уменьшенные визуально копии картинок, подгружаются всё равно полноразмерные картинки. С учётом ширины полосы, размера кэш-памяти и ограничений процессора мобильных устройств это не идеальный вариант.
Сейчас, конечно, ищутся пути решения проблемы с картинками, и есть хорошие перспективы в будущем. Например, существует элемент <picture> и специальные группы, такие как Responsive Images Community Group (RICG), занимающиеся поиском долгосрочных и стандартизированных решений. И всё же на сегодняшний день нет чёткого решения данной проблемы, и нельзя быть уверенным, что ваши изображения будут выдаваться в подогнанном для девайса размере, или будут правильно урезаны, если размеры экрана устройства ограничены.
Однако есть некоторые обходные пути. Существует сервис Adaptive Images, который замещает стандартные картинки в точках остановы. Существуют jQuery Picture и Picturefill, которые имитируют функциональность предлагаемого элемента <picture>. Для нашего движка, на котором находится сайт моей компании, мы создали jQuery плагин (в открытом доступе на Responsive Img), чтобы подменять картинки сайта в соответсвии с размером экрана. Хотя этот плагин решает проблему скорости загрузки, он по-прежнему опирается на JavaScript, поэтому это решение лишь временное.
Рано или поздно выход найдётся. Сегодня в 90% случаев проблема заключается лишь в недовольстве пользователей скоростью загрузки. А так как подключение к данным становится более быстрым, а мобильные телефоны более мощными, проблема теряет свою актуальность. Это + обещанные будущие стандарты для адаптивных картинок означает, что настанет день, когда нам не нужно будет так сильно беспокоиться о времени загрузки картинок, и у нас будет ещё меньше оснований отказываться от адаптивного дизайна.
Но я не хочу преуменьшать вопрос скорости загрузки. Существуют, конечно, случаи, когда отдельная мобильная версия вебсайта – более разумное решение. Это, например, те вебсайты, которые перегружены картинками, или чья чрезмерная сложность увеличивает время загрузки. А так как адаптивный дизайн не уменьшает времени загрузки, использование отдельной мобильной версии сайта будет более эффективным решением. Большинству же сайтов с адаптивным дизайном, особенно использующим JavaScript, вполне хватает времени загрузки, и при этом они обладают всеми дополнительными преимуществами адаптивного дизайна.
Обновления контента и новые возможности
Что останется в будущем неизменным – так это потребность в гибких сайтах, которые улучшены и организованы в соответствии с желаниями пользователей и последними тенденциями сети Интернет. Мы обновляем контент и юзабилити всё чаще и чаще. С адаптивным дизайном нам необходимо лишь добавлять функциональности в кодовую базу, экономя время и задавая направление. Зачастую люди просто не представляют, сколько нужно времени для поддержания двух версий сайта – стандартной и мобильной.
Кроме того, ключом к успеху современных сайтов является итерация. Регулярные обновления различных функций и дополнений сегодня – это необходимость, особенно для коммерции в сети и для веб-приложений. Сейчас существует такое огромное количество способов узнать, по каким именно запросам люди попадают на ваш сайт, что было бы глупым упущением не воспользоваться этой информацией и не подогнать ваш сайт под запросы пользователей. В каком-то смысле поддержка и развитие двух версий одного и того же сайта может означать лишь одно – те время и деньги, которые вы могли бы потратить на развитие и совершенствование одной версии (вероятнее всего, стандартной), вам придётся разделить на обслуживание двух версий, и поэтому обе из них будут обладать меньшими возможностями. У нашей компании есть клиент, который служит отличным тому примером.
Наша задача – поддержка и обновление их сайта, который создали не мы, и у которого есть отдельная мобильная версия. У этого огромного корпоративного клиента хорошие аналитические показатели, поэтому у них в разработке множество усовершенствований и новых идей для сайта. У нас с ними подписан контракт, по которому мы работаем над проектом определенное количество часов в месяц, но так как список желаемых корректировок и преобразований требует большего времени, чем оплачено по контракту, то мы обычно в конечном итоге совершенствуем лишь стандартную версию сайта.
На сегодняшний момент мобильная версия сайта проработана меньше, чем его стандартная версия, и в будущем такое положение вещей не изменится. Нам просто не хватает времени. Но они запустили кампании, связанные с QR-кодами и продвигают мобильную версию своего сайта.
В какой-то степени это огромная ошибка. Но её и нельзя избежать. Это проблема, которая возникает, если существует отдельная мобильная версия сайта. Если говорить о нашем клиенте, то тут трудно не согласиться, что в их случае разумнее релизить больше версий сайта. Им важнее видеть, что проекты функционируют, и тратить время и деньги на поддержку мобильной версии. Основания есть. Результатов нет.
Всё ведёт к одному
В итоге вот, что мы имеем. Мы знаем, что весь контент и функциональность должны быть доступны пользователям с мобильных устройств. Мы знаем, что сегодня очень важна корректная система ссылок. Мы знаем, что важно время загрузки, но скоро это уже перестанет быть проблемой. Мы знаем, что сайты постоянно нужно развивать, и что внесение каких-то изменений и добавление функционала требует времени.
Если посмотреть на все эти факторы в совокупности, то адаптивный дизайн должен победить.
Хотя, методы кодирования и мобильные версии ещё не стоит списывать со счетов, ведь каждый проект индивидуален. Бывают случаи, когда особо важны картинки на сайте, когда функции мобильной и стандартной версии должны сильно отличаться, или когда местположение целевой аудитории запрещают использование адаптивного дизайна. На мой взгляд, такие случаи очень редки, но всё же важно помнить, что адаптивность – не единственное решение всех проблем.
И последнее. Не забывайте, что за каждой отдельной мобильной версией сайта, которую вы создаёте и развиваете, тянутся ещё и версии для планшета, и для телевизора.
Неважно, поддержкой скольких версий вы занимаетесь. Если это отдельные сайты, то это, в любом случае, МНОГО. В идеале нужно развивать только один сайт. И адаптивный дизайн – это выход уже сегодня. Завтра же он будет повсеместной реальностью.
Оригинал: http://mobile.smashingmagazine.com/2013/02/14/responsive-web-design-planning-future/
