Ocena wizualna strony i kodu

pytanie zadane 15 kwietnia 2016 w Nasze projekty przez mowmiheniek Stary wyjadacz (11,900 p.)

Wiatm,

Zrobiłem w wolnym czasie taką prostą stronę:

http://spotlightprint.co.uk

Chciałbym przeczytać wasze opinie. Przy kodzie starałem się opierać na poradnikach z forum i innych.

Chciałem aby była RWD i przejrzysta.

Mam nadzieję że zrobiłem za dużo błędów w kodzie.

Pozdrawiam i dziękuję za sugestie.

6 odpowiedzi

odpowiedź 16 kwietnia 2016 przez niezalogowany
edycja 16 kwietnia 2016

Uh.. no trochę błędów jest.

HEAD

<!DOCTYPE html>
```
<html>
<head>
    <html lang="en">
```
lang="en" powinien być w pierwszym znaczniku <html>, drugi obowiązkowo do usunięcia.
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
```
maximum-scale=1 - tym sposobem właśnie pozbyłeś się wszystkich niedowidzących użytkowników mobilnych, którzy chcieliby sobie powiększyć Twoją stronę. Nie używamy maximum-scale.

<script src="-- przeklęty edytor psujący linki w kodzie --ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

To na koniec body, nie blokuj renderowania strony.

<link href='https--fonts.googleapis.com/css?family=Righteous:400' rel='stylesheet' type='text/css'>
<link href='https--fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>

Fonty z googla można załadować jednym requestem. Już na przyszłość Ci mówię - jak zobaczysz, że masz w linku znak &, zamień go na & (a zobaczysz).

<link href='https--fonts.googleapis.com/css?family=Righteous:400' rel='stylesheet' type='text/css'>

type="text/css" <- niepotrzebne od czasów html4

CSSa przydałoby się zminifikować

BODY

<img src="images/top_pic.jpg" alt="background baner" />
Pierwsze co "zobaczy" czytnik ekranu to zdjęcie z podpisem "background baner". Niezbyt fajnie, należałby to wrzucić do CSSa.
Druga sprawa co do img - pojedynczych znaczników nie zamyka się "/" - to nie xhtml.
```
<a name="home"></a>
```
Co to jest i do czego to jest?! Nie zostawiamy pustych elementów, a już w szczególności linków.
Woo jest header, jest h1, jest logo jako główny nagłówek strony i nawet ma poprawny alt! Wreszcie się komuś udało : )
```
<div href="#" class="hamburger">
     <img src="images/hamburger.gif" alt="hamburger menu">
</div>
```
Hamburger menu jest przyciskiem, i taką rolę powinien pełnić w dokumencie - <button>. alt="hamburgeer menu" - po prostu "menu". Znacznie lepszym rozwiązaniem byłoby jednak wrzucenie obrazka jako tło w CSSie, a do środka buttona wpakowanie tekstu z .visuallHidden. (a.. i div nie przyjmuje atrybutu href)
```
<div class="button1">
    <li><a href="#contact"><img src="images/mail.gif" alt="contact button"/>Contact</a></li>
</div>
```
ul > li - nigdy nic pomiędzy nimi. Ten div jest tu kompletnie niepotrzebny. img jest w tym miejscu jest czysto dekoracyjny - powinien mieć pusty atrybut alt. A najlepiej gdyby rozwiązać te obrazki za pomocą pseudelementów w CSSie.

Na stronie czeka jeszcze z 2x więcej błędów... czy jest sens wypisywania ich wszystkich? (Jeśli jest, i chcesz to poprawić, z chęcią dokończę w weekend)

Polecam zapoznać się z:

"Dostępność serwisów internetowych" ~ Dominik Paszkiewicz, Jakub Dębski (.pdf)
"Semantyczny blog w HTML5" ~ Comandeer

komentarz 17 kwietnia 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Dziękuję!

Niektóre rzeczy mogę wytłumaczyć, ale reszta to moja niewiedza.

Taki link podał mi google do wklejenia dlatego też taki umieściłem (z type).

ul > li - nigdy nic pomiędzy nimi - miałem tutaj duży problem z umieszczeniem ikon w półkolu. <li> układa się poziomo blok pod blokiem. I bloki z ikonami contakt i gadgets nachodzą na siebie. Męczyłem się s tym i dopiero umieszczenie ich w divach w position: relative mi pomogło.

<a name="home"></a> - to po prostu kotwica na początek. Już wiem żeby jej nie stosować.

Jeżeli masz ochotę i czas to chętnie poczytam o moich błędach i je poprawie.

Jak widzisz h1 z logo udało mi się wstawić poprawnie, a to zasługa własnie społeczności tego forum.

"Semantyczny blog w HTML5" ~ Comandeer - czytałem wcześniej i próbowałem się zastosować, ale nie mam jeszcze takiego doświadczenia.

Jeszcze raz dziękuję.

odpowiedź 15 kwietnia 2016 przez kubaapk Nałogowiec (44,270 p.)

Tak na szybko co rzuciło mi się w oczy.

1. Skrypty wrzucaj przed </body>

<div class="title"><h2>About us</h2></div>

Nie widzę sensu tego zapisu, dlaczego nie dać klasy "title" do h2?

3. Nazwy klas nie powinny sugerować położenia elementu na stronie, od tego masz css. Mówię tutaj o np 'left-form', jak już chcesz coś takiego robić to poczytaj o BEM.

4. Nie styluj po tagach.

5. Poczytaj o emach jako breakpointach przy RWD, polecam ten artykuł - http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

komentarz 16 kwietnia 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Dzięki już poprawiam.

1. Czytałem w jakimś poradniku aby wrzucać skrypty przed zamknięciem body. Jak się nie wykonają to nie blokują ładowania całej strony.

Teraz czytam że to nie do końca dobre podejście, bo . użytkownik ma szansę, aby kliknąć na przycisk, który może nie działać

4. Rozumiem że muszę dodać do każdego tagu klasę i wtedy stylizować?

komentarz 16 kwietnia 2016 przez kubaapk Nałogowiec (44,270 p.)

Ad.4, tak, w przypadku kiedy będziesz musiał zmienić tag np z <section> na <article> nie będzie powodowało problemów z cssem.

odpowiedź 15 kwietnia 2016 przez niezalogowany

Co do kodu się nie wypowiem (bo nie bazuje w tym temacie) ale być może te guziczki po lewej warto by było je tak bardziej "uinteraktywnić"?

komentarz 17 kwietnia 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Dziękuję za poradę.

odpowiedź 16 kwietnia 2016 przez Artur Wraga Obywatel (1,870 p.)

Zakładam, żę jest to wizytówka jakiejś firmy. Fajne menu na topie , ale poniżej jest już tylko gorzej. Strona poniżej jest nudna. Musisz "uciekawić" układ w celu przełamania nudy na stronie. Ostatnio był kurs o płynnym przewijaniu oraz przycisku powrotu na górę, warto było by o tym pomyśleć jeżeli już tak chciałeś to zrobić ( widziałem, że dałeś w stopce drugie menu ale to chyba nie jest zbyt profesjonalne rozwiązanie prawda ? zauważyłem też przycik home w kazdej sekcji. Niby jest ale nie profesjonalniej wyglądał by przycisk pływający wraz z nami po stronie i czekający aż go wcisniemy aby płynnie przenieść nas do góry ( link do kursu : https://www.youtube.com/watch?v=-5Tn5CYPT5k ) ? Nie chcę się czepiać szczegółów ale to białe pole w menu dziwnie wygląda, jak by miało za niską rozdzielczość, chyba ,że tak to właśnie ma wyglądać. Podpinam się do kolegi niżej, warto dodać jakiś efekcik do przycisków.. chociaż zmiana koloru albo lekkie przesunięcie w prawo lub powiększenie ? znacznik "name" jest już z tego co pamiętam tylko dla kompatybilności wstecznej, lepiej używać id. W formularzu kontaktowym na dole dodaj max-width bo da się go rozwinąć po za granicę strony. Też jestem początkujący :) pozdrawiam

komentarz 16 kwietnia 2016 przez niezalogowany

Ło Panie..

Ostatnio był kurs o płynnym przewijaniu oraz przycisku powrotu na górę, warto było by o tym pomyśleć jeżeli już tak chciałeś to zrobić

Ten scroll to jakieś nieporozumienie. Nawet nie chce wiedzieć jak wyglądałaby jego implementacja dla 10 przycisków. Druga sprawa, scroll do kotwicy musi zmieniać adres strony - dodając do niej nazwę tej kotwicy. Tak to powinno wyglądać: http://codepen.io/Comandeer/pen/bEPbqg

znacznik "name" jest już z tego co pamiętam tylko dla kompatybilności wstecznej

Skoro pamiętasz, to mam do Ciebie pytanie. Jeśli jest do kompatybilności wstecznej, to co kiedyś robił? jak rozwiązano to teraz, dlaczego 'nie trzeba' go już używać? : )

Też jestem początkujący :)

Taka rada na przyszłość, jeśli już jesteś tym początkującym, to przed wypowiadaniem się w kwestiach technicznych, sprawdzaj wszystko kilka razy.

widziałem, że dałeś w stopce drugie menu ale to chyba nie jest zbyt profesjonalne rozwiązanie prawda ?

Stopka cloud google:

Cóż za nieprofesjonalne rozwiązanie. Naprawdę.. wstydziliby się.

komentarz 16 kwietnia 2016 przez Artur Wraga Obywatel (1,870 p.)

No tak , pytali o moje zdanie więc powiedziałem. Znowu tutaj wyskoczyło czyjeś ego. Przecież autor zapytania poprosił aby ocenić jego stronę. Więc każdy z nas może zrobić to we własnym zakresie tak ? Ja oceniłem jego stronę głównie pod względem wizualnym, WYPOWIEDZIAŁEM SIĘ WEDŁUG MOJEGO ZDANIA, nie każdemu ono musi się podobać ale to właśnie chyba po to jest to forum aby KAŻDY z osobna mógł powiedzieć SWOJE ZDANIE tak ? Jeśli chodzi o "name" to swoją wiedzę zaczerpnąłem właśnie z kursu który umieściłem w linku. Pan Zelent wypowiedział się w tej kwestii. Obejrzyj i zobacz co powiedział. Być może nie zrozumiałem o co chodziło :) jeżeli tak to przepraszam za wprowadzanie w błąd. Sprawy techniczne właściwie nie zostały przeze mnie poruszone. Jedyne o co mi chodziło to ,że MOIM ZDANIEM nie ma sensu dawać 30 przycisków powrotu na stronę główną i robienia 15 menu w tym samym celu bo sprawę może rozwiązać jeden przycisk ALE TO JEST MOJE ZDANIE. Autor pytania nie musi brać go pod uwagę i ty też jeżeli ci się nie podoba. Pozdrawiam :)

PS. chyba trochę z tym linkiem do google też oszukałeś bo ja tam nie widzę zdublowanego menu do nawigacji po aktualnie oglądanej stronie.

komentarz 16 kwietnia 2016 przez niezalogowany

Ależ ja się nigdzie nie doczepiłem TWOJEGO ZDANIA na temat tego, jak coś powinno wyglądać - sam się z nim w większości zgadzam. Doczepiłem się tylko do proponowanych rozwiązań technicznych. (No i do nieprofesjonalności drugiego menu w stopce, ale chyba też mogę mieć własne zdanie, nie? : ) bardzo często widuję zduplikowaną nawigację lub wręcz jej rozszerzoną wersję)

Nadal nalegam abyś odpowiedział na pytanie: do czego służy atrybut name?

komentarz 16 kwietnia 2016 przez Artur Wraga Obywatel (1,870 p.)

Nie zabardzo wiem dalczego czepiłeś się akurat tego name. Atrybut name dla meta jest ok ale np to ?

moim zdaniem powinno być id. Zatem wytłumacz mi o co chodzi to czegoś się nauczę przy okazji :)

komentarz 16 kwietnia 2016 przez niezalogowany

Ooo.. bo tu jest name..

Chyba Cie muszę przeprosić bo zaszło spore nieporozumienie. Niezbyt jasno wyraziłeś o który name Ci chodzi. Nawet po przejrzeniu tego kodu na wylot, do mojej świadomości nie dotarło, że taki atrybut znajduje się w tym miejscu. Myślałem, że chodzi o name w formularzu, gdzie po prostu standardowo się go używa (służy do identyfikacji przesłanych danych).

Cały ten kwiatek <a name="about"></a> jest tutaj niepotrzebny.

odpowiedź 16 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

Na szybko:

<html>
<head>
    <html lang="en">

Popraw to

    <link rel="icon" type="image/png" href="favicon.ico?v=2" type="image/x-icon">

2 razy type, którego w HTML5 nie potrzeba stosować

    <link href='https://fonts.googleapis.com/css?family=Righteous:400' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>

To możesz wrzucić do CSS za pomocą @import

odpowiedź 16 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Zacznę od kodu:

<a name="about"></a>

Co to takiego? zamiast robić pusty znacznik możesz spokojnie zastosować kotwiczkę trochę innego typu. Do elementu <section class="bottles"> dodaj id="bottles" i nie będziesz musiał dodawać kolejnego znacznika(patrz wyżej).

Grafiki w <aside> zastosował bym mimo wszystko <figure>.

Znaczniki <p> w nich ten text wygląda mocno 2/10 zastosuj tam inną czcionkę, widzę że masz wgraną "Roboto", ona jest praktycznie jedną z najlepszych według standardów google material design. Jak ją wstawisz to twoja strona raptem zostanie odmłodzona o kilka lat :p [link tutaj!] Lepiej prawda? (dodałem tam również line-height: 1.6em;)

Jeżeli chodzi o cienie... hmm zmienił bym na zupełnie inne [link]

Dla znacznika <h2> również ustaw czcionkę :p

Jeszcze jedna bardzo ważna sprawa, pewnie cię to urazi bo widziałem że trochę czasu się z tym męczysz, ale całe menu bym przebudował. Nie wygląda ono na nowoczesne... wręcz przeciwnie. Na moje oko to taki 2006 rok. Wygląda to słabo. Jeżeli już chcesz uparcie przy nim zostać to zmienił bym na nim ikony, mają one taki wredny cień, to on powoduje że to wygląda słabo. Jeżeli chodzi o ikony to polecam:

Font-awesome

Fontello

Jeżeli chcesz trochę zapoznać się ze standardami 2016 roku to zapraszam go zapoznania się z tym filmem.

Podsumowanie!

Strona wygląda staroświecko, ale drobne zmiany designu powinny pomóc. Zadbaj o fonty cienie i grafiki. Jeżeli chodzi o resztę błędnych znaczników to widzę że koledzy już ci wypatrzyli. Postaraj się przełamać rutynę, każda sekcja wygląda tak samo, zmienił bym to tak żeby ta strona dostałą życia. Osobiście moja ocena tej strony to 4/10, ale spokojnie! Drobne korekty i będzie dużo lepiej.

komentarz 17 kwietnia 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Trochę mnie zasmuciłeś. Menu specjalnie nie chciałem zrobić w jednej linii. Teraz praktycznie każda strona tak ma. Nawet na filmiku jest wspomniane, że teraz strony wyglądają bardzo podobnie. Zgodzę się ze czcionka i cienie nie wyglądają dobrze.

Czy jak usunę cienie i wypukłość ikon to według ciebie będą wyglądały lepiej? Może nawet zrobię z nich wektorową grafikę.

Dziękuję, nie będę się podawał.