Szablon od Template Monster #55458

Dzięki uprzejmości Template Monster Polska dostałem do recenzji jeden z ich szablonów, oznaczony numerem 55458. Postawiłem zatem jego dziewiczą wersję i przystąpiłem do testowania.

  • W paczce oprócz plików samej strony dostajemy także link do obszernej dokumentacji. Duży plus za to. Jedyne zastrzeżenie, jakie można mieć, to fakt, że dokumentacja wciąż nie jest dostępna po polsku.
  • Oprócz dokumentacji dodatkowymi dodatkami są wszystkie źródła szablonu: pliki LESS (chociaż tutaj to głównie Bootstrap…) oraz pliki PSD. I znów – duży plus.
  • Kolejnym dodatkiem jest skrypt wysyłki maila połączony z formularzem kontaktowym (z oczywistych względów wyłączyłem go w wersji demo). Oparto go na sprawdzonym, ale ciut starym PHPMailerze. Niemniej skrypt działa i spełnia swoje zadanie.
  • Wraz ze stroną główną dostajemy szablony 5 innych podstron (oraz wyszukiwarkę). Dzięki temu wystarczy wstawić swoją treść i gotowe.
  • Strona wygląda schludnie i profesjonalnie, dodatkowo dodano tutaj animacje, które ożywiają ją w trakcie scrollowania. Niemniej animacje lekko się krzaczą dla elementów, które są widoczne od samego początku. Można to zaobserwować np. na podstronie Our blog. Animacja jest odpalana od razu przy wczytywaniu strony, po czym po chwili jest widoczna raz jeszcze.
  • Jak już wspomniałem, strona jest oparta na Bootstrapie, dzięki czemu jest w pełni responsywna i działa także na telefonach i tabletach. Zostało tam podrasowane menu, do którego dodano animacje. Niemniej animacja rozwijania podmenu jest średnio intuicyjna i trudno się połapać kiedy to menu się rozwinęło. Uważam, że takie podmenu w wersji mobilnej powinno być po prostu zawsze rozwinięte.Niemniej to jedyne uchybienie, jakie udało mi się odnaleźć.
  • Ikonki na stronie głównej w sekcji OUR FOCUS IS OUR CLIENTS’ SUCCESS nie są wyśrodkowane w pionie. Jest to bardziej widoczne zwłaszcza w Chrome.
  • Przy okazji: brakuje waypointów. Idealnie każda sekcja na stronie powinna mieć swoje własne [id], żeby było możliwe linkowanie do niej. Rozumiem, że to szablon, ale jeśli tego typu działanie byłoby w nim pokazane, istnieje duża szansa, że user przerabiając go takie zachowanie pozostawi.
  • I jeszcze słowo o nagłówkach: w kodzie nie są pisane dużymi literami, co oznacza, że jest użyty text-transform: uppercase. Kolejny plus do kolekcji.
  • Mam mieszane uczucia jeśli chodzi o outline linków. Niektóre korzystają ze stylów z :hover – i bardzo dobrze. Niemniej globalnie outline jest wyłączony, przez co niektóre linki nie reagują wizualnie na klawiaturę.
  • Przejdźmy do szczegółów technicznych. Na początku tradycyjnie walidator, który wskazuje jedynie kilka ostrzeżeń, niemniej wartych poprawienia. O wiele gorzej wyglądają tragiczne wyniki w PageSpeed – to zdecydowanie należałoby poprawić, a przynajmniej umieścić w dokumentacji szablonu informacje dla użytkownika jak to zrobić (proste narzędzie online też mogłoby się nadać).
  • Zaglądnijmy do kodu. Widać typowy Bootstrap, przez co HTML jest nieco udziwniony, ale rozumiem ten wybór. Tego typu szablony mają działać wszędzie, a Bootstrap mimo wielu wad jest także najbardziej przetestowanym w boju frameworkiem CSS-owym. Niemniej wolę szablony bez Bootstrapa – są bardziej elastyczne.
  • 6 arkuszy stylów: o 5 za dużo.
  • jQuery powinno być na końcu body, bo na razie blokuje rendering. A jQuery migrate w ogóle nie powinno być.
  • Komunikat przestrzegający przed starymi IE jest zawsze mile widziany.
  • Wreszcie ktoś przerobił .navbar-brand na h1! Jestem tym mile zaskoczony.
  • Menu na liście bez udziwnień – bardzo dobrze. Ale żeby nie było za dobrze:

    <li><a href="#" class="fa fa-twitter-square"></a></li>

    Powtarzam to jak mantrę: pusty link to bezsensowny link! Dla użytkowników, którzy mają problemy ze wzrokiem tego typu link jest niedostępny. Na tego typu sytuacje powstało w Bootstrapie .sr-only:

    <li><a href="#" class="fa fa-twitter-square"></a> <span class="sr-only">Twitter</span></li>

    Trzeba propagować dobre praktyki odnośnie dostępności.

  • W sliderze podpisy pod zdjęciami są zrobione na em. Osobiście zamieniłbym to na span.
  • Szkoda, że hierarchia nagłówków jest zaburzona, gdyż tuż po h2 mamy h5.
  • Podoba mi się za to, że ikonki czysto dekoracyjne mają pusty [alt]. Nie niosą ze sobą żadnej informacji, więc taki tekst alternatywny dla nich jest idealny.
  • Drażni mnie nieco używanie br w celach estetycznych. To jednak lekkie nadużycie.
  • Slider z klientami powinien mieć nagłówek i nazwy firm w [alt] – to jednak są pewne informacje, których brakuje w kodzie, a zatem też w treści.
  • <label data-add-placeholder="">
    	<input type="text"
    		   name="name"
    		   placeholder="Name:"
    		   data-constraints="@LettersOnly @NotEmpty"/>
    </label>

    Taki zapis sprawia, że etykieta pola jest pusta. Tutaj znów można wykorzystać .sr-only albo dodać [aria-label] do pola.

  • <span class="fa fa-envelope wow fadeIn" data-wow-duration="2s" data-wow-delay="0.4s"></span>
    <a href="mailto:">contact@demolink.org</a>

    Dane kontaktowe to już klasyk, który prawie nigdzie nie jest zrobiony do końca dobrze. Tutaj znów do ikonki przyda się dodatkowo informacja w .sr-only.

  • <div class="col-md-6 col-md-offset-6 post wow bounceInRight animated">

    Dodanie tych klas od razu powoduje problem z animacjami, który wyżej opisałem. Myślę, że rozwiązałoby go dołączanie tych klas przy zdarzeniu DOMContentLoaded (czyli przy użyciu $(document).ready w jQuery).

  • function include(scriptUrl) {
        document.write('<script src="' + scriptUrl + '"></script>');
    }

    Takim hakom mówimy nie. Lepiej to zrobić asynchronicznie:

    function include(scriptUrl, cb)
    {
    	var script = document.createElement('script');
    	script.src = scriptUrl;
    	cb && script.onload = cb;
    
    	document.body.appendChild(script);
    }

    A najlepiej po prostu połączyć i zminimalizować pliki JS.

Prawdę mówiąc byłem pewien, że szablon będzie gorszej jakości – do tego mnie szablony przyzwyczaiły. Jednak w tym wypadku zostałem mile zaskoczony. Kod był zdecydowanie wyższej jakości niż się spodziewałem, a i ilość dodatkowych zasobów oraz pełny dostęp do źródeł działają zdecydowanie na korzyść propozycji od Template Monster. Nie może być oczywiście zbyt dobrze, więc muszę z ciężkim sercem przyznać, że szablon ma spore problemy z dostępnością. Do tego dochodzą drobne niedoróbki wizualne, które jednak łatwo usunąć. Ogólnie szablon sprawia pozytywne wrażenie. Można wręcz powiedzieć, że jest to jedna z lepszych rzeczy, jakie ostatnio oceniałem na WebKrytyku.

Jeden komentarz do “Szablon od Template Monster #55458”

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.