A fost destul de mult timp de cand afisajele Retina pe dispozitivele iOS au fost lansate pentru prima data, dar exista inca o multime de site-uri care nu sunt pregatite pentru Retina, chiar daca designerii si dezvoltatorii au inregistrat soldul cu faptele unui telefon complet mobil - lume prietenoasă.
Iată ce trebuie să știți despre opțiunile pentru a vă face munca să arate cât se poate de bine pe afișajele retinei din ce în ce mai comune. Vestea bună este că, la fel de descurajant cum se pare, într-adevăr nu este atât de complicat.
$config[code] not foundPrepping site-ul dvs. pentru imaginile Retea-Ready
Dublă distracția ta
Există, de fapt, o serie de moduri în care puteți să pătrunzi această pisică, ca să spunem așa. În primul rând, va trebui să vă clarificați puțin CSS-ul și să includeți versiuni ale imaginilor la dublul rezoluției obișnuite. CSS va determina ce imagine să fie afișată pe baza dispozitivului pe care este vizionat site-ul dvs.
Actualizările CSS pe care le veți avea vor varia în funcție de browserele dvs. țintă, dar vestea bună este că nu este foarte complicat acum și devine mai ușor. Vom lăsa codarea reală într-o altă zi.
Un lucru pe care să-l aveți în vedere: este posibil să doriți să dezvoltați o convenție de numire pentru imaginile retinei, astfel încât să puteți asocia cu ușurință cele două versiuni ale unei imagini în cazul în care acestea trebuie editate mai târziu.
SVG
O altă abordare este SVG sau Vector Graphics Scalable. După cum sugerează și numele, acestea se limitează la grafica vectorială și nu vor funcționa cu imaginile fotografice, dar graficele SVG elimină necesitatea existenței a două fișiere de imagine pentru fiecare grafic pe site-ul dvs. Din nou, există variații de la browser la browser, astfel încât veți dori să faceți cercetări suplimentare în funcție de nevoile dvs.
Și, după cum sa menționat mai sus, probabil că SVG nu va funcționa ca singura dvs. soluție pe majoritatea site-urilor, cu excepția cazului în care site-ul nu conține imagini de tip fotografic.
Forta bruta
Desigur, puteți să aruncați cu ușurință fișierele cu rezoluție mică și pur și simplu să serviți imaginile gata pentru Retina. Am recomanda acest lucru doar pentru utilizări cu un public foarte bine definit. Dacă știți că lățimea de bandă nu va fi o problemă, aceasta ar putea fi calea potrivită, dar cu siguranță nu este o practică bună
Alte soluții de codificare
La celălalt capăt al efortului și a spectrului de eleganță sunt metode de codare care se bazează pe unele modificări de la server (precum intrările de fișiere.htaccess) împreună cu codarea PHP și Javascript.
Aceasta ar putea fi cea mai bună abordare, deși efortul implicat ar putea să nu merite acest lucru pentru proiectele mai mici.
În ansamblu, abordarea pe care o întreprindeți depinde de publicul dvs., de natura vizuală a site-ului dvs. și de nivelul de expertiză al echipei dvs. de dezvoltare. Există o soluție bună pentru aproape orice situație. Singura soluție rău este ignorarea în întregime a ecranelor retinei.
NASDAQ Foto prin intermediul Shutterstock
