Strona do oceny

pytanie zadane 17 października 2016 w Nasze projekty przez Sebastian Westfal Obywatel (1,020 p.)

Witam, wykonałem stronę w HTML, CSS (less), bootstrap i jQuery (chociaż tutaj mam dużo do dodania). Proszę o ocenę i rzeczy, które mogę zmienić. Jeśli ktoś chciałby zobaczyć style less to chętnie udostępnienie. W sekcji portfolio muszę poprawić respasywnosc.

Link do strony: http://sebastian-it.16mb.com/projex/

komentarz 17 października 2016 przez Ehlert Ekspert (212,670 p.)

Dla mnie bomba

komentarz 17 października 2016 przez Sebastian Westfal Obywatel (1,020 p.)

Oczywiście layout nie jest do końca mój,j a raczej zająłem się tylko kodowaniem.

komentarz 18 października 2016 przez Bareduuu Nowicjusz (100 p.)

Ja bym zmienił górne menu. Gdy jest strona maksymalnie zescrolllowana do góry to menu wtapia się w header. To znaczy ma to samo tło co header i nie ma cienia. A jak strona zostaje przewinięta w dół to menu wygląda tak samo jak teraz.

Taka jest moja sugestia. A layout ogólnie ciekawy.

4 odpowiedzi

odpowiedź 18 października 2016 przez jpacanowski VIP (101,940 p.)
edycja 18 października 2016 przez jpacanowski

<html>

Gdzie język strony?

<a class="navbar-brand" href="#">
   <img src="img/logo2.png" alt="Logo">
</a>

Logo powinno być głównym nagłówkiem -> H1. A więc: h1 > a > img
http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki
Źle użyty tekst alternatywny. Powinna to być nazwa firmy, organizacji, strony itp., a więc np. [alt="ProJex - One Page Business Theme"]

			<div class="col-md-4 col-sm-12 img">
				<img src="img/html.png" alt="html">
				<h2>HTML5 & CSS3</h2>
				<p>Sed fermentum, ante vel sagittis adipiscing, purus nisi ultrices dolor, a aliquam nunc lacus in turpis. Nunc molestie nisi diam. Donec commodo quam sit amet mauris pellentesque, in commodo lorem venenatis. Nullam consequat venenatis fringilla.</p>
			</div>

			<div class="col-md-4 col-sm-12 img">
				<img src="img/seo.png" alt="seo">
				<h2>SEO Optimization</h2>
				<p>Sed fermentum, ante vel sagittis adipiscing, purus nisi ultrices dolor, a aliquam nunc lacus in turpis. Nunc molestie nisi diam. Donec commodo quam sit amet mauris pellentesque, in commodo lorem venenatis. Nullam consequat venenatis fringilla.</p>
			</div>

			<div class="col-md-4 col-sm-12 img">
				<img src="img/design.png" alt="design">
				<h2>Graphic Design</h2>
				<p>Sed fermentum, ante vel sagittis adipiscing, purus nisi ultrices dolor, a aliquam nunc lacus in turpis. Nunc molestie nisi diam. Donec commodo quam sit amet mauris pellentesque, in commodo lorem venenatis. Nullam consequat venenatis fringilla.</p>
			</div>

W tym wypadku [alt] powinien być pusty, gdyż grafika jest czysto dekoracyjna. Nagłówek wystarczy.

Pola wprowadzania danych w formularzu nie mają etykiet - <label>. Zawsze możesz je ukryć: https://gist.github.com/pampels/7097656

Aż się prosi aby użyć na tego typu stronie <section>.

komentarz 18 października 2016 przez Pietrak Pasjonat (18,850 p.)

W bootstrapie jest .sr-only.

odpowiedź 17 października 2016 przez falauthy Stary wyjadacz (11,550 p.)

Ogólnie layout dobrze pocięty. Jedynie co zauważyłem, to w sekcji kontakt przy RWD buttony są praktycznie przyklejone do siebie.

Btw. skąd bierzesz layouty do pocięcia?

komentarz 17 października 2016 przez Sebastian Westfal Obywatel (1,020 p.)

Wpisuje w Google po prostu free layout psd. Lubię minimalizm i czegoś takiego szukam. Nie mam żadnej stałej strony.

komentarz 17 października 2016 przez falauthy Stary wyjadacz (11,550 p.)

Sam niestety trafiam na psd typowo pod landing page i szukam jakieś konkretnej strony.

odpowiedź 18 października 2016 przez Eimens Maniak (69,240 p.)

odpowiedź 18 października 2016 przez IBB Gaduła (3,020 p.)

Ogólnie stronka wygląda fajnie, kod też jest nieco lepszy niż większość stron do oceny zamieszczanych na forum. Ale kilka rzeczy jest do poprawy:

właściwie cała struktura nagłówków jest nieprawidłowa - 5 nagłówków h1, a brak tego, który faktycznie opisuje treść całej strony? "Przeskakiwanie" poziomów nagłówków, np. h1 "The Latest News", a za nim od razu h4. A co się stało z h2 i h3?
alternatywne opisy obrazków do poprawy
przydałoby się trochę więcej semantycznych elementów HTML5 - gdzie header, main, sections?
przycisk wyświetlający menu na telefonie nie ma tekstu - dla osoby niewidomej jego przeznaczenie będzie kompletną niewiadomą
niepoprawna kolejność fokusa - wyżej wymieniony przycisk powinien być zamieszczony bezpośrednio przed menu, które kontroluje (obecnie oddzielony jest od niego logo)
menu jest niedostępne przy wyłączonym JavaScript, choć w przypadku strony one-page nie ma to większego znaczenia. Niepotrzebnie jest jednak wyświetlony wtedy przycisk menu, który bez JavaScript przecież nie działa
linki do mediów społecznościowych w sekcji "Our Wonderful Team" nie mają tekstu. Powinny być też zgrupowane za pomocą listy
dlaczego do pól formularza dodałeś atrybut "aria-describedby", który nie jest powiązany z żadnym elementem na stronie? Nigdzie nie widzę elementu #basic-addon1

<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
<input type="text" class="form-control" placeholder="E-mail Adress" aria-describedby="basic-addon1">

czy formularz kontaktowy nie będzie posiadał przycisku zatwierdzającego dane?
słaby kontrast pomiędzy białym tekstem a tłem #FF5959 oraz pomiędzy placeholderami w polach formularza a białym tłem (wiem, że to nie Ty dobierałeś kolory, ale warto pamiętać o podstawowych wymaganiach dostępnościowych i ewentualnie zmodyfikować design tam, gdzie jest to konieczne)