GoodTime Monty – strona internetowa z animacjami

GoodTime Monty zajmuje się organizacją turystyki w unikalnym stylu Slow Tourism dla najbardziej wymagających i ciekawskich podróżników. Zbudowaliśmy przepiękną i interaktywną stronę internetową, która wyróżnia się niesamowitymi wrażeniami estetycznymi oraz przyjemnością z użytkowania.

Cele współpracy

Głównym celem projektu było nie tylko zachwycenie odwiedzających piękną prezentacją wizualną, uwzgledniającą intuicyjny UX Design, ale także zapewnienie płynności i wydajności działania strony. Klient chciał, aby strona była zbudowana na platformie WordPress, co miało umożliwić łatwe zarządzanie treścią, wypełnić aspekty dbałości związane z procesem SEO oraz ułatwić proces aktualizacji. Zaprojektowany design strony był bardzo złożony i skomplikowany, zawierał wiele unikalnych sekcji oraz wyjątkowych animacji.

Wśród głównych celów klienta do spełnienia były m.in.:

• udane wdrożenie zaawansowanego i unikalnego projektu graficznego z Figmy do WordPress
• wymóg łatwego zarządzania stroną i jej treścią, włącznie z artykułami blogowymi
• osiągnięcie maksymalnej wydajności strony oraz szybkości jej wczytywania
• konieczność działania zaawansowanych animacji w sposób płynny i i bez zakłóceń na wszystkich dostępnych urządzeniach mobile/tablet/desktop
• zadbanie o aspekty optymalizacyjne związane z SEO
• prowadzenie dalszej opieki projektowej oraz technologicznej nad stroną

Problemy i wyzwania

Głównym wyzwaniem wdrożeniowym była liczba oraz złożoność zaawansowanych animacji, przewidzianych na etapie projektowania designu nowej strony. Strona internetowa miała stać się głównym wyznacznikiem ducha marki GoodTime Monty w stylu Slow Tourism, zachęcając klientów już samą swoją interaktywnością i unikalnością do przeżycia czegoś wyjątkowego w ramach oferty turystycznej i do wykonania rezerwacji wycieczek.

Unikalne i złożone animacje na stronie internetowej

Na stronie obecnych jest wiele niestandardowych i całkowicie unikalnych animacji, zaprojektowanych na etapie tworzenia designu. Jednym z kluczowych wyzwań było zaprogramowanie w warstwie front-end wszystkich unikalnych animacji przewidzianych w projekcie, z zachowaniem maksymalnej kompatybilności z różnymi urządzeniami (mobile/tablet/desktop) i przeglądarkami internetowymi (Chrome, Safari, Opera, Edge).

Niestandardowy UI design vs komfortowe edytowanie treści

Kolejnym wyzwaniem, jakie napotkaliśmy, było pogodzenie niestandardowego designu z dużą ilością animacji z komfortowym edytowaniem treści w Gutenbergu (WordPress). Gutenberg, nowy edytor blokowy WordPress, musiał być intuicyjny i łatwy w użyciu dla zespołu klienta, który miał edytować i zarządzać treściami na stronie.

Stworzyliśmy niestandardowe bloki Gutenberga, które umożliwiały łatwe dodawanie i edytowanie skomplikowanych elementów i animacji bez konieczności znajomości kodowania, a następnie przeprowadziliśmy szkolenie klienta, aby upewnić się, że potrafi on w pełni wykorzystać możliwości niestandardowych bloków i samodzielnie zarządzać treściami na stronie.

Iteracje poprawek i feedback klienta

Jednym z większych wyzwań przy realizacji całkowicie unikalnych i złożonych stron internetowych takich jak GoodTime Monty, może być spodziewana duża liczba iteracji poprawek oraz ilość feedbacku od klienta. Złożoność projektu sprawia, że w trakcie trwania prac pojawiają się nowe pomysły i prośby, które wymagają ciągłych dostosowań. Taka sytuacja może łatwo wpłynąć na budżet projektu, wydłużając czas pracy i generując dodatkowe koszty.

Jak rozwiązaliśmy problemy klienta

Budowa zespołu projektowego

Od samego początku wiedzieliśmy, że to umiejętności i doświadczenie programistyczne będą kluczowe do osiągnięcia sukcesu wdrożenia GoodTime Monty. Kompetentni programiści nie tylko dostarczają wysokiej jakości kod, ale także przyczyniają się do efektywnego zarządzania projektem, minimalizując ryzyko i zwiększając szanse na osiągnięcie celów projektu w ustalonym czasie i budżecie.

W ramach prowadzenia projektu uczestniczyły w nim następujący specjaliści:

• 2x WordPress Developer
• Project Manager
• QA Tester

Ze strony całego zespołu konieczne było zwiększone zaangażowanie, zachowanie zmysłu estetycznego i wyczucie animacyjne oraz wysoka kultura pracy i wzajemnego feedbacku.

Wydajny WordPress development

Silnikiem CMS na którym oparliśmy stronę jest WordPress. Główna idea, która nam przyświecała przy planowaniu architektury front-endu oraz back-endu była wygoda, komfortowa i bezproblemowa edycja treści. W tym celu wykorzystaliśmy edytor blokowy Gutenberg, do którego przygotowaliśmy dedykowane bloki zgodnie z dostarczonym designem. Podstawowe założenia techniczne, które towarzyszyły zespołowi wdrożeniowemu to:

• Łatwa edycja: aby osoby bez technicznych umiejętności programistycznych mogły łatwo tworzyć, edytować i zarządzać treściami na stronie,
• Minimalizacja użycia wtyczek – zbyt wiele zainstalowanych wtyczek znacząco spowalnia działanie strony i wpływa negatywnie na performance i ogólną wydajność, stąd w projekcie ograniczyliśmy je do absolutnego minimum.
• Nowoczesny stack technologiczny: zastosowaliśmy nowoczesne środowisko programistyczne do developmentu strony (JavaScript ES6+, PHP 8, WebPack 5).
• Dostosowanie panelu administratora: dzięki ACF PRO mogliśmy w bardzo szerokim stopniu indywidualnie dostosować panel administracyjny, adaptując go do specyficznych potrzeb projektu.

Optymalizacja wydajności WordPress

Dzięki starannej optymalizacji, strona internetowa działa płynnie nawet na słabszych urządzeniach, zapewniając użytkownikom niezakłócone wrażenia podczas korzystania ze strony internetowej. Użyliśmy technologii frontendowych takich jak HTML5, CSS3, JavaScript oraz GSAP aby stworzyć płynne i atrakcyjne animacje.

GSAP pozwala na animowanie praktycznie każdego aspektu strony internetowej, od prostych przejść i przesunięć, po zaawansowane sekwencje animacji. Można animować właściwości CSS, SVG, Canvas, a także właściwości JavaScript. Daje pełną kontrolę nad każdym aspektem animacji, w tym nad czasem, opóźnieniami, prędkością i easings (krzywe ruchu). To pozwala na tworzenie bardzo dokładnych i skomplikowanych animacji. Wszystkie te zabiegi i korzyści wykorzystaliśmy w projekcie.

W celu optymalizacji wydajności wykorzystaliśmy różne techniki, m.in.:

• lazy loading dla obrazków, zdjęć i filmów,
• optymalizacja i autokonwersja obrazów jpg/png do webp,
• minifikacja skryptów i styli,
• ładowanie tylko niezbędnych i potrzebnych zasobów do określonych podstron,
• wydzielenie krytycznego kodu JavaScript zgodnie z techniką Above The Fold,
• włączenie cache i kompresji gzip,
• wykorzystanie Speculative Loading

Wszystko w jednym celu – aby zredukować czas ładowania strony oraz zwiększyć jej wydajność.

Testowanie strony na różnych urządzeniach i przeglądarkach

W ramach fazy Quality Assurance, przeprowadziliśmy szereg rozmaitych testów, aby upewnić się, że interfejs jest intuicyjny i łatwy w obsłudze, a także pozbawiony błędów funkcjonalnych i wizualnych. W tym celu wykonaliśmy kilkupoziomowe testy:

• testy wydajności
• testy responywności
• testy funkcjonalne
• testy wędrówki poznawczej

Faza Quality Assurance jest bardzo ważnym elementem w procesie budowy każdej strony internetowej, aby zapewnić wysoką jakość i komfort korzystania ze strony przez użytkowników. Dzięki szczegółowym testom wydajności, responsywności, funkcjonalności oraz testom metodą wędrówki poznawczej, strona GoodTime Monty spełnia wszystkie oczekiwania i działa bezbłędnie w każdej przeglądarce internetowej i urządzeniach mobile/tablet/desktop.

Kluczowe aspekty zarządzania projektem

Stały feedback klienta w trakcie trwania prac programistycznych oraz efektywne zarządzanie projektem ze strony Project Managera były kluczowymi elementami, które przyczyniły się do wysokiej jakości końcowego produktu i zadowolenia klienta. Kluczowymi aspektami w kontekście zarządzania projektem było przede wszystkim:

• Regularne spotkania statusowe i cotygodniowe podsumowania wykonania pracy z minionego tygodnia,
• Transparentna komunikacja za pomocą narzędzi takich jak Asana, Slack oraz Google Meet,
• Uwzględnianie feedbacku na każdym etapie projektu, co pozwalało na szybkie reagowanie na zmiany i unikanie większych problemów na późniejszych etapach,
• Budowanie relacji klient-zespół opartej na zaufaniu i współpracy.

Rozwój i utrzymanie strony

Po realizacji projektu weszliśmy z klientem we współpracę w ramach procesu Continious Improvements, czyli ciągłego udoskonalania strony i reagowania na bieżące problemy i konieczne poprawki. Celem jest nie tylko utrzymanie strony na wysokim poziomie, ale także jej rozwój w odpowiedzi na zmieniające się potrzeby użytkowników i rynku.

Usługi Continuous Improvements przynoszą wiele korzyści dla klienta, w tym:

• Zwiększona wydajność i bezpieczeństwo: Regularne aktualizacje i optymalizacje zapewniają, że strona działa szybko i bezpiecznie.
• Zgodność z najnowszymi standardami: Strona jest na bieżąco z najnowszymi technologiami i trendami.
• Proaktywne zarządzanie: Szybka reakcja na potencjalne problemy zanim staną się one poważnymi awariami.
• Lepsze doświadczenie użytkownika: Stałe ulepszanie funkcjonalności i interfejsu użytkownika.

Podsumowanie współpracy

Projekt zakończył się pełnym sukcesem, strona GoodTime Monty została wdrożona zgodnie z harmonogramem i budżetem, spełniając wszystkie wymagania klienta oraz założenia funkcjonalne.

• Udało się zbudować szybką i dobrze działającą stronę internetową opartą o wiele customowych animacji oraz funkcjonalności,
• Zwiększone bezpieczeństwo danych – regularnie dostarczamy aktualizacje zabezpieczeń, a ograniczając liczbę wtyczek do niezbędnego minimum radykalnie ograniczamy ryzyko luk w zabezpieczeniach i podatności na nieprzyjazne ataki.
• Łatwiejsze utrzymanie – używanie nowoczesnego środowiska pracy oraz aktualnych technologii ułatwia utrzymanie strony teraz i w przyszłości.
• Łatwy w zarządzaniu panel administracyjny WordPress, który ułatwił i przyspieszył pracę osób odpowiedzialnych za prowadzenie strony.
• Strona jest SEO-friendly: napisaliśmy poprawnie semantyczny kod z zaimplementowanymi znacznikami Schema oraz skonfigurowanymi tagami <title> czy <description>.

Codeq z pełnym sukcesem dostarczył nam nową stronę internetową zgodnie z harmonogramem, spełniając wszystkie nasze oczekiwania. Ich wiedza techniczna, talenty i zaangażowanie zespołu były kluczowymi elementami ich pracy.

Tom Bonneau Founder @ GoodTime Monty