Найти тему
GeekBrains

Слоны или котики?

Оглавление

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

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

А теперь давайте раскроем суть метафоры, заменим домашнюю зверушку на ваш сайт и постепенно перейдём к теме Mobile First.

Слоны и котики

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

Заказчики, которые любят сайт ещё со временён прототипа, с трудом идут на такие жертвы. Многие не выносят столь жестокого обращения и, думая, что и так сойдёт, оставляют десктопную версию нетронутой и неадаптивной. Но статистика тонко намекает, что нет, не сойдёт. В 2016 году доля мобильного трафика уже составляет 38,6%. Треть пользователей будут страдать и спотыкаться о "хобот" вашего неадаптированного сайта, потирать синяки и бежать на сайты, где им будет удобнее.

-2

Плюсы Mobile First

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

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

-3

Отзывчивый Mobile First сайт fullbottle.co и как он выглядит на десктопах

Подход сразу выдаёт симпатичный сайт, который: 

  • идеально вписывается в маленькие экраны;
  • не всегда идеально, но всё же помещается на широких мониторах;
  • лёгкий и быстрый, что оценят те, кто ещё не подключил безлимитный мобильный интернет;
  • содержит только самое важное и на самом видном месте;
  • позитивно воспринимается поисковыми системами и легче продвигается, потому что Mobile Friendly.

Пользователь становится главным объектом, на который ориентрованы такие сайты, а не топ-менеджер, которому нужен сайт к выставке, чтобы все ахнули. Поэтому на сайтах, сделанных по принципу Mobile First, каждый элемент продуман и функционален. Анимация — только для улучшения микровзаимодействий. Никаких вау-эффектов, параллаксов и прочей "красоты ради красоты".

-4

Экраны мобильных устройств небольшие, разгуляться дизайнеру особо негде, поэтому избыточные элементы сразу улетают в корзину. Минимум воды, максимум пользы, меню-гамбургер, логотип в уголке и крупная кнопка с призывом к действию - все эти "фишки" кочуют от одного сайта к другому в адаптивных и мобильных версиях. Это уменьшает веб-разнообразие и подрезает крылья креативу. А когда шикануть дизайном нет возможности, главным на сайте становится контент. И это — самый жирный плюс подхода Mobile First.

Контент — "кровавая мозоль" веб-разработки. Заказчики частенько ленятся создавать его для сайта. Зачем, когда есть дизайнер, которой нарисует супер-продающую страничку, где клиент якобы будет чувствовать себя комфортно и с рыбными текстами, и с ворованными фоточками? А если заявки не поступают — так это дизайнер виноват. Недостаточно "продажно" нарисовал. 

В очередной раз откроем страшную правду — люди любят сайты за контент. Если он проседает, никакая анимация и продажные красные кнопки не удержат пользователя. И многие заказчики боятся признать это. Зато с подходом Mobile First у них не остаётся выбора (*злобный смех менеджера проектов*). В результате на выходе получается простенький, но удобный сайт с полезным содержанием.

Минусы Mobile First

Минус подхода Mobile First кроется там же, где и плюс — разгуляться с креативом негде. При переносе сайта с мобильного экранчика на 27-дюймовый монитор дизайнер, конечно, развернёт меню-гамбургер в строку, увеличит логотип, посимпатичнее скомпонует блоки. Но на выходе вы получите типичный минимализм. Если вам большего и не нужно — пробуйте Mobile First, ничего не потеряете. И мобильная аудитория будет безмерно благодарна. 

Ещё одна опасность Mobile First — забросить разработку, когда готова только версия для мобильных устройств. Если нет версии для мониторов с высоким разрешением, сайт становится Mobile Only (буквально «только мобильные»). Пример — сайт инстаграмма, где десктопная версия ничем не отличается от мобильной. Это не критично, но пользователи так же сильно не любят Mobile Only, как и неадаптированные сайты. Их раздражает нереализованное пространство по бокам, невнятные иконки (хотя место позволяет сделать понятные надписи) и крупные кнопки.

Поэтому, если решаетесь на разработку по принципу Mobile First, доводите дело до конца и делайте сайт отзывчивым.

Заключение

Mobile First — пока еще не так популярен. И, даже когда его используют, стараются не афишировать это. Но пару сайтов для примера я нашёл. Смотрите, оценивайте и пишите, что это по вашему мнению — инвестиция в будущее, в котором все пересядут на "мобилки", или мимолётный тренд?

  • postmates.com
  • carshare.hk
  • varvy.com

Если понравилась статья, ставьте лайк и подписывайтесь на канал.

Почитайте похожие материалы:

Лендинг: идеальный первый экран

Видео - Какой язык программирования выбрать в 2018?

Как фрилансеру рассказать о себе

Книги не по программированию, которые будут вам полезны

Как организовать рабочее место в однокомнатной квартире

Если вы хотите почитать статьи и материалы в нашем блоге, переходите на наш сайт.