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

Frontend - Layout - Ocena

VPS Starter Arubacloud
+4 głosów
300 wizyt
pytanie zadane 15 maja 2016 w HTML i CSS przez makoso Mądrala (7,380 p.)
Witajcie dawno nie poddawałem nic ocenie ;)
Dzisiaj napisałem sobie taki layout:
http://kmakowski.nazwa.pl/domweselny/pages/
Zazwyczaj słabo szło mi napisanie czegoś co ładnie wygląda, teraz mi się podoba i chciałbym poznać opinię innych :)
pozdrawiam i liczę na dobrą krytykę co można zmienić :)

6 odpowiedzi

+3 głosów
odpowiedź 15 maja 2016 przez Ivan Maniak (60,650 p.)
  • Mogłeś użyć tagu section zamiast div. W miejscach gdzie masz O nas, Oferta itd,
  • Label jest dziwnie ułożony, ani to na środku, ani po lewej,
  • Pod przyciskiem "pokaż mapę" margin nadany footerowi - nie ładnie to wygląda,
  • Tekst na przycisku  "pokaż mapę" będzie ładniej wyglądał, gdy będzie wyrównany do środka,
  • Zamiast a, użyłbym button - oczywiście chodzi mi o przycisk "pokaż mapę",
  • Kłóciłbym się co do outline-u dokumentu. Na przykład "i żyli długo i..." dałbym do p, Logo w nawigacji do h1, tak samo z numerem telefonu i emailem - do p.
+2 głosów
odpowiedź 15 maja 2016 przez Comandeer Guru (599,730 p.)
  • W Chrome słabo widać outline dla linków. W tym wypadku lepiej przepisać style z :hover także dla :focus.
  • W widoku mobilnym nie ma jak zamknąć otwartego menu.
  • W kodzie strony jest pusta linia przed DOCTYPE - możliwy tryb quirks w rzadkich przypadkach.
  • Brak określenia języka strony poprzez html[lang]
  • <a href="#!" class="brand-logo center orgeano">POTAŃCÓWKA</a>

    To powinien być główny nagłówek strony: http://www.webkrytyk.pl/krytyka/lexy.com.pl/#naglowki

  • <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="fa fa-bars"></i></a>

    To jest przycisk, nie link. Dodatkowo nie posiada treści (sama ikonka nie jest treścią!).

  • <h2>... i żyli długo i szczęśliwie ... <br/>Kopciuszek</h2>
    

    Podtytułów nie oznacza się jako nagłówki. Do tego to chyba cytat, a je oznacza się przy pomocy blockquote > cite.

+1 głos
odpowiedź 15 maja 2016 przez Eimens Maniak (69,240 p.)
edycja 15 maja 2016 przez Eimens

No więc tak, ciesze się że w końcu mogę ocenić sam design a nie kod. W moich pracach nigdy nie musiałem używać większego borderu niż 2px. U ciebie jest on 3 i do tego jakoś słabo zaokrąglone :/ Zmienił bym obramowania na cieńsze i z dotted dał dashed. No i oczywiście przyśpieszył transition. Dlaczego? Żeby ta strona nabrała lekkości, nie bój się wolnej przestrzeni, dodał bym na stronie >1200px o wiele większy padding/margin w sekcjach, niech ta strona dostanie trochę miejsca. Nie musisz wszystkiego blisko klepać bo zaczyna to wyglądać słabo. Co do sekcji "Masz jakieś pytania?"  Wyobraź sb  że taką ogromną czcionkę masz na telefonie. Moje pierwsze słowa brzmiały by tak "O co to jakaś wersja dla dziadków?" O wiele za duże to wszystko. Początek strony zapowiadał się ok, było wiele wolnego miejsca wyglądało to lekko i nowocześnie (mimo że czcionka w menu taka sobie + hover też jest tam słaby). Potem niestety czar prysł :( 

Kilka zmian i layout będzie o wiele ładniejszy, powodzenia :p Leci yes

+1 głos
odpowiedź 15 maja 2016 przez IBB Gaduła (3,020 p.)
  • powinieneś poprawić strukturę nagłówków. Tak jak już wcześniej wspomniano, tekst "i żyli długo...." nie powinien być oznaczony jako nagłówek, a co za tym idzie nagłówki, "O nas", "Oferta", itd. powinny być h2, nie h3. Linki "Wesela", "Chrzciny" itd. w sekcji "Oferta" nie powinny być oznaczone jako nagłówki - umieść je w liście ul. Podobnie numer telefonu i adres mailowy - to nie są nagłówki. Dodałabym też nagłówek przed mapą, bo inaczej umieszczona ona jest w sekcji "Masz jakieś pytania? Zadzwoń lub napisz", co z punktu widzenia struktury strony trochę nie ma sensu
  • link wyświetlony jako strzałka w dół powinien posiadać tekst (może być ukryty), albo atrybut "aria-label"
  • w kodzie strony są 2 główne menu - jedno pokazane na mniejszych urządzeniach, drugie na większych. Lepiej byłoby mieć jedno (i tylko zmieniać sposób jego wyświetlania), ale jeśli nie jest to możliwe, to nieaktywne menu dla urządzeń mobilnych powinno być ukryte za pomocą "display: none", a nie jedynie "translate". Translate powoduje, że menu to nie jest widoczne na ekranie, ale wciąż jest dostępne dla użytkowników klawiatury (linki w menu nadal uzyskują fokus, choć ich nie widać) i osób korzystających z technologii asystujących, takie jak czytniki ekranu
  • warto byłoby dodać atrybuty ARIA do przycisku uruchomiającego główne menu na urządzeniach mobilnych (no i oczywiście tekst, jak to już wcześniej wspomniano)
  • nie ma potrzeby używać obrazków o wymiarach 1920px x 1275 na urządzeniach mobilnych. Dodaj atrybut "srcset" do elementów img, i z dwie kopie każdego obrazka o alternatywnych rozmiarach (dla telefonów i tabletów)
  • na małych ekranach (width 320px) część treści zawartej w sekcji "Masz jakieś pytania..." jest ucięta

Poza tym (i jest to już całkowicie subiektywna opinia), nie za bardzo podoba mi się kolorystyka. Jest to strona domu weselnego, ale główne zdjęcie przykryte elementem "parralax-body", z background: rgba(0, 0, 0, 0.7), jest bardzo ciemne. Wiem, że bez tego ciemniejszego tła tekst byłby mało widoczny, ale rozważyłabym inne rozwiązania, bo efekt końcowy jest dość przygnębiający, co kłóci się z nazwą i tematyką strony (no, zależy jakie kto ma poglądy na temat małżeństwa ;P )

0 głosów
odpowiedź 15 maja 2016 przez dracconi Nowicjusz (240 p.)
Wygląda ładnie. Zmień ramki buttonów, bo takie sobie :/
0 głosów
odpowiedź 15 maja 2016 przez Paweł123 Nałogowiec (33,500 p.)

Strona bardzo ładna 10/10 yes

Mam pytanie jak zrobiłeś galerie zdjęć? 

Podobne pytania

0 głosów
1 odpowiedź 245 wizyt
pytanie zadane 11 listopada 2016 w Nasze projekty przez Radek Wawrzyk Nowicjusz (200 p.)
–2 głosów
1 odpowiedź 162 wizyt
pytanie zadane 19 czerwca 2017 w HTML i CSS przez Mistrz0000000 Bywalec (2,780 p.)
+1 głos
0 odpowiedzi 494 wizyt
pytanie zadane 17 sierpnia 2020 w HTML i CSS przez Jasiulek Obywatel (1,090 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!

...