Responsywna strona do oceny. Wygląd, html5, mobilna wersja.

pytanie zadane 22 kwietnia 2016 w Nasze projekty przez Lid$ Mądrala (6,300 p.)

Witajcie! Pracowałem sobie kiedyś nad pewnym projektem, który całkowicie inaczej wyglądał.. mimo iż dużo się nad nim namęczyłem, natknąwszy na termin "strona mobilna / responsywna" oraz "html5" musiałem coś z tym zrobić, aby w przyszłości nie mieć problemów. Strona którą wam przedstawiam to całkowicie nowy projekt tylko wyglądu strony, prostej aż do bólu ale z zastosowaniem tychże wymienionych przeze mnie terminów.

Głownie chcę abyście ocenili kod strony napisany w html5, responsywność oraz stronę mobilną. Również starałem się dobrze podpisywać style css. A jeżeli ktoś ma ochotę może również wypowiedzieć się na temat wyglądu ponieważ zrobiłem tak aby była bardzo przyjemna do czytania, no i jestem ciekaw waszych wrażeń :D mam nadzieje, że będą miłe.

Strona http://zredukowane.pl/

4 odpowiedzi

odpowiedź 22 kwietnia 2016 przez Comandeer Guru (607,960 p.)
wybrane 22 kwietnia 2016 przez Lid$

Najlepsza

Zacznijmy z innej strony: dostępność. Kontrast między kolorem tekstu a kolorem tła jest tak bardzo mały, że mam trudności z jego przeczytaniem.
Jaki sens ma "rozwijane" logo? Widziałbym sens, gdyby to był knefel rozwijający listę usług (jak kiedyś miał GMail czy ma webowe GG).
Pomyślałbym o przepisaniu stylów z :hover również dla :focus.
Menu w responsive view wygląda fatalnie. IMO każda pozycja = jeden wiersz (zwłaszcza, że zwiększy to powierzchnię dotyku, która obecnie jest mała na moje palce!). Stąd tak popularne jest hamburger menu.
Deklaracja kodowania znaków powinna być 1. w head → https://github.com/h5bp/html5-boilerplate/blob/b5d6e7b1613fca24d250fa8e5bc7bcc3dd6002ef/dist/doc/html.md#the-order-of-the-title-and-meta-tags
W adresie arkusza czcionki ampersand jest źle zakodowany.

<h1 id="logo">
				<div id="logo_slide">
					<div class="logo_mLetter">Z</div>
					<div class="logo_letter">R</div>
					<div class="logo_letter">E</div>
					<div class="logo_letter">D</div>
					<div class="logo_letter">U</div>
					<div class="logo_letter">K</div>
					<div class="logo_letter">O</div>
					<div class="logo_letter">W</div>
					<div class="logo_letter">A</div>
					<div class="logo_letter">N</div>
					<div class="logo_letter">E</div>
				</div>
			</h1>

Dam se rękę uciąć, że to się da zrobić prościej (width + word-wrap?).

main > nav sugeruje, że to nawigacja dla głównej treści, co nie jest prawdą. Te linki powinny być raczej aside > nav.
A tak poza tym, to nie jest źle… :P

komentarz 22 kwietnia 2016 przez Lid$ Mądrala (6,300 p.)
edycja 22 kwietnia 2016 przez Lid$

"A tak poza tym, to nie jest źle… :P" haha rozwaliłeś mnie.. :D Dzięki, tego mi było trzeba :D Postaram się poprawić.

odpowiedź 22 kwietnia 2016 przez No Lime Gaduła (4,540 p.)

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

odpowiedź 22 kwietnia 2016 przez niezalogowany

< 700px stopka wystaje poza ekran - trzeba przewijać w prawo (o 2px.. ale pasek poziomy się pojawia)
"Strona dostępna pod dwoma adresami: z www i bez www. Zaprzęgnij apache, nginxa czy co tam masz do roboty i znormalizuj adres" ~ ja, gdzieś, niedawno.
Zostaw rękę Comandeera w spokoju : )
http://codepen.io/Argeento/pen/KzBXpB