[www] Szukajgry.pl - strona dla graczy online Opcje

[DoxPL]

Witam. Jakiś czas temu zrobiłem stronę, która ma za zadanie pośredniczyć między graczami online.
Działanie jest proste, gracze tworzą swoje "tematy", w których poszukują innych ludzi do danej gry, a inni zainteresowani na nie odpowiadają
Kod tworzyłem w php/sql/html/css. Korzystałem również z frameworków jquery i bootstrap.
Sporo rzeczy jest jeszcze do poprawy, ale postaram się tym zająć.
Pozdrawiam;)
Adres: http://szukajgry.pl

Ten post edytował DoxPL 23.07.2016, 14:23:27

[markuz]

http://szukajgry.pl/join.php?game=%3Cscrip...);%3C/script%3E

[Comandeer]

Polecam zainteresować się dorobieniem odpowiedniej dostępności z poziomu klawki, więc poprawna kolejność focusowania, widoczny outline dla linków itp.

Logo powinno być klikalnym nagłówkiem. Zwłaszcza, że obecnie de facto nie da się wrócić z podstrony na stronę główną (oczywiście nie licząc wejścia w menu).

Menu da się otworzyć, ale nie zamknąć. Co więcej, dodałbym kursor łapki (obecnie nie jest do końca jasne, że można ten przycisk kliknąć).

Pola formularzy MUSZĄ mieć label. [placeholder] go NIE zastępuje!

Poza tym formularze w BS są ładnie ostylowane… Tutaj formularz logowania taki nie jest

Ogólnie co do wszystkich formularzy: https://uxdesign.cc/design-better-forms-96fadca0f49c

Walidacja formularzy i obsługa błędów w przypadku choćby rejestracji leży i kwiczy. Przyjaznym tego nazwać się nie da.

Przydałyby się przyjazne adresy. Skoro strona jest po polsku, to niech adresy będą po polsku. Co więcej: strona główna jest dostępna zarówno pod / jak i index.php.

Jaki ma sens klawisz "Odkryj e-mail" na stronie kontaktu?

Co do kodu:

Gdzie DOCTYPE?

Czcionki z Google Fonts można włączyć jednym arkuszem.

Swoje style powinieneś includować po Bootstrapie.

Skrypty powinny być na końcu body.

[HTML] pobierz, plaintext 
<img src = "imgs/logo.png" alt = "logo szukajgry.pl">
[HTML] pobierz, plaintext 

Ludzie, błagam! Czytajcie podstawowe informacje o [alt] Od ponad roku jest wysyp stron mających całkowicie źle nadany ten atrybut. Jakiś nowy kurs HTML wyszedł (ale serio pytam – musi być jakiś powód…)? Polecam poczytać https://www.w3.org/TR/html5/embedded-content-0.html#alt lub http://internet-bez-barier.com/prawidlowe-...-nietekstowych/

[HTML] pobierz, plaintext 
<img src = "imgs/menu.png" class = "menu_img">
<a href = "login.php"><img src = "imgs/log.png" class = "mobile_log"></a>
[HTML] pobierz, plaintext 

A tutaj już wgl bez [alt]…

Menu powinno być na liście. Natomiast rurkę (|) najlepiej wstawić jako li + li::before.

iditis (muszę w końcu zebrać te różne rzeczy w jedno miejsce, serio).

Polecam poczytać o tworzeniu hierarchii treści przy pomocy nagłówków

[HTML] pobierz, plaintext 
<form action = "add.php" method = "post">
<input type = "submit" name = "search" value = "Zaczynamy" class="btn btn-default btn-lg">
</form>
[HTML] pobierz, plaintext 

To raczej wygląda jak link CTA a nie formularz (de facto nie posyłasz żadnych danych).

Kod

.link_menu {
color: #F4FCEF;
text-decoration: none;
}

.link_menu:hover{
text-decoration: none;    
}

.link {
color: #F4FCEF;
text-decoration: none;
}

.link:hover{
text-decoration: none;    
color: #CCFF00;
}

vs

Kod

.link_menu, .link {
    color: #F4FCEF;
    text-decoration: none;
}

.link:hover, .link_menu:hover {
    text-decoration: none;    
}

.link:hover {    
    color: #CCFF00;
}

Optymalizuj arkusze stylów!