Адаптивный дизайн

Опубликовано tulvit - пт, 11/07/2014 - 23:08

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

Графики эпического роста доли мобильных пользователей интернета приводить не буду. Средняя температура по больнице же. С зависимостью не только от стран, но и от самих сайтов. Понятное дело, что всякими там инстаграмами и прочими твиттерами пользуются в основном со смартфонов, в то время как сайты с документацией просматриваются чаще всего с ПК. Хотя в последнем случае тенденция тоже налицо - доля мобильных пользователей сайта w3schools.com за два года увеличилась с 2% до 4%.

Лучше привести реальный пример. Например, сайт scomedy.com. За последний месяц картина такая:

Доля мобильных пользователей сайта scomedy.com

Внезапно, доля десктопов составляет меньше половины. Что это означает? А это означает, что каждый второй пользователь видит сайт примерно так (для разрешения 320x480, на которое приходится порядка 10% трафика):

scomedy для разрешения 320x480

Ну ок, пусть не так, а так (подгонка сайта под размер экрана):

scomedy для разрешения 320x480

Но и это не сильно лучше.

Что в итоге имеем? Ну, помимо того, что большая часть посетителей не может нормально пользоваться сайтом.

В итоге мы имеем все шансы попасть под фильтры гугла (Changes in rankings of smartphone search results, "we plan to roll out several ranking changes in the near future that address sites that are misconfigured for smartphone users"). Что у меня и случилось.

И вполне себе маячащую на горизонте возможность вбить в околонулевое значение RPM в AdSense.

mobile

Что тоже у меня произошло.

О создании отдельной мобильной версии сайта речи не идет. Прошлый век. Не хорошо это (пользуясь случаем, передаю привет m.imdb.com).

Так что только адаптивный дизайн.

Что такое адаптивный дизайн

Сразу хотелось бы оговориться, что мое представление об адаптивном дизайне и его трактовка расходятся с общепринятыми. Ну, как расходятся. Общепринятого и нет. Статьи в вики в некоторых тезисах противоречат определениям сих терминов самих авторов (да, у них есть авторы, понятие "responsive design" ввел в оборот Ethan Marcotte, а "adaptive design" Aaron Gustafson, во всяком случае так принято считать). В различных блогах каждый рассуждает на тему в меру своей испорченности и специализации, что зачастую одно и то же, так-то. Все сходятся только в одном - в общем посыле. А дьявол, который в мелочах, у каждого свой.

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

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

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

И если раньше в фразе "предоставление доступа к сайту с ПК" последнюю часть (которая про ПК) опускали, то теперь уже приходится наоборот акцентировать. С ПК, с мобильных устройств, с планшетов, с iPhone3, iPhone5... Т. к. разница в них ощутимая.

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

Проще рассмотреть на примере. Ютуб с ПК:

Ютуб с персонального компьютера

Ютуб с iPhone3:

Ютуб с айфона

В обоих случаях мы получаем доступ к просмотру видео ролика.

Но какие изменения произошли в мобильной версии? На вскидку, следующие:

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

И так далее. Это пример хорошего адаптивного дизайна.

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

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

Версия под ПК сайта паба

Сайт паба The Daily Pint.

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

Сайт паба, мобильная версия

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

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

Респонсив дизайн

Умышленно не пишу "отзывчивый" (прямой перевод "responsive"), ну не нравится мне это слово в данном контексте, лучше уж буду транслитом пользоваться.

Что такое респонсив дизайн и чем он отличается от адаптивного?

Для начала зададимся вопросом, какие инструменты используются для реализации адаптивного дизайна? Ответ прост: любые. Т. е. можем задействовать как серверную сторону, так и клиентскую.

И вот клиентская реализация адаптивного дизайна и есть этот самый респонсив дизайн. Т. е. исключительно средствами CSS/JS. Таким образом получается, что респонсив - подмножество адаптива. Любой респонсив - адаптив, но не любой адаптив - респонсив.

Как я себе это представляю. Есть сайт. И есть ряд устройств, под которые его надо отображать. Разброс экранов устройств - от 320 пикселей до 1600. Делим их категории эдак на три, от 320 до 600, от 600 до 900, от 900 и выше. Для каждой группы устройств будем формировать разный контент и разный набор функционала. Или более техническим языком - отдавать разный HTML.

Но ведь в каждую группу может попасть разное количество разных же устройств, нельзя же делать одинаковый дизайн для разрешения в 320 пикселей и в 540? И вот тут подключается клиентская сторона. Вариативность характеристик устройств в пределах одной подгруппы мы нивелируем за счет использования CSS/JS. Что известно в рунете уже не первый год как "резиновая верстка". Опять же, если более техническим языком: для устройств в пределах одной подгруппы мы отдаем одинаковый HTML, обеспечивая оптимальное отображение контента за счет использования CSS и перестройки DOM'a на стороне клиента с помощью JS.

И как это все лучше реализовать?

Если бы я знал. Ни знаний, ни опыта. А надо. Решил пойти по уже проверенному неоднократно пути: прочитать все книги по теме. Благо адаптивному дизайну не ахти сколько лет и книг по нему написано не много. Нашел всего семь (на пиратской бухте).

книги по адаптивному дизайну

Таким образом общее количество книг, лежащих в папке /books и которые я собираюсь прочитать не сегодня-завтра, достигло 15,043 штук. Но книги именно по адаптивному дизайну в приоритете, так что за ближайшее время должен их прочитать.

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

Не все так плохо, честно-честно! :3

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



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

никому не нужных дизайнерских книжек



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

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

Вот как пример. На SComedy на главной висит слайдшоу. Прикручивал с год назад, перепробовал много разных, остановился на jQuery Slideshow, как на самом лучшем с моей точки зрения на тот момент.

Как там объявляются слайды? Вот так:
 

 

 

 

 



Или в моем случае:
 

 

 



Что в результате? В результате печаль-тоска и вселенская грусть:

 

 

 

  • Увеличение времени загрузки страницы.
  • Разорванная верстка при отключенном JS.
  • Раз через раз картинки грузятся быстрее, чем подцепляется JS, в результате на секунду-другую рвется верстка.



Как бы я сделал сейчас? В HTML отдается только одна картинка. Нет ЯС или он не успел прогрузиться? Ну ок, вместо слайдшоу будет просто красивая иллюстрация. А само построение слайдшоу происходит уже после рендинга страницы, т. е. те же слайды (за исключением первого, который сразу отображается) будут вставляться в ДОМ средствами ЯС. И никаких проблем.

И вот такие примеры в книгах разбираются десятками, помимо сухой теории и иногда разных шуток и историй не всегда в тему.

Я считаю, что стоит того. Однозначно.

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

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

You must have Javascript enabled to use this form.