Sposób na zakodowanie strony WWW idealnie zgodnie z plikiem graficznym

Pierwszym problemem, jaki pojawia się podczas tworzenia stron internetowych, jest kłopot z ustawieniami poszczególnych elementów tak, gdzie byśmy chcieli. Z czasem, dowiadujemy się do czego służą floaty i ich zerowanie, poznajemy flex, różne wartości "position" i tworzenie stron na podstawie szablonu wychodzi nam coraz lepiej. Gdy spoglądamy na nasze stare strony, widzimy, jak dużo błędów popełnialiśmy.


Jeśli chcesz, by Twoje strony idealnie odpowiadały temu, co zaprojektował grafik, wypróbuj rozszerzenie przeglądarki PerfectPixel (znajdziesz je do Chrome i Firefoxa). Po jego zainstalowaniu zdziwiłem się, że nawet strony, które wcześniej wydawały się dobrze zakodowane, mają dużo rozbieżności w stosunku do designu.

PixelPerfect umożliwia zaimportowanie obrazka (ja używam zrzutu ekranu) i ustawienie go, jako warstwy w przeglądarce. Deweloper może manipulować jego przezroczystością, odwrócić kolory lub włączać i wyłączać tę dodatkową warstwę, co umożliwia zakodowanie szablonu "co do pixela". Moim zdaniem, PixelPerfect dobrze pokazuje, jak niedokładne jest mierzenie różnych wartości w Photoshopie i następnie przenoszenie ich na CSS.