Ocena strony oraz pytanie techniczne.

pytanie zadane 24 września 2016 w Nasze projekty przez Karitto Użytkownik (610 p.)

Hej, chciałbym abyście ocenili moją pierwszą stronę internetową.

Strona jest stowrzona w bootstrapie i klimat ma przypominać ten z gry hearthstone.

Czy da zmienić się kod w taki sposób aby uniknąć załadować obrazki przed załadowaniem strony by użytkownik nie widział animacji ładowania się grafiki.

Z góry dziękuję za konstruktyną krytyką i wszystkie porady.

http://www.cogitariboosting.com/

5 odpowiedzi

odpowiedź 24 września 2016 przez Ivan Maniak (60,650 p.)
wybrane 25 września 2016 przez Karitto

Najlepsza

Co do ikonek, to warto przeczytać to cudo.
"Brak" focusu na przyciskach oraz w menu. To jest, gdy używasz TAB to linki nie są w ogóle widoczne. Polecam dodać do :hover, także :focus.
"Nie krzycz". Zamiast pisać wyraz wielkimi literami, napisz to po Polsku, czyli pierwsza litera wielka, następnie małymi i tak do końca wyrazu. Jeżeli chcesz uzyskać wielkie litery w całym wyrazie, skorzystaj z CSS, a dokładnie to z text-transform: uppercase
Trochę słabo, że napis "Welcome to..." jest na zdjęciu, a nie ma go w kodzie.
h2/h4 nie jest do przeznaczone do oznaczania, jakiej wielkości ma być tekst, a jest w nich ukryte coś więcej. Więcej znajdziesz pod HTML5 Outline
Strona w języku angielskim, tak samo z połową kodu. Dlaczego to psujesz używając .przygody-body
Link w footer warto wrzucić do a
Co to za div.break4, do czego on jest? Bo jeżeli nie ma nic w środku to po prostu można go wyrzucić
+ do poprawki błędy w konsoli

Pewnie jest tego więcej, ale słabo oceniać kod na podstawie framework-a/biblioteki + jak widzę bootstrap-a to chce mi się rzygać. "Troszeczkę", za dużo jego w sieci.

komentarz 25 września 2016 przez Karitto Użytkownik (610 p.)

Wielkie dzięki za opinie i przydatne porady.

Div przygody na początku miał nazwe adventures ale adblock mi go blokował :<

odpowiedź 24 września 2016 przez niezalogowany

Czy da zmienić się kod w taki sposób aby uniknąć załadować obrazki przed załadowaniem strony by użytkownik nie widział animacji ładowania się grafiki.

Po prostu chamsko przed </body wrzuć dodatkowe img

<img src="img/on/hover1.jpg" alt="" class="hide">
<img src="img/on/hover2.jpg" alt="" class="hide">
<img src="img/on/hover3.jpg" alt="" class="hide">

komentarz 24 września 2016 przez niezalogowany

Ah. chyba, że chodziło Ci o wszystkie obrazki, nie tylko ładowanie po najechaniu - wtedy szukaj rozwiązań pod frazą - preloader ( zwróć uwagę na to, czy strona wyświetli się poprawnie, jeśli ktoś nie korzysta z JSa )

Inna sprawa -> zoptymalizuj obrazy -> spokojnie mogą ważyć z 8-12x mniej

komentarz 24 września 2016 przez Karitto Użytkownik (610 p.)

Wielkie dzięki za pomocne rady :)

komentarz 26 września 2016 przez Comandeer Guru (600,810 p.)

https://www.thecssninja.com/css/even-better-image-preloading-with-css2

komentarz 26 września 2016 przez niezalogowany

sprytne, dzięki : )

komentarz 26 września 2016 przez Karitto Użytkownik (610 p.)

Fajny sposób. Sam skorzystałem z podongo sposobu prosto z tego artukułu:

https://perishablepress.com/css-image-caching/

1	komentarz 26 września 2016 przez Comandeer Guru (600,810 p.) Jest całkiem różny i powiedziałbym, że gorszy, bo opiera się na wstawianiu obrazków do HTML-a. W przypadku "mojego" sposobu całość rozgrywa się w CSS.

komentarz 26 września 2016 przez Karitto Użytkownik (610 p.)

Jesteś bardziej doświadczony i lepiej się na tym znasz więc raczej masz racje.

W wolnej chwili przestudiuję artykuł i wprowadzę zmiany na stronie. Wielkie dzięki!

odpowiedź 24 września 2016 przez Selarz Użytkownik (510 p.)

odpowiedź 24 września 2016 przez Barttyyy Gaduła (4,680 p.)
edycja 24 września 2016 przez Barttyyy

odpowiedź 26 września 2016 przez Tom_Ja Dyskutant (7,970 p.)

Może trochę upierdliwa ocena wyglądu, ale myślę, że lepiej by było, jakby stopka była już na stronie, którą widać po załadowaniu jej - tj. żeby pozbyć się suwaka strony ;) Człowiek jest ciekawy co tam na dole, a to tylko stopka.