Ваш веб-сайт вже оптимізовано під мобільні пристрої? Якщо ще ні — це не кінець світу. Сучасні браузери містять такі нововведення, як пінч-зум і автоматичне регулювання розміру шрифту.
Якщо у вас немає часу або грошей, щоб оптимізувати ваш сайт під мобільну середу — от десять простих речей, які ви можете зробити прямо зараз, щоб у «мобільних» відвідувачів сайт виглядав пристойно.
1. Встановіть правильні атрибути полів форм
Якщо ви використовуєте на сайті поля для введення імені користувача або адреси, вимикайте autocorrect і включайте autocapitalize:
Ваше ім’я:
Якщо не зробити так, то система автоматизованого введення T9 буде замінювати імена, наприклад, «Erwan», на що-то на кшталт «Erevan».
Установка автоматичного використання перших заголовних букв в типах words звільнить користувачів від необхідності кожного разу включати капіталізацію букв – тобто кожне слово починається з великої літери (наприклад «Ken burns» стане «Ken Burns»):
Подумайте про всі підводні камені, з якими користувач може зіткнутися на вашому сайті.
І не йдучи далеко від теми. Якщо ваш сайт запитує email користувача — використовуйте полі email, щоб користувачеві не доводилося вводити символ @ з клавіатури мобільного пристрою:
Ваш email:
2. Виберіть підходящу для мобільних пристроїв ширину
Відкрийте ваш сайт у браузері вашого комп’ютера і зменшуйте ширину вікна програми до тих пір, поки не зможете щось прочитати в ньому.
Це і буде мінімально допустимої ширини. Беріть поточне значення ширини та встановлюйте його у властивість @viewport шляхом встановлення тега meta в заголовок сторінки head:
Наступного разу, коли ваш сайт буде відкрито на мобільному пристрої, буде автоматично встановлена зазначена вами ширина. Відвідувачеві сайту не доведеться користуватися зумом:
Ця картинка демонструє зайве місце праворуч:
А ця картинка показує правильно встановлене значення ширини.
Якщо ж ваш сайт побудований на основі гумової верстки і працює з усіма розмірами екрану, ваше завдання стає ще простіше. Потрібно експериментувати з шириною, при якій вигляд сайту на мобільному пристрої стає приємним і читабельним, і встановити це значення у тегу meta.
3. Встановіть ширину картинок в 100%
Тепер, коли ваш сайт має певну ширину, деякі зображення стануть дуже широкими. Цього не траплялося раніше, бо дозволу десктопних моніторів досить широкі, і більшість картинок вміщуються по ширині:
Щоб цього уникнути, встановіть значення максимальної ширини ваших зображень в 100%. Таким чином, зображення будуть автоматично змінювати розмір у випадках, коли вони виявляться занадто великі для екрану мобільного пристрою. Додайте код, наведений нижче, в CSS-стилі вашого сайту:
img { max-width: 100% }
Якщо ви використовуєте зображення в якості фону не з допомогою тега img, просто встановіть CSS властивість background-size значення contain. Це змусить фонову картинку змінювати розмір, коли дозволу екрану буде недостатньо для її відображення в масштабі 100%:
.header { background: url(header.png) 50% no-repeat; background-size: contain }
Якщо ви переживаєте, що зображення стає менш чітким, то ви даремно хвилюєтеся. На сучасних мобільних пристроях такого не станеться.
Коли відвідувач користується збільшенням, браузер при цьому користується збільшенням чіткості зображення. Проте переконайтеся, що ваш сайт не має властивості user-scalable=no в тегу meta. Якщо це не так — користувач не зможе користуватися зумом:
4. Встановіть ширину полів введення в 100%
Після того, як ширина зображень встановлена через властивість max-width, зробіть схожий трюк з полями вводу. Просто додайте в файл CSS – файл вашого сайту:
input, textarea { max-width:100% }
При перегляді сайту з мобільного пристрою цей параметр не дасть полів input вийти за межі екрану.
5. Будьте пильні коли використовуєте Disable для кнопок підтвердження відправки форм
Щоб уникнути численних натискань на кнопку підтвердження відправки форми, варто робити submit неактивним після першого кліка по ній.
На відміну від настільних пристроїв мобільні часто втрачають зв’язок з мережею. Якщо ви робите кнопку не активною, користувач не зможе натиснути її повторно. І в цій ситуації майте на увазі, що причиною подібної ситуації може стати не тільки втрата мережі.
Під час вхідного дзвінка браузер мобільного пристрою закриється. І далі ситуація із заблокованої кнопкою підтвердження повториться. Користувач не зможе відправити вже заповнену форму.
І якщо ви все-таки вирішили вимкнути кнопку submit — робіть це на кілька секунд.
6. В довгих рядках використовуйте word-wrap
Іноді буває необхідно відобразити довгі рядки, такі як приклади коду, посилання, номери банківських рахунків. Якщо ваш сайт виявиться вузьким для того, щоб цілком показати рядок, вона може «виїхати» за межі екрану мобільного пристрою:
Уникайте цієї ситуації за допомогою властивості word-wrap. Так буде виконано перенесення, коли рядок досягне краю екрана. Користувач побачить все необхідне без використання прокручування:
Ваш пароль: 435143a1b5fc8bb70a3aa9b10f6673a8
7. Будьте обережні, використовуючи прогалини
Звичайною практикою при відображенні довгих рядків є використання прогалин через кожні п’ять знаків. Так вам буде зручніше запам’ятовувати їх для введення в інший додаток.
Проте розумний користувач не буде цього робити вручну. Він скористається буфером обміну. Однак у випадку з пробілами йому доведеться їх видалити. Наскільки зручно і швидко вилучати пробіли на мобільному пристрої?
Щоб уникнути подібних ситуацій, замість пробілів між групами символів використовуйте відступи:
.split m { padding: 0em 0.5 em } Ваш код: 435143a1b5fc8bb
Як бачите, «пропуски між символами залишаються, але з тією відмінністю, що при копіювання-вставки немає потреби щось видаляти. Як мінімум, це зручно і економить час!
8. Переваги медіа-запитів
Ви можете створити власні стилі, які будуть працювати тільки при перегляді сайту з мобільних пристроїв (або ж відображатися в маленькому вікні браузера), а на настільному комп’ютері спрацює звичайний варіант веб-сторінки. Використовуйте для цього цільові стилі всередині медіа-запитів як у прикладі нижче:
/* regular css */ .tabs { padding: 10px 2em } @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */ .tabs { padding: 3px 1em } }
Тепер ви знаєте ще один трюк, який допоможе вашому сайту виглядати краще на мобільному пристрої.
9. Уникайте fixed позиціонування
Якщо заголовок або сайдбар вашого сайту позиціонується фіксовано, CSS властивість position встановлено у значення fixed. Будьте уважні.
Коли ви робите розмітку подібним чином, ваш заголовок буде збільшуватися разом зі сторінкою і, можливо, займе весь простір екрану:
Найпростіше рішення — не використовувати фіксовані позиції елементів для перегляду на мобільних пристроях.
Приклад нижче, використовує метод медіа-запитів, покаже, як втілити це в життя:
/* regular css */ #header { position: fixed } @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */ #header { position: static } }
10. Використовуйте стандартні шрифти
Застосування користувальницьких шрифтів додає сайту вид професійно виконаного продукту, але користувачам доводиться довантажувати файли зі шрифтами. Виконується це перед тим, як сайт відобразиться на пристрої.
Як правило, обсяг подібних файлів досить великий. На мобільному пристрої, цей процес може зайняти велику кількість часу. В цей час на екрані ми бачимо незаповнений простір замість тексту:
У разі використання Google Font Loader для завантаження шрифтів ви зможете відобразити текст за допомогою стандартного шрифту, поки вантажиться інтерфейс. Потім ви генеруєте сторінку заново, і відображається потрібний шрифт.
Для цього потрібно написати два варіанти CSS-правил. Один варіант для використання шрифту, а інший — для використання скачаного шрифту.
Це буде найкращим варіантом. Користувач читає текст поки шрифти вантажаться, і насолоджується красою по закінченню їх завантаження. Ось код:
WebFont.load({ google: { families: [«Open Sans»] } }); .header { font-family: Arial } .wf-opensans-n4-active .header { font-family: «Open Sans» }
Зверніть увагу, що селектор класу .wf-opensans-n4-active додається в код сайту динамічно Font Loader’ом, але тільки після того, як шрифт завантажений.
Висновок
Ці десять невеликих трюків допоможуть вам перетворити вже існуючий сайт. Вони позбавлять ваших відвідувачів від багатьох мук при користуванні вашою сторінкою. Не відкладайте в довгий ящик, почніть застосовувати їх прямо зараз.
Переклад статті «10 Ways to Make Your Website More Mobile Friendly» був підготовлений дружною командою проекту Сайтостроение від А до Я.
