Share
De nieuwe iPad werd vorige maand uitgebracht en heeft onder andere een ongelooflijke Retina-display met een resolutie van 2048 bij 1536 pixels. Zodra het werd aangekondigd, concentreerde de focus zich op native app-ontwikkelaars en hun werk om apps te schalen tot de hogere resolutie.
Dat was aantoonbaar de verkeerde focus. Over relatief weinig werd nagedacht in termen van het web, en hoe dat eruit zou zien op het nieuwe Retina Display in de aanloop naar de aankondiging. Het heeft ons een internet achtergelaten met ongelooflijk heldere tekst, maar lachwekkend slechte afbeeldingen van lage kwaliteit. Het is tijd om te optimaliseren, dus in deze tutorial gaan we strategieën bedenken hoe je kunt ontwerpen met het Retina Display in gedachten.
Dit is aantoonbaar vrij voor de hand liggend, maar het kan nog steeds over het hoofd worden gezien door sommigen. Met aanzienlijke verbeteringen in CSS, kan het gebruik van afbeeldingen in de structuur van een site redelijk minimaal zijn, of zelfs helemaal niet bestaan. Dit geeft deze sites een enorm voordeel als het op de compatibiliteit met Retina Display aankomt, omdat tekst en CSS-gegenereerde afbeeldingen opschalen zonder de kwaliteit te verminderen. Om dezelfde reden ziet de tekst er meetbaar beter uit op een Retina-display.
Een site waaraan ik werkte, hoefde niet één enkele update van het thema te hebben om er geweldig uit te zien op het Retina-display; het gebrek aan beelden betekende dat er niets te updaten was. Natuurlijk zal niet elke site volledig zijn zonder afbeeldingen, maar het minimaliseren van het gebruik ervan zal de inspanning die nodig is om te optimaliseren voor het Retina-display verminderen.
Over het algemeen is er één stap in deze tactiek: minimaliseer het gebruik van afbeeldingen waar het niet echt nodig is.
Uiteraard is de website van Apple geoptimaliseerd om er ongelooflijk scherp en helder uit te zien op het Retina-display. In de dagen voorafgaand aan de aankondiging van de iPad, begon Apple met het bijwerken van hun eigen website om responsieve beelden te bieden; items die zijn gewijzigd, afhankelijk van of u op een nieuwe iPad hebt browsen of niet.
Apple's methode is in principe eenvoudig. De website wordt normaal geladen, maar ze gebruiken JavaScript om relevante afbeeldingen te vervangen als u op een nieuwe iPad surft. Als u een nieuwe iPad bezoekt, krijgt u de geoptimaliseerde afbeeldingen, terwijl elke andere browser de standaardinstellingen opheft.
Een voorbeeld hiervan is Apple's helden tekst op de productpagina van de iPad, met behulp van de volgende code in het bestand zelf.
Omwille van de eenvoud zal ik hun daadwerkelijke scripting niet delen, maar in wezen controleert het eerst of de browser op een apparaat met een Retina-display staat en controleert dan of er een 2x-afbeelding bestaat (we komen daar zo aan) en, als beide vorige voorwaarden waar zijn, wordt de 2x-afbeelding weergegeven.
De overeenkomst met het 2x-achtervoegsel betekent de tegenhanger Retina voor het bestand image.png zou zijn image_2x.png. Dit komt van iOS, dat automatisch een @ 2x afbeelding in een native app wanneer deze bestaat. Helaas krijgen webontwerpers niet de luxe van automatisch zoeken en weergeven, dus we moeten methoden bedenken om dit te emuleren met onze eigen scripts en vragen.
Dit komt echter op een prijs. Met behulp van deze methode laadt de eindgebruiker beide de niet-Retina en Retina afbeelding, wat betekent dat de pagina eindigt met een verhoogde bestandsgrootte. Niet alleen dat, Apple's scripting betekent dat er meer verzoeken worden verzonden van en naar de browser, wat resulteert in een verdere laadtijd van de pagina. Als u het gebruik van afbeeldingen blijft minimaliseren, wordt dit probleem natuurlijk ook verminderd.
Hoewel Apple JavaScript gebruikt, een enigszins effectieve methode, is er een alternatief; met behulp van CSS-mediaquery's om de stylingsituatie naar de pixeldichtheid van het apparaat te brengen.
Voordat we hierop ingaan, is het belangrijk om op te merken dat het scherm van de iPad uiteindelijk nog steeds 1024x768 px is in "CSS-pixels". Ik laat Dave Hyatt het uitleggen.
De meeste auteurs van websites hebben traditioneel gedacht aan een CSS-pixel als apparaatpixel. Wanneer we echter deze nieuwe hoge DPI-wereld binnengaan waar de gehele gebruikersinterface kan worden vergroot, kan een CSS-pixel uiteindelijk meerdere pixels op het scherm worden. Als ik bijvoorbeeld een zoomvergroting van 2x instel, dan zou 1 CSS-pixel feitelijk worden gerepresenteerd door een 2 × 2 vierkante apparaatpixels.
Daarom zal de methode die we gebruiken de iPad niet targeten op basis van zijn resolutie, omdat het gewoon niet zou werken. In alle opzichten is de resolutie van de iPad volgens de browser nog steeds 1024x768 px, en het richten van deze resolutie zou zich ook richten op alle voorgaande iPad-generaties. Evenzo zou het targeten van de nieuwe resolutie van 2048x1536 pixels met mediaquery's geen enkel effect hebben op de nieuwe iPad.
In plaats daarvan kunnen we ons richten op het gebruik van de min-inrichting pixel verhouding query. Die query vertelt de browser om een specifieke stijl te laden op basis van de verhouding tussen apparaatpixels en de eerder genoemde "CSS-pixels". In de case van het Retina Display-uitgeruste iPad is dit twee (1024: 2048 en 768: 1536 vereenvoudigd tot op 1: 2).
Daarom kunnen we laden in een "retina" -stijlblad op basis van de pixelratio van het apparaat.
Vanzelfsprekend gebruiken we het voorvoegsel WebKit omdat de browser van de iPad Safari is, een WebKit-browser, maar ook omdat de mediaquery voorlopig alleen via WebKit beschikbaar is. Aangezien stijlen cascade zijn (zoals de naam "CSS" u zal vertellen), door gewoon de bovenstaande tag correct te bestellen, overschrijven regels in die stylesheet die voor reguliere apparaten die eerder werden gespecificeerd.
Als u niet alles in een volledig afzonderlijk stylesheet wilt plaatsen, kunt u inline mediaquery's gebruiken om delen van uw stylesheet alleen voor apparaten met Retina Display op te geven, zoals:
Accentsconagua
@media (-webkit-min-device-pixel-ratio: 2) #element background-image ('image-2x.png'); Notitie: Terwijl het gebruik van het "2x" naamschema een handige manier is om uw afbeeldingen te organiseren, voelt u zich niet verplicht om dit te doen. Je kunt je afbeeldingen een naam geven die je wilt en, in tegenstelling tot bij native apps, hoeven ze niet eens vergelijkbaar te zijn.
Uiteraard is het gebruik van deze media-query op geen enkele manier specifiek voor de iPad. In feite wordt dezelfde logica geactiveerd bij het bladeren door uw site op elk apparaat met een vergelijkbare pixeldichtheid die dezelfde CSS-naar-apparaatpixelverhouding gebruikt, inclusief de iPhone 4 en iPhone 4S. Als u alleen de iPad wilt targeten, kunt u eenvoudig de pixelratio-query combineren met een breedte-één, om alleen Retina Display-uitgeruste apparaten van de rapportageresolutie van de iPad te specificeren.
Het is niet zo dat uw site er goed uitziet zonder te optimaliseren, maar er er beter uit te zien met. U hoeft alleen maar naar een beeldrijke maar niet-geoptimaliseerde website te gaan om te begrijpen hoe verschrikkelijk de beelden van niet-Retina-afbeeldingen eruit zien op de nieuwe iPad. En uiteindelijk moet je de resultaten daadwerkelijk zien. Als u geen toegang heeft tot een nieuwe iPad, raad ik u ten zeerste aan een bezoek aan een Apple Store te nemen om er een kijkje te nemen.
Hoewel Apple miljoenen eenheden heeft verkocht, is het in het grote schema van browsers nog steeds een klein probleem. Met potentieel uitgeruste Retina Display MacBook aan de horizon voor zo vroeg als deze zomer, zou het inleveren van het werk nu echt later vruchten afwerpen.
