Адаптиране на сайта за мобилни устройства: пълно ръководство

Вие добре знаете защо трябва да адаптирате сайта за мобилен трафик, нали? Има и друга причина: Google скоро ще отбележи иконите за мобилни устройства на дисплейната страница с икони за мобилни устройства за гледане на малки екрани на смартфони и таблети. Самата икона не означава нищо. Това е важно: собствениците му ще получават сайтове за трафик, които не са адаптирани за мобилни притурки.

Искате ли да спечелите в постоянната борба за присъствие? Тогава ще ви трябва пълно ръководство за адаптиране на сайтовете за мобилен трафик.

Какво се случва, ако игнорирате интересите на мобилните потребители

Според comScore, през януари 2014 г. делът на мобилния трафик в САЩ за първи път надвишава дела на посещенията на сайтове от настолни компютри. Според групата Kokoc ситуацията в Русия е различна: от средата на 2014 г. около 80% от потребителите са посещавали уебсайтове, използвайки настолни компютри, включително лаптопи. В Рунет обаче има изразена възходяща тенденция в мобилния трафик. Обърнете внимание на графика на използване на операционните системи от местни потребители.

Увеличаването на честотата на използване на Android OS е впечатляващо, нали? Между другото, можете бързо да определите дела на мобилните потребители на сайта си с помощта на Google Анализ. За това:

  • Изберете менюто „Общ преглед на аудиторията“ и използвайте опцията „Добавяне на сегмент“.
  • На отворената страница поставете отметка в квадратчето до „Трафик от мобилни устройства“, „Трафик от таблетни компютри“ и „Трафик от смартфони и таблетни компютри“. Кликнете върху „Прилагане“.
  • В раздела "Преглед на аудиторията" оценете дела на общия мобилен трафик, както и дела на трафика по тип устройство.
Вижте също: Списък с въпроси за проверка на мобилната версия на сайта

Търсачките не могат да игнорират интересите на мобилните потребители. Затова те ще ви лишат от трафика, ако не направите сайта удобен за използване с помощта на таблетни компютри и смартфони. Ще загубите много потребители завинаги: изследването на Equation Research показва, че 46% от потребителите никога не се връщат в сайта, ако първият опит за посещение с помощта на мобилна притурка е неуспешен. И накрая, ефективността на вашия ресурс постоянно ще намалява: съществуващите потребители няма да могат да участват в дискусии, да правят поръчки, да се абонират за бюлетина и да извършват други действия, ако използват смартфон или таблет.

Не ви харесва тази перспектива? След това адаптирайте сайта за мобилен трафик.

За какво да се стремим: признаци на мобилен ресурс

Когато влезете в уебсайт, който не е приятелски настроен към мобилни потребители с смартфон, незабавно осъзнавате това. И какви обективни характеристики съответства ресурсът, адаптиран за малки екрани? Те са изброени по-долу:

  • Сайтът се зарежда бързо. Няма "тежки" снимки, флаш, ненужни елементи от графичния дизайн.
  • Лесна и лесна навигация. Ресурсите, адаптирани към мобилния трафик, трябва да имат само вертикално превъртане, удобен модул за търсене, навигационното меню Home, Up и Back. Трябва да има и възможност за повикване от сайта. Като минимум, потребителят трябва да види телефонния номер в заглавната част на ресурса.
  • Елементите от менюто и формулярите трябва да бъдат лесни за използване. Потребителят трябва да може лесно да кликне върху избраната връзка с пръст или да избере желания контрол.
  • Съдържанието на сайта трябва да може да се чете. Потребителят не трябва да предприема допълнителни действия, за да прочете текста.
  • Възможността за преминаване към пълната версия на сайта. Ресурсът не трябва да бъде принуден да пренасочва посетителите към главната страница на мобилната версия, ако се опита да прегледа вътрешната страница на пълната версия, използвайки смартфон или таблет.
  • Функционалност и възможност за извършване на действия за преобразуване. Мобилният посетител не трябва да има проблеми с пускането на поръчка, абонирането за бюлетина, изтеглянето на документи и т.н.

Как да се постигне това на практика? Прочетете.

Стъпка 1: Уверете се, че използвате мобилен дизайн.

Отворете уебсайта си с помощта на смартфон или таблет и се насладете на удобството на използването му. Ако нямате под ръка мобилна притурка, използвайте инструмента Screenfly. Тя ви позволява да оцените външния вид на сайта на екраните на различни устройства. Просто въведете URL адреса на ресурса в адресната лента и изберете притурката в хоризонталното меню.

Ако видите, че сайтът трябва да бъде адаптиран за мобилен трафик, трябва да изберете една от двете възможности: създаването на мобилна версия на сайта или използването на отзивчив дизайн.

Мобилна версия на сайта

Мобилната версия на сайта е избор за собствениците на онлайн магазини, уеб услуги, големи сайтове. Можете да се свържете с уеб разработчиците и да помолите за тях. Ако използвате WordPress, тогава имате възможност сами да създадете мобилна версия на сайта с няколко кликвания. За да направите това, можете да използвате приставките:

  • WPtouch Pro. След като плащате 49 USD веднъж, можете да изберете една от предложените мобилни теми за WordPress и да я използвате през цялото време.
  • DudaMobile. Основната функционалност на този плъгин е достъпна безплатно. Ако плащате по 159 USD наведнъж, ще получите достъп до разширени функции и поддръжка.
  • WP Mobile Edition. Този плъгин автоматично открива характеристиките на притурката за мобилни устройства и показва подходящата мобилна версия на сайта за посетителя.

Можете самостоятелно да намерите плъгини, които ви позволяват бързо да адаптирате ресурсите за Joomla, Drupal и други популярни CMS към мобилния трафик.

Вижте също: 14 готини чипа от 11-те най-добри мобилни сайта

Адаптивен дизайн

Отзивният дизайн гарантира правилното показване на сайта на екраните на притурки с различни размери на екрана. Можете да се свържете с уеб разработчиците или да инсталирате шаблони с отзивчиво оформление за популярните "двигатели".

Две предимства на адаптивния дизайн над мобилната версия на сайта заслужават специално внимание. Първо, Google сам препоръчва използването на отзивчиво оформление. На второ място, този метод на адаптация за мобилния трафик ви позволява да запазите един дизайн на сайта, когато се показва на екрана на всяка притурка.

Отзивните WordPress шаблони са достъпни на Wordpress.org.

Стъпка 2: Заменете връзките на бутоните за докосване.

Когато собствениците на мобилни устройства се качат на неадаптирани сайтове, те веднага развиват така наречения синдром на дебелите пръсти. Не бързайте да отваряте медицински справочници, този жаргонен термин не е свързан с болести. Ползвателите използват този синдром, за да опишат грешки, които се появяват, когато потребителят се опита да кликне върху връзка или навигационен елемент.

Какъв размер трябва да има бутон или навигационен елемент, за да може мобилният потребител да го използва успешно? Фокусирайте се върху следните препоръки:

  • Apple препоръчва разработчиците на интерфейси за смартфони да създават бутони и навигационни елементи с минимален размер от 44 на 44 пиксела.
  • Nokia смята, че минималният размер на контрола е 48 на 48 пиксела или 0.7 на 0.7 cm.
  • Microsoft счита, че оптималният размер на бутона е 34 x 34 пиксела.

Моля, обърнете внимание, че собствениците на мобилни притурки не могат да използват сайта удобно, ако в текста има твърде много връзки, които са разположени близо един до друг.

Как се създават удобни за мобилни устройства бутони и навигационни елементи

Можете да поръчате функционални бутони с индивидуален дизайн или да използвате шаблони. Ако използвате WordPress, имайте предвид следните приставки:

  • Отлични цветни кутии и бутони. С този плъгин можете да създавате удобни бутони с различни размери и цветове. Той също така ви позволява да създадете контекстно меню, адаптирано за мобилни потребители.
  • Отзивчиво меню. С този плъгин можете да направите удобно меню за хамбургер.
Вижте също: Топ 10 сайта с отзивчиво оформление

Стъпка 3: Уверете се, че използвате удобни форми.

За какво е мобилният трафик? Правилно, за да го конвертирате в абонаменти, поръчки за продукти и т.н. Собствениците на уебсайтове много често използват различни форми за преобразуване. Представете си какво се случва, ако формулярите не са адаптирани за попълване в мобилна притурка.

Как да проверите дали формулярите на сайта Ви са адаптирани за мобилен трафик? Много е просто: отидете на сайта с помощта на смартфон или таблет и се опитайте да попълните формуляра. Ако трябва да увеличите формата, не можете да разберете какви данни трябва да въведете в дадено поле, тогава формата не е подходяща за мобилен сайт.

Можете да поръчате разработването на удобни формуляри за мобилен сайт, както и да използвате шаблони за популярни CMS.

  • SumoMe. Безплатен плъгин, който ви позволява да създавате удобни мобилни форми.
  • OptinMonster. Платен плъгин за създаване на мобилни формуляри.
  • ClickBank. Тази услуга ще се нуждае от собствениците на онлайн магазини. Тя ви позволява да "обвържете" сайта, адаптиран към мобилната кошница за трафик за обработка и плащане на поръчки.
  • Gumroad. Друга услуга за обработка и плащане на поръчки, удобни за мобилни потребители.
  • Authorize.net. Услуга за получаване на плащания от мобилни сайтове.

Стъпка 4: Предложете на потребителите четено съдържание

Потребителите на мобилни притурки с малки екрани често отиват онлайн, за да решат конкретен проблем: сравняват цените на продуктите в различни магазини, намират данните за контакт на продавача, прочетете инструкциите за употреба на лекарството. Те стигат до сайта ви благодарение на ясна и привлекателна заглавие. На сайта те трябва да намерят съдържание, пригодено за четене от малък екран.

На английски има думата snackable (от английски. "Snack" - предястие). Съдържанието за мобилни потребители трябва да бъде с възможност за закуска: удобно за бързо четене или дори за сканиране на повърхността в движение.

Удобно за четене от съдържанието на екрана за мобилни устройства отговаря на следните характеристики:

  • Започва с кратко, информативно и завладяващо заглавие. Фокусирайте се върху дължината на 10 думи. Заглавието трябва да бъде в голям печат.
  • Текстът трябва да се обедини в секции, всяка от които започва с кратък, информативен и провокативен подзаглавие. Подгласите трябва да се открояват визуално от текста.
  • Текстът трябва да бъде номериран или обозначен с списъци. Те помагат на мобилните потребители бързо да получават критична информация.
  • Текстът трябва да бъде визуално съдържание. Той допълнително структурира текста и улеснява неговото възприятие.

Стъпка 5: Адаптирайте имейлите от малък екран.

Имейлът може да се адаптира за четене от екраните на притурки за мобилни устройства, като се използват следните инструменти за изпращане на поща:

  • MailChimp.
  • Aweber.
  • Постоянен контакт.

Избирайки пощенска услуга, уверете се, че сте направили всичко, за да прочетете писмата си.

Присъединете се към мобилната еволюция и не губете трафик.

Интернет бавно, но сигурно става мобилен. Дарвин също така откри, че най-адаптираните видове оцеляват в процеса на еволюцията. Ако искате да спечелите състезанието за трафик, имате само един избор: да адаптирате сайта за четене от екраните на мобилните джаджи.

Можете да поръчате адаптивно оформление на сайта в нашата агенция. Всички подробности прочетете линка.

Гледайте видеоклипа: Духът на времето III: Продължение Zeitgeist: Moving Forward (Април 2020).

Loading...

Оставете Коментар