Sklep internetowy do oceny

Question

Witam serdecznie,
 
Chciałbym prosić o zdanie bardziej doświadczonych użytkowników, którzy mogliby coś powiedzieć na temat tego sklepu, czy wszystko wyświetla się poprawnie, czy coś należy poprawić / zmodyfikować aby był jeszcze bardziej funkcjonalny?

Medpak

Comments

Co my mamy właściwie oceniać? To prestashop z gotowym szablonem: http://prestashop.templatemela.com/PRS07/PRS070164/PRS03/index.php, w którym nie widzę żadnych wielkich modyfikacji poza panelem administracyjnym.

Answer 1

Strona pod względem dostępności leży. To co zawsze:

• Outline nie istnieje
• Zbyt mały kontrast dla tekstu
• Pola formularza nie mają label
• Usunięty :focus!? Przez to nie masz nawet najmniejszej możliwości skorzystania z klawiatury
• Obrazki posiadają nieprawidłowy alt. Czasami dublują treść, a czasami nie opisują zdjęcia. Na przykład baner ma alt="Baner Swanson" Już nawet nie czepiam się opisu banera "baner", ale tego, że na zdjęciu jest "Sprawdź ofertę" i faktycznie można kliknąć w zdjęcie i ją sprawdzić. Daj o tym znać w alt.

Comments

Co do pierwszej uwagi, to nie do końca wiem o co chodzi, drugą wezmę pod uwagę, fomularze poprawię, co do focusa to też nie wiem zbytnio o co chodzi, wytłumaczysz? Co do altów to poprawię.

---

Pewnie, że wytłumaczę.

Outline, a jego poprawność można sprawdzić na HTML 5 Outliner. Ogólnie chodzi o to, że outline dokumentu powinnien przypominać jakąś logiczną listę zawartości strony.

:focus to pseudoklasa. Najprościej mówiąc to "stan", który uzyskuje element po naciśnięciu TAB lub po naciśnięciu.

Naciśnij sobie TAB na tej stronie. Obok ikonek, będzie niebieskie (w Chrome) obramowanie. Oznacza ono, że ten element jest "zaznaczony".

Dzięki takiemu mechanizmowi możemy poruszać się po stronie nawet nie posiadając myszki. W zasadzie to potrzebujemy dwóch, aby poruszać się po stronie.

• Pierwszy - przejdź do następnego elementu
• Drugi - naciśnij element (Na przykład przejdź do innej strony)
• Trzeci (opcjonalny) - przejdź do poprzedniej strony

Ty usunąłeś outline (:focus) za pomocą CSS-a, dodając

a:focus {
  outline: none !important;
}

Polecam: CSS outline property

Jak czegoś nie rozumiesz, wal śmiało :)

Answer 2

Jeżeli chodzi o wygląd layoutu to trochę odstaje od typowych standardów aktualnych sklepów internetowych, ale zapewne grafikiem nie jesteś to się nie czepiam.

Z tego co widzę responsywność jest zrobiona dobrze i nic się nie rozjeżdża- za to plus. Wczytywanie strony jest szybkie - widać że nie przesączyłeś strony ciężkim gównem, które potem ładowałoby się nie wiadomo ile. Strona jest zoptymalizowana, także dobrze.

Stosunek treści do kodu to 12%, a więc wyszukiwarki będą miały problem z pozycjonowaniem tej witryny, ale rozumiem że strona jeszcze nie jest zapewne uzupełniona [...] Nie ma również zachowanej na niej poprawnej hierarchii nagłówków (określony porządek h1, h2, h3...). Jeżeli miałby to być sklep, który będzie na prawdę funkcjonował dobrze byłoby się zaopatrzyć w certyfikat SSL.

 

Polecam jeszcze użycia podstawowej gamy narzędzi pentesterskich, aby zobaczyć czy pierwszy lepszy injection nie zaburzy procesu sklepu, dodanie crsf tokenów itd. - to jest dzisiaj na prawdę ważne.

Comments

Co do stosunku kodu do treści, to zostanie ona poprawione, bo jeszcze brakuje w niektórych miejscach opisu, w szczególności na stronie głównej. A co do hierarchii nagłówków, to się zastanawiam właśnie jak to ugryzić, bo na stronie głównej może i jest źle, ale według mnie tak tragicznie już nie jest na przykład na stronie produktu czy kategorii, nazwa produktu w h1, w opisie występują h2 czy h3 itp.

Dziękuje bardzo za rozbudowaną opinie ;).

---

nie ma za co :D

Answer 3

Jak na mnie miniatury zdjęć są nieco za duże, na 27 calowym monitorze widzę w lini maksymalnie dwa rzędy produktów. Poza tym chyba nie mam się do czego doczepić :>

Comments

Sam bardzo bym chciał, aby w jednej linii zamiast trzech wyświetlały się trzy produkty, ale nie mogę tego rozgryźć, jak to zrobić aby zadziałało.