Мобайл ферст. Від 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; )

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 у reprehenderit в 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(.) find(".vehicle_images_thumbs-list")).slick(( infinite: true, slidesToShow: 5, slidesToScroll: 1 )) ) function handleMainImage() ( $(_module.scope).on("click", ".vehicle_images_thu 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 в ponds distributing swords is no basis for system of government. Supreme executive power derives from mandate from the masses, no 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, об'єкт, 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, male, 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; 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; .4em; font-weight: bold; ) /*layout*/. 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; 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; :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; : 2px; border-radius: 2px; ) )

Щоб це було можливо, ми спочатку повинні правильно розмістити його parent (.wrapper). Ми можемо зробити це тут, у медіа-запиті, або визначити це на початку нашої таблиці стилів.

Після того, як меню повністю встановлене, нам потрібно видалити деякі елементи прив'язки. Особливо нічого робити не потрібно, треба тільки щоб список товарів відображався лінійно, прибрати кордони та величезні прогалини. Стан hover, про який ми говорили раніше, звичайно ж відмінний, тому нам не потрібно їх міняти.

8. І останнє...

Якщо ви були уважними, ви помітили, що у нас все ще є посилання «наверх» у навігації – тепер нам воно не потрібне, вірно?

Ми можемо видалити її декількома способами, але щоб чітко уявляти, що відбувається, давайте спочатку додамо клас до елемента списку:

Top

І тоді ми можемо позбутися його в нашому медіа-запиті:

#primary_nav li.top ( display: none; )

Висновок

От і все! Існує безліч способів реалізації цієї ідеї (іконка списку – лише один з них), і, звичайно ж, ви можете продовжувати додавати медіа-запити для роботи на великих екранах. Сподіваюся, тепер у вас є підстави для цього. Ми створили просту, чуйну, сенсорну навігацію за допомогою підходу mobile first, приділяючи особливу увагу контенту та юзабіліті. Кому потрібно чогось більше?

Додаткові ресурси

Ось кілька корисних посилань, згаданих у цій статті, зібраних в один зручний список:

• Luke Wroblewski"s
• Chris Coyier"s