WWW-sivujen kännyversiolle käyttöliittymä

[Tapio X]

Otin tämän aiheen erikseen, koska se on tärkeä. Merkittävä osa www-sivuilla vierailuista tapahtuu kännykällä.

Kännykkää pidetään www-sivuja selattaessa pääsääntöisesti pystysuunnassa. Pystysuunnassa kännykässä on pitkä oikea reuna, jonka hyödynsin käyttöliittymänä:

Aihe: Sivuston mobiiliversio – Mobile version of this site | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Kaikki sivuston toiminnot on sivun oikeassa reunassa eikä minkään toiminnon takia tarvitse rullata sivua ylös/alas -suunnassa. (Laite toisin päin laitettaessa käyttöliittymästä häipyy pitkä keskellä oleva sivupalkki.)

Käyttöliittymän viewport-määrittelyn perusteella ottama leveys on 32 px eli käytännössä vähän enemmän kuin tavanomaisen kännykässä käytetyn marginaalin verran. Käyttöliittymä on nimen omaisesti oikean reunan marginaalissa. Osa toiminnoista on harvoin käytettyjä, osa on usein käytettyjä. Käyttöliittymä ei vie juuri lainkaan tilaa pois pääasialta. Sisältö on keskiössä, mutta kaikki toiminnon on silti joka hetki käytettävissä.

Koska marginaalia pitää aina olla, käyttöliittymä vie käytännössä n. 20px viewport näkökulmasta tarkastellusta hyötyleveydestä eli käytännössä n. 6% näytön leveydestä (luo n. 9% suuruisen oikean reunan marginaalin).

https://www.sanaristikkofoorumi.net...-www.sanaristikkofoorumi.net-23795052babf.png

Kuva on tietokoneruudulta, mutta se vastaa sitä, miltä sivut näkyvät tyypillisessä kännykässä (vastaa esim. sitä, miten sivut näkyvät Samsung Galaxy J5 puhelimessa). Oikean reunan käyttöliittymässä on yhteensä 17 kpl erilaista toimintoa.

Alareunassa on kolme toimintoa. alapalkin korkeus marginaaleineen 38px ja vie korkeudesta em. kännykällä n. 6%.

Ehdotin tutustumaan Suomi24:ssä mobiiliversion muuttamista enemmän käyttöliittymäksi.

Entä tämänkaltaiset tekniset sivustot. Tällä sivustolla esim. se, merkitsisi sitä, että kaikki toiminnot, jotka leveällä tietokoneruudulla ovat joko sivun ylä- tai alareunassa on siirretty oikean reunan käyttöliittymään. Osa toiminnoista löytyisi tämän sivuston ns. pikavalikon tyyppisistä apuikkunoista.

Tällä sivustolla kiinteää käyttöliittymää on vain ylös/alas-nuolet. Niiden avulla toki pääseen itse kiinteäksi laittamiini toimintoihin.

Minusta nyt muutaman prosentin uhraus näytön pinta-alasta ei ole paljon, kun sen avulla saa erillisten nettisovellusten kaltaisen käyttöliittymän. Onko uhraus jonkun mielestä tarpeeton?

 

[akir0]

Hauska idea, mutta kun käytän kännykkää vasemmalla kädellä niin peukalo ei yletä mitenkään tonne reunaan.

Vasen reunakaan ei ole kovin hyvä paikka, koska tällöin ote puhelimesta muuttuu aika epätasapainoiseksi.

 

[Tapio X]

Vaatii kunnon otteen vasemmalla kädellä ja oikealla kädellä käytetään toimintoja. Eikö kännykkää yleensä pidetä vasemmassa kädessä ja oikealla kädellä kirjoitetaan?

Jos teksti kirjoitetaan molemmilla käsillä, virtuaalinäppis siirtää käyttöliittymän pois näytöltä. Näppärä käyttäjä osannee käyttää n. 9% leveyisiä painikkeita, kun virtuaalinäppäimistön kirjaimet ovat tätä arvoa kapeampia.

Huom. 32px ei ole koko, jonka kokoisia painikkeet oikeasti ovat - se on laskennallinen arvo. Esim. testikännykässä pikselimäärä on tupla ja HD-kännykässä taitaa olla tripla tai lähes tripla. Kokoa pitää arvioida prosentteina näyttöruudusta.

Minusta tuo koko toimisi muillakin sivustoilla sivun oikeaan marginaaliin sijoitettavana käyttöliittymänä.

En ymmärrä, mikä ongelma esittämässäni asiassa on. Olen mielestäni esittänyt selvästi sen, että kyselen, miltä tuntuu uhrata n. 9% (todellisuudessa 6%) pystysuunnassa olevan kännykän vaakaleveydestä kiinteälle käyttöliittymälle, jossa sivuston kaikki toiminnat ovat joka hetki käytettävissä.

Sivustoni on tavallaan tämän asian demo. Toiminnot jollakin muulla sivustolla ovat eri ja järjestely erilainen.

Kyse ei perustavalaatuisesta suunnittelukysymyksestä, ei mistään pikkuasiasta. Sen liittyminen ristikkosivustooni on suunnittelun kannalta ja tämän säikeen kannalta toissijaista ja tietenkin on muille täysin merkityksetöntä.

 

[©©©]

En tiedä teistä, mutta itse en tajua näistä Tapio X jutuista yhtään mitään. Tämä sama sekava sepostus oli postattu tuonne toiseen omat www-sivut -ketjuun jo aikaisemmin. Jos haluat tehdä uuden ketjun niin alusta se paremmin ja geneerisemmin. Mikä tolkku selittää jostain sun sanaristikkosivun oikean sivun marginaalin prosenteista kun sillä ei ole muille mitään merkitystä. Kerro vaikka jostain yleisistä prinsiipeistä, ux/ui yleisesti, linkkaa lähdemateriaalia ja heitä vaikka pari kysymystä.

 

[akir0]

Koitin vaan sanoa, että sille on syynsä, miksei tämäntyyppinen käyttöliittymäkonventio ole mobiililaitteissa yleistynyt (et ole ensimmäinen tätä esittänyt ja testannut). Kännykkää käytetään usein yhdellä kädellä ja peukalon liikeradat on aika rajatut, jolloin napit kannattaa sijoittaa paikkoihin, joissa ne on helposti saatavilla.

Aiheesta lisää vaikka tästä Mobile Reachability. Rules of Thumb

 

[Tapio X]

Tarkoittanet, että näytön keskivälin napit eivät ole optimikohdissa. Esittämäni käyttöliittymä edellyttää kahden käden käyttöä, joo.

Kun itse käytän kännykkää aina kahdella kädellä, käyttöliittymä toimii varsin hyvin.

Ärsyttävin tapaus on tablet-laite. Ns. pudotusvalikot toimivat tosi huonosti kosketusnäytöllä. Laitoin tablet-laitteilla pudotusvalikkoiden ohella kännykkätyyppisen avattavan valikon. Meinasin korvata sillä pudotusvalikot kokonaan, mutta jostakin todella oudosta syytä kun otin pois käytöstä normaalin valikon ja määrittelin toisen paikkaan saman valikon, valikon ulkoasu meni pilalle. En jaksanut selvittää, minkä takia WordPress toimi niin, joten tablet-laitteille on kaksi valikkotyyppiä.

 

[greenlight]

Minusta nyt muutaman prosentin uhraus näytön pinta-alasta ei ole paljon, kun sen avulla saa erillisten nettisovellusten kaltaisen käyttöliittymän. Onko uhraus jonkun mielestä tarpeeton?

Jos tuo oli typo ja tarkoitit "erillisellä nettisovelluksella" natiivia mobiilisovellusta, niin eihän suunnittelemasi käyttöliittymä ole sinnepäinkään. Navigaation valikkonappi kuuluu ns. yläpalkkiin sen vasempaan reunaan ja toimintonapit* oikeaan. Jos haluat tyrkyttää paskaa käyttäjälle mm. Facebookin tapaan, niin lisäät vielä alas toisen palkin, johon tulee tavallaan välilehdet.

Kaikista huonoin ratkaisu on rakentaa yksi iso palkki, sijoittaa se täysin eri paikkaan kuin kaikissa mahdollisissa standardeissa, ja sitten vielä täyttää se sekavilla kuvakkeilla, joiden merkityksestä ei kukaan tiedä. Lähtökohtaisesti käyttäjät eivät uskalla painella nappeja, joiden toiminnallisuudesta he eivät ole varmoja, joten luultavasti karkotat uudet käyttäjät ja muut vain puoliksi sitoutuneet sivustoltasi nopeasti.

Ja täytyy vielä sanoa, että jos sulla on nyt alalaidassa nappi toiminnolle "jaa LinkedIniin", niin en osaa yhtään arvata, mikä sen arvo on ristikkoaiheisella foorumilla.

* Toimintonapeilla tarkoitan esimerkiksi hakutoimintoa, huomiot näyttävää nappia tai vaikka "aloita uusi ristikko" -toimintoa. Missään nimessä en tarkoita painikkeita kuten "palaa edelliselle sivulle" vaan ne ovat selaimen vakiotoimintoja eikä niitä tule implementoida enää nettisivulle itsessään.

 

[Tapio X]

Paluunapin lisäsin, kun sitä ei ollut selaimen käyttöliittymässä. Siinä on myös vaikeasti löydettävä "lataa sivu uudestaan" -toiminto, miksi lisäsin sen käyttöliittymään.

"Navigaation valikkonappi kuuluu ns. yläpalkkiin sen vasempaan reunaan"

Pohjana olevassa WordPress teemassa se on oikeassa yläreunassa. Sen paikkaa en itse asiassa muuttanut kuin vähän. Se oli alunperinkin hakutoiminnan lähellä. Hakutoimintokin siis aukesi lähtökohtaisesti oikeasta reunasta.

Olen monessa muussakin teemassa havainnut, että ne on sijoitettu oikealle. Tällä sivustolla näemmä mobiilivalikko on sijoitettu vasemmalle.

Katsoin erästä nettisivua, jossa valikkonappi oli myös oikealla. Käytännöt vaihtelevat.

Mielestäni oikea reuna on luonteva paikka toiminnoille. Osuu helposti silmään. Kun vakiona olevat haku- ja valikko ovat oikealla, laitoin samaan laitaan.

Ongelmaksi koin kyllä itsekin, mitä kuvakkeita käyttäisi. Kuvakkeet ovat Dashicons -fontista ja niiden määrä on rajallinen. En kaikkiin kohtiin saanut mieleistäni kuvaketta vaan käytin lähintä ajateltavissa olevaa. Loin myös yhdistelmiä.

Niiden rinnalle tulee tekstit. Oletan, että niitä uskalletaan käyttää. Kieltämättä monen toiminnon kohdalla pitää kokeilla, mitä niiden takana on.

LinkedIn -nappi on WordPress & bbPress -yhdistelmästä kiinnostuneille - noille on aliosasto Muut aiheet > WordPress & bbPress.

 

[Xiyng]

Heitän tässä nyt ihan saman tien sen huomion, että puhelimilla vaakasuuntainen tila on tyypillisesti kortilla. Siinä valossa pidän henkilökohtaisesti tilan varastamista vaakasuunnassa sen luokan rikoksena, että etsisin aika äkkiä vaihtoehtoja moiselle sivustolle enkä palaisi, jos vaihtoehto löytyisi. Ärsyttää tarpeeksi jo pystysuuntaisenkin tilan varastaminen, mutta vaakasuuntaisen tilan varastaminen on vielä pahempi. Tilaa voi toki hyödyntää mutta ei missään nimessä niin, että normaalin tekstisisällön vieressä on koko ajan ties mitä, todennäköisesti valtaosan ajasta täysin hyödyttömiä, käyttöliittymäelementtejä.

 

[Tapio X]

Asioilla on puolensa.

Ajattelin, että valikko, haku sekä sivun alkuun ja loppuun meneminen + uuden kommentin laittaminen loppuun olisi aina hyvä olla käytettävissä. Itseäni inhottaa esim. Suomi24:ssä rullaamistarve.

Eräät toiminnot ovat kyllä harvoin tarvittavia. Sivun keskellä olevan käyttöliittymän voisi toki laittaa yhdellä napilla piiloon/esille, jolloin harvemmin tarvittavat käyttöliittymäominaisuudet (esim. kirjautuminen) eivät ole aina esillä.

Osa toiminnoista on sivulla siksi, että ne on kännykkäselaimessa hankalasti käytettävissä - piilotus poistaa esillä olemisen edun.

Varastusmäärä on mielestäni melko pieni - oikealla pitää joka tapauksessa olla marginaalia, joten todellinen "varastus" on 6% luokkaa.

 

[greenlight]

Paluunapin lisäsin, kun sitä ei ollut selaimen käyttöliittymässä. Siinä on myös vaikeasti löydettävä "lataa sivu uudestaan" -toiminto, miksi lisäsin sen käyttöliittymään.

Miljardiluokan yritykset suunnittelevat näitä selaimia ja he ovat optimoineet toiminnot sellaisiksi kuin käyttäjät tarvitsevat. Sitten sinä paskot oman pienen nettisivusi, koska mielestäsi nämä megakorporaatiot ovat olleet väärässä. Selaimet kilpailevat käyttäjistä sinun sivustoasi kovemmin ja jos he tekisivät jotain niin typerää kuin hukkaisivat tarpeelliset toimintopainikkeet, niin käyttäjät reagoisivat nopeasti.

Yritä ennemmin oppia tyhjänpäiväisten selittelyiden sijaan. Ratkaisusi on huono, sitä ei voi mitenkään perustella. Ja vaikka haluaisit lisätä ydintoimintojen kylkeen "lisukkeita", niin kaikista huonoin ratkaisu on änkeä ne samaan työkalupalkkiin. Katso nyt vaikka tätä IO:n palstaa. Ylös- ja alasnapit ovat sivun oikeassa alanurkassa itsenäisenä kokonaisuutena eivätkä sotke käyttäjää ruuhkauttamalla navigointipaneelia. (Tämäkin on ratkaisu on huono, mutta ainakin on yritetty jotain.)

 

[Tapio X]

Voisit esittää asiasi vähemmän hyökkäävästi, kiitos.

Ehkä minulla on kovin erilainen ajattelutapa. Minua ärsyttää, kun toimintoja täytyy etsiä sieltä sun täältä ja sivua täytyy tarpeettomasti rullata. Näemmä tämä asia ei samassa määrin ärsytä yleisesti.

Suomi24:ää joskus käytän ja se on todella ärsyttävää. Paluu sivun alkuun on vain sivun lopussa. Myös uuden kommentin lisäämiseksi loppuun pitää rullata paljon, kun ei ole nappia, jolla pääsee suoraan viimeisen kommentin lisäämiseen. Tällä sivustolla on nuo ylös/alas aina esillä, mikä on hyvä asia ja vähentää tarpeetonta rullausta tosi paljon (tosin minusta vähän liian huomaamattomat, sillä ne meinaavat hukkua kokonaan taustaan ja niitä saa välillä etsiä).

Minusta ainakin valikon löytyminen helposti, on tärkeää. Toki jos on paluunappi sivun alkuun, se helpottaa jo paljon. Jos sitä ei ole, valikon hakeminen on todella ärsyttävää.

Hakua ei tule hirveästi käytettyä joten sen oleminen kiinteänä ei ole olennaista. Laitoin aluksi myös alun perin rullautuvat haku - ja valikkonapit kiinteiksi, mutta omaksi parikseen samaan tapaan kuin ylös/alasnuolet.

Suomi24:ssä ärsyttää myös se, että kirjautuminen pysyy sangen lyhyen ajan. Vaikka laittaa, että muista minut, siinä on aikaraja. Useinkaan ei tule kirjauduttua kun huomaa, että aikaraja on umpeutunut. Minusta on hyvä, että kirjautumistoimintoa ei tarvitse käydä etsimässä. Siksi laitoin kirjautumistoiminnot keskipalkkiin.

Minua aidosti ärsyttää, että käyttöliitymästä puuttuu ne toiminnot, jotka lisäsin keski- ja alapalkkiin. Näemmä ne eivät ole muille niin tärkeitä.

Keskipalkin ikoneihin liittyvän ongelman tiedostin. En halunnut etsiä erillisiä kuvaikoneja vaan yritin selvitä fontti-ikoneilla. Ikonien haaliminen sieltä sun täältä olisi luonut epäyhtenäisen ulkoasun.

Keskipalkin tärkein painike on uuden kommentin luominen loppuun. Painike on toki myös sivun alussa, joten merkittävä se ei ole.

Tietokonesoftissa opastus on helposti saatavilla. Ajattelin, että vastaava toimisi nettisivuillakin, miksi lisäsin sen keskipalkkiin.

Minulle oli kyllä suuri yllätys tämänkaltainen suhtautuminen. En ajatellut, että 6% poistuminen sivun leveydestä olisi niin iso asia, kun vastineeksi tulisi käytön helppoutta.

 

[Rensu]

Ottamatta suuremmin kantaa ratkaisun hyvyyteen, niin yksi asia häiritsee ratkaisussa minua. Androidin Chromella kun sivua rullaa alas Chromen ylävalikko häviää ja taas ylöspäin rullatessa tulee esiin. Tämä aiheuttaa sivuvalikon liikkumisen ylös-alas mikä ainakin itsestäni tuntuu häirisevältä. Varsinkin kun sivuvalikon navigaationapit eivät liiku.

Itse ratkaisua en näe minään yleisenä mobiili UI:n ratkisuna, mutta myönnän että valikkoratkaisulle on käyttökohteita tietynlaisille sivustoille.

Ja sivun positiolaskurista voi varmaan pyörittää desimaalit pois. Tämäkin on näppärä toiminto joissain tapauksissa, vaikea vain kuvitella että ihmiset osaisivat sitä hyödyntää.

 

[bamboozle]

Vaatii kunnon otteen vasemmalla kädellä ja oikealla kädellä käytetään toimintoja. Eikö kännykkää yleensä pidetä vasemmassa kädessä ja oikealla kädellä kirjoitetaan?

Ei, paitsi +60 v. mammat.

 

[Tapio X]

"Androidin Chromella kun sivua rullaa alas Chromen ylävalikko häviää ja taas ylöspäin rullatessa tulee esiin. Tämä aiheuttaa sivuvalikon liikkumisen ylös-alas mikä ainakin itsestäni tuntuu häirisevältä. Varsinkin kun sivuvalikon navigaationapit eivät liiku."

Ylhäällä on alussa taustakuva, jonka päällä on alussa haku & valikkonapit. Ne kyllä minun testissäni pysyvät näkyvillä, vaikka taustakuva häipyy näkyvistä. Chromen oma yläpalkki häviää rullattaessa, jolloin kaksi sivupalkkia liikkuu ylöspäin. Ne on asemoitu top-arvoilla. Alimmat ovat bottom-arvoilla ja siten pysyvät.

Kaikkien asemoiminen bottom-arvoilla ei toimi, koska kännyköiden korkeudet vaihtelevat. Alaosan nuolet voisi laskea yläreunastakin.

Position-laskuuriin ei minulla tullut desimaaleja. Näemmä versiokohtainen asia.

Korjasin. Ajan nyt numeron round-funktiolla ja lyhensin lukua: Math.round(pageYOffset/18);

Laskuri mittasi pikseleitä, mikä johti turhan suuriin arvoihin. Lyhyempi numero on helpompi muistaa. Nyt mitataan lähinnä rivimääriä.

Kerron ohjeissa sen idean. Jos sitä osaa hyödyntää, siitä on apua edestakaisessa kommenttien tarkastelussa.

 

[Aaro Penttiä]

Samaten vasenkätiset käyttävät oikeaa pitämiseen, jollei käytä yhden käden käyttöä, jota myös näkeen paljon.

 

[Tapio X]

En ole seurannut, miten kännykkää pidellään. Peukaloillako sitä vain rullaillaan ja kirjoitetaan www-osoitteetkin?

Yksi mobiililaitteen ongelma on se, että siinä :hover ei toimi niinkuin se on ajateltu. :hover ja :focus ovat käytännössä lähes sama asia. Kosketusnäytöllä :hover toimii kuten :focus tietokoneella. Aputekstit eivät toimi niin kuin tietokoneella. Enemmän kuin :hover tämä koskee title-attribuutteja, jotka eivät toimi mitenkään. Toimineeko onmouseover-toimintokaan vai toimiiko se kuin onclick?

Suurempi ongelma tästä on tablet-laitteissa, jotka usein näyttävät tietokoneversion.

Kun tablet-laitteissa :hover toimii pudotusvalikoissa kuin :focus, on hyvin pieni ero sillä, että näpäytys vie linkin osoittamalle sivulle ja sillä, että näpäys laittaa valikon tilaan :focus. Koska :hover -toimintoa ei ole, pudotusvalikot ovat lähes käyttökelvottomia kosketusnäytöillä. Ne eivät voi olla ainoa navigointitapa.

 

[Xiyng]

En ole seurannut, miten kännykkää pidellään. Peukaloillako sitä vain rullaillaan ja kirjoitetaan www-osoitteetkin?

Ainakin minä teen jokseenkin noin. Tosin isommalla puhelimella voi olla vaikeampaa, joten tiedäpä sitten, jos isommilla puhelimilla ihmiset tekisivätkin eri tavalla.

 

[PekoniMuuri]

En ole seurannut, miten kännykkää pidellään. Peukaloillako sitä vain rullaillaan ja kirjoitetaan www-osoitteetkin?

Jollei pitkää rimpsua kirjoitella niin kyllä, yhdellä kädellä ja peukalolla käytetään.
Sivustollasi oleva vasen palkki näyttää hassulta. Myös tekstiä jää oikealla olevan navigointi hässäkän alle. Tuon navigoinnim voisi piilottaa painikkeen alle mistä se hyppäisi esiin, ja voisi olla tekstit mitä mitäkin tekee. Hyvä että sivulta hävisi tui linkedin/twitter laatikko, aiheutti vain turhaa vitutusta...

 

[Tapio X]

Tekstiä ei jää oikean reunan alle - marginaali on se oikean palkin verran + 2px päälle. Se, että tekstiä näyttäisi jäävän alle johtuu siitä, että nimerkkini leikkaantuu. Tämä antaa vaikutelman, että tekstiä jää oikean reunan palkin alle, vaikka siitä ei olekaan kyse. Leikkaantumiselle ei voi mitään. Leikkaantuminen johtuu siitä, että palstalle "Viimeisin viesti" on jätetty tietty prosenttimäärä leveydestä. Jos jollekin sanalle se ei riitä, sana leikkaantuu.

Se, että kyse on leikkaantumisesta, näkyy seuraavasta kuvasta:
https://www.sanaristikkofoorumi.net...-www.sanaristikkofoorumi.net-399fbcd53b78.png

Vaikka teksti on palkin alapuolella se leikkautuu silti (kuvakaappaus on tietokoneruudulta).

LinkedIn/Twitter ovat edelleen, mutta joillakin sivuilla eivät näy.

"Tuon navigoinnim voisi piilottaa painikkeen alle mistä se hyppäisi esiin, ja voisi olla tekstit mitä mitäkin tekee"

Pitkän palkin piiloutuvuutta yhden painikkeen taakse olen itsekin ajatellut. Pitää harkita. Silloin rinnalle saisi myös tekstit.
On todella harmillista, että kosketusnäytössä :hover-efektiä ei käytännössä ole olemassa. Kun selitekstit tulevat :hover- määrittelyllä kuin :focus-tilassa, ne tulevat "rytmisesti" väärin. :hover on kännykkäsivuja ajatellen melkein totaalisen turha. Vain, jos jokin toiminto ei ole linkki, se voi antaa lisäinformaatiota.

 

[PekoniMuuri]

Tekstiä ei jää oikean reunan alle

Jää. Ainakin puhelimella.

 

[Baldrick]

Koita nyt ottaa kritiikki vastaan. Tuo "väärin käytetty" on vähän huono lähtökohta suunnitteluun.

 

[Joonikko]

Hyvä, että on intoa ja kiinnostusta, mutta olisi varmaan hyvä kuunnella palautetta.

Eri HTML & CSS kirjastojen/runkojen tekemiseen on käytetty enemmän aikaa ja rahaa kuin mitä yksi ihminen pystyisi tekemään elämänsä aikana, niin ei ole mitään järkeä alkaa tekemään omaa alusta ellei ole aikaisempaa kokemusta web-kehittämisestä, UI/UX suunnitelusta, testaamisesta, validoinnista ja ilman, että siihen on jotain todella pätevää & vaativaa syytä.

Muutama huomio sivusi käyttöliittymästä:

• Mobiililaitteella käytettäessä valikkonapin painamisella selauskohta siirtyy aina sivun ylälaitaan
• Puhelimella selatessa alhaalta ylöspäin tuo laskuri ja ylös/alas napit jäävät ainakin Androidilla käyttöjärjestelmän navigaatiopalkin alle, kun elementit siirtyvät alaspäin URL palkin tullessa näkyviin.
• Mikä tarkoitus tuolla laskurilla edes on? Luetun ja jäljellä olevan tekstin määrän näkee vierityspalkin sijainnista ja koosta. Ehkä tuon ominaisuuden ymmärtäisi e-kirja sovelluksessa, mutta mielestäni foorumilla / blogissa siinä ei ole mitään järkeä.
• Suuremmilla vaakatason resoluutiolla (+1218 px) sivu ei ole enää keskitetty
• Tabletilla vaakatilassa navigaatiopalkin alivalikoita on mahdoton käyttää, koska valikkoa painamalla latautuu valikon painikkeeseen linkitetty sivu eikä itse valikko.
• Liitteenä vielä muutama kuvakaappaus

On todella harmillista, että kosketusnäytössä :hover-efektiä ei käytännössä ole olemassa. Kun selitekstit tulevat :hover- määrittelyllä kuin :focus-tilassa, ne tulevat "rytmisesti" väärin. :hover on kännykkäsivuja ajatellen melkein totaalisen turha. Vain, jos jokin toiminto ei ole linkki, se voi antaa lisäinformaatiota.

Jos kuvakkeina käyttää tunnistettavia kuvakkeita ja/tai tekstiä, niin niitä ei tarvitse erikseen selittää.

 

[Tapio X]

Se, että tekstiä jää jollakin kännykällä palkin alle tuntuu oudolta, sillä Windows Vivaldi (= www-sivujen näyttämisen suhteen sama kuin Windows Chrome) ja Android testikännykässäni ei tekstiä jää palkin alle missään tilanteessa.
34px varaus palkille on laskellannallinen arvo. Foorumille varatun tilan leveys on 320->481px viewport-arvoilla 100% - 34px (482-782px marginaali vaihtelee). Ehkä jollakin selaimella laskutoimitus ei toimi.


Muutama huomio sivusi käyttöliittymästä:

• Mobiililaitteella käytettäessä valikkonapin painamisella selauskohta siirtyy aina sivun ylälaitaan
  • Tiedän, mutta alkuperäistä valikkoa ei saa toimimaan muulla tavoin siististi. Kokeilin vaihtoehtoa, jolla se ei siirtyisi. Jos laittaa position:fixed + overflow:scroll, lopputulos on hirveän ruma, aivan sietämätön. Taisin jättää napin valikon päälle. Voisihan tuota kiinteää määrittelyä vielä kokeilla, jos saisi nätimmin kuin viimeksi. Mutta jos ei saa riittävän siistiä lopputulosta position:absolute tapauksessa valikkonapin painalluksen täytyy palauttaa sivun alkuun. Mielestäni kuitenkin parempi kuin se, että pitää rullata sivun alkuun valikon löytämiseksi.
• Puhelimella selatessa alhaalta ylöspäin tuo laskuri ja ylös/alas napit jäävät ainakin Androidilla käyttöjärjestelmän navigaatiopalkin alle, kun elementit siirtyvät alaspäin URL palkin tullessa näkyviin. -
  • Testikännykässäni (Android) ei ongelmia. Alaosan kolmen nuolta + laskuri pysyvät ainakin testikännykässäni ja sitä Windows Vivaldissa testatessani aina kohdallaan.
  • Sen huomasin, että hakupainike yhdessä tilanteessa (32px matkan) jää piiloon. Kyseessä on jokin z-index-ongelma, jota en ymmärrä.
• Mikä tarkoitus tuolla laskurilla edes on? Luetun ja jäljellä olevan tekstin määrän näkee vierityspalkin sijainnista ja koosta.Ehkä tuon ominaisuuden ymmärtäisi e-kirja sovelluksessa, mutta mielestäni foorumilla / blogissa siinä ei ole mitään järkeä.
  • Tarkoitus on antaa täsmällinen paikka minne palata. Kokeellinen ominaisuus.
• Suuremmilla vaakatason resoluutiolla (+1218 px) sivu ei ole enää keskitetty
  • Tarkka raja on 1280px - se on teeman perusominaisuus, jota en ole edes yrittänyt muuttaa. 1600px leveydellä näyttää melkein keskitetyltä.
• Tabletilla vaakatilassa navigaatiopalkin alivalikoita on mahdoton käyttää, koska valikkoa painamalla latautuu valikon painikkeeseen linkitetty sivu eikä itse valikko.
  • Tiedän ongelman - selitin ongelmaa jo aimmin tässä säikeessä. Tablet-laitteelle on tuplavalikko, mikäli tablet-laitetta ei käytetä työpöytäversiona (silloinkin voi käyttää sivukarttaa). Meinasin poistaa ns. pudotusvalikon, mutta kun poistin sen toimimasta, toisen valikon ulkoasu meni rikki enkä jaksanut selvittää, mistä ongelma johtui. Kun tablet-laitteella ei lähdekoodia saa esille, en yrittänyt korjata. Esim. Android Chromelle pitäisi oletuksena näkyä kaksi valikkoa. Firefox näyttää oletuksena työpöytäversion.

Etusivulla on näemmä muutama ongelma:

• Etusivulla pieni väli selailunuolille on tarkoituksellinen - selailunuolet menivät palkin päälle, joten laitoin marginaalia.
• Teemassa on lähtökohtaisesti joitakin ulkoanäköongelmia, joita en ole edes yrittänyt muuttaa. Tämä on mm. harmaa alue.
• Se, että vaihtoehtovalikko tuleekin alle, en ole ole huomannut, sillä muilla sivuilla se sijoittuu halutusti.

Joistakin kuvakaappauksista en saanut selvää. Tiedän, että jotkin marginaalit voisivat olla parempia. En ole kaikkia marginaaleja jaksanut hioa.

Ylös/alasnuolet ovat tälläkin sivustolla sisällön päällä, joten en ymmärrä, miksi niistä huomautettiin leveän näytön suhteen. Tausta on läpinäkyvä, joten alla olevan tekstin pystyy lukemaan. Tämä on ihan normaali käytäntö niiden suhteen. Läpinäkyvyysaste on aina kompromissi.

Joidenkin margnaaliongelmien kohdalla ongelma on se, että ongelmat tulevat esille vain tietyillä levyksillä.

Kännykkäversiosta tein uuden variaation.

Joku ehdotti, että oikean reunan keskiosan valikko ei näy koko aikaa. Laitoin sen piilotettavaksi. Aukaisin on valikkonapin alapuolella (pienensin haku- ja valikkonappeja, jotta kokonaiskorkeus on sama 96px kuin ennen).

Ehdotettiin myös, että selitekstit ovat rinnalla aina. Nyt ovat. Kaikkiin toimintoihin on ihan mahdoton saada yleisesti tunnettua ikonia, kuten esim. "Lisää kommentti loppuun" tai "Aloita uusi aihe". Tuollaiset kaipaavat aina rinnalleen selitekstit. Koska :hover-toiminnolla ei saa järkevästi toimivia selitekstejä, tämä versio poistanee ongelman?

https://www.sanaristikkofoorumi.net...-www.sanaristikkofoorumi.net-5275fbfc4553.png

Sivupalkin asemointia en muuttanut. Avausnapin voi tietenkin laittaa minne vain. Avautuva toimintovalikko sen sijaan ottaa sen verran tilaa, että sen käyttö edellyttää joka tapauksessa muuta kuin vain peukalon käyttöä. Toki voisi sijoitella niin, että eniten käytetyt toiminnot ovat parhailla paikoilla.

Valikkonapin sijainnin suhteen sekä toimintojen järjestyksen suhteen voi antaa ehdotuksia.

Edellinen versio on varakopiona.

Joitakin marginaaliongelmia olen korjannut.

Teemassa on aivan liikaa leveysriippuvaisia arvoja. Ne pitäisi käydä lävitse ja poistaa kaikki turhat. Yrtin poistaa tarpeettomiksi katsomiani määrityksiä, mutta meni pieleen ja palautin edellisen version. Vasen ja oikea marginaali saisi foorumiosaltolla olla paremmin (monin paikoin turhaa marginaalia), mutta on liian iso työ. Ongelman juurisyy on siinä, että foorumia ajatellen teeman marginaalimääritykset olivat huonot. Tuli korjattua vain kohtalaisesti toimiviksi. Kun käyttää toisten esimäärittelemiä pohjia, pohjien CSS olisi pitänyt tutkia paremmin.

Korjasin oikean ja vasemman reunan marginaaleja foorumilistoissa ja säikeiden kommentien osalta leveysalueella 482-782px. Nyt ei ole turhan suuria marginaaleja näissä kohdin. Muualla olisi vielä tarvetta korjata marginaaleja.

 

[Tapio X]

"Se, että tekstiä jää jollakin kännykällä palkin alle tuntuu oudolta,..."

Ongelma oli siinä, että sivut näkyvät eri lailla jos on kirjautunut tai ei. Oli unohtunut testata kirjautumatta.

Uudempi versio ei toiminut peruskännykässä, joten piti palauttaa edellinen versio. Yksi toiminto ei jostain syystä toimi enkä ole löytänyt syytä.

WordPress lisää kirjautuneille CSS:ää ja JavaScriptiä, joka muuttaa sivun yläreunan käyttäytymistä monessa suhteessa. Laitoin muutamia korjauksia. Todella hankalaa joskus tämän seikan takia.

Lataa uudestaan + mene taaksepäin ovat ongelmallisia. Peruskännykässä huonosti löydettävissä. Tablet-laitteissa ne ovat selaimen käyttiksessä suoraan esillä, joten niitä varten turha.

Näemmä HD-tablet-laite näyttää kapeampaan suuntaan kännykkäversion samaan tapaan kuin iPad.
Vaakasuunta vaikuttaisi olevan ehkä 1008px tai sinne päin (pitäisi tarkistaa jostain).

 

[PekoniMuuri]

Chromen alapalkki hajottaa sivupalkin, foxilla vielä jää tekstiä alle.
Foxissa yläpalkki näkyvissä.

 

[Kautium]

Palautteen vastaanottaminen tuntuu olevan aloittajalle hankalaa. Samaten olisi kiva, jos lainaisit muita kirjoittajia oikeaoppisesti foorumin quote-tageilla, etkä kehittelisi siihenkin tarpeeseen uusia menetelmiä käyttäen välillä lainausmerkkejä ja välillä jojain sisennyksiä jne. Nyt ei olla missään suomi24:ssä, eikä kannata muutenkaan hakea sieltä vertauspohjaa yhtään mihinkään.

Itse aiheesta sen verran, että vaakatilan haaskaus noissa painikkeissa minuakin eniten tökkii. Toinen ongelma on siinä, ettei tiedä mitä ne kuvakkeet edes tekevät. Ei kannata väkisin kehitellä uutta pyörää, kun se on jo olemassa.

 

[Tapio X]

PekoniMuuri -

Chromen alapalkki hajottaa sivupalkin, foxilla vielä jää tekstiä alle.
Foxissa yläpalkki näkyvissä.​

Minulle ei tule tuota Chromen alapalkkia ollenkaan. Mitoitus on tehty käyttämäni peruskännykän mukaan. Sinulla Chromesta ainakin eri versio, kun se käyttäytyy eri lailla. Vai onko tuo alapalkki jokin selaimen asetus, koska missään käyttämässäni Chrome-selaimessa sitä ei ole? Jos se on lisäominaisuus, en voi ottaa sellaisia huomioon.

Noissa ei näy Social Warfare, jonka pitäisi olla laskurin oikealla puolella.

[lainauksissa on se ongelma, että niitä täytyisi editoida, jos haluaa vain pätkän esille.]

Kuten toin esille, parempia kuvakkeita en löytänyt. Rinnalla tulevat selitekstit hieman auttavat, vaikka ne ovat vähän ongelmallisia.

Ilmettelen edelleen, miten kännykällä 6% luokkaa olevan tilan käyttö olisi ongelma.

HD-tabletilla laitoin vasemmalle saman verran marginaalia ja lopputulos on tasapainoinen. HD-tablet-laitteella viewport on laite pystysuunnassa vähän alle 600px. Marginaali on siten jotain 6% luokkaa. iPadissa olettaisin olevan samaa luokkaa (puhdas oletus, koska en muista kertalukaisulla iPadin viewport-arvoja).

Sain yhden toimintaongelma korjattua (eräs elementti vaati korkeus- ja levesmäärityksen).

Minulla on käytössä neljä mobiililaitetta, jolla voin testata:
* 320x480px kännykkä (ei korjauskerrointa)
* Samsung Galaxy J5, jossa viewport laite pystysuunnassa käyttää aluetta 321-481px (viewport kaiketi 360px koska korjauskerroin on kaiketi 2x).
* HD-tablet, jossa viewport on laite pystysuunnassa vähän alle 600px (korjauskerrointa en tiedä) (vaakasuunnassa 1000-1100 luokkaa)
* 800x1280px tablet-laite jossa viewport on sama kuin laitteen pikselimäärä eli korjauskerrointa ei ole ollenkaan.

 

[Kautium]

[lainauksissa on se ongelma, että niitä täytyisi editoida, jos haluaa vain pätkän esille.]

Ihan väärässä paikassa olet kommentoimassa, jos foorumin perustoiminnallisuus on liikaa. Eikä niitä lainauksia tarvitse editoida juuri sen enempää kuin noita typeriä sisennyksiä ja listauksiakaan lisäilemällä.

Ilmettelen edelleen, miten kännykällä 6% luokkaa olevan tilan käyttö olisi ongelma.

Minä taas ihmettelen miten et ymmärrä sitä ongelmaa? Yksikin pikseli pois muutenkin rajallisesta tilasta on liikaa. Työpöytänäytöissä/resoluutioilla tilanne on ihan eri, mutta tuskin sielläkään kovin moni kaipaa valikkoa jatkuvasti.

Tuo valikkorakenne on siis suurimman osan ajasta täysin tarpeeton, joten ongelma vain kertautuu kun se killuu siinä reunassa koko ajan.

 

[Tapio X]

Testasin piiloutuvaa, mutta siinä tuli ongelmia, joten otin edellisen version käyttöön. Marginaalia siinäkin se 6% ylimääräistä, mutta toiminnot eivät olleet aina esillä. Jos haluaa, että pienentää marginaalia, pitäisi kaiketi tehdä kiinteät elementit hieman enemmän läpinäkyviksi, mutta jos läpinäkyvyyttäkin on liikaa, toiminnallisuus kärsii.

 

[Kautium]

Testasin piiloutuvaa, mutta siinä tuli ongelmia, joten otin edellisen version käyttöön. Marginaalia siinäkin se 6% ylimääräistä, mutta toiminnot eivät olleet aina esillä. Jos haluaa, että pienentää marginaalia, pitäisi kaiketi tehdä kiinteät elementit hieman enemmän läpinäkyviksi, mutta jos läpinäkyvyyttäkin on liikaa, toiminnallisuus kärsii.

Jos ongelma on siinä, että valikko ei voi olla sivun yläreunassa, niin lisää sellainen huomaamaton mukana kulkeva painike sivun reunaan, josta aukeaa muut toiminnot sisältävä valikko?

 

[apek]

[lainauksissa on se ongelma, että niitä täytyisi editoida, jos haluaa vain pätkän esille.]

Maalaat haluamasi pätkän tekstiä jolloin tekstin alle ilmestyy lainaus nappi (+Lainaa). Voit lisätä eri lainauksia niin paljon kuin haluat ja lopuksi vain painat "lisää lainaukset" nappia tekstikentän alapuolelta, jolloin foorumisofta lisää kaikki lainaukset kerralla.

Tai jos haluat lainata vain yhtä pätkää viestistä, niin maalaat tekstin ja klikkaan tekstin alapuolelta "Vastaa" nappia.

 

[PekoniMuuri]

Minulle ei tule tuota Chromen alapalkkia ollenkaan. Mitoitus on tehty käyttämäni peruskännykän mukaan. Sinulla Chromesta ainakin eri versio, kun se käyttäytyy eri lailla. Vai onko tuo alapalkki jokin selaimen asetus, koska missään käyttämässäni Chrome-selaimessa sitä ei ole? Jos se on lisäominaisuus, en voi ottaa sellaisia huomioon.

Chrome Canary, eli ''alpha'' versio. Ainakin 76 versiossa on, normi chrome menee 74 versiossa eli tulee luultavasti myöhemmin siihenkin jos saa suosiota.
Mites tuo ''foxilla vielä jää tekstiä alle.''

 

[Tapio X]

Testikännyköissä selaimen on vain Chrome. Käyttämissäni selaimissa alas tyhjää jää vain yhdellä sivulla. Muilla tule sosiaalisen median linkit (Twitter ja LinkedIn). Miksi yhdellä sivulla ei tule alas sosiaalisten medioiden linkkiä, on täysi arvoitus. Se on määritelty sivun alareunaan, jossa se jostakin täysin käsittämättömästä syystä ei näy yhdellä sivulla.

Jos ongelma on siinä, että valikko ei voi olla sivun yläreunassa, niin lisää sellainen huomaamaton mukana kulkeva painike sivun reunaan, josta aukeaa muut toiminnot sisältävä valikko?

Laitoin apuvalikon avaajan nyt oikeaan laitaan (290px ylälaidasta). Alle 482px viewport-arvoilla kavensin oikeaa marginaalia, joten ylä- ja alosan toiminnot menevät hieman tekstin päälle. Apuvalikon avaaja sen sijaan jää aina marginaaliin eikä sen pitäisi koskaan mennä minkään päälle.

Nyt tuli muutama prosentti lisää oikeaa marginaalia.

Pieni z-index-ongelma jäi. Linkki rekisteröidy ei toimi ihan sivun ylälaidassa.

Palaa edelliselle sivulle voisi sijoittaa aputoimintoihin. Se on peruskännöissä hyödyllinen, sillä (vaimon) puhelimessa sitä ei ole selaimen käyttöliittymässä.
Pitäisi hieman muokkailla koodeja, jotta sen saisi lisättyä.

Minulla oma CSS on Code Snippet -koodipätkissä (laitoin myös perus CSS:n koodipätkäksi ja tyhjensin teeman CSS-tiedoston kokonaan). Niiden etuna on se, että voi helposti aktivoida/inaktivoida koodin. Jos on tallella edellinen koodi, sen voi nopeasti ottaa takaisin käyttöön, jos uudempi koodi ei pelitä. Yleensä aina otan varakopion edellisestä.

 

[Ascend]

Ainakin omalla OnePlussalla tuo sivusto on aika karseaa käytettävää vaakatasossa.. miksi ihmeessä noita Twitter/linkkari linkkejä pitää roikottaa koko ajan tilaa viemässä? Miksei tekstit ole koko näytöllä, vaan vain vasemmassa laidassa? Miksi isoa yläpalkkia pitää tuoda mukana koko ajan? Tuossa varsinaiselle sisällölle jää varmaan alle puolet näytön koosta..

 

[Tapio X]

Miksei tekstit ole koko näytöllä, vaan vain vasemmassa laidassa? Miksi isoa yläpalkkia pitää tuoda mukana koko ajan?

Teemassa tekstille varattu tila oli lähtökohtaisesti kapea. Sitä ovat teemaa käyttäneet pitäneet yleisesti liian kapeana. Tekstien ympärillä on tarpeettomasti marginaalia. Tavanomaisille sivuille haluaisin jättää marginaalia enkä ole tehnyt asialle mitään, vaikka turhaa marginaalia niissäkin on.

Olen kyllä marginaaleja parantanut jonkin verran foorumiosiossa, mutta en tarpeeksi. Liian isot marginaalit tämän suuntaisille sivuille on tiedossa ja minua itseänikin harmittaa turhan isot marginaalit levällä näytöllä. Liian isot marginaalit koskevat yli 820px leveyksiä. Teemassa on niin paljon leveysriippuvaista CSS:ää, etten ole jaksanut tehdä kuin minimi korjaukset.

Koko näytöllä teksti ei vaakatasossa kuulu olla, sillä oikealla on sivupaneeli.

Mobiililaitteissa itse asialle jää kieltämättä vähän tilaa jos laitetta käytetään vaakatasossa.

Kaikista huonoiten vaakanäyttö toimii HD-tabletlaitteissa, joiden viewport on 1000-1100px välillä. Matalan tekstialueen lisäksi päävalikon valikoille ei ole riittävästi pystytilaa.

Toisin päin laitetta pidettäessä ongelmaa ei ole. Useimmat mobiliilaitteet näyttävät mobiilivalikon, jolloin ylhäällä ei ole kiinteä yläpalkkia. Alapalkin kiinteys ei korkeassa näytössä haittaa, sillä se ei vie tällöin kohtuuttomasti tilaa.

Jos laittaa laitteen pystysuuntaan ja käyttää tietokoneversiota, kiinteä yläpalkki ei vie kohtuuttomasti tilaa. Kokeilin tietokoneversiota HD-tabletissani (vaakasuuntaan vieport arvo 1000-1100px) ja totesin tuon asian käytännössä.

Jotta sivut toimisivat vaakasuunnassa miellyttävämmin, pitäisi yläpalkki laittaa rullaavaksi. Ongelmasta selviäsi sillä, että position:fixed edellyttää tiettyä miminikorkeutta. Jos korkeus ei ole riittävä, yläosan toiminnot rullaavat. Täytyy harkita.

Kelluvan alapalkin käytöksen muuttaminen korkeusriippuvaiseksi on ongelma, sillä se on lisäosan toimintapa. Ehkä sen saisi jollakin CSS:llä rullaamaan sivun mukana. Siinä on todennäköisesti JavaScriptiä, joka muuttaa dynaamisesti CSS:ää, joten asia on ongelmallinen.

Oletan, että sivuja käytetään niin päin kuin sivut parhaiten toimivat, joten en toistaiseksi edes yrittänyt saada parasta toimivuuttaa matalalle ja leveälle näytölle. En itsekään käytä mobiililaitteissa sivujani vaakasuunnassa. Mobiililaitteissa olen panostanut vain pystysuuntaiseen laitteen käyttöön.

Mobiililaitteissa vain 800x1280px ja ns. 4K tablet-laitteissa, joiden viewport-arvo on 800x1280px vaakanäyttö toimii mielestäni kohtalaisen hyvin.

Vaakanäyton olen ajatellut lähinnä tietokonekäyttöä ajatellen.

 

[apek]

En itsekään käytä mobiililaitteissa sivujani vaakasuunnassa.

Jotkut käyttävät. Sivuja ei ihan lähtökohtaisesti tehdä itselle, vaan kaikille muille. Jos muitten mielipiteet ja toiveet eivät kiinnosta, niin sitten ne sivut kannattaa pitää ihan vaikka omalla koneella ja käyttää yksin.

 

[Tapio X]

No täytyy harkita vakavasti noiden min-height ja max-height -määrittelyjen lisäämistä, joilla tekstialueen mataluusongelman vaakasuuntaisessa selailussa voisi korjata. Se on olennaisempi kysymys kuin turhan isot oikean ja vasemman reunan marginaalit 820+ -leveysalueella.

min-height/max-height raja-arvo täytyisi asettaa 700-800 px paikkeille.

 

[yksvaan]

Musta tota sivun layoutia vois karsia aika rankasti ja jättää vain olennaiset jutut. Tuolla on nyt miljoona linkkiä valikoissa, läjäpäin toimintoja ja vielä lisää toimintoja. Kaiken tuon mahduttaminen ruudulle on todella vaikeaa.

 

[Tapio X]

Ideana on kaiken löytyminen ilman suurempaa hakemista.

Lisää toimintoja mobiilissa on lähinnä siksi, että jotkut linkit menevät valikossa niin alas, että niitä tuskin tulisi käytettyä. Valikon olen yrittänyt priorisoida ts. olennaisimmat ensimmäisinä. Pitkähän se valikkolistaus kyllä on.

Tuo noistaa joitakin linkkejä + yhden toiminnon lähemmäksi käyttäjää.

 

[greenlight]

Sehän lisää tarpeetonta hakemista, että valikot ovat sekavia ja täynnä paskaa, jolloin niistä on vaikea löytää mitään

 

[Tapio X]

Tuota kritiikkiä en ymmärrä. Olen yrittänyt luokitella päävalikon systemaattisesti. En keksi miten ne voisi luokitella paremmin. Siitä löytää kaikki linkit paitsi kirjautumiseen liittyvät.

Monesti säännöt, tietoturva ohjeet yms. apusivut on ripoteltu sinne tänne ja niitä saa etsiä sieltä sun täältä. Yritin laittaa kaiken keskitetysti yhteen paikkaan enkä ripotellut linkkejä sinne sun tänne. Minua itseäni ainakin ärsyttää sinne tänne ripottelu.

 

[Nigel]

Tuota kritiikkiä en ymmärrä. Olen yrittänyt luokitella päävalikon systemaattisesti. En keksi miten ne voisi luokitella paremmin. Siitä löytää kaikki linkit paitsi kirjautumiseen liittyvät.

Monesti säännöt, tietoturva ohjeet yms. apusivut on ripoteltu sinne tänne ja niitä saa etsiä sieltä sun täältä. Yritin laittaa kaiken keskitetysti yhteen paikkaan enkä ripotellut linkkejä sinne sun tänne. Minua itseäni ainakin ärsyttää sinne tänne ripottelu.

Boldasin olennaisen kohdan. Täällä saamasi palautteen mukaan nuo toiminnallisuudet sivupalkissa on aivan turhia ja yksikin nappi on liikaa. Sinä olet siihen ympännyt kaiken toiminnallisuuden.

 

[Tapio X]

En nyt ihan kaikkea. Haku ja valikko ovat ylhäällä ja ylös/alas alhaalla. Muut ovat kyllä sivupalkissa - mukaan lukien kirjautumiset, kun niitä ei saa muualle ilman, että sivun yläosa näyttää ahdetulta kännykässä.

Tietokoneversiossa kirjautuminen on yläosassa esillä. Oli pitkään kännykkäversiossakin, mutta koin yläosan liian ahdetulta, joten siirsin pienennettynä oikeaan reunaan.

Yhden napin jätän. Tarpeellisin sivupalkissa on uuden säikeen/uuden kommentin luominen loppuun - linkkiä ei tarvitse käydä sivun alusta hakemassa.

Tuntuu, että mikään ei kelpaa, vaikka yritän vain ja ainoastaan sitä, että käyttäjän ei tarvitse hakea toiminnallisuuksia sieltä sun täältä. Ehkä vain itse inhoan sivustoja, joissa toiminnallisuuksia saa etsiä mistä sattuu.

Tällä sivustolla toiminnallisuudet täytyy hakea ylös/alasnuolilla joko ylhäältä tai alhaalta. Ajattelin vain, että tältäkin voitaisiin välttyä, jos uhraa hieman tilaa näytöltä toiminnallisuuksiin.

Näemmä arvostamme eri asioita. Minä en tykkää hakea toimintoja ja ajattelin, että niitä inhoaisivat muutkin hakea.

Kiinteiden ylös/alas nuolilla toiminnallisuuksien hakeminen on kyllä suuri etu verrattuna siihen, että ne puuttuvat. Suomi24 on todella ärsyttävä, kun sivua saa joka kerta rullata niin *piip* paljon.

Ehkä minun on tehtävä sivut omasta mielestäni ihan *piip* tavalla - lopputulosta ainakin itse inhoan syvästi, mutta jos se on muille parempi, ehkä minun on nieltävä inhotukseni.

Hakuinhokit suurimmasta pienempään:

1. Valikot
2. Haku
3. Luo uusi aihe/ kommentti
4. Siirry edelliselle sivulle (kännykkä)
5. Palaute
6. Ohjeet
7. Kirjautuminen (tarvitsee harvoin)

Mielipiteeni www- suunnittelusta yleenä - ihan *piip*, mutta näemmä pakko olla mielestäni pielessä, kun muusta ei tykätä. Turhauttaa ihan *piip* paljon. Ei voi tehdä mitään kunnolla. WWW-suunnittelu on harrastus, mutta turhauttaa kyllä ihan hirveästi. En voi millään tavoittaa sitä, mihin pyrin.

Tavallaan kaipaan aikaa, jolloin oli ns. kehykset käytössä - valikkoa eikä tärkeitä toimintoja tarvinnut hakea ympäri sivua. Olen aina inhonnut tavanomaisesti tehtyjä www-sivuja, sillä asia, mitä eniten inhoan on tarpeeton skrollaaminen.

Yritin muuttaa vaakasuuntaisen mobiiliversion (viewport-arvo 1000+) toimivammaksi, mutta en toistaiseksi onnistunut. Huomasin ongelman itse vasta sen jälkeen kun ostin vähän aika sitten HD-tablet-laitteen.

Kännykässä vaakanäyttö käytti mobiiliversiota ja 800x1280px laitteessa ongelmaa ei ollut, koska tilaa oli ruutukoon suhteutettuna enemmän kuin HD-tablet-laitteella.

 

[living_death]

Jollain kunnollisella Wordpress teemalla sivusto voisi toimia desktop sekä mobiililaitteissa ilman jatkuvaa CSS-koodin kanssa nysväämistä.

Nykyisellään sivusto on niin sekava, ettei edes tee mieli klikkailla mitään ylävalikon linkkejä auki.

Hiirtä liikuttelemalla vilkkuu ja välkkyy joka suunnassa ja niiden kanssa kikkailuiden aika meni jo ohi vuosia sitten. Sama pätee myös erilaisten varjostuksien kanssa ja niissäkin ollaan menty räikeästi liian tummilla väreillä.

Tarpeeksi kauan kun omasta mielestään "hienosäätää" sivustoa paremmaksi, koko sivustosta tulee mahdoton ylläpidettävä jos haluaa sen toimivan kaikenlaisilla päätelaitteilla.

Sivusto näyttää pitkälti samalta kuin itse koodasin 10 vuotta sitten käsin HTML- ja CSS-koodilla.

 

[Tapio X]

Teema on kyllä aika monimutkainen. Osan CSS:stä olen poistanut, mutta en tarpeeksi. Teemassa on lähtökohtaisesti liikaa pikkusäätöä ja kun niitä yrittää muuttaa, homma menee vähän sekavaksi. Vaihtaa ei kannata, mutta turha sälä pitäisi kyllä joskus poistaa.

Jotta saisin tekstin ja foorumialueen marginaalit 820+ täysin kuntoon, pitäisi CSS käydä läpi huolellisesti. Tuntuu vain liian työläältä.

Edelleenkään en ymmärrä, miten organisoisin sivut paremmin. Päävalikossa on linkkejä, jotka useimmat sijoittavat footer-osioon (kuten säännöt, ota yhteyttä ja opastus). Ajattelin, että mitään ei tarvitsisi etsiä footer-osiosta. Toki kaikkien sivujen listaaminen päävalikossa kasvattaa valikon kokoa. Olen nähnyt kyllä huomattavasti suurempia linkkimääriä valikoissa, joten en kokenut sitä ongelmaksi.

Poistin teeman CSS:n kokonaan ja tein siitä oman version, mutta siivoamista ei ole tullut tehtyä tarpeeksi. Olisi alusta lähtien pitänyt tutkia CSS kunnolla ja poistaa tarpeeton. Sen jälkeen olisi ollut helpompi luoma oma CSS. Kun näin ei tullut tehtyä, hallinta on hankalaa. Liian pitkään yritin vain omalla CSS:llä muuttaa joitakin toimintatapoja. On *piip* vaikea päästä jyvälle jonkun toisen laatimasta CSS:stä.

Eräät efektit ovat ihan kokeilumielessä tehtyjä.

Tumman sinistä taustaa vasten musta varjostus luo tekstille erottuvuutta. Muualla voivat varjostuksen ehkä olla liian tummia. Minusta varjostukset yleisesti ovat ihan nättejä. En ajatellut, mikä on muodissa ja mikä ei.

Eri laitteet tuottavat yllätyksiä. Minulle oli yllätys HD-laitteen viewport. Oli yllätys molempiin suuntiin. Oletin, että näyttäisi kuten 800x1280px laite, koska näytön mittasuhteet ovat suurin piirtein samat.

Mobiilityyppinen valikko ei tuottanut ongelmia, mutta vaakasuunnan viewport-arvo oli ikävä yllätys. Harmittaa kyllä, että sivut eivät toimi tablet-laitteessani vaakasuunnassa. Korjaaminen ei onnistunut. Tiedän, että pitäisi korjata, sillä tablet-laitetta käytetään usein vaakasuunnassakin. Mutta tällä kertaa en välitä tästä asiasta. HD-tabletin käyttäjiä sivuillani on vain minä itse. Itseni takia ei kannata muuttaa.

Tosin mitenkähän HD-kännykät käyttävät viewport-arvona vaakasuunnassa? Jos toimivat samaan tapaan kuin HD-tablet-laitteeni, ei sivujani vaakasuunnassa viitse käyttää kukaan. HD()+ -kännykkä kyllä pitäisi huomioida, vaikka kännykkää yleensä kyllä käytetään pystysuuntaan.

Jos erään henkilön käyttämä OnePlus on kännykkä, kuvakaappaus viittaisi siihen, että kyseessä on HD+ -kännykkä, joka toimii samaan tapaan kuin tablet-laitteeni (vaikuttaa, että leveyssuunta on hieman isompi kuin minulla eli kysessä olisi HD+ -laite). Myönnän, että tällainen laite on kannaltani ongelma.

 

[JRan]

Täytyy sanoa, että on kyllä täysin unohtunut mobiili-devauksen perusideat, esim. less is more. Ei kukaan oikeasti halua noiden kaikkien mahdollisten toimintojen roikkuvan mukana tuolla.

Toinen juttu mitä ihmettelen on asenne siihen, että toteutus ontuu pahasti, kun käytetään eri selaimilla tai laitteilla. Jokaista webbi-devaajaa tämä asia on kiinnostanut suuresti aikojen alusta. Klassikko päänvaiva on ollut aina IE:n jokainen versio, kaikki toimii eri tavalla, mutta mikään ei standardin mukaisesti. Silti aina tuki oli toteutettava purkalla ja liimalla, jotta kenellekään ei tullut paha mieli, vaikka ei itse omistanut edes Windowssia saati sitten IE:tä. Vai teetkö kyseistä saittia vain itsellesi?

 

[David ":DA" Imodium]

Arvostan halua ja intohimoa oppimiseen ja devaamiseen. Tyylisuunta tosiaan vaikuttaa siltä joka IE-kutosen aikoihin oli valloillaan. Vain pop-upit puuttuu. Eipä kun olihan siellä niitä pop-up -apuikkunoitakin.

Sympaattista ja nostalgista.

 

[Tapio X]

No eiväthän ne oikean reunan lisäjutut nyt mobiilissa ole esillä koko aikaa. Yksi nappi suurin piirtein keskellä sivulaitaa ei pitäisi ketään häiritä.

Kyllä minua harmittaa tuo HD-ongelma. Yksi tuttavani käyttää HD-kännykkää. Google Analytics ilmoittaa käytetyt selaimet. IE 11 huomioitu. Safaria ei minulla ole.

Jos tyyli vaikuttaa IE 6 ajalta, toteutus on moderni. IE 6:ssa piti käytää paljon taustakuvia ja erillisiä pikkukuvia samoihin asioihin. Minulla ainoa taustakuva on yläpalkin taustakuva. Kaikki muu on määritelty CSS:llä + ikonifonteilla. Joissakin kohdin kyllä pitäisi turvautua erilliskuviin kun sopiva fontti-ikoni puuttuu. Mutta jos on sekaisin fontti-ikoneja ja erilliskuvia, lopputulos on sekava.

 

[living_death]

Älä keskity siihen mobiiliin, vaan asenna kunnollinen teema joka tukee kaikkia päätelaitteita kerralla ja rakenna toiminnallisuudet sellaisiksi, ettei sivustolle ensimmäistä kertaa saapuva poistu heti.

Suurin osa ylävalikon toiminnallisuuksista sopisi sivupalkkiin ja ylävalikkoon vain pakolliset esim. blogit, foorumit, artikkelit, haku ja kirjautuminen/rekisteröityminen.

Jos ylävalikossa on kaksi riviä käytettävissä, ylimpään someikonit, hakupalkki ja kirjautuminen/rekisteröityminen ja sen alemmalle riville blogit, foorumit ja artikkelit.

Kaikki muut sälät sivupalkkeihin ja niitäkin hillitysti esille.

Levennä myös leiskaa, koska nyt jää kummallekin reunalle liian suuret sururaidat, joista oikea on vieläpä leveämpi kuin vasen.

Kirjasimet myös vaihtoon. Käytä Googlen fontteja.

Väreihin kannattaa myös panostaa. Nyt näyttää visuaalisesti sekavalta ja kirjavalta. Internetistä löytyy lukuisia sivustoja, joissa näytetään valmiiksi väripaletit jotka sopivat keskenään.

Yritä myös välttää kotisivumaista kerrontaa ja katso ammattilaisten sivuilta miten siellä on asiat esitetty ja jäsennelty.