Tarkoitus keskustella Internet- sivustojen ulkoasuista:
-Millaisesta ulkoasusta pidät?
-Mikä herättää inhoa?
-Oletko törmännyt kliseisiin ulkoasu ratkuisuihin?
-Panostatko graafiseen suunnitteluun?
-Onko teknisiä ongelmia, jotka rajoittavat luovuuttasi?
Mielestäni on selvästi yleistymässä trendi, mikä suosii ulkoasuja, mitkä näyttävät mahdollisimman vähän Internet- sivustoilta. Usein tulee myös vierailtua sivustolla, minkä ulkoasu on liian yksinkertainen. Ulkoasun yksinkertaisuus voi tietysti johtua tekijänsä rajoittuneesta kyvystä luoda kaunista grafiikkaa. Toisinaan yksinkertaisuus palvelee tarkoitustaan, hyvänä esimerkkinä http://www.sivut.org
Panostan itse graafiseen suunnitteluun, pyrin luomaan omaleimaisia sivustoja. Visuaalisten osa-alueiden on oltava sopusoinnussa keskenään. Suosin värikkäitä ja pirteitä ulkoasuja. Tavallaan pidän myös minimaalisesta, ruudun keskelle keskitetystä ratkaisusta.
Harmaus ei vain tällä hetkellä kolahda minuun. Liian suuri tekstikoko näyttää rumalta, vaikka paremmin luettavaa onkin.
Yksinkertainen sivusto: www.google.fi
Palvelee tarkoitustaan ja on oikeasti yksinkertainen.
Erikoiset ja laadullisia sivustoja taas on lukematon määrä eikä tämä Putkan palvelin kestäisi sitä listausta. ;)
--W--
Koitan tehdä sivuista mahdollisimmat selkeitä. Vaikka näenkin hyvin sivujani, voi sivuillani vierailla esim. punavihervärisokeita, joten koitan ottaa kaikki huomioon. En kuitenkaan ole mikään esteettömyyden asiantuntija.
Ulkoasun on hyvä olla semmoinen, jota on kiva katsoa ja on selkeä. Flashin liikakäyttö ärsyttää eniten.
Flash- ja Javahärpäkkeet ärsyttävät kympillä eniten. Myös liian raskas ulkoasu on turha koska en yleensä keskity ulkoasuun vaan sisältöön. Tieto pitää löytää helposti ja nopeasti, ei niin että painat linkkiä joka on tehty ÜberMugsPoksScriptillä jota varten pitää ensin asentaa plugin Firefoxiin, sitten kun painaa linkkiä tulee pop-up jossa ajetaan autolla sivuston 3D-mallin läpi ja lopulta alkaa soida taustamusiikki jota selain lataa ensin 5min. Sitten näiden rituaalien jälkeen kun ajattelee löytävänsä tiedon sivulla lukeekin vain "siirretty osioon ihqubox" ja taas sama rumba alusta... :P
Yksinkertainen on kaunista. Värejä ei saa olla liikaa eikä sivuston eri osat saa vaihella paikkoja kesken sivuston selailun. Navigoinnin täytyy toimia loogisesti ja niin, että linkkitekstit ovat aina esillä. Päänavigointi kuvalinkeillä ilman minkäänlaista tekstiä on se kauhein vaihtoehto. Javascriptillä, Flashilla tai muilla vastaavilla toteutetut navigoinnit on yleensä huonoja siitä syystä, että kaikki tärkeimmät alasivut on yleensä niissä piilossa yhen tai useamman valikkokohan alla niin, että jollekin sivulle päästäkseen täytyy valita ensin monta muuta kohtaa ärsyttävästä valikosta, joka joko häviää, jos hiiren vie vahingossa valikoiden päältä, tai vaatii "turhia" klikkauksia. Muutenkin navigointi on selkeintä ja toimivinta tehdä linkeillä.
Tiettyyn leveyteen pakotetut sivut ärsyttävät henkilökohtasesti. Joskus pidän selainta ohuempana ruudulla, koska haluan nähdä yhtä aikaa jonkin toisen ikkunan sisällön, vaikka yleensä pidän selainta kyllä kokoruudussa. Sivut pitäs suunnitella niin, että ne venyis sisällön mukaan eikä niin, että ne näyttäis hyvältä jollain tietyllä resoluutiolla. Kännykällä tasan kuudensadan pikselin levyiseksi pakotettu sivu on yhtä ärsyttävä kuin 4096px:n levyisellä resoluutiolla näytöltä katsottuna silloin, ku sivua haluttaisiin katella kokoruututilassa. Noin viisitoista prosenttia näytön leveydestä käyttävä sivu on typerä.
Lisäks fonttikokojen määrääminen leipätekstille ottaa välillä päähän. Onneks selaimista löytyy minimifonttikoko, jonka alle fonttien koot ei mene missään tilanteessa.
Sivuilla saa olla täytteenä kuvia, mutta ne ei sais tehä sivustosta liian raskasta. Sopiva yhistelmä leipätekstiä ja kuvia on kaikkein paras vaihtoehto. Kuvatkaan ei oo mikään välttämättömyys, jos asiaa on vähän eikä tekstiä ole kilometritolkulla. Liian pitkää tekstiä on puuduttavaa lukea näytöltä.
Näin tiivistettynä kuitenki sanosin: ensin asia ja vasta sitten se ulkoasu.
Cornix kirjoitti:
Tiettyyn leveyteen pakotetut sivut ärsyttävät henkilökohtasesti. Joskus pidän selainta ohuempana ruudulla, koska haluan nähdä yhtä aikaa jonkin toisen ikkunan sisällön, vaikka yleensä pidän selainta kyllä kokoruudussa. Sivut pitäs suunnitella niin, että ne venyis sisällön mukaan eikä niin, että ne näyttäis hyvältä jollain tietyllä resoluutiolla. Kännykällä tasan kuudensadan pikselin levyiseksi pakotettu sivu on yhtä ärsyttävä kuin 4096px:n levyisellä resoluutiolla näytöltä katsottuna silloin, ku sivua haluttaisiin katella kokoruututilassa. Noin viisitoista prosenttia näytön leveydestä käyttävä sivu on typerä.
Lisäks fonttikokojen määrääminen leipätekstille ottaa välillä päähän. Onneks selaimista löytyy minimifonttikoko, jonka alle fonttien koot ei mene missään tilanteessa.
Ainakin itse olen sitä mieltä, että teksti on huomattavasti luettavampaa kapeissa palstoissa. Juuri sen takia pakotan tekemieni sivustojen sisällön tiettyyn pikselimäärään. Haluaisitko ihan tosissasi lukea tekstiä esim. 4096 pikselin levyiseltä palstalta?
Pikselimäärän vaihtoehto on käyttää suhteellista arvoa, esim. jotain tyyliin 50em. Tällöin sivun leveys kasvaa kun fontinkin kokoa kasvatetaan; tuollaisella 4096 pikselin levyisellä näytöllä moinen olisi jo erittäin aiheellista. Nettisivujen tihrustaminen kun kuitenkin alkaa jo 1600 pikselin ja siitä isommilla leveyksillä mennä siihen, että mieluummin pitää selaimen ikkunana kuin kokoruudussa, paitsi jos fontin tai koko sivun kokoa voi kasvattaa.
Toisaalta käytän usein mieluusti pikseliarvoja. Perustelu tälle löytyy yksinkertaisesti siitä, että tavalliset käyttäjät normaalisti tyytyvät suurinpiirtein siihen mitä oletuksena saavat: 800 x 600, 1024 x 768 ja 1280 x 1024. Jos käyttäjällä on tätä isompi resoluutio, voi myös olettaa tämän käyttäjän erittäin todennäköisesti taitavan koneita sen verran, että saa selattua nettiä itselleen mieluisalla tavalla. Vastaavasti taas mobiiliselaimet menevät sivujen muun käytön kannalta usein ohitse: kännykällä ei ole kiva käydä lävitse valtavia tietomääriä. Toisaalta kännykkää ei ole tarkoitettu esim. päivitysvälineeksi tai työkaluksi. Jokin tutkimus aiheesta voisi olla näppärä, että tietäisi paremmin mihin kännykkää nettikäytössä useimmiten käytetään...
Sivuja tehdessä täytyy tapauskohtaisesti katsoa, millainen kävijäkunta sivuilla käy. Nyttemmin kun olen alkanut näitä ihan töikseni tehdä, niin vapaasti tehdessä päädyn useimmiten joustavaan ulkoasuun, mutta toisaalta aina ei ole valinnanvaraa: jouduin tässä ihan juuri eilettäin toteuttamaan sisältöosuuden tyylittelyä taulukkohelvettiin. Onkin mielenkiintoista heittää pätkä siistiä "oikeaoppista" koodia sivulle, jonka muuta koodia ei saa muuttaa.
Ongelmaksi muodostuu, etteivät kaikki graafiset elementit voi vain venyä loputtomiin. Esimerkiksi div- lohkon taustakuva, mikä ei toista itseään pituus- tai leveyssuunnassa, vaan tekijä haluaa pitää elementin juuri tietyn kokoisena. Toinen mahdollisuus on jättää se hieno taustakuva näyttämättä ja tyytyä heikompaan ratkaisuun, missä tausta on yksivärinen.
Se nyt on ihan yleinen ongelma; pikseliarvot helpottavat kun haluaa minimoida grafiikan määrää suhteessa elementteihin (siis: ei täyte-elementtejä HTML:ssä vain tyylin tähden). CSS3:ssa on helpottavia asioita tulossa, mm. taustakuvien määrääminen reunoille ja kulmiin ja useamman taustakuvan määritteleminen yhdelle elementille - nuo yhdessä läpinäkyvien PNG-kuvien kanssa... *kuolaa hetken, ja siivoaa jälkensä sitten*
Venyviä ja nättejä ratkaisuja saa kyllä aikaan nykyisellään ilman ekstraelementtejäkin, mutta sitten se useamman selaimen huomioon ottaminen... noh, tekemällä ja kokeilemalla oppii kyllä kaikenlaisia toimivia kikkoja.
Merri kirjoitti:
Se nyt on ihan yleinen ongelma; pikseliarvot helpottavat kun haluaa minimoida grafiikan määrää suhteessa elementteihin (siis: ei täyte-elementtejä HTML:ssä vain tyylin tähden). CSS3:ssa on helpottavia asioita tulossa, mm. taustakuvien määrääminen reunoille ja kulmiin ja useamman taustakuvan määritteleminen yhdelle elementille - nuo yhdessä läpinäkyvien PNG-kuvien kanssa... *kuolaa hetken, ja siivoaa jälkensä sitten*
Venyviä ja nättejä ratkaisuja saa kyllä aikaan nykyisellään ilman ekstraelementtejäkin, mutta sitten se useamman selaimen huomioon ottaminen... noh, tekemällä ja kokeilemalla oppii kyllä kaikenlaisia toimivia kikkoja.
Jos selaimet - öhm..tai selain - jatkavat tätää epästandardeja noudattavaa linjaansa tähän malliin ja sivujen tekijät jatkavat epästandardien mukaisten sivujen tekoa, niin CSS3:n todelliseen käyttöön ottoon menee vielä vuosikausia, - meneehän siihen muutenkin, mutta edellä mainitut syyt eivät ainakaan nopeuta sen tuloa käyttöön - itselleni tämä on erityinen harmi. Kuolaan jo valmiiksi kuvitelmilleni, mitä sillä voisi saada aikaan. :p
OskariB kirjoitti:
Ainakin itse olen sitä mieltä, että teksti on huomattavasti luettavampaa kapeissa palstoissa. Juuri sen takia pakotan tekemieni sivustojen sisällön tiettyyn pikselimäärään. Haluaisitko ihan tosissasi lukea tekstiä esim. 4096 pikselin levyiseltä palstalta?
Jos en haluais, pienentäisin selainikkunaa. Ja tekstin kokohan olis mulla varmaan tossa tapauksessa kuitenki säädettynä tarpeeks suureks selaimesta, ni tollane ei ois mikään ongelma. Niin ja sivun zoomauskin on keksitty. :)
Periaatteessahan ulkoasulliset kömpelyydet ei haittaa, jos ne on toteutettu CSS:llä. Sen kun voi kytkee pois päältä.
Tässä on hyvää luettavaa kaikille, jotka harkitsevat joskus alkavansa web-ohjelmoijaksi: The role of a web developer.
Lisäksi hyvää asiaa siitä, miten JavaScriptiä pitäisi käyttää: Avoiding Evil JavaScript (huom! aina pitää tietysti huomioida sivuston kohderyhmä: ei ole välttämätöntä esimerkiksi taidesivustolla kehittää erillistä tukea ruudunlukijalle, koska näkövammaisilla ei yksinkertaisesti ole tarvetta käydä kyseisellä sivustolla)
Merri kirjoitti:
(huom! aina pitää tietysti huomioida sivuston kohderyhmä: ei ole välttämätöntä esimerkiksi taidesivustolla kehittää erillistä tukea ruudunlukijalle, koska näkövammaisilla ei yksinkertaisesti ole tarvetta käydä kyseisellä sivustolla)
Siis what? Tarkoitatko että kaikki, joilla on silmälasit eivät mahdollisesti selaile taidesivustoja? Tai toinen silmä on puhjennut tai vaikka kärsii värisokeudesta. Luonnollisesti täysin sokeille on ihan yks lysti miltä se sivu näyttää :D
Toki virallisessa määritelmässä asia ei ole noin yksinkertainen. Muttei se silti tarkoita etteivät hekin pystyisi selaamaan kuvagalleriaa.
Siis näkövammainen on tietääkseni sokea henkilö. Sokeat eivät kuvia tunnustele, ainakaan vielä.
T.M. kirjoitti:
Siis näkövammainen on tietääkseni sokea henkilö.
Ei suinkaan, vaan näkövammainen. Eiväthän jalkavammaisetkaan kaikki ole täysin jalattomia tai edes kävelykyvyttömiä.
Mutta tietenkin jos on niin heikkonäköinen, ettei pysty tekstiä lukemaan millään ilveellä, ei varmaan sitä kuvagalleriaakaan kaipaa.
Kuvia on huomattavasti helpompi hahmottaa huonolla näöllä kuin tekstiä. Myöskin mikäli puhutaan taidegallariasta, ovat kuvat yleensä kohtuullisen suuria. Tekstiä myöskin voi suurentaa selaimesta.
On se hauskaa kun pilkkua viilataan niin että pointti katoaa. Tiedän/tunnen kyllä joitakin näkövammaisia, ja se kuva minkä olen saanut nimityksestä "näkövammainen" on se, ettei kykene erottelemaan edes kuvia kunnolla (jotta niiden katselusta koituisi iloa). Se on sitten tietysti eri asia mikä on se virallinen merkitys sanalle, enkä jaksa tämän asian takia sitä kaivaa. Joku toinen kyllä pätee tällä tiedolla. Laitetaan vaikka vakavasti näkövammainen jos ei muuten kelpaa. Valitettavasti täällä ei voi muokata omia viestejään, joten joudutte kuvittelemaan sen oikealle paikalleen.
Muoks!
Eikun Wikipedia on liian helppo kapistus käyttää. Näkövamma-artikkeli osaa kertoa, että Suomessa on 80000 näkövammaista. Tästä voimme selkeästi päätellä sen, että kyseessä ei ole pelkkä silmälasien käyttöä tarkoittava seikka, vaan vakavampi silmän ongelma. Siispä esimerkkini ylhäällä on ainakin kyllin validi, ettei siitä tarvitsisi alkaa pilkkua vääntämään.
Erkokoisia resoluutioita ajatellen sivujen ja tekstin näyttäminen tietyn prsosentin levyisenä/kokoisena voisi olla hyvä konsti.
Tekstiin suhteelliset em-mitoilla asetetut koot toimivat ihan hyvin. Niiden kanssa joutuu vaan ajattelemaan eri tavalla kuin normaali pt-mittojen kanssa. Otetaan esimerkki:
- Bodylle asetetaan kooksi .8em (joka antaa lopputulokseksi koon joka vastaa 10pt fonttia useimmilla selaimilla)
- Normaalisti pt-fonttien kanssa, kun käyttää sitten johonkin lapsielementtiin sitten taas 12pt (= normaali oletuskoko), tulisi fontista 12pt kokoista.
- Suhteelliselle koolla 1em on muuttunut lapsielementissä siten, että se onkin kooltaan vastaavaa 10pt kanssa. Oletuskoon arvo on siis liukunut alaspäin.
- Jos lapsielementille antaisi kooksi taas .8em, kutistuisi fontti vastaamaan 8pt fonttia (muistaakseni; vaikutus voi olla myös suurempi tai pienempi).
Yksi merkittävä hyvä puoli tässä on: sivuille on todella helppo suunnitella JavaScriptillä yleinen fonttikoon pienennys tai suurennos, ei tarvitse muuttaa kuin yhtä arvoa! Ja sen voi kohdistaa vaikka vain sisältöosioon.
Samoin koot toimivat hieman paremmin myös muilla kuin työpöytäselaimilla.
Haittapuolena on sitten tosiaan se, että joutuu päässä kuvittelemaan että mikä onkaan sitten se sopiva arvo taas, ettei tee liian pientä tai liian suurta. Ja fonttikoon muutokset vaikuttavat myös elementtien leveyksien ja korkeuksien määrittelemiseen em-arvoilla (eli jos pienennät fonttikokoa, mutta haluat säilyttää laatikon edelleen yhtä isona, joutuu vaihtamaan kaikkia arvoja). Lisäksi suhteellisten mittojen käyttö muilla kuin Strict DOCTYPEillä on vähän niin ja näin, selaimilla on hieman eri näkemyksiä periytyvyyssäännöistä strictittömissä tiloissa.
Mitä taas tulee prosenttimääräisiin sivujen leveyksiin, niin jostakin syystä se ei vaan tunnu käytännössä koskaan toimivan niin hyvin kuin se toimii ajatuksena. Niin voi kyllä ihan hyvin tehdä. Käyttömäärästäkin kuitenkin jo näkee, etteivät ne ole kovin suosittuja.
Merri kirjoitti:
Mitä taas tulee prosenttimääräisiin sivujen leveyksiin, niin jostakin syystä se ei vaan tunnu käytännössä koskaan toimivan niin hyvin kuin se toimii ajatuksena. Niin voi kyllä ihan hyvin tehdä. Käyttömäärästäkin kuitenkin jo näkee, etteivät ne ole kovin suosittuja.
Ajatuksena se tuntuu tosiaan paljon helpommalta: sivun kaikki mitat, taulukon solujen leveydet ja korkeudet ja tekstien koko pysyisivät kaikki täsmälleen samassa suhteessa toisiinsa, suuremmalla näytöllä ne vaan näkyisivät suuremman kokoisina...
Valitettavasti prosentuaaliset fonttikoot ovat samoja kuin suhteelliset fonttikoot; fonttikoko ei muutu sen mukaan, miten saatavilla oleva tila muuttuu, vaan 100% = 12pt (useimmiten).
Itse asiassa ei ihan näin aina, suhteellisuus on edelliseen arvoon verrannollinen:
<div style="font-size:200%"> ammuu <div style="font-size:100%"> bemmuu </div> <div style="font-size:50%"> cemmuu </div> </div>
ammuu on kaksinkertainen bodyn (tai muun edellisen elementin) fonttikokoon, bemmuu myös, cemmuu on sama kuin ennen ensimmäistä diviä oleva koko.
feenix, tuo taitaa olla selainkohtaista. Firefox muistaakseni ainakin käsitteli fonttikokoja noin, mutta mielestäni oli joitain selaimia jotka suhteuttivat prosentuaalisen määreen aina vain siihen selaimen oletuskokoon.
feenix: tarkoitin 12pt:llä oletuskokoa, josta lähdetään liikenteeseen, en sitä että 100% olisi aina 12pt (=suhteellinen fonttikoko).
JTS: prosentuaaliseet koot saattavat käyttäytyä kuvailemallasi tavalla transitional-sivuilla. Eiköhän se kokeilemalla selviä kun heittää doctypen ja alkaa kokeilla. Lisähuomiona, voi olla että riippuu myös elementeistä miten periytyvyys toimii, esim. taulukot taitavat olla juuri niitä joissa periytyvyys ei toimi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.