Apple driver fram teknikindustrin genom att öka pixeldensiteten på iPhone och iPad skärmar. Det här är bra ur användarens perspektiv, men som webbdesigner eller utvecklare hotar det bokstavligen att helt ändra hur du bygger webbplatser.
Är du redo för HD webbdesign? Vet du hur dina webbplatser kommer att se på en ny generation högupplösta skärmar? Vilka steg kan du vidta för att förbereda dig själv och vilka färdigheter kommer du att behöva vara relevanta under de kommande åren? Läs vidare för att ta reda på det.
När Apple talar lyssnar vi
Jag har använt Macs troget sedan OS 9 dagar, inte så länge som några gamla timers men tillräckligt länge för att dricka Kool-hjälpen och bli helt beroende av allt Apple.
Jag kommer ihåg när jag såg en Apple-logotyp såg att produkten var något av en nisch, en outlier som bara de envisa individerna i samhället använde i ett öppet försök att gå emot huvudströmmen, Windows-loving culture.
? Om du väljer ett hus slumpmässigt, kommer du hitta minst en iPod, iPhone och / eller iPad inuti.?Genom en imponerande omvandling byggd på engagemang för att skapa innovativa nästagenprodukter har det lilla underdogföretaget blivit det mest värdefulla företaget på planeten. Det kanske inte finns någon Mac på varje skrivbord i Amerika, men om du väljer ett hus slumpmässigt, kommer du att hitta minst en iPod, iPhone och / eller iPad inuti.
Jag vågar inte vältaligt för att omvandla dig till min kult, jag vill helt enkelt fastställa att Apple är en mover och shaker i teknikindustrin. Ingen bryr sig om vilka nya funktioner Newton kom ut med, men när Apple släpper ut en ny iOS-enhet, stannar världen och tålmodigt lyssnar på vad guiderna vid Infinite Loop berättar för framtiden kommer att se ut.
Apple Bets på High-Res
Fram till nyligen hade Apple ingenting att göra med vår fascination med bättre skärmupplösning. Större och bättre HD-TV har varit ett fokus för konsumenter och elektronikföretag i ett decennium. Snygg marknadsföring stod ihop med imponerande teknik för att skapa en omättlig törst för högupplösta skärmar, kabelprogrammering och filmer.
För det mesta har denna trend dock hållit sig borta från databehandling. Visst, det finns enorma, underbara biografskärmar men pixeldensiteten var aldrig sådan att det krävde ett stort paradigmskifte. Det är tills nyligen.
När iPhone 4 sjönk i mitten av 2010 kom det med en överraskning: The Retina? skärm, som blåste bort oss genom att fördubbla den gamla upplösningen med en häpnadsväckande 326 pixlar per tum (för jämförelse, en 27 "iMac är 109ppi). Det var en spelväxlare. Det fanns gott om spekulationer som skulle skala denna teknik till en överkomlig takt vara nästan omöjligt, men Apple har gjort så mycket genom att också fördubbla upplösningen på tredje generationens iPad, som kommer in på en något lägre men fortfarande vacker 264ppi.
Varför detta helt förändrar hur du gör ditt jobb
Än sen då? Tack för historielektionen, men det här är en designblog, eller hur? Vem bryr sig om pixeldensiteten hos en iPad? Som webbdesigner gör du, om du redan vet det eller inte.
Problemet är uppenbart här på denna sida, liksom alla andra som du besöker idag. Gå vidare, ta en bild från webben och öppna den i Photoshop. Hämta nu dialogrutan Bildstorlek. Se något intressant?
Webbdesigners har alltid haft en bra liten fördel jämfört med tryckdesigners: vi kan använda lågupplösande konstverk. Varför är det en fördel och inte en nackdel? Eftersom högupplösta PSD-skivor kan sakta ner din maskin till en krypning, kostar högupplösta stock foton mycket mer pengar, högupplösta bilder tar för alltid att ladda över webben. listan fortsätter och fortsätter.
Problemet är klart men den bilden ovan kommer in på bara 72ppi medan den nya iPad är 264ppi! (Detta överskrivar argumentet lite, läs den här artikeln för mer information om huruvida du faktiskt ser bilder på 72ppi.)
Tänk på vad det betyder. Apple har näthinnan på den fulla iOS-raden: iPod Touch, iPhone och iPad. Detta innebär att miljoner av människor surfar på nätet varje dag på högupplösta skärmar som inte visar dina bilder korrekt. Gör inget misstag, den här trenden blir bara värre när andra tillverkare av enheter spelar upp och Apple utforskar sätt att få mer pixeldensitet till nästa uppenbara plats: den bärbara marknaden.
Vad kan du göra?
Problemet med pixeldensitet är en intressant. Webben representerar så många olika tekniker som kommer ihop i harmoni att det kan vara kaotiskt om en av dessa tekniker går framåt och stör balansen.
Vi bevittnar uppkomsten av högupplösta skärmar, men vårt innehåll är bara optimerat för de gamla skärmarna. Tänk vidare på hur galen webbutvecklare handlar om sidladdningstider med lågbildade bilder, föreställ dig nu hur mycket av en långsammare du skulle få på en bild, tung plats som Pinterest om den plötsligt fylldes med 326ppi bilder!
Ren HTML och CSS Web Elements
Den goda nyheten är att vi har förberett oss för detta på några sätt i flera år och vi visste inte ens det. Ökningen av CSS3 och HTML5 har verkligen drivit fram tanken på att minska antalet bilder vi använder i vår uppställning.
Numera görs de flesta användargränssnittet i webbläsaren, vilket innebär att de bara går bra på alla skärmar som du slänger på dem.
För att illustrera är här hur det ser ut när jag zoomar in på en bildbaserad nedladdningsknapp på min iPhone 4.
Nu, om jag tittar på samma knapp som byggdes på exakt samma pixeldimensioner, men gjordes med CSS, kan jag zooma in så långt jag vill med nollbildsförstöring.
Det är en vacker sak är det inte? Den moraliska här är att den? Imageless? trenden har löpt ut på lång sikt och gav oss mycket mindre att oroa sig för än vi skulle ha haft näthinneskärmar som slog tillbaka när vi använde bilder för gradienter, skuggor, rundade hörn och ganska mycket alla andra avancerade stylingar.
Det är viktigt att notera att objekt som gjorts med HTML5-kanfas och JavaScript kan uppnå liknande skalbarhet.
SVG
SVG eller Scalable Vector Graphics, är ett annat viktigt steg på vägen mot upplösning oberoende. Denna teknik har funnits i åldrar, men har bara nyligen sett cross-browser support med IE9 äntligen hoppar på bandwagon.
När jag tänker på SVG tänker jag på Adobe Illustrator. Den här appen används främst för att skapa vektorbaserad grafik med oändlig skalbarhet. SVG ger i sin tur samma funktionalitet som webbgrafik.
Nästan allt du kan bygga i Illustrator och andra vektorredigeringsappar kan enkelt exporteras som en SVG-fil och implementeras på webben som ett skalbart objekt.
Fördelen här ovanför CSS verkar luddig först men blir tydlig när du arbetar med komplexa bilder. Det är lätt att skapa enkla knappar med CSS, men när det gäller att bygga säger Starbucks-logotypen, saker blir riktigt rörigt och komplicerat.
Som ett alternativ till timmar och timmar av CSS-fiddling och kanske hundratals linjer med kod för ett enda objekt (förutsatt att det är möjligt med CSS), kan du bara exportera en vektorversion av Starbucks-logotypen som en SVG och bädda in den i din web sidan på bara en minut eller två! Klicka här för att se ett liveexempel på detta. Var noga med att zooma in med Command + och se hur bilden skaar perfekt.
Om du vill lära dig mer om hur du implementerar SVG på din webbplats, kolla in dessa stora resurser:
- Upplösning Oberoende Med SVG
- Använda SVG för flexibla, skalbara och roliga bakgrunder, del I
- Spelar med SVG Design
Men vad om foton?
Det här är bra och bra, men med tanke på att vi har tagit upp en bildlös webbdesign med användargränssnitt så länge är det inte så mycket en kurvboll att ta saker lite längre med SVG. Det verkliga problemet ligger i bilder på webben.
Bilder är rasterbilder och som sådan krossar de helt enkelt drömmen om verkligen upplösningsoberoende webbdesign. Oavsett vad vi drar ut ur vår väska med webbdesign tricks, kan vi inte komma runt denna begränsning.
För närvarande innebär detta att du serverar olika bilder till olika enheter. Det här suger, men du vill inte göra non-retina skärmar ladda i de stora bilderna och du vill inte tjäna upp sucky bilder till näthinnorna, så det här är din enda lösning.
Detta kan åstadkommas genom mediefrågor och funktionen för enhet-pixel-förhållande. Som ett exempel visar Hal Gatewood oss hur vi kan rikta oss mot tredje generationens iPad:
Vad om HTML-inbäddade bilder?
Metoden ovan är bra och bra, men den fungerar bara med CSS-bakgrundsbilder. Vad händer om du vill bädda in en bild med hjälp av HTML? Ännu längre har detta drastiska konsekvenser för video också, så hur kan du tjäna upp egna videor till höga bildskärmar?
Tyvärr finns det inget riktigt svar med ren HTML. Kanske blir behovet så stort att vi kommer se något så här i framtiden, men för närvarande har du ingen lycka till.
Den enda lösningen är att vända sig till något kraftfullare som JavaScript. Bdoran.co.uk har ett snabbt exempel på hur du upptäcker iPhone 4 med JavaScript eller PHP som du bör kolla in.
Detta visar uppenbarligen enorma problem för webbdesigners som försöker hålla fast vid HTML och CSS och är inte bekanta med JavaScript och annan avancerad webbteknologi. Plötsligt kan denna grupp inte ens presentera enkelt innehåll på ett sätt som är optimerat för visning på de flesta enheter.
Slutsats
Det spelar ingen roll om du älskar Apple eller absolut hatar allt de står för. Verkligheten är att om du är webbdesigner, kommer uppkomsten av näthinnan att starta en trend som i grunden förändrar sättet att bygga webbplatser .
Vid denna tidpunkt har vi några handlingsalternativ att utforska: HTML5-kanfas, JavaScript, CSS3, SVG och mediefrågor består tillsammans av ditt arsenal av vapen för att attackera problemet med ditt innehåll som ses uppåt av 264ppi.
Förhoppningsvis kommer vi inom den närmaste framtiden att se mer robusta alternativ som dyker upp för att servera olika HTML-inbäddade bilder och video till rätt enheter.
Lämna en kommentar nedan och låt oss veta dina tankar om allt detta. Är du upphetsad av de nya möjligheterna eller skrämmas av det osäkra territoriet? Kommer du börja optimera ditt arbete för näthinnans skärmar helst snart? Har du redan gjort det?