PerfectPixel, a szebb weboldalakért

Már régen felmerült bennem az ötlet, hogy kellene valami eszköz a design implementálásakor, ami segít összehasonlítani azonnal a terveket és a készülő outputot, hogy egyből tudjak módosítani dolgokon a tökéletesség érdekében. Tökéletesség alatt — persze — a terv lehető a legpontosabb megvalósítását értem. Mert, mi megvalósítók bármennyire is nem szeretjük a “pixel pontosság” elvárását, mégis, csak ez lenne a cél.

Ma, amikor mindenféle komponenst tudunk használni, ami segít kevesebbet dolgozni (pl., CSS framework-ök tömkelege), akkor szerintem majdnem lehetetlen ezek használata mellett egy ilyet kivitelezni a tervező által betett helpek alapján:

Mert, sajnos, ez nem csak annyi, hogy az form elemeknek adunk egy margin: 26px 0; -s szabályt, mert annyi méretet, távolságokat befolyásoló beállítás (line-height, margin, padding, stb) van ott, hogy ennyire nem egyszerű az életünk, de térjünk rá az eszközre.”

Régebben a Makiapp-ot használtam, ahol könyvjelzőznöd kell egy linket, és az építendő oldalon rányomva eldob a saját linkjére. . Ott egy képet tudsz feltölteni és vonszolgatni a weboldal felett. Több problémám is volt vele. Pl.: volt, hogy hónapokig nem működött a szolgáltatás. Így gyorsan le is szoktam róla.

Tavaly viszont ráakadtam a PerfectPixel chrome kiegésztőre, ami azt adja amire nekem jelenleg szükségem van:

• rá tudok pakolni egy layert a weboldal fölé, összehasonlítva az általam késznek vélt munkát a tervekkel
• domainenként megtartja a feltöltött képet
• ki tudom kapcsolni ezt a layert, esetleg közben tudom editálni a css-t az inspectorban
• több kép kezelése (ugyanahhoz a pagehez mobil, tablet, desktop tervek)

Eddig egyetlen hátrányát tapasztaltam ennek a kiegészítőnek: amikor a Chrome-ban emulálsz egy mobil eszközt, az ő eszköztára benne marad a viewportban, így kitakarva hasznos területet. De ez egyelőre túlélhető probléma nekem.