Mobile first это ориентация бизнеса

О Mobile First написано достаточно много и есть хорошие книги на эту тему. И все равно большинство разработчиков и компаний не используют его в своих проектах или не знают вообще об этом подходе.

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

• Что такое Mobile First и его плюсы
• Реализация подхода
• Статистика результатов

Что такое Mobile First?

В этом году количество пользователей, использующих мобильные устройства для доступа к сети Интернет, достигло 60%. Поэтому мобильный трафик становится более значимым и владельцы вебсайтов должны считаться с этой статистикой. Как показывает практика, пользователи мобильных телефонов и планшетов проводят меньше времени в сети и предпочитают сайты из первых строчек поисковой выдачи. В то время как пользователи ПК могут проводить больше времени в поисках информации. Поэтому ваш вебсайт должен быть хорошо оптимизирован для поисковых систем (SEO) и отвечать всем требованиям Mobile First, что бы прибывание пользователя на вашем сайте было максимально удобным и понятным через его мобильное устройство.

Поэтому одни из самых важных требований в Mobile First разработке это:

О важности этого подхода недавно писал поисковой гигант Google:

«Мы будем увеличивать значение показателя mobile-friendly в нашем рейтинге результатов. Эти изменения повлияют на мобильный поиск на всех языках мира и окажет значительное влияние на результаты поиска. Следовательно, пользователям будет легче находить результаты оптимизированные под их устройства.»

Видео о значимости Mobile First от Olivier Rabenschlag – глава Агентства Творческого Развития Google.

Плюсы Mobile First подхода

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

Реализация

Реализация подхода будет продемонстрирована с помощью фреймворка Moff.js (Mobile First Framework). Это JavaScript фреймворк, который заточен для Mobile First разработки.

Мы будем рассматривать подход на примере страницы с детальной информацией об автомобиле.

Определяем важную часть содержания

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

Подробный список данных на странице:

• Главная картинка машины
• Мелкие тумбы дополнительных картинок
• Цена
• Описание
• Список характеристик
• Оборудование
• Социальные сервисы Facebook, Twitter, g+
• Список похожих машин

Далее мы сверстаем страницу в которую добавим только эту информацию.

В идеале это тот объем трафика, который может быть потрачен пользователем для получения этих данных. И мы постараемся добиться этого с минимальной разницей.

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

Добавляем дополнительную информацию

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

И тут на помощь приходят Data Events хелперы и возможности AMD из фреймворка Moff.js

Добавляем тумбы для главной картинки

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

Здесь мы используем Data Events хелперы, которые помогают получить информацию при ее запросе. При клике на ссылку отправится ajax запрос по адресу указанному в атрибуте href . Результат запроса будет записан в элемент, который указан в аттрибуте data-load-target . Важным моментом будет то, что атрибут data-load-screen указывает при каких значениях экрана тумбы будут загружены автоматически. Размеры экранов взяты из CSS фреймворка Twitter Bootstrap. И в атрибуте data-load-module указываем идентификатор зарегистрированного модуля, который будет подключен после вставки результата ajax запроса.

При клике на ссылку происходят следующие действия:

1. Отправляется ajax запрос на URL указанный в ссылке и результат вставляется на страницу
2. Подключается зарегистрированный модуль (vehicle-gallery)
3. Подключаются зависимости (jQuery и Slick-carousel)
4. Загружается основной файл модуля
5. Инициализация модуля

Объявление класса модуля

Moff фреймворк имеет систему модульности с помощью, которой мы реализуем класс модуля vehicle-gallery.

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

Moff.modules.create(‘VehicleGallery’, function() < var _module = this; var _mainImage; function setMainImage() < _mainImage = _module.find(‘.vehicle_images_main img’)[0]; >function initializeSlickJs() < $(_module.find(‘.vehicle_images_thumbs-list’)).slick(< infinite: true, slidesToShow: 5, slidesToScroll: 1 >) > function handleMainImage() < $(_module.scope).on(‘click’, ‘.vehicle_images_thumbs-item img’, changePreview); >function changePreview() < var index = this.src.match(/thumb(d+)/); _mainImage.src = ‘images/preview’ + index[1] + ‘.jpg’; >this.scopeSelector = ‘.vehicle_images’; this.init = function() < setMainImage(); initializeSlickJs(); handleMainImage(); >; >);

Во время инициализации класса мы запускаем slick-carousel для создания карусели из наших тумб и устанавливаем обработчик для их просмотра.

Регистрация модуля

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

Moff.amd.register(< id: ‘vehicle-gallery’, depend: < js: [‘/bower_components/jquery/dist/jquery.min.js’, ‘/bower_components/slick-carousel/slick/slick.min.js’], css: [‘/bower_components/slick-carousel/slick/slick.css’] >, file: < js: [‘js/vehicle-gallery.js’] >, afterInclude: function() < Moff.module.initClass(‘VehicleGallery’); >>);

В нашем примере мы указали в зависимостях jQuery и его плагин slick-carousel, который создает из тумб карусель. Зависимости грузятся синхронно, в той очередности, в которой вы указываете. И после зависимостей грузится класс модуля vehicle-gallery.js. Далее, после загрузки файла модуля и его зависимостей мы инициализируем модуль в с помощью события afterInclude.

Статистика результатов.

Подведем итоги результатов создания Mobile First страницы.

Нижний график показывает, что не оптимизированная страница на 73% тяжелее, чем страница адаптированная под требования Mobile First. Таким образом мы можем сэкономить 186.94 KB, которые возможно и не понадобятся пользователю при просмотре вашей страницы.

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

В этой статье рассмотрен только один пример загрузки дополнительной информации. Полный пример можно будет посмотреть на сайте фреймворка.

P.S. В этой статье я хотел показать как правильно использовать Mobile First подход с помощью фреймворка Moff.js

• JavaScript
• Клиентская оптимизация
• Разработка мобильных приложений

Источник: habr.com

Mobile-first индекс – новый фактор ранжирования в SEO

Чем «грозит» для владельцев сайтов mobile-first- индексация, и так ли она страшна, как о ней говорят? Какие нюансы нужно знать при запуске нового сайта после 1 июля 2019 года? Основные принципы и преимущества mobile-first подхода читайте в нашем материале и обязательно сохраняйте себе.

Мобильный трафик неумолимо растет и это требует внесение корректив в работу поисковых систем. На этой волне Google еще 1 июля 2018 года представил digital-миру Mobile-first индексацию. С этого времени страницы в Google начали ранжироваться в зависимости от качества мобильной версии.

Что собой представляет Mobile-first индекс

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

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

После его старта уже не важно с какого устройства посылается сигнал, так как ПС все равно выдает результаты из мобильного индекса.

Mobile-first и новые сайты

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

Уровень готовности сайтов к переводу на mobile-first определяется при сопоставлении контента в мобильной и десктопной версии, а также структурированных и метаданных.

Разница между Mobile-first и адаптивным дизайном

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

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

Оба эти инструмента имеют ряд своих преимуществ.

В чем плюсы адаптивного дизайна:

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

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

В чем плюсы mobile-first подхода:

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

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

Основные принципы mobile-first

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

Главные принципы стратегии:

1. Нет автозаполнения для форм, что минимизирует вероятность отображения некорректно подтянутых данных.
2. Наличие только легких элементов, не влияющих на скорость загрузки сайта.
3. Горизонтальная прокрутка отсутствует.
4. Есть возможность кликать на контактные данные, копировать их при необходимости.
5. Контент отображается максимально корректно, в независимости от ориентации дисплея.
6. Размеры изображений на экранах устройств любого типа изменяются в автоматическом режиме.
7. Отсутствуют кнопки в виде картинок – только посредством CSS.
8. Не беспокоят всплывающие окна, которые раньше закрывали практически половину страницы.
9. Flash полностью отсутствует. В любых проявлениях.
10. Форма регистрации имеет короткие поля.
11. Все кликабельные элементы работают без проблем.
12. Всего в один клик можно выполнить необходимое действие (купить, заказать, связаться).

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

Запуск нового сайта – на что следует обращать внимание

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

На что же следует обратить пристальное внимание, если планируется запуск сайта:

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

Также при создании сайта стоит отказаться от переадресации. Для выделения разных версий ресурса лучше использовать атрибуты rel=саnonical и rel=alternate. Если бизнес развивается в каком-то одном регионе, то лучше использовать локальное SEO.

Заключение

Если у вас уже есть сайт, который создан до 1 июля 2019 года, позаботьтесь о наличии качественной мобильной версии. Соблюдайте все аспекты SEO. Старайтесь, чтобы эта версия ни в чем не уступала обычной. Регулярно проверяйте позиции сайта.

Если же вы только решили создать сайт, тогда обязательно учитывайте в процессе все требования mobile-first, чтобы получить в результате ресурс, который займет достойные позиции в выдаче Google.

Источник: leadzavod.com