Korkean tarkkuuden sivustojen luominen Adobe Musella

Adobe Muse CC 2014.3:n parannetut ominaisuudet | helmikuu 2015

Adobe Muse tukee nyt Windows-järjestelmän HiDPI-näyttöjä. Jos käytät Windows HiDPI -laitetta, Adobe Musen käyttöliittymä on selvästi aiempaa tarkempi.

HiDPI on lyhenne sanoista High Dots Per Inch. Se viittaa näyttöihin, joiden pikselitiheys tai erottelutarkkuus on suuri. Suuren pikselitiheyden HiDPI-näytöt pystyvät esittämään tekstiä ja grafiikkaa tarkemmin kuin vakionäytöt. Esimerkiksi Applen Retina-näyttö, joka on saatavilla muun muassa iPhone-, iPad- ja iPod touch -laitteisiin ja joihinkin Windows-laitteisiin, pystyy esittämään korkean tarkkuuden tekstiä ja grafiikkaa.

Adobe Musella luoduilla sivustoilla voidaan hyödyntää kattavasti korkean tarkkuuden HiDPI-näyttöjen, kuten Apple Retina -näyttöjen, näyttölaatua.

HiDPI:n hyödyntäminen Musessa on helppoa:

• Vaihda sivuston tarkkuuden asetukseksi HiDPI.
• Luo kuvia, joiden koko on vähintään kaksinkertainen (2x) verrattuna kokoon, jossa ne näytetään sivustossa.

Kun lähetät tai viet HiDPI-sivuston Musesta, luotu koodi sisältää sekä vakiokuvat että 2x-kuvat, ja havaitsee automaattisesti, mitä kuvia on käytettävä, kun sivustoa katsellaan HiDPI-tarkkuutta tai vakiotarkkuutta käyttävässä näytössä.

HiDPI:n käyttöönotto Adobe Musessa

Uuden sivuston valintaikkunan tarkkuusvalikossa voit valita vakiotarkkuuden tai HiDPI-tarkkuuden (2x).

Voit muuttaa tarkkuusasetusta sivuston luomisen jälkeen valitsemalla Tiedosto > Sivuston ominaisuudet.

2x-kuvatiedot sisältävien kohteiden luominen

Saat HiDPI-näytöistä kaiken hyödyn irti, jos käyttämiesi kohteiden tarkkuus on korkea. Tällöin ne voidaan esittää parempilaatuisina. Kohteen koon tulisi olla vähintään kaksinkertainen siihen nähden, missä koossa se esitetään sivustossasi.

2x-kuvien luominen on helppoa. 2x-kohteen on oltava visuaaliselta kooltaan vähintään kaksinkertainen verrattuna kokoon, jossa se näkyy näytössä. Esimerkki:

Kun asetat HiDPI-kohteen verkkosivuston suunnittelualueelle, Adobe Muse optimoi kuvan pienentämällä sen koon 50-prosenttiseksi. Visuaalisen koon pienentämisen tarkoituksena on helpottaa ja tehostaa suunnittelua. Tällaisten kuvien kohdalla näkyy Kohteet-paneelissa merkintä "2x". Huomaa, että Adobe Muse säilyttää alkuperäisen kohteen informaation, jotta se näkyy HiDPI-näytöillä korkeammalla pikselitiheydellä. Adobe Muse luo rasteroidun tekstin ja kuvina muodostettavat tehosteet automaattisesti 2x-kokoon ja vakiokokoon julkaisun tai viennin yhteydessä.

Voit varmistaa, että kohteet ovat 2x-muodossa ja sisältävät näin ollen riittävästi informaatiota näytettäväksi suuremmalla tarkkuudella, tarkistamalla Kohteet-paneelin tiedot (Ikkuna > Kohteet). Jos kohteessa on riittävästi informaatiota, sen nimen vieressä näkyy 2x-kuvake. Jos 2x-kuvaketta ei näy kohteen vieressä, kohteessa ei ole riittävästi informaatiota, jotta sen voisi näyttää korkeimmalla laadulla, ja se näytetään vakiotarkkuudella.

HiDPI-kuvien vieminen

Eräissä erityistapauksissa Adobe Muse ei vie 2x-informaatiota sisältäviä korkean tarkkuuden kuvia. Jos kuvat on skaalattu säilöihin sopivaksi sivuilla, joilla on taustakuvia, koko näytön diaesityksiä ja niin edelleen, Adobe Muse ei vie kuvasta HiDPI-versiota julkaisun yhteydessä. Erityisesti seuraavissa tilanteissa kuvasta viedään vain vakioversio:

• 100 %:n leveys: Skaalaa sopivaksi / Sovita täyttöön
• Koko näytön diaesitys: Skaalaa sopivaksi / Sovita täyttöön
• Selaimen/sivun tausta: Skaalaa sopivaksi / Sovita täyttöön

Huomaa myös, että rinnakkain ladottuja taustakuvia käsitellään eri tavalla kuin taustakuvia, joiden asetuksena on Skaalaa sopivaksi tai Sovita täyttöön. Rinnakkain ladottujen taustakuvien tapauksessa Adobe Muse toimittaa kuvista sivuston viennin yhteydessä vakioversion vakionäytöille ja korkean tarkkuuden version HiDPI-näytöille.   Jos Adobe Musessa ladot rinnakkain 2x-informaation sisältävää korkean tarkkuuden kuvaa, sitä käsitellään samoin kuin muitakin kuvia ja se sijoitetaan verkkosivuston suunnittelualueelle 50 %:n koossa. Viennin yhteydessä 50-prosenttiseksi pienennetty kuva viedään vakiotarkkuudella ja alkuperäinen kuva korkealla tarkkuudella 2x-informaatioineen.

Sivuston kävijöiden huomioiminen

HiDPI-näyttöjen ansiosta sivuston kävijät voivat katsella korkealaatuisinta visuaalista web-sisältöä, koska näytöt käyttävät enemmän kuvatietoja. 2x-kuvakoon ansiosta kuvien tiedostokoko on nelinkertainen vakiotarkkuuden kuviin verrattuna. Jos sivuston kävijät haluavat katsella HiDPI-kuvia, heidän on ladattava nelinkertainen määrä dataa. Jotta sisältö näkyy nopeammin HiDPI-sivustoissa, Muse vie sekä HiDPI-kohteet että vakiotarkkuudella näytettävät kohteet. Vakiotarkkuudella näytettävät kohteet ladataan ensin, ja HiDPI-kohteet latautuvat vähitellen vakioversioiden päälle.

HiDPI (päällä/pois) -painikewidget

Vaikka vähitellen etenevä lataamisratkaisu on kätevä monille sivuston kävijöille, se voi olla ongelmallinen niille, joilla on rajoitettu datayhteys tai muu yhteys, jossa on rajatut tai kalliit latausmäärät. Näitä sivuston kävijöitä varten voi olla hyvä lisätä HiDPI (päällä/pois) -painikewidget. Kun HiDPI (päällä/pois) -painike on sijoitettu sivulle, sivu ladataan aluksi vain vakiotarkkuudella ja HiDPI-painike on pois päältä. Jos sivuston kävijä vaihtaa HiDPI-painikkeen päälle, siitä eteenpäin kaikki HiDPI (päällä/pois) -painikkeen sisältävät sivut lataavat HiDPI-kuvat, kunnes sivuston kävijä vaihtaa HiDPI-painikkeen pois päältä, sulkee selaimen tai tyhjentää evästeet. Sivut, joilla ei ole HiDPI (päällä/pois) -painiketta, lataavat aina HiDPI-kuvat, kun niitä katsellaan HiDPI- tai Retina-näytöllä. Jos sivustoa ei katsella HiDPI-näytöllä tai Retina-laitteella, painike ei ole käytettävissä ja vain vakiotarkkuudella näytettävät kuvat ladataan.