Mobile-First Design – що це таке і чому це важливо
Осінь 2018 року була періодом випробувань для онлайн-маркетологів, блогерів, цифрових агентств… загалом для всіх, чий хліб з маслом походить від онлайн-сфери. чому Тому що саме тоді гігант пошукової системи Google почав розгортати своє індексування, орієнтоване на мобільні пристрої. Це, звичайно, не стало несподіванкою, оскільки «Mobilegeddon» у 2015 році вже запровадив пріоритетність веб-сайтів, які добре відображаються на мобільних пристроях. Дизайн, орієнтований на мобільні пристрої, вже був справою, але Google все-таки вдалося викликати паніку.
Але давайте на хвилинку зробимо крок назад і подивимося, що насправді означає «мобільний насамперед».
Пояснення дизайну, орієнтованого на мобільні пристрої
Коротше кажучи, мобільний дизайн — це той тип дизайну, який надає перевагу мобільним пристроям. Загалом це стосується смартфонів і планшетів або будь-яких пристроїв із меншим екраном. Щоб правильно зрозуміти цю концепцію, нам спочатку потрібно поговорити про адаптивний веб-дизайн або RWB. У RWB ми в основному дозволяємо Інтернету та всім його формам і вмісту відповідати невеликим екранам без втрати якості. Це також має бути зроблено так, щоб людям було зручно чи комфортно. При правильному виконанні адаптивний дизайн означає, що користувачеві не потрібно збільшувати масштаб, прокручувати або панорамувати екран, щоб переглянути весь вміст сайту.
Очевидно, що з огляду на те, що мобільний пошук випереджає настільний, цілком природно, щоб веб-сайт був адаптивним. Це навіть не питання виживання найсильнішого. Це простіше. Якщо ваш веб-сайт не реагує, його цілком може бути не існує. У людей немає часу чи терпіння на веб-сайти, які не реагують.
Але тут є щось більше, ніж просто чуйність. При розробці продукту дизайнери брали за основу десктопну версію. Потім, завершивши цю конкретну версію, вони фактично відмовилися від певних елементів, щоб оптимізувати продукт для мобільних пристроїв.
Сьогодні процес інший. «Прогресивне просування» — це широко застосовуваний принцип у дизайні, який бере за основу мобільну версію. І це саме те, що означає «передусім мобільні». Дизайн починається з мобільного кінця, а потім поступово розширюється до більш просунутих версій.
Mobile-First Indexing
Як ми вже згадували раніше, у 2018 році Google запровадив абсолютно новий спосіб індексації сайтів. Індексація важлива, оскільки це один із механізмів, які використовує Google, щоб визначити, наскільки високо позиціонуватиме ваш веб-сайт на сторінках результатів пошуку.
Отже, по суті, індексація насамперед для мобільних пристроїв означає, що коли Google розгортає своїх веб-ботів, вони спочатку шукатимуть мобільну версію вашого сайту, а потім версію для настільного комп’ютера. Зверніть увагу, що мобільна версія не єдина, яка індексується та рейтингується. Ваша настільна версія також береться до уваги, але тільки після мобільної. Якщо ваш веб-сайт не має мобільної версії, це матиме значний негативний вплив на рейтинг вашого сайту. Не тільки це. Якість мобільного досвіду, який пропонує ваш веб-сайт, також є фактором.
І тому будь-який власник веб-сайту повинен дуже серйозно ставитися до мобільних пристроїв.
Як оптимізувати для Mobile-First
Отже, ви придбали класну адаптивну тему? добре. Чуйність надзвичайно важлива. Але не думайте, що на цьому ваша робота з оптимізації для мобільних пристроїв закінчується. Це набагато складніше.
Незалежно від того, чи проводите ви свій старий сайт на WordPress, чи створюєте абсолютно новий, є речі, які ви можете зробити, щоб зробити його більш привабливим для сканерів Google і індексації, орієнтованої на мобільні пристрої.
- Оптимізуйте швидкість свого сайту
Google ненавидить повільні веб-сайти. Насправді ні. Він особливо схильний до веб-сайтів, які повільно завантажуються. З літа 2018 року Google офіційно віддає перевагу швидким веб-сайтам, тому про це точно варто подумати.
Навіть якщо ваш веб-сайт трохи млявий, не хвилюйтеся. Ви можете зробити багато речей, щоб пришвидшити це. Наприклад, ви можете скористатися одним із чудових плагінів кешування, які створюють готову до HTML версію вашого сайту, щоб він завантажувався швидше. Ви також можете стиснути всі свої файли, щоб вони завантажувалися в найменший і найменший розмір. Нарешті, виділіть трохи часу, щоб переглянути свій веб-сайт і знайти будь-які технічні помилки, такі як непрацюючі посилання, перенасичені сторінки тощо.
Коли мова заходить про оптимізацію пошукових систем (SEO), припускаючи, що ви вже застосовуєте всі найкращі практики в цій галузі, є кілька додаткових речей, про які слід пам’ятати.
По-перше, вам потрібно забезпечити рівність вмісту між версіями вашого сайту. Особливо це стосується внутрішніх посилань, структурованих даних, тегів тощо. Також переконайтеся, що ваші сервери витримують швидкість сканування. Раніше це було проблемою, коли вперше було запроваджено індексування мобільних пристроїв, але дивовижна кількість веб-сайтів досі не адаптувалася до нової активності сканування.
Нарешті, регулярно відстежуйте свій статус індексації та переконайтеся, що robots.txt перевірено, а ваші файли журналу сервера в порядку.
- Виберіть адаптивну структуру
Так, ми говорили раніше, що використання адаптивної теми, побудованої на адаптивній структурі, недостатньо для належної оптимізації для мобільних пристроїв. Але це залишається одним із суттєвих факторів, тому ми вирішили повторити.
Bootstrap і Foundation наразі є найпопулярнішими і, мабуть, найкращими адаптивними фреймворками, тому виберіть тему, використовуючи одну з них. Вони ідеально підходять для перенесення дизайну вашого веб-сайту на менші екрани з мінімальним ризиком збоїв і помилок. Крім того, вони роблять це як на початковому, так і на внутрішньому рівнях, тому вони значно скорочують робоче навантаження розробників.
- Оптимізуйте навігацію, вміст і взаємодію
Знаходження ідеального балансу між недостатньою кількістю вмісту та його надлишком є загальною хворобою всіх мобільних веб-сайтів. Проте це битва, яку нам просто потрібно продовжувати. Відвідувачам потрібна інформація, яка має бути представлена зрозуміло та просто. Безлад неприпустимий. Організуйте свій вміст так, щоб ви могли сказати те, що маєте сказати, розробіть стратегію своїх закликів до дії та нічого більше.
Крім того, зверніть увагу на навігацію свого сайту. Якщо це занадто складно, це просто не підійде для мобільних пристроїв.
Далі, якщо ваша панель навігації на робочому столі довга, вам потрібно зробити її набагато коротшою у мобільній версії. Зробіть текст більшим і перетворите посилання на кнопки, які легко натискати.
Насамкінець перевірте, чи належним чином ваші макети оптимізовані для звичайних ручних дій, таких як торкання та гортання.
Це цілком логічний крок, але не завадить ще раз підкреслити це. Завжди потрібно перевіряти та тестувати все на своєму сайті. Навіть якщо ви останнім часом не вносили жодних змін, час від часу перевіряйте, чи все працює нормально.
Більшість людей сьогодні використовують сучасні веб-переглядачі або оптимізовані для мобільних пристроїв. Однак вражаючий відсоток користувачів Інтернету все ще користується старими версіями браузерів, і вам також потрібно про них подумати. Ви хочете, щоб ваш веб-сайт виглядав так само добре на старому iPhone 4s і на новому Huawei P20.
Просто перевірте дизайн свого веб-сайту на реакцію та не забудьте розділене A/B-тестування, особливо для ваших цільових сторінок. Звичайно, перш за все налаштуйте мобільну версію свого сайту та підготуйте її для користувачів.
Мобільні перш за все — це тенденція, яка буде зберігатися деякий час, і це реальність, яку ми всі повинні прийняти. Під «ми» ми маємо на увазі всіх, хто бере участь у створенні та роботі веб-сайту. Дизайнери, розробники, адміністратори, експерти з оптимізації пошукових систем, редактори, копірайтери – кожен повинен пам’ятати про пріоритетність мобільних пристроїв. Звичайно, це не означає, що ми повинні нехтувати настільними версіями. Просто мобільний дизайн потрібно сприймати серйозно.
Сподіваємося, ця стаття була для вас корисною. Якщо вам це сподобалося, будь ласка, не соромтеся також переглянути деякі з цих статей!