От Mobile First к Mobile Native: о чём важно помнить разработчикам, которые ориентируются только на смартфоны. Почему Mobile First? Мобайл ферст

При ресайзе до 720 пикселей и меньше, заголовок переходит в более крупный размер с комфортными кнопками 60px.

Размеры, выравнивание, количество пунктов меню и кнопки адаптируются под ширину устройства.

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

В некотором смысле, больше значит лучше. Но что еще важнее, пропорции гармонизируют контент. Если основной текст имеет размер 24px , убедитесь, что он хорошо соотносится с остальной частью сайта. Тут нет каких-то жестких правил, но высота строк должна быть от 1.2х до 1.4х размера шрифта. Задайте размеры, плотность и вариации цветов на основе приоритетов. Тут многое исходит от внутреннего чутья и натренированного глаза.

Длина строки должна быть от 45 до 90 символов . Более детально общие правила типографики описаны в этом руководстве .

Работа с SVGИспользование WebKit для анимаций

Работоспособность важна: она напрямую влияет на комфорт пользователя. Если все работает медленно, людям будет плевать на подзаголовки в вашем дизайне, так как все, о чем они будут думать - как же медленно все происходит.

Внизу, когда начинается автомобиль, я использовал webkit-transform вместо animate из jQuery. Быстродействие значительно улучшается при такой реализации. Вдобавок, отлично работает на Mobile Safari и Chrome.

Для параллакса я задал разную скорость для 3 разных элементов. Я использовал webkit-transform вместо CSS top position. Из-за этого скролл стал гораздо плавнее. Настройка Viewport

Нужно сделать так, чтобы устройства iOS и Android масштабировали дизайн на 0.5, чтобы все красиво работало на ширине экрана 640px. Для iPad мы смасштабируем до 1.

Смарт-баннер iOS

Если у вас iPhone, можете добавить фрагмент кода, который прилинкует верхушку сайта к вашему приложению.

Когда люди заходят на сайт через свой iPhone или iPad, они видят красивый баннер, который перебрасывает их на App Store. Использование симулятора iOS

Проверка в Chrome на Android

Половина мобильных пользователей работают на Android. Чтобы протестировать элементы в браузере Chrome на Android, следуйте этим инструкциям .

Мне понадобилось время, чтобы освоить опцию в гамбургер меню Tools > Inspect Devices Заключение

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

Инвестор и партнёр венчурного фонда Andreessen Horowitz Бенедикт Эванс написал материал о том, почему всё больше разработчиков переходят с парадигмы Mobile First к парадигме Mobile Native, в чём между ними разница и о чём важно помнить создателям мобильных приложений..

«Несколько лет назад ИТ-компании перешли к стратегии Mobile First. До этого в организациях были отдельные департаменты разработки под мобильные платформы и работники, которые занимались развитием мобильного направления. Теперь новая функциональность сразу появляется на смартфонах, а на ПК иногда и не переносится», - пишет Эванс.

По словам инвестора, в 2016 году всё больше компаний приходят к парадигме Mobile Native. «Это эволюция принципа Mobile First. Что будет, если попросту забыть о ПК и дешёвых мобильных телефонах? Если полностью сосредоточиться на 2,5 млрд смартфонов и полностью опустить рынок low-end-устройств. Сможете ли вы построить большую компанию?».

По мнению Эванса, выбирающим стратегию Mobile Native разработчикам следует в первую очередь обдумать несколько основных моментов:

«Я бы хотел обратить внимание на последний пункт - стоит задумать, сколько различных технологий задействовано в таких приложения, и почему появление подобных сервисов было невозможно на ПК», - замечает Эванс.

Поразительно, насколько смартфоны одновременно сложнее и проще в использовании, чем ПК - и особенно это касается мобильного интернета.

Инвестор говорит, что с мобильным телефоном пользователи могут делать множество вещей, которые им не позволяла делать система, включавшая в себя сам компьютер, клавиатуру и мышь. Это открывает новые возможности как для самих владельцев смартфонов, так и для разработчиков. «Уже выросло целое поколение, которое готово к парадигме Mobile Native. А приложения, которые в 2007 году вызвали бы восторг, сейчас кажутся совсем простыми».

«Разработчики наконец могут отказаться от парадигмы Mobile First и применить свои навыки для того, чтобы максимально охватить возможности двух миллиардов смартфонов на планете. Это напоминает мне переход к Web 2.0 около девяти лет назад. Тогда все разработчики заявили: "А знаете, нам совсем не обязательно думать о Lynx, CGI-скриптах и диалап-соединении. Мы прошли ту точку, когда использование тега IMG казалось спорным решением, и можем думать о том, как создавать интерфейсы и предоставлять пользователям новые услуги"», - заключает Эванс.

Разработка мобильных приложений

О 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 разработки.

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

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

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

Представим, что основное из этого списка это главная картинка, название производителя, модели, комплектация, цена, список характеристик и оборудование.

Mobile First page. Company Name Company description 2015 Nissan Versa Note

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.

Model: Versa Note
Body: 4D Hatchback
Engine: 1.6L 4-Cylinder DOHC 16V
Fuel: Gasoline

Standard

Brake assist
Dual front side impact airbags
Rear window defroster
Passenger door bin
Driver door bin
Occupant sensing airbag
Traction control
CD player
Trip computer
Electronic Stability Control
Front anti-roll bar
Power steering
Rear window wiper
Front reading lights
Overhead airbag
ABS brakes

Created by Company.com

Copyright
Contact
Sitemap

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

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

@media (min-width: 768px) { /*Tablet and desktop styles*/ }

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

See more images...
Здесь мы используем 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"); } 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 + ".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 , которые возможно и не понадобятся пользователю при просмотре вашей страницы.

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

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

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

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

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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

Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

Адаптивная вёрстка сайта

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип ;
кнопку для показа/скрытия главного меню ;
главное меню

;
форму поиска по сайту .

L O G O

Анонс статей обернём элементом :

Дизайн Весна

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

В боковую колонку добавим список категорий, последние записи и форму подписки на рассылку:

Категории

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

Общие стили, сброс стилей браузера по умолчанию:

*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/ } ul { list-style: none; } a { text-decoration: none; outline: none; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; } body { font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; } /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { content: ""; display: table; clear: both; } /* стилевой класс, который управляет шириной контейнера сетки*/ .container { margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px; }

Подвал сайта разделим на три равных столбца:

Footer { padding: 30px 0; background: #3C3D41; color: white; } .footer-col { width: 33.3333333333%; float: left; } .footer-col a { color: white; } .footer-col:last-child { text-align: right; } .social-bar-wrap { text-align: center; } .social-bar-wrap a { padding: 0 7px; font-size: 18px; }

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню - от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом :

$(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });

О распространенности Android устройств за 2013 год, становится очевидным, что сейчас мы имеем тысячи различных девайсов имеющих доступ в сеть с экранами различных размеров. Невозможно сделать отдельный макет сайта под каждый из них. Поэтому сегодня и появилась необходимость использовать более гибкий подход к дизайну.

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

Термин “mobile first” последнее время довольно популярен. Он означает, что нужно начать с создания макета для мобильного телефона, но оптимизированного сразу и под экраны с большим разрешением. Таким образом, ваш макет для мобильных телефонов становится главным и основным, и это позволяет не делать других отдельных макетов. Вот так просто!

Используя гибкие, но простые макеты изначально, вы можете обеспечить лучшую поддержку различных браузеров, как с большим так и с маленьким полем отображения- которые не способны отображать полностью отзывчивые макеты. Поэтому если говорить о макетах, то термин “Mobile first” на самом деле значит “прогрессивные улучшения.”
- Итан Маркотт (Ethan Marcotte)

Min-width

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

/* Маленькие экраны(по умолчанию) */ html { font-size; 100%; } /* Средние экраны (640px) */ @media (min-width: 40rem) { html { font-size: 112%; } } /* Большие экраны (1024px) */ @media (min-width: 64rem) { html { font-size: 120%; } }

Разные браузеры отображают ваш CSS код по разному. Чтобы избежать этого, правильно будет использовать специальные скрипты для сброса значений в единый вид, например Normalize.css , который позволяет отображать элементы практически одинаково в любом браузере. Запомните это перед созданием вашего собственного файла стилей.

Viewport

Разместите его в блоке вашего HTML. Он включит медиа запросы в макетах для различных девайсов.

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

Очищаемая зона вокруг контента.

Рамка (Border)
Рамка находящаяся вокруг padding.

Очищаемая зона вокруг рамки.

box-sizing: border-box

Напишите этот код вначале вашего CSS файла. * — выберет все элементы на вашей странице.

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Добавляйте класс .flow-opposite к колонкам которые должны отображаться на мобильных устройствах первыми, но быть справа на больших экранах.

@media (min-width: 40rem) { .column.flow-opposite { float: right; } }

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

Кстати, примером самого успешного отзывчивого дизайна может служить фреймворк

От Mobile First к Mobile Native: о чём важно помнить разработчикам, которые ориентируются только на смартфоны. Почему Mobile First? Мобайл ферст

Еще на эту тему:

Другие статьи: