Responsinator – przetestuj responsywność swojej witryny
W dobie technologii, komputery stacjonarne i laptopy nie są już jedynymi urządzeniami pozwalającymi łączyć się z Internetem. Obecnie możesz uzyskać dostęp do sieci za pośrednictwem telefonu komórkowego lub innego urządzenia umożliwiającego połączenie internetowe.
Smartfony i tablety szczególnie wpłynęły na zmianę podejścia do projektowania stron i ich odbioru przez użytkownika. Teraz oprócz tego, że każda platforma powinna być przyjazna dla użytkownika, to musi być jeszcze przyjazna dla urządzenia. Przed rozpowszechnieniem się urządzeń mobilnych z zaawansowanymi możliwościami przeglądania stron internetowych, projektanci stron internetowych mieli tylko jedno podstawowe wyzwanie, którym było zachowanie tego samego wyglądu i odbioru ich stron internetowych na różnych komputerowych przeglądarkach.
Jednak korzystanie ze stron za pomocą smartfonów i tabletów nie jest takie samo, jak to, które znamy z monitorów naszych komputerów. Czynniki takie jak: dotyk zamiast klikania myszką, rozmiar ekranu i jego rozdzielczość, wsparcie dla technologii, animacje, zoptymalizowanie znaczników i wiele innych, stały się kluczowe przy tworzeniu stron internetowych. Dlatego stało się koniecznością, by Twoja strona posiadała dostosowujący się design do używanego przez odwiedzających urządzenia.
Jak sama nazwa wskazuje, Responsinator jest odpowiedzią na ten nowy problem związany z widokiem strony na różnych urządzeniach. Został specjalnie zaprojektowany dla twórców stron internetowych, by mogli zorientować się w podstawach designu i przełamać bariery wyglądu i jego odbioru na różnych urządzeniach, z różnym interfejsem.
Responsinator pomaga projektantom szybko uzyskać informacje, jak ich strona wygląda na najbardziej popularnych urządzeniach. Nie pozwala on precyzyjnie odtworzyć wyglądu strony na różnym sprzęcie, ale do dokładnego testowania zawsze możesz skorzystać z rzeczywistych urządzeń.
Przed zrozumieniem unikalnych zdolności tej aplikacji, powiedzmy sobie, czym tak właściwie jest design responsywny (RWD). Jest to takie zaprojektowanie witryny, które umożliwi dostosowanie jej do środowiska pracy użytkownika (smartfon, tablet, laptop itp.). Używa się do tego @media queries, a także innych inteligentnych technologii. Właśnie w tym miejscu Responsinator może okazać się przydatny. Jest to proste i łatwe w obsłudze narzędzie internetowe, które może pomóc w optymalizacji dostosowywania się designu do urządzeń i wizualizacji, jak będzie wyglądała na nich Twoja strona. Narzędzie jest świetne do testowania breakpointów Twoich reguł @media i sprawdzenia, jak zmiana rozmiaru czcionki, obrazów lub płynnego layoutu będzie wyglądać na różnych urządzeniach, zarówno przy wyświetlaniu w pionie, jak i w poziomie.
Typ urządzenia
Na responsinator.com znajduje się pole, w którym można wprowadzić adres swojej strony i po prostu kliknąć przycisk “Go”. Aplikacja w mgnieniu oka zapewni Ci szerszy obraz tego, jak Twoja strona powinna wyglądać na:
- iPhone 5 w pionie – szerokość: 320px,
- iPhone 5 w poziomie – szerokość: 568px,
- iPhone 6 w pionie – szerokość: 375px,
- iPhone 6 w poziomie – szerokość: 667px,
- iPhone 6 Plus w pionie – szerokość: 414px,
- iPhone 6 Plus w poziomie – szerokość: 736px,
- Android w pionie – szerokość: 240px,
- Android w poziomie – szerokość: 320px,
- Android (Nexus 4) w pionie – szerokość: 384px,
- Android (Nexus 4) w poziomie – szerokość: 600px,
- iPad w pionie – szerokość: 768px,
- iPad w poziomie – Szerokość: 1024px.
Lista obejmuje dużą część urządzeń, które są obecnie powszechnie używane.
Ciekawe funkcjonalności
Od kiedy strona jest bardziej przyjazna technologicznie, otrzymaliśmy kilka dodatkowych możliwości, takich jak np. „Handy bookmarklet”. Możesz łatwo przeciągnąć Responsinator do paska zakładek przeglądarki. Potem wystarczy kliknąć na nim, gdy jesteś na stronie, którą właśnie chcesz przetestować. Proste, łatwe i nie wymaga od Ciebie otwierania strony aplikacji za każdym razem od nowa.
Jest jeszcze jedna ciekawa funkcjonalność – możliwość ukrywania pasków pasek przewijania przeglądarki internetowej.
Ostatnią, ale niemniej istotną funkcjonalność można dostrzec w trybie stałej szerokości. Jeśli masz nieresponsywną, stałą szerokość strony i chcesz zobaczyć jak ona wygląda na innych urządzeniach, to wprowadź stałą szerokość do adresu URL przeglądarki w postaci width=x, gdzie „x” jest szerokością Twojej strony. Masz podgląd jak to będzie wyglądało i niemal natychmiast będziesz mógł wyłapać potencjalne błędy.
Istnieją jednak małe usterki w Responsinatorze. Na przykład nie zadziała, jeśli witryna ma agenta wykrywającego urządzenie użytkownika. Jeśli naprawdę chcesz naśladować wykrywanie urządzeń, można dodać „append_device=1” na końcu adresu przeglądarki. Responsinator będzie dołączać „responsinator_device=[type]”do Twojego adresu URL, gdzie „[type]” to telefon lub tablet. Musisz sprawdzić, jaki masz „responsinator_device” w kodzie Twojego serwera.
Zrób swój własny Responsinator
Responsinator daje pełną możliwość dostosowania go do Twoich wymagań. Możesz wprowadzić Twoją nazwę, wpisać nazwę Twojej strony internetowej i mieć nagłówek wyglądający dokładnie tak, jak chcesz. Wszystko to po zalogowaniu.
Abonament jest minimalny – wynosi $6 miesięcznie lub $60 rocznie. Wybierasz oczywiście ofertę zgodną z Twoimi potrzebami. Formalności są bardzo uproszczone. Musisz podać nazwę subdomeny, swój e-mail oraz hasło, by stworzyć swój własny Responsinator.
Doadtkowo, jeśli Responsinator Ci się spodobał i okazał się pomocny, możesz jego twórcom postawić piwo. 🙂
Łatwość użycia
Podsumowując, jest to wyjątkowo łatwe w użyciu narzędzie internetowe. Jest tak dlatego, że masz możliwość zobaczenia własnej witryny w wydaniach na wiele różnych typów urządzeń w jednym miejscu, na pojedynczej stronie internetowej. Możesz dosłownie zobaczyć wizualizację swojej witryny na wszystkich urządzeniach dzięki jednemu przewinięciu rolki myszki.
Interfejs Responsinatora jest bardzo prosty i praktycznie nie można go już w żaden sposób usprawnić. Nawet jeśli nie jesteś z technologią za pan brat, to obsługa tej aplikacji nadal będzie dla Ciebie bułką z masłem. Innymi słowy, niedobrze jest nie skorzystać z oczywistych zalet tego narzędzia.
Sprawdź responsywność swojej strony z @responsinator responsinator.com/ #RWD via @MonitoringStron
Gdy Twoja firma posiada zarówno wersję mobilną, jak i stacjonarną strony internetowej z wieloma podstronami, w obu wypadkach będą różne adresy URL i różny kod HTML. Znacząco na swój sposób skomplikuje to Twoją pracę.
Oszczędzaj swój czas i testuj swoje strony z Responsinator.com.
