ICHERRY.pl

Pora na kolejną stronę agencji interaktywnej do kolekcji! Tym razem ICHERRY.pl.

  • Strona wygląda schludnie i elegancko, w tym względzie nie mam nic do zarzucenia.
  • Co ciekawe, strona wygląda praktycznie identycznie z działającym JS-em, jak i bez niego – brakuje wyłącznie przykładowych prac zaciąganych z Dribble. To spory plus. Pokazuje też, że można w dzisiejszych czasach zrobić funkcjonalną stronę bez potrzeby uciekania się do miliarda skryptów.
  • Niestety, na stronie jest bardzo utrudniona nawigacja klawiaturą, ponieważ focus nie jest widoczny.
  • Pewne elementy na stronie (różowy przycisk z białym tekstem oraz copyright w stopce) mają za mały kontrast. W połączeniu z małym fontem tworzy to tekst dość trudny do przeczytania.
  • Linki do e-maila (występujące w kilku różnych miejscach strony) najwidoczniej były zabezpieczone przed spambotami. Zabezpieczenie jest tak dobre, że nawet Chrome sobie z nim nie radzi.
  • Przejdźmy do kodu. Walidator nawet nie bardzo narzeka. Nie dość, że błędów de facto nie ma (nie licząc zabezpieczenia e-maila), to dodatkowo hierarchia nagłówków wygląda na bardzo dobrą – a to wciąż rzadkość.
  • W kodzie widać pewną niekonsekwencję: część atrybutów jest otoczona apostrofami, część nie, część znaczników ma zamykającego slasha, część nie. Dodatkowo arkusz stylów z Google Fonts ma niepotrzebny atrybut [type], podczas gdy główny arkusz strony – już nie.
  • Strona dba także o przeglądających korzystających z naprawdę starych przeglądarek. Szkoda tylko, że HTML5 Shiv jest zaciągany z już nieistniejącego adresu.
  • Mimo że wygląd jest faktycznie minimalistyczny, to kod już na pierwszy rzut oka wydaje się przekombinowany, np. nagłówek wygląda tak:

    <header class="main-header">
    
    	<div class="wrapper">
    
    		<div class="top">
    			<div class="logo">
    				<div class="cl">
    					<a href="http://icherry.pl">
    						<img src="assets/logo.svg" alt="ICHERRY - Projektowanie Stron www - WordPress">
    					</a>
    				</div>
    				<div class="cl">
    					<h1>ICHERRY</h1>
    					<p>projektowanie stron www</p>
    				</div>
    			</div>

    Część z powyższych elementów (np. .top czy .cl) nie ma nawet przypisanych stylów, co sprawia, że te elementy stają się całkowicie bezsensowne. Samą strukturę można jeszcze bardziej uprościć poprzez choćby przeniesienie stylów z .wrapper bezpośrednio do .main-header.

    Innym problemem tego kodu jest fakt, że nazwa strony jest duplikowana, co może sprawiać problemy choćby czytnikom ekranowym. W tym wypadku – jeśli chcemy zatrzymać napis ICHERRY – proponowałbym z logo zrobić nagłówek strony, a redundantny w tym momencie napis stałby się po prostu podpisem obrazka:

    <h1>
    	<a href="http://icherry.pl">
    		<img src="assets/logo.svg" alt="">
    		<span>ICHERRY</span>
    	</a>
    </h1>

    Natomiast, jeśli już koniecznie nie chcemy, by ten napis był linkowany, zastanowiłbym się nad:

    <h1>
    	<a href="http://icherry.pl">
    		<img src="assets/logo.svg" alt="ICHERRY">
    	</a>
    </h1>
    <p aria-hidden="true">ICHERRY</p>

    Oczywiście reszta tekstu z [alt] została usunięta z powodu duplikacji w akapicie znajdującym się tuż pod nagłówkiem.

  • Brakuje znacznika main, który by otaczał główną część strony.
  • Style CSS strony są trudne w utrzymaniu z powodu niepłaskiej specyficzności. Selektory typu .main-header .intro p (łączone dodatkowo z osobnymi regułami dla .mb!) są poważnym antywzorcem.
  • Sekcja Oferta może być dodatkowo podzielona na podsekcje. Występują w niej bowiem zagnieżdżone nagłówki h3.
  • <div class="col-3">
    	<img src="assets/design_icon.svg" alt="Projekty stron www" class="icon">
    	<h3 class="title">Projektowanie</h3>
    	<ul class="list">
    		<li>Projekty stron internetowych</li>
    		<li>UI/UX design</li>
    	</ul>
    </div>

    Przy tego typu konstrukcji ikonka tak naprawdę stanowi ozdobnik. Jej sens i treść przekazuje znajdujący się tuż obok nagłówek. Zatem [alt] powinien być pusty.

    Na tej stronie odnoszę wrażenie, że [alt] mają służyć jako wspomagacz w pozycjonowaniu, co jest dość sporym nadużyciem. [alt] służą przede wszystkim dostępności.

  • Przy okazji stopki zastanowiłbym się, czy strong nadaje się na informacje prawne. Teoretycznie o wiele bardziej pasuje tutaj small.
  • Skrypt pobierający obrazki z Dribbble generuje kod HTML w taki sposób:

    shots.forEach(function(shot) {
    	html.push('<li class="shots--shot">');
    	html.push('<a href="' + shot.html_url + '" target="_blank">');
    	html.push('<img src="' + shot.images.normal + '">');
    	html.push('</a></li>');
    });

    Tego typu kod sprawia, że generowane obrazki nie mają [alt]. To powoduje, że np. użytkownicy czytników ekranowych nie będą wiedzieli, dokąd linki prowadzą. To bardzo spory błąd dostępności.

  • Kod zabezpieczający maile posiada jedną wadę, która sprawia, że nie działa on w Chrome: nie odróżnia własności od atrybutu.

    <a href="mailto:office{e1#42A}icherry(dot)pl">Kontakt</a>
    <script>
    	const a = document.querySelector( 'a[href^=mailto]' );
    	console.log( a.getAttribute( 'href' ) ); // mailto:office{e1#42A}icherry(dot)pl
    	console.log( a.href ); // mailto:office%7Be1#42A%7Dicherry(dot)pl
    </script>

    Atrybut to to, co wstawiamy do kodu HTML. Natomiast własność to to, co powstaje po przemieleniu atrybutu przez przeglądarkę. Atrybut jest częścią kodu HTML, natomiast własność – częścią DOM. Stąd też przemielony atrybut [href] to poprawny link, zatem przepuszczony przez encodeURIComponent.

Nie jest źle! W porównaniu do innych stron na WK, ICHERRY.pl jest estetyczne, a jej kod przynajmniej próbuje być semantyczny. Choć sporo można by poprawić (np. błąd dostępności przy miniaturkach z Dribbble czy średnio utrzymywalny CSS).

8 komentarzy do “ICHERRY.pl”

  1. „Nie jest źle!” zawarte w Twojej opinii to normalnie chyba 6+ albo i lepiej 🙂 A tak na serio to fajnie, że chce Ci się i robisz takie analizy. Wiele można się z nich nauczyć i często przypomnieć sobie rzeczy, o których się wie, ale w ferworze prac i pośpiechu po prostu zapomina… A tak na marginesie to chyba odwróciły Ci się kolory w kodzie „Skrypt pobierający obrazki z Dribble generuje kod HTML w taki sposób:” bo jest białe tło i czcionka bez wypełnienia z białymi konturami…

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.