Ocena pierwszej strony internetowej

pytanie zadane 10 maja 2016 w Nasze projekty przez Sebastian Kopiczko Początkujący (370 p.)
zmienione kategorie 10 maja 2016 przez Patrycjerz

Cześć,

chciałbym dzisiaj podzielić się z wami moją pierwszą stroną nad którą spędziłem trochę więcej czasu samodzielnie.

http://biala-perla.pl/

Proszę o opinię i konstruktywną krytykę. Tak wiem, każda strona w oddzielnym htmlu to nie najlepsze rozwiązanie. Starałem się w miarę możliwości o to, aby strona była responsywna. Odpalając stronę na windows phone na jednej z podstron stopka wariuje jak na zdjęciu.

Co więcej, chciałbym także poruszyć temat pozycjonowania strony w googlu oraz stworzenie odpowiedniego pliku htaccess (który zrobiłem z pomocą poradnika pana Mirka, lecz okazał się klapą i strona nawet się nie wczytywała). Chcę też zaznaczyć, że pierwotnie ta strona była zrobiona dosyć niedbale w wordpressie i w katalogu ftp jest wiele plików, które nawet nie mam pojęcia jak działają.

komentarz 10 maja 2016 przez Niespecjalny Gaduła (4,180 p.)

zoptymalizuj miniaturki zdjęć!

To nie jest normalne że wczytują się prawie jak full hd

Na głównej masz jakieś niedociągnięcie(pojawia mi się scroll i mogę przesunąć go o jakieś 3-4 pixele mimo że 1/3 strony jest pusta.

Button na głównej jest nieczytelny.

5 odpowiedzi

odpowiedź 10 maja 2016 przez Comandeer Guru (606,240 p.)

Tak wiem, każda strona w oddzielnym htmlu to nie najlepsze rozwiązanie

Nie, jeśli stosuje się odpowiednie rozwiązania ;) Patrz: Jekyll.

Czcionki z Google Fonts można wcisnąć w jeden arkusz.
JS na koniec body → https://developer.yahoo.com/performance/rules.html#js_bottom
```
<a href ="index.html" title="Powrót na stronę główną"><img src="logo.png"/></a>
```
Każdy obrazek MUSI MIEĆ [alt] – zwłaszcza ten, który jest jedyną treścią w linku. Wówczas jego [alt] jest stosowany jako treść dla czytnika ekranowego. No i to może być z powodzeniem główny nagłówek strony → http://www.webkrytyk.pl/krytyka/lexy.com.pl/#naglowki
Czemu są dwa menu, z czego 1. nie jest w nav? To powoduje duplikację treści w czytnikach ekranowych i dodatkowo niepoprawne oznaczenie menu! Chociaż widzę, że i tak jest ukryte… więc po co jest? Lepiej mieć jedno menu, w nav.
Skoro trzymasz wszystko w osobnych plikach .html, to przynajmniej przyjaźnie je nazwij. No i o-nas, nie onas ;)
Czemu etykietka dla przycisku menu jest po angielsku?
```
<div style="clear: both;"></div>
```
Clearfix! http://nicolasgallagher.com/micro-clearfix-hack/
```
<div class="check"><a href="onas.html">SPRAWDŹ NAS!</a></div>
```
Nie krzycz, jest text-transform w CSS. No i zauważ, że ten element nachodzi na menu.
Ale wiesz, że jest elem.classList.toggle? ;) Poza tym, jak już używasz jQuery, użyłbym go też do tego.

odpowiedź 10 maja 2016 przez IBB Gaduła (3,020 p.)

Ładna stronka :)

Kilka uwag:

- strona główna ma 8MB, z czego 7.8MB to główny baner. Zdecydowanie za dużo! Czy naprawdę potrzebujesz zdjęcie o wymiarach 3000px x 2060px? zamiast background-image mógłbyś użyć img z atrybutem srcset i kilkoma rozmiarami tego samego obrazka. Albo ogranicz szerokość elementu .maincontent (poprzez max-width) i odpowiednio zmniejsz obrazek tła, który element ten wykorzystuje

- link "Sprawdź nas" wyświetlony na tle banera jest ledwo widoczny

- brak nagłówków (<h1>, <h2>, etc)

- jak osoba korzystająca z klawiatury może się dostać do stron 'Przystań', 'Bar' i 'Wypożyczalnia'? Linki te pokazywane są, gdy kursor myszy znajduje się nad linkiem 'Oferta', ale nie gdy link ten otrzymuje fokus klawiatury. To submenu jest też niewłaściwie oznaczone, powinnieneś zastosować zagnieżdżoną listę, a nie div z 3 linkami (element .dropdown-content powininen byc ul nie div, i kazdy z linkow w nim zamieszczonych powininen znajdowac sie w elemencie li)

- link facebooka na stronie Kontakt nie ma tekstu (tekst ten może być ukryty, ale musi być dostępny dla czytników ekranu)

- przycisk 'Otwórz menu' (widoczny na mniejszych urządzeniach) musi znajdować sie w kodzie przed menu, które kontroluje, nie za nim (powoduje to nieprawidłową kolejność fokusa)

- każda strona powinna mieć unikatowy tytuł (element title), np. "Kontakt - Biała Perła Augustów", "Oferta - Biała Perła Augustów" itd