Представьте, что у вас есть любимая домашняя зверушка — слон. Большой, блестящий и с модной кисточкой на хвосте. Слон вырос у вас на глазах: вы его с рук кормили, подравнивали кисточку, полировали бока. Но когда он вымахал до потолка, вы начаете подозревать, что в вашу типовую двушку он уже не помещается. Приходится закрывать на это глаза и игнорировать хобот, о который все спотыкаются в коридоре. И украдкой ночью вам прихоядт мысли: может отрезать этот хобот вообще! Вместе с кисточкой и ушами.
Да, боли и слёз (конечно же ваших, ведь кисточку вы любили больше, чем слон) будет много. А вот если бы вы сразу завели кота, таких проблем можно было избежать. Кот помещается и в двушке, и в замке, и в картонной коробке из-под обуви.
А теперь давайте раскроем суть метафоры, заменим домашнюю зверушку на ваш сайт и постепенно перейдём к теме Mobile First.
Слоны и котики
Сайт, который изначально создавался под большие мониторы, содержит в себе много информации, анимации и даже вау-эффектов — это наш слон. Он большой и красивый, но на экраны смартфонов и планшетов помещается с трудом. Чтобы сайт стал "читабельным" и "юзабельным" на маленьких экранах, необходимо его адаптировать. А значит, придётся многое урезать — отрубить декоративную анимацию, выпилить видео-фон и отказаться от параллакс-эффекта (но ведь в нём вся суть! - придётся всё-таки отказаться).
Заказчики, которые любят сайт ещё со временён прототипа, с трудом идут на такие жертвы. Многие не выносят столь жестокого обращения и, думая, что и так сойдёт, оставляют десктопную версию нетронутой и неадаптивной. Но статистика тонко намекает, что нет, не сойдёт. В 2016 году доля мобильного трафика уже составляет 38,6%. Треть пользователей будут страдать и спотыкаться о "хобот" вашего неадаптированного сайта, потирать синяки и бежать на сайты, где им будет удобнее.
Плюсы Mobile First
Чтобы не переживать мучительное отсекание любимых частей сайта, почему бы не сделать его изначальано для маленьких экранов? А уже потом накидывать контент и элементы дизайна и подгонять его под экраны побольше. Если проще, то сделать кота, который будет помещаться в любом пространстве.
В этом и заключается подход Mobile First (буквально «сначала мобильные»). Mobile First решает проблему адаптивных и мобильных сайтов — не нужно ломать голову, как впихнуть "невпихуемое" на экран четвёртого айфона.
Отзывчивый Mobile First сайт fullbottle.co и как он выглядит на десктопах
Подход сразу выдаёт симпатичный сайт, который:
- идеально вписывается в маленькие экраны;
- не всегда идеально, но всё же помещается на широких мониторах;
- лёгкий и быстрый, что оценят те, кто ещё не подключил безлимитный мобильный интернет;
- содержит только самое важное и на самом видном месте;
- позитивно воспринимается поисковыми системами и легче продвигается, потому что Mobile Friendly.
Пользователь становится главным объектом, на который ориентрованы такие сайты, а не топ-менеджер, которому нужен сайт к выставке, чтобы все ахнули. Поэтому на сайтах, сделанных по принципу Mobile First, каждый элемент продуман и функционален. Анимация — только для улучшения микровзаимодействий. Никаких вау-эффектов, параллаксов и прочей "красоты ради красоты".
Экраны мобильных устройств небольшие, разгуляться дизайнеру особо негде, поэтому избыточные элементы сразу улетают в корзину. Минимум воды, максимум пользы, меню-гамбургер, логотип в уголке и крупная кнопка с призывом к действию - все эти "фишки" кочуют от одного сайта к другому в адаптивных и мобильных версиях. Это уменьшает веб-разнообразие и подрезает крылья креативу. А когда шикануть дизайном нет возможности, главным на сайте становится контент. И это — самый жирный плюс подхода 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?
Как фрилансеру рассказать о себе
Книги не по программированию, которые будут вам полезны
Как организовать рабочее место в однокомнатной квартире
Если вы хотите почитать статьи и материалы в нашем блоге, переходите на наш сайт.