Hall of Fame de Web Design Hack

Noi, web designerii, am fost întotdeauna o gamă de pricepuți. Dacă există un aspect sau o funcționalitate specifică pe care trebuie să o realizăm, putem de obicei să punem cap la cap o soluție. Acesta este cazul chiar și atunci când nu există un standard sau un instrument specific care să ne ghideze. Aici intervine conceptul hack-ului de design web.

Hack-urile sunt metode creative, adesea indirecte, pentru a face un site web să arate sau să funcționeze într-un anumit fel. Uneori, au o conotație negativă. De exemplu, layout-urile bazate pe tabel HTML au fost luate în derâdere pe bună dreptate ca nefiind accesibile cititorilor de ecran. Dar nu toate hack-urile sunt rele.

Într-adevăr, ele sunt desfășurate din nevoia de a împinge limitele a ceea ce este posibil. Web-ul a avut întotdeauna limitările sale, iar designerii au folosit hack-uri pentru a încerca să le ocolească.

Cu asta, să aruncăm o privire la unele dintre cele mai utile și răspândite hack-uri de web design din anii trecuți, inspirate de o discuție pe Twitter cu alți designeri. Deși nu țin neapărat o lumânare la standardele pe care le avem astăzi, ei au fost membri ai sălii de faimă în timpul lor.

Aspecte: Tabele HTML și CSS Floats

Primele noastre selecții vor intra împreună în această sală virtuală a faimei. Deși utilizarea maximă respectivă a fost diferită de ani de zile, acestea au fost utilizate în esență pentru a realiza același lucru: aspecte cu mai multe coloane.

Tabelele HTML

Înainte ca CSS să sosească pe scenă, primele pagini web erau o afacere pe o singură coloană. Nu existau umplutură sau margini și nici un mod standard de a plasa conținutul în coloane orizontale. Adică până când un suflet întreprinzător a decis să folosească mesele în acest scop.

Desigur, tabelele HTML au fost menite să conțină date tabulare – nu machete de pagină. Dar au fost de fapt o modalitate eficientă de a face treaba până când a apărut CSS.

CSS plutitoare

Tabelele aveau multe dezavantaje – inclusiv problemele de accesibilitate menționate mai sus. De asemenea, au fost lenți să reda în browser. Așadar, atunci când au fost introduse floats CSS, a fost văzut ca un schimbător de joc pentru designerii web.

Floaturile nu erau markup HTML și, prin urmare, erau mai accesibile și puteau crește performanța. Dintr-o dată, aspectele cu mai multe coloane au fost posibile prin CSS și s-au putut adapta mai bine la lucruri precum dimensiunea ecranului.

Cu toate acestea, plutitoarele nu ne-au dus până la pământul promis. Dacă doriți ca coloanele să fie de înălțime egală, trebuia implementat un hack suplimentar clearfix.

Fiecare dintre aceste articole este, de asemenea, foarte util astăzi, atunci când este folosit pentru scopul inițial. Dar pentru machete, zilele lor sunt gata, din fericire.

Spațierea elementelor: spații fără rupere (   ) și Spacer.gif

Designerii web orientați spre detalii au căutat adesea modalități de a spația elementele până la pixelul exact. Din nou, acest lucru nu era atât de ușor pe vremea aceea. Astfel, spațiul neîntrerupt ( ) și spacer.gif au fost folosite pentru a obține mai mult control asupra spațierii.

Spațiu fără rupere (   )

Doriți să loviți un element pe orizontală, dar fără să-l centrați sau să-l aliniați la dreapta? Adăugarea câtorva spații care nu se sparg ar face șmecheria.

Cu toate acestea, nu a fost o știință atât de exactă. Dimensiunea reală a fiecărui spațiu depindea de familia de fonturi și dimensiunea fontului. Și chiar și ținând cont de aceste diferențe, acest hack ar putea arăta diferit în funcție de browser și de sistemul de operare pe care îl folosea un vizitator.

Spacer.gif

Acest hack de spațiere mai precis a venit prin crearea unei imagini .GIF transparente (denumită adesea spacer.gif ) și plasarea acesteia într-o pagină. Aspectul îngrijit a fost că, deoarece este o imagine transparentă, designerii puteau seta înălțimea și lățimea la orice cantitate de pixeli fără impact negativ asupra aspectului sau performanței.

CSS a făcut ca ambele hack-uri să fie învechite. Dar nu știți că editorul WordPress Gutenberg are un bloc Spacer care face cam același lucru? Doar arată că nevoia este încă acolo.

Tipografie: Text bazat pe imagine

Nevoia pentru acesta a fost destul de simplă. Web-ul timpuriu a fost limitat în esență la fonturile instalate pe sistemul utilizatorului. Desigur, designerii nu aveau de unde să cunoască toate fonturile la care aveau acces utilizatorii – în afară de elementele de bază precum Times New Roman, Georgia, Arial și Helvetica.

Odată cu asta a venit decizia groaznică de a crea imagini pline de text în Photoshop. În timp ce acest lucru a permis utilizarea practic a oricărui font, a venit în detrimentul accesibilității. În plus, utilizarea unei imagini în locul unei etichete de antet HTML a aruncat, de asemenea, în semantica paginii – potențial dăunând SEO.

Anteturi și navigare lipicioase: cadre

Cadrele HTML au fost poate înaintea timpului lor, deoarece multe dintre sarcinile pentru care le folosim cândva sunt făcute acum prin CSS și JavaScript.

Conceptul era destul de simplu. Fiecare „cadru” individual dintr-un aspect era de fapt propria pagină. Aceasta a fost o modalitate simplă de a separa un antet, un subsol sau o navigare de restul conținutului site-ului. A face o modificare a navigării, de exemplu, a însemnat o singură modificare într-un singur fișier. Este similar cu ceea ce include server-side include, doar cu alte beneficii de design incluse.

Principalul dintre ele a fost capacitatea de a crea anteturi și navigare „lipicioase”. Pe măsură ce utilizatorul derula prin conținut, putea naviga cu ușurință prin site.

Această tehnică și-a îndeplinit scopul, dar era departe de a fi ideală. Nu a fost foarte adaptabil în ceea ce privește diferitele dimensiuni ale ecranului și nici nu a fost atât de grozav pentru SEO. Au existat, de asemenea, unele preocupări de securitate legate de eventuala încărcare a unui cadru de la o adresă URL nefastă.

Optimizarea imaginii: imagini tăiate

În zilele dinainte de disponibilitatea pe scară largă a broadbandului, optimizarea imaginii era vitală. Chiar și o imagine de 50 kb ar putea cântări o pagină în jos printr-o conexiune lentă.

Gigantul de software Adobe a oferit o soluție interesantă. Cu software-ul ImageReady, designerii ar putea tăia o singură imagine în orice număr de bucăți mai mici. Fiecare felie individuală ar putea fi apoi optimizată, făcându-le, teoretic, descărcare rapidă.

Dar asta nu este tot. Software-ul ar putea apoi exporta feliile într-un tabel HTML. De acolo, puteți copia și lipi acel HTML în pagina dvs.

Problema cu această tehnică a fost dublă. În primul rând, aspectul tabelului ar putea dura mai mult timp pentru a reda - potențial distrugând orice optimizare pe care ați obținut-o. În al doilea rând, ar putea fi o adevărată durere de întreținut. Adăugarea unui element de navigare la un antet grafic mare, de exemplu, ar putea necesita să începeți de la capăt cu un set cu totul nou de felii - necesitând astfel modificări de șablon.

În timp ce optimizarea imaginii este încă importantă, bandă largă, din fericire, ne permite puțin mai multă libertate cu fișierele mari. Chiar și așa, versiunile moderne de Photoshop oferă în continuare tăierea imaginilor și exportul HTML.

Plasing Internet Explorer: <!--[if IE]>

Până în prezent, nu este încă neobișnuit să auzi designeri web (inclusiv eu) blestemând existența obscenată a Internet Explorer. Moștenirea sa continuă, în parte pentru că unii utilizatori pur și simplu nu vor renunța la ea.

Din această cauză, se pare pentru totdeauna că ne-am spart drumul în jurul numeroaselor ciuperci și limitări proprietare ale IE. Timp de mulți ani, aceasta a inclus utilizarea unui comentariu condiționat pentru a detecta utilizatorii IE și pentru a oferi stiluri alternative.

Era oarecum versatil prin faptul că puteai aplica stiluri la toate versiunile de IE <!--[if IE]> sau le puteai viza pe cele care foloseau versiuni mai vechi <!--[if lt IE 11]> . L-ați putea folosi și invers, căutând versiuni mai mari sau egale cu o anumită versiune <!--[if gte IE 10]> .

Microsoft trebuie să fi avut o oarecare simpatie pentru designerii web, deoarece a permis ca aceste comentarii condiționate să funcționeze în IE. Din fericire, noul lor browser Edge nu necesită asemenea prostii.

Hack-uri de Web Design de reținut

Hack-urile din Hall of Fame cu siguranță nu au fost singurele folosite de designerii web. Există un număr nespus de soluții care ne-au ajutat să facem ceea ce aparent imposibil. Dar ceea ce diferențiază această listă este utilizarea lor masivă și, în unele cazuri, sprijinul din partea marilor corporații.

Și poate cel mai bun lucru pe care l-am putea spune despre ei este că au funcționat. Le-am folosit ca mijloc pentru un scop. Sigur, s-ar putea ca acestea să fi fost ținute împreună prin uzura bandă adezivă, dar obținerea acelui design cu minte înaltă pentru a reda efectiv într-un browser a fost o adevărată realizare.

Și mai bine este că au ajutat la deschiderea drumului pentru ceea ce este webul astăzi. Majoritatea elementelor de pe această listă au fost înlocuite cu standardele HTML și CSS, de care beneficiază toată lumea.