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

До речі, адаптивну верстку можна замовити у нас.

Як мобільна версія впливає на просування

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

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

Що слід врахувати верстальнику

Мета теги для мобільних пристроїв

Для усунення цієї проблеми застосовується метатег viewport.

Задаємо ширину вашого дизайну, наприклад 1024:

Використання медіа запитів.

За зручне розподілення та завантаження контенту на сторінці відповідають медіа запити (починається з команди @media.). З їхньою допомогою задається кількість колонок для цього типу пристрою, розміри текстових блоків і картинок. Стиль застосовується відповідно до прописаної ширини макету. Якщо, наприклад, зменшити вікно, контент розподіляється вже інакше. Також можна ставити стилі для портретної (orientation) або альбомної орієнтації сторінки.

У цьому прикладі набір стилів буде працювати тільки для пристроїв з роздільною здатністю 200 - 480 пікс. Для іншого спектру екранів ці команди не працюють.

Зручність застосування Media Queries полягає у застосуванні набору правил під кожний пристрій. Одним цим способом не можна вирішити всі питання адаптивної верстки, тому вони застосовуються разом із мета-тегами.

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

Глобальне скидання CSS властивостей для всіх браузерів (CSS Reset)

Щоб позбавитися від встановлених за замовчуванням налаштувань стилів, і застосувати свої, необхідно провести скидання.

Цією командою обнуляються відступи та поля. Ще один спосіб за допомогою селектора:

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

Додаткові плюшки адаптації до мобільних пристроїв

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