tiistai 19. toukokuuta 2015

NÄYTÖT JA VERKKOSIVUJEN SISÄLTÖ

Runsaasti ongelmia ovat tuottaneet eri näytöt ja näyttölaitteet, joiden kirjo on kasvanut entuudestaan. Perinteisen täyssävy RGB putken ja LCD (esim. läppäreissä) näyttöjen välillä on huomattava sävyero. Tumma, sävykäs kuva saattaa RGB (täyssävy) näytöllä sisältää runsaan määrän kuvainformaatiota, joka latistuu sävyalueeltaan LCD näytöllä. Jos kuvan tuottaa nimenomaan LCD näytöille, siitä saattaa tulla todella tylsä. On kuitenkin muistettava, että läppärit ja muut LCD näytöillä toimivat laitteet ovat jo tänään valta-asemassa. On vain odoteltava, että LCD näyttöjen sävymäärä kasvaa aikaa myöten ja tuotettava sillä aikaa tylsiä, latteasävyisiä kuvia.
Tämän päivän suositus verkkosivun merkittäväksi, näkyväksi alueeksi on kerrottu olevan 1024×768.

Tuosta pitää laskea pois selaimen vaatimat varat: "the most common class of desktop computer screen, dethroning the 1024 times;768 resolution that was long the target for web design". "...1024×768 held its position as the single-most popular resolution until this year".

Jos käsite "resoluutio" on vieras, se tarkoittaa näytössä olevien pikseleiden, eli kuva-alkioiden lukumäärää - leveys x korkeus. Mitä vähemmän pikseleitä, sitä heikompi kuvan piirtokyky näytöllä on.
Näyttöresoluutio ilmaistaan kuvankäsittelyssä termillä "72 pikseliä tuumalla". Se ei tarkoita, että kuva näkyy kaikkialla saman kokoisena vaan että kuvasta näkyy tuuman matkalla nuo 72 pikseliä. Kymmenen tuuman levyiselle (n. 25 cm) näytölle mahtuu 720 pixeliä leveyssuunnassa.

Eli 1024×768 esitystilasta lähdetään ja tulos on turvalliselle alueelle = suositeltu web safe: for all browsers 849 x 507 (lähde: http://designerstoolbox.com/designresources/safearea/compare/).
Tiedän, että tuo 849 x 507 on kuritusta mutta se on tämän hetkinen suositus, kuten mainittu. Sivuja tehdään tietysti muillakin mitoilla. Pitää muistaa laitteistojen laaja kirjo. Tottakai voidaan rakentaa index-sivulle snifferi joka haistelee, minkä kokoisella näytöllä selain on tulossa MUTTA takaan, että työ ei tule verkkosuunnittelijalta loppumaan, jos joka laitteelle tehdään se oikea visuaalinen syöte, vaikka asia on suunnattomasti helpottunut style-sheettien ja PHP:n keinoin. Jos snifferiin mennään, niin kenties olisi järkevää tarjota esim. kolme versiota tai minimissään kaksi. Toinen muille laitteille ja toinen puhelimille.
Vaikka älypuhelimet taipuvat näyttämään hankalia ja raskaitakin näyttöjä, sivujen käytettävyys ei ole yhtä mukavaa, kuin perus PC:llä tai Macillä. Zoomailu pienellä näytöllä on aikaa vievää.

En pidä 950 leveyttä aivan pahana 1024×768 näytölle mahtuu enemmänkin tavaraa, kuin tuo suositus 849 x 507. On myös mahdollista ja suositeltavaakin, riippuen sivun graafisesta ulkoasusta, antaa sivun kaveta leveyssuunnassa jos näyttö on kapeampi? Scrolleri (vieritys) vie n. 20 pixeliä ja vasemmalle laidalle ei juuri tarvitse tilaa muutoin kuin marginaalien vuoksi. Jos marginaalit ajetaan minimiin, mahtuu tuollainen 950 pixelin leveä asiaikkuna turvallisesti näytölle. Visuaalisuus on aina asia erikseen. Haluatko antaa "ilmaa" sisällölle jne. Muistaa sopii myös, että verkossa luettavissa olevan palstan leveys on pienempi kuin painetussa tekstissä. Palstan leveys on suhteessa käytettyyn fonttikokoon (kirjainkoko) joten mikään ei ole yksiselitteistä. Tähän fonttijuttuun (palstat ja kirjainleikkaukset) voinkin palata seuraavassa jutussa erikseen.

Lisätietoa aiheesta:
https://www.w3.org/  (W3C on Web-standardien ylläpitäjä ja kehittäjä)
https://www.w3.org/TR/WCAG20/ (kaikille verkkosuunniteelijoille erinomaista lukemistoa)

KIRJAINLEIKKAUKSISTA NÄYTÖLLÄ (Fonteista)

Näyttölaitteisiin suositellaan, lukututkimusten mukaan, niin kutsuttuja "sans serif"-leikkauksia: font-family:Arial, Helvetica, sans-serif; (ja vastaavat).
Fonttien (kirjasinten) luettavuuden huomioiminen on erittäin tärkeää pienemmissä näytöissä kuten matkapuhelimet ja älypuhelimet.

Nykyisin käytössä olevilla tietokonenäyttöjen resoluutioilla, kirjasinleikkausten finenssit saadaan ainakin otsakkeissa hienosti esille. MUTTA. Haluatko koodata sivusi Flashillä tai sellaisilla menetelmillä, jotka takaavat kirjainleikkausten siirtymisen asiakaskoneelle? Sellainen ei ole kovin asiakasystävällistä, koska Flash vaatii selaimelle asennettavan ja päivitettävän plug-in ohjelman. On asiakkaan kyykyttämistä kun hän sivuille saapuessaan saa ensimmäisenä vastaan ilmoituksen, että hänen selaimensa ei tue näitä sivuja, "lataa Flash" tai "käy päivittämässä Flash-versiosi". Tai asiaks lukee varoituksia, kuinka Flashissa on turvallisuuaukko jne.  Noloa.
Nykyään Flash alkaa olla kirosana jo muuallakin, kuin vain omassa puheessani.

Web- standardin mukaisten kirjasinten kokoa voidaan nykyään säätää suoraan asiakasselaimelta MUTTA, jos koodari ei sitä ole esim. Flash sovelluksissaan huomioinnut, kirjainkoon muuttaminen ei asiakkaalta onnistu.

Jos olet varma, että jokainen verkkosivuasiakkaasi  käyttää standardin mukaista selainta (esim. suljettu yrityssivusto), kuten Opera, Firefox, Safari, jne. voit käyttää CSS3 ja HTML5 ominaisuuksia, joiden avulla voidaan hyödyntää web palvelimilta ladattavia, erikoisempiakin kirjasinleikkauksia. Chrome ja Internet Explorer 9 tukee myös CSS3 ja HTML5 toteutettuja verkkosivuja.
Kokenut ja verkkoasiakkaita (loppukäyttäjä) arvostava verkkosivuntekijä varmistaa, että sivut voidaan lukea kaikilla valtaselaimilla muutaman version iästä huolimatta. Ikääntyville tarkoitettujen sivujen tulee näkyä myös vanhemmilla valtaselainversioilla - ja - tulee ajatella mikä olikaan valtaselain joitakin vuosia takaperin. Ikääntyvä ei seuraa trendejä vaan käyttää verkkoa kuten ennenkin.

Google fonts- tarjoaa myös mahdollisuuden lukuisiin eri tekstityyppeihin verkkosuunnittelijalle. Joukosta löytyy varmasti jokaiselle jotakin. MUTTA. On muistettava, että fontti (kirjasintyyppi) ei saa haitata viestin perillemenoa. Useamman eri fontin sekamelskaa ei kukaan jaksa lukea. Pidä aina ensisijalla sivusi luettavuutta.
Samoin tekstin väreistä musta on ehdoton ykkönen (vaaleat taustat). Jos haluat rikastaa tekstiäsi värein, on turvallisinta pitäytyä mahdollisesti esim. otsakkeiden yhden ja saman värin käyttöä läpi sivuston. Siten sivustosi pysyy yhtenäisenä, eikä aiheuta hämmennystä erivärisine otsakkeineet. "Olenko vielä sillä sivustolla jonne alunperin menin?"
Valkoinen teksti tummilla taustoilla ei ole erityisen luettavaa. Varsinkin pidemmissä teksteissä silmät rasittuvat tarpeettomasti.

Lisätietoa aiheesta kiinnostuneille:
https://www.w3.org/Fonts/ (W3C on Web-standardien ylläpitäjä ja kehittäjä)
https://www.w3.org/TR/WCAG20/ (kaikille verkkosuunniteelijoille erinomaista lukemistoa)
http://www.webtypography.net/
https://www.google.com/fonts (Google fonts. Muistakaa antaa erikoiskirjaimille aina standardi vaihtoehto. Vain siten koodaajalle jää jokin vaikutusmahdollisuus asian luettavuuteen tai ilmeeseen)

Web safe fonts 2013 (HTML5)
http://forbrains.co.uk/web_safe_fonts/web_safe_fonts
http://www.w3schools.com/css/css_font.asp