Kako sve više Appleovih uređaja koristi tzv. Retina zaslone, možda biste se na trenutak trebali zamisliti da li i na koji način prilagoditi svoju web stranicu da izgleda lijepo i na tim zaslonima. S obzirom na hype koji postoji oko Appleovih uređaja, nismo trebali dugo čekati da ostali proizvođači smartphoneova, tableta i sličnih drangulija predstave jednaku ili sličnu tehnologiju. Već postoje uređaji na Androidu sa istom ili većom rezolucijom zaslona. Kako god, u ovom ćemo članku staviti naglasak na rezoluciju a ne dimenzije zaslona (ili proizvođače).

O zaslonima visoke rezolucije

Retina i zasloni visoke rezolucije općenito su kao HD televizori. Uskoro će ih (skoro) svi imati i postati će standard. Vaša će web stranica na zaslonima visoke rezolucije izgledati očajno ukoliko ne promijenite nekoliko stvari.

Ako se pitate koliko očajno, probajte zumirati Vašu web stranicu 200%. U većini preglednika to možete učiniti na način da stisnete istovremeno tipke “Ctrl” i “+” nekoliko puta. Tako nekako će izgledati Vaša stranica na Retina zaslonu. Možda još i gore jer će u usporedbi s tekstom koji je kristalno čist sve slike izgledati još mutnije. BTW, WordPress od verzije 3.5 podržava Retina zaslone. U to se možete uvjeriti ako zumirate 200% administracijski dio stranice (WP admin tj. Nadzornu ploču). Sve je optimizirano za Retina zaslone. Kako? Čitajte dalje.

Koje su rezolucije Retina zasloni?

Retina zaslon je prvotno predstavljen na Apple iPhoneu 4S,  zatim je došao i na iPad s 9.7″ dijagonalom zaslona . 2048 x 1536 piksela na samo 9.7″ nešto je što nitko nikada nije ponudio, bilo na tabletu, prijenosnom računalu ili komercijalnom monitoru te dijagonale. To u praksi znači iznimno oštru sliku na IPS zaslonu širokog kuta vidljivosti. Konkretno, radi se o 264 piksela po prikazanom inču, što znači da preciznijim gledanjem i dalje ne vidite same piksele na zaslonu .

[clear]
Popis nekoliko Appleovih uređaja s Retina zaslonom i pripadajuće rezolucije:

iPad 3: 2048×1536 pixela rezolucija pri 264 pixela po inchu (ppi)
iPhone 4 i iPhone 4s: Rezolucija 960×640 pixela pri 326 ppi
iPhone 5: Rezolucija 1136 x 640 pri 326 ppi
MacBook Pro (15″ Retina): Rezolucija 2880×1800 pixela pri 220 ppi

Ostale rezolucije potražite na Appleovoj stranici s tehničkim specifikacijama

Što je Retina ? 

Retina je Appleov “brand name”, robna marka, naziv za vrstu zaslona. No, trik nije u samom zaslonu jer tzv. HiDPI zasloni, odnosno zasloni visoke rezolucije nisu niti novotarija niti ekskluziva. Fora je u sprezi zaslona i softwarea koji pokreće zaslon. Što se tiče Retina zaslona oni prikazuju web stranice u duploj nativnoj veličini (u pixelima).

Drugim riječima, ukoliko želite prikazivati fotografije prilagođene Retina zaslonima, uploadajte fotografiju (u daljnjem tekstu to predstavlja i logo ili pozadinsku sliku) veličine 500×500 pixela i pomoću određivanja visine i širine u HTML-u prikažite je u dimenzijama 250px250px.

[blockquote]Retina zaslon ne nalazi se iza sloja stakla, on jest staklo.To znači da ćete dobiti sve pogodnosti najsuvremenijeg zaslona – jarke boje, veliki kontrast i široke kutove gledanja – s vrlo malo odsjaja.- Apple[/blockquote]
[clear]

E sad, možda se pitate što je s bandwidth-om? (Bandwith je općeniti pojam za količinu informacija koja može biti prenesena u određenom vremenskom periodu . Najčešće se obračunava u GB/mjesečno.)

Ako su Vaše fotografije , u grubo, duplo veće i većina posjetitelja Vaše web stranice neće imati koristi od fotografija duple veličine (jer nemaju Retina zaslon), znači da uzalud trošite bandwidth. Elegantna je solucija posluživanje fotografija više kvalitete isključivo uređajima koji ih mogu prikazati.

Moderni web preglednici imaju podršku za ove fotografije duple veličine. Čak štoviše, imaju i vlastite CSS media query-je za prikaz takvih fotografija:

-webkit-min-device-pixel-ratio -> Safari, Chrome
-moz-min-device-pixel-ratio -> Firefox
-o-min-device-pixel-ratio -> Opera
min-device-pixel-ratio -> Generički, koji bi trebao uskoro zamjeniti sve gore navedene

Primjer: ako je -webkit-min-device-pixel-ratio = 2, prikaži za Retina zaslone. Ako je = 1, prikaži za ne-Retina zaslone.

Dakle, potrebne su Vam dvije verzije svake fotografije. Ako, na primjer, imate vas-kvadratni-logo.jpg dimenzija 250×250 px , trebati ćete drugu fotografiju dimenzija 500x500px naziva vas-kvadratni-logo@2x.jpg (po preporuci Applea).

Sada Vam samo treba nekakav Javascript ili neka druga solucija kako biste servirali adekvatnu sliku na osnovu rezultata CSS media query-a.

Kako prilagoditi web stranicu prikazu na Retina zaslonu? 

1. Instalirajte Retina.js

[clear]
Retina.js je skripta koja će Vašu web stranicu trenutno pripremiti za prikaz na Retina zaslonima (ok, nekih 80% stranice). Evo što autor skripte kaže:
[blockquote]Kada korisnik učita stranicu, retina.js provjerava da li na serveru postoji druga verzija slike u visokoj rezoluciji. Ako postoji, skripta će zamjeniti slike i prikazati @2x sliku.[/blockquote]

[clear]
Što treba učiniti:Na primjeru logotipa, trebate imati logo.png i logo@2x.png koji je duplo veći u dimenzijama. Logo@2x.png morate smjestiti na isto mjesto na serveru kao i (običan) logo.png. Retina,js će po potrebi automatski zamjeniti manju za veću sliku za prikaz na Retina zaslonu.

2. CSS3 -> Slike

Retina.js odlično odrađuje posao zamjene slika unutar img tagova ali ne zamjenjuje CSS pozadinske slike i tzv. sprite-ove. Kako biste to postigli, morati ćete dodati malo CSS pravila.
Primjer koji je ponudio Smashing Magazine :

[clear]

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

[clear]

3. Ikone i botuni

Icon fonts

Icon fonts su MRAK! S obzirom da se radi o ikonama u vektorima, beskonačno su skalabilne, možete mjenjati boje, prozirnost, animirati s CSS-om i još mnogo toga. U ponudi je pregršt plaćenih i open source solucija no naš je izbor besplatni Font Awesome paket koji se trenutno sastoji od preko 360 ikona, besplatan je za komercijalnu upotrebu i vrlo je jednostavan za korištenje.

S obzirom da sve više preglednika podržava CSS3 pravila, pametno bi bilo početi koristiti slike stvorene CSS-om. Koristiteći border-radius, box-shadow, background gradients, text-shadow uz RGBA modele boja (prozirnost)  možete stvoriti na primjer botune, boxeve i sl. Evo jednog simple botuna:
[clear]

[clear]
Muči li Vas kreiranje CSS pravila za Vaše botune, potražite neke od online button generatora.

Bonus: Što manje slika, to manje HTTP zahtjeva = brže učitavanje web stranice

4. Faviconi

 Sitni su ali prilično bitni. Vrlo je jednostavno napraviti favicon prilagođen Retina zaslonima. Običan favicon ima dimenzije 16x16px. Za Retina zaslone treba napraviti duplo veći favicon (32x32px). Na primjer, u Photoshopu stvorite dokument dimenzija 32x32px, dodajte svoju sliku i spremite kao png24 . Datoteci zatim promijenite ime u favicon.ico i aploudate u root folder web stranice.

Možete koristiti i neki od online favicon generatora poput Favicon.ico ili Favicon-generator.org .

“Kako “Retinizirati” WordPress web stranicu ?

Ukoliko imate web stranicu koju pogoni najpopularniji CMS današnjice, za prilagodbu za Retina ekrane potpuno će Vam biti dovoljan WP Retina 2x plugin.

WP Retina 2x plugin će Vam omogućiti gore navedenu tehniku zamjene “obične” slike s kvalitenijom @2x slikom (sudeći po kvaliteti prikaza zaslona) na vrlo jednostavan i intuitivan način.
Prije uputa za rad , evo citata autora WP Retina 2 x plugina, Jordy Meow-a:

[blockquote]Nemojte nikada direktno umetati slike pune veličine (“Full size”) u svoje članke i stranice. Nikada![/blockquote]
[clear]

 

 

Originalna veličina (“Full size”) je samo osnova za sve ostale dimenzije slika u WordPressu i moguće ju je vidjeti jedino kada korisnik klikne na sliku kako bi ju vidio u punoj veličini. Od te, originalne slike, nastaju sve ostale dimenzije slika, ovisno o postavkama u Postavke – > Medijski zapisi (Settings -> Media). Ako trebate još dimenzija, postoji mnogo pluginova koji će Vam to omogućiti.
[clear]

Nakon instalacije, morati ćete podesiti nekoliko osnovnih postavki pod Postavke -> WP Retina 2x

Izaberite koje ćete dimenzije slika koristiti, odnosno “Retinizirati”. U većini slučajeva možete označiti Thumbnail, Medium i Large. Ostale su većinom dimenzije slika zadane WP temom. Odabir je na Vama. Odlična je opcija “Auto Generate” ,pomoću koje će se automatski kreirati “@2x” slike prilikom aplouda ili zamjene slike.

U kartici Advanced možete birati između nekoliko metoda. Preporučujemo korištenje Retina.js metode. Ostale dostupne postavke po želji.

Slijedeći korak je stvaranje Retina verzije slika. U Media kartici postoji nova kartica naziva “Retina”. Ako imate sreće. klikom na botum Generate jednostavno ćete stvoriti “@2x” verzije svojih slika. No, možda ćete neke ipak trebati dodati ponovo. Vrlo vjerojatno će od Vas biti zatraženo da dodate veće slike (duplo veće od “običnih”, remember?)
[clear]

[clear]

Ipak, većinu ćete vremena koristiti opcije unutar Medijski zapisi – > Zbirka. Obratite pažnju na novo polje nazvano “Retina”

I to je to

Naše je mišljenje da se ne morate zamarati “Retiniziranjem” baš svake slike na svojoj web stranici. Ok, super ako to učinite, ali ono što definitivno morate prilagoditi su zaista bitne stvari kao što su logo, ikone, botuni i istaknute slike.

Nadamo se da Vas je sve gore navedeno navelo na pomisao da bi trebali svoju web stranicu prilagoditi prikazu na Retina zaslonima. Slažemo li se svi da je Retina kao koncept nešto što će uskoro zaživjeti na mnogim uređajima ?

Ukoliko imate neki prijedlog, savjet, link ili stav oko ove tematike, slobodno ostavite svoj komentar.