10 добри практики при изграждане на мобилна версия на сайта

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

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

Според десетки уеб проучвания и статистики, още през 2017 година трафикът от мобилно устройство взима превес над този от десктоп. А откакто от Google обявиха, че преминаването към Mobile First Index за всички сайтове става задължително от март 2021, голяма част от собствениците на онлайн бизнеси насочиха вниманието си към оптимизацията на мобилната версия на своите сайтове. Тази тенденция е достатъчно красноречива и подсказва колко значима е ролята на мобилния изглед за качественото потребителско изживяване.

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

1. Винаги използвайте четим шрифт с достатъчно уголемен размер

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

В противен случай как очаквате посетителите да разберат къде са попаднали и какво им представяте? Идеята Ви може истински да ги вълнува, но няма как да стане ясно, ако им поставяте „препятствия“ още на „входа“.

Вижте също: 10 основни грешки при изграждането на един уебсайт

2. Възползвайте се от предимствата на „бургер менюто“

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

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

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

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

3. Старайте се да държите потребителя само в един прозорец на браузъра

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

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

Мобилна версия на клиентски профил в СуперХостинг.БГ
Така изглежда клиентският профил в superhosting.bg през мобилно устройство.

4. Изключете изскачащите прозорци в мобилната версия на сайта

Попадали ли сте в ситуация, при която, отваряйки даден сайт, се появява pop-up прозорец с промо оферта или важно послание, но трудно можете да затворите? Ако Ви се е случвало, значи със сигурност си спомняте каква емоция е провокирало това у вас.

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

Освен това Google „не гледа с добри очи“ на сайтовете, които прибягват до този метод за провокация в мобилните си версии. Страниците, които си служат с този маркетингов похват, биват санкционирани от глобалната търсачка чрез понижаване на позицията в класирането при търсене. 

Прочетете също: Защо сайтът Ви трябва да е mobile-friendly + 3 начина да го направите

5. Опростете формите за попълване/регистрация в сайта

Не карайте потребителите да въвеждат данни до безкрай. Идва момент, когато след поредното задаващо се поле просто губите техния интерес. А това води до какво? Точно така – до отпадане, излизане или напускане. Много начини, с които да кажем, че потребителите просто си тръгват от сайта ни, отказвайки да взаимодействат с него.

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

Форма за попълване
Добавете само полета за най-важната информация – име, имейл адрес, телефонен номер.

6. Погрижете се за препратките и бутоните

Винаги мислете за принципа на „дебелите пръсти“. Това е метафора, която гравитира из дизайнерските среди и се свързва с близко разположените елементи, върху които трудно може да се кликне. В повечето случаи или бутоните са твърде малки и неудобни за интеракция, или препратките в страницата за съвсем сбутани една до друга и отново има предпоставка за излизане от сайта.

Мобилна версия на сайта superhosting.bg
Бутоните с призив за действие като „Тествай безплатно“ например трябва да бъдат видими и лесно достъпни.

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

7. Спестете пространство с помощта на сгъваеми секции/акордеони

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

Акордеон в мобилна версия
Така изглежда акордеонът в сайта през мобилно устройство.

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

Научете: Как да добавим акордеон в сайта?

8. Поддържайте синхрон между дизайна за десктоп и мобилно устройство

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

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

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

Йерархия на важните елементи в сайта за различни устройства.
В червено са отбелязани важните елементи, в жълто – следващите по значимост, а в синьо по-малко важните.

9. Обърнете внимание на изображенията

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

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

А в следващото видео Ви показваме как да оразмерите снимките в сайта си без намесата на дизайнер или специалист. Убедете се сами, като следвате всички инструкции:

10. Направете контактите в сайта си кликаеми

Сещате ли се кое е най-голямото предимство на мобилното устройство? Че преди всичко можете да водите телефонни разговори чрез него. Тогава какво Ви спира да осъвместите тази полза с преимуществата на сайта? 

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

И накрая…

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

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

Абонирайте се за СуперБлога, за да получавате първи вдъхновяващи бизнес исории и съвети за Вашите сайтове/

Звезделина Георгиева
Звезделина Георгиева
Спокойно можете да я наричате СуперЗвезди. С изтънчен и неподправен усет към естетиката, Звезди привнася във всеки проект нотка на завършеност и аристократизъм. Цели право в целта, улучва и продължава по пътя към непрестанното усъвършенстване. СуперСилата й е обезоръжаващата усмивка, с която прави невъзможното възможно. Няма да е лъжа, ако кажем, че става и ляга с мисълта да помага. Това я прави отдаден колега и чудесен приятел.
0 0 votes
.
Абониране
Уведоми ме при
guest
0 Коментара
Inline Feedbacks
View all comments
Какви са ползите от SSL сертификата за сайта и неговите потребители?

Какви са ползите от SSL сертификата за сайта и неговите потребители? [Аудио]

0
Използването на SSL сертификат и сигурна HTTPS връзка за сайта е категоричен показател, че държите на доверието и сигурността на посетителите му.
Вече е време да си имате сайт!

Кога разбирате, че Вашият бизнес се нуждае от сайт? [Аудио]

0
Нямате сайт? Но имате бизнес… И все повече усещате, че имате нужда от сайт. Е, тази статия ще Ви помогне да вземете решение. Прочетете повече!
Сайтът не е само за хора с бизнес и търговия.

6 идеи за сайт, различен от онлайн магазин [Аудио]

6
Ако първата ви асоциация със сайт е онлайн магазин… замислете се пак. Има много други видове сайтове, които не търгуват онлайн, но си струва да се посещават.