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

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

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

Подход «Mobile First»

Термин “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%; } }

1. Не все браузеры созданы одинаково

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

2. Добавляйте Viewport Мета Тег

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

Блочная Модель CSS

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

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

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

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

3. Используйте box-sizing: border-box

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

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

Выбор за Вами .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }

Flow Opposite

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

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

Практикуйтесь и совершенствуйте свои навыки

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

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

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

О 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 , которые возможно и не понадобятся пользователю при просмотре вашей страницы.

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

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

При ресайзе до 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 казалось спорным решением, и можем думать о том, как создавать интерфейсы и предоставлять пользователям новые услуги"», - заключает Эванс.

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

Мобильная навигация

Абсолютно приемлемый отзывчивый дизайн, но при стандартных размерах мобильного просмотра (320 x 480 пикселей) все, что вы действительно видите, - это меню навигации. Наверняка, только открыв главную страницу, я хотел бы увидеть что-то другое, нежели это. London & Partners не единственные, у кого есть эта проблема, подобная практика наблюдается во многих отзывчивых дизайнах по всему Интернету.

Итак, какие же есть решения?

Мы уже знаем о нескольких способах обойти это, например, опираясь на jQuery, которая помогает нам разобраться с этим. Возьмите объяснение раскрывающегося меню Chris Coyier Five Simple Steps ("Пять простых шагов") .

Большой экран, маленький экран.

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

Кроме того, вы можете скрыть свою навигацию, но переходить в режим просмотра при нажатии кнопки «меню». Вы можете увидеть этот эффект в действии в последнем Bootstrap Twitter.

Меньшие экраны скрывают навигационные ссылки и отображают иконку «список» (которая быстро стала восприниматься как «меню»), она показывает навигацию при нажатии. Опять же, мобильные посетителям представлен максимально возможный объем контента и при их желании им доступны опции навигации.

Чистое решение CSS

Мы будем использовать технику, которую обсуждал Luke, и которая предусматривает использование CSS и подход Mobile First. Какой смысл мы вкладываем в понятие "подход Mobile First"? Проще говоря, мы собираемся разработать прямой мобильный макет, а затем постепенно улучшать дизайн для больших экранов. Мы будем использовать медиа-запросы, которые обнаруживают постоянно увеличивающиеся размеры экрана, постепенно добавляя стиль и функции.

Это означает, что при просмотре дизайна с помощью мобильного устройства будет загружен только самый минимум CSS и ресурсов. Это также означает, что более старые версии IE (которые не распознают медиа-запросы) будут представлены на мобильной версии сайта. Посмотрите Leaving Old Internet Explorer Behind от Joni Korpi о дополнительной информацией об этом.

1.Разметка

Я объясню идеи, лежащие в основе этого решения, по мере нашего продвижения вперед, поэтому пока давайте набросаем некоторую разметку, начав с документа blanco HTML5.

Mobile First Responsive Navigation

Сделав это, добавим некоторую структуру страницы. Непосредственно необходимые моменты и всё для целей нашей демонстрации. Я использовал наполнитель текста Monty Python от Holy Grail (спасибо Chris Valleskey), который является хорошим способом вызвать улыбку на вашем лице в процессе работы:)

Nav Blue. No, yel…

Shut up! Will you shut up?! But you are dressed as one… Camelot! You don"t vote for kings.

We want a shrubbery!!

Look, my liege! Shut up! But you are dressed as one…

• The nose?
• Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!
• Look, my liege!

Help, help, I"m being repressed!

Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?!--end wrapper-->

2.Разметка навигации

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

• Portfolio
• About Me
• Nonsense
• Services
• Contact
• Top

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

Nav Menu

3.Сброс CSS

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

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTE: WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

4.Основные стили

На данный момент наша страница выглядит довольно скучно.

Потому давайте улучшим ситуацию, добавив простой стилизации.

/*begin our styles*/ body { font: 16px/1.4em "PT Sans", sans-serif;; color: #1c1c1c; } p, ul { margin: 0 0 1.5em; } ul { list-style: disc; padding: 0 0 0 20px; } a { color: #1D745A; } h1 { } h2 { font-family: "PT Serif", serif; font-size: 32px; line-height: 1.4em; margin: 0 0 .4em; font-weight: bold; } /*layout*/ .wrapper { } article { border-bottom: 1px solid #d8d8d8; padding: 10px 20px 0 20px; margin: 10px 0; } /*header*/ header { background: #1c1c1c; padding: 15px 20px; } /*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after { content:""; display:table; } header:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ header { zoom:1; } h1.logo a { color: #d8d8d8; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 20px; line-height: 22px; float: left; letter-spacing: 0.2em; } a.to_nav { float: right; color: #fff; background: #4e4e4e; text-decoration: none; padding: 0 10px; font-size: 12px; font-weight: bold; line-height: 22px; height: 22px; text-transform: uppercase; letter-spacing: 0.1em; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } a.to_nav:hover, a.to_nav:focus { color: #1c1c1c; background: #ccc; }

Это все основные моменты (шрифты, line-heights, цвета и т.д.), но что действительно важно, так это то, что я нарисовал кнопку «меню» справа, внутри , именно там, где вы и ожидаете её увидеть.

Если вы наведете на него курсор, вы увидите состояние зависания - конечно, это не обязательно для устройств с сенсорным экраном, но подобный характер действия будет перенесен на несовместимые версии Internet Explorer. То, что мы определили в качестве преимущества для мобильных пользователей, это состояние:focus . Это то же самое, что и состояние:hover , но оно будет предлагать важную обратную связь для устройств с сенсорным экраном. Наши пользователи узнают , что они достигли успеха, коснувшись кнопки меню.

В любом случае, щелкните по нему, и вы попадете в навигацию - супер.

Теперь давайте немного займемся стилизацией меню.

5.Навигационные стили

На самом деле мы будем стилизировать нашу основную навигацию по примеру показаного выше London & Partners, за исключением того, что это будет явно внизу страницы.

/*navigation*/ #primary_nav ul { list-style: none; background: #1c1c1c; padding: 5px 0; } #primary_nav li a { display: block; padding: 0 20px; color: #fff; text-decoration: none; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; letter-spacing: 0.1em; line-height: 2em; height: 2em; border-bottom: 1px solid #383838; } #primary_nav li:last-child a { border-bottom: none; } #primary_nav li a:hover, #primary_nav li a:focus { color: #1c1c1c; background: #ccc; } /*footer*/ footer { font-family: "PT Serif", serif; font-style: italic; text-align: center; font-size: 14px; }

Намного лучше. Мы сделали ссылки меню приятными и большими (подробнее читайте в блоге Luke Wroblewski Touch Target Sizes) и еще раз определили состояние:focus для отзывов пользователей.

6.Делаемся большими

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

Но в какой момент он становится таковым? Есть много способов, как подойти к медиа-запросам, но мы будем работать на основе того, что мобильный viewport - 320 x 480 пикселей. Он имеет ширину 320 пикселей при просмотре в ориентации "portrait", 480 пикселей в ширину при просмотре в "landscape", поэтому будет оправдано, если мы установим наш первый медиа-запрос, чтобы он определял любой экран, больше 480 пикселей.

Однако следующий шаг - это, вероятно, планшет. IPad имеет разрешение 980px x 768px, поэтому можно смело предположить, что для нашего мобильного макета подходит всё, что меньше 768px. Все, что больше 768px, может работать с макетом навигации для компьютеров, "desktop" версия.

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

/*media queries*/ @media only screen and (min-width: 768px) { }

Этот медиа-запрос будет запускать все стили, которые в нем содержаться, если наименьшее значение viewport 768 пикселей. Обратите внимание на включение единственного ключевого слова, которое гарантирует, что Internet Explorer 8 не запутается и попробует обработать запрос. Для более детальной информации см. .

Давайте начнем нашу работу с того, что заставим кнопку "меню" исчезнуть:

@media only screen and (min-width: 768px) { a.to_nav { display: none; } }

Когда браузер будет немного шире, кнопка меню больше не будет отображаться.

7.Перемещение навигации

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

@media only screen and (min-width: 768px) { a.to_nav { display: none; } .wrapper { position: relative; width: 768px; margin: auto; } #primary_nav { position: absolute; top: 5px; right: 10px; background: none; } #primary_nav li { display: inline; } #primary_nav li a { float: left; border: none; padding: 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } }

Для того, чтобы это было возможно, мы сначала должны правильно разместить его parent (.wrapper). Мы можем либо сделать это здесь, в медиа-запросе, либо определить это в начале нашей таблицы стилей.

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

8. И последнее...

Если вы были внимательными, вы заметили, что у нас все еще есть ссылка «наверх» в навигации - теперь нам она не нужна, верно?

Мы можем удалить ее несколькими способами, но чтобы четко представлять что происходит, давайте сначала добавим класс к элементу списка:

Top

И тогда мы можем избавиться от него в нашем медиа-запросе:

#primary_nav li.top { display: none; }

Вывод

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

Дополнительные ресурсы

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

• Luke Wroblewski"s
• Chris Coyier"s