• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Co sądzicie o mojej stonie

VPS Starter Arubacloud
0 głosów
711 wizyt
pytanie zadane 16 lutego 2017 w Nasze projekty przez RadekKw Nowicjusz (190 p.)

Zrobiłem sobie taką małą stronę: fabryka-stron.net. Projektowaniem stron zajmuje się od niedawna. Chciałem, żeby była czytelna, responsywna, estetyczna, lekka/szybka.

Jestem ciekawy co sądzicie. Będę wdzięczna, za konstruktywna krytykę.

komentarz 16 lutego 2017 przez kubaapk Nałogowiec (44,270 p.)
Przepisz to na HTML5.

6 odpowiedzi

+9 głosów
odpowiedź 16 lutego 2017 przez Comandeer Guru (599,730 p.)
  • Na Chrome dev sekcje się nie wczytują przy scrollowaniu – słabo.

  • Kontrast wielu elementów leży i na pewno nie spełnia normy WCAG 2.0.

  • Nawigacja klawiaturą jest praktycznie niemożliwa.

  • Czemu focus najpierw łapie numer telefonu, a dopiero potem menu?

  • Czemu logo nie jest klikalne?

  • Linki w menu powinny zmieniać adres. To samo tyczy się 5 kroków.

  • Po co Ci klasa .no-js jak i tak jej później nie ściągasz?

  • Po co Ci [xmlns]?

  • Deklaracja kodowania powinna być 1. w head, a tuż za nią powinien by"ć nagłówek" X-UA-Compatible.

  • Nie wyłącza się skalowania strony.

  • a:focus, a:hover {outline: none; text-decoration: none;}
    

    Tą regułką zabiłeś podstawową funkcjonalność linków.

  • Ogólnie dziwny miszmasz w tym CSS-ie.

  • [alt=logo] to chyba najgorsze możliwe [alt] dla logo. Co mi po informacji, że to logo? Nic! Powinienem się dowiedzieć, czego to logo – bo przecież to chcesz mi przekazać.

  • Przycisk od menu powinien mieć tekstową etykietę (via > span.sr-only lub [aria-label]).

  • <div class="pt-15 slogan"><span class="glyphicon glyphicon-earphone pull-left"></span><a class="pl-10 pr-0 font-regular" href="tel:48691328000">+48 691 328 000</a></div>
    

    Jeśli ikonka niesie dodatkową informację, jak w tym wypadku (oznacza, że to numer telefonu), to powinna jej towarzyszyć etykieta tekstowa:

    <div class="pt-15 slogan">
    	<span class="glyphicon glyphicon-earphone pull-left" aria-hidden="true"></span>
    	<span class="sr-only">Telefon:</span>
    	<a class="pl-10 pr-0 font-regular" href="tel:48691328000">+48 691 328 000</a>
    </div>
    

    Warto zwrócić uwagę, że ikonka dodatkowo dostała [aria-hidden=true].

  • <div class="title-big animate-7">
    					<span>Usługi</span>
    				</div>
    

    Ten element aż krzyczy, że jest nagłówkiem h2!

  • Dlatego same nazwy usług powinny być h3.

  • <i class="fa fa-globe fa-5x"></i>
    

    Ikonki wstawia się przez elementy z [aria-hidden=true] i najlepiej jako span.

    <span class="fa fa-globe fa-5x" aria-hidden="true"></span>
    
  • <p class="label-rk">Dodatkowe korzyści</p>
    

    To też wygląda na nagłówek

  • Ogólnie spójrz na obecną hierarchię nagłówków.

  • Czemu realizacje nie są częścią hierarchii nagłówków?

  • Uważałbym z [target].

  • Dane kontaktowe w stopce wyglądają na dl:

    <dl>
    	<dt>
    		<span class="glyphicon glyphicon-map-marker width-25" aria-hidden="true"></span>
    		<span class="sr-only">Adres</span>
    	</dt>
    	<dd>65-963 Zielona Góra, ul. II Armii 48/6</dd>
    	[…]
    </dl>
    

    Do tego można to otoczyć w address.

  • Dość słaby ten trick z datą w stopce… Akurat to już można raz na rok zmienić.

komentarz 17 lutego 2017 przez RadekKw Nowicjusz (190 p.)

Dziękuje bardzo za tak dokładną i rzetelną ocenę.

  • Na Chrome dev sekcje się nie wczytują przy scrollowaniu – słabo.

Sprawdzałem na IE, FF, Chrome, Android i wszędzie działa, więc Chrome dev sobie odpuszczę.

  • Kontrast wielu elementów leży i na pewno nie spełnia normy WCAG 2.0.

Wydaje mi się, że kontrast jest wystarczający. Ogólna czytelność, wielkość fontów wg mnie ok. Gdyby to była strona administracje państwowej lub jakaś strona dla bardzo szerokiego grona odbiorców to może trzeba byłoby co poprawić w tej kwestii.

Nie zależy mi na tym. To nie jest aplikacja online np. do pracy na magazynie. Tu wystarczy chyba, że działa skrolowanie z klawiatury.

  • Czemu focus najpierw łapie numer telefonu, a dopiero potem menu?

Tak jak punkt wyżej. Nie zależy mi na możliwości obsługi z klawiatury i focus.

  • Czemu logo nie jest klikalne?

Rzeczywiście, dobrą praktyką jest aby tak było. Jak przeczytałem Twoją uwagę to pomyślałem, że tak zrobię ale za chwilę spojrzałem, że to chyba w na tej stronie nie jest potrzebne. Logo jest widoczne tylko gdy strona jest przewinięta na górę więc nie ma to sensu. Małe logo, które pojawia się na menu w trakcie przewijania mogłoby być klikalne ale w tym samym pasku jest przycisk start.

Linki w menu poprawiłem. Dzięki za codepen. Jeśli chodzi o 5 kroków to są po prostu taby z bootstrapa, które ostylowałem. Wydaje mi się, że nie powinny zmieniać adresu.

  • Po co Ci klasa .no-js jak i tak jej później nie ściągasz?

Racja. Usunąłem.

  • Po co Ci [xmlns]?

Racja. Usunąłem.

  • Deklaracja kodowania powinna być 1. w head, a tuż za nią powinien by"ć nagłówek" X-UA-Compatible.

Poprawiłem

Poprawiłem

  • a:focus, a:hover {outline: none; text-decoration: none;}
    

    Tą regułką zabiłeś podstawową funkcjonalność linków.

Nie zdawałem sobie z tego sprawy. Zmieniłem to. Zakładam, że można usunąć outline, ale trzeba jakoś czytelnie i estetycznie zapewnić wyróżnienie dla a:focus.

  • Ogólnie dziwny miszmasz w tym CSS-ie.

Wydaje mi się, że jest ok. Najpierw wczytuję dodatkowe fonty, potem Bootstrap, style Font Awesome i dalej moje style.

  • [alt=logo] to chyba najgorsze możliwe [alt] dla logo. Co mi po informacji, że to logo? Nic! Powinienem się dowiedzieć, czego to logo – bo przecież to chcesz mi przekazać.

Poprawiłem

  • Przycisk od menu powinien mieć tekstową etykietę (via > span.sr-onlylub [aria-label]).

Racja. Ale widzę, że templaty Bootstrap tego nie mają a mi nie zależy raczej na tej grupie odbiorców. Chyba nie jest to aż tak ważne w takim projekcie. Ale warto wiedzieć.

  • <div class="pt-15 slogan"><span class="glyphicon glyphicon-earphone pull-left"></span><a class="pl-10 pr-0 font-regular" href="tel:48691328000">+48 691 328 000</a></div>
    

    Jeśli ikonka niesie dodatkową informację, jak w tym wypadku (oznacza, że to numer telefonu), to powinna jej towarzyszyć etykieta tekstowa:

    <div class="pt-15 slogan">
    	<span class="glyphicon glyphicon-earphone pull-left" aria-hidden="true"></span>
    	<span class="sr-only">Telefon:</span>
    	<a class="pl-10 pr-0 font-regular" href="tel:48691328000">+48 691 328 000</a>
    </div>
    

    Warto zwrócić uwagę, że ikonka dodatkowo dostała [aria-hidden=true].

No tu już wypada to dodać. Dodałem.

  • <div class="title-big animate-7">
    					<span>Usługi</span>
    				</div>
    

    Ten element aż krzyczy, że jest nagłówkiem h2!

Poprawiłem

  • Dlatego same nazwy usług powinny być h3.

Poprawiłem

  • <i class="fa fa-globe fa-5x"></i>
    

    Ikonki wstawia się przez elementy z [aria-hidden=true] i najlepiej jako span.

    <span class="fa fa-globe fa-5x" aria-hidden="true"></span>
    

Dodałem aria-hidden, ale i chyba może zostać. FontAwesome wstawia przez i.

  • <p class="label-rk">Dodatkowe korzyści</p>
    

    To też wygląda na nagłówek

Poprawiłem

Sprawdziłem, poprawiłem

  • Czemu realizacje nie są częścią hierarchii nagłówków?

Poprawiłem

Target dodaję do linków zewnętrznych. Wolę aby użytkownik został na mojej stronie.

  • Dane kontaktowe w stopce wyglądają na dl:

    <dl>
    	<dt>
    		<span class="glyphicon glyphicon-map-marker width-25" aria-hidden="true"></span>
    		<span class="sr-only">Adres</span>
    	</dt>
    	<dd>65-963 Zielona Góra, ul. II Armii 48/6</dd>
    	[…]
    </dl>
    

    Do tego można to otoczyć w address.

Poprawiłem

  • Dość słaby ten trick z datą w stopce… Akurat to już można raz na rok zmienić.

Wydaje mi się, że to jest dobra praktyka. Nie widzę minusów tego rozwiązania. Po co zaprzątać sobie głowę aktualizacją.

 

1
komentarz 17 lutego 2017 przez Comandeer Guru (599,730 p.)

Sprawdzałem na IE, FF, Chrome, Android i wszędzie działa, więc Chrome dev sobie odpuszczę.

To ja też sobie odpuszczę :)

 Wydaje mi się, że kontrast jest wystarczający.

Normy są bardzo ściśle określone, żeby właśnie nie było "wydaje mi się". Można to bardzo łatwo sprawdzić (np. Wave to umożliwia).

Gdyby to była strona administracje państwowej lub jakaś strona dla bardzo szerokiego grona odbiorców to może trzeba byłoby co poprawić w tej kwestii.

Przy takim myśleniu już np. odsiałeś mnie jako klienta, bo część tekstu jest dla mnie nieczytelna. Tak samo jak nawigacja przy sliderze.

Nie zależy mi na tym. To nie jest aplikacja online np. do pracy na magazynie. Tu wystarczy chyba, że działa skrolowanie z klawiatury.

[…]

Tak jak punkt wyżej. Nie zależy mi na możliwości obsługi z klawiatury i focus.

To niedobrze. W tym momencie tylko utwierdzasz mnie w przekonaniu, że nie jesteś dla mnie.

To nie są jakieś wydumane zasady tylko PODSTAWY DOSTĘPNOŚCI stron. Praktycznie każdy, kto świadczy usługi w tym zakresie, powinien zdawać sobie z nich sprawę i stosować je.

Linki w menu poprawiłem

Teraz dostawiają undefined.

 Jeśli chodzi o 5 kroków to są po prostu taby z bootstrapa, które ostylowałem. Wydaje mi się, że nie powinny zmieniać adresu.

IMO byłoby fajnie mieć możliwość linkowania do konkretnych kroków. 

Nie zdawałem sobie z tego sprawy. Zmieniłem to. Zakładam, że można usunąć outline, ale trzeba jakoś czytelnie i estetycznie zapewnić wyróżnienie dla a:focus.

Tak. Z tym, że dalej nie do końca to działa, np. w Chrome w menu masz niebieskie obramowanie na niebieskim tle, co dalej jest praktycznie niewidoczne.

mi nie zależy raczej na tej grupie odbiorców. 

Coraz bardziej mnie, jako potencjalnego klienta, zrażasz… Dostawienie jednego atrybutu/elementu to aż taki problem?

widzę, że templaty Bootstrap tego nie mają

 W oficjalnym jest.

ale i chyba może zostać. FontAwesome wstawia przez i.

I robi to źle

Wolę aby użytkownik został na mojej stronie.

Za to ja jako użytkownik wolę mieć kontrolę nad tym, gdzie otwierana jest strona. Prawdę mówiąc jak chcę zostać na jakiejś stronie, to sam sobie otworzę link w nowej karcie. 

Wydaje mi się, że to jest dobra praktyka. Nie widzę minusów tego rozwiązania. Po co zaprzątać sobie głowę aktualizacją.

Jeśli strona nie jest aktualizowana co najmniej raz w roku i to jeszcze branżowa, to IMO ma średni sens. Niemniej minusem tej praktyki jest fakt, że JS może nie zadziałać i wówczas po prostu nie będzie daty w stopce. 

+3 głosów
odpowiedź 16 lutego 2017 przez Chisorq Obywatel (1,680 p.)
Text shadow praktycznie wszędzie razi w oczy. Poza tym RWD jest, dobry JS, czytelne elementy.
komentarz 17 lutego 2017 przez RadekKw Nowicjusz (190 p.)

Dziękuję.

Mnie podobał się ten nietypowy cień. Ale jak kilka osób uważa, że mnie wygląda to dobrze to usunąłem.

+1 głos
odpowiedź 16 lutego 2017 przez Biznesmurzyn Nowicjusz (230 p.)
Całość wygląda dobrze, ale te napisy w nagłówkach (usługi,realizacje) już gorzej
komentarz 17 lutego 2017 przez RadekKw Nowicjusz (190 p.)

Dziękuję.

Mnie podobał się ten nietypowy cień. Ale jak kilka osób uważa, że mnie wygląda to dobrze to usunąłem.

+1 głos
odpowiedź 16 lutego 2017 przez Mistrz0000000 Bywalec (2,780 p.)
Na pierwszy rzut oka wygląda spoko, ale jednak trochę za duzo "fajerwerków"
komentarz 17 lutego 2017 przez RadekKw Nowicjusz (190 p.)
Dziękuj za opinię.

Wydaje mi się, że "fajerwerków" nie jest za dużo. Starałem zachować umiar.
+1 głos
odpowiedź 16 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)
Text shadow totalnie nie pasuje, to żółte tło też nie bardzo mi podchodzi i za dużo "fajerwerków".
komentarz 17 lutego 2017 przez RadekKw Nowicjusz (190 p.)
Dziękuję za opnie.

Cienie fontów usunąłem. Żółte tło to sprawa gustu - kolory jak w TVN :). Wydaje mi się, że "fajerwerków" nie jest za dużo. Starałem zachować umiar.
0 głosów
odpowiedź 16 lutego 2017 przez Pietrak Pasjonat (18,850 p.)
edycja 16 lutego 2017 przez Pietrak

Antyportfolio.

 

 

komentarz 16 lutego 2017 przez Comandeer Guru (599,730 p.)

mnóstwo pustych znaczników np. <i class="fa fa-globe fa-5x"></i>

Akurat icon fonty powinno się wstawiać jako puste elementy – ale nie tak. 

komentarz 16 lutego 2017 przez Pietrak Pasjonat (18,850 p.)
Wiadomo aria, ale samo to powinno już zapewnić speak: none w css
komentarz 16 lutego 2017 przez Comandeer Guru (599,730 p.)

Powinno != zapewnia. Nikt tego nie wspiera (jedynie stara Opera próbowała wg MDN) i raczej nie zacznie to być wspierane. Zwłaszcza, że ARIA + accessibility tre dają o wiele większe możliwości.

komentarz 17 lutego 2017 przez RadekKw Nowicjusz (190 p.)

Dziękuję za ocenę.

  • Dobór kolorów wg. mnie jest bardzo zły.
  • Ten żółty z niebieskim wcale nie pasuje.

Kolory to sprawa gustu. Żółty z niebieskim to standard. Jak w TVN. :)

  • Logo przenosi nas do roku 2000.

Zgadzam się. Logo szału nie robi. Tylko takie udało mi się wymyślić/zrobić. Z chęcią nawiązałbym współpracę z jakimś dobrym grafikiem (artystą).

  • przy nawigacji dostaje #undefinded

Poprawiłem

  • brak jakiejkolwiek semantyki i dostępności dyskwalifikuje stronę

Nie zgadzam się. Myślę, że pod tym względem jest ok. Teksty sprawdzałem również z wykwalifikowanym polonistą.

  • mnóstwo pustych znaczników np. <i class="fa fa-globe fa-5x"></i>

Dodałem do nich aria. Znaczniki zrobiłem wg Font Awesome, więc chyba ok.

Poprawiłem

  • 5 kroków do Twojego sukcesu to chyba lista numerowan? hmmm? poza tym bardziej pasują tam buttony niż linki

To zwykłe taby z Bootstrapa, które ostylowałem. Mnie się podoba.

  • nagłówki, które nie są nagłówkami to troche jak po LSD

Poprawiłem

  • 2 x nawigacja

Nie rozumiem tej wskazówki.

komentarz 17 lutego 2017 przez Pietrak Pasjonat (18,850 p.)
https://pl.wikipedia.org/wiki/J%C4%99zyk_programowania#Semantyka pod tym względem semantyka, czyli zastosowanie znaczników html5

To samo lista kroków. Semantycznie to lista numerowana, ponieważ jedno postępuje po drugim.

Co do nawigacji się wycofuję, bo źle spojrzałem.

Podobne pytania

0 głosów
0 odpowiedzi 104 wizyt
0 głosów
6 odpowiedzi 393 wizyt
+2 głosów
3 odpowiedzi 431 wizyt
pytanie zadane 22 maja 2015 w Nasze projekty przez Dynamic Bywalec (2,910 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...