Katalog Znaków Pocztowych w technice Responsive Web Design

2016.11.12. 19:40

Od dziś strona Katalog Znaków Pocztowych jest dostępna w nieco zmienionej szacie graficznej.

Projekt strony na przestrzeni lat był już zmieniany kilka razy, tym razem jednak zmiany obejmują nie tylko wygląd - nowa wersja serwisu została opracowana zgodnie z techniką RWD - Responsive Web Design, dzięki czemu układ strony dostosowuje się do wielkości ekranu urządzenia lub okna programu, w którym przeglądamy serwis.

Dla największych (a ściślej biorąc - najszerszych) ekranów strona jest widoczna z menu po prawej stronie i z dużym zielonym logo w lewym górnym rogu. Dla nieco mniejszych wielkości, odpowiadających niższym rozdzielczościom ekranu komputera, główny blok strony ulega zwężeniu, a poszczególne elementy się zacieśniają. Przy dalszym zmniejszaniu wielkości okna do wielkości odpowiadających ekranom tabletów, brakuje już miejsca na wszystkie elementy - wówczas logo strony przenosi się w zmniejszonej wersji na ciemnozieloną belkę, a prawe menu przenosi się pod główny blok tekstu i jest wyświetlane w układzie dwóch kolumn. Dla najwęższych ekranów lub okien, odpowiadających wielkością ekranom telefonów komórkowych, cała strona jest wyświetlana w jednej kolumnie, a menu strony jest "zwinięte" i przywoływane przyciskiem z trzema kreskami (tzw. "hamburger menu") w prawym górnym rogu ekranu. Równocześnie wraz ze zmniejszaniem się szerokości ekranu nie mieszczące się obok siebie ilustracje ustawiają się jedna pod drugą, zaś obrazki, których szerokość jest bardzo duża (np. ilustracje arkuszy znaczków) zmniejszają się tak, aby mieściły się na ekranie.

Dzięki tym zmianom strona jest zawsze czytelna, a wielkość czcionki jest odpowiednio duża, niezależnie od tego na jakim urządzeniu przeglądamy serwis.

Ze zmianami można zapoznać się na poniższym filmie:

Opisane modyfikacje są ostatnim kawałkiem puzzla zmian technologicznych, które zostały wprowadzone na przestrzeni ostatniego roku. Dla przypomnienia obejmowały one:

zakodowanie strony w standardzie UTF-8, dzięki czemu mogą się na niej pojawiać znaki specjalne oraz teksty w różnych językach, pisane różnymi alfabetami, np. alfabetem greckim, cyrylicą itp.,
przejście na wersję 7 oprogramowania PHP, co zwiększa niezawodność i szybkość działania strony,
wprowadzenie protokołu SSL, dzięki czemu cała transmisja między przeglądarką użytkownika a serwerem jest zabezpieczona poprzez szyfrowanie
i dzisiejsze wprowadzenie techniki RWD, dzięki której strona wyświetla się prawidłowo na różnej wielkości ekranach.

Tradycyjnie będę wdzięczny za zgłaszanie dostrzeżonych nieprawidłowości - poprzez email lub w komentarzach pod tym tekstem. Zachęcam też do przeglądania strony na urządzeniach przenośnych - telefonach i tabletach.

Marek Jedziniak