Prestaňte myslieť v pixeloch: vylepšujte rozloženie webu

Práve som dokončil prevod svojej osobnej webovej stránky z merania rozloženia na základe pixelov na percentá a ems. Asi posledný rok sa zasadzujem za to, aby to robili aj ostatní. Čítal som články, počúval som argumenty a pohrával som sa s technikami. A dôrazne si stojím za názorom, že by sme takto mali pracovať v každej rozprave, ktorej som bol súčasťou. Celý čas dúfal, že nikto neotvára webového inšpektora na mojej osobnej stránke a nekontroluje moje malé špinavé tajomstvo. Verejne som sa zasadzoval o solídne osvedčené postupy a zároveň som si súkromne užíval ľahkosť a rýchlosť rozloženia založeného na pixeloch. Za to, že som nahlas plakal, som mohol kandidovať do verejnej funkcie s takou duplicitou.

V prvom rade prečo?

Ak nie ste oboznámení s touto debatou alebo ste sa do nej vôbec nezaoberali, tu je jej podstata: použitie pixelov ako mernej jednotky narúša priblíženie používateľom, ktorí to vyžadujú, pretože deklaruje veľkosť písma v jednotkách ktoré sú uzamknuté k fyzickej vlastnosti vašej obrazovky. Okrem toho je teoreticky čistejšie používať ems na meranie typu, pretože ide o typografické meranie, a ak už definujete svoje parametre obsahu v typografickej jednotke merania a proporcie, má zmysel uplatniť rovnakú myšlienku na zvyšok aj vaše rozloženie. Problém je v tom, že používanie pixelov je pohodlné. Všetko vyzerá vždy tak, ako chcete, minimálne na predvolenej úrovni zväčšenia na stolnom počítači. Všetky ostatné zariadenia alebo úrovne priblíženia s tým majú problém, ale aspoň váš jeden ideálny prípad nie, však?



Účinok, ktorý majú rôzne percentuálne hodnoty na prvok tela, na veľkosť ems



Účinok, ktorý majú rôzne percentuálne hodnoty na prvok tela, na veľkosť ems

Mám podozrenie, že skutočným dôvodom, prečo sa veľa ľudí vyhýba ems, je toto: sú strašidelné, pretože matematika je trochu čudná. Myšlienka jednotky merania, ktorá sa rovná súčasnej veľkosti písma, sa zdá byť čudná, pretože týmto popisom ste v podstate nič nedefinovali. Veci sa trochu zamerajú, keď si uvedomíte, že vo väčšine prehliadačov nastavíte veľkosť písma na tele na 100%, potom sa 1em bude rovnať 16px. Odtiaľ môžete upraviť svoju matematiku. Ďalšou bežnou technikou je nastavenie veľkosti písma na tele na 62,5%, čo obvykle zodpovedá 10 pixelom. Potom by veľkosť odseku textu s veľkosťou písma 1.2em bola rovná 12 bodom. Táto metóda uľahčuje matematiku žalúdku, a ak vám pomôže, v každom prípade ju využite.

ako pripraviť pop-up brožúru

Bod obratu

Čo teda dosť zmenilo môj názor, aby som preskočil pohodlie a ľahkosť pixelov a objal sotva kontrolovaný chaos, ktorý premýšľa v nepresných, voľne definovaných meraniach? Jednalo sa o nákup nového MacBooku Pro s Retina displejom. Keď som na túto vec nahral svoj web prvýkrát, bol som v úžase. Typografia bola svieža a krásna. Mal pekné tvrdé hrany, jemnosť variácie šírky zdvihu bola nielen viditeľná, ale aj čistá a jasná, vylepšené vyrovnanie párov a sledovanie stopy (v tomto okamihu by malo byť zrejmé, že som úplne beznádejný typofil). Okamžite som začal uvažovať o spôsoboch, ako by sme ako dizajnéri mohli naše stránky ešte vylepšiť na displeji HiDPI.

Prvý krok bol zrejmý a myslím si, že väčšina dizajnérov a vývojárov, s ktorými som spolupracoval, vrátane mňa, už nejaký čas robí. Tým, že sa pri vytváraní našich štylistických vplyvov opierame o vlastnosti CSS3, už teraz sa ubezpečujeme, že sa budú krásne vykresľovať na zariadeniach s vysokou hustotou pixelov. Ďalším krokom, ktorý je tiež zrejmý, by bolo zahájenie plánovania poskytovania obrázkov optimalizovaných pre zobrazenie, na ktorom sú zobrazené. Je to o niečo ťažšie, ale nie nad možnosti žiadneho primerane kvalifikovaného vývojára. Obrázky pripravené pomocou schémy pomenovaní @ 2x (alebo @ 1,5x alebo v akomkoľvek inom pomere, ktorý považujete za primeraný) je možné použiť pomocou projektov ako Picturefill, polyfill pre potenciálny budúci HTML prvok, ktorý prijme viac zdrojov a atribútov na použitie týchto zdrojov.



Najmenšie ohraničenie, ktoré dokáže vygenerovať 1 pixel CSS na displeji Retina, v porovnaní s ostrým ohraničením 1 pixela zariadenia, ktoré môžete získať pri obrázkoch.

Najmenšie ohraničenie, ktoré dokáže vygenerovať 1 pixel CSS na displeji Retina, v porovnaní s ostrým ohraničením 1 pixela zariadenia, ktoré môžete získať pri obrázkoch.

To ma priviedlo k ďalšej myšlienke: čo keď chcem využiť všetky tie extra pixely na vytvorenie jemnejších efektov? Ak urobím tlačidlo pomocou obrázka, môžem mu dať ohraničenie pixelov 1 zariadenie, pretože mám plne pod kontrolou to, čo sa vykresľuje, ale môžem mu dať iba ohraničenie pixelov 1 CSS alebo 2 pixely zariadenia na displeji Retina, ak urobím správnu vec a upravím štýl tlačidla pomocou CSS. Ako sa osvojuje prijatie obrazoviek HiDPI a zvyšuje sa rôznorodosť hustoty pixelov, bolo by čoraz neudržateľnejšie pripraviť obrazové aktíva pre všetko, len aby sa uchytili na požadovanej jemnosti a kontrole. Vo svetle tejto skutočnosti sa mi zdá jasné, že smrť pixelu ako mernej jednotky sa blíži.

ako meniť farby vo photoshope

Ako teda myslíme nad pixely?

Ako niekto, kto získal vzdelanie v oblasti tlačeného dizajnu, neustále hľadám schopnosť získať do svojich webdizajnérskych projektov jemnejšie podrobnosti. Prejsť od absurdne jemných detailov väčšiny rozlíšení tlače k ​​hromadnosti 72 ppi pre obrazovky bolo pre mňa pravdepodobne najbolestivejšou časťou prechodu na web a niektorí ľudia, ktorých poznám, nikdy skutočne neprijali, že sa musíte vzdať určitého stupňa control byť úspešným webovým dizajnérom.

V tomto prípade ma moje pozadie tlače prinútilo premýšľať o potenciáli skutočnej nezávislosti rozlíšenia v rozložení obrazovky. Retina displej má hustotu pixelov 326ppi, čo je mierne nad rozlíšením 300ppi, čo si podľa mnohých dizajnérov tlače predstavuje prah pre vysoko kvalitné snímky. Ľudské oko nedokáže rozlíšiť svoje pixely na priemerných pozorovacích vzdialenostiach, takže sa zdá, že meranie rozloženia pomocou umelej konštrukcie, ako sú pixely CSS, už nie je relevantné. Ak už nevidíme príležitostnú fuzzy hranu vytvorenú vektorovými prvkami, ktoré nie sú prispôsobené pixelom, potom v skutočnosti neexistujú. Prečo sa teda namiesto myslenia v abstraktnom systéme meraní pixelov prístrojov nedostaneme späť k meraniam v reálnom svete? A ako by to šťastie malo, už máme základ pre tento systém: body a em. Pridanie obrázkov do mixu by nám poskytlo celú sadu meraní v reálnom svete, ktoré by sme mohli použiť na definovanie rozloženia webu s vysokým rozlíšením.

Aby to fungovalo, museli by tvorcovia prehliadačov a hardvéru štandardizovať zobrazovanie bodov tak, aby sa zarovnávali so skutočnými palcami namiesto palcov zariadení založených na pixeloch, a pridávať obrázky. To by znamenalo, že ak by ste na svojej obrazovke namerali skutočný palec, zmestilo by sa do neho 6 picas a 12 bodov do každej pica, teda celkom 72 bodov na palec. Aby zostali spätne kompatibilné, tieto hodnoty by sa stále museli upravovať na percento deklarované na elemente body, ale implementácia sa dala väčšinou ľahko štandardizovať. Ems by naďalej pracoval ako inzerovaný a menil by sa na základe hodnoty deklarovanej na tele. A to je krása nápadu. Nerušilo by to zážitok na jednom starom zariadení, ale štandardizovalo by ho to na novších.



Prisahám, že nie som blázon

Vydržte však chvíľu. Či som nás práve nevrátil k tomu istému mizernému predsavzatiu, ktoré chcem, aby sme prestali myslieť? Nie, ak prispôsobíme implementáciu bodov tak, aby obsahovala schopnosť deklarovať ich v nie celých číselných hodnotách.

Na zariadení s hustotou pixelov nad 300 ppi, ak použijem implementáciu skutočných svetových hodnôt picas a points, ak deklarujem ohraničenie, ktoré má šírku 0,5 bodu, potom by som mal dostať peknú tenkú čiaru bez fuzzy okrajov, ktoré vyhladzovanie by sa vytvorilo na zariadení s nižšou hustotou pixelov. Sakra, aj pri tej istej presnej implementácii vyhladzovania, ktorú už máme, bude vyzerať čisto, pretože fuzzy hrana je príliš malá na to, aby ju ľudské oko videlo. Pamätajte, že ak to nevidíte, potom tam skutočne nie je. To by nám dokonca umožnilo požičať si ďalší koncept z tlačeného dizajnu, čiaru nulovej šírky. Vyhlásením riadku s hodnotou 0pt vo väčšine tlačového softvéru skutočne získate riadok, ktorý je najmenším riadkom, ktorý je možné vyrobiť použitým tlačovým hardvérom. Rovnaký koncept môžete použiť na webe a získať orámovanie, ktoré je vždy široké 1 pixel zariadenia, čo vám poskytne najjemnejšiu možnú jemnosť na zariadení, na ktorom sa vaše stránky zobrazujú. Potrebujete deklarovať skutočnú 0, aby ste prepísali pravidlo štýlu? Stačí to deklarovať bez akejkoľvek jednotky merania a dostanete rovnakú starú 0, na akú ste boli zvyknutí.

Tieto nápady nám otvárajú určitú mieru presnosti, ktorá bola predtým v oblasti webdizajnu nedosiahnuteľná, a ktorá je hnacou silou veľkej časti krásy v tlačenom dizajne.

Takže, dovoľte mi to objasniť ...

Ak to zhrniem, navrhujem niekoľko vecí. Po prvé, tvorcovia prehliadačov nám pomáhajú posúvať existujúcu jednotku merania, body, aby sme sa lepšie zosúladili s hodnotami v reálnom svete, a tiež pridávať obrázky ako jednotku. Po druhé, vývojári upravujú deklaráciu rozložení a typografických pravidiel pomocou kombinácie ems, points a picas. A po tretie, že výrobcovia zariadení HiDPI navrhujú svoj softvér na vykreslenie podľa štandardov skutočného sveta: palec na pravítku by sa rovnal palcu na obrazovke.

Nemyslím si, že sa zasadzujem za niečo príliš zdeformované. Tvorcovia prehľadávačov by museli uvažovať o implementácii týchto zmien spôsobom, ktorý zachováva spätnú kompatibilitu, ale toto cvičenie prenechávam lepšej mysli ako tej mojej.

Slová: Steve Hickey

Steve Hickey je návrhár používateľského rozhrania a front-end vývojár v spoločnosti Čerstvá obrábaná pôda - tím dizajnérov, programátorov a odborníkov na UX, ktorý pomáha podnikateľom a firmám vytvárať krvavo vynikajúce používateľské skúsenosti s webovými a mobilnými aplikáciami prostredníctvom konzultácií, vzdelávania, školení a udalostí. Od roku 2005 pomohli viac ako 300 zákazníkom vrátane spoločností General Electric, Microsoft, MIT, Harvard, TEDx, Time Warner Cable, Walgreens, Hubspot a mnohých ďalších.