You are browsing the archive for CSS3.

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:

Adobe CS5.5 seminaari 6.5 Helsingin Tennispalatsissa

9.5.2011 in Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Uutiset, Web-suunnittelu ja julkaisu, Yleinen by Kari Selovuo

Seminaarin aiheena oli vastikään julkaistu CS 5.5 versio ja sen uudet ominaisuudet. Ei tosin ainoataan niitä mutta luonnollisesti aiheet kattoivat pääasiassa uusia piirteitä. Nähtiin siellä toki jotain vanhaakin. Terry Whiten esityksessä nähdyt Content Aware Fill sekä valinta -demot on nähty ja koettu jo moneen kertaan. Tämä ei kuitenkaan vähentänyt Terryn esityksen arvoa. Esitys oli hyvä ja mainitut ominaisuudet ovat sen verran lähellä taikuutta, että jaksoivat vielä hämmästyttää monia. On muuten merkillistä kuinka pian niinkin mahtavaa toiminnallisuutta kuin Content Aware alkaa pitää ihan normaalina! Read the rest of this entry →

HTML5 huomista vai jo tätä päivää?

28.9.2010 in Web-suunnittelu ja julkaisu by Kari Selovuo

Ei vain huomista vaan jo tämän päivän tekniikkaa! HTML5 tuntuu olevan hip ja pop ja siihen viitataan yhä useammin web-kehityksestä keskusteltaessa. Spesifikaationa HTML5:llä on vielä pitkä matka kuljettavanaan mutta sitä ei kannata sivuuttaa keskeneräisenä.

Kannattaako HTML5:een tutustua jo nyt?

Ehdottomasti. Selaimet tukevat osia määrityksestä jo nyt ja selainten tuki HTML5 tekniikoille paranee koko ajan. Adobe® on lyhyessä ajassa julkaissut lisäosina tuen joillekin HTML5 ominaisuuksille mm. Dreamweaver® ja Illustrator® ohjelmissa. Apple® tukee voimakkaasti HTML5 tekniikkaa ja HTML5 on kovassa nosteessa suurten toimijoiden tulevaisuudensuunnitelmissa. Read the rest of this entry →

HTML5 SVG sivut Illustrator CS5:llä

14.9.2010 in Web-suunnittelu ja julkaisu by Kari Selovuo

HTML5 pack for Illustrator mahdollistaa SVG -grafiikan viemisen webiin, HTML5 canvas elementillä näytettäväksi, interaktiiviseksi sivuksi. Greg Rewis, Adobe evangelist, esittelee Illustratorin, Dreamweaverin ja HTML5 sekä CSS3 käyttöä erinomaisessa videossa AdobeTV:ssä.

http://tv.adobe.com/watch/adobe-evangelists-greg-rewis/html5-with-illustrator-cs5/