Отворете сайта си на телефон и се опитайте да поръчате нещо или да изпратите запитване, като използвате само палец, в движение, на мобилни данни. Това упражнение отнема три минути и обикновено открива повече проблеми от всеки автоматичен отчет.
Мобилният трафик в България отдавна е мнозинство. При повечето сайтове, които преглеждаме, той е между 60 и 78 процента. Въпреки това дизайнът често се прави и одобрява на голям монитор, а мобилната версия се проверява набързо накрая. Резултатът е познат: сайтът изглежда добре в презентацията и работи посредствено там, където са реалните клиенти.
Какво означава адаптивен дизайн на практика
Адаптивен дизайн не е просто съдържанието да се събира в екрана. Това е минимумът. Истинската адаптация означава, че на малък екран приоритетите се пренареждат.
На десктоп имате хоризонтално пространство и можете да покажете странична лента с филтри, три колони продукти и меню с осем позиции. На телефон същото съдържание, подредено вертикално, изисква десет скролвания преди да се стигне до нещо полезно.
Затова добрата мобилна версия не е смалена десктоп версия, а различна подредба на същата информация. Най-важното отива първо. Второстепенното се сгъва в акордеони. Онова, което не служи на никого, изчезва.
Mobile first не е лозунг
Подходът mobile first означава, че дизайнът започва от най-тесния екран и се разширява нагоре. Причината е практична: когато започнете от 375 пиксела ширина, сте принудени да решите кое е наистина важно. Когато започнете от 1440 и после смалявате, влачите със себе си всичко и се опитвате да го напъхате.
Какво проверява Google
От момента, в който индексирането на Google работи предимно с мобилната версия, това не е препоръка, а условие. Търсачката вижда сайта ви такъв, какъвто го вижда потребител с телефон.
Основните технически критерии са няколко.
Съдържанието трябва да е еднакво в двете версии. Ако мобилната версия крие част от текста или няма същите структурирани данни, това съдържание фактически не съществува за индексирането.
Показателите Core Web Vitals се измерват върху мобилни устройства. LCP, тоест време до зареждане на основния елемент, трябва да е под 2.5 секунди. CLS, тоест визуалната нестабилност, под 0.1. INP, тоест отзивчивостта при взаимодействие, под 200 милисекунди.
Няма хоризонтално скролване. Елемент, който излиза извън ширината на екрана, е класически проблем и обикновено идва от фиксирана ширина в пиксели или от голяма таблица.
Зоните за докосване са достатъчно големи и раздалечени. Препоръката е около 44 на 44 пиксела минимум.
Текстът е четим без увеличаване. Основният шрифт под 16 пиксела на телефон води до автоматично увеличаване от браузъра и до счупен layout.
За измерване използвайте PageSpeed Insights и отчета за Core Web Vitals в Search Console.
Къде се губят мобилните клиенти
Данните от записи на сесии показват повтарящи се модели.
Изскачащи прозорци, които не могат да се затворят. Бутонът за затваряне е малък, извън екрана или се появява със закъснение. Потребителят се отказва и излиза.
Форми, които не са пригодени. Полето за телефон отваря буквена клавиатура. Клавиатурата закрива полето, което се попълва. Няма автоматично попълване. Датата се въвежда ръчно вместо с избор от календар.
Цената под сгъвката. На продуктовата страница снимката заема целия екран и потребителят трябва да скролне, за да види цената. Това е сред най-скъпите грешки в онлайн магазините.
Твърде дълъг път до действие. Пет скролвания до бутона за поръчка на телефон е много. Плаващ бутон, който остава видим, обикновено решава проблема.
Тежки изображения. Снимка от 3 мегабайта на мобилни данни означава чакане и изоставяне. Съвременните формати като WebP и AVIF намаляват размера значително при същото визуално качество.
Бавно зареждане заради скриптове. Всеки допълнителен инструмент за проследяване, чат, банер и виджет добавя тежест. Проверете какво реално използвате и махнете останалото.
Практически чеклист
| Проверка | Как се прави | Приоритет |
|---|---|---|
| Хоризонтално скролване | Отворете на телефон и плъзнете настрани | Висок |
| Размер на бутоните | Опитайте да натиснете с палец, не с нокът | Висок |
| Цена и призив над сгъвката | Отворете продуктова страница без скролване | Висок |
| Тип клавиатура при полетата | Докоснете поле за телефон и за имейл | Среден |
| Затваряне на изскачащ прозорец | Опитайте да го затворите с една ръка | Висок |
| Тегло на изображенията | Инструменти за разработчици, раздел Network | Среден |
| Четимост на текста | Прочетете абзац на слънце навън | Среден |
| Скорост на мобилни данни | Ограничете скоростта в браузъра до 4G | Висок |
Този списък отнема около половин час и покрива по-голямата част от типичните проблеми.
Изображения, шрифтове и скорост
Изображенията са най-честият източник на тежест. Три мерки решават почти всичко: съвременен формат, коректни размери за конкретния екран чрез srcset, и отложено зареждане на всичко под сгъвката. Заглавното изображение обаче не се отлага, защото то обикновено е LCP елементът.
Шрифтовете имат по-голямо влияние, отколкото изглежда. Всеки допълнителен шрифтов файл е отделна заявка. Две тегла на един шрифт обикновено са достатъчни. Задайте и подходящо поведение при зареждане, за да не остане текстът невидим няколко секунди.
Скриптовете от трети страни често са най-голямото натоварване. Чат виджет, инструмент за топлинни карти, пиксели на няколко рекламни платформи, банер за бисквитки. Всяко от тях поотделно изглежда леко, но заедно правят разликата между 2 и 6 секунди. Заредете ги отложено и премахнете тези, които не използвате активно.
Адаптивен дизайн при онлайн магазин
Магазините имат няколко специфични точки.
Филтрите на мобилен екран не могат да стоят в странична лента. Стандартното решение е бутон, който отваря филтрите на цял екран, с ясно показан брой резултати и с бутон за приложение.
Продуктовата галерия трябва да позволява плъзгане и увеличаване с два пръста. Стрелки, направени за мишка, не работят добре с палец.
Количката и плащането са критични. Всяко излишно поле намалява завършените поръчки. Поръчка като гост, автоматично попълване на адреса, ясно показана обща сума с доставка още преди последната стъпка.
Повече по темата има в чеклиста преди старт на онлайн магазин и в услугата ни за онлайн магазини.
Отделна мобилна версия или адаптивен сайт
Практиката вече е ясна. Отделен мобилен поддомейн от типа m.example.bg създава двойна поддръжка, риск от разминаване на съдържанието и допълнителна работа с пренасочвания и канонични адреси. Днес почти няма случай, в който този подход да е оправдан.
Адаптивният сайт с един кодов набор и различни правила за различните ширини е стандартът. При много сложни приложения се среща и подход с адаптивно сервиране от сървъра, но той изисква повече ресурс и се използва рядко.
Отделно приложение е различен въпрос. То не заменя мобилния сайт и има смисъл само при повтаряща се употреба от лоялни клиенти. Вижте статията за мобилно приложение за бизнес.
Колко струва и откъде да се започне
Ако сайтът е сравнително нов и построен на съвременна основа, мобилната оптимизация обикновено е въпрос на настройки: изображения, скриптове, подредба на ключовите страници. Това е работа от няколко дни.
Ако сайтът е на осем години, с фиксирана ширина и наслоени поправки, преработката често излиза по-скъпа от нов фронтенд. В такива случаи е по-разумно да се планира редизайн, при който адаптивността влиза от самото начало. Вижте и материала за редизайн и миграция.
WEBPROGRESS дава индивидуална оферта след преглед на конкретния сайт, с отговор до 24 часа.
Навигация и меню на малък екран
Менюто е мястото, където мобилната версия най-често се проваля тихо. Потребителят не се оплаква, той просто не намира каквото търси и излиза.
Скритото меню зад три чертички е стандартът, но има цена: съдържанието му става невидимо, докато не се докосне. При сайт с пет основни раздела си струва най-важните два да останат видими като отделни бутони.
Дълбочината е проблем. Меню с три нива на телефон изисква три докосвания и много скролване. По-добре плоска структура с осем до десет позиции, отколкото красива йерархия, в която никой не влиза.
Търсенето трябва да е достъпно. При магазин с голям каталог полето за търсене се използва повече от менюто и заслужава видимо място, не иконка в ъгъла.
Плаващата долна лента с три или четири основни действия работи много добре при магазини и при сайтове с услуги. Тя стои в зоната, до която палецът стига естествено, и премахва нуждата от скролване нагоре.
Позицията на бутоните има значение. Горният десен ъгъл е най-неудобната зона на голям телефон, държан с една ръка. Важните действия принадлежат в долната половина на екрана.
Проверете и какво се случва след докосване. Ако няма визуална обратна връзка, потребителят натиска втори път и понякога изпраща формата два пъти.
Често задавани въпроси
Как да проверя дали сайтът ми е мобилно съвместим
Най-бързо с реален телефон, а не само с емулатора в браузъра. Емулаторът показва размерите, но не и реалната скорост, поведението на клавиатурата и усещането при докосване. Допълнете с PageSpeed Insights за мобилно устройство и с отчета за използваемост в Search Console.
Влияе ли мобилната скорост на позициите в Google
Да, но не толкова пряко, колкото се говори. Core Web Vitals са фактор за класиране, но с по-малко тегло от релевантността на съдържанието. По-важно е косвеното влияние: бавният сайт губи посетители преди да са видели съдържанието, а това се отразява на всички останали сигнали и на приходите.
Трябва ли да се крие съдържание на мобилна версия
Не и ако е важно. Скриването на текст, който съществува на десктоп, означава, че той няма да се брои при индексирането. Приемливо е съдържанието да е сгънато в акордеон, стига да присъства в кода и да се отваря с едно докосване.
Какъв е разумният праг за скорост на мобилно устройство
Като работен ориентир, LCP под 2.5 секунди при 4G връзка и общо време до интерактивност под 4 секунди. Стойности над 5 секунди водят до чувствителни загуби. Абсолютните числа са по-малко важни от посоката: измерете, поправете, измерете отново.
Как да се справя с бисквитковия банер на телефон
Той трябва да е затворим с една ръка, да не покрива целия екран и да не блокира съдържанието, докато не бъде обработен, освен ако правно не се налага. Отложете зареждането му така, че да не влияе на LCP. Повече за изискванията има в статията за GDPR и бисквитките.
Заключение
Мобилната оптимизация е там, където се решава по-голямата част от приходите на един сайт, защото там е по-голямата част от посетителите. Работата не е сложна, но изисква да се гледа сайтът от позицията на човек с телефон в ръка и ограничено търпение.
Ако мобилният ви трафик е висок, а конверсията на телефон изостава, пишете ни през контактите. Правим преглед, даваме конкретен списък с поправки по приоритет и изготвяме индивидуална оферта до 24 часа. Вижте също услугите ни за изработка на сайт, хостинг и SEO.
