Screenfly – тест на сайт за различни устройства

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

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

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

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

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

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

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

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

Прочетете още:  Оразмеряване на WordPress thumbnails (миниатюри)

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

Начална страница на Screenfly

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

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

Screenfly нетбук изглед

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

Избор на изглед за тест на сайта чрез Screenfly

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

Screenfly notebook изглед

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

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

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

Screenfly избор на изглед за таблет и e-book четец

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

Избор на изглед за тест на мобилна версия на сайт чрез Screenfly

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

Избор на изглед за телевизор чрез Screenfly

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

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

Прочетете още:  Проверихте ли дали вашият сайт е mobile-friendly?

Избор на конкретна резолюция чрез Screenfly

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

Тулбара на Screenfly

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

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

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

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

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

Публикувайте Вашия коментар:

avatar

Коментирайте чрез Facebook: (Не е видимо, ако политиката за поверителност на блога не е приета)