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 ;)
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
alt
y?
Co byś radził zrobić z tłem w takim wypadku ?
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ść.
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:
- CSS http://www.css-validator.org/validator?uri=http%3A%2F%2Fkonferencjawhs.cba.pl%2F&profile=css21&usermedium=all&warning=1&lang=en - ogólnie nie jest źle, ale w jednym miejscu coś przesadziłeś z kolorem:
#f3eaea54
;) - sprawdzenie samego HTML: https://validator.w3.org/nu/?doc=http%3A%2F%2Fkonferencjawhs.cba.pl%2F - też raczej OK, bez większych zastrzeżeń
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:
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 :)
cerrato napisał(a):
Sprawdzenie ogólnodostępnymi walidatorami:
- CSS http://www.css-validator.org/validator?uri=http%3A%2F%2Fkonferencjawhs.cba.pl%2F&profile=css21&usermedium=all&warning=1&lang=en - ogólnie nie jest źle, ale w jednym miejscu coś przesadziłeś z kolorem:
#f3eaea54
;)
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.
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.
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 :]
Wszystkie te loga można łatwo przekonwertować do formatu wektorowego – mała waga i ładne skalowanie. ;)
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 ?
Czcionka nie robi szczególnego dobrego wrażenia - polskie "ś" wygląda jak z innej bajki.
Nawiasem mówiąc zawartość strony kuleje pod względem językowym, ale to raczej kwestia spoza obszaru, który prosiłeś ocenić ;)
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.
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