Мобилизирай се! Кой подход да изберем за мобилния вид на сайта ни

от | окт. 12, 2021 | Блог, Грижа за сайта, Тенденции

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

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

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

 

1. Какъв? Гъвкав.

Едно от първите решения в тази посока и до днес си остава сред най-предпочитаните.

Направо са си за завиждане създателите на сайтове от зората на интернет. Тогава със сигурност е имало доста сериозни трудности, за които днес дори не се сещаме, но и едно доста сериозно улеснение: имаше стандартизирани екрани, не беше толкова трудно нещата да се поместят просто в стандартните съотношения 3:4 или 9:16.

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

Тогава настъпи модата на responsive или адаптивния дизайн, за да остане, по всичко личи, за доста дълго време.

 

Мода и традиции

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

Има специализирани онлайн платформи, които се използват за подобен тип тестове. Работата наистина е доста пипкава.

Тук има и друг интересен детайл. А именно: откъде ще започнете. През последните години все повече се наложи тенденцията, популярна като “mobile first“. При нея първо се подготвя визията на сайта на някои от най-популярните резолюции на телефонни екрани и едва след това се разширява, така че да изглежда добре на таблет, а после – и на големи монитори.

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

 

2. 1+1

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

Това обаче е по-скоро решение от времената, когато екраните на телефоните бяха доста по-малки, с по-ниска резолюция, а и възможностите им като компютърен потенциал бяха доста по-скромни. Да не говорим и за значително по-бавната връзка с мрежата на предишните поколения мобилен интернет.

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

Ето защо постепенно този подход остана в миналото, дори за сметка на по-старото решение, с което започнахме. И на другите два по-нови и интересни варианта, които остана да ви представим.

 

3. Пакет мобилност

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

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

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

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

 

4. С постоянство към прогрес

Вече сме ви говорили немалко за прогресивните уеб апликации – Progressive Web Applications или просто PWA. Този път се спираме на тях в контекста на останалите възможни решения за представянето на сайта ви на мобилни устройства. Тази мода дойде като решение на проблемите, които вече разгледахме, тя е създадена от Google. И дава съвсем нов поглед към темата.

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

Може би няма нужда да се разпростираме в останалите предимства и характеристики на PWA – събрали сме ги доста подробно (и, надяваме се, убедително) тук.

Още един важен детайл. Днес не е проблем дори един WordPress сайт да се превърне в прогресивно приложение (а как е възможно да стане това можете да прочетете тук).

 

Всекиму според екрана

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

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

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

<a href="https://www.zettahost.bg/author/georgik/" target="_self">Георги Караманев</a>

Георги Караманев

Георги е журналист, писател и Front-end програмист – част от екипа на ZETTAHOST.bg. Има повече от 15 години опит в подготвянето на публикации на технологична тематика за Списание 8, в. „24 часа“ и други медии. През 2019 г. и 2021 г. получи наградите в категория „Технологии и иновации“ от конкурса на Dir.bg за чиста журналистика Web Report.
Последвайте ни

Най-нови публикации:

В защита. 5-те най-популярни бекенд езика, с които да започнете

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

SOLID. 5-те божи заповеди за програмиста

Всяка професия си има основите, които после раждат общите теми за всички, които я практикуват. В много от по-старите поприща основите са доста по-размити, дори диаметрално противоположни и обречени на вечни спорове. Не и в програмирането. Тук SOLID, 5-те основни...

ХХЕ: опасност, криеща се в данните

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

Angular и ангелите. Има ли бъдеще популярният фреймуърк?

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

Етимология на интернет термините

В своята песен Rap God световноизвестният рапър Еминем изпява 1560 думи в рамките на 6 минути и 4 секунди (6:04 – продължителността на песента). Това, което е още по-впечатляващо, е, че в един 15-секунден отрязък от песента рапърът успява да изреди 97 думи. Деветдесет и седем думи за 15 секунди…

Личен сайт безплатно!

Регистрирай се безплатно и си направи сайт още днес.

Безплатната хостинг услуга на ZETTAHOST.bg няма скрити такси и изисквания за ползване.

Безплатен хостинг

Pin It on Pinterest

Share This