Tarkemmat kuvat Retina-näytöille

Artikkelissa Mobiiliselaimen tunnistaminen CSS:llä esittelin css-ominaisuutta min-device-pixel-ratio näin:

min-device-pixel-ratio tarkoittaa näytön “pikselitiheyttä”. Tyypillisen tietokoneen näytön ja peruspuhelimen arvo on 1, mutta esimerkiksi iPhone 4:llä ja iPhone 4S:llä tämä arvo on 2. Selitys tälle on ns. retina-näytössä: näytön koko on iPhone 3G:ssä ja iPhone 4:ssä on sama, mutta näytön leveys ja korkeus on kaksinkertainen. Tällöin sivustolla olevat kuvat näkyvät iPhone 4:n tarkemmalla näytöllä pikselöityneenä ja epätarkkoina, sillä käytetyn grafiikan resoluutio on liian pieni. Tämän säännön avulla voidaankin saada käyttöön tarkemmat grafiikat siihen pystyville näytöille.”

Tässä artikkelissä käsittellään pikselitiheyttä ja sitä, mitä se tarkoittaa web- kehittäjän kannalta.

Pikselitiheys ja retina-näytöt

Pikselitiheyden (engl. ppi, pixel per inch) käsitettä käytetään silloin, kun halutaan kertoa näytön pikseleiden määrä suhteutettuna näytön kokoon. Pikselitiheyden käsite voidaan liittää siis monenlaisiin laitteisiin: televisioihin, puhelimiin, digitaalisiin kameroihin jne. Esimerkiksi Suomen kodeissa tyypillisen, 42″ Full HD -television pikselitiheys on 52ppi ja tietokoneen 23″ Full HD -monitorin pikselitiheys on 98ppi. Matkapuhelinten pikselitiheys on tyypillisesti huomattavasti korkeampi kuin tietokoneen näytöillä ja televisioissa – esimerkiksi iPhone 4 ja iPhone 4S -laitteiden pikselitiheys on 326ppi ja Sony Xperia S:llä peräti 342ppi.

Retina on Applen iPhone 4:n myötä käyttöön ottama käyttämä markkinointinimi erityisen tarkoille näytöille. iPhone 4:n laitteen pikselimäärä on kaksinkertainen edeltäjäänsä nähden: iPhone 3GS:llä ja sen edeltäjillä näytön koko oli 3.5″ ja resoluutio 320x480px (163ppi). iPhone 4 piti näytön koon ennallaan, mutta resoluutio kaksinkertaistui 640x960px (326ppi) kokoiseksi.

Koska näytön fyysinen koko on sama, kehittäjät saivat sovelluksensa muutettua tarkemmaksi tuplaamalla sovelluksen kuvien resoluution ja laittamalla tiedoston nimen loppuun tekstin @2x. Tästä syntyi pikselitiheyden käsite: normaalinäytön pikselitiheys on 1, kun taas retina-näytön pikselitiheydeksi tulee 2.

Myös muut valmistajat ovat tuoneet korkeamman pikselitiheyden laitteita: Esimerkiksi Samsung Galaxy S II -laitteessa pikselitiheys on 1.5, ja Samsung Galaxy S III:ssa pikselitiheys on 2. Apple toi myös Retina-näytöllisen MacBook Pro -kannettavan tietokoneen, jonka pikselitiheys on 2 ja resoluutio peräti 2880×1800 (15″, 220ppi). Myös vuoden 2012 iPad-tablettitietokone tuo mukanaan retina-näytön 2048×1536 -resoluutiolla (9.7″, 264ppi).

CSS ja korkeamman pikselitiheyden näytöt

Selaimen ja verkkosivujen kannalta retina-näyttö asettaa tarpeen tuoda korkearesoluutioisia kuvia ja grafiikoita näille laitteille, sillä verkkosivujen kuvat on suunniteltu pääasiassa vanhemmille, huomattavasti epätarkemmille näytöille. CSS3-standardiin tuli onneksi nopeasti mukaan mahdollisuus määrittää CSS-säännöt pikselitiheyden perusteella.

Tässä esimerkki css-tiedoston valinnasta pixel densityn perusteella:

 <link rel="stylesheet" href="retina.css" media="only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" /> 

Huomaa että sääntö määritellään tässä yhteydessä neljään kertaan, sillä kaikki selaimet eivät vielä osaa tulkita min-device-pixel-ratio-määritettä sellaisenaan. Yllä oleva koodinpätkä ottaa sivulla käyttöön retina.css-tiedoston laitteilla, joiden pikselitiheys on 2 tai enemmän. Alla esimerkki taustakuvan asettamisesta niin, että se toimii oikein pikselitiheyden arvoilla 1, 1.5 ja 2. Huomaa css-sääntöjen järjestys: Alempana oleva sääntö on pätevämpi, jolloin järjestyksen täytyy olla pienemmästä pikselitiheydestä suurempaan.

 .logo { background: url('logo.png'); } @media only screen and (min-device-pixel-ratio: 1.5) { .logo { background: url('logo@1.5x.png'); } } @media only screen and (min-device-pixel-ratio: 2) { .logo { background: url('logo@2x.png'); } } 

Selkeyden vuoksi esimerkissä on jätetty pois webkit-, mozilla- ja opera -versiot.

HTML ja korkeamman pikselitiheyden näytöt

HTML-dokumentin sisällä käytetään usein kuvia <img>-tägien sisällä. Kuvien määrittäminen pikselitiheyden perusteella ei kuitenkaan onnistu suoraan tägin sisällä, sillä HTML-standardit eivät vielä sisällä siihen keinoja.

Apuun tulee tässä vaiheessa JavaScript, jolle on valmiiksi tehty kirjastoja retina-kuvien käsittelyyn. Retina.js-kirjasto toimii niin, että se etsii @2x-loppuvat tiedostot ja näyttää ne korkearesoluutioisella näytöllä. jQuery Retina Display Plugin on jQuery-plugin, joka toimii vastaavalla tavalla – kuvien nimikäytäntö on tosin hieman erilainen, sillä retina-kuvan nimen perässä täytyy lukea -2x.

Jos JavaScriptissä halutaan suorittaa erilaista logiikkaa eri pikselitiheyden näytöille, näytön pikselitiheyden saa selville julkisesta muuttujasta window.devicePixelRatio.

Jatkoluettavaa

Optimising for High Pixel Density Displays, Menacing Cloudin artikkeli aiheesta vähän eri näkökulmasta (englanniksi)
Resoluutio (Kuvatekniikka) – Wikipedian lyhyehkö artikkeli resoluutiosta, joka sisältää myös vähän kuvausta pikselitiheydestä.
List of displays by pixel density – Wikipedian kattava lista tämän hetken näytöistä ja niiden pikselitiheyksistä (englanniksi)

Apuohjelmia iOS-designereille

Xcode on asennettu, mitä nyt? Tässä kokoelma apuohjelmia ja muita resursseja, jotka helpottavat iOS-sovellusten kehitystä ja erityisesti käyttöliittymäsuunnittelua.

Templaattikokoelmat

Omnigraffle on suosikkityökaluni rautalankojen laatimiseen. Da5id:n kokoelma on paras tietämäni iOS-templaatti OmniGrafflelle.

Tuotantokelpoista jälkeä tarvittaessa Teehan & Lax:n Photoshop-kokoelma on mainio. Kannattaa malttaa nähdä sen verran vaivaa, että tekee 1x-grafiikat sille tarkoitetun tyylipohjan avulla, niin kuvat pysyvät mahdollisimman tarkkoina.

Liveview (ilmainen)

Liveview näyttää iPhone tai iPadin ruudulla valitun alueen tietokoneen työpöydältä. Tämä on hyödyllistä, jos haluaa tarkistaa, miltä grafiikat näyttävät retina-näytöllä ja että tekstit ovat varmasti luettavissa.

Sovelluksen avulla voi toteuttaa myös yksinkertaisen wizard of oz -demon operoimalla näkymiä tietokoneelta ja antamalla puhelimen käyttäjän käteen.

iExplorer (ilmainen)

 iOS-laitteissa ei ole tiedostojenhallintaa. Joskus on kuitenkin hyödyllistä nähdä, mitä tiedostoja minnekin kertyy. iExplorer on Mac-ohjelma, jolla pääsee selaamaan puhelimensa tiedostorakennetta.

xScope (29,99 $)

xScope tarjoaa vastaavan toiminnallisuuden kuin Liveview. Lisäksi sen avulla voi mittailla eri elementtien kokoja tietokoneen näytöltä ja lisätä apuviivoja. Tuleepa mukana virtuaalinen viivoitinkin. Apuviivoista on apua esim. Xcodessa, jonka omat viivat toimivat vähän kankeasti.

Ostin sovelluksen aikoinaan alennusmyynistä. Täysi hinta on hieman tyyris. Jos tarvitset vain viivoitinta, katso Free Ruler. Se on ilmainen, mutta toimii vähän bugisesti uusilla käyttöjärjestelmillä.

Mittaamisesta puheen ollen: itse käytän jatkuvasti kuvakaappausnäppäinkomentoa eri asioiden koon mittaamiseen. Painamalla komento + shift + 4 voi ottaa kuvakaappauksen halutusta näytön alueesta. Ominaisuutta voi käyttää myös elementtien kokojen selvittämiseen – ja kun painaa esciä ennen kuin päästää hiireen irti, säästää maailman turhalta kuvaruutukaappaukselta.

Hex color picker (ilmainen)

 Kuvakaapparin lisäksi Mac OS X:ssä on mainio pipettityökalu värien poimimiseen. Sen käyttöliittymä on peruja Next-ajoilta, ja pelkään pahoin, että moni ei edes tiedä sen olemassaolosta. Suurennuslasia klikkaamalla voi valita haluamansa värin kuin Photoshopin pipetillä. Ja mikä parasta, tämä toimii myös ohjelmien välillä.

Kätevää on myös siirtää värejä sovellusten välillä raahaamalla värin valitsimen alalaitaan.

Mac OS X:n värivalitsinta voi tehostaa asentamalla Hex color picker -laajennuksen. Sen avulla saa näkyviin suoraan värin heksa-arvon, mikä on hyödyksi myös web-suunnittelussa.

Skitch (ilmainen)

 Vakavamielisempään kuvakaappausten ottamiseen kannattaa hankkia Skitch. Se on yksi ohjelmista, joita ei voi suositella kylliksi. Kuvakaappausten ottamisen lisäksi Skitchillä voi tehdä niihin kätevästi merkintöjä: tekstiä, nuolia, vapaita tuherruksia. Paras puoli on kuvien jakaminen. Jos kuvan raahaa pois Skitchistä, siitä luodaan automaattisesti tiedosto kovalevylle ilman että kuvaa joutuisi itse erikseen tallentamaan.

Jos haluaa vaikkapa lisätä Jiraan kuvakaappauksen löytämästään bugista, ei tarvitse ensin tallentaa tiedostoa ennen kuvan lataamista selaimeen ja sitten etsiä uudelleen avaa-dialogissa, vaan riittää, että raahaa sen selaimeen suoraan Skitchistä. Kuvien lataaminen kaikkien nähtäville skitch.comiin käy sekin yhdellä klikkauksella.

Screenshot Journal (1,59 €)

Tietokoneen lisäksi kuvakaappauksia tulee helposti ottaneeksi valtavat määrät puhelimelta. Valitettavasti Apple on katsonut viisaaksi näyttää kuvakaappaukset samassa läjässä puhelimella otettujen valokuvien kanssa. Apuun tulee Screenshot Journal, joka poimii kuvakaappaukset erilleen kuvavirrasta ja tarjoaa keinoja kuvien hallintaan.

Jos tykkää nahkaefekteistä ja tikkauksista, sovellukseen kannattaa tutustua jo niiden vuoksi. Ovat keskimääräistä hienommat.

Kuvansiirtäjä

Mac OS X:n mukana tuleva kuvansiirtäjä ei ole tainnut saada ainuttakaan päivitystä sitten ensimmäisen Mac OS X -version, ja käyttöliittymä on muutamilta osin rasittava. Jos puhelimelta haluaa noutaa kuvakaappauksia, se on kuitenkin kevyempi vaihtoehto kuin iPhoto. Jos tiedät Kuvansiirtäjää paremman vaihtoehdon, kerro toki kommenteissa!

iOS-Simulator Cropper (ilmainen)

Laitteella kuvakaappauksien ottaminen on kaikesta huolimatta vähän jähmeää. Käyttöohjeita, promokuvia yms. varten on usein kätevämpää  ottaa kuvakaappaukset suoraan Xcoden Simulator-ohjelmasta. iOS-Simulator Cropper ottaa kuvakaappauksen pelkästään simulaattorissa pyörivästä ohjelmasta, nimeää sen halutulla tavalla ja lisää haluttaessa kuvan ympärille iPhone-kuoret kiiltoineen kaikkineen.

Myös status barin poistaminen kuvan ylälaidasta onnistuu helposti, jos vaikka haluaa lisätä kuvakaappaukset App Storeen Applen ohjeiden mukaan ilman palkkia.

iPhone Configuration Utility (ilmainen)

Sovellusten ja provisiointiprofiilien asentaminen onnistuu periaatteessa iTunesilla, mutta sillä on paha tapa synkronoida valtavia datamassoja joka välissä heti kun se löytää koneeseen kytketyn puhelimen. Kätevämpi työkalu on Applen tarjoama iPhone Configuration Utilyty. Sen avulla voi mm. asentaa .IPA-muotoisia sovelluksia laitteelleen, kun sellainen tarve tulee. Saatavilla myös Windowsille.

Quicklook plugin for provisioning profile files (ilmainen)

Provisiointiprofiilien kanssa tappelu on iOS-kehityksessä väistämättä vastaantuleva hupi. Tuskaa vähentää, jos voi kätevästi varmistua, että sovelluksen pitäisi teoriassa asentua halutulle laitteelle. Tämä kätevä lisäpalikka antaa Finderille kyvyn näyttää suoraan, mitkä testilaitteet sovelluksen provisiointiprofiiliin on lisätty.

UDID (ilmainen)

Jotta voisi varmistua, että oma puhelin on tuettu, pitäisi tietää puhelimen UDID-koodi. Sen saa selvitettyä iTunesilla, mutta Apple on tehnyt sen siinä määrin hankalaksi, että on usein helpompaa neuvoa ihmisiä asentamaan puhelimeen sovellus tätä varten. UDID on yksi näistä. Parempiakin saattaa olla.

Picturesque (11,99 €)

Törmäsin Picturesquehun vasta, mutta se näyttää lupaavalta. iPhone-sovelluksia tykätään usein esitellä heijastuksin je perspektiivitempuin kuorrutettuina. Picturesque tekee nämä yleisimmät efektit helposti ja antaa tallentaa kuvat myös läpinäkyvällä taustalla. Kätevä, jos kaipaat vapautusta Photoshopista.