Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Простая, отзывчивая навигация Mobile First

by
Read Time:12 minsLanguages:

Russian (Pусский) translation by Alexander Sergeyevich (you can also view the original English article)

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

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

Если вы читали Luke Wroblewski Mobile First, тогда вам знакомо его высказывание:

Как правило, контент имеет преимущество перед навигацией на мобильных устройствах.

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

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

Рассмотрите этот пример из London & Partners:

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

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

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


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

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

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

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

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

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

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

1. Разметка

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

ПримечаниеНе забудьте мета-тег Viewport!

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

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

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

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

3. Сброс CSS

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

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

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

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

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

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

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

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

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

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

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

Также очевидно, что мы включили ссылку «наверх», которая при необходимости вернет пользователей в начало страницы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

Premium опция 

На Envato Market есть множество дизайнерских шаблонов mobile first, готовых к использованию в ваших проектах.

Например, first - это mobile first тема веб-приложения/панели администратора с плоским UI на основе Bootstrap 3. Она мало весит, несмотря на множество компонентов для ваших разнообразных нужд. Она также полностью отзывчивая, а виджеты и компоненты выполнены с учетом mobile first.

first - Mobile First Web App Themefirst - Mobile First Web App Themefirst - Mobile First Web App Theme
first - Mobile First тема веб-приложения
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.