Share
Den nye iPad ble utgitt i forrige måned, og har blant annet en utrolig Retina Display med en oppløsning på 2048 med 1536 piksler. Ganske mye så snart det ble annonsert, ble fokus vendt mot innfødte apputviklere og deres arbeid for å skala apper opp til den høyere oppløsningen.
Det var uten tvil feil fokus. Relativt lite ble tenkt på når det gjaldt nettet, og hvordan det ville se på den nye Retina Display i løpet av annonseringen. Det har forlatt oss med et internett av utrolig skarp tekst, men latterlig, forferdelig, lavkvalitetsbilder. Det er på tide å optimalisere, så i denne opplæringen skal vi strategisere hvordan du kan designe med Retina Display i tankene.
Dette er uten tvil ganske åpenbart, men det kan fortsatt bli oversett av noen. Med betydelige fremskritt i CSS, kan bruken av bilder i et nettsteds struktur være ganske minimal, eller til og med ikke-eksisterende i det hele tatt. Dette gir disse nettstedene en stor fordel når det kommer til Retina Display-kompatibilitet fordi tekst og CSS-generert grafikk skal skaleres uten å redusere kvaliteten. Av samme grunn ser teksten målbart bedre ut på en Retina Display.
Et nettsted jeg jobbet på, trengte ikke en enkelt oppdatering til temaet sitt for å se bra ut på Retina Display; Mangelen på bilder mente det var ikke noe å oppdatere. Selvfølgelig vil ikke alle sider være helt sans bilder, men minimerer bruken av dem, vil redusere innsatsen som kreves for å optimalisere for netthinnen.
Vanligvis er det ett skritt for denne taktikken: minimere bildebruk der det ikke er nødvendig.
Naturligvis er Apples nettsted optimalisert for å se utrolig skarpt og skarpt ut på Retina Display. I dagene før iPad-annonseringen begynte Apple å oppdatere sin egen nettside for å gi opp responsive bilder; elementer som endret avhengig av om du ble surfet på en ny iPad eller ikke.
Apples metode er enkel i prinsippet. Nettstedet laster opp som normalt, men da bruker de JavaScript for å erstatte relevante bilder hvis du surfer på en ny iPad. Hvis du besøker en ny iPad, får du de optimaliserte bildene, mens en annen nettleser vil trekke opp standardinnstillingene.
Et slikt eksempel på dette er Apples helttekst på iPads produktside, ved å bruke følgende kode i selve filen.
For enkelhets skyld vil jeg ikke dele deres faktiske skripting, men i det vesentlige kontrollerer den først om nettleseren er på en enhet med en retina-skjerm, og sjekker for eksistensen av et 2x bilde (vi kommer inn på det om et minutt) og, hvis begge de tidligere forholdene er sanne, viser 2x bildet.
2x-suffiks-konvensjonen betyr "Retina" -modellen for filen image.png ville vært image_2x.png. Dette kommer fra iOS, som automatisk viser en @ 2x bilde i en innfødt app når den eksisterer. Dessverre får vi webdesignere ikke luksusen til automatisk søk og visning, så vi må komme med metoder for å etterligne det med egne skript og spørringer.
Dette kommer imidlertid til en pris. Ved bruk av denne metoden laster sluttbrukeren både ikke-retina og retina-bildet, noe som betyr at siden ender med en økt filstørrelse. Ikke bare det, Apples skripting betyr at flere forespørsler sendes til og fra nettleseren, noe som resulterer i ytterligere sidetilpasningstid. Selvfølgelig, hvis du fortsetter å minimere bildebruk, vil dette problemet også bli redusert.
Mens Apple bruker JavaScript, en noe effektiv metode, er det et alternativ; bruker CSS media spørringer for å betjene styling tilstand til enhetens piksel tetthet.
Før vi kommer inn på det, er det viktig å merke seg at i siste instans er iPad-skjermen fortsatt 1024x768 px i "CSS piksler". Jeg vil tillate Dave Hyatt å forklare.
De fleste nettsted forfattere har tradisjonelt tenkt på en CSS pixel som en enhet pixel. Men da vi går inn i denne nye høye DPI-verdenen der hele brukergrensesnittet kan forstørres, kan en CSS-piksel ende opp med å være flere piksler på skjermen. Hvis jeg for eksempel angir en forstørrelse for zoom på 2x, ville 1 CSS-piksel faktisk bli representert av en 2 × 2 firkant med enhetspiksler.
Derfor vil metoden vi bruker ikke målrette mot iPad basert på oppløsningen, fordi den ganske enkelt ikke ville fungere. For all hensikt er iPad-oppløsningen fortsatt 1024x768 px i henhold til nettleseren, og målretting av denne oppløsningen vil også målrette mot alle tidligere iPad-generasjoner. På samme måte vil målrettingen mot den nye 2048x1536 px-oppløsningen med medieforespørsler ikke ha noen effekt på den nye iPad.
I stedet kan vi målrette mot bruk av min-enhet-pixel-forholdet spørsmål. Spørringen forteller at nettleseren skal laste opp en bestemt stil basert på forholdet mellom enhetspiksler til de nevnte "CSS pikslene". I Retina Display-utstyrt iPad-saken er dette to (1024: 2048 og 768: 1536 forenklet ned til 1: 2).
Derfor kan vi laste inn et "retina" stilark basert på enhetens pikselforhold.
Åpenbart bruker vi WebKit-prefikset siden iPad-nettleseren er Safari, en WebKit-nettleser, men også fordi media-spørringen synes å være bare tilgjengelig gjennom WebKit for nå. Siden stilkaskade (som navnet "CSS" vil fortelle deg), ved å ganske enkelt bestille den ovennevnte koden riktig, vil regler i det stilarket overskrive de for vanlige enheter som er spesifisert tidligere.
Hvis du ikke tilfeldigvis vil sette alt i et helt eget stilark, kan du bruke inline media spørringer for å spesifisere deler av stilarket bare for Retina Display-utstyrte enheter, slik som:
Accentsconagua
@media (-webkit-min-enhet-pixel-forhold: 2) #element bakgrunnsbilde ('image-2x.png'); Merk: Når du bruker "2x" navngivningssystemet, er det en nyttig måte å organisere bildene på, ikke føler deg forpliktet til å gjøre det. Du kan navngi bildene dine uansett hva du vil, og i motsetning til innfødte apps trenger de ikke å være like eksternt liknende.
Selvfølgelig er det ikke på noen måte som er spesifikt for iPad å bruke dette mediet spørsmålet. Faktisk vil den samme logikken bli utløst når du surfer på nettstedet ditt på en hvilken som helst enhet med en tilsvarende pixeldensitet som bruker samme CSS til enhetspikselforhold, inkludert iPhone 4 og iPhone 4S. Hvis du bare ønsker å målrette mot iPad, kan du bare kombinere spørsmålet om pikselforholdet med en bredde, for å spesifisere bare Retina Display-utstyrte enheter av iPads rapporteringsoppløsning.
Det er ikke et tilfelle av at nettstedet ditt ser bra ut uten å optimalisere, men ser bedre ut med. Du trenger bare å besøke et bilderikt, men ikke-optimalisert nettsted for å forstå hvor forferdelig ikke-retinabilder ser på den nye iPad. Og til slutt må du faktisk oppleve resultatene. Hvis du ikke har tilgang til en ny iPad, anbefaler jeg på det sterkeste å ta en tur til en Apple Store for å ta en titt.
Mens Apple har solgt millioner av enheter, i det store nettlesingsprogrammet, er det fortsatt en liten bekymring. Imidlertid med potensiell Retina Display-utstyrt MacBook i horisonten for så tidlig som i sommer, kan du legge inn arbeidet nå, og det kan virkelig lønne seg senere.
