Share
Suntem într-adevăr norocos de a lucra într-o industrie ca industria web. În zilele noastre, avem atât de multe noi sfaturi și tehnici și modalități de a lucra tot timpul. De asemenea, suntem cu adevărat norocoși că suntem într-o epocă în care, odată cu introducerea noilor tehnologii, browserele noastre pot (în cea mai mare parte) să fie destul de rapide pentru a prinde din urmă, astfel încât să punem aceste noi tehnologii în modelele noastre si gasp, chiar si in munca clientului!) mai mult ca niciodata.
CSS3 este una dintre aceste tehnologii (ușor) noi. Împreună cu aceasta au venit o mulțime de lucruri care ne fac viața mai ușoară atât ca designeri, cât și ca dezvoltatori. Pe măsură ce browserele noastre se îmbunătățesc, putem fi mai aventuroși cu ideile și desenele pe care le creăm.
Cu toate acestea, suntem, de asemenea, într-o epocă în care proiectăm pentru mai mulți utilizatori, dispozitive, browsere și tehnologii decât am făcut vreodată. Înainte de vârsta smartphone-ului, a tabletei și a frigiderului conectat la internet, există într-adevăr o singură cale de a accesa Internetul; printr-un calculator normal. Și cea mai obișnuită rezoluție a ecranului pentru un timp a fost 640px x 480px, sau 800px x 600px!
În zilele noastre, avem mii de dispozitive, dimensiuni și contexte diferite de la care trebuie să răspundem. Dacă privim numai ecranele și dimensiunile ecranului pe care trebuie să le satisfacem, avem mii de dispozitive mobile (telefoane mobile, smartphone-uri, tablete, netbook-uri etc.), ecrane Retina, ecrane standard, ecrane de înaltă definiție, ecrane mici și mari asa de, asa de mult mai mult.
Deși poate fi foarte dificil, cantitatea de lucruri pe care trebuie să le satisfacem va deveni mai mare și mai mare, deci trebuie să ne adaptăm și să învățăm de la.
Și ce înseamnă acest lucru pentru procesul nostru? Este o sarcină imposibilă să testați site-ul dvs. pe fiecare dispozitiv făcut ca site-ul dvs. să poată fi vizionat. În schimb, trebuie să schimbăm efectiv procesul nostru spre bine. Sunt sigur ca, ca dezvoltator, a trebuit sa faci asta singur si este la fel ca un designer.
S-ar putea să trebuiască să luăm măsuri suplimentare pentru a îmbunătăți procesul nostru de proiectare spre bine. Un exemplu de acest lucru devine tot mai confortabil în iterarea ideilor de design pentru tipografie (de exemplu) în browser, mai rapid. Orice ar fi, pot garanta că procesul dvs. va trebui să se adapteze ușor.
Deși se pare că CSS3 este un lucru mai recent, odată cu adoptarea multor tehnici populare CSS3 folosite în ultimii ani, cele mai vechi proiecte pentru CSS3 au fost încă din 1999; cu paisprezece ani în urmă!
Spre deosebire de specificațiile anterioare ale CSS (cum ar fi CSS2), CSS3 a fost împărțit în mai multe module - iar la mijlocul anului 2012 au existat peste cincizeci module publicate. Patru dintre acestea, în special, au fost publicate ca recomandări, unde modulul a fost supus unei revizuiri și teste masive înainte de a fi recomandat pentru utilizare completă. Cele patru module CSS3 recomandate de W3C sunt încă:
Alte module, cum ar fi "Background and Borders", "Multi-Column Layout", "Flexible Box Layout" sunt în prezent la nivelul "Recomandării candidaților", unde W3C este mulțumit de caracteristicile semnificative ale acelui modul.
La acest nivel, se crede că implementările (de exemplu prin browsere) ar trebui să renunțe la prefixele de browser pe care le au în loc. Alte module care fac obiectul analizei includ "Animații CSS", "CSS Transforms" și "Efecte filtru CSS", toate acestea fiind în starea "Proiect de lucru" (așa cum sunt multe, multe alte module!) Și, prin urmare, gata ca cei cu statut CR.
Cu toate acestea, pe lângă cele patru module principale W3C recomandate, există multe tehnici CSS3 populare pe care le vedem adesea pe site-urile noastre de astăzi. Acestea includ:
Să ne uităm la fiecare dintre acestea într-un mod mai detaliat.
Introducerea gradienților CSS a însemnat că, în loc să folosească un fundal de imagine pentru a crea o anumită imagine pe un site web, pentru browserele moderne puteți utiliza în schimb CSS3.
Acest lucru este minunat, deoarece economisește greutatea paginii și, de asemenea, vă asigură că vă mențineți performanța la minim, dacă nu solicitați cât mai multe imagini.
Raza de graniță înseamnă că acum putem include colțuri rotunjite pentru browserele moderne în desenele noastre, fără a fi nevoie să recurgem la utilizarea de imagini pentru fiecare. Și imaginați-vă dacă ați avut o imagine de fundal care avea o frontieră, un colț rotunjit, un gradient și o umbră - acele feluri de lucruri erau un coșmar în trecut, în timp ce ele sunt acum mai ușor de implementat pentru browserele care le susțin.
Dacă aveți noroc, veți obține clienți care înțeleg, de asemenea, despre îmbunătățirea progresivă, iar dacă nu puteți să le explicați și să le educați. În lumea de astăzi, în care mulți oameni dețin smartphone-uri, tablete și computere (sau o combinație a acestora și mai mult), oamenii ar trebui să se aștepte și să înțeleagă că site-urile nu sunt create pentru a le face pe toate dispozitivele sau pe ecranele pe care le vizualizează. Într-o anumită măsură, vor înțelege pentru anumite viziuni estetice să se degradeze cu grație pentru alte browsere. Colțurile rotunjite fiind una dintre ele!
Odată cu introducerea umbrei cutiei CSS3, acum putem avea umbre pentru elementele casetei noastre. Există, de asemenea, o versiune text pe care o putem folosi (text-shadow, dacă nu puteți ghici) și pentru conținutul nostru.
De asemenea, aveți posibilitatea să alegeți atât un gradient încorporat, cât și un set standard, ceea ce înseamnă că putem - da, ați ghicit-o - să renunțați la utilizarea imaginilor pentru aceste stiluri încă o dată.
CSS3 ne-a introdus, de asemenea, posibilitatea de a face referire la mai multe imagini de fundal în codul nostru. Acest lucru este minunat, deoarece înseamnă că putem avea mai multă distracție cu elemente de fundal stratificat unul peste celălalt pentru a crea efecte fantastice pe care altfel le-am fi putut încerca să le recreăm în CSS sau doar cu o singură imagine de fundal.
În cele din urmă - de la IE9 în sus și cu toate celelalte browsere moderne, nu mai trebuie să creăm o imagine de fond mică, repetabilă și transparentă!
Acest lucru a fost suficient pentru a mă face să mă iubesc folosind CSS3 și pur și simplu înseamnă că putem fi liberi să folosim transparența în desenele noastre în care simțim că este potrivit.
Animațiile și transformările sunt minunate; împreună cu tranzițiile, ne ajută să adăugăm mult mai multă interactivitate în site-urile noastre. În timp ce acestea pot fi dificil de afișat în desenele noastre, este cu siguranță o modalitate prin care putem folosi CSS3 în avantajul nostru pentru a aduce site-urile la viață.
Includerea regulii @ font-face pentru CSS3 a fost strălucitoare pentru designeri, deoarece a însemnat că putem fi ceva mai experimentali în tipografia pe care o folosim în desenele noastre. În esență, utilizarea fonturilor web le-a permis designerilor o mult mai mare libertate de a-și exprima creativitatea prin munca lor.
Fonturile web sunt minunate, deoarece ne oferă un nou mod de a crea site-uri uimitoare vizual. Există o varietate atât de mare de opțiuni pentru fonturile pe care le putem folosi acum pe site-urile noastre, dacă nu în sute, cel mai bine în mii.
Nu toate dintre ele vor fi minunate și sunt cu siguranță unele favorizate mai mult de mulți, dar există atât de multe pietre pe care le puteți găsi în design-ul dvs., care arată simplu simplu în comparație cu unele dintre cele mai vechi,.
Fonturile web ne oferă, de asemenea, o modalitate mai sigură de a lucra în mod responsabil cu modelele noastre receptive. Vă mai aduceți aminte de ziua în care au fost create titluri "fanteziste" cu fonturi alternative (care nu au fost considerate site-uri în siguranță) și au fost plasate ca imagini sau imagini de fundal? Fonturile web înseamnă că putem să abandonăm în mod sigur această practică și să o lăsăm în urmă, știind că vom avea site-uri frumoase cu fonturi complet accesibile și scalabile.
Odată cu introducerea de fonturi web și @ font-face, au apărut câteva servicii care ne ajută să implementăm fonturi web pe site-urile noastre. Aceste servicii includ:
Și chiar și cu foarte puține servicii, există multe modalități de a le pune în aplicare în procesul de dezvoltare. Unii folosesc JavaScript, iar alții folosesc CSS pur pentru a încărca fonturile. Dar ce se întâmplă cu fluxul de lucru al designerilor; cum poate lucra cu web fonturile funcționează în machete statice?
Este un pic cam complicat, deoarece nu există multe modalități de a integra fonturile pe care le utilizați cu software-ul grafic pe care îl puteți utiliza. Typekit au anunțat recent planurile de integrare a unui Desktop Sync cu Adobe Creative Cloud și au început să se rostogolească pentru a selecta utilizatori.
Datorită faptului că Typekit este achiziționat de Adobe, ei au acum o modalitate perfectă de a fi sincronizați cu Photoshop și Illustrator și cu toate celelalte produse Adobe, care este o veste bună pentru designeri.
În afară de asta, nu există altă modalitate prin care să putem integra cu ușurință fonturile Web pe care le alegem să le folosim în machetele noastre, dacă nu o facem prin achiziționarea versiunii standard a desktopului separat de fontul web. Dacă nu sunteți în căutarea după brand pentru un site web, atunci acest lucru poate începe să devină un pic cam scump și dificil de gestionat.
O altă opțiune pe care o aveți când lucrați cu tipografia este să sarăți rapid în browser; fie prin lucrul cu un serviciu, cum ar fi Typecast, așa cum se explică în secțiunile tipografice anterioare ale acestei serii sau prin achiziționarea fonturilor web pe serviciul preferat și văzând cum reacționează cu conținutul dvs. într-o versiune prototipată a designului.
Cu toate acestea, vă decideți să lucrați cu fonturile web în designul dvs., puteți fi garantat că veți avea un rezultat final mai creativ, mai bun ca utilizatorii dvs. să se bucure și că vă puteți fi mândri de.
Icoanele sunt un lucru mare în acest moment; un lucru bun care se întâmplă în lumea "tendințelor". Cred că icoanele și imaginile vizuale care pot cădea sub aceasta, de exemplu un logo, sunt un instrument excelent pentru a ajuta utilizatorii să navigheze în jurul unui site Web. Folosite alături de text, ele pot fi un mare ajutor vizual.
Cu toate acestea, într-o lume în care trebuie să ne asigurăm că imaginile și layout-urile funcționează bine pe atât de multe dispozitive și dimensiuni ale ecranului, trebuie să ne asigurăm că icoanele și imaginile noastre funcționează bine peste tot și sunt mai rezistente în viitor. Din fericire, există câteva opțiuni disponibile pentru noi, care ne pot ajuta să ne asigurăm că facem acest lucru.
PNG minunat (care ne-a oferit o modalitate de a include un fundal transparent într-o imagine, care nu a fost un GIF dodgy) este un mod sigur de a lucra cu icoane pe site-urile dvs..
Dar nu uita; dacă doriți să difuzați imagini cu aspect frumos într-o mulțime de Retina, atunci veți avea nevoie de un backup CSS sau JavaScript pentru a vă asigura că faceți acest lucru.
Lucrul cu PNG nu ar trebui să schimbe de multe ori nimic în fluxul de lucru. Puteți salva pur și simplu toate imaginile pe care le-ați creat la dimensiunea necesară și salvați direct din Photoshop.
PNG-urile funcționează bine și pentru scalarea, atâta timp cât scade. Dacă trebuie să scalați o imagine în sus (ceea ce se întâmplă uneori atunci când mergeți dintr-un port de vizualizare mai mare într-un port de vizualizare mai mic), PNG va arăta adesea pixelat și neclară, ceea ce este evident că doriți să evitați.
Acest ultim punct despre PNG ne duce rapid la opțiunea SVG pe care o avem pentru icoanele noastre. Atâta timp cât aveți o imagine bazată pe vector (de exemplu, creată în Adobe Illustrator) - și nu pe bază de raster, cum ar fi în Adobe Photoshop, de exemplu - puteți salva această imagine ca SVG.
În calitate de dezvoltator, probabil veți înțelege despre SVG și despre modalitățile diferite pe care le puteți implementa în site-ul dvs. Web. Dacă nu, SVG este o modalitate de a implementa o scalabil grafică în design-ul site-ului dvs. În acest fel, nu trebuie să vă faceți griji cu privire la transformarea imaginilor pixelată sau neclară la redimensionarea sau scalarea și, în schimb, se va întinde perfect la dimensiunea necesară de care aveți nevoie.
Acest lucru funcționează excelent pentru logo-uri, icoane, în principiu orice ar putea fi nevoie să fie scalată pe care o aveți deja într-un format vectorial sau puteți recrea cu ușurință în acest format, dacă este necesar. Când proiectați și salvați imaginile SVG, aș recomanda întotdeauna să lucrați la dimensiunea optimă de care aveți nevoie de cele mai multe ori; în acest fel, browserul dvs. trebuie doar să facă unele eforturi pentru a redimensiona și scala logo-ul în anumite circumstanțe și nu tot timpul.
După cum știm deja, fonturile web sunt scalabile infinit și pot funcționa perfect pe site-urile noastre în browserele curente. Unii oameni foarte inteligenți au reușit să combine ambele fonturi web și pictograme pentru a face fonturi de pictograme sau simboluri web. Destul de asemănătoare cu Wingdings, acestea au de multe ori mai mult sens și context atunci când sunt folosite decât o simplă pictogramă.
Există argumente pentru și împotriva fonturilor web ca pictograme: unii spun că pentru a încărca un întreg font pentru a utiliza doar câteva dintre ligaturi nu este sensibil, deoarece va adăuga o mulțime de greutate pe pagină și influența performanța.
În timp ce acest lucru ar putea fi dificil de evitat cu fonturile web de simbol comercial pe care le-ați cumpărat, acolo sunteți instrumente pentru a crea propriile fonturi web, unde puteți evita acest lucru și puteți crea doar un font cu pictogramele de care aveți nevoie. Unii spun, de asemenea, că este posibil să pierdeți un anumit context cu fonturile web, deoarece uneori utilizează doar o literă pentru a afișa pictograma. Cu toate acestea, unii oameni deștepți, cum ar fi cei de la Symbolset, folosesc cuvinte cheie pentru fonturi, care ajută la adăugarea cel puțin unui context mai puțin la pictograma pe care o aveți.
Și acolo aveți trei opțiuni pentru utilizarea icoanelor în desenele dvs.; alegerea este acum a ta de a face! Cele mai multe opțiuni vor adăuga puțin fluxul de lucru al designului într-un fel sau altul, dar depinde de dvs. să vedeți care proces ar putea să se încadreze în fluxul dvs. de lucru cel mai bine.
Accentsconagua