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

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

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

Добрата новина е, че съществуват различни решения, които могат да ви позволят да проверите изгледа на вашия сайт, без да се налага да закупувате допълнителни устройства. Това решение се казва Screenfly.

Най-главната причина да поискате да проведете тестове на вашия дизайн е свързана с User Experience (UX). Ако посетителите не могат да се ориентират в навигацията му, то вие ще бъдете изложени на риск от прекомерно висок bounce rate (степен на отпадане), което е лош сигнал за SEO. От друга страна, ако те не могат да използват сайта ви, то тогава най-вероятно няма да поискат да се върнат повече на него, което е още по-лошо.

Чрез Screenfly ще можете да се убедите, че всичко е коректно за различните устройства. Това важи най-вече за responsive дизайнът, защото както знаете той се нагажда спрямо разделителната способност на екрана. Всъщност проблемите при UX могат да бъдат наблюдавани най-вече при некоректно разположение на навигацията при различните устройства от една страна и от друга – при некоректното ѝ първоначално създаване.

Как да използваме Screenfly?

За начало посетете сайта на този онлайн инструмент. Той се намира на този адрес (кликнете тук).

На началната страница на Screenfly ще видите поле, в което трябва да въведете вашия URL адрес. Решението, за съжаление, позволява само тестове на сайтове, които са на production сървър – тоест, които са live в Интернет. Въпреки това, вие винаги можете да нагласите сайта в режим Coming soon или Maintenance mode и да направите необходимите промени при нужда от тях.

Нека да проверим как изглежда Optibg.com под различните устройства:

На изображението по-долу виждате моя блог за 10 инчов нетбук компютър при резолюция от 1024×600 пиксела.

Ако кликнете на маркираната в синьо икона с монитора ще можете да изберете друг изглед.

Нека да се спрем над 15 инчов лаптоп (ноутбук) с резолюция от 1366×768 пиксела:

Разбира се винаги можете да изберете и други резолюции (примерно за настолен компютър).

Нека сега да разгледаме останалите бутони в тулбара на Screenfly:

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

Третият бутон е свързан с избор на изглед за мобилен телефон / смартфон.

Четвъртият бутон на Screenfly ви позволява да изберете резолюция за телевизор.

Както знаете все повече навлизат умните телевизори (Smart TV’s), а те могат да визуализират уеб сайтове. Отделно всеки един съвременен „не-умен“ телевизор при връзка с телефон, таблет, лаптоп или друго устройство чрез HDMI кабел (или някаква алтернатива) може отново да визуализира сайтове. Ето защо е важно да сте убедени, че вашият дизайн ще пасва и на високите резолюции, които тези телевизори предлагат.

Петият бутон позволява избор на конкретна резолюция.

Останалите бутони предоставят следните функции (разглеждам ги по техния ред):

• обновяване на визуализацията (refresh);
• завъртане на екрана – полезно при проверката на мобилния изглед на сайта ви за телефони и таблети;
• позволяване на скролирането – с тази опция ще можете да разглеждате пълноценно вашия сайт в режима на тестова визуализация в Screenfly;
• използване на прокси сървър;
• споделяне на визуализацията чрез custom линк;

В края на тулбара на Screenfly виждате текущата резолюция за устройството, от което извършвате тестовете.

И на практика това е всичко, с което Screenfly може да ви помогне, приятели!

Надявам се този онлайн иструмент да е от полза при тестовете на новия дизайн на вашия сайт.

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