You are browsing the archive for HTML5.

Retina-näytöt ja valokuvat webissä

25.1.2014 in Web-suunnittelu ja julkaisu by Panu Korpela

Parasta mahdollista palvelua käyttäjälle!

Jo nyt ja erityisesti lähitulevaisuudessa tämä tarkoittaa supertarkkojen retina-näyttöjen huomioimista valokuvien osalta. Miksi?

Mitä retina tarkoittikaan? CSS-pikseli?

Nykynäyttöjen fyysiset pikselit ovat aiempia näyttöjä paljon pienempiä, tyypillisesti luokkaa 300 pikseliä tuumalla (pixels per inch, PPI). Tällaisista näytöistä käytetty sana ”retina” on varsinaisesti Applen markkinointitermi, mutta vakiintuneempi puhekieleen kuin oikeampi termi ”high-PPI”.

Jos web-sivu näytettäisiin esimerkiksi Lumia 925 -älypuhelimella sen fyysisellä resoluutiolla 1280 &#x2715 768, olisi sisältö lukukelvottoman pientä. Tämän vuoksi laitteiden selaimet valehtelevat itselleen sivua näyttäessä ja toimivat kuin niissä olisi vähemmän pikseleitä. Tyypillistä on jakaa pikselilukumäärä puolellatoista tai kahdella; Lumian tapauksessa jakaja on 5/3 ja se ilmoittaa pikselikooksi 768 &#x2715 461. Näistä käytetään termiä ”CSS-pikseli”.

Ja ongelma oli?

Valokuvat näytetään oletusarvoisesti CSS-pikselikoon mukaisesti. Niiden käyttäjälle näkyvä fyysinen koko säilyy järkevänä, mutta näytön suurta tarkkuutta ei päästä hyödyntämään.

  1. Kuvat näyttäisivät siis tarkemmilta, jos retina-tarkkuus huomioidaan
  2. Retina-näytöllisen käyttäjän olisi mahdollista skaalata retina-kuvaa suuremmaksi kohtalainen tarkkuus säilyttäen; tämä on erityisen tärkeää mikäli kuva sisältää esimerkiksi tekstiä, graafisia käyriä tai muuta vastaavaa tietoa

Tarkempien kuvien käyttäminen vaatii suurta tarkkuutta ☺: toteuttajan tulee varmistua että päätelaite ei lataa sekä normaali- että retina-tarkkuuden kuvaa.

Ratkaisuvaihtoehtoja valokuville

A) Taustakuvat

Retina-taustakuvat on tuettu suoraan CSS-määrityksissä paremmin kuin tavalliset kuvat. Alla on esimerkki, joka osaa ottaa huomioon kaikki yleisimmät selaimet (esimerkissä kuvan X-siipi-korkea.jpg oikea koko on 1200 &#x2715 800 pikseliä):

@media only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 144dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2) {
  #retinaKuva {
    background-image: url('X-siipi-1200.jpg');
    width: 600px;
    height: 400px;
  }
}

Näillä näkymin CSS4 tuo mukanaan helpomman syntaksin image-set-attribuutin muodossa, mutta tukea tälle on vasta WebKit-selaimissa (-webkit-image-set), joten en käsittele aihetta tarkemmin.

Hankaluutena yllä olevassa taustakuvaratkaisuissa on kuvan staattinen koko, eli se ei osaa pienentyä selainikkunaa pienennettäessä. Tämä voidaan onneksi korjata CSS3:n background-size: contain; -säännöllä.

B) Tavalliset kuvat (img)

Kirjastoratkaisut

Sekä erilaisilla JavaScript-kirjastoilla (suuri määrä) että palvelinratkaisuilla on mahdollista vaihtaa kuvia lennosta. Näitä en käsittele artikkelissa tarkemmin.

srcset, src-n ja picture

HTML5-spesifikaatio on tuomassa ongelmaan omia ratkaisujaan, mutta kirjoitushetkellä tilanne on vielä vakiintumaton. WebKit-selainten nightly build tukee ehdotettua srcset-attribuuttia, eli eri tarkkuuden kuvia voidaan esittää seuraavasti:

<img alt="X-siipinen" src="X-siipi-640.jpg" srcset="X-siipi-1200.jpg 2x">

Sekä srcset-attribuutin että picture-elementin muutaman ilmaisuvoimaongelman vuoksi on tehty myös toinen attribuuttiehdotus, src-n. Tukea selaimissa ei toistaiseksi vielä ole.

Jos kuva ei ole valokuva?

Jos kuva ei ole valokuva, kannattaa ehdottomasti miettiä voisiko käyttää joko vektorimuotoista SVG-kuvaa tai ohjelmallista piirtoa canvas-elementillä.

Uusi osaamisvaatimus web-suunnittelijoille: HTML ja CSS

22.1.2014 in Julkaisujärjestelmät, Taittaminen ja julkaiseminen, Web-suunnittelu ja julkaisu by Panu Korpela

<!DOCTYPE html>
<html dir="ltr" lang="fi">
<head>
<title>Soveltaja</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Web-suunnittelija käski ja sivut toteuttava sovelluskehittäjä vikisi. Totuus viidentoista vuoden ajan. Ensin mainitun ei tarvinnut ymmärtää ylempänä olevasta HTML-lähdekoodista ripaustakaan, jälkimmäinen puhui sitä toisena äidinkielenään.

Muutaman viime vuoden aikana mullistunut päätelaitteiden kirjo on salakavalasti aloittanut muutoksen web-projektien prosessissa: suunnittelijan on osattava HTML- ja CSS-tekniikoita lähdekooditasolla! Miksi muka?

Photoshop-leiskat ovat hyödyttömiä Responsive Web Design1 (RWD) -sivustojen suunnittelussa. Pienet muutostarpeet aiheuttavat paljon työtä, kun kaikki layoutit pitää korjata käsin. Suunnitelmien tarkastelu eri laitteilla on kömpelöä. RWD:n mukaista sisällön skaalautumista ei ole mahdollista ilmaista.

Muutos ajattelumaailmassa on monelle web-suunnittelijalle valtaisa. Mutta toisaalta kyse on vain muutoksesta ajattelumaailmassa. Opeteltavat tekniikat:

  • Ovat opeteltavissa
  • Ovat opeteltavissa pala kerrallaan, vaikka yksi elementti päivässä

Liikkeellä kannattaa olla pian, sillä muutoksen aiheuttama kliseinen ”markkinaosuuksien uusjako” on alkanut.


1 Responsive Web Design:

Google Web Designer – vai Google Banner Designer?

2.10.2013 in Digimarkkinointi, Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Web-suunnittelu ja julkaisu by Mauri Meronen

Google julkaisi toissapäivänä uuden Web-suunnittelijoille suunnatun ilmaisen työkalun – Google Web Designer. Mistä oikein on kyse? Read the rest of this entry →

Printtigraafikon pelastustie?

8.8.2012 in Kuvankäsittely ja digikuvaus, Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Web-suunnittelu ja julkaisu, Yleinen by Juha Laamanen

Olin eräässä suurehkossa mainosalan konsernissa kouluttamassa CS6-paketin uusia ominaisuuksia. Paikalla oli joitain kymmeniä ammattilaisia. Kysyin ”kuinka moni on mukana tabletti- tai muiden sähköisten julkaisujen tekemisessä….?”. Ainoastaan muutamia käsiä nousi. Tämä on mielestäni huolestuttavaa, onko niin että pelkästään painettuun mediaan keskittyvillä osaajilla on jatkossa riittävästi kysyntää työmarkkinolla? Vihjettä tulevasta antaa vaikkapa Newsweekin ja City-lehden päätökset luopua kokonaan paperilehden tuottamisesta!

Read the rest of this entry →

Creative Suite 6 ja Creative Cloud- mitä uutta Adobe taivaan alla?

24.4.2012 in Kuvankäsittely ja digikuvaus, Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Uutiset, Web-suunnittelu ja julkaisu, Yleinen by Juha Laamanen

Adobe julkaisi siis CS-paketin uusimman version lopullisesti maanantaina. Mikään massiivinen yllätys tämä ei ollut, olihan jo edellisen 5.5 version julkistuksen yhteydessä kerrottu suoraan että vuosittain tulee uusi versio markkinoille. Lisäksi aiemman salamyhkäisyyden sijaan Adobe julkaisi itse ”Sneak Peek” videoita joita myös tässä blogissa julkaistiin, esimerkiksi  tämä.

Mikä sitten muuttuu…?

Read the rest of this entry →