Ponowna ocena strony [ankieta]

Question

Witam, kilka dni temu wrzuciłem tu swoją stronę do oceny, odzew był fajny, wytknęliście mi trochę błędów. Postarałem się je wszystkie poprawić i oddaję wam tę stronę jeszcze raz do oceny. Znów daję ankietę dla tych, którzy tylko przejrzą i nie mają ochoty nic pisać. Jakbyście mogli to oceńcie też kod JS, bo ostatnio nikt nic nie napisał na ten temat i nie oceniajcie responsywności, bo jeszcze się nie uczyłem robić responsywnych stron i nie robiłem jej pod takim kątem. Z góry dzięki za opinie ;) 

http://cyron.pe.hu/

Możliwe odpowiedzi:

1/5 (0 głosów)

2/5 (2 głosów, 8%)

3/5 (10 głosów, 38%)

4/5 (13 głosów, 50%)

5/5 (1 głos, 4%)

Answer 1

• Czemu pierwsza focusowalna rzecz na stronie to niewidoczny przycisk "do góry"? On powinien być w kodzie na końcu.
• Kontakt jest zrobiony źle, bo przyciski od telefonu i e-mailu nie są przyciskami. Co więcej: poprawne zrobienie dostępnego dialogu jest niezwykle trudne i prawdę mówiąc te 2 przyciski zamieniłbym po prostu na linki (pierwszy z protokołem tel:, ostatni z protokołem mailto:).
• 5 arkuszy stylów i brak HTTP/2 = spadek wydajności.
• Po co Ci jQuery UI?

• <a href="#gora"><i class="icon-up-open"></i></a>
  

  Powtarzam to do porzygu: pusty element (zwłaszcza interaktywny) to NIEDOSTĘPNY ELEMENT. Każdy taki element MUSI mieć tekst wewnątrz. Polecam pobawić się czytnikiem JAWS – otwiera oczy.
  A poprawić to można prosto – dodając tekst w span.visuallyhidden:

  <a href="#gora">
      <i class="icon-up-open" aria-hidden="true"></i>
      <span class="visuallyhiden">Do góry</span>
  </a>

  Polecam także dodawać do ikonek [aria-hidden=true] (co to by czytniki nie próbowały czytać emojis!).

• <div>
  	<h1>Remigiusz Cyron</h1>
  	<h2>Projektowanie stron internetowych</h2>
  </div>
  

  Podtytuły się robi na akapitach, względnie h1 > span (zgodnie ze specyfikacją):

  <div>
  	<h1>Remigiusz Cyron</h1>
  	<p>Projektowanie stron internetowych</p>
  </div>
  
  

• <section id="o-mnie">
      <article>
  

  Za dużo dobrego. W takim wypadku sekcje nie mają nagłówków. Powinny być albo same sekcje, albo same artykuły (tutaj poszedłbym w sekcje).

• Po co Ci pusty div.underline? Zamień go albo na ::after, albo na border-bottom nagłówka.

• <div>
  	<i class="icon-phone"></i>
  	<a href="http://facebook.pl"><i class="icon-facebook-squared"></i></a>				
  	<i class="icon-mail-alt"></i>
  </div>
  

  To, jeśli chcemy zostawić obecne okienka, powinno wyglądać tak:

  <ul>
  	<li>
  		<button>
  			<i class="icon-phone" aria-hidden="true"></i>
  			<span class="visuallyhidden">Telefon</span>
  		</button>
  	</li>
  	<li>
  		<a href="http://facebook.pl">
  			<i class="icon-facebook-squared" aria-hidden="true"></i>
  			<span class="visuallyhidden">Facebook</span>
  		</a>
  	</li>
  	<li>
  		<button>				
  			<i class="icon-mail-alt" aria-hidden="true"></i>
  			<span class="visuallyhidden">E-mail</span>
  		</button>
  	</li>
  </ul>
  

  + wówczas okienka powinny zostać zrobione inaczej: http://www.slideshare.net/maxdesign/accessible-modal-windows
  Idealnie można to zrobić tak:

  <ul>
  	<li>
  		<a href="tel:666666666">
  			<i class="icon-phone" aria-hidden="true"></i>
  			<span class="visuallyhidden">Telefon</span>
  		</a>
  	</li>
  	<li>
  		<a href="http://facebook.pl">
  			<i class="icon-facebook-squared" aria-hidden="true"></i>
  			<span class="visuallyhidden">Facebook</span>
  		</a>
  	</li>
  	<li>
  		<a href="mailto:spam@spam.pl">				
  			<i class="icon-mail-alt" aria-hidden="true"></i>
  			<span class="visuallyhidden">E-mail</span>
  		</a>
  	</li>
  </ul>
  
  

• Te okienka z telefonem i e-mailem nie pasuje do aside – to albo div[role=alertdialog], albo dialog. No i znów: przycisk zamykający nie jest przyciskiem i nie ma treści → jest nieużyteczny i niedostępny.

Comments

Jeszcze dodawanie hashy do adresu strony podczas korzystania z nawigacji.

---

A tak, bardzo słuszna uwaga – jakoś mi umknęło → http://codepen.io/Comandeer/pen/bEPbqg

---

Postaram się wszystko poprawić ;)

Answer 2

Spójrz na outline strony
https://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fcyron.pe.hu%2F

	<header id="gora">
		<div>
			<h1>Remigiusz Cyron</h1>
			<h2>Projektowanie stron internetowych</h2>
		</div>
	</header>

powinno być:

<p>Projektowanie stron internetowych</p>

	<section id="o-mnie">
		<article>
			<h3>O mnie</h3>
			<img src="zdj2.jpg" alt="zdjecie" />
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet velit reprehenderit, facilis fugiat saepe repudiandae dolorum dolorem incidunt tenetur ipsum, quidem natus, dignissimos recusandae totam, iusto provident hic adipisci iste!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
	</section>

niepotrzebnie dajesz to jeszcze w <article>, a nagłówki każdej sekcji powinny być nagłówkami H2.

<i class="icon-phone"></i>
<a href="http://facebook.pl"><i class="icon-facebook-squared"></i></a>
<i class="icon-mail-alt"></i>

tutaj brak dostępności.

Comments

Dzięki, zmienię ;)

---

Używasz przestarzałego outlinera! Teraz najlepiej używać tego w walidatorze, pod opcją "Show outline"

Answer 3

Ze strony designu całkiem ok, aczkolwiek pierwsze wrażenie - surowe, kancelaryjne, a jak się zjedzie na dół - słodka strona. Trochę duża różnica. Mam nadzieję, że obrazek O mnie się zmieni ;)

I czerwona ikonka maila - czerwony oznacza Nie klikać, niebezpieczeństwo. Zielony - wręcz przeciwnie. Takie powszechne (nie tylko ludzkie, ale w przyrodzie) skojarzenie. :)

Answer 4

Widzę, że mamy podobny "gust" do projektowania: http://www.robertsaternus.pl/

Answer 5

Kliknąłem kilka razy szybko w przycisk menu i się popsuło przewijanie.. nie działa scroll.. xD ew. mozna poprawić animacje xD

Answer 6

Dodam swoje kilka groszy odnośnie designu: 

1. Zbyt wielka czcionka dla nagłówków jak i treści.
2. Na stronie jest strasznie surowo.
3. Ikony na samym dole są zbyt wielkie co nadaje im "ciężkości".
4. Kolorystycznie nagłówki powinny być ciemniejsze od treści pod nimi.
5. Spróbuj jakoś inaczej zaprojektować każdy blok na stronie ponieważ przewijając stronę widzisz ciągle to samo tylko, że ze zmienionym tekstem - wprowadza to sporą monotoniczność to projektu.

Poprzeglądaj inne strony, jak to dzisiaj się projektuje, jak wygląda to z rozmiarami, doborem kolorów.