Nowy Antyweb 2021!

I to wszystko rusza właśnie teraz. Mam nadzieję, że kiedy czytacie te słowa wszystko działa poprawnie, bo choć testowaliśmy serwis na różne sposoby, to wiem z doświadczenia, że czytelnik i tak zawsze znajdzie jakieś błędy.

Zmiany

Layout

Po ponad 5 latach trzeba wreszcie zmienić wygląd serwisu. Nie tylko dlatego, że obecny się zestarzał, ale też dlatego, że kompletnie zmieniło się całe otoczenie. Dziś mobile jest najważniejsze, a strona głowna na desktopie ma być czytelna i po prostu ładna. Osobiście też chciałem powrócić do bardziej klasycznej architektury treści i jej układu na stronie. Chronologia jest czytelniejsza, kiedy teksty mamy jeden pod drugim. Na stronie jest czyściej, wszystko wydaje się bardziej czytelne. Ważne dla mnie też było aby layout podkreślał charakter serwisu. Technologicznie, zadziornie, nowocześnie i czytelnie - taki ma być nowy Antyweb i mam nadzieje, że tak go będziecie odbierać.

Nowe logo, czyli rebranding.

Logo Antyweb po 15 latach online wymagało odświeżenia. Nie lubię jednak drastycznych zmian w tym obszarze i przez to zadanie to nie było wcale takie proste. Owszem pierwsze projekty jakie zobaczyłem były bardzo intrygujące, ja jednak szukałem w nich elementu zadziorności i nie do końca mogłem go znaleźć, aż wreszcie zobaczyłem ten animujący się symbol (symbol przy logu na stronie się animuje, jeśli chwilę się przyjrzycie to zobaczycie tę sekwencję).

I co to ma oznaczać? Z jednej strony jest klasyczna litera A, która za chwilę zmienia się w bardziej zadziorną wersję. I taki właśnie jest Antyweb. Różnorodny w opiniach, czasem profesjonalny, czasem emocjonalny, a czasem prowokujący. I w moim odczuciu to logo świetnie nas reprezentuje. Jest niby klasyczne i podobne do poprzedniego, ale jednocześnie pojawiają się w nim jakieś wcięcia, ale tylko w obrębie słowa Anty, bo to jest coś co nas odróżnia. Obok zmieniający się symbol w moich oczach bardzo dobrze uzupełnia całość i nadaje nowego charakteru całemu logotypowi.

Technologia

Wiele osób gratulowało nam, że potrafimy tak zoptymalizować Wordpressa aby był w stanie utrzymać taki serwis na odpowiednim poziomie i szybkości działania. Przyszedł jednak czas aby powiedzieć “dość” i pożegnać się kompletnie z obecną technologią. Teraz Wordpress to tylko panel administracyjny. Reszta.... o tym możecie przeczytać więcej poniżej.

Czytaj dalej poniżej

Zamrożone ZOO. Przywracanie wymarłych (niemal) gatunków Maciej Gorczyński

Czego dowiedzieliśmy się o UFO z raport wywiadu amerykańskiego? Maciej Gorczyński

Technologii nie zmienia się jednak tylko dlatego, że pojawiła się nowa i lepsza. Technologia to też szybciej działający serwis, bardziej lubiący się z Google i co najważniejsze lepsza interakcja dla czytelników. Dlatego moim głównym celem i KPI dla technologii jest jak szybko działa strona i jaki ruch jesteśmy w stanie przyjąć, bez konieczności dokładania serwerów.

Michał opowiedz co zrobiłeś

Za projekt nowego Antyweb odpowiadała agencja Autentika oraz jej szef Michał Samojlik. Poprosiłem go aby opisał, co tak naprawdę wymyślił i zrobił:

Mam tę przyjemność, że to, jeśli dobrze liczę, czwarta wersja Antyweba, którą mamy okazję projektować w Autentice. Wyzwanie okazało się być tym razem połączone z rebrandingiem marki, co tylko dodało smaku całemu ćwiczeniu. Otrzymaliśmy więc nowy znak, który zdecydowanie podkreśla “charakterność” serwisu na tle beznamiętnej w tej kwestii konkurencji. Nowy Antyweb wymagał projektu, który będzie licował ze stylem nowego logo.

Rebranding nie był jednak jedynym, ani nawet największym powodem decyzji o konieczności przeprojektowania całego serwisu. Dziedzina UX/UI w ciągu ostatnich 5 lat (tak, tyle miała poprzednia wersja) mocno poszła do przodu, pojawiły się nowe rozwiązania, trendy, wzorce, mechanizmy. Był to najwyższy czas na odzwierciedlenie postępu branży w tym jak wygląda i działa Antyweb.

Mobile first

Tak, to branżowy banał, jednak statystyki ruchu większości wydawców są tego jaskrawym dowodem, szczególnie jeśli mówimy o kategorii szeroko rozumianych technologii. Wyszliśmy całkowicie od wersji mobile, traktując desktop jako “samo-się-ułoży”. I tak było. Architektura informacji, layouty poszczególnych ekranów, siatka reklamowa, interakcje były przygotowywane z myślą o smartfonach.

Szukając wyróżnika, zdecydowaliśmy się postawić na duże zdjęcia w tle. Mamy więc otwarcie strony głównej i artykułu w postaci obrazka wypełniającego większość przestrzeni ekranu. Od czasu do czasu spotkacie też artykuły specjalne lub wideo, które mają własne rozwiązania:

Lubiany przez czytelników format felietonu również zachował swój indywidualny charakter i tu z kolei zrezygnowaliśmy zupełnie ze zdjęć.

Jedynka

Strona główna zachowała modułowy charakter i jest wydawana przez redakcję. Zarządzanie całym układem i zawartością od strony CMS daje nieograniczone możliwości dopasowania layoutu do potrzeb zarówno dziennikarzy jak i reklamodawców. Nie zdziwcie się więc jeśli od czasu do czasu spotkacie niewidziane dotychczas elementy lub zmianę kolejności bloków.

Walka o uwagę czytelnika

Ciekawiej jest jednak w miejscach może mniej widocznych, ale bardzo istotnych z punktu widzenia biznesu wydawcy. Chodzi przede wszystkim o rozdystrybuowanie ruchu i walkę z krótkimi i płytkimi wizytami. Sprowadza się do utrzymywania i zmieniania w zasięgu wzroku czytelnika kilku opcji pozwalających na pójście dalej, wybór nowej treści. Mamy więc linki do strony głównej i menu kategorii jako pływające elementy.

Ponadto system w ustalonych miejscach automatycznie wyświetla zajawki innych, dobranych kontekstowo artykułów, wyręczając tym samym redakcję serwisu. Klucz uwzględnia również konieczność efektywnego umiejscowienia reklam oraz bramki zapisu do newslettera. W najbliższym czasie będziemy prowadzili badania, które na podstawie zebranych danych pozwolą zoptymalizować układ w razie potrzeby.

Wszystko to ma na celu podtrzymanie zainteresowania czytelnika i podsuwanie opcji w przypadku pierwszych oznak nasycenia bieżącą treścią. Sporo zmian zaszło w samej siatce reklamowej, pojawiły się nowe formaty. Pozwolę sobie jednak na nierozwijanie tego tematu, gdyż jak mniemam nie byłby to zbyt popularny wątek wśród czytelników:) Staraliśmy się jednak połączyć dobrą ekspozycję reklam klientów z niezmienionym komfortem czytania.

Kontynuując 5-letnią tradycję, mamy nadzieję na ponowne zaproszenie w 2026. Dzięki Grzesiek!

Całkowicie nowe bebechy

Nowa infrastruktura Antyweb to przede wszystkim zmiana podejścia z monolitu na mikroserwisy. Wordpress został zastąpiony kilkoma mniejszymi usługami z dedykowanymi funkcjonalnościami - ze starego serwisu pozostał tylko panel administracyjny.

W budowie infrastruktury i tak naprawdę nowego Antyweb wykorzystaliśmy najnowsze technologie i trendy w podejściu budowania aplikacji opartych na mikro serwisach.

Frontend czyli to co widzicie to aplikacja PWA czyli progressive web application, co tłumacząc na polski oznacza, że jest to aplikacja zbudowana z założeniem “mobile first”. Celem jest zapewnienie najwyższej jakości odbioru aplikacji webowych przez wszystkie urządzenia i przeglądarki bez względu na jakość połączenia z internetem. Zaraz po wejściu na stronę cześć rzeczy zapisuje się w pamięci urządzenia z wykorzystaniem service workers (mały kod odpowiedzialny za sposób ładowania elementów wykorzystywanych na stronie), a ponowne wejście na stronę jest dużo szybsze dzięki wykorzystaniu zapisanych danych.

To jeszcze nie wszystko, bo pojawi nam się tajemnicze API. Aby wyświetlić informacje na stronie klient frontowy potrzebuje skądś pobrać dane. Miejscem z którego je pobiera jest API, które z kolei pobiera dane bezpośrednio z bazy danych lub Elasticsearch (system bazodanowy odpowiedzialny za BIGDATA) w zależności od pobranych zasobów. By maksymalnie skrócić czas odpowiedzi serwera pobrane lub zbudowane dane zostają zapisane w systemie Redis celem ich późniejszego szybszego wyświetlenia.

Wspomniany wcześniej Elasticsearch zawiera dokumenty, które są tak naprawdę reprezentacją artykułu i wszystkich jego powiązań. Jest to więc taka duża baza danych (w formie json) z plikami tekstowymi.

Zarówno frontend jak i backend jest zbudowany z modułów, co ułatwia utrzymanie i rozbudowę całego systemu.

Antyweb jako aplikacja jest headless, oznacza to, iż treść backendu jest oddzielona od frontendu i plików statycznych. Pliki te przechowywane są w usłudze S3 na AWS (przechowywanie obiektów w chmurze - usługa od Amazon). Co daje nam technologia headless? Przede wszystkim jest to dużo szybsze serwowanie danych dzięki podziałowi odpowiedzialności aplikacji i przystosowaniu CDN-a do odpowiedniego przekazywania plików statycznych.

Nowy Antyweb to też bardzo duża elastyczność jeśli chodzi o zarządzanie wyglądem, danymi, ich przepływem. W każdej chwili możemy zbudować nową stronę główną dzięki modułowej budowie serwisu. Możemy dodać podserwis czy całkowicie nowy layout strony. Każdy element serwisu jest modułem, którym możemy praktycznie dowolnie zarządzać.

Patrząc od spodu na nową infrastrukturę mamy też bardzo elastyczny system deploymentu danych. Wszystko jest zautomatyzowane (co oznacza, że żadnych plików na serwerach nie zmienia się ręcznie) i gwarantuje pełną spójność systemu. A cały proces realsiowania nowej wersji aplikacji odbywa się za pomocą jednego kliknięcia (widziałem to na własne oczy trwa między 3-5 minut). To podejście jest nazywane continuous integration.

Wdrożenie tych wszystkich skomplikowanie brzmiących technologii pozwala nam na dużo lepsze i efektywniejsze wykorzystanie zasobów. A mówią wprost potrzebujemy mniej serwerów aby obsłużyć większy ruch. Dlaczego?

Oto jak teraz wygląda od strony technicznej interakcja z aplikacją Antyweb:

Użytkownik wchodzi na stronę - zapytanie przesyłane jest do serwera, jest zwracany bazowy html, który jest zbudowany po stronie serwera i zawiera wszystkie informacje (czyli wszystkie moduły są już spięte w całość). Następnie przy próbie przejścia na inny element strony podmieniane są tylko te moduły, które są nowe i potrzebne w danej chwili. Nie ma potrzeby pobierania HTML od nowa.

Antyweb nie jest już stroną internetową a aplikacją szytą na miarę i pod nasze potrzeby.

Oczywiście nie jestem taki mądry aby to wszystko rozumieć, w opisie technologicznym pomógł mi Sebastian Szczepański, który jest ojcem i matką tego rozwiązania. Sebastian zawodowo zajmuje się właśnie projektowaniem takich skomplikowanych acz potrzebnych rozwiązań technologicznych.

Dziękujemy

Sami Antyweba nigdy byśmy nie zbudowali, dlatego serdecznie dziękuję: ekipie Autentika za cierpliwość, wyrozumiałość, za świetne podejście, Sebastianowi Szczepańskiemu za stworzenie od podstaw rozwiązania, dzięki któremu Antyweb dogonił i przegonił w wielu aspektach obecne standardy. Hostersom, którzy utrzymują dzielnie Antyweb, za mega pro konsumenckie podejście, za nocne rozmowy, brak nerwów przy wdrożeniu, za cierpliwość i niesamowity support. Bardzo dziękuję również firmie Kommunikat za przygotowanie logotypu i przepięknego symbolu Antyweb.pl

Czytelnikom!

Za to, że jesteście cały czas z nami, za wszystkie cenne uwagi, za również te mniej miłe, ale szczere itp. Dzięki wam ciągle się mobilizujemy do pracy, dlatego teraz też liczymy na waszą opinię o nowym Antyweb. Dajcie znać, co według was nie działa. Jestem pewien, że jest jeszcze mnóstwo rzeczy do poprawienia. Nawet gdybyśmy testowali serwis przez 2 miesiące i tak nie znajdziemy tyle, co wy w 30 minut.