Zostałem ostatnio poproszony o recenzję, test i opinię dotyczącą dowolnego szablonu z marketu TemplateMonster. Wybrałem Monsteroid2 z rodziny szablonów HTML5. Zaletą szablonów HTML5 jest ich uniwersalność i elastyczność, ponieważ można je wykorzystać zarówno w przypadku:

To jak wygląda edycja treści w takim szablonie zależy od dewelopera a integrację z logiką można zaimplementować tak aby dopasowana do potrzeb klienta. Zobacz na przykładach jak wygląda taka integracja szablonu w systemie WordPress.

Aby rozwiać wszelkie wątpliwości należy podkreślić, że szablony takie nie nadają się dla osób, które nie znają choćby w bardzo podstawowym stopniu edycji kodu HTML. Szablony tego typu są przeznaczone dla deweloperów.

Co znajduje się w paczce od TemplateMonster?

Wszystkie warianty szablonu są poukładane w folderach. Oprócz właściwych plików z szablonem HTML i wykorzystywanych plików CSS i JS otrzymujemy źródła i dodatki w postaci

  • plików pug i scss,
  • linków do paczki z dozwolonymi do użytku na własnej stronie zdjęć na różne tematy o łącznej wadze aż 1,9GB!
  • linków do paczki z plikami PSD

Nazwy wszystkich podstron szablonu są zrozumiałe a zasoby są umieszczone w standardowych folderach:

Design

Szablon HTML Monsteroid2 zawiera w sobie wiele różnych wariantów stron głównych i pozwala na wykorzystanie wielu predefiniowanych komponentów. Dla wygody i uproszczenia testu skupię się na domyślnym motywie 62267-default

Pod kątem wizualnym szablon Monsteroid2 jest wykonany perfekcyjnie. Nowoczesne fonty, ciekawa skala typograficzna, starannie zaprojektowane układy przykładowej treści i fotografie robią bardzo dobre wrażenie.

Tego typu projekty, które zawierałyby ciekawą treść śmiało mogłyby konkurować w nie jednym internetowym konkursie web designerskim. Zresztą, nie trzeba mi wierzyć na słowo – spójrzcie sami:

–

Warto dodać, że szablon ten jest oparty jest o framework Bootstrap 4, ponadto, (a po części dzięki temu) jest zaprojektowany w myśl zasady Mobile-First.

Przykładowe układy i komponenty

Mnogość różnego rodzaju podstron i komponentów może na początku przyprawić o zawrót głowy – jest tego naprawdę bardzo dużo i każdy powinien znaleźć coś dla siebie.

  • 16 unikalnych wariantów strony głównej,
  • 9 wersji nagłówka,
  • 3 wersje stopki,

Unikalne podstrony:

  • o nas,
  • nasz zespół,
  • członek zespołu,
  • usługi,
  • szczegóły usługi,
  • nasza historia,
  • wydarzenia,
  • rezerwacja,
  • kontakt,
  • FAQ – najczęściej zadawane pytania,
  • cennik,
  • kariera
  • klienci,
  • galeria,
  • portfolio

Strony specjalne:

  • prace konserwacyjne,
  • błąd 404,
  • wyniki wyszukiwania,
  • już w krótce,
  • polityka prywatności

Blog:

  • 4 layouty listy postów,
  • 3 wersje paska bocznego,
  • 9 wersji pojedynczego wpisu,

Sklep:

  • lista produktów,
  • siatka produktów,
  • pojedynczy produkt,
  • koszyk zakupów,
  • kasa (checkout).

Dodatkowe komponenty (do wykorzystania jako shortcode lub pole niestandardowe):

  • akordeon,
  • odtwarzacz audio,
  • ikonografia,
  • przyciski,
  • typografia,
  • opinie użytkowników,
  • odliczanie,
  • liczniki,
  • tabele z cenami,
  • profil użytkownika,
  • slajder,
  • CTA – wezwanie do akcji,
  • przełaczniki (togglers),
  • zakładki (taby),
  • formularze kontaktowe,
  • mapy,
  • media społecznościowe.

Moduły/wtyczki JS/jQuery

Monsteroid2 posiada wiele użytecznych i ciekawych bibliotek jQuery i JavaScript. Są one zapisane w jednym pliku – to czy jest to wygodne / użyteczne zostawiam każdemu do rozważenia. Przy odrobinie cierpliwości da się je rozdzielić na wiele plików i użyć tylko tych, których faktycznie potrzebujemy. Szablon ten wykorzystuje:

  • jQuery w wersji 3.2.1 – czyli standardową bibliotekę,
  • jQuery Migrate – czyli dodatkowa biblioteka do zachowania wstecznej kompatybilności w ramach jQuery starszego niż 1.9,
  • jQuery Cookie Plugin https://plugins.jquery.com/cookie/,
  • Device.js – ułatwia czytelne i semantyczne wykrywanie urządzeń na podstawie zapytań medialnych bez potrzeby specjalnej konfiguracji po stronie serwera,
  • jQuery resize event http://benalman.com/projects/jquery-resize-plugin/ ,
  • jQuery easing – czyli dodatek ułatwiający wykonywanie nieliniowych, naturalnie wyglądających animacji,
  • Popper.js – animacja do wykonywania niestandardowych tzw. dymków,
  • TouchSwipe – ułatwia obsługę zdarzeń związanych z dotykiem np. detekcję kierunków przy zdarzeniu swipe,
  • Regula – ułatwia validację formularzy,
  • jQuery Form Plugin,
  • WOW – efekty animacji i przejść widoczne podczas przewijania strony,
  • Owl carousel
  • Isotope PACKAGED – odpowiedzialny za tzw. wodospady zdjęć,
  • Lightgallery – bardzo dobra galeria jQuery,
  • UIToTop
  • Bootstrap.js
  • Swiper http://idangero.us/swiper/ ,
  • jQuery Count To,
  • jQuery Circle Progress,
  • TimeCircles,
  • Magnific Popup
  • Slick http://kenwheeler.github.io/slick/ ,
  • Countdown for jQuery,
  • Moment JS,
  • Bootstrap Material Datetimepicker,
  • Stepper,
  • jPlayer,
  • jPlayerPlaylist,
  • jQuery Mousewheel
  • jScrollPane,
  • MaterializeParallax,
  • Vide,
  • Text Rotator,
  • Particles.js – symulacja cząsteczek.

Użyteczność i spełnienie zasad UI dla stron WWW

Szablon zdał wzorowo test optymalizacji mobilnej i użyteczności interfejsu.

Kompatybilność wieloplatformowa (międzyplatformowa)

Podczas surfowania po kolejnych podstronach szablonu – niezależnie czy na komputerze czy na urządzeniu mobilnym, nie znalazłem nieprawidłowości. Mogło mi coś umknąć uwadze ale z pewnością najważniejsze elementy interfejsu takie jak nawigacja, formularze czy efekty typu pokaz slajdów czy parallax działały bez zarzutu.

Syntaktyka HTML i JS

Szablon zdał wzorowo test walidacji HTML w narzędziu validator.w3.org. Poza dziewięcioma ostrzeżeniami dotyczącymi braku nagłówka w elemencie article nie wykrył on błędów w kodzie.

Kod JS jest syntaktycznie poprawny. Konsola nie zgłasza błędów dodatkowo sprawdzono kod dołączonych bibliotek i i pozostałych skryptów strony za pomocą narzędzia esprima.org

Dodaktowo, kod jest dobrze sformatowany i zorganizowany.

Filozofia sekcji pozwala przeszczepiać i wymieniać pomiędzy sobą poszczególne sekcje w ramach całego szablonu. To powoduje, że możemy wykorzystać jedynie fragment przykładowych podstron a manipulacje tego typu nie powinny przysporzyć problemu.

Wydajność – optymalizacja dla przeglądarek

Wynik PageSpeed Insights strony głównej jest spektakularny biorąc pod uwagę, że mamy do czynienia z szablonem!

Po usunięciu nieużywanych bibliotek i po lekkiej optymalizacji treści (np. zmianie formatu zdjęć z jpeg na webp) myślę, że bez problemu dało by się osiągnąć wynik bliski 100%.

W GTMetrix nie spodziewałem się problemów, ponieważ jest to mniej zaawansowany tester stron, tutaj łatwiej osiągnąć pełny wynik. Strona zainstalowana na idealnie skonfigurowanym hostingu osiągnęła prawie 100 punktów.

Co wykonano w ramach konfiguracji? Wykorzystano pamięć podręczną Expires oraz sieć CDN Amazona. Nie musiałem korzystać z pamięci podręcznej po stronie serwera bo pamiętajmy, że cały czas mamy do czynienia ze stroną statyczną. Wynik kolejny raz pozytywnie mnie zaskoczył. Nie wykonywałem też dodatkowych prac z kodem.

Test z wykorzystaniem przeglądarki też wyglądał bardzo przyzwoicie.

Treść

To co najbardziej wyróżnia i czyni ofertę TemplateMonster bardzo konkurencyjną (na tle innych serwisów tego typu) to fakt, że szablony z serwisu TemplateMonster posiadają gotowe zredagowane teksty oraz zdjęcia, które mogą służyć jako inspiracja a w ostateczności jako tymczasowy placeholder na końcowej stronie. Wszystkie zdjęcia i wideo są dostarczane z szablonem i można je wykorzystać na swojej stronie. Tekst lorem ipsum jest zastąpiony bardziej sensownymi tekstami dotyczącymi samego szablonu lub anglojęzyczną marketingową nowomową.

W serwisach typu themeforest lub themes.getbootstrap wszystkie zdjęcia są podmienione na szare prostokąty lub ich jakość jest celowo znaczenie pogorszona. Edycja takich szablonów może być z tego powodu utrudniona i nie być tak satysfakcjonująca jak praca na gotowej stronie jaką otrzymujemy od TemplateMonster.

Lokalizacja i język

Wszystkie teksty i napisy są w języku angielskim. To oczywiście standard na rynku szablonów stron ale skoro market jest dostępny w języku polskim nie widzę przeszkód aby istniały szablony także w tym wariancie lub dedykowane dla polskich użytkowników 🙂

Proces zakupu w TemplateMonster

Tutaj TemplateMonster zaliczył małą wpadkę. Z pewnością zostanie to naprawione w najbliższych aktualizacjach ale skoro robimy recenzję a nie reklamę to muszę o tym wspomnieć. Po zakupie otrzymujemy podziewanie a w raz z nim link do strony pomocy.

Niestety po kliknięciu na link „Jak go zainstalować i korzystać z niego?” zostałem odesłany do znajomo wyglądającego błędu:

To może przysporzyć niepotrzebnego stresu początkującym użytkownikom a może nawet frustracji. W końcu to szablon w cenie czterokrotnie wyższej od konkurencji i spodziewamy się doświadczeń o standardzie premium na każdym kroku.

Zalety szablonów HTML5 TemplateMonster

  • Niespotykany w tym segmencie cenowym poziom optymalizacji wydajnościowej i SEO,
  • Bardzo dobry design odpowiadający nowoczesnym trendom w tworzeniu stron,
  • Szablon posiada bardzo dużo podstron co umożliwia stworzenie strony, sklepu czy aplikacji metodą kopiuj-wklej,
  • Bogaty wachlarz dodatkowych elementów interfejsu,
  • Wiele wariantów nagłówka, stopki stron głównych i formularzy,
  • pliki źródłowe ułatwiające deweloperom wprowadzanie zaawansowanych modyfikacji w sposób automatyczny,
  • Ciekawe zdjęcia, które możemy wykorzystać w projekcie
  • Szybki proces zakupu,

Wady szablonów HTML5 TemplateMonster

  • Brak wariantów treści w języku polskim. Skoro sam market umożliwia dokonanie zakupów w języku polskim szablony mogły by być zróżnicowane lub posiadać najwazniejsze skrypty w wielu wersjach językowych, które moglibyśmy wybrać ze źródeł TemplateMonster,
  • Lekko niedopracowany proces zakupu przynajmniej w języku polskim,
  • Nieco wyższe ceny w stosunku do konkurencyjnych marketów,

Link do szablonu

https://www.templatemonster.com/pl/szablony-internetowe-62267.html

Podsumowanie

Szablony HTML z marketu TemplateMonster mogą być punktem wyjściowym do stworzenia strony zarówno estetycznej funkcjonalnej jak i wydajnej – o ile powierzymy ich dostosowanie doświadczonemu specjaliście. Przy odrobinie wysiłku da się je dostosować do rygorystycznych wymagań wydajnościowych narzędzi takich jak PageSpeed Insights oraz GTMetrix.

Daj znać w komentarzach jakie są Twoje doświadczenia z TemplateMonster lub pochwal się ostatnią realizacją, w której wykorzystałeś jakiś motyw HTML5 z tego marketu.

Oceń artykuł na temat: Test szablonu HTML5 z TemplateMonster (opinie)
Średnia : 4.6 , Maksymalnie : 5 , Głosów : 18