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

Проста, адаптивна навігація Mobile First

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

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

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

Якщо ви читали Mobile First Luke Wroblewski, то ви знайомі з його твердженням:

Як правило, контент має перевагу над навігацією на мобільних пристроях.

Тут він має на увазі, що мобільні користувачі часто шукають негайні відповіді; їм потрібен контент, який вони шукають, а не більше варіантів навігації.

Багато сайтів, навіть чуйних (responsive), дотримуються думки, що навігація повинна бути у верхній частині будь-якої сторінки. Такий підхід може викликати проблеми з юзабіліті на мобільних пристроях, оскільки їх користувачам часто не вистачає двох факторів: екранного простору і часу. Якщо основна навігація розміщена в верхній частині сторінки, у вас є хороші шанси, що вона буде закривати весь мобільний екран. Дана проблема поглиблюється ще і за рахунок великих, зручних для натискання посиланнями меню, що змушує користувачів переходити за межі навігації, прокручуючи вниз, намагаючись дістатись потрібного контенту.

Розгляне приклад London & Partners:

Цілком прийнятний чуйний дизайн, але при стандартних розмірах мобільного перегляду (320х480 пікс.) все, що ви дійсно бачите, - це навігаційне меню. Щойно зайшовши на головну сторінку, ви напевне, хотіли б побачити щось справді інше. London & Partner - не єдині, в кого є ця проблема, подібна практика спостерігається в багатьох чуйних дизайнах по всьому інтернету.

Отже, які є рішення?

Ми вже знаємо декілька способів, як можна цього уникнути, наприклад опираючись на jQuery, яка допомагає нам з цим розібратися. Візьміть пояснення про меню, що розкривається - Chris Coyier's Five Simple Steps.


Великий екран, маленький екран.

Використовуючи jQuery, дублікат меню створюється у вигляді спадного меню <select>, яке початково приховане від перегляду за допомогою CSS. Коли медіа-запити виявляють менший екран, вони роблять спадаюче меню видимим, а основну навігацію - невидимою. Це ідеальне рішення для мобільних пристроїв, оскільки випадаючі списки займають мінімальний простір екрану і використовують особливий інтерфейс пристрою (наприклад, скроллер у iPhone).

Крім того, ви можете приховати навігацію і переходити в режим перегляду, натискаючи на кнопку "меню". Ви можете побачити цей ефект у дії в останньому Bootstrap Twitter.

Менші екрани приховують навігаційні посилання та відображають іконку "список" (вона досить швидко стала сприйматися як "меню"), яка показує навігацію при натисканні. Знову ж таки, відвідувачам мобільних пристроїв представлено стільки контенту, скільки можливо, і при їх бажанні їм доступні опції навігації.

Чисте рішення CSS

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

Це означає, що при перегляді дизайну з мобільного пристрою буде завантажено тільки самий мінімум CSS і ресурсів. Це також означає, що старіші версії IE (які не розпізнають медіа-запити) будуть представлені на мобільній версії сайту. Для більш детальної інформації щодо цього питання перегляньте Joni Korpi Leaving Old Internet Explorer Behind.

1.  Розмітка

Я поясню ідеї, що стоять за цим рішенням, по мірі нашого просування вперед, тому зараз давайте накидаємо розмітку, почнемо з документу blanco HTML5.

Примітка: Не забудьте мета-тег Viewport!

Після цього ми додамо структуру сторінки. Безпосередньо необхідні речі і все, що потрібно для цілей нашої демонстрації. Я використовував наповнювач тексту Monty Python Holy Grail (спасибі Chris Valleskey), - хороший спосіб викликати посмішку на вашому обличчі в процесі роботи :)

2. Розмітка навігації

Ми зібрали базову HTML-сторінку, тому прийшов час для головного об'єкта - нашої основної навігації...

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

3. Скидання CSS

Залежно від того, як ви зазвичай починаєте веб-проекти, цей крок може відрізнятися від вашого звичайного робочого процесу. Я завжди вважав, що перезавантаження Eric Meyer є надійною основою для початку роботи, особливо після того, як він вніс в неї деякі зміни. Ми додамо його правила скидання до таблиці стилів, щоб почати нашого css:

4. Основні стилі

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

.. тому давайте дещо покращимо ситуацію, додавши простої стилізації.

Це все основні речі (шрифти, line-heights, кольори і т.д.), але важливо те, що я намалював кнопку «меню» справа, всередині <header>, де ви і очікуєте її побачити.

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

У будь-якому випадку, натисніть на ній, і ви попадаєте в навігацію - супер.

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

5. Стилі навігації

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

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

Також зрозуміло, що ми включили посилання "вгору", яка за необхідності поверне користувачів на початок сторінки.

6. Роблячись більшими

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

Але в який саме момент він таким стає? Існує багато способів як підійти до медіа-запитів, але ми будемо працювати виходячи з того, що мобільний viewport - 320x480px. Він має ширину 320 пікселів при перегляді в орієнтації "portrait", 480 пікс. в орієнтації "landscape", тому буде логічно, якщо ми встановимо наш перший медіа-запит на визначення будь-яких екранів розміром більше 480 пікселів.

Проте наступний крок це, ймовірно, планшет.  IPad має роздільну здатність 980x768 пікселів, тому можна сміливо сказати, що для нашого мобільного макету підходить все, що менше 768 пікселів. Все, що більше, ніж 768 пікселів, може працювати з макетом навігації для комп'ютерів, версія desktop.

Тому тепер ми можемо почати додавати правила; отже, давайте налаштуємо медіа-запит:

Цей медіа-запит буде завантажувати всі стилі, які він містить, якщо найменше значення viewport 768 пікселів. Зверніть увагу, на включення only keyword, що гарантує, що 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 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.