Re-kreacja twomann.com

Widzieliście nową stronę twomann.com? I jak wrażenia? Dzisiejsza edukacja re-kreacja to odtworzenie nowej strony www fotografów twomann.com.

W kwestii technicznej, strona twomann.com ma sporo własnych rozwiązań, które w niektórych przypadkach muszą być stworzone samodzielnie od zera i wzorowane na ich stylach CSS. Niestety, to kolejna strona, która została stworzona ładnie wizualnie, ale zapomniano o jej optymalizacji. Tak, wiem! Nie każdy potrzebuje być w Google. No i w końcu to twomann… opinia fotografów wyprzedza Google.

Ale jak już wspomniałem o optymalizacji to dokończę, bo Ty prawdopodobnie nie masz takich zasięgów jak TwoMann, więc zadbaj o wszystkie kwestie techniczne.

Na początek Core Web Vitals – failed. Czyli obecna strona twomann.com nie jest czymś, co Google akceptuje pod kątem technicznym. Praktycznie każdy wyznacznik Core Web Vitals nie przeszedł testów pozytywnie.

Optymalizacja mobile to raptem 42/100. Sporo do poprawy.

Wersja na desktop wygląda dużo lepiej. Strona uzyskała wynik 87/100

W podsumowaniu posta znajdziesz porównanie stron, oryginalna twomann.com oraz re-kreacja. Jak myślisz… rezultaty będą podobne?

Przygotowanie WordPress

Oczywiście zaczynamy od przygotowania WordPress. Do odtworzenia design strony twomann.com użyję motywu WordPress Blocksy oraz wtyczek Stackable, GreenShift

Nagłówek strony

Na stronie twomann.com pierwszym elementem jest slider z kilkoma zdjęciami oraz nagłówki i przycisk. Slider bez problemu stworzyć możemy przy użyciu GreenShift slider, natomiast jeżeli zależy nam na szybszym ładowaniu strony, to możemy użyć statyczne zdjęcie, które dynamicznie podstawimy z obrazka wyróżniającego strony.

W tej części sporo czasu straciłem na dopasowywaniu fontów. Niestety w bibliotece fontów Google nie znalazłem nic podobnego, więc użyte fonty znacznie odbiegają od tych użytych na stronie twomann.com

Element tekstowy

Prosty element składający się z dwóch kolumn.

Przesunięte zdjęcie

Blok z video

Coś co świetnie wygląda. Blok, który nadaje dynamiki, pokazuje, że strona jest żywa i coś się na niej dzieje. Wszystko pięknie, ale te bloki nie należą do moich ulubionych. Bardzo często są z nimi problemy, obciążają przeglądarki internetowe itd.

Podczas live, też zwiechy zaczęły się pojawiać. Sam zobacz, że zbudowanie tego bloku jest łatwe, ale bardzo kłopotliwe

Sekcja z gradient

Tu, ponownie sporo czasu straciłem na wybieraniu kolorków. Można temu było zapobiec. Ponownie jest to nieskomplikowany blok z dodatkowymi 3 kolumnami w środku.

Blog i wpisy

Tu odtworzenie układu z twomann.com zajęłoby sporo czasu. Miniaturkowe slideshow, filtry itd. Uprościłem to i stworzyłem prosty układ z Blocksy. W tej części wykorzystałem również Blocksy Posts Shortcode.

Element z licznikiem

Brzmi śmiesznie… element z licznikiem… że niby co w samochodzie? Coż, licznik/odliczanie to blok w WordPress, który ma za zadanie w animowany sposób pokazać docelową liczbę. W tym przypadku wykorzystałem gotowy blok z GreenShift.

Opinie

Na stronie głównej twomann.com jest mała sekcja z opiniami. Elementy stworzone na podstawie dwóch kolumn – jedna to zdjęcie, a druga to tekst, czyli opinia, imiona pary oraz link do ich wpisu na blogu

Menu

Nieszablonowe menu, to element, o który coraz częściej proszą klienci. Na chwilę obecną nie jestem ani za, ani przeciw fikuśnym rozwiązaniom. Wychodzę z założenia, że menu na stronie ma być, ma być czytelne, ma być łatwo dostępne i używanie tego menu powinno być intuicyjne do którego nie będziemy potrzebowali instrukcji obsługi.

Odtworzenie menu ze strony twomann.com zrobiłem używając Content Block, który następnie wrzuciłem jako Trigger w nagłówku (sekcja header).

Podsumowanie

Prosta, czytelna strona. Nie ma tu super skomplikowanych elementów, ale widać, że twórcy strony wykorzystali sporo własnych rozwiązań. Dzięki nim, strona twomann.com nabrała unikalnego kształtu i funkcjonalności.

Od strony technicznej jak widziałeś na początku wpisu jest słabo… a jak strona z re-kreacja wypada w testach Google?

W wersji mobile uzyskałem lepszy wynik 77/100, a desktop to 98/100