Mobile First: новый подход в веб-дизайне

В 2015 году компания Google объявила, что впервые количество поисковых запросов на мобильных устройствах превысило количество запросов на традиционных настольных компьютерах. С тех пор онлайн-сектор отреагировал на эту новость, внедрив в свой веб-дизайн новые, более надежные концепции, ориентированные на мобильные устройства. В результате в настоящее время происходит фундаментальный сдвиг в веб-дизайне, и оптимизация сайтов для мобильных устройств все увереннее выходит на передний план отрасли. Одним из примеров этой тенденции является набирающий популярность подход mobile first, которого решили придерживаться многие разработчики. Будь то дизайн, удобство использования или производительность, здесь важен один основной принцип: мобильные устройства на первом месте — и иногда меньше значит больше.

Новый подход в веб-дизайне: mobile first вместо desktop first

Проще говоря, mobile first — это концепция веб-дизайна, оптимизированного для мобильных устройств. Как следует из названия, при такой стратегии приоритет отдается сайтам, ориентированным на мобильные устройства, а разработка версий для настольных браузеров откладывается на потом. До сих пор отраслевая практика отдавала предпочтение разработке сайтов, ориентированных на настольные компьютеры, которые обычно сопровождались широким спектром возможностей и функций, таких как специальная графика, визуальные и звуковые средства. Такие методы ориентированы на пользователей с большими экранами компьютеров и более надежными соединениями для передачи данных. В результате мобильные сайты часто оставались для многих разработчиков лишь задним умом. Стратегия mobile first пересматривает эту догму и ставит ее с ног на голову, влияя не только на внешний вид сайта, но и на техническую инфраструктуру, лежащую в основе сайта.

Принцип mobile first

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

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

  • Меньше — значит больше: сосредоточьтесь на основных элементах проекта
  • Свести к минимуму затраты времени и энергии на программирование
  • Максимальная производительность на всех мобильных устройствах
  • Быстрый доступ к информации
  • Дизайн, ориентированный на дисплеи смартфонов
  • Избегайте больших картинок и ненужных изображений
  • Сократите объем исходного кода
  • Избегайте использования JavaScript, программируйте страницу непосредственно на HTML5.

Основная идея здесь заключается в том, чтобы сосредоточиться на разработке оптимальных решений для мобильных устройств. Дисплеи ноутбуков и настольных компьютеров имеют второстепенное значение и должны быть оптимизированы в соответствии с принципом прогрессивного улучшения. При реализации этой стратегии часто создаются так называемые сетки в формате смартфона. Следующий шаг — масштабирование сайта, чтобы он подходил и для больших дисплеев. И, конечно, независимо от того, для какого устройства вы программируете сайт, использование хорошего отзывчивого веб-дизайна очень важно при оптимизации отображения контента.

В чем преимущества подхода «сначала мобильные устройства»?

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

Вы можете скачать инфографику о мобильном трафике данных в мире здесь.

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

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

Превращение видимых недостатков в преимущества

Главное преимущество стратегии mobile first заключается в том, что она превращает предполагаемые недостатки в преимущества. Хотя меньшие экраны влекут за собой естественные последствия: меньше места для рекламы, а также некоторые ограничения на форматирование, потеря содержания компенсируется за счет исключения неважных или отвлекающих элементов управления. Остается только уменьшенное и, следовательно, более удобное для пользователя решение. Переходя к стратегии mobile first, операторы сайтов лучше адаптируются к последним изменениям в поведении пользователей и в то же время закладывают прочный фундамент для успешной концепции mobile first.

Новые критерии удобства использования

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

Что такое мобильная дружественность?

Проверить, считает ли Google сайт дружественным к мобильным устройствам, очень просто: достаточно ввести URL-адрес мобильного или отзывчивого сайта в следующий инструмент: Google-Webmaster-Tool. Благодаря этой функции веб-дизайнеры получают больше информации о том, как Google Crawler проникает на сайты и оценивает важные факторы.

Веб-сайт является мобильно дружественным…

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

Веб-сайт не является мобильно дружественным…

  • если он содержит редко используемое программное обеспечение (например, Flash)
  • если шрифт слишком мелкий и трудночитаемый
  • если ссылки расположены слишком близко друг к другу
  • если контент слишком широк для дисплея.

Mobile first означает content first…

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

Однако это не означает, что при следовании стратегии mobile first контент следует использовать экономно. Изображения, тексты, графика, а также другие элементы контента по-прежнему актуальны для сайта. Важно то, что тексты должны быть расположены таким образом, чтобы их можно было легко воспринимать на маленьком экране. Тексты должны быть организованы в небольшие, более компактные абзацы, которые четко обозначены заголовками, чтобы пользователь мог быстро получить необходимую ему информацию. Это общие рекомендации. Изображения и другие формы мультимедиа должны быть настроены так, чтобы загружаться как можно быстрее без потери качества на HD-дисплеях. 

Мобильные сайты как альтернатива?

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

Мобильные устройства, скорее всего, будут играть все более важную роль для веб-разработчиков. Целые бизнес-модели и процессы также станут мобильными в будущем. Разработчикам все же необходимо знать, что принятие стратегии mobile first не всегда является идеальной панацеей для интернет-потребностей компании.  Сайты, например, крупных интернет-магазинов, особенно тяготеют к тенденции создания новых приложений. Не забывайте о том, что отзывчивый веб-дизайн должен оставаться приоритетом; не каждый пользователь смартфона заинтересован в постоянной загрузке новых приложений.

Оцените статью
cdelat.ru
Добавить комментарий