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).