Å se! Det er en splitter ny, skinnende teknologisk funksjon. Og det hjelper sannsynligvis at det blir implementert av Apple-produkter. Et par flotte nettsteder (som denne) har allerede begynt å bruke den. Hva gjør den? Vil det være rundt for alltid? Hva betyr det og når eller hvorfor skal jeg prøve det?

Vi snakker om å bli retina klar. Jeg vil være ærlig med deg; da jeg først hørte om det, kastet jeg det bare til siden. Det er hovedsakelig på Apple-enheter, og jeg skjønte at det var noe de bare kunne gjøre. Det var ikke en stor spillveksler fordi mange andre mennesker ikke kunne påvirke det. Men gutt, var jeg feil.

Nå har jeg gjennomgått et par nettsteder og hørt fra et par "eksperter", og det virker som om det er en ekte fascinasjon med å være retina klar. La meg også si at fascinasjonen er hovedsakelig for webdesignere og artister som bryr seg om ting som ser bra ut. Jeg er sikker på at hvis du spurte den gjennomsnittlige personen (uten en Apple-enhet) hva som er retina-klar, ville de se på deg som om du hadde to hoder. Men det betyr ikke at det ikke vil være noe som i hovedsak viser seg å være flott og ta over verden snart.

Så hva er det?

Når vi ser på våre skjermer, kan vi noen ganger se de enkelte pikslene. Prøv å ta en titt på noe som et CSS-avrundet hjørne eller et virkelig uklart bilde som blir blåst opp. Du kan se de små, små torgene eller punktene som prøver å gjøre opp elementet. Piksler er ekstremt små, men til et opplært øye, som en designer, kan vi bare fortelle. Vi vet når vi ser pixelasjon, og vi vet når bilder og elementer bare er rett opp stygg.

Problemet var ikke en stor avtale før ting som responsiv design og behovet for å passe en ting til flere nettleserstørrelser kom sammen. Før har du bare behandlet det fordi nettleseren din, uansett hva du var på, skulle vise akkurat hva du ba om å vise. Nå med responsiv design og virkningen av tabletter og andre enheter, kan jeg klemme et bilde for å gjøre det mindre eller dobbeltklikk på skjermen min for å øke størrelsen på siden.

På nettsteder som ikke er retina klar, vil sidene se forferdelig pixelert og uklart i sin normale tilstand, så vel som når sidestørrelsene økes. Retina klare nettsteder, sammen med enhetene, lar deg se flere piksler per kvadrat tomme. Derfor ser det trente øynet ditt et veldig jevnt bilde eller element av høy kvalitet og ingen forvrengning. Å bli retina klar er gjort med noen CSS og Javascript. Men for bilder blir de opprettet minst dobbelt så stor som de blir vist på nettet.

Fordeler med retina klare nettsteder

1. Skarpere bilder: Som vi allerede har snakket om, er hele ideen om retina-klar teknologi å gi oss skarpere bilder. Ideen bak retina klar er å skape noe som ville se så skarpt ut som det ville være i print. Farger er levende og lyse fordi du får flere piksler per tomme på retina klare enheter. Det er egentlig som høydefinisjon for din bærbare, telefon eller nettbrett.

2. Bedre estetikk for responsiv: Igjen har vi berørt ideen om at du får bedre bildekvalitet. Hva noen kanskje ikke vet er at skape retina klar nettside gir skarpere skrifter. Når vi noen ganger zoomer inn på nettsider på nettsteder, slutter vi å strekke ut noen fonter som ikke kan strekkes. Mange av disse skriftene skal ikke brukes på en slik måte, og gir oss det samme bildet som vi kan få fra noen bilder.

Retina klare nettsteder hjelper jevne over skrifter. Det er også noen skrifter som er forberedt på retina-klare sider og vil opprettholde bildekvaliteten når de zoomes inn (eller til og med ut) på retinaenheter.

3. Designe med enda mer detalj: Jeg tror minimalisme har blitt populært fordi det er et enkelt konsept å forstå og designe for. Tanken er å forbli så ren som mulig og kvitte seg med fluffen. Hver så ofte er det subtile detaljer kastet inn i disse typer temaer, så vel som andre som noen ganger er vanskelige å se på vanlige skjermer. Retina enheter er ikke bare nyttige i deres høye kvalitet bildefremvisning, men også i lysstyrken på skjermen.

4. 30 millioner mennesker tror at nettstedet ditt er stygg: Nettstedet ditt lider akkurat dette minuttet hvis du ikke er klarinett klar. Over 30 millioner brukere har kjøpt disse Apple-enhetene som har denne skarpere skjermfunksjonen. Når de ser på nettstedet ditt, blir bildene pixelert, fonter er tøffe å lese og generelt er det sannsynligvis en dårlig estetikk. Hvis du vet at målgruppen din er sannsynligvis det samme publikum som har disse enhetene, kan det være på tide å gå videre og forberede nettstedet ditt til å bli retina klar.

Opplæringsprogram og ressurser

Retina.js

Retina.js er et JavaScript-skript som sjekker serveren din for å se om du har høyoppløselige bilder tilgjengelig på nettstedet ditt. For eksempel, hvis du opprinnelig har picture.jpg tilgjengelig, for å gjøre det retina klar, vil de se etter det bildet du lastet opp, som er to ganger så stor, og skal oppkalt tilsvarende. Dette tar vare på mye av problemet med høyoppløselige bilder.

Hvordan lage din WordPress-tema Retina Ready

Når du får Retina.js, handler det hovedsakelig med bildene, som åpenbart er en stor del av å skape et retina-klart nettsted. Denne opplæringen går gjennom noen av måtene du kan endre resten av nettstedet ditt slik at det fungerer på disse enhetene. Det er noen CSS, samt bytte av grafikkutsteder for skrifttyper og mer.

Hvordan lage Retina Graphics for webdesignene dine

Vi forstår at det meste av arbeidet er med grafikk, så hvordan endrer du grafikken du må gjøre netthinnen klar? Og hvordan fortsetter du å lage retina klar grafikk? Line25 forklarer noen av teknikkene som er tilgjengelige i Photoshop og Illustrator for å få grafikken din i orden.

Slik lager du Retina Klar Grafikk i Adobe Photoshop CS6

For de av oss i en tidskrem og vil ha en rask løsning for å lage netthinnen bilder i Photoshop, er dette veiledningen for deg. Med 3 raske trinn, vil du være en mester for å lage retina klar grafikk på kort tid.

Konklusjon

Retina klar verden er fortsatt ny, og det er fortsatt noe som Apple har tak i. Ingen vet som tiden gjør, så vi skal vente og se. I mellomtiden bør mange av oss nyte de superklare bildene og rundt bedre design.

Hvordan har du det på nettet om du blir klarhinne klar? Betyr det engang for deg? Del dine kommentarer og lenker til retina klare sider i kommentarene.