В ТАЗИ СТАТИЯ · 7 ЧАСТИ
Адаптивен сайт (на английски responsive) е сайт, който използва една и съща страница на един и същ адрес, но я пренарежда според екрана: на компютър съдържанието е в няколко колони, на телефон – в една, с по-едър текст и по-големи бутони. Google препоръчва точно този подход, защото е най-лесен за изработка и поддръжка [1]. А „удобен за телефон“ значи повече от това сайтът да се събира на екрана: текстът се чете без увеличаване, бутоните се натискат лесно с палец, а обаждането става с едно докосване.
Защо телефонът е първият екран
Когато някой търси фризьор, сервиз или ресторант наблизо, често го прави от телефона си, понякога буквално на улицата. Google отдавна се съобразява с това. Търсачката използва мобилната версия на сайта, обходена със смартфон, когато го индексира и класира [1]. През 2023 г. Google обяви, че преминаването към това индексиране е завършено, и отбеляза, че в някои региони хората ползват интернет почти само от телефона си [2].
Това има едно много практично следствие: ако нещо липсва в мобилната версия (услуга, цена, адрес), за Google то все едно го няма. Затова мобилната версия трябва да е също толкова пълна, колкото тази за компютър. Повече за причините, поради които един сайт не се показва в търсенето, има в защо сайтът ми не излиза в Google.
Адаптивен, мобилна версия или отделен сайт?
Google описва три начина един сайт да работи на телефон [1]. На практика за малкия бизнес изборът е лесен:
| Начин | Как работи | Подходящ ли е за малък бизнес |
|---|---|---|
| Адаптивен (responsive) | Един адрес, един код; страницата се пренарежда според екрана | Да, това е препоръката на Google и нормата днес |
| Динамично обслужване | Един адрес, но сървърът праща различен код според устройството | Рядко; по-сложно за поддръжка |
| Отделен мобилен сайт (m.сайт.bg) | Отделни адреси за телефон и компютър | Не; две версии за поддръжка и повече места за грешка |
Ако сайтът ти още е на отделен „m.“ адрес или изобщо няма мобилна версия, това обикновено е знак, че е време за нов сайт, а не за кърпене.
Адаптивен сайт не е отделен „мобилен сайт“. Това е един сайт, който се нарежда сам на всеки екран.
Какво значи наистина „удобен за телефон“
Много сайтове технически се „събират“ на телефона, но пак са неудобни. Ето какво прави разликата:
Текст, който се чете без увеличаване
Ако страницата няма една малка настройка в кода (т.нар. viewport), мобилният браузър я показва с ширина на компютърен екран, обикновено около 980 пиксела, и смалява всичко. Тогава хората трябва да увеличават с два пръста, за да прочетат нещо [3]. На добрия адаптивен сайт текстът е достатъчно едър още при отварянето и няма хоризонтално превъртане.
Бутони, удобни за палец
Малките линкове един до друг са най-честата причина да натиснеш не това, което искаш. Стандартът за достъпност WCAG 2.2 поставя минимум от 24 на 24 CSS пиксела за всеки елемент, който се натиска, или достатъчно разстояние около по-малките [4]. Apple препоръчва 44 на 44 точки като размер по подразбиране за бутоните в iOS [5]. Не ти трябват числата наизуст. Важното е, че бутонът трябва да е голям, а около него да има въздух.
Обаждане с едно докосване
За повечето местни бизнеси най-силното действие на телефон е обаждането. Номерът трябва да е линк, който отваря набирането, а бутонът за обаждане да се вижда без превъртане. Подробно за това има в бутони за действие, които носят клиенти.
Бързина на мобилен интернет
На телефон често си на мобилни данни, не на офисния интернет. Големите снимки и излишните скриптове се усещат първо там. Какво да направиш, ако сайтът се бави, виж в защо сайтът ми е бавен и как да го ускоря.
Нищо, което закрива екрана
Изскачащ прозорец, който на компютър заема ъгълче, на телефон покрива цялата страница. Банерът за бисквитки, чатът и абонаментът за бюлетин трябва да се затварят лесно и да не стоят върху бутона за обаждане.
Проверка за 10 минути на твоя телефон
Отвори сайта си на собствения си телефон (не на компютъра) и мини през списъка:
- Текстът се чете без увеличаване, а страницата не се плъзга настрани.
- Още на първия екран личи какво правиш и къде.
- Бутонът за обаждане или запитване се вижда без превъртане.
- Номерът набира с едно докосване.
- Менюто се отваря и затваря лесно, а всички страници са в него.
- Бутоните и линковете не са залепени един за друг.
- Формата за контакт се попълва удобно: правилната клавиатура за телефон, малко полета.
- Снимките не се режат странно и не изтласкват текста.
- Няма прозорец, който закрива страницата при влизане.
- В мобилната версия има всичко от компютърната: услуги, цени, адрес, работно време.
Ако имаш компютър под ръка, можеш да видиш сайта и в режима за устройства на Chrome. Самият Google обаче казва, че това е само първо приближение: симулацията върви на компютъра, а не на истински телефон [6]. Затова последната дума е на истинския телефон, по възможност и на един по-стар модел. Още точки за проверка преди пускане на нов сайт има в контролен списък преди пускане на сайт.
Пример от наш проект: пътна помощ
Един от нашите проекти е сайт за пътна помощ и мобилен сервиз за гуми. Клиентите му търсят помощ от телефона, често на пътя. Затова първият мобилен екран показва какво е услугата и къде работи, голям бутон „Обади се“ с номера, WhatsApp веднага под него и лента за изпращане на точната локация с едно докосване. Целият казус, със снимка на мобилния екран, е в сайт за автосервиз и пътна помощ, а останалите ни сайтове са в проектите.
Изводът е прост: първо мисли какво прави човекът с телефона в ръка, после подреждай екрана. Същата логика важи за началната страница на всеки бизнес.
Ако сайтът ти не минава проверката
Някои неща се оправят бързо: по-едър шрифт, номер като линк, по-голям бутон, по-леки снимки. Ако обаче сайтът е стар, на отделен мобилен адрес или се „чупи“ на всяка страница, често е по-евтино и по-бързо да се направи наново, адаптивен от самото начало. Голямата картина е в уеб дизайн: пълен наръчник.
В Studio V1 всеки сайт се проектира първо за телефон и се проверява от реални разработчици, преди да излезе онлайн, до 7 работни дни. Абонаментът е 50 € на месец и включва поддръжка и малки промени, така че можеш да поискаш нов бутон или по-кратък текст, когато видиш, че нещо на телефона не работи. Виж как работим или пиши ни.
Източници
- Google Search Central. "Mobile site and mobile-first indexing best practices." developers.google.com/search
- Google Search Central Blog. "Mobile-first indexing has landed - thanks for all your support." developers.google.com/search/blog
- web.dev (Google). "Responsive web design basics." web.dev/articles/responsive-web-design-basics
- W3C Web Accessibility Initiative. "Understanding Success Criterion 2.5.8: Target Size (Minimum)." w3.org/WAI/WCAG22
- Apple Developer. "Accessibility – Human Interface Guidelines." developer.apple.com/design
- Chrome for Developers. "Simulate mobile devices with device mode." developer.chrome.com/docs/devtools
