Ocena strony internetowej

Question

Witam,

Robię stronę internetową swojej znajomej i prosiłbym o wasze uwagi / opinie co do strony. Chodzi mi przede wszystkim o kod HTML5, gdyż mam jeszcze problem z opanowaniem nowych tagów HTML5 - nie wiem czy dobrze robię, że używam tylko <section>. Na dodatek nie wiem czy w <main> umieścić wszystkie sekcje / podstrony poza <header> i <footer>, czy też <header> i <footer>. Aha, RWD nie ma co testować, bo to zostawiłem na sam koniec. W każdej sekcji jako nagłówek używam <h2> i też nie wiem czy robię dobrze, czy może <h1> powinno być - ale wtedy każdą sekcję umieścić jeszcze w <article> czy jak? Fajnie, jakby także ekspert się wypowiedział, czyli Comandeer :)

http://onoff-team.pl/www/

Answer 1

• Nie widzę po czym TAB-uję – nawigacja dla mnie (i wielu niepełnosprawnych osób) właśnie stała się bardzo trudna czy wręcz niemożliwa (a przynajmniej: mocno wkurzająca) → http://outlinenone.com/
• Adres się nie zmienia po kliku w menu – cierpi na tym mocno UX → http://codepen.io/Comandeer/pen/bEPbqg + http://www.forumweb.pl/poczatkujacy-webmaster/jak-stworzyc-podobna-strone/497845#497845
• Etykietek w formularzu nie widać.

• <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  Można to z powodzeniem słać jako nagłówek HTTP

• Czcionki z Google Fonts można wpakować do jednego pliku (bo Google Fonts umożliwia merge'owanie poprzez zmianę URI – można u nich w docsach poczytać). No i w linkach używa się &amp; zamiast &.
• Nie masz HTTP/2, więc pliki CSS wypada połączyć w jeden i zminifikować. Dodatkowo w style.css jest wciśnięty normalize, który jest też przesyłany osobnym arkuszem.

• #kontakt input[type="submit"]:hover

  Raczej unika się tego typu selektorów i po prostu nadaje klasę przyciskowi. Ogólnie nie używa się id do stylizacji, a selektory robi się jak najkrótsze.

• display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  De facto ostatnia regułka starcza aż nadto. No chyba że potrzebujesz wsparcia dla IE, to wówczas jeszcze -ms-flexbox. To samo dotyczy wszystkich innych własności fleksowych.

• <a href="#">
            <img src="img/logo.png" alt="ON/OFF Team logo" />
          </a>

  To powinien być główny nagłówek strony → http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki.

• Jeśli chodzi o logo, to jego [alt] to po prostu nazwa strony. Dla obrazków będących linkami tekst [alt] jest tekstem linku – a przecież nikt nie linkuje do logo, prawda? (BTW muszę w końcu naskrobać artykuł o podstawach dostępności, bo ten błąd powtarza się praktycznie w każdej stronie dawanej tutaj do oceny…)

• #home brakuje nagłówka (może być .visuallyhidden).

•  <img src="img/zdjecie-marta.png" alt="Marta Brzezińska" />
              <h3>Marta Brzezińska</h3>

  Tutaj raczej pusty [alt], bo dubluje informację z nagłówka, nie niosąc żadnej dodatkowej.

• No i taką listę z nagłówkami można z czystym sumieniem zamienić na 2 sąsiadujące section.

• Nawigacja slidera jest niedostępna, bo a) nie jest na przyciskach (button); b) obrazki nie mają [alt] (zatem są pomijane przez czytniki ekranowe).

• I kolejny klasyczny błąd: brak label w formularzu. Serio, trza będzie naskrobać artek o podstawach dostępności…

• Przycisk nie ma treści, więc znów: nie jest dostępny.

• Ogólnie pomyślałbym nad włożeniem tych wszystkich sekcji do main.

Comments

<h1>
        <a href="#">
          <img src="img/logo.png" alt="ON/OFF Team logo" />
        </a>
</h2>

Czyli to by miało tak być? Trochę to dziwne, bo nagłówek powinien być tekstem?

I kolejny klasyczny błąd: brak label w formularzu. Serio, trza będzie naskrobać artek o podstawach dostępności…

O label wiem, i w drugiej stronie którą przesłałem można to zauważyć, ale przy tej stronie akurat był taki wymóg, aby w inputach użyć placeholder. Rozumiem, że mimo to label musi być?

Ogólnie pomyślałbym nad włożeniem tych wszystkich sekcji do main.

Wszystkie <section> poza <header>'em?

Wielkie dzięki za pomoc. Frontend to nie łatwa sprawa i jeszcze to Accessibility. Jeśli napiszesz taki art to będzie super. Trochę mam mieszanie uczucia - za dużo tego wszystkiego :) Muszę przeanalizować dokładnie to co napisałeś jak i inni tutaj i jeszcze raz dokładnie przeczytać twój Semantyczny blog na spokojnie. Albo to dobrze opanuję albo zostawię frontend większym ekspertom aby nie zabierać im pracy.

---

Trochę to dziwne, bo nagłówek powinien być tekstem?

No ale jest tekst – [alt] obrazka (BTW wciąż niepoprawiony ;)). 

przy tej stronie akurat był taki wymóg, aby w inputach użyć placeholder. Rozumiem, że mimo to label musi być?

Tak. Nawet specyfikacja o tym wspomina:  

The placeholder attribute should not be used as a replacement for a label. 

Jeśli label nie pasuje wizualnie, to zawsze jest jeszcze technika .visuallyhidden.

Wszystkie <section> poza <header>'em?

IMO tak.

 

---

Jutro do tego siądę i postaram się wprowadzić wszystkie poprawki aby view-source: był przyjemniejszy ;) Dam znać. Dzięki, cenne uwagi.

---

#home brakuje nagłówka (może być .visuallyhidden)

Będzie OK jeśli nagłówek <header> i sekcję #home połączę w jeden nagłówek <header> i usunę całą tą sekcję #home? Tym samym, nie trzeba będzie robić ukrytego nagłówka dla #home...

Część Twoich uwag już mam poprawione, m.in. <label> dodałem i logo strony umieściłem w nagłówku.

---

Hm, prawdę mówiąc jakoś bardziej mi pasuje ten nagłówek… ale tak, da się to włączyć w header.

Answer 2

• Po co tyle komentarzy? Wystarczy schludny kod, by się w nim połapać, a nie komentarz na 3 linie.
• Nie stosuj id do stylizowania. Niech będą tylko odnośnikami w js i html
• Logo jest zawsze h1. Chodź dodam, że to jest jedyny dobrze zrobiony link na stronie.
• Brak konsekwencji - raz polskie nazwy, raz angielskie
• <meta http-equiv="X-UA-Compatible" content="IE=edge" /> wysyłaj jako nagłówek http
• Okropny skrypt scroolTo. Nie zmienia się link, po wciśnięciu, czyli jakby tego linku nie było. Zobacz http://codepen.io/Comandeer/pen/bEPbqg
• Połącz style
• Również skrypt od pralax może mieć problemy z dostępnością. Przydałoby się jakieś aria do .paralax-mirror

Comments

• Nie stosuj id do stylizowania. Niech będą tylko odnośnikami w js i html

Czyli w całym kodzie HTML używać same klasy - no chyba, że ID jako odnośnik w JS ? Tego nie rozumiem... Klasy są, jeśli się powtarzają. Skąd taka zasada? Czyli np. byłoby tak: <footer class="footer"></footer> ?

• Logo jest zawsze h1. Chodź dodam, że to jest jedyny dobrze zrobiony link na stronie.

To jest logo graficzne, więc jak zrobić jako <h1> ?

• <meta http-equiv="X-UA-Compatible" content="IE=edge" /> wysyłaj jako nagłówek http

Tzn. ?

• Okropny skrypt scroolTo. Nie zmienia się link, po wciśnięciu, czyli jakby tego linku nie było. Zobacz http://codepen.io/Comandeer/pen/bEPbqg

Heh?

• Połącz style

Wszystkie pliki .css w jeden? To przecież jeszcze nie jest skończona strona.

A co z tymi moimi pytaniami? :)

---

Żeby nie być gołosłowny będę podbierał się linkami.

1. http://tutorials.comandeer.pl/html5-blog.html Ostatni komentarz. 
2. Tak samo jak nagłówek tekstowy. http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki
3. Za pomocą header w php lub .htaccess
4. Heh?
5. Tak.

h2 jak najbardziej użyte poprawnie. H1 występuje tylko jako nagłówek strony. 

Section też poprawnie użyte. Article wg. specyfikacji poprawnie można by użyć wewnątrz sekcji "o nas".

 

---

1. Tak samo jak nagłówek tekstowy. http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki

Ogólnie czytam to o tym nagłówku na stronie którą podałeś, ale nic nie rozumiem co czytam :D Tą o semantycznym blogu podobnie - na samym początku tylko do jakiegoś momentu zadążałem. Chyba wrócę do C++.

Osobiście stoję na stanowisku, że logo strony w 98% przypadków powinno być równocześnie głównym nagłówkiem.

To niby jak mam logo graficzne wsadzić w nagłówek? To bez sensu... Co Google na to? Przecież nagłówek musi być tekstem.

---

Dodatkowo oddziel nagłówek strony i zawartość znacznikiem main jak to radzi  http://html5doctor.com/the-main-element/.

Jeszcze jedna przypadłość strony: nie da się tabować.

Answer 3

->Brak footer

->Używałbym klas

Comments

A musi być koniecznie footer? A np. sekcja Kontakt może być stopką? Taki dostałem projekt graficzny.

---

Raczej może, być stopką, ale 

Chodzi mi przede wszystkim o kod HTML5, gdyż mam jeszcze problem z opanowaniem nowych tagów HTML5

Więc tag <footer>, jest tagiem w HTML5 

---

Znam tag <footer>, tylko że na tej stronie nie ma przewidzianej stopki. Jeśli chodzi o mój problem z opanowaniem nowych tagów HTML5 to wspomniałem o <section>, <article> i <main>. Ogólnie, nikt mi tu nie odpowiedział na ani jedno moje pytanie, ale spoko, będę dalej powtarzał błędy.

---

Pytałem też czy musi być ta stopka, bo jak nie to niech zostanie tak jak jest.

---

Stopka, informuję o roku "wypuszczenia strony w świat", a także o prawach autorskich, Na połowie stron, nie ma stopek, więc chyba nie jest ona obowiązkowa

---

Stopka, informuję o roku "wypuszczenia strony w świat", a także o prawach autorskich

Nieprawda.

<article>
	<h2>Tytuł</h2>
	<footer>
		<p>Napisany przez: <b>Comandeer</b></p>
	</footer>
	<p>Treść artykułu</p>
</article>

Wciąż poprawne użycie stopki ↑

Za specyfikacją:

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

[…]

Footers don't necessarily have to appear at the end of a section, though they usually do.