П'ять способів оптимізації сайта для мобільних пристроїв

Сьогодні користувачі відкривають web-сторінки з допомогою різних екранів, починаючи від невеликих смартфонів до гігантських телевізорів. Якщо розробити дизайну сайту так, що він буде правильно працювати на різних розмірах екрану, це зробить його більш привабливим для різних відвідувачів, незалежно від пристрою, яким вони користуються. У цій статті, яка є вільним перекладом свіжої публікації провідної компанії-розробника RocketTheme буде розглянуто п'ять способів зробити ваш сайт більш дружнім для мобільних пристроїв.

Адаптивний/чутливий дизайн

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

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

В адаптивних шаблонах компанії RocketTheme, застосовуються CSS класи, які приховують або відображають елементи сторінки, в залежності від використовуваного пристрою. Наприклад, з допомогою класу hidden-phone модуль або віджет буде приховувано, коли користувач використовує пристрій з браузером шириною 480px або менше. Це дозволяє приховати віджети і модулі, які погано відображаються на мобільному пристрої.

Всі прагнуть, щоб дизайн сайта для мобільного пристрою був приємним і сучасним, при цьому не жертвуючи дизайном для великих екранів. Для цього в програмному забезпеченні сучасних сайтів існують механізми динамічної побудови структури сайту, в залежності від певного пристрою. Нижче наведена швидка класифікація того, як популярний фреймворк Gantry керує адаптивними елементами в своєму 12-колонковому дизайні.

Пристрій Опис Ширина шаблону Ширина колонки
Смартфони Звичайні смартфони 480px і менше 100% плаваюча
Смартфони - планшети Більші сматрфони і менші планшети 767px і менше 100% плаваюча
Планшети Більші планшети 768px і більше 64px
Декстопи Стаціонарні комп'ютери і ноутбуки 960px і більше 80px
Великі дисплеї Пристрої з великою розподільчою здатністю 1200px і більше 100px

Оптимізація зображень

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

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

Перед тим, як завантажувати файли зображень на сайт, рекомендується спробувати зменшити їхні розміри за допомогою спеціальних утиліт, таких як ImageOptim для операційної системи Mac OS X, або JPEGmini для операційної системи Windows. Також існують онлайн сервіси для оптимізації зображень, наприклад Kraken, або спеціалізований сервіс TinyPNG для зменшення файлів PNG.

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

Кешування і оптимізація коду

Кешування - це значна частина оптимізації будь-якого сайту Joomla або WordPress. Продуманий план кешування дозволить значно поліпшити час завантаження і ефективність вашого сайту.

Кеш зберігає інформацію, яка часто запитується (особливо та інформація, яка не змінюється) і направляється на комп'ютер відвідувача.

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

Системи керування сайтами (CMS), такі як Joomla, WordPress і Grav мають інтегрувані системи для кешування, а також можливість кешувати за допомогою альтернативних методів через плагіни або розширення.

На додаток до кешування, стиснення таких елементів, як CSS і JavaScript може бути корисним кроком в оптимізації сайту для зменшення часу завантаження сторінки.

Атрибути форм вводу

Поля введення, в яких користувач повинен внести конкретну інформацію, таку як ім'я, адреса електронної пошти або пароль, можуть бути проблематичними для мобільних користувачів, коли не встановлені елементи автозаміни (autocorrect) або автоматичного переведення першого символу слова у верхній регістр (autocapitalize).

<input type=text size=18 autocapitalize=words>

Якщо ви хочете трохи полегшити роботу користувача, використовуйте переваги атрибутів для полів введення. Наприклад, установка autocapitalize=words робить заголовною першу літеру кожного слова. В полях, де потрібно ввести справжні ім'я та прізвище користувача, це буде автоматично замінювати перші літери цих слів, що полегшить роботу для користувача.

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

Правильне використання проміжків

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

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

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