Как да направите сайта си mobile-friendly

Как да направите сайта си mobile-friendly

Над 60% от уеб трафика през 2018г. е от мобилни устройства. Какво означава това - задължително е вашият сайт да работи еднакво добре на всеки един компютър, мобилен телефон или таблет, използван от потребител. В противен случай не само ще имате влошен user experience, но и сайтът ви няма да се харесва на търсачките. В тази статия ще ви помогнем да разберете защо е необходим mobile friendly уеб сайт за вашия бизнес и как можете да го направите.

Mobile friendly уеб сайт в 9 стъпки:

Ето няколко полезни хода, които да предприемете, за да направите своя уеб сайт удобен за използване от мобилни устройства. Който и от тях да приложите, със сигурност ще осигурите по-добро потребителско преживяване на своя уеб сайт.

Стъпка 1: Направете сайта си с Responsive web design

Това е най-добрият вариант, на който да разчитате. Още през 2015г. Google индикира, че сайтове, които показват пълното си съдържание, но го адаптират за показване според устройството на потребителя, са най-харесвани за търсачката. Именно такива са уеб сайтовете, които имат responsive дизайн. Използването му е не само добро за вашата SEO стратегия, но и означава, че вие ще трябва да създадете една единствена версия на сайта си.

За да направите сайта си responsive, в много от случаите ще са ви необходими определени технически умения в уеб разработката. За щастие, можете да се справите и сами без никакви познания, ако използвате sitebuilder платформа(като ICN.Bg Sitebuilder), която ще ви позволи да създадете уеб сайт с responsive дизайн само с няколко клика на мишката си.

Извод: Responsive дизайн е вариантът, който Google препоръчва за всеки един уеб сайт. Създаването му изисква намеса на техническо лице или използването на sitebuilder инструмент.

Стъпка 2: Добавете viewport мета таг на страниците си

Viewport се нарича тази част от уеб сайта, която е видима на екрана на устройството на даден потребител. Тя е различна при всеки компютър, който отваря сайта, и обикновено е по-малка за мобилните устройства в сравнение с настолните компютри и лаптопи.

Представете си ширината на една уеб страница, заредена от вашия компютър. Ако тя се покаже със същата ширина на вашия мобилен телефон, ще бъде много неудобно за вас като потребител да я разгледате и откриете небходимата информация. Потребителите са свикнали да използват scroll функцията нагоре и надолу, но не и наляво и надясно. Ето защо съществува и viewport мета тагът, който указва на браузъра да зареди страницата с подходящ размер за всяко устройство.

За да го използвате, е необходимо единствено да добавите тага в HTML кода (в частта <head>) на всяка от страниците на сайта си:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

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

Извод: Viewport мета тагът задава подходящата ширина на уеб страницата за всяко едно устройство. Можете съвсем лесно да го добавите в HTML кода на всяка една страница в сайта си.

Стъпка 3: Премахнете всички Flash елементи

Flash отдавна не се използва при създаването на нови уеб сайтове, защото значително забавя зареждането на страниците и работата на сайта. Освен това, Flash елементите не се поддържат коректно от абсолютно всички браузъри. Всичко това влияе негативно върху SEO ранкинга на сайтовете, които ги използват. Време е и вие да премахнете Flash анимациите от сайта си, ако все още имате такива и се стараете да предоставите добър user experience на своите потребители.

Стъпка 4: Оптимизирайте изображенията на сайта

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

Стъпка 5: Използвайте по-голям шрифт на текста

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

Стъпка 6: Направете бутоните на сайта достатъчно големи

Лесно ли се натискат всички бутони в сайта ви от екрана на малко мобилно устройство? Проверете дали всеки кликаем елемент от менютата в сайта ви може да бъде избран лесно с едно натискане върху екрана. За тази цел елементите не трябва да са прекалено близо един до друг и трябва да бъдат достатъчно големи и четими за потребителите. Предвидете по-голямо отстояние между тях и достатъчна видимост. Уголемете надписа и полето на всички бутони и елементи в навигационното меню на сайта.

Стъпка 7: Направете най-важната информация най-лесна за откриване

Имайте предвид, че хората не сърфират по един и същи начин в Интернет от мобилните си устройства и от настолните си компютри. В първия случай от решаващо значение е колко бързо, кратко и ясно ще им предоставите информацията, от която се нуждаят. Във втория те са по-склонни да четат по-дълъг текст и да прекарат повече време на вашия сайт. Нека в мобилната версия (ако имате отделна такава) най-полезната информация да се появи в началната страница на сайта заедно с най-важните препратки и менюта. Спестете си усилия и ресурси за сложен и впечатляващ дизайн на мобилната версия, ако това ще забави зареждането на сайта или ще затрудни потребителите да се ориентират.

Стъпка 8: Премахнете autocorrect функционалността

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

За да предодвратите това, можете да включите атрибута autocorrect=off в тага <input> на HTML кода на уеб страницата.

Стъпка 9: Включете възможност за преминаване към десктоп версия

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

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

Преди да започнете...

Усилията и времето за създаване на mobile friendly уеб сайт ще имат смисъл само ако се уверите, че сайтът ви ще разполага с достатъчно ресурси, за да се зарежда бързо, да работи без downtime и да бъде максимално защитен. С други думи, необходимо е да подсигурите надеждна хостинг среда, възможности за ускоряване на зареждането на страниците, както и инструменти за предпазване на потребителските данни в сайта. Това ще ви гарантира, че ще се харесате както на своите потребители, така и на търсещите машини.

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

Етикети: #mobile-friendly #website #hosting #хостинг