Здравейте приятели,

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

Но сега е време да разгледаме по-подробно изискванията за мобилен сайт и кога той може да бъде считан за mobile-friendly.

Преди да започнем, нека да обясня смисъла на всичко това. Ако не желаете да четете тези разяснения, то кликнете тук, за да отидете директно на изискванията.

И така… От 21 април 2015 Google въведе въпросните изисквания, както и наказанията за всички сайтове, които не отговарят на тях. Накратко – ако вашият уеб проект не може да бъде разгледан коректно на един съвременен мобилен телефон, таблет или друго устройство, то той е изправен пред големия риск да бъде понижен в мобилното търсене.

Това означава, че дори и да сте изградили адски добри външни линкове от релевантни и авторитетни сайтове и имате убийствено добро и 100% уникално съдържание, то вероятността да кажете „сбогом“ на началната страница с резултати по дадена ключова дума от мобилно търсене е сравнително голяма. Няма да изчезнете, но няма и да сте на челни позиции.

И така към днешна дата 09.01.2016 (впрочем това е първият ми пост за Новата година, така че нека да използвам този момент, за да пожелая за много години) въпросният „страшен съд“ за всички сайтове, които не са мобилни не се случи по начина, по който се очакваше. Тоест дори и корпоративните портали, които изобщо не са съвместими с което и да е мобилно устройство все още са си на челна позиция в резултатите от мобилно търсене. Някои сайтове пострадаха, но не и в размерите, в които следваше да стане това.

Дали това трябва да ви успокоява? Не, не и пак не!

Сега сигурно ще попитате – „Защо? Нали Google не е наказал все още тези сайтове?“ И отговорът ми ще бъде, че при Google нищо никога не се знае на 100%. Днес нещата са такива, но утре може нещо да се промени.

Сега си представете следната ситуация – вашият сайт е перфектно оптимизиран за десктоп браузване. Но изобщо не е пригоден за един обикновен мобилен телефон.

Какво ще се случи, когато го посетите чрез мобилния браузър?

1. Ще го видите автоматично напаснат по дължината и ширината на устройството, но всичко ще е много дребно и ще се наложи да увеличите;
2. Това ще ви позволи да видите малко по-добре текущата част от текущата страница, но след това ще се наложи да скролирате адски много, докато стигнете до желаната дестинация;
3. Дори и увеличен не всички бутони и форми на десктоп сайта ще са удобни за употреба от мобилния телефон и това ще предизвика допълнителни усилия от страна на посетителя;
4. Десктоп сайтовете са предназначени за десктоп устройства (PC и лаптоп). Това означава, че при разглеждане от мобилен телефон ще се заредят същия брой картинки, javascript и друга мултимедия. По всяка вероятност и размера им ще е същия, а това ще предизвика следното:
   1. Увеличение на заеманата памет в браузър кеша на мобилния телефон;
   2. Много бавно зареждане;
   3. Загуба на излишен трафик – много важно, особено ако говорим за ограничен мобилен интернет;
   4. Натоварване на процесора на телефона (особено, ако е по-обикновен), което ще доведе и до по-висока консумация на ток от батерията му;

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

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

Какви са самите изисквания за мобилен сайт (или mobile-friendly сайт)?

1. Сайтът трябва да може да се напасне спрямо ширината и дължината на мобилния телефон, таблет или друго мобилно устройство и то по такъв начин, че все едно съдържанието е писано точно за тези размери. Това се постига чрез така наречения responsive мобилен дизайн;
2. Шрифтовете трябва да са подбрани коректно и да са настроени в дизайна така, че да се увеличават/намаляват и напасват спрямо размера на устройството и накъде то е завъртяно – тоест дали се разглежда като page или като landscape. По-конкретно препоръките за шрифтовете са:
   1. Използвайте базов размер на шрифта от 16 CSS пиксела. Регулирайте размера, колкото е необходимо на базата на свойствата на използвания шрифт;
   2. Използвайте релативни размери спрямо базата, за да определите типографската скала;
   3. Текстът трябва да притежава вертикално разстояние между отделните символи и те следва да бъдат коригирани за всеки шрифт. Генералната препоръка е да използвате височината за всеки ред по подразбиране на браузърите, която е 1.2em;
   4. Ограничете броя на шрифтовете, които използвате, както и типографската скала. Твърде много шрифтове и размери за тях могат да доведат до разхвърляни и прекално комплексни оформления на страниците на вашия сайт;
3. Картинките трябва да са оптимизирани и с минимален размер, както и с responsive ширина. Това най-базово означава в html кода за width да се напише 100%, но понякога се изискват и допълнителни параметри;
4. Съвременните мобилни телефони и таблети използват тъч скрийн технологията, което означава че всеки един елемент на вашия мобилен сайт, който при декстоп ще бъде кликнат, тук ще бъде тъчнат (натиснат) чрез пръста на потребителя. Ако тези елементи са прекалено близко един до друг, вие ще създадете затруднения при браузването и поради тази причина те трябва да са на подходящо разстояние един от друг. Тоест трябва да бъдат напаснати отново спрямо размерите на мобилното устройство;
5. Скорост! Един мобилен сайт трябва да зарежда бързо и да хаби възможно по-малко мобилен трафик и място в паметта на мобилното устройство;
6. Избягвайте попъп прозорци, които заемат по-голямата част от екрана! Страници с такива прозорци ще бъдат считани за „non mobile-friendly“.

Какво следва сега?

Свързвате се с разработчик, който е наясно с тези изисквания и му възлагате задачата да създаде responsive дизайн за вашия сайт. Той може и да създаде и специална мобилна тема, която да се зарежда само при наличие на мобилно устройство. Освен това се свързвате и с оптимизатор му възлагате задачата да създаде списък с всички потенциални проблеми, които разработчика може да реши. Ако има как добавете и специалист по UX (User Experience). Той следва да работи заедно с оптимизатора, за да изградят заедно изискванията за разработчика. Последният следва да ги получи и изпълни.

Това е приятели! Надявам се съм бил полезен! Ако имате въпроси, формата за коментари е на ваше разположение, както и страницата за контакти на Optibg.

Също така можете да се запознаете и с тази чудесна инфографика, която обяснява в детайли изискванията за мобилни сайтове (благодарение на mysiteauditor.com):

До нови срещи!