Наскоро разгледахме списък с неща, които хората очакват да видят на сайта Ви, като едно от тях беше сайтът Ви да изглежда добре на мобилни устройства. Потребителското преживяване (user experience) на мобилни устройства е по-важно от всякога, тъй като повече от половината уеб трафик в наши дни идва точно от тях. За голяма част от потребителите на интернет, мобилният им телефон е единственото устройство, с което те получават достъп до глобалната мрежа.
Ето защо решихме да разгледаме този въпрос по-задълбочено, като Ви дадем няколко съвета как да направите сайта си подходящ за разглеждане на мобилни устройства. Ако той е съвместим с мобилните браузъри, е по-вероятно да привлече повече посетители, а оттам да се повишат продажбите Ви.
- 1. Използвайте адаптивен шаблон
- 2. Използвайте големи бутони и шрифтове
- 3. Оптимизирайте изображенията на сайта
- 4. Подобрете скоростта на зареждане на сайта
- 5. Използвайте опростено мобилно съдържание
- 6. Избягвайте изскачащи прозорци и скрити секции
- 7. Използвайте мета тага viewport
- 8. Спрете автоматичното коригиране във формулярите
- 9. Използвайте опростено меню за навигация
- 10. Добавете информация за връзка, подходяща за мобилни устройства
- Няколко полезни инструмента
- В заключение
1. Използвайте адаптивен шаблон
Ако използвате шаблон за сайта си, се уверете, че той е адаптивен. Не всички шаблони изглеждат добре на мобилни устройства. Нашият сайт билдър например идва с набор от напълно адаптивни шаблони, с които можете да създадете всякакъв тип сайтове и да прегледате всяка страница в различни режими – настолен компютър, таблет и смартфон. Други приложения като WordPress или OpenCart идват с огромен брой безплатни и платени шаблони, но ще трябва да се уверите, че този, който изберете, поддържа адаптивен дизайн. Ако искате да закупите платен шаблон, проверете инструкциите му за инсталация предварително или вижте демо. В случай, че използвате шаблон, който не поддържа мобилен режим, ще трябва или да положите много усилия, за да го пригодите, или сайтът Ви чисто и просто ще изглежда зле на мобилни устройства.
2. Използвайте големи бутони и шрифтове
Разглеждането на страници трябва да е удоволствие, не бреме. Ето защо трябва внимателно да изберете размера на различните елементи на дадена страница. Не повече от шепа хора биха разгледали повече от една-две страници, ако постоянно трябва да увеличават или намаляват размера на страницата, защото шрифтът е прекалено дребен например. Уверете се, че текстът на сайта Ви се чете лесно.
Бутоните също не трябва да са малки. Ако е трудно да се докоснат, или ако имате група от бутони, които трудно се избират, посетителите на сайта Ви най-вероятно ще се насочат към някой конкурент. Би било доста досадно, ако навигирането на сайта е трудно и някой цъкне на грешния бутон, само защото бутоните не са предвидени за по-едри пръсти.
3. Оптимизирайте изображенията на сайта
Смалете изображенията на сайта си до възможно най-малкия размер, при който не се разваля качеството им. За мобилен сайт не са Ви нужни изображения, които са големи по няколко мегабайта или са широки по над 1500 пиксела. Подобни изображения са подходящи за мощен настолен компютър с широколентова свързаност с интернет, но не и за смартфон, ползващ мобилен пренос на данни. В днешно време много приложения за обработка на изображения предлагат запазване в размер и резолюция, подходящи за мрежата (т.нар. Save for web).
Използвайте файлов формат, подходящ за употреба в мрежата. JPEG например е подходящ за снимки, тъй като поддържа богата палитра от цветове, а компресирането на подобно изображение почти не се отразява на качеството. PNG е по-добър формат за изображения, които трябва да се увеличават или за лога с прозрачен фон. BMP е пример за неподходящ формат поради големия размер на изображенията. Може да попаднете на съвети да използвате формата на Google – WebP. Въпреки че той предлага по-добра компресия, все още не се поддържа от всички уеб браузъри, така че посетителите на сайта Ви може да не видят изображенията, използващи този формат.
Добавете забавено зареждане (т.нар. lazy loading, буквално - мързеливо зареждане). Най-просто казано, това е техника за оптимизиране, при която се забавя зареждането на изображенията до момента, в който трябва те да бъдат показани. Ако на сайта Ви има много изображения, забавеното им зареждане може да повиши скоростта му на зареждане многократно. Ако използвате WordPress за сайта си, версия 5.7 на платформата включва тази функция по подразбиране. За по-ранни версии можете да използвате разширение (plugin). Ако не използвате WordPress, можете да добавите “lazy” свойство към изображенията си:
4. Подобрете скоростта на зареждане на сайта
Бързата скорост на зареждане е задължителна не само за десктоп версията на даден уебсайт, но и за мобилната версия. Наред с оптимизирането на изображенията, има още няколко подобрения, които можете да приложите:
- Спрете ненужни разширения и изскачащи прозорци. Ако даден програмен код се зарежда, без да е необходим, може сайтът Ви да се забави ненужно.
- Намалете броя URL пренасочвания. Всяко пренасочване означава допълнителна HTTP заявка и съответен отговор от сървъра. Така се удължава времето за зареждане.
- Използвайте сървърно кеширане или мрежа за доставяне на съдържание. Текст и/или изображения ще се зареждат по-бързо, ако са кеширани. Някои доставчици на хостинг услуги предлагат сървърно кеширане. Ако използвате WordPress, можете да използвате и кеширащ плъгин.
- Обединете файлове, ако е възможно. По-добре е да имате един CSS файл вместо шест например. Същото важи и за JavaScript файлове. Ако е необходимо, може да имате един глобален файл за сайта и втори, който да е само за дадена страница.
Гореописаните стъпки ще подобрят скоростта на зареждане на сайта, което пък ще подпомогне по-доброто му позициониране в резултатите на търсачките. Ще спестите и малко трафик на клиенти, които имат ограничен мобилен или безжичен трафик. Ако тези клиенти знаят, че сайтът Ви е подходящ за връзката, която използват, е по-вероятно да се върнат в бъдеще.
Имайте предвид, че колкото и да е мощно дадено мобилно устройство, то не може да се мери с мощта на настолен компютър или лаптоп. Освен това мобилната връзка обикновено е по-бавна в сравнение с кабелен или безжичен интернет. Ето защо, колкото по-лек и бърз е сайтът Ви, толкова по-добре.
5. Използвайте опростено мобилно съдържание
В реда на нещата е да показвате повече съдържание на десктоп версията на даден сайт, независимо дали става дума за текст или за изображения. Повечето монитори в днешно време са широкоекранни и на тях може да се вижда много съдържание. Единственият проблем в такъв случай би бил, че посетителите на сайта ще са затрупани с информация и може да не намерят това, което търсят. Това не е така при мобилните устройства обаче, тъй като те имат много ограничена площ, на която да изобразяват съдържание. Посетителите трябва да виждат най-важното съдържание веднага или с не повече от няколко скролвания по страницата.
Повечето елементи на мобилен сайт обикновено са с широчина 100%, т.е. колкото цялата страница. Ето защо цялото съдържание ще е подредено вертикално, секция след секция. Освен ако не искате посетителите да скролват безкрайно, трябва да оставите само най-необходимото съдържание. Оставете едно изображение вместо цяла галерия, като оставите линк към галерията. Добавете кратко описание към продукт, а не дълго. Покажете откъс, а не цяла статия. Това са няколко примера как съдържанието може да е кратко и просто. Може да оставите опция някой посетител да види повече информация, ако се интересува, но трябва да премахнете ненужните елементи. Винаги можете да добавите и линк към десктоп версията на сайта.
Ако добавяте инфографики на сайта си, нека са кратки и прости. Много детайлна инфографика не може да се изобрази правилно на малък екран, така че посетителите на сайта ще трябва постоянно да увеличават или намаляват размера ѝ. Разделете една голяма инфографика на няколко по-малки за по-лесно разглеждане.
6. Избягвайте изскачащи прозорци и скрити секции
Изскачащите прозорци са един от начините да привлечете вниманието на посетителите на сайта - ако искате да им покажете персонализирана оферта или да се запишат за периодичен бюлетин например. Подобен подход е чудесен за настолен компютър, но може да бъде много дразнещ на мобилно устройство. Изскачащите прозорци обикновено заемат по-голямата част от екрана, а понякога дори и целия екран. По този начин, вместо да привлечете вниманието на хората, ще ги разсеете, тъй като те няма да виждат съдържанието на сайта. Нещата могат да станат и по-лоши, ако бутонът за затваряне на изскачащия прозорец се вижда или натиска трудно. Или ако по някаква причина изобщо не се побира в рамките на екрана.
Горното важи и за всякакви елементи, които може да скриват част от сайта, като банери, информация за т.нар. бисквитки и други. Подобно на останалите елементи от сайта, в този случай също трябва всичко да е максимално опростено. За съгласие за използването на бисквитки на сайта например може да използвате кратко съобщение с няколко избора и линк за повече информация, в случай че някой посетител иска да прочете повече. Няма нужда да добавяте огромен текст с подробно обяснение и голям брой опции за избор, скривайки цялата главна страница на мобилния сайт.
7. Използвайте мета тага viewport
Т.нар. viewport е видимата част от уеб страница, която се изобразява на дадено устройство. Страниците изглеждат различно на стандартен монитор и на мобилен екран и ако не са оптимизирани за мобилни устройства, уеб браузърите обикновено ги визуализират със стандартна широчина за монитор, а след това ги смаляват до размера на мобилния екран. В резултат на това подобни страници се четат много трудно, тъй като изглеждат много дребни и ще трябва да увеличавате и намалявате размера им, както и да местите страницата във всички посоки. Ако добавите мета тага viewport, ще разрешите този проблем на даден сайт, ако той не е оптимизиран за мобилни устройства:
Мета тагът “казва” на браузърите как те трябва да изобразят дадена страница, след като я заредят, като задава широчината и степента на увеличение спрямо използваното устройство. С други думи, тагът дава инструкция на браузъра как да контролира мащабирането и оразмеряването на дадена страница.
8. Спрете автоматичното коригиране във формулярите
Много хора използват автоматично коригиране, когато пишат на телефоните си. Макар че тази функция е полезна за чат например, тя може да забави хората, ако трябва да попълват формуляр за регистрация или за покупка. Телефонът им може да смени името или адреса им на някоя често срещана дума, а те ще трябва да поправят всичко, което е било коригирано автоматично. За да изключите тази функция, трябва да добавите свойството “autocorrect=off”:
<input name="form" type="text" autocomplete="off"/> В допълнение можете да добавите и spellcheck="false", за да махнете дразнещото подчертаване с червена линия на думи или изрази, които са неправилни според браузъра. Подобна проверка не е необходима при попълването на формуляр на мобилно устройство.
9. Използвайте опростено меню за навигация
Ако сайтът Ви има много секции и искате да добавите линк към всяка от тях в главното си меню, можете да ги добавите на десктоп версията на сайта. Може да не е много добра идея да имате прекалено много опции в едно меню, но менюто ще изглежда добре на голям монитор. Не така стои въпросът обаче с меню на мобилен сайт. Трябва задължително да избягвате да добавяте прекалено много опции в него, тъй като или посетителите ще трябва да скролват, или опциите ще са много малки и трудни за натискане. И в двата варианта навигирането по сайта ще е трудно и е вероятно хората да се откажат да разглеждат сайта Ви.
Мобилното меню трябва да е опростено и трябва да включва само основните категории на сайта Ви. При нужда може да включва и няколко подсекции, но те трябва да се показват само ако е избрана основната категория. По-кратките заглавия в менюто ще са по-подходящи, тъй като са по-разбираеми и се виждат по-лесно на мобилни устройства. Например може да използвате “За нас” вместо “Научете повече за нашата компания”.
Най-добрият избор за мобилно меню е разбира се т.нар. хамбургер меню, тъй като то ще заема най-малко място. Хората са свикнали да го използват, затова по-дълги линкове трябва да се показват само ако посетител на сайта отвори менюто, а не по подразбиране.
10. Добавете информация за връзка, подходяща за мобилни устройства
В случай, че посетител на сайта иска да се свърже с Вас, трябва да го улесните максимално. Какъвто и начин за връзка да добавите, той трябва да се използва лесно на мобилно устройство.
- Телефон. Да се маркира и копира телефонен номер на мобилно устройство не е много удобно. За да направите номера да може да се набере при докосване (т.нар. Click-to-call), използвайте следния HTML код:
<a href="tel:+1.123456789">+1.123456789</a>Резултатът ще е:
+1.123456789По този начин посетителите на сайта ще могат да Ви се обаждат с едно докосване, без да трябва да се опитват да копират или запомнят номера.
Ако предпочитате SMS вместо гласово обаждане, използвайте:
<a href="smsto:+1.123456789?body=Този+текст+ще+бъде+изпратен">Изпрати SMS</a>Резултатът ще е:
Изпрати SMS- Имейл адрес. Уверете се, че имейл адресът на сайта Ви може да се кликне, за да не се налага посетителите да го маркират и копират ръчно. Както с телефонния номер, за много хора подобно действие може да бъде трудно. Използвайте т.нар. Mailto URI:
<a href="mailto:[email protected]">Текст на линка</a>Резултат:
Текст на линкаЗа да улесните посетителите, може да попълните предварително някои полета:
<a href="mailto:[email protected]?subject=Заглавие%20на%20съобщението&body= Заглавие%20на%20съобщението">Текст на линка</a>- Формуляр за контакт. Изисквайте възможно най-малко информация, която трябва да бъде въведена - попълнете предварително заглавието и добавете падащо меню с няколко основни опции. Попълването на формуляр за контакт на мобилно устройство може да бъде дразнещо и да отнеме доста време, ако клиентите трябва да въвеждат прекалено много текст.
Няколко полезни инструмента
Има различни инструменти, които можете да използвате, за да оптимизирате сайта си и да го направите подходящ за разглеждане на мобилни устройства. Някои от тях ще Ви покажат дали сайтът Ви вече е адаптивен, а ако не е - ще Ви предложат стъпки, които можете да предприемете, за да го оправите. Други могат да Ви помогнат със самия процес на оптимизация.
Един от най-популярните инструменти е Mobile-Friendly Test на Google. Трябва единствено да въведете уеб адреса на сайта, който искате да проверите и ще видите кои части от него се нуждаят от подобрение. Ще видите и как изглежда сайтът на мобилно устройство.
Ако искате да видите как ще изглежда сайтът на различни устройства, може да изпробвате браузъра Blisk, който е насочен към разработчици. Той е базиран на проекта Chromium подобно на други популярни браузъри като Google Chrome, Opera и Microsoft Edge. Това, което го отличава, е, че той идва с набор от вградени шаблони на устройства - смартфони, таблети и настолни компютри с различни операционни системи и резолюция на екрана. Това ще Ви позволи да прегледате сайта на няколко различни устройства едновременно. Така ще спестите време и ще се уверите, че сайтът Ви е съвместим с устройства от различни производители.
TinyPNG и TinyJPG са онлайн инструменти за компресиране на изображения, които могат да намалят размера на дадено изображение няколко пъти. Те използват техника за компресиране, чрез която избирателно се премахват някои от цветовете в изображенията, като по този начин се спестяват ценни байтове. Няма да забележите разлика между оригиналното изображение и компресираното копие, особено на мобилно устройство. Компанията, създала тези онлайн инструменти, предлага и разширения за WordPress и Magento. Така изображенията, които качвате на сайта си, ще бъдат оптимизирани автоматично. По този начин сайтът Ви ще се забърза, а Вие ще спестите време.
В заключение
Мобилният трафик расте и хората вече толкова са свикнали с мобилните сайтове, че най-вероятно ще затворят даден сайт, ако той не е оптимизиран за мобилно устройство. Независимо дали ще поръчат нещо онлайн или ще прочетат някаква информация, най-вероятно ще използват таблет или телефон за това. Ето защо е важно сайтът Ви да предлага добро потребителско изживяване (user experience). Адаптивен сайт ще излиза и на по-предни позиции в резултатите на търсачките.
Мобилните версии на уеб браузърите са различни от десктоп версиите. Те използват по-нестабилна интернет връзка и имат на разположение по-ограничени системни ресурси. Поради тази причина стандартният процес на оптимизация на даден сайт може да не е достатъчен, затова може да се наложи да положите допълнителни усилия, за да направите сайта си подходящ за мобилни устройства. Надяваме се, че съветите ни ще Ви помогнат в това начинание и ще доведат повече потенциални клиенти на сайта Ви.
