Време за четене 6 минути

Защо е важно да тестваме уебсайтовете за отзивчивост? Според Yandex.Metrica броят на хората, използващи мобилни устройства в Русия, наближава 50% и непрекъснато расте.

Относно търсачкистремят се да направят мобилното издаване по-удобно за потребителите. През февруари 2015 г. Google заявява, че наличието на адаптивна или мобилна версия има положителен ефект върху класирането. Точно една година по-късно, през февруари 2016 г., Yandex обявява същото.

Какви качества трябва да притежава един адаптивен уебсайт?

• Без хоризонтално превъртане.
• Мета тагът на прозореца за изглед е правилен.
• Интерактивните елементи (линкове, бутони, форми и т.н.) не са твърде близо един до друг.
• Липса на Flash елементи, Silverlight добавки.
• Удобна навигация през секции.
• Съдържанието (текст и снимки) се адаптира към размера на екрана и се чете без увеличение.

Услуги за онлайн проверка на адаптивността на сайта

1. Удобен за мобилни устройства на Google - https://search.google.com/test/mobile-friendly

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

Предимства

• Официална услуга на Google.
• Показва конкретни грешки.
• Възможност за определяне на наличието на мобилна версия.

недостатъци

• Не можете да видите как изглежда сайтът на различни размери на екрана.
• Показва само първия екран, не можете да взаимодействате със сайта.

1. Удобен за мобилни устройства Yandex.Webmaster - https://webmaster.yandex.ru/site/tools/mobile-friendly/

За разлика от инструмента на Google, можете да проверявате само собствените си ресурси, за които сте потвърдили правата в Yandex.Webmaster. Показва общата оценка и показва как изглежда сайта на смартфон.

Предимства

• Официална услуга Yandex.
• Показва специфични проблеми при оптимизацията.
• Разбира дали сайтът има мобилна версия.

недостатъци

• Можете да проверявате само вашите сайтове.
• Няма как да видите как изглежда сайта на различните екрани

1. Quirktools- http://quirktools.com/screenfly/

Удобна и функционална услуга, има възможност да видите как ще изглежда сайта различни устройстваот смартфони до телевизори.

Предимства

• Можете да изберете от готов списък с устройства или да зададете своя собствена резолюция
• Можете да взаимодействате със сайта

недостатъци

• Не може да се открие мобилна версия
• Няма списък с грешки

1. Iloveadaptive- http://iloveadaptive.com/

Услуга, с която можете да проверите адаптивността за популярни мобилни устройства и операционни системи.

Предимства

• Възможно е да видите как изглежда сайтът по различен начин операционна система(IOS и Android)
• Той сам разбира дали има мобилна версия
• Разширение за Google Chrome

недостатъци

• Не можете сами да зададете размера на екрана, а само изберете от готов списък
• Няма списък с грешки
• Винаги се изтегля автоматично мобилна версия, без възможност да видите как изглежда настолната версия при различни резолюции

1. http://adaptivator.ru/

Предимства

• Дава обща оценка на качеството на оптимизацията, дава съвети за коригиране на грешки.
• „Не вижда“ мобилната версия.

недостатъци

• „Не вижда“ мобилната версия.
• Няма начин да зададете размера на екрана си.

Заключение

Ако имате достъп до услуги за уеб администратори (Yandex.Webmaster или Google Search Console), най-добре е да тествате за адаптивност с тяхна помощ. Те отразяват най-подходящите изисквания на търсачката за вашия сайт.

Ако това не е възможно, тогава можете да използвате http://iloveadaptive.com/ заедно с http://adaptivator.ru/, тъй като те се допълват взаимно по отношение на функционалността.

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

Използване

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

Въз основа на резултатите от проверката ще видите как изглежда страницата на смартфон и ще разберете какви проблеми могат да възникнат при разглеждането й. Най-често това са малки шрифтове (трудни за четене на малък екран) и Flash елементи (не се поддържат от повечето мобилни устройства).

Стойността на мета маркера на Viewport не е зададена

Кодът на страницата не указва свойството viewport, което казва на браузъра как правилно да преоразмерява елементите на страницата, за да отговарят на размера на екрана на устройството. За да накарате вашия сайт да се показва правилно на различни размери на екрана, коригирайте прозореца за изглед, като използвате мета тага за прозорец за изглед. Подробности за това са предоставени в раздела Основи на адаптивния уеб дизайн на нашето ръководство.

Мета тагът на прозореца за изглед трябва да има стойност за ширина на устройството

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

Съдържание, по-широко от екрана

Този отчет идентифицира страници, където трябва да превъртите хоризонтално, за да видите текст и изображения. Този проблем възниква, когато CSS размерите са зададени на абсолютни стойности или когато се използват изображения, които са предназначени за конкретна ширина на прозореца на браузъра. Уверете се, че стойностите на ширината и позицията са css елементиса относителни, а изображенията са мащабирани. Подробна информация за това е предоставена в раздела Размери на съдържанието на Viewport на нашето ръководство.

Твърде малък шрифт

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

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

Отзивчив инструмент за тестване на уебсайтове от Adobe. За да го използвате, трябва да го инсталирате на вашия компютър.
Програмата ви позволява да синхронизирате устройствата си чрез WIFI и да преглеждате сайта така, както ще се показва на вашето устройство. На този моментподдържани устройства със следните операционни системи: iOS, Android, Kindle Fire.

„Проект мениджър на екипа на Business Motor, уебмастър, копирайтър.
Мобилната адаптация е важен етап от работата със сайта. С въвеждането на фактора за мобилно класиране, onboarding стана още по-важен. Казваме ви как да проведете основно тестване за мобилност на сайта»

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

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

Значението на адаптирането на уебсайтовете към нуждите на мобилните потребители нараства и ще продължи да расте в бъдеще. Мобилната адаптация ще бъде отразена както в реализациите на посетителите, така и в класирането на страниците в Резултати от търсенето. Но как да разберете дали вашият проект отговаря на тези изисквания? Как да определите дали един сайт е удобен за мобилни устройства във всеки детайл? Ще говорим за това в днешния ни преглед.

Удобен ли е сайтът за мобилни устройства?

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

• на смартфон с вертикална ориентация на екрана (включително на тесни екрани с ширина около 300 пиксела);
• на смартфон с хоризонтална ориентацияекран (от 480 пиксела широк);
• на таблети с вертикална и хоризонтална ориентация на екрана (от 768 пиксела ширина).

Съвсем естествено е да пробвате даден сайт различни устройстване винаги е неудобно. Макар и само защото под ръка може да няма всички необходими джаджи за това. Можете да разрешите този проблем с помощта на различни емулатори на мобилни екрани. Не е необходимо обаче да се свързвате с услуга на трета страна: подобен емулатор е предварително инсталиран в Google Chrome. За да го използвате, просто отворете интересния сайт, натиснете F12 (извикайте конзолата за програмисти) и щракнете върху иконата с изображение на мобилен телефон:

Изключително важно е да се вземат предвид характеристиките на мобилните браузъри, тъй като те също могат да имат свои собствени характеристики. При тестване е важно да видите сайта на:

• предварително инсталиран браузър на Android OS;
• мобилен Google Chrome;
• "бързи" браузъри - например Opera Mini или UC Browser;
• Safari (например на iPhone).

Как търсачките виждат вашия сайт?

Първо автоматична проверка, през който си струва да преминете, ако се интересувате от проблема с адаптивността на вашия сайт, е тест за мобилност от google. Този инструмент е доста прост и дава недвусмислена присъда относно оптимизацията на страницата за мобилни устройства. И ако отговорът е отрицателен, почти сигурно е, че сайтът се счита за неудобен за малки екрани и на ниво алгоритми на Google – с всички произтичащи от това последствия.

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

Моля, обърнете внимание: екранна снимка на сайта на мобилен екранв резултатите от сканирането може да не съвпадат с начина, по който го виждате на вашия смартфон. Най-често това се дължи на факта, че само файлове, индексирани от търсачката, участват в теста за мобилност, а стиловите файлове (css) и скриптовете (js) често са затворени за индексиране на ниво robots.txt. Между другото, в съответствие с последните препоръки на Google, те трябва да бъдат видими за търсачките.

Оптимизация на уебсайтове за мобилни устройства в Google и Yandex webmaster office

Важно е да се отбележи, че информация за това доколко сайтът отговаря на представите на търсачките за удобството на показване на мобилни устройства може да бъде получена в офисите на уеб администраторите - Google Search Consoleи Yandex.Webmaster (засега само в бета версията на новия акаунт).

Резултати от Google Search Console текуща проверкастраниците са достъпни тук: Трафик от търсене => Видимост на мобилни устройства. Тази страница дублира информацията, която можем да получим с помощта на теста за мобилност, но се дава за всички индексирани страници на сайта, тъй като те се обхождат от роботи на Google:

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

P.S.

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

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

заключения

Лесното разглеждане на сайт на мобилни устройства играе все по-важна роля както в преобразуването, така и в преобразуването. класиране при търсенестраници.

Първата стъпка към оценката на адаптивността на сайта е тестване на различни екрани и в различни мобилни браузъри.

За да разберете как търсачките оценяват удобството на показване на сайт на мобилни устройства, ще помогне тестът за мобилност на Google от Google, както и съответната функционалност в офисите на уеб администратора (Google Search Console и нов офисуеб администратор в Yandex).

2015-09-11 8204 4 Денис Абдулин

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

Споделяме с вас списък с онлайн услуги проверка на отзивчивостта на уебсайта. За разлика от други блогове, ние предлагаме само най-добрите услуги.

Отбелязвам, че в официалния магазин за шаблони uCoz всички теми са отзивчиви, защото. това е едно от основните условия за публикуване на шаблон за продажба.

Screenfly - проверка на адаптивността на сайта с избор на устройство

Screenfly е класиран на първо място, защото има списък с популярни размери на екрана мобилни телефони, смартфони, лаптопи и настолни компютри. Разбира се, можете да зададете свои собствени размери и да видите, също така е възможно да видите сайта през прокси сървър, да включите и изключите превъртането.

Mattkersley - всички размери на една страница

Проектът е добър с това, че въвеждате линк към вашия сайт и той го зарежда във всички рамки, които са на страницата. Можете веднага да тествате сайта на 5 размера. Има 2 режима: просто тестване на ширината или показване на имената на устройствата и тяхната височина.

Responsive.is - Тест за отзивчивост на множество устройства

Добра и удобна услуга, но можете да проверите сайта само на 5 устройства. В сравнение с предишни услуги това е много малко. За тези потребители, които се губят във всички тези размери, те дори не са изброени тук, показват се само икони на устройства.

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

Има и други услуги, включително на руски. Първоначално искахме да донесем точно тях, но те просто копираха сайтовете, изброени по-горе, съществуващият текст беше просто преведен, просто вместо „Телефон“, например, ще видите „Телефон“.