[Из песочницы] Почему Mobile First?
О Mobile First написано достаточно много и есть хорошие книги на эту тему. И все равно большинство разработчиков и компаний не используют его в своих проектах или не знаю вообще об этом подходе.
Поэтому хочу рассказать вам о нем вкратце и с примерами, это будет полезной информацией для тех кто не слышал об этом подходе.
Я постараюсь ответить на три основных вопроса:
- Что такое Mobile First и его плюсы
- Реализация подхода
- Статистика результатов
Что такое Mobile First?
В этом году количество пользователей, использующих мобильные устройства для доступа к сети Интернет, достигло 60%. Поэтому мобильный трафик становится более значимым и владельцы вебсайтов должны считаться с этой статистикой. Как показывает практика, пользователи мобильных телефонов и планшетов проводят меньше времени в сети и предпочитают сайты из первых строчек поисковой выдачи. В то время как пользователи ПК могут проводить больше времени в поисках информации. Поэтому ваш вебсайт должен быть хорошо оптимизирован для поисковых систем (SEO) и отвечать всем требованиям Mobile First, что бы прибывание пользователя на вашем сайте было максимально удобным и понятным через его мобильное устройство.
Поэтому одни из самых важных требований в Mobile First разработке это:
- Показать самое важное содержание в первую очередь
- Вебсайт должен быть легковесным и оптимизированным, т.к. скорость подключения мобильной сети может быть слабой в зависимости от местонахождения пользователя
- Вебсайт не должен загружать больше ресурсов, чем требуется пользователю для получения нужной информации, т.к. мобильный Интернет все еще остается дорогим. Дополнительная информация должна грузиться только по требованию пользователя
Итак, Mobile First это метод разработки оптимизированного вебсайта для различных мобильных устройств с учетом скорости подключения к сети. И важность отображения основного содержания конечному пользователю.
О важности этого подхода недавно писал поисковой гигант Google:
«Мы будем увеличивать значение показателя mobile-friendly в нашем рейтинге результатов. Эти изменения повлияют на мобильный поиск на всех языках мира и окажет значительное влияние на результаты поиска. Следовательно, пользователям будет легче находить результаты оптимизированные под их устройства.»
Видео о значимости Mobile First от Olivier Rabenschlag – глава Агентства Творческого Развития Google.
Плюсы Mobile First подхода
Напомню, что на сегодняшний день количество пользователей использующих мобильные устройства для серфинга в интернете достигло 60%. И поэтому использование Mobile First при разработке вебсайта дает большие преимущества для этих пользователей в первую очередь.
- Один вебсайт для всех устройств
- Пользователи получат важное содержание страницы в первую очередь
- Быстрая загрузка страниц при низкой скорости подключения
- Удобный интерфейс для навигации в мобильном экране
- Минимальное количество веб ресурсов требуемое для отображения основного содержимого – экономия мобильного Интернет трафика
- Топовые позиции в результатах поиска Google
Реализация
Реализация подхода будет продемонстрирована с помощью фреймворка Moff.js (Mobile First Framework). Это JavaScript фреймворк, который заточен для Mobile First разработки.
Мы будем рассматривать подход на примере страницы с детальной информацией об автомобиле.
Определяем важную часть содержания
Обычно на такой странице много данных. И мы должны решить, что из этого важно в первую очередь для пользователя.
Подробный список данных на странице:
- Главная картинка машины
- Мелкие тумбы дополнительных картинок
- Цена
- Описание
- Список характеристик
- Оборудование
- Социальные сервисы Facebook, Twitter, g+
- Список похожих машин
Представим, что основное из этого списка это главная картинка, название производителя, модели, комплектация, цена, список характеристик и оборудование.
Далее мы сверстаем страницу в которую добавим только эту информацию.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mobile First page.</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container">
<header role="banner">
<div class="header">
<div class="header_logo"><img src="images/logo.jpg"></div>
<div class="header_info">
<div class="header_info_company-name">Company Name</div>
<div class="header_info_description">Company description</div>
</div>
</div>
</header>
<main role="main">
<div class="vehicle">
<div class="vehicle_images">
<div class="vehicle_images_main">
<img src="images/preview1.jpg">
</div>
</div>
<div class="vehicle_info">
<h1 class="vehicle_info_title">2015 Nissan Versa Note</h1>
<p class="vehicle_info_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="vehicle_details">
<ul class="vehicle_details_list">
<li><span class="vehicle_details_label">Model:</span> Versa Note</li>
<li><span class="vehicle_details_label">Body:</span> 4D Hatchback</li>
<li><span class="vehicle_details_label">Engine:</span> 1.6L 4-Cylinder DOHC 16V</li>
<li><span class="vehicle_details_label">Fuel:</span> Gasoline</li>
</ul>
</div>
<div class="vehicle_equipment">
<h3>Standard</h3>
<ul class="vehicle_equipment_list">
<li>Brake assist</li>
<li>Dual front side impact airbags</li>
<li>Rear window defroster</li>
<li>Passenger door bin</li>
<li>Driver door bin</li>
<li>Occupant sensing airbag</li>
<li>Traction control</li>
<li>CD player</li>
<li>Trip computer</li>
<li>Electronic Stability Control</li>
<li>Front anti-roll bar</li>
<li>Power steering</li>
<li>Rear window wiper</li>
<li>Front reading lights</li>
<li>Overhead airbag</li>
<li>ABS brakes</li>
</ul>
</div>
</div>
</main>
<footer role="contentinfo">
<div class="footer">
<div class="footer_created">
Created by Company.com
</div>
<div class="footer_copy">
<ul class="footer_copy_list">
<li class="footer_copy_item"><a href="#">Copyright</a></li>
<li class="footer_copy_item"><a href="#">Contact</a></li>
<li class="footer_copy_item"><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
В идеале это тот объем трафика, который может быть потрачен пользователем для получения этих данных. И мы постараемся добиться этого с минимальной разницей.
В первую очередь напишем стили для отображения страниц на мобильных устройствах. И только, после настраиваются стили под другие размеры экранов через media query.
@media (min-width: 768px) {
/*Tablet and desktop styles*/
}
Добавляем дополнительную информацию
Теперь мы должны добавить оставшиеся данные таким образом, что бы пользователь знал об этом и мог получить данные запросив их.
И тут на помощь приходят Data Events хелперы и возможности AMD из фреймворка Moff.js
Добавляем тумбы для главной картинки
Мы должны показать пользователю, что есть еще дополнительные картинки доступные для просмотра. Для этого нам нужно добавить ссылку под главной картинкой, которая ведет на тумбы.
<div class="vehicle_images">
<div class="vehicle_images_main">
<img src="images/preview1.jpg">
</div>
<div class="vehicle_images_thumbs">
<a href="thumbs.html" data-load-target=".vehicle_images_thumbs" data-load-screen="sm md lg" data-load-module="vehicle-gallery">
See more images...
</a>
</div>
</div>
Здесь мы используем Data Events хелперы, которые помогают получить информацию при ее запросе. При клике на ссылку отправится ajax запрос по адресу указанному в атрибуте href. Результат запроса будет записан в элемент, который указан в аттрибуте data-load-target. Важным моментом будет то, что атрибут data-load-screen указывает при каких значениях экрана тумбы будут загружены автоматически. Размеры экранов взяты из CSS фреймворка Twitter Bootstrap. И в атрибуте data-load-module указываем идентификатор зарегистрированного модуля, который будет подключен после вставки результата ajax запроса.
При клике на ссылку происходят следующие действия:
- Отправляется ajax запрос на URL указанный в ссылке и результат вставляется на страницу
- Подключается зарегистрированный модуль (vehicle-gallery)
- Подключаются зависимости (jQuery и Slick-carousel)
- Загружается основной файл модуля
- Инициализация модуля
Далее рассмотрим регистрацию этого модуля.Объявление класса модуля
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 для создания карусели из наших тумб и устанавливаем обработчик для их просмотра.Регистрация модуля
Регистрация модуля происходит с помощью объекта, который содержит в себе уникальный идентификатор, может содержать зависимости модуля и основной файл класса модуля.
<script src="/bower_components/moff/dist/moff.min.js"></script>
<script>
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');
}
});
</script>
В нашем примере мы указали в зависимостях jQuery и его плагин slick-carousel, который создает из тумб карусель. Зависимости грузятся синхронно, в той очередности, в которой вы указываете. И после зависимостей грузится класс модуля vehicle-gallery.js. Далее, после загрузки файла модуля и его зависимостей мы инициализируем модуль в с помощью события afterInclude.
Статистика результатов.
Подведем итоги результатов создания Mobile First страницы.
Нижний график показывает, что не оптимизированная страница на 73% тяжелее, чем страница адаптированная под требования Mobile First. Таким образом мы можем сэкономить 186.94 KB, которые возможно и не понадобятся пользователю при просмотре вашей страницы.
Заключение
Таким образом мы избавляемся от загрузки большого количества второстепенных ресурсов, но которые будут доступны по требованию пользователя.
В этой статье рассмотрен только один пример загрузки дополнительной информации. Полный пример можно будет посмотреть на сайте фреймворка.
Пример Mobile First старницы
Пример не Mobile First страницы
P.S. В этой статье я хотел показать как правильно использовать Mobile First подход с помощью фреймворка Moff.js
