Bardzo proszę o ocenę strony. :) [ankieta]

Question

Witam serdecznie.

Nie licząc jednej podstrony ukończyłem dzisiaj stronę internetową i bardzo proszę o jej ocenę, oraz rady na przyszłość. Bardzo proszę o wyrozumiałość, ponieważ jest to moja pierwsza strona internetowa. :) Wiem, że powinienem używać tagów z HTML5 i kod jest trochę niepoukładany. Na pewno będę się tego uczyć w pierwszej kolejności.

Strona: http://aquastalka.pl/
Z góry dziękuję za rady i pozdrawiam.

Możliwe odpowiedzi:

5/5 (12 głosów, 50%)

4/5 (7 głosów, 29%)

3/5 (5 głosów, 21%)

2/5 (0 głosów)

1/5 (0 głosów)

Answer 1

Wiem, że powinienem używać tagów z HTML5

To dlaczego ich nie stosujesz?!

• Pojedynczych znaczników nie domyka się z "/"

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

  - To można słać w nagłówku HTTP.
  - chrome=1 - Chrome Frame zniknął z użycia ponad 2 lata temu.

• <link rel="stylesheet" href="footer.css" type="text/css" />

  We wszystkich tych linkach type="text/css" jest niepotrzebne.

• Fonty z googla można załadować jednym requestem

• Wszystkie skrypty na tej stronie powinny być na końcu body.

• CSSy zminimalizuj i wrzuć do jednego pliku. 

• Ogólny divitis - masa niepotrzebnych znaczników.

• target blank - W każdej.. ale to w każdej ocenianej stronie jest to samo.. ludzie! kto i gdzie was tego uczy? Tego się nie da zrobić przez przypadek.. Bezcelowy target, When to use target=”_blank"

• "AquaStalka" Powinna być głównym nagłówkiem strony, a aktualne h1, powinny być h2.

• Wszystkie img muszą mieć tekst alternatywny!

• <div style="clear: both;"></div>

  - Nie stosujemy stylów inline
  - clear: both; można z powodzeniem robić na pseudoelemencie :after - nie zaśmieca się wtedy HTMLa

• Warto spojrzeć jeszcze na walidator, trochę krzyczy.

• Serwis dostępny pod dwoma adresami: http://www.aquastalka.pl, http://aquastalka.pl/ Zaciągnij apacha do roboty i ustal wersję z lub bez www. (htaccess - to Ci może pomóc w szukaniu)

• Zamiast:

  $klik=0;
  			$('.small').on('click', function(){
  				if ($klik==0) 
  				{
  					$('ul.lnav').addClass('showing');
  					$('ul.rnav').addClass('showing');  
  					$klik=1;
  				} 
  				else 
  				{
  					$('ul.lnav').removeClass('showing');
  					$('ul.rnav').removeClass('showing'); 
  					$klik=0;
  				}	
  			});

  Po prostu:

  $('.small').on('click', function(){
      $('.lnav, .rnav').toggleClass('showing');
  });

   

• PageSpeed Insights - tu też warto spojrzeć, szczególnie na sekcję "Zoptymalizuj obrazy".

• W Kontakt na fullHD stopka wisi gdzieś po środku strony. Mogłaby się 'przylepić' do dolnej krawędzi.

Comments

Dziękuję za wszystkie rady. Co do znaczników HTML5 to po prostu wiem o nich, ale muszę się ich nauczyć, aby zacząć używać. I mam jeszcze pytanie: Napisałeś, że wszystkie skrypty mam wrzucić pod body, a wszędzie indziej czytam, że mają być w head. To jak to ma być w końcu?

---

Co do znaczników HTML5 to po prostu wiem o nich, ale muszę się ich nauczyć, aby zacząć używać.

Fakt. Lepiej nie używać, niż używać źle. Jednak taki nav czy footer nie są jakoś bardzo skomplikowane.

---

Skrypty: na początek lecą tylko asynchroniczne - PageSpeed Insights - Use Async, reszty nie umieszcza się w head z dwóch powodów:

1. Blokują renderowanie strony. Przeglądarka nie parsuje HTMLa, dopóki nie sparsuje JSów w head - a te JSy musi jeszcze pobrać. To kolejny request, czekanie na odpowiedz serwera, pobieranie, parsowanie. Mamy oczywiście taki piękny atrybut jak async, który "mówi" przeglądarce: "rób swoje, tym JSem zajmiesz się później, na razie go tylko ściągaj", jednak nie rozwiązuje to następnego problemu:
2. Trzeba czekać na załadowanie DOM. W przypadku skryptów na końcu body mamy już wszystko załadowane i gotowe do użycia, bez zbędnego kombinowania.

---

 a wszędzie indziej czytam, że mają być w head

Jeśli możesz, podaj źródła.

 

Answer 2

Bardzo ładny styl, daje 5/5

Comments

Dziękuję bardzo.

Answer 3

1. Każda grafika powinna posiadać alt!

2. <img src="img/Sygnet.png" width="40px" height="40px" />

jeżeli już to albo width="40" albo style="width: 40px;"

3. <a href="akwarystyka">

a końcówka .html? 

__

wygląd nawet nawet, ale co mi tam nie pasuje? 

1. kolor po najechaniu na element menu, 

2. kolor w buttonach (czarny text, niebieski border), 

3. duże ikony na dole,

4. "Oferujemy" ten border nie powinien być na całej szerokości, może zrób go tak na 1/3 szerokości żeby tylko trochę wystawał po bokach. 

 

Daje 4/5 na chwilę obecną myślę że jesteś na dobrej drodze. Trochę zmian się przyda i będzie ok :p 

 

Comments

1. Bardzo dziękuję za przypomnienie, zaraz dodam.

2. Dziwne, że tego nie zauważyłem, dziękuję.

3. Czy to nie było tak, że jak mam przyjazne adresy to nie mogę dodawać rozszerzenia?

Co do wyglądu zastosuje się do rad. :) Dziękuję.

---

3. Jest OK.

Answer 4

Stronka fajna, mam takie małe spostrzeżenie - jak się wejdzie w ''serwis komputerowy'' to po hoverze na elementy menu zmiana koloru na czarny powoduje nieczytelność elementu na który najedziemy. Może innym to nie przeszkadza ale ja bym to zmienił :P

Comments

Dzięki za spostrzeżenie, też nad tym myślę, ale nie mam pomysłu czym to zastąpić.

Answer 5

Strona wizualna?

Dwie ikonki na dole, może jakiś subtelny kolor, nie czarny? Trochę je zmniejszyć i bliżej siebie. Generalnie większe dostępy (np. od Oferujemy do ikonek; skontaktuj się od ikonek i stopki). Przycisk do YT za mały i mało widoczny. Aczkolwiek reszta prezentuje się całkiem porządnie.

Co prawda widać, że strona amatorska, ale wreszcie jakaś, której autor nie musi się wstydzić :)

Pozdrawiam.

PS: Rozumiem, ze to oszczędność, ale połączenie akwarystyki i serwisu komp jest... dość dziwne...

Comments

Dziękuję za rady i miłe słowa, zobaczę jak to będzie wyglądać i może zastosuje. A co do połączenia serwisu z akwarystyką to jest dlatego, że firma to oferuje, a strona jest firmy, a nie usługi. ;)

Answer 6

Niby szczegół ale warto pamiętać że coraz więcej osób ma monitory o rozdzielczości powyżej FullHD. Ja np mam monitor 21:9 i to zdjęcie z nagłówka na pełnym ekranie zaczyna się powtarzać.