Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Promowane odpowiedzi

SpartaN    27

Autor: @SpartaN
Tematyka: Strona firmowa

 

Witam, proszę o ocenę mojego nowego projektu. Zarówno code review jak i ocena samego layoutu. Uwaga po ostatnim poście wziąłem do serca wszystkie rady. Nowa strona posiada rwd i myślę, że jest lepsza pod względem kodu jak i wyglądu :D 
Git : https://github.com/Spartanoff/Company
Link : http://spartancode.ct8.pl/company/

Liczę na konstruktywną krytykę.
P.s Js autorski, więc tam raczej będą błędy ;v

 

SS w załączniku :D 

screencapture-spartancode-ct8-pl-company-1504376478882.png

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
rolnik63    171

Moim zdaniem nadal za duże elementy w stopce i jednak zmniejszyłbym obrazki wyżej stopki i niżej headeru a reszta nawet może być jak na kolejny raz, jeszcze trochę popracujesz i będzie sztosik 😂

  • Nie lubię tego! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
włoszka    112

ziomek divy się nie trzymają kupy rozjechało mi sie all na mojej rozdziałce  image.thumb.png.b0d4886d2c49b0ec4fb52e4dc0d53cd0.png

Edytowane przez włoszka
  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SpartaN    27
8 minut temu, włoszka napisał:

ziomek divy się nie trzymają kupy rozjechało mi sie all na mojej rozdziałce 

Jaka rozdzielczość ? Można prosić o screen`a ?

 

Edit. 0.0 jestem w szoku, jutro będę kombinował co nie gra ;v 

Edytowane przez SpartaN

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Perry    15

Za dużo rozmiarów czcionki :D

Ogólnie fajne, ale dajesz "transition" w .klasa:hover dlatego animacje działają tylko podczas najechania i jak zjeżdżasz myszką z elementu to natychmiastowy powrót co troche słabo wygląda. Dlatego polecam dać to transition w .klasa bez hover.

 

 

  • Lubię to! 1
  • Nie lubię tego! 2

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
QurczaX.    140

robione na sztywno pod twoją rozdzielczość, na 1366x768 rozjechane, jak dam w przeglądarce 75% (2x CTRL i minus) to jest dobrze, kod do poprawy

nie sprawdzałem czy używasz, ale spróbuj wartości procentowych zamiast pikseli

Test Responsive and Device-specific Viewports | Web ... jak korzystasz z chrome to polecam

Edytowane przez QurczaX.
  • Super 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SpartaN    27

Dzięki za wszystkie rady ! Dziś rozpocznę kolejny projekt i będę starał się unikać wyżej wymienionych błędów ;) !

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Lord Fenrir    611

Podoba mi się, że zniknęła część błędów z poprzedniego projektu, ale pojawiły się nowe. Nadal brakuje Ci poczucia estetyki przez co design wygląda strasznie, polecam Ci zobaczyć jak wyglądają przykładowe projekty na Behance lub  Dribbble - Show and tell for designers

 

- używasz 'lang=pl' mimo, że cała strona jest w języku angielskim

- główny plik ze stylami CSS zawszę powinien iść na sam koniec, gdyż ma wtedy najwyższy priorytet

- dlaczego nie definiujesz głównej czcionki dla body?

- tak jak w poprzednim projekcie, tutaj można dodać 'role=button' albo przerobić na button

<a href="#">SCROLL DOWN</a>

- brak głównego kontenera co skutkuje koślawym RWD

- nazewnictwo klas do poprawy, używaj fraz, które opisują sam element a nie jego położenie

- a co to ma być?

</div><br><br>
</body>
  <script type="text/javascript">
    ...
  </script>
  <script type="text/javascript">
    ...
  </script>
</html>

- ponownie ustawiasz zbyt duże ikony, ani to wskazane, ani to estetyczne

- dołączasz html5shiv, a mimo wszystko używasz flexa i vh, które są interpretowane od IE10-11, więc po co to?

- mimo, że jakoś to wygląda to CSS to poprawy. Ustawiasz na sztywno wysokość i szerokość elementów głównych, a tak w przypadku projektu z dostępnością do urządzeń mobilnych nie robi się.

- nie wszędzie zastosowano odpowiednie prefixy

- to jest jakiś żart?

/* CSS FOR TABLET - 1200px */

- wiesz, że zamiast robić tak [1] możesz zrobić tak [2]:

@media screen and (max-width: 1200px) {
  .info-bar {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 1200px) {
  .info-bar h2, .info-bar p {
    margin-left: 10%;
  }
}
@media screen and (max-width: 1200px) {
  .about-content p {
     width: auto;
     padding: 20px;
     font-size: 23px;
  }
}
@media screen and (max-width: 1200px) {
  .info-bar {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .info-bar h2, .info-bar p {
    margin-left: 10%;
  }
  .about-content p {
     width: auto;
     padding: 20px;
     font-size: 23px;
  }
}

 

Przed zastosowaniem Media Queries należy się najpierw zapoznać z zasadami poprawnego pisania kodu przed rozpoczęciem pracy, dodatkowo zapoznaj się z tabelką rozdzielczości bo jeżeli dla Ciebie szerokość ekranu 1200px jest definiowana dla tabletów to niedobrze. Nie pisz CSSa pod siebie, pod własną rozdzielczość bo to największy błąd jaki możesz popełnić. 

  • Lubię to! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Mendelson.    270
16 godzin temu, SpartaN napisał:

Jaka rozdzielczość ? Można prosić o screen`a ?

 

Edit. 0.0 jestem w szoku, jutro będę kombinował co nie gra ;v 

U mnie jest wszystko okej.

Wracając, elementy są naprawdę za duże, one się nie pojawiają, a atakują użytkownika, zmniejsz to i nie rozumiem tego, że jest tekst za grafiką z tym "Panem", kwadraty sie nie mieszczą, no to jest do poprawy :D

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SpartaN    27
7 godzin temu, rogue napisał:

 

Przed zastosowaniem Media Queries należy się najpierw zapoznać z zasadami poprawnego pisania kodu przed rozpoczęciem pracy, dodatkowo zapoznaj się z tabelką rozdzielczości bo jeżeli dla Ciebie szerokość ekranu 1200px jest definiowana dla tabletów to niedobrze. Nie pisz CSSa pod siebie, pod własną rozdzielczość bo to największy błąd jaki możesz popełnić. 

Akurat ten błąd wkradł się, przez artykuł z internetu  ( Mobile first vs Desktop first - Którego podejścia używać w pracy przy... )

A konkretniej :

 

CSS globalny - stylowanie formularzy, przycisków, komunikatów

CSS dla telefonów - urządzenia o szerokości ekranu poniżej 768px *

CSS dla tabletów - urządzenia o szerokości ekranu poniżej 1200px *

CSS dla desktop - urządzenia o szerokości ekrany powyżej 1200px *

 

Dzięki za rady :D Szanuję mocno ;)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
BlackIce    3,474
1 godzinę temu, rogue napisał:

Ja mam notebooka o szerokości ekranu równej 1024px i nie jest to tablet

Rozdzielczością podpada pod tablet niestety i musisz z tym żyć ;)

Co powiesz na iPada Pro, który ma 1024 x 1366 pixeli? O ile dla 1366 wyświetlisz jeszcze wersję desktopową, to dla 1024 już nie.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Lord Fenrir    611

To, że klasyfikuje się pod rozdzielczość tabletów (<1200px i tablet, co to się dzieje :v) to nie znaczy, że w tym przypadku należy używać styli dla urządzeń przenośnych (zmniejszenie ilości kolumn, mobilne menu itp.). Polecam używać tej tabelki dla pisania styli pod RWD Overview Bootstrap

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Lord Fenrir    611
16 minut temu, Salva napisał:

@rogue pisząc stronę dbasz jeszcze oprócz rozdzielczości o to, czy urządzenie to desktop / tablet / smartfon?

 

Dbam o przeglądarki. Nie stosuję AWD więc nie interesuje mnie kto czego używa jeżeli w danym przypadku tylko warunek szerokości ekranu jest brany pod uwagę. Do tej pory wszystkie moje projekty czy to HTMLe, skórki pod WP czy Ghosta wyświetlały się poprawnie na każdym urządzeniu, więc poza dbaniem o rozdzielczość ważna jest jeszcze sama przeglądarka, nic więcej. Nawet najpopularniejszy szablon do WP - Avada w swoich stylach nie ma podziału na 'desktop', 'tablet', 'tv', po prostu leci na 'screen' lub ogólnej szerokości a to na jedno wychodzi.

 

Skoro poruszyłem temat RWD to dopowiem jeszcze coś. Osobiście uważam, że nie sztuką jest znać regułki, a sztuką jest poprawnie je wykorzystać. Tutaj chcąc nie chcąc wkracza temat user-friendly. Idealnym przykładem jest projekt autora, od najmniejszej możliwej szerokości aż do 1200px strona wygląda tak samo dodając fakt, że projektowano w myśl desktop-first no to strona jest niestety mało przyjazna dla targetu jakim są użytkownicy.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
BlackIce    3,474

@rogue skoro nie interesuje Cię jakiego sprzętu używa user po wejściu na Twoją stronę i sam korzystasz jedynie z wyznacznika szerokości ekranu, to po co to oburzenie w stylu '1200px i tablet?!'

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Lord Fenrir    611

To był moja drobna uwaga odnośnie definiowania wyglądu strony dla ekranów posiadające blisko 1200px szerokości jako tablety.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


×