Ocena pierwszej strony

0

Cześć, wiem że to nikogo nie zachwyci ale proszę bez jakiegoś wielkiego hejtu. Skończyłem kurs na codeacademy i jest to moja pierwsza wykonana strona internetowa samodzielnie. Przy okazji zapytanie, za co odpowiada js na stronie ? Jak bym mógł go tutaj wpleść? Proszę o jakieś rady ;)

http://konferencjawhs.cba.pl/

1

Jest całkiem nieźle: strona jest czytelna, funkcjonalna i ciężko się do czegoś doczepić :-)

Irytuje mnie w zasadzie jedna rzecz: tło w formie obrazka; podczas przechodzenia między podstronami tło odpowiednio się pomniejsza / rozszerza, na co ciężko mi się patrzy. Zastanawia mnie także sposób w jaki zachowa się strona z newsami, gdy tych newsów pojawi się więcej (i gdy tło się powiększy).

Jeśli chodzi o kod:

  • dlaczego niektóre obrazki mają puste alty?
0

Co byś radził zrobić z tłem w takim wypadku ?

1

Odnośnie problemu ze skalowaniem: można by dorzucić na spód obrazka gradient idący w całkowitą czerń i wtedy cała reszta strony (znajdująca się pod obrazkiem) miałaby jednolicie czarne tło, bez żadnego skalowania na wysokość.

3

Wizualnie... strasznie jest to smutne i ponure, a tło strony mi się kojarzy ze stertą węgla przed kopalnią, a nie tym, o czym jest strona ;)

Sprawdzenie ogólnodostępnymi walidatorami:

Jeszcze wracając do aspektu wizualnego - małe białe czcionki na szaro-plamistym tle są mało czytelne. Na przykład dopisek z datą pod "Patron Wydarzenia" jest naprawdę słabo czytelny.

Obrazki partnerów po prawej stronie - zamiast dawać same grafiki, powinny być one klikalne i umożliwić przejście do WWW danego partnera,

Formularz zgłoszeniowy na Google Drive jest dość prosty. Zamiast kazać ludziom to ściągać, a potem wysyłać mailem, powinieneś zrobić prosty formularz na stronie, który się po prostu wypełnia i klika "wyślij".

W zakresie responsywności - strona leży. Przy moim monitorze (24", więc wcale nie jakimś wielkim) po ok. 30% z każdej strony mamy marginesy/puste przestrzenie. Podczas zmniejszania okna przeglądarki te marginesy się kurczą. Ale w chwili, w której dojdziemy do tego, że okno przeglądarki ma szerokość kolumny z tekstem, dalsze zmniejszanie okna nie powoduje zwężania tekstu, jego szerokość pozostaje taka sama i po prostu ucieka jego fragment poza okno. Mógłbyś coś z tym zrobić. Na komórce mówiąc całkiem szczerze mi się nie chciało sprawdzać ;)

Coś jest skopane z menu. O ile w standardowej postaci jest OK, to po włączeniu w FF trybu zwiększonej czytelności, nagle menu po prostu znika, a strona wygląda tak, jak na poniższym obrazku:
screenshot-20190228143000.png
Jest to o tyle dziwne, że menu jest zrobione jako <ul><li>, więc nie powinno znikać. Coś masz chyba skopane.

Natomiast tak podsumowując - dałem kilka rzeczy które powinno się poprawić, ale ogólnie strona nie jest zła. Wiadomo, że do poziomu profesjonalnych prac za 20kpln to jej trochę brakuje, ale jak zrobisz coś z tłem oraz zwiększysz czcionki, żeby można było to czytać bez konieczności specjalnego skupiania się na małych i zlewających się z tłem literkach, to stronka będzie dawała radę. Jak na początek to dzieło jest całkowicie poprawne :)

0
cerrato napisał(a):

Sprawdzenie ogólnodostępnymi walidatorami:

Walidatory css obecnie bym se podarował, za dużo obecnie preprocesorów, kompilatorów, minifikacji i innych akcji.

W zakresie responsywności - strona leży. Przy moim monitorze (24", więc wcale nie jakimś wielkim) po ok. 30% z każdej strony mamy marginesy/puste przestrzenie. Podczas zmniejszania okna przeglądarki te marginesy się kurczą. Ale w chwili, w której dojdziemy do tego, że okno przeglądarki ma szerokość kolumny z tekstem, dalsze zmniejszanie okna nie powoduje zwężania tekstu, jego szerokość pozostaje taka sama i po prostu ucieka jego fragment poza okno. Mógłbyś coś z tym zrobić. Na komórce mówiąc całkiem szczerze mi się nie chciało sprawdzać ;)

Tak nie sprawdza się rwd, tylko na konkretnych urządzeniach po resecie css, ale fakt, że na mobile jest niewyraźnie, lecz poprawnie.

Z jednej strony warto się uczyć z drugiej początkujący na bootstrapie ogarnie to lepiej/łatwiej/przyjemniej, co też daje do myślenia.

1

Pierwsze, co mi się rzuca w oczy to logo uniwersytetu: w_uwb_kolor.jpg, 2.7 MB po to, żeby wyświetlić je w rozmiarze 150×150px.
Mogłoby być tak z tysiąc razy mniejsze :p
Pozostałe banerki już nie tanie rażące, ale też by się je dało kilkukrotnie odchudzić.

Po co dwa pliki css zamiast jednego?

Czcionki deklarujesz tylko w formacie "woff2", więc kilka procent potencjalnych odbiorców ich nie zobaczy:
https://caniuse.com/#feat=woff2
Sugeruję zapodać też wersje:
"woff", "ttf" i "eot".

#sidebar li li {

Jest jak dla mnie przekombinowane.
Sugeruję zrobić w sidebarze jednopoziomową listę, a pierwszy wiersz wyróżnić przez :first-child.

I w ogólności sugeruję używanie operatora dziecka
rodzic > dziecko > wnuczek
zamiast operatora dowolnego potomka. No chyba, że chodzi właśnie o to, żeby w danym elemencie ostylować tak samo np. wszystkie akapity niezależnie od ich stopnia zagnieżdżenia.

Unikaj stylowania elementów wewnątrz HTML-a. Po to masz pliki CSS.

Tutaj:


<div id="page">
  <div id="page-bgtop">
    <div id="page-bgbtm">
      <div id="content">
        <div class="post">

Masz pięć kolejnych kontenerów i dopiero w nich treść. Najprawdopodobniej to najzupełniej zbędne, chyba, że masz w głowie jakąś koncepcję potężnej rozbudowy tej strony, w ramach której taka złożona struktura będzie ci potrzebna.

Tyle po pobieżnym przejrzeniu.

0
Freja Draco napisał(a):

Pierwsze, co mi się rzuca w oczy to logo uniwersytetu: w_uwb_kolor.jpg, 2.7 MB po to, żeby wyświetlić je w rozmiarze 150×150px.

Bo to jest pod ekrany QHD/UHD :]

0

Wszystkie te loga można łatwo przekonwertować do formatu wektorowego – mała waga i ładne skalowanie. ;)

0

Mój największy problem to dobór tła, czcionki i koloru. Macie jakieś rady jak się tego nauczyć ? :D Kolejna sprawa to radzicie nauczyć się bootstrapa i na podstawie niego robić strony ? Wszystkie inne uwagi biorę do siebie i na pewno to przestudiuję. Jak macie rady również na wprowadzanie javascriptu ?

1

Czcionka nie robi szczególnego dobrego wrażenia - polskie "ś" wygląda jak z innej bajki.

screenshot-20190303200734.png

Nawiasem mówiąc zawartość strony kuleje pod względem językowym, ale to raczej kwestia spoza obszaru, który prosiłeś ocenić ;)

0
Ludar0 napisał(a):

Macie jakieś rady jak się tego nauczyć ? :D Kolejna sprawa to radzicie nauczyć się bootstrapa i na podstawie niego robić strony ? Wszystkie inne uwagi biorę do siebie i na pewno to przestudiuję. Jak macie rady również na wprowadzanie javascriptu ?

W mojej stopce masz wszelkie niezbędne materiały do budowy strony.

0

Okej, mam nadzieję że udało mi się trochę ulepszyć moją stronę. Przerobiłem ją także na bootstrap tylko chyba na stronie głównej, przy zmniejszaniu wielkości przeglądarki, za szybko prawa kolumna schodzi w dół i jest przyczepiona do prawej. Jak mógłbym to zmienić żeby ją wyśrodkować ? Proszę o kolejny oceny strony po zmianach :D

http://konferencjawhs.cba.pl/

1 użytkowników online, w tym zalogowanych: 0, gości: 1