Dzięki współpracy z TemplateMonster mamy możliwość przetestowania a przy okazji zaprezentowania i zoptymalizowania szablonu dla systemu Joomla!
Joomla to dojrzałe i dopracowane środowisko CMS dla rozbudowanych stron internetowych. Ponieważ jest to budowany od podstaw CMS a nie przeróbka platformy blogowej, Joomla jest wolna od wielu wad i oferuje znacznie więcej niż inne CMSy. System ten uzupełnia rynek systemów zarządzania treścią, oferując wsparcie wielojęzycznych stron internetowych, większe możliwości optymalizacji SEO czy też zaawansowane zarządzanie kontami użytkowników.
Czytaj więcej na temat SEO w osobnym wpisie: Optymalizacja SEO Joomla!
Do testów wybrałem szablon Gaze | Premium Business Joomla Template, który jest szablonem premium ogólnego przeznaczenia.
Design
Zaprojektowany z myślą o minimalizmie i elastyczności, szablon ten oferuje aż 18 różnych widoków strony głównej a w tym wizualny edytor front-endowy, który wykorzystamy do wygodniejszego dostosowania projektu
Z dużym dystansem podchodzę do edytorów wizualnych dlatego tym dokładniej przyjrzę się wydajności i poprawności kodu strony, która została stworzona przy ich pomocy 🙂
Poza tym, szablon zbudowano na bazie Bootstrapa 3, ponieważ został wydany już jakiś czas temu. TemplateMonster ma już w swoim katalogu kilka nowych szablonów Joomla! zbudowanych na Bootstrap 4
Szablon dostarcza między innymi:
- Page Builder,
- Revolution Slider z trzynastoma wariantami,
- Framework Helix,
- 18 wersji strony glównej,
- 12 wersji strony portfolio,
- 3 layouty bloga,
- 8 stylów kolorystycznych,
- 3 rodzaje galerii,
- rozszerzenie E-commerce (Virtuemart),
- 17 wersji strony kontaktowej,
- Formularz do newslettera,
- Megamenu.
Wszystkie warianty są zaprojektowane nieskazitelnie. Niemal każda podstrona jest zaprojektowana tak, że szkoda cokolwiek zmieniać. Wszystkie elementy są wyrównane do siatki a każdy napis ma idealnie dobrane marginesy. Całość wygląda profesjonalnie i nie ma się do czego przyczepić.
Instalacja szablonu Joomla! TemplateMonster
Do paczki z szablonem dołączona jest szczegółowa dokumentacja, w której opisano sposób jego instalacji. Korzystanie z paczki Quickstart pozwoli uzyskać ten sam wygląd jaki możemy podziwiać w wersji demonstracyjnej. To zazwyczaj najlepsza metoda instalacji. Na ten moment całość instaluję na serwerze XAMPP.
- Tworzę nowy folder na serwerze,
- Tworzę nową bazę danych,
- Przypisuję tymczasową domenę w pliku hosts
- Paczkę Quickstart rozpakowuję do głównego folderu strony,
- Rozpoczyna się standardowo wyglądająca instalacja Joomla,
- Wpisuję dane do bazy i tworzę konto administratora,
- Klikam na „instaluj” i proces automatycznie dobiega końca,
- Na końcu usuwam folder „installation”.
Muszę przyznać, że łatwość instalacji szablonu w Joomla! za pomocą paczki Quickstart naprawdę robi wrażenie – tym bardziej, jeżeli w przypadku konkurencyjnych systemów zarządzania treścią korzystaliśmy z „demo importerów”, które nie raz mogą sprawiać wiele niepotrzebnych problemów. Cały proces instalacji (włączając w to tworzenie bazy danych i wprowadzanie danych w instalatorze) trwał niecałe 5 minut.
Niestety po instalacji moim oczom ukazały się dwa małe problemy. Po pierwsze w nagłówku mamy ostrzeżenie:
Na szczęście jest to szeroko znany „błąd” systemu Helix, który łatwo można naprawić za pomocą edycji linii 89 w pliku:
plugins/system/helix3/core/classes/menu.php
Zmieniamy „continue” na „continue 2”. Po zapisaniu ostrzęzenie znika.
Drugi problem to brak zdjeć widocznych w Demo. Zamiast nich umieszczono tzw. placeholdery.
Chwaliłem TemplateMonster za dodawanie ładnych zdjęć i niemal sensownych tekstów – widocznie w niektórych szablonach są od tego odstępstwa: teksty są natomiast zdjęć brak. Nie można mieć pretensji, bo widać tę informację na samym końcu opisu szablonu:
Nie jest to duży problem ale trzeba przyznać, że praca z edycją takiego szablonu jest troszkę mniej satysfakcjonująca. Aby praca była ciekawsza, spróbuję kupić podobne zdjęcia i je załadować głównie po to aby testy wydajnościowe naśladowały realną stronę internetową.
Edycja podstron za pomocą edytora wizualnego
Wraz z szablonem dostarczony jest SP Page Builder, dzięki któremu możemy szybko i łatwo dostosować teksty i zdjęcia. Z tego sposobu edycji będą raczej zadowolone osoby nietechniczne, którym wystarczy możliwość edycji w zakresie na jaki pozwala edytor.
Nagłówek dostosowujemy w komponencie Unite Slider. Menu standardowo – w sekcji menu. A całą treść we wspomnianym Page Builderze.
Takie tworzenie strony jest bardzo wygodne z perspektywy developera. Przy odrobinie motywacji dałoby się skomponować kompletną stronę w kilka godzin.
Wszystkie tła i teksty można edytować korzystając z podglądu front-endu strony a takie elementy jak „Portofolio” czy formularz kontaktowy są już edytowalne z poziomu specjalnych modułów. Innymi słowy – wszystko jest zrobione tak jak powinno być na naszej finalnej stronie, lub projektowi który oddajemy klientowi.
Edycja samych artykułów przebiega już w normalnym edytorze. Zawarte w szablonie przykładowe treści pozwalają nawet osobom, które mają pierwszy kontakt z systemem Joomla odszukać konkretne fragmenty i szybko nauczyć się tworzenia nowych podstron.
Twierdzenia, jakoby edycja treści była trudniejsza w systemie Joomla można włożyć między mity. To, że system CMS dysponuje większą ilością opcji i daje dużo swobody w zakresie zaawansowanej edycji znaczników HTML w ramach artykułów, nie oznacza automatycznie, że jest mniej przyjazny dla początkujących użytkowników.
VirtueMart – sklep interntowy w systemie Joomla
Szablon GAZE jest kompatybilny z VirtueMart – wtyczki która przeobraża system Joomla w sklep internetowy, dzięki czemu możemy przetestować jak działa sprzedaż w tym systemie i szybko uruchomić własny sklep internetowy, który dodatkowo będzie wyglądał tak jak tego chcemy. W bazie wprowadzone są przykładowe produkty, dzięki którym możemy zapoznać się w praktyce z możliwościami tego komponentu.
Testy jakościowe
Z perspektywy dewelopera, edycja strony nie mogłaby być prostsza. A jak wygląda jakość finalnej strony?
Wygląd strony po edycji
Po podmianie tekstów i zdjęć strona wygląda dokładnie tak, jak w demonstracji. W widoku mobilnym doszukałem się paru drobnostek. Wybrany szablon nie jest najnowszy, korzysta jeszcze ze starszego Bootstrapa 3, dlatego nie możemy się spodziewać spełnienia podejścia mobile-first.
W nagłówku teksty nie skalują się idealnie do szerokości widoku mobilnego. Na szczęście można to łatwo naprawić – usuwając tę sekcję na urządzeniach mobilnych lub dodać prostą regułę do stylów CSS, która powiększy wielkość fontu w tym punkcie granicznym.
Poprawność kodu HTML
Testowany szablon niemal zaliczył test poprawności kodu z wymogami W3C. Walidator wskazał kilka razy ten sam błąd – dodawanie tagów style w ciele strony. Jest to wynik korzystania z SP Page Buildera, przy którym autorzy w ten sposób uniknęli ewentualnych problemów związanych z przechowywaniem plików CSS w pamięci podręcznej przeglądarki. Dodawanie tagów style to częsta przypadłość stron wyposażonych w PageBuildery niezależnie od konkretnego rozwiązania czy CMSa.
Wydajność – optymalizacja dla przeglądarek
Pora na przetestowanie wydajności szablonu. Zainstalowałem go na własnym hostingu – na którym dokonuję tego typu testów chyba że w treści zaznaczono inaczej.
W samym szablonie nie zastosujemy technik optymalizacyjnych. Aby uczciwie go przetestować, zgodnie z uniwersalną checklistą przyspieszania stron internetowych, zastosowałem podstawowe działania optymalizacyjne:
- dodałem reguły Expires w .htaccess,
- dodałem reguły odpowiedzialne za kompresję deflate też w htaccess,
Nie muszę stosować dodatkowych modułów do pamięci podręcznej na poziomie aplikacji bo optymalizację tego typu CMS Joomla! oferuje w standardzie. Jest to jedna z zalet wykorzystywania profesjonalnych CMSów. Ponieważ pierwsze testy za pomocą Google PageSpeed Insights wyszły bardzo słabe (Wynik mobilny 30/100 Desktop: 60/100) postanowiłem zainstalować Wtyczkę: JCH Optimize. Po włączeniu minimalizacji i kombinacji plików CSS i JS, wynik uległ znaczniej poprawie i ostatecznie uzyskano poniższe wyniki:
Dlaczego wyniki mobilny jest taki niski? Jest to przyczyna dużej ilości niewykorzystywanego kodu CSS i JavaScript, który jest częstym i charakterystycznym problemem pojawiających się na stronach stworzonych przy użyciu PageBulidera.
Do szablonu strony dołączonych zostało wiele plików a część z nich nie jest wykorzystywana lub są wykorzystywane ich małe fragmenty. Poniżej test Coverage w Google Chrome:
Wynik strony w narzędziu PageSpeed Insights co prawda mógł być lepszy, ale biorąc pod uwagę że mamy do czynienia z gotowym szablonem, dodatkowo wyposażonym w PageBuilder – jest do zaakceptowania. Wiele stron z trudem uzyskuje krytyczny wynik 50/100. Plus jest taki, że nie wyczerpaliśmy wszystkich możliwości optymalizacji. Po zbudowaniu strony można się pokusić o:
Test optymalizacji mobilnej
Szablon jest zgodny z założeniami responsive web design i bezproblemu zaliczył test optymalizacji mobilnej:
Optymalizacja zdjęć
Tam gdzie można to zaprogramować w szablonie, zdjęcia są automatycznie skalowane a ich kadr dopasowywany do konkretnego przypadku. Dobrze to widać w module Portfolio:
To pozwala zaoszczędzić sporo transferu przy tego typu użyciu zdjęć. Joomla nie ma automatycznego skalowania zdjęć przy wysyłaniu co raz jest dużym plusem a czasami może generować dodatkową pracę.
Zalety szablonów Joomla od TemplateMonster
- szybka i łatwa instalacja szablonu i danych przykładowych,
- atrakcyjny i ponadczasowy wygląd pozwoli wykorzystywać szablon przez długi czas,
- łatwy w użytkowaniu PageBuilder, który w pewnym stopniu pozwoli dostosować wygląd najważniejszych stron bez konieczności edycji kodu szablonu,
- przykładowa treść ułatwiająca tworzenie własnych tekstów i rozbudowę strony,
- wiele wariantów kolorystycznych i alternatywnych układów strony głównej,
- dobra dokumentacja i instrukcja instalacji i użytkowania,
- zgodność z rozszerzeniem VirtueMart co umożliwia łatwe uruchomienie sklepu w środowisku Joomla.
Wady szablonów Joomla od TemplateMonster
- wyższa cena niż w konkurencyjnych marketach z szablonami Joomla,
- brak optymalizacji wydajnościowej, PageBuilder dodaje wiele skryptów i stylów, które są domyślnie ładowane do nagłówka,
- dokumentacja tylko w języku angielskim,
- zdjęcia treści demonstracyjnej zostały zastąpione placeholderami.
- mała ilość nowych szablonów Joomla w katalogu.
Podsumowanie
Jeżeli znamy i preferujemy system Joomla, katalog TemplateMonster zawiera kilka ciekawych i dopracowanych szablonów o wszechstronnych możliwościach. Instalacja, edycja ani uruchomienie strony przebiegło bez większych niespodzianek.
Recenzowany w tym artykule szablon to świetny wybór dla:
- osób, które chcą stworzyć stronę internetową dla siebie,
- freelancera bądź agencji która tworzy nieskomplikowane strony internetowe Joomla dla klientów,
- deweloperów chcących bliżej poznać środowisko systemu Joomla.
Odpowiedz lub skomentuj