Стаття також доступна російською (перейти до перегляду).

Зміст:

• Відстань між елементами
• Веб типографіка та зручність користування мобільним пристроєм
  • Розмір шрифту
  • Семейство шрифта, его цвет и цвет фона
  • Сімейство шрифту, його колір і колір фону
• Контент ширший за екран
• Mета-тег Viewport
• Онлайн конструктори для створення мобільної версії
• Висновки

Трафік з мобільних пристроїв сьогодні займає значну, а часто й більшу частину загального трафіку на сайті.

Тому такий фактор, як “Зручність перегляду на мобільних пристроях”, є важливим фактором ранжування в пошуковій видачі.

В інструменті веб-майстрів Google Search Console у розділі “Зручність перегляду на мобільних пристроях” пошукова система вказує ті УРЛи, в яких вона виявляє помилки, які заважають користувачеві комфортно користуватися ресурсом з мобільних пристроїв.

Також на мобільну придатність можна перевірити сторінку за допомогою сервісу Mobile-Friendly.

 

Розглянемо помилки, що зустрічаються найчастіше.

Відстань між елементами

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

Тому вимоги Гугла такі:

• Мінімальна відстань між найважливішими елементами - 48 px;
• Між менш важливими (дрібнішими у розмірах) - 30 px.

Також слідкуйте за відступами з блоків зі списками.

Регулюється за допомогою стилів Padding та Margin.

Веб типографіка та зручність користування мобільним пристроєм

Розмір шрифту

Для зручності читання та проходження перевірки через Сеарч Консоль використовуйте такі параметри:

• Мінімальний рекомендований розмір шрифту розмір - 16 px.
• Шрифт - Arial, Times New Roman. Але Таймс – це з 90-х років, тому використовуйте Аріал.

Також на зручність для мобільних може вплинути міжрядковий інтервал.

Рекомендований інтервал - line-height: 29px.

Зверніть увагу на шрифт, який містить теги <pre></pre>.

У браузері такий шрифт виглядає так:

Він також має мінімальний розмір шрифту, який потрібний для зручності користування з мобільних пристроїв.

Сімейство шрифту, його колір і колір фону

Яким буде шрифт (font-family), його колір (color) та колір фону елемента (background-color) залежить від типу Вашого сайту, від його PSD макета та можливої ??зміни дизайну.

Пам'ятайте, що тексти на сторінці повинні легко читатися, очі не повинні втомлюватися, читаючи, у тому числі в темряві.

Тому особисто я не допускав би надто яскравого контрасту між текстом і тлом.

Наприклад, білий фон (background-color:white) і чорний текст (color:black). Контраст має бути м'якшим.

Для контролю та підбору контрастності існує спеціальний інструмент.

Він називається Colorable. З його допомогою Ви можете перевірити наочно взаємодіяти між собою колір тла і тексту.

Відступи від полів та візуальний поділ тез

Слідкуйте за тим, щоб текст і картинки мали невеликий відступ краю у вигляді полів.

Розмір відступу - 5px. Для цього використовуйте властивість padding.

Також рекомендуємо додавати до розмітки для маркованих списків теги <p></p>. Це надасть спискам наочнішого вигляду і пункти списку не будуть зливатися між собою.

***

<ul>

<li><p>Пункт 1</p></li>

<li><p>Пункт 2</p></li>

<li><p>Пункт 3</p></li>

</ul>

***

Контент ширший за екран

Не допускайте горизонтального прокручування на екрані. Як тексти, і картинки.

Слідкуйте за тим, щоб картинки на сайті були пропорційними.

Для того, щоб зображення не вилазили за межі екрана, у параметрі “ширина” вказуйте такі значення:

• Зменшіть ширину в пікселях (наприклад width: 1000px);
• Використовуйте медіа-запит. Такий запит дозволяє для різних дозволів екрану та для різних пристроїв, вказати свої стилі CSS, свої розміри елемента.

Приклад: @media (max-width: 740px) { ... }

• Максимальне значення умов. Цей CSS-код застосовується лише якщо ширина viewport менша або дорівнює 740px:
• Детальніше про медіа запити дивіться тут;
• Розтягніть картинку на всю ширину екрана, щоб її ширина змінювалася автоматично та пропорційно (width: 100%).

Іноді картинки можуть виглядати в мобільній видачі просто непропорційними та витягнутими.

У таких випадках ми заповнюємо параметр висоти картинки, а її ширину залишаємо порожньою.

Докладніше про правила застосування та написання параметрів стилів, які ми вказали вище, дивіться у підрозділі “Відступи” у статті “Основні CSS стилі, які застосовуються для стилізації html коду”.

Mета-тег Viewport

Цей мета-тег потрібний для того, щоб сторінка коректно показувалася на всіх типах пристроїв.

Також він показує браузерам, у якому масштабі необхідно показувати видиму область веб-сторінки.

Його розміщують між тегами <head></head>.

Увага!

При верстці, якщо Ви робите адаптивну сторінку, сучасні сторінки всі адаптивні, у жодному разі не робіть фіксовану ширину блоків.
Т.к. блоки будуть некоректно стискатися, контент ставатиме дрібним і погано показуватися на екрані.

Для розв'язання цієї проблеми і був винайдений мета-тег Viewport.

<meta name="viewport" content="width=device-width, initial-scale=1"/ >

Розберемо синтаксис його написання.

• meta name = "viewport" - назва мета-тегу;
• content="width=device-width - ширина перегляду задана на всю ширину екрана;
• initial-scale=1 - “1” - одиниця означає масштаб контенту, що показуватися на екрані. В такому випадку – це 100%. А при 0.5 – 50%.

Ще раз зазначимо, що цей мета-тег необхідно вказувати у всіх адаптивних сторінках.

Про теорію та практику адаптивної верстки та застосування в ній тега Viewport дивіться у відеоуроці тут.

Наводимо Вам стандартний набір, заточений під використання різними мобільними пристроями.

<meta name='viewport'content='width=device-width,initial-scale=1'/>

<meta content='true'name='HandheldFriendly'/>

<meta content='width'name='MobileOptimized'/>

<meta content='yes'name='apple-mobile-web-app-capable'/>

***

Онлайн конструктори для створення мобільної версії

Для створення сайтів, у тому числі й адаптивною версткою, Ви можете використовувати:

• Плагіни для CMS. Наприклад Creambee та Mobirise;
• Адаптивні версії макетів у Wordpress;
• Конструктор сайтів, які часто надається хостинг-провайдером.

Щоб дізнатися, який двигун з конструктором Вам підійде більше, радимо Вам прочитати статтю в блозі "WordPress vs Wix: яка платформа підійде Вам?".

Висновки

Для зручності користування з мобільних пристроїв та успішного просування необхідно дотримуватися наступних факторів:

Оптимальний розмір шрифту - font-size:16px;

Дотримуйтесь комфортної контрастності між текстом та тлом;

Міжрядковий інтервал - line-height: 29px;

Мінімальна відстань між елементами: 48px - між важливішими елементами, 30px - між менш важливими;

Дотримуйтесь відступів для полів, а також між абзацами та пунктами маркованого списку;

Використовуйте медіа-запити @media;

Не допускайте горизонтального прокручування. Контент не повинен виходити за межі екрана;

Звертайте увагу на форматування тексту, що міститься в тегах <pre></pre>;
На кожній адаптивній сторінці повинен бути присутнім мета-тег viewport. Вивчіть правила його синтаксису.

Підписуйтесь на наш телеграм - канал t.me/freehostua, щоб знати нових корисних матеріалів. Дивіться наш канал Youtube на youtube.com/freehostua.

Дата: 02.09.2021 Автор: Яременко Владислав за радакцією Євгена Шермана

Голосування 1 2 3 4 5