Det har vært litt tid siden Retina-skjermer på IOS-enheter ble først utgitt, men det er fortsatt mange nettsteder der ute som ikke er Retina-ready, selv som designere og utviklere har fått hip til fakta av en fullt lydfull, mobil -friendly verden.
Her er hva du trenger å vite om alternativene for å gjøre arbeidet ditt se beste ut på de stadig vanlige Retina-skjermer. Den gode nyheten er at, så skremmende som det kan virke, er det egentlig ikke så komplisert.
Prepping ditt nettsted for retina-Klar bilder
Dobbel din moro
Det er faktisk en rekke måter du kan skinke denne katten, så å si. I det første må du skarpe opp CSS litt og inkludere versjoner av bildene dine ved å dobbelte deres normale oppløsning. CSS vil avgjøre hvilket bilde som skal vises basert på enheten som nettstedet ditt blir vist på.
CSS-oppdateringene du trenger vil variere avhengig av målgruppen, men den gode nyheten er at det ikke er veldig komplisert nå, og blir enklere. Vi forlater den faktiske kodingen til en annen dag.
En ting å huske på: Det kan hende du ønsker å utvikle en navngivningskonvensjon for dine retinabilder, slik at du enkelt kan knytte de to versjonene av et bilde dersom de må redigeres senere.
SVG
En annen tilnærming er SVG eller Scalable Vector Graphics. Som navnet antyder, er disse begrenset til vektorgrafikk og vil ikke fungere med fotografiske bilder, men SVG-grafikk eliminerer behovet for to bildefiler for hver grafikk på nettstedet ditt. Igjen, det er variasjoner fra nettleser til nettleser, slik at du vil gjøre ytterligere undersøkelser avhengig av dine behov.
Og som nevnt ovenfor, vil SVG sannsynligvis ikke fungere som din eneste løsning på de fleste nettsteder, med mindre nettstedet ikke inneholder bilder av typen bilder.
brute force
Selvfølgelig kan du også bare dumpe filene med lav oppløsning og bare tjene opp Retina-klare bilder. Vi vil bare anbefale dette til bruk med et svært godt definert publikum. Hvis du vet at båndbredden ikke er et problem, kan dette være den riktige ruten, men det er absolutt ikke en god praksis
Andre kodingsløsninger
I den andre enden av innsatsen og elegansspekteret er kodingsmetoder som er avhengige av noen endringer på server-siden (som .htaccess-filoppføringer) sammen med PHP og Javascript-koding.
Dette kan være din beste tilnærming, selv om innsatsen involvert kanskje ikke er verdt det for mindre prosjekter.
Samlet sett vil tilnærmingen du tar, avhenge av publikum, arten av nettstedets visualer og utviklingslagets nivå av teknisk ekspertise. Det er en god løsning for omtrent enhver situasjon. Den eneste dårlige løsningen er å ignorere Retina viser helt.
NASDAQ Photo via Shutterstock
