Google «дружній» веб сайт для мобільних пристроїв — інфографіка

29.10.2015
Google «дружній» веб сайт для мобільних пристроїв — інфографіка
Автор:

Google «дружній» веб сайт для мобільних пристроїв

Вбудовуйте код інфографіки:

<a href="//internetdevels.ua/blog/google-mobile-friendly-website" title="Google «дружній» веб сайт для мобільних пристроїв" target="_blank"><img src="http://store.internetdevels.com/i/c358a611b6/800x2326-google_mobile-friendly_website.jpg" alt="Google «дружній» веб сайт для мобільних пристроїв"/></a>

Розробники Google стверджують, що мають надати можливість користувачам побачити верхню частину сайту швидше, ніж за одну секунду, і це дозволить їм розпочати взаємодію з сторінкою якнайшвидше. Це стосується не лише розробки дизайну сайту для звичайних комп’ютерів, але і для мобільних телефонів. Смартфони стали невід’ємною частиною нашого життя, і ми очікуємо знайти абсолютно усе в Інтернеті, тому веб-дизайнери роблять усе можливе заради того, аби клієнти були задоволеними та приємно здивованими.

Чи справді ви можете назвати свій веб-сайт “дружнім” для мобільних пристроїв?

Для того, щоб впевнитися чи все насправді так і є, скористайтеся Google Mobile-Friendly Test, особливим інструментом від Google. Він перевіряє оптимізацію веб-сайту, тестуючи та аналізуючи URL для того, щоб повідомити, наскільки “дружнім” є ваш веб-сайт для мобільних пристроїв. Також можете спробувати декілька альтернативних варіантів: Google's PageSpeed Insights, Keynote MITE, BrowserStack, W3C's MobileOK Checker.

Рекомендаціїї щодо вибору CMS

Якщо ви зацікавлені у тому, щоб створити веб-сайт з нуля, вам знадобляться так звані “програмні пакети”. Їх також ще називають системами керування контентом (CMS). Google має декілька порад щодо цього. Існує безліч таких систем, тому перш ніж розпочати, перегляньте, чи ваша CMS є у списку рекомендованих. Ось найпопулярніші з них, які підтримує Google: Drupal, WordPress, Joomla, Blogger, Bitrix, Google Sites та інші. Тому, добре перевірте чи правильний ваш вибір!

Швидкість та завантаження

Швидкість завантаження сторінки на даний момент є одним з найважливіших чинників, які стосуються веб-розробки для мобільних пристроїв. Відвідувач повинен взаємодіяти зі сторінкою та отримати бездоганний досвід, незважаючи на те, яким саме пристроєм чи типом мережі він користується. Середньостатистичний користувач смартфону очікує, що веб-сайт завантажиться приблизно за 3 секунди. 75% користувачів Інтернетом не мають бажання заходити на ваш веб-сайт ще раз, якщо він не завантажився за 4 секунди.

Не використовуйте Flash

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

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

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

Файли JavaScript та CSS

Уникайте занадто складних скриптів та неефективного коду, через те, що вони мають тенденцію занадто довго виконуватися. Google пропонує розробникам Chrome Developer Tools, вбудований у браузері інструмент для оптимізації коду. Ще один важливий момент - це Googlebot, інструмент для допомоги індексування та добування файлів JavaScript/CSS. Дозвольте Googlebot зробити свою роботу та не заблоковуйте ці файли.

Стандартні шрифти

Деякі дизайнери стурбовані зовнішнім виглядом сайту більше, аніж його внутрішньою функціональністю. Наприклад, якщо ви обираєте гарні шрифти, це може перешкоджати строрінці швидко завантажуватись, тому старайтесь використовувати більш стандартні. Arial, Tahoma, Verdana, Georgia, Impact, Trebuchet MS є прикладами безпечних і типових шрифтів для веб.

Окремі URL-и

Окремі URL-и допомагають підтримувати різні версії коду для комп’ютерів, мобільних пристроїв або планшетів. Як результат, якщо у вас є URL для звичайного комп’ютера, ви також будете мати еквівалент і для мобільної версії. Просто виконайте деякі необхідні налаштування, тоді URL для комп’ютера буде виглядати ось так: “www.webpage.com”, і відповідно, “m.webpage.com” для мобільного пристрою.

Сторінки 404 для мобільних пристроїв

Переконайтеся, що сторінки веб-сайту ідеально відкриваються на усіх пристроях, і що вебсайти для звичайних моніторів не показують сторінки 404, призначені для смартфонів.

Висновки

Взявши до уваги все вище сказане, очевидно, що всі ці поради мають практичне застосування. Якщо ви хочете, щоб Google вважав саме ваш сайт “дружнім” для мобільних телефонів, постарайтесь дотримуватися вимог. Перевіряйте ваш веб-сайт за допомогою інструментів Google і робіть зміни, якщо це необхідно. Якщо вам потрібна консультація, ви можете звернутися до будь-якого сервісу підтримки веб-сайтів, і вони обов’язково знайдуть спосіб, як вам допомогти.

Голосів: 1 Рейтинг: 5

Також по темі

1

Щойно почав проект і хвилюєшся, аби він був успішним? У тебе більше проблем, ніж перемог? Твоя команда - це ти і ще 1-3 людини? Хех, у тебе багато спільного з Opera, MySQL, Skype чи GitHub. Вони...

2

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

3

“Сім раз відміряй, а один раз відріж”, - говорить відома приказка. Якщо ви зараз думаєте про створення веб-сайту, безсумнівно, ви не хочете помилитися у виборі CMS. Тому краще все зважити, перш...

4

Невелике дослідження на тему “Україна як партнер для аутсорсу”.

5

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

Subscribe to our blog updates