0,0
рейтинг
23 октября 2015 в 16:57

Разработка → Почему 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 запроса.

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

  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 для создания карусели из наших тумб и устанавливаем обработчик для их просмотра.

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

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

<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
Кадыр Фузайлов @kfuzaylov
карма
7,0
рейтинг 0,0
Front-end Architect
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (17)

  • +17
    Про mobile-first я всё понимаю, но у меня с этим одна проблема. Повсеместно я наблюдаю, что вместо mobile-first делается mobile-only. Вы знаете, я не слепой идиот. Не надо верстать здоровые кнопки на весь экран! Я хочу больше информационного наполнения, больше возможностей!

    Вот например интерфейс Nest'а. Что на телефоне что на сайте — минимализм, мать его. Почему зайдя на сайт со своего здорового 27-и дюймового экрана я вынужден наблюдать ту же самую одинокую кнопку что и на телефоне? Где графики потребления, где расширенные настройки?

    А все почему? Потому что mobile-first, а на остальное МПХ положили.
  • +1
    Как уже отметили у подхода mobile-first есть существенные минусы, которые вы почему-то не указали.
    Проблема даже не в том, что mobile-first плавно переходит в mobile-only (и адаптивная верстка не спасает), проблема в количестве полезной информации, которую можно разместить на экране телефона и экране монитора.
    Если вы делаете веб-сайт на мобильный телефон, вы вмещаете минимум информации, а на экране монитора можно вместить куда больше.
    То есть нужно две разные версии сайта.
    А при адаптации в любую сторону возникают проблемы.
    • +2
      Зачем разные версии сайта? Можно скрывать ненужную информацию для мобильных устройств. Или совсем, или сделать возможность получать её по запросу. И никакой проблемы нет.
      • –1
        Тогда у вас в любом случае будет переизбыток информации, относительно разработанной с нуля мобильной версии сайта. Избежать это можно только при помощи выводя различную информацию для разных платформ, но это вроде тоже самое, что и две разные версии сайта.
        • +1
          Грамотно разработанный mobile first сайт поможет избежать создания двух разных сайтов. Тут конечно же потребуется не малая работа дизайнера и специалиста по юзабилити. К каждому сайту и даже странице нужно подбирать уникальных подход. Как раз в этой статье был показан пример, как можно сделать mobile first станицу с детальной информацией о машине.
    • 0
      Так можно же mobile first + progressive enhancement делать, постепенно увеличивая количество информации в зависимости от viewport'a и брейкпоинтов.
  • 0
    Пример Mobile First старницы не кешируется т.е. для конечного пользователя это может стать лишним расходом трафика, а не экономией
    • 0
      JavaScript и CSS файла закешируются если отправлять правильные заголовки с сервера. Единственным исключением является это ajax запросы на получение контента. Но эта оптимизация стоит того, что бы экономить трафик на мобильных устройствах.
  • 0
    Плюсы Mobile First подхода:… Топовые позиции в результатах поиска Google

    Автор понимает о чем он пишет?
    • 0
      Да, поэтому я и привел в пример цитату из блога гугл.
      Если ваш сайт mobile friendly то гугл дает приоритет в поисковом результате, нежели не mobile friendly сайту.
      • 0
        Позволю усомниться в том что вы понимаете на каком месте среди критериев формирования топа находится mobile friendly.
        • 0
          Возможно вы правы. Я не эксперт по SEO и думаю можно перефразировать эту часть, написав, что более предпочтительные позиции в результатах поиска, чем не mobile friendly сайт.
  • 0
    Можете пояснить про модули в Moff: оно ведь, я так понял, каждый файл загружает отдельно? А как же конкатенация и минификация? На мобильном телефоне через сеть оператора (гигантские задержки) таскать больше одного CSS и одного JS — роскошь (тут где-то пролиты слёзы по поводу doubleclick и других монстров дисплейной рекламы).

    Только из-за этого библиотека попахивает — нужно раскурочивать библиотеку и писать костыль-адаптер под свой загрузчик статики (который автоматом делает конкат и минификацию).
    • 0
      Согласен с вами, на данном этапе этой возможности нет в фреймворке. В дальнешем планируется раелазиация этого функционала.
      Пока придется вручную объеденять и сжимайть файлы и прописывать их как файлы или зависимости модуля.
      • 0
        Хотя нужно найти золотую середину.
        Например, если jQuery является зависимостью у двух модулей, то лучше его не объеденять с другим файлом. И тогда он поднимиться из кэша для второго модуля. А в случае с конкатенацией он загрузится два раза.
        На данный момент, лучше всего это сделать руками, т.к. не вижу стандартного решения для всех случаев.
  • 0
    в вашем примере не Mobile First страницы пропущен заголовок “Vehicle Details”

    image
    • +1
      Спасибо.

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