съвети за оптимизация на мобилни версии на сайтове

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

 

1. Отделна мобилна версия на сайта ви

В този случай, съдържанието на версията ви за компютри и версията ви за смартфони ще е на различни страници с различни домейни. Обикновено, мобилните варианти на сайтовете се хостват на субдомейн, например m.sait.com.

 

Ако сте създали мобилна версия по този начин, не забравяйте да свържете двете версии (мобилната и десктоп) помежду си с <link> таг и с rel атрибут. В мобилната си версия сложете атрибут rel=”canonical” към десктоп версията, а на десктоп версията заложете rel=”alternate”, сочещ към мобилната ви версия. Една десктоп страница трябва да има една кореспондираща мобилна страница и обратното. 

 

Настройте препращане. Би било удобно, когато посетител от мобилно устройство посети сайта ви, вие да го препратите към удобна за телефони версия, нали? Можете да направите това на ниво сървър, или чрез JavaScript. 

 

Този метод за изграждане на мобилна версия, макар и не толкова популярен, е добър от гледна точка на ефективно зареждане на ресурси (HTML, CSS, JS). Зареждат се само ресурси, които се използват за мобилната версия, а не и за десктоп. Но, разбира се, така изградена мобилна версия ще е по-трудна за поддръжка и доразвиване.

 

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

Разликата между този метод и горния е че при този метод HTML, CSS, JavaScript не се променят спрямо устройството. В CSS файловете може да се дефинират какви да бъдат стойностите за определени елементи при определени резолюции. Така например даден елемент при настолни компютри, може да заема 50% от размера на екрана, а при моб. устройства да заема 100% от размера. И това може да бъде постигнато без промяна в HTML.

 

Това ни дава възможност да разработваме само една версия на сайт, но трябва да се погрижим само за изгледа на сайта си при определени резолюции.

 

Изчистен дизайн

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

 

Удобна навигация

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

 

Използвайте инструменти за оптимизация на CSS, HTML, JS

Проверете дали платформата ви има възможност да минифицира CSS, JS, HTML. Това е процес, при който файловете се изчистват от спейсове, коментари, излишен код и прочее. Това прави тези файлове по-малки по размер и респективно те зареждат по-бързо. 

 

Не променяйте бранд цветовете/логото си

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

 

Не претрупвайте страниците си

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

 

Като заключение, съветваме ви да проверите колко бързо зареждат вашите страници с Google PageSpeed Insights и дали са удобни за работа с Google Mobile-Friendly Test инструментите. Тези два инструмента ще ви дадат идеи какво трябва да промените в страниците си, за да подобрите потребителското преживяване.

Избери услуга и активирай за минути.

Стартирай без риск - предоставяме 30 днeвна гаранция за възстановяване на платената сума.

Започнете още днес