Tworzenie stron RWD (Responsive Web Design) jest nieco bardziej problematyczny, gdyż prócz tego że trzeba zaprojektować kilka różnych interfejsów w zależności od rozdzielczości ekranu urządzenia, to niezbędne będą dedykowane narzędzie ułatwiające życie. Doskonałym przykładem jest bookmarklet (użytkowa zakładka w przeglądarce) o nazwie Viewport Resizer. Jak ono działa i właściwie do czego jest przydatne?

Otóż po dodaniu do przeglądarki spreparowanej zakładki (bookmarklet) i jej wywołaniu na wybranej stronie poprzez jej kliknięcie, wywołany zostanie dodatkowy nagłówek, który prezentuje się następująco:

bmark

W dodatkowym pasku pojawią się ikony, dzięki którym będziecie mogli podejrzeć jak prezentuje się strona na innych rozdzielczościach. Prócz zadanych wielkości możecie sami przesuwać krawędzie uruchomionej strony, klikając na wybraną krawędź. Jeśli natomiast potrzebujecie informacji o konkretnej rozdzielczości i to jak strona będzie się na niej prezentować wystarczy ją podać. Ciekawostką jest także możliwość animacji zmiany rozdzielczości, cóż to oznacza? Viewport Resizer dynamnicznie przełączy stronę na wszystkich najpopularniejszych rozdzielczościach, by deweloper mógł znaleźć niedoskonałości.

Oczywiście jak ktoś się uprze, może ręcznie regulować wielkość okna przeglądarki – niemniej z doświadczenia wiem, że jest to bardzo uciążliwe. Jest także sporo pluginów do przeglądarek robiących podobne cuda, niemniej Viewport Resizer ma nad nimi przewagą, gdyż nie manipuluje wielkością okna przeglądarki i co najważniejsze będzie działać we wszystkich najnowszych przeglądarkach internetowych. Zdecydowanie polecam, narzędzie to wylądowało na liście moich użytków – a i Wam polecam.

 


Posłuchaj nas!