Podejście pixel-perfect

Zauważyłem, że mam obsesję na punkcie stylizacji. Gołym okiem potrafię dostrzec, że coś jest o 1px za bardzo przesunięte w konkretną stronę. Gdzie tylko mogę, to stosuję flex w celu wyśrodkowania elementów wewnątrz pojemnika. A gdy stylizuję jakieś pojemniki to dosłownie robię to z kalkulatorem licząc ile paddingu, borderu i innych zużywam (tak, by zmieścić się w pojemniku).

Nie przesadzam?

Problem w tym, że ci się to i tak rozleci. Wystarczy, że ktoś będzie miał inne wymiary okna i już niekoniecznie będzie tak ładnie wyglądało jak sobie założyłeś.

Lepiej optymalizować pod użytkownika, a nie pod siebie.

Podejście "pixel perfect" jest dość egoistyczne, bo webdesigner sobie coś wymyśla i tak ma być.

Teraz natomiast przeważa paradygmat "responsive web design" co się jednak trochę kłóci z pixel perfect o tyle, że wychodzi się od użytkownika i próbuje się dostosować do tego, czego faktycznie użytkownik używa (np. jaki faktycznie ma rozmiar okna), zamiast narzucać wszystkim na siłę perfekcyjny co do piksela layout wymyślony przez webdesignera.

Gołym okiem potrafię dostrzec, że coś jest o 1px za bardzo przesunięte w konkretną stronę.

Spostrzegawczość to dobra cecha, chociaż nie wiem, czy dobrze ją wykorzystujesz.

Chodziło mi o sytuacje, gdy layout strony mam narzucony. Czyli moje zadanie polega na ułożeniu contentu w określony sposób. Teraz akurat robię taką apkę opartą na grid , gdzie kilka razy korzystałem z kalkulatora (ile marginesu pozostanie jeżeli button ma taką i taką szerokość uwzględniając border, itp).

Dla przykładu widzicie co tutaj mi nie pasuje?

Tak, widzę, ale to się kłóci z moją definicja pixel-perfect.
To jest kwestia równomiernego rozłożenia na stronie.

Pixel-perfect to jest wtedy jak dostajesz makietę w jpg od designera i tester wymaga żeby elementy na stronie były co do piksela identyczne jak na makiecie.

Been there, done that. Wolę backend :-P Bo weź wytłumacz że nie zawsze się da zrobić tak jak grafik narysował. Szczególnie że narysował dwa kolejne kroki formularza np z innymi paddingami a ty jako Dev zrobisz przecież 1 layout żeby formularz był spójny.

@opiszon: Lata temu w pracy miałem makiety od grafika i podobne elementy potrafiły być delikatnie przesunięte o parę px. Handlowcy odkryli plugin pixel perfect dla chroma i jakie przeboje były, jak na widoku X elementy był przesunięty o x px względem tego samego elementu na widoku Y. Trzeba było zrobić spotkanie graficy, programiści, handlowcy, aby wyjaśnić sytuację.

No ja trochę odetchnąłem jak za przygotowywanie makiet zabrał się dział UX bo wcześniej wszystko przewalali przez grafika który umiał jpgi wypluwać tylko.

Z działu UX to już ładnie makiety w zeplinie i można było dyskutować (a i css od razu wygenerowany jak dobrze UX zrobił, jak źle to można było reklamować makietę ;-) )

opiszon napisał(a):>

Pixel-perfect to jest wtedy jak dostajesz makietę w jpg od designera i tester wymaga żeby elementy na stronie były co do piksela identyczne jak na makiecie.

Been there, done that. Wolę backend :-P Bo weź wytłumacz że nie zawsze się da zrobić tak jak grafik narysował. Szczególnie że narysował dwa kolejne kroki formularza np z innymi paddingami a ty jako Dev zrobisz przecież 1 layout żeby formularz był spójny.

Michalk001 napisał(a):

@opiszon: Lata temu w pracy miałem makiety od grafika i podobne elementy potrafiły być delikatnie przesunięte o parę px. Handlowcy odkryli plugin pixel perfect dla chroma i jakie przeboje były, jak na widoku X elementy był przesunięty o x px względem tego samego elementu na widoku Y. Trzeba było zrobić spotkanie graficy, programiści, handlowcy, aby wyjaśnić sytuację.

Też miałem podobne historie, gdzie miałem zrobić identycznie jak na designie, gdzie afera była jak różnica 2 pikseli była. I weź potem wytłumacz, że się nie da, bo ktoś odpali na komórce i idąc w RWD zawsze będzie różnica między oryginalnym designem. Albo np. taka kwestia, że rozmiary się nie zgadzały, bo Photoshop w inny sposób liczył wysokość fonta niż CSS (nie pamiętam dokładnie, ale o coś takiego chodziło) i próbując odtworzyć design wg wytycznych zrobiłem to inaczej, na tyle, na ile mi CSS pozwalał.

Albo np. wielka awantura o kolory, że nie był dokładnie taki kolor, jak na designie (problem w tym, że na moim monitorze nie było w ogóle widać różnicy, ale widocznie graficy mieli przydzielone lepsze monitory). Tzn. nie zrozumcie mnie źle - myślę, że troska o detal (w tym o kolor) jest ważna. Po prostu nigdy nie będzie idealnie - w szczególności ten sam kolor będzie wyglądał inaczej na różnych ekranach czy nawet w różnych ustawieniach monitorów (np. jasność, night mode itp.).

Dlatego jak widzę hasło "pixel perfect" to dla mnie to oznaka czegoś, co mocno się kłóci z podejściem, które powinniśmy stosować, czyli dostosowanie się do użytkownika aka RWD, a nie robienie wszystkiego pod design.

Chociaż mam wrażenie, że autor wątku może nie do końca wyznaje tak skrajną wersję "pixel perfect", z jaką ja miałem do czynienia, a chodzi bardziej o przywiązywanie wagi do szczegółów i zwracanie uwagi na estetykę i pewien ład.

Jak ja tego nienawidzę... u jednego klienta tak mam że grafik robi layout i potem testerki wymagają by wszystko było co do 1px. Dosłownie mam ochotę rzucić w nie klawiaturą gdy dostaje uwagę w stylu "padding między tekstem a sekcją X jest o 2 px za duży". Ich nie obchodzi to, że fonty sie różnie renderują na różnych silnikach... A najgorsze jest to, że projektują nową podstronę i mówią "ta podstrona ma tylko sekcje takie jak w innych więc nie wyceniajcie za dużo bo powinno dać się wykorzystać to co istnieje". Wchodzi do projektu no niby podobne ale... kolorki inne paddingi inne... dopytujesz się czy przekopiować rzeczywiście bo są różnice "tak przekopiować" więc wyceniasz na kopiowanie i wrzucasz po czym dostajesz uwgi że przeciez na projekcie jest inaczej.... Całe szczęście już się wypisuje z roboty w tym projekcie.

ehhhhh napisał(a):

Jak ja tego nienawidzę... u jednego klienta tak mam że grafik robi layout i potem testerki wymagają by wszystko było co do 1px. Dosłownie mam ochotę rzucić w nie klawiaturą gdy dostaje uwagę w stylu "padding między tekstem a sekcją X jest o 2 px za duży". Ich nie obchodzi to, że fonty sie różnie renderują na różnych silnikach... A najgorsze jest to, że projektują nową podstronę i mówią "ta podstrona ma tylko sekcje takie jak w innych więc nie wyceniajcie za dużo bo powinno dać się wykorzystać to co istnieje".

Kwestia współpracy. Jeśli mamy silos programistów i silos grafików/designerów, to zaczynają się przejawiać mroczne strony agile - czyli założenia się zmieniają co chwila. Czyli robisz widok, nikt ci nie mówi, że to będzie jeden z wielu podobnych widoków, więc nie dzielisz tego specjalnie na komponenty. A potem się okazuje, że jednak wizja designera jest taka, że powinno dać się wykorzystać to co istnieje".. Ale i w drugą stronę - zauważasz, że to warto wydzielić do komponentu, więc wydzielasz, jednak okazuje się, że designer nie pomyślał o komponentach, tylko w nowym widoku rzeczy są podobne, ale jednak nie do końca, więc najlepsze co można zrobić, to copy paste i zmodyfikować.

Dlatego designerzy projektując strony powinni myśleć w kategoriach komponentów i powinni komunikować te intencje "do czego dążymy / jak to będzie całościowo wyglądać", a nie tylko "co jest teraz do zrobienia, bo reszta designu jest niezrobiona, to nie pokażę".

@LukeJL: o ile się da, tu schemat jest dużo bardziej skomplikowany. Grafik robi zgodnie z wytycznymi klienta docelowego i jest z innej firmy niż ja, bo firma dla której to robię zajmuje się tylko kodem a cała reszta jest w kliencie pośrednim :D

Reasumując, to jednak nie są zaburzenia obsesyjno-kompulsywne w moim przypadku :D, lecz tylko:

przywiązywanie wagi do szczegółów i zwracanie uwagi na estetykę i pewien ład.

Jeżeli chodzi ci o przypadki takie jak na zaprezentowanej grafice - tak.
Jeżeli rzeczywiście o pixel-perfect jak opisaliśmy wczesniej - to nie wiem, ale bym się zastanowił :-P

@rafal95p: mógłbyś pokazać kod tego przykładu? Bo w normalnych warunkach nie powinieneś się bawić w jakieś pixele tylko css sam powinien wszystko ustawić odpowiednio

Finalnie wszystko okazało się być w porządku. Po prostu przy zoomie przeglądarki taki efekt się pojawiał.

zoom... na zoom nie powinniśmy nigdy patrzeć a jeśli klient sobie zoomuje to robi to na własną odpowiedzialność. Już kilka razy to miałem że coś się sypie a wychodziło że klient sobie zoomował, na to supportu mojego nie ma.

ehhhhh napisał(a):

zoom... na zoom nie powinniśmy nigdy patrzeć a jeśli klient sobie zoomuje to robi to na własną odpowiedzialność.

Słabe i wykluczające podejście. Jak ktoś zoomuje, to widocznie potrzebuje, bo za małe literki albo chce zobaczyć coś w powiększeniu.

Poza tym to nie "klient" (zamawiający stronę) ma mieć możliwość zoomowania, tylko użytkownik (ktoś, kto faktycznie będzie z tego korzystać).

na własną odpowiedzialność.

Na własną odpowiedzialność będzie się wkurzał na stronę albo po prostu ją zamknie. Szczególnie wkurzające jest blokowanie zoomu. Albo odwrotna sytuacja - że strona (zwykle stara, sprzed ery komórek) jest pisana tylko pod desktopy i na komórce są tak małe literki, że trzeba zoomować, ale jak zoomujesz to się okazuje, że nie jesteś w stanie zobaczyć całego wiersza, więc trzeba scrollować stronę z lewej na prawo, potem do kolejnego wiersza z lewej na prawo itp.

Już kilka razy to miałem że coś się sypie a wychodziło że klient sobie zoomował, na to supportu mojego nie ma.

Nie wszystko musi dobrze wyglądać na każdym poziomie zooma, ale możliwość podstawowego zoomowania powinna być zapewniona.

Nie wszystko musi dobrze wyglądać na każdym poziomie zooma, ale możliwość podstawowego zoomowania powinna być zapewniona.

No ale przecież nikt nie pisze, żeby olać zoomowanie, a jedynie (przynajmniej ja tak zrozumiałem) żeby nie popadać w paranoję. W sensie - układ jest OK, jak się podczas powiększania delikatnie rozjedzie to normalna sprawa i nie należy się tym przejmować, ani tracić wielu godzin na ustawianie elementów tak, żeby na zoomie wszystko było idealnie co do piksela.

@LukeJL: Jeśli robię stronę zgodnie z projektem a klient mówi, że x się rozjechało albo jest innny odstep a okazuje się że klient ma zooma to co mam zrobić? Olać olać i tylko olać, zoom mnie nie obchodzi, bo nie da się zrobić tak żeby nic się nie sypnęło na zoomie albo wyglądało tak samo jak na projekcie gdy zoom jest taki, że kontener się nie mieści na monitorze.

Jak 15 lat temu pracowałem przy "stronkach", CMSy lub serwisy gdzie front/wygląd był bardzo istotny to odkryłem, że robienie pixel exact jest mniej stresujące i tańsze niż robienie "mniej więcej" (pomijając dowcipy typu grafik wybrał font i aliasing taki, że nie ma szans uzyskać tego w html - raz po prostu pocięliśmy teksty (menu) jako grafikę...).

Z tym, że to było 15 lat temu.

ehhhhh napisał(a):

@LukeJL: Jeśli robię stronę zgodnie z projektem a klient mówi, że x się rozjechało albo jest innny odstep a okazuje się że klient ma zooma to co mam zrobić? Olać olać i tylko olać, zoom mnie nie obchodzi, bo nie da się zrobić tak żeby nic się nie sypnęło na zoomie albo wyglądało tak samo jak na projekcie gdy zoom jest taki, że kontener się nie mieści na monitorze.

no przy podejściu RWD w sumie nie ma co się szczypać o to, żeby wyglądało pixel perfect jak na projekcie, bo te rzeczy często się wykluczają. Wiadomo, że przy zoomie czy na innej rozdzielczości może i często powinno inaczej wyglądać. Chociaż jeśli klient żąda pixel perfect w 2023 roku, to coś jest nie tak.

LukeJL napisał(a):

Chociaż jeśli klient żąda pixel perfect w 2023 roku, to coś jest nie tak.

No chyba, że jest to apka na ekran o określonych wymiarach (kiosk itp).

@LukeJL: no tylko tego mi nie musisz tłumaczyć, a z klientami gatka jest trudna.

Ja tam mogę robić pixel perfect. Nawet mnie nie denerwują uwagi typu "na projekcie jest o 1% inaczej". Mogę sobie poprawiać cssy i tak wypłata będzie i tak. Teraz do sedna - to co mnie naprawdę wkurza to graficy przesyłający niekompletne projekty. Otrzymanie od razu wszystkich widoków bardzo usprawnia mi pracę, bo wiem jakie elementy strony będą do ponownego użycia. Albo jak wyślą projekt bez wszystkich obrazków i odpiszą, żebym sobie tam coś wstawił chwilowo. Jeśli to są jednorazowe sytuacje, to ok, ale czasem tłumaczę wielokrotnie to samo, a ludzie to olewają i nadal robią po swojemu, bo tak im wygodniej. Potem zbliża się deadline i css nie jest taki schludny i zwięzły jaki mógłby być, bo dostawałem projekt na raty. Najgorzej jak jeszcze jest dużo zmian designu po drodze, jak klienci nie mogą się zdecydować na jedną koncepcję.