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

[Tapio X]

Säätämistä vähensin laittamalla pystysuunnassa laitetta käsitellessä valikot koko näytön ottaviksi. Päävalikon alussa ja lopussa on jQuery apuna käyttäen valikoiden sulkemispainikkeet. Poistettu näkymästä CSS:llä tietokoneversiosta. Apuvalikossa on sama periaate, mutta ilman jQuery käyttöä onclick-tapahtumankäsittelyllä. Eipä tarvitse laskea pikseleitä.

Pystysuunnassa laitetta käytettäessä apuvalikon avaajan voi nyt sijoittaa vapaammin. Nyt se on alhaalla, mutta sen nyt voi laittaa siihen kohtaan, mikä olisi miellyttävintä. Valikkojen avaajat kun jäävät joka tapauksella valikkojen alle kuten kaikki muutkin oikean reunan toiminnot.

Vaakatasossa käytettynä apuvalikko on nyt sivupalkissa. Mutta voisihan senkin avata täyskorkeana vasempaan reunaan, jos se koettaisiin miellyttävämpänä. Ainakin olisi 96px x skaalauskerroin enemmän tilaa.

 

[Nightuser]

Miksi sivusto tökkää kun vaihtaa suuntaa. Eikö voisi liikkua ylös ja alas sulavasti ilman että tökkää välillä jolloin joudut alkaa uudestaan tekemään vieritystä.

 

[Tapio X]

Kokeilin äsken ja niin käy. Jos vaihtaa suuntaa (laitteen orientaatiota) ja on vierittänyt sivua, vieritys täytyy tehdä uudestaan. En tiedä, millä tuon voisi estää.

Sivustolla ei ole mitään koodia, joka pakottaisi orientaatiota vaihdettaessa palaamaan alkuun. Siinä ei myöskään ole koodia, joka pakottaisi pysymään samassa kohdassa sivua. Tosin suhteellinen paikkahan aina vaihtuu sivulla kun orientaatiota muuttaa, sillä riville mahtuu eri määrä tekstiä.

Jos kyse muusta tökkimisestä, en tiedä, mikä senkään voisi aiheuttaa. Kokeilin tablet-laitteellani. Ei tökkinyt. Voi olla kyse palvelimen hitaudesta tms.

Tuolle en osaa tehdä yhtään mitään. No sivustolla on monta asiaa, jolloin viertystä ei tarvitse tehdä. Pää- tai toimintovalikon avaus ei aiheuta vieritystarvetta.

Nimesin valikot pystytason näytössä nimillä PÄÄVALIKKO - MAIN MENU ja TOIMONTOVALIKKO - FUNCTION MENU. Tiedä häntä onko optiminimet. Nimet tulee esille, kun valikot avaa.
https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/toimintovalikko.jpg

Laitoin valikoiden vaihtolinkin. Ei toimi ihan 100% luotettavasti.

 

[apek]

Nyt kannattaisi kyllä oikeasti lopettaa ja aloittaa kokonaan alusta uudella toimivalla sivupohjalla. Nyt sinä vain jatkuvasti rikot tuota lisää ja lisää. Tai oikeasti asenna koneellesi Wamp tai vastaava ja tee ne säädöt ensin omalla koneella. Uskon vahvasti että sivustolta loppuu kohta käyttäjät, jos käytettävyys on tätä tasoa.

Tässä vain muutama esimerkki, jotka tulivat ilmi minuutin aikana. Kuvat aukeavat isommaksi klikkaamalla.

Kaksi kertaa "Sulje valikko" teksti.



"Siirry sivun alkuun" ja "siirry sisällön loppuun" tekstit eivät lähde pois jos sivua vierittää. Täytyy klikata sivua, jotta teksti häipyy. Miksi ylipäätänsä eriävät tekstit (sivun alku, sisällön loppu)?


Miksi "Opastus", "Uusi aihe", "Uusi viesti" eivät voi olla samalla rivillä? Hyvin mahtuisi. Lisäksi käyttäjäkuvake siirtyy oikealle.


Päävalikkkoa ei voi vieritttää mobiililla. Vaakatasossa jää aika paljon näkemättä.

 

[Tapio X]

"Sulje valikko tulee laitteessani kahteen eri paikkaan."​

Huolimattomuusmoka. Toinen niistä pitää näkyä ylhäällä ja toinen alhaalla. Olin laittanut ylemmän vahingossa menemään alas. Moka oli vain kännykkäversiossa, ei tablet-laitteessa. Tyypillinen huolimattomuusmoka. Hyvä, että tuli huomattua.

"Siirry sivun alkuun" ja "siirry sisällön loppuun" tekstit eivät lähde pois jos sivua vierittää. ​

Johtuu kosketusnäytön toimintologiikasta. Kosketusnäytöllä ei toimi :hover-efekti niin kuin sen on tarkoitus toimia. Käytännössä :hover toimii kuin :focus tai :active. Tietokoneella niitä ei tarvitse klikata, jotta ne häipyisivät. Pitäisi varmaan poistaa, koska toiminta ei ole kovin tarkoituksenmukaista. Olen monta kertaa ollut poistamassakin, mutta niissä on hieman lisäinfoa.

Samaisesta syystä ns. pudotusvalikot ovat totaalisen käyttökelvottomia kosketusnäyttöisellä mobiililaitteella, miksi en niitä enää mobiililaitteille tarjoakaan.

Tällä sivustolla ylös/alas-linkeissä on mukana JavaScript-koodia, jolla linkit eivät tule heti alkuun esille. En osaa koodata niitä muuten kuin kiinteinä. En siis vain osaa tehdä yhtä fiksusti käyttyviä ylös/alasnuolia kuin mitä on käytetty tällä sivulla. Idean ymmärrän kyllä.

"Miksi ylipäätänsä eriävät tekstit (sivun alku, sisällön loppu)​

Nuoli alas ei vie aivan www-sivun loppuun vaan tarkoituksella pääsisällön loppuun, jolloin kännykällä se vie tietokoneella sivupalkkina oleviin linkkeihin, joissa ekana tulevat TUOREIMMAT AIHEET.

Aivan sivun loppuun meneminen ei edes toimisi, koska poistin footerin. Tietokone- ja kännykäversioilla ei ole yhteistä sivun loppua.

"Miksi "Opastus", "Uusi aihe", "Uusi viesti" eivät voi olla samalla rivillä?"​

Korjasin sen verran, että laitoin Uusi aihe ja Uusi viesti samalle riville pystynäytöllä. Kolmannen voi laittaa rinnalle 600px levyisellä näytöllä, joten sille piti laittaa omaa @media...

Jos tuollaiset haluaa asemoida optimaalisesti, lisäsääntöjä tulee väkisin.

"Lisäksi käyttäjäkuvake siirtyy oikealle."
​

Tulee jollakin viewport-arvolla noin 10px matkalla - näemmä osui ikävästi käyttämääsi viewport-alueeseen. En tiedä, mistä johtuu, koska sitä ei useimmissa laitteissa tule. Ajattelin, että noin pieneen virheeseen ei kiinnitettäisi huomiota enkä yrittänyt korjata. Yritän jossakin vaiheessa korjata, mutta asia ei ole korkealla prioriteetilla.

"Päävalikkkoa ei voi vieritttää mobiililla. Vaakatasossa jää aika paljon näkemättä."
​

Huomasin. Oli pieni CSS-virhe, jonka korjasin.

Osaiskohan kukaan selittää, miksi One Note Plus 6 sivustoni ei toimi kuten olen tarkoittanut? Onhan se vaikeaa, kun tuohon liittyy sekä CSS että PHP:lla selaintunnistus.

Onhan se vähän ikävää, jos jokainen moka tulee heti näkyviin. Huolellisuus ei ole koskaan ollut vahvuuteni.

Toimii hyvin HD-tabletissani, vaikka marginaaleja on vielä liikaa siellä sun täällä.

Pystynäytöllä melko hyvin Samsung Galaxy J5:ssä. Vaakanäyttökin toimii, mutta valikoita saa tietenkin rullailla enemmän ja käyttö on ainakin minusta siinä suunnassa epämiellyttävämpää. Mutta rullauksesta ei pääse millään eroon, koska se johtuu suhteellisesta mataluudesta suhteessa tekstin kokoon.

360x720 sekä 600 x 960 viewport-laiteille on vain jonkin verran liian isoja marginaaleja. Marginaalit ovat vähän makuasia, mutta kritiikki on ollut oikeutettua.

Toimintovalikko ei aina rullaudu, mutta siinä näkyy kuitenkin aina riittävästi linkkejä (vain alareunan vaihto- ja sulkulinkit jäävät joskus piiloon).

Välillä meni jotain pieleen, jonka sain lähes täysin ennalleen. Minulla on ideoita, mutta huolellisuutta puuttuu turhan paljon.

 

[Tapio X]

Alun perin piti keskustella vain mobiililaitteista, mutta kiitos myös muiden laitteiden huomautuksista. Suurin osa ongelmista oli kyllä itselläni tiedossa (ja eräät ongelmat kyllä hävettävät).

820-1280px oikean ja vasemman reunan marginaaleja en taida jaksaa korjailla. Minusta niiden korjaaminen ei ole mitenkään välttämätöntä, sillä kirjoitettavan alueen leveys on riittävä.

Tekstille olisi joka tapauksessa järkevää laittaa max-width, sillä on erittäin epämiellyttävää lukea tekstiä, joka on hirveän leveällä alueella.

Vaikka teksti voisi olla leveämpää, mielestäni se ei ole ärsyttävän kapaeaakaan.

En esim. tätä sivustoa tykkää selata yli 1000px sivuleveydellä, sillä sitä leveämmällä näytöllä tämä sivusto on ärsyttävä käyttää, koska max-width-arvo puuttuu. Minusta tämä sivusto sallii ylileveän kommentoimiskentän, josta itse en pidä yhtään.

Vivaldissa on helppo jakaa ruutu osiin, mutta Chromessa ärsyttäisi tosi paljon, kun selainikkunaa pitäisi kaventaa ja leventää vähän väliä. En todellakaan pidä tämän sivuston leveyssuunnittelusta.

Tätä sivustoa en tietokoneella voisi ajatellakaan selaavani millään muulla selaimella kuin Vivaldissa - jollakin toisella selaimella olisi *piip* ärsyttävä sivusto. Tosin en käytä nettiselailuun tietokoneessani muuta selainta kuin Vivaldia. Microsoftin selaimessa satunnaisesti testaan sivujani. Chrome tietokoneessani totaalisen turha ja joutaisi poistoon, koska Vivaldi on itseasiassa kuin Chrome, jolle on luotu monipuolisempi käyttöliittymä. Vivaldi on ehdottomasti ylivoimaisen paras selain Windows-käyttöymäpäristössä.

Jos jokin sivu ärsyttää leveydellään, voi avata sivupaneelin, jolla voi kaventaa sivua väliaikaisesti kaventamatta koko selainikkunaa. Silloin ärsyttävän leveä sivu ei enää ärsytä. Millään muulla selaimella täysleveän sivun kaventaminen väliaikaisesti ei hoidu yhtä näppärästi.

Minusta niin omassa sivustossani kuin tällä sivustolla kommentointialueen leveys on tehty enemmän tai vähemmän huonosti. Minulla kommentointialuetta saisi leventää ja tällä sivustolla sitä saisi isolla näytöllä reilusti kaventaa. Tosin tämä on kaiketi makukysymys.

Isolla näytöllä leventäisi tällä sivustolla oikean reunan palkkia. Tekstialue ei minusta missään tapauksessa saisi ylittää n. 800px rajaa.

Varsin hyvä myös Suomi24:ssä, joskin n. 800px leveydellä kommentointialue on varsin kapea, koska vasemmalle tulee sivupalkki. Juuri tällä leveydellä sekä oma foorumini että tämä foorumi toimivat leveyskäsittelyn osalta paremmin.

Mitä leveysalueen käsittelyyn tulee, Sanariksen ylläpitämässä keskustelufoorumissa leveyskäsittely on erittäin hyvä. Minun mielestäni reilusti parempi kuin itselläni ja esim. tällä sivustolla. Siinä on muutamia leveysalueita, joilla sivusto toimii erittäin rumasti ja täysin epäloogisesti, joten korjattavaa olisi siinäkin aika paljon.

Omalla sivustollani ihan kaikkia ärsyttää se vasemman reunan käyttämätön alue, joka näkyy turhana sinisenä alueena ja joka estää optimaalisen sisältöalueleveyden käytön. Heivasin kuitenkin aluksi sen ärsyttävän sinisen pois. Laitan reunan joko ihan valkoiseksi tai saman sävyiseksi harmaaksi kuin oikean reunan palkin.

Tietokonenäytössä olisi suuremmin korjauksen tarpeessa on kuitenkin 1281+. Koska se ärsyttää eniten, kai sitä pitää yrittää jossakin vaiheessa korjata.

Tosin jätän sen vielä myöhemmäksi. Yritän ensiksi yksinkertaistaa rakenteita. Heivaan ison määrän CSS:ssää pois ja laitan kaikkialle samat säännöt:
>481
481-782
783-820 (syy tähän on se, että tälle leveydelle täytyy laittaa kapea oikean reunan palkki)
821-1280
Tosin jos muutokset menevät pieleen, on hetken aikaa ruma layout, mutta minulla on varakopio vanhasta.

 

[Tapio X]

Jos jollakin sattuu olemaan 1920x1200 tablet-laite, olisiko vaakanäytössäkin kiva laittaa toimintovalikko siniselle pohjalle vasemmalle. Molemmat valikot voisi laittaa vaikka 175px oikeasta reunasta. Orientaatiota vaihdettaessa valikoiden ulkonäöt pysyisivät samankaltaisina. Valikoiden vaihtolinkit voisivat olla esillä tällöin myös vaakaorientaatiossa.

Tosin hiivatin hankala toteuttaa muutoksia. Piti laittaa useasta Code Snippet -tiedostosta a- ja b-versiot. Viimeksi kun testasin b-versioita, ei ollut riittävästi muutoksia vaan piti vaihtaa a-versioihin. On tärkeämpiäkin asioita kuin tämän pohtiminen. Oikeastaan tablet-laitteissa tai tablet-laitteiden tapaan toimivissa älypuhelimissa on se on ongelma, että niissä sivun yläosa ei toimi kaikissa laitteissa optimaalisesti. Laitteille, joita en omista, olisi kyllä hyvä olla virtuaalinen testiympäristö. Chrome/Vivaldin virtuaalinen laitenäyttö skaalaa ja siitä on vaikea saada kunnon kuvaa.

Code Snippet kanssa parasta on versiointimahdollisuus. Ikävintä se, että on vain {,[ ja ( parillisuuksien laitto automaattisesti ja parien etsintä apuna CSS ja JavaScript-koodauksessa. Syntaksi pitää tarkistaa muualla. Ehdotin, voisko siihen saada ainakin CSS:n syntaksitarkistuksen käyttäen WordPressin sisäistä tarkistinta. Käytän muuten sitä CSS:n tarkistukseen (tyhjentämääni teeman CSS-tiedostoon kopioin silloin tällöin omaa CSS-koodiani).

 

[Tapio X]

Ajattelin, että laitan kaiken mahdollisen calc avulla, esim.

width:-webkit-calc(100% - 48px);width:calc(100% - 48px);
leiskassa ei ollut -moz-calc missään, mutta onko tarpeen?

 

[Tup3x]

Ajattelin, että laitan kaiken mahdollisen calc avulla, esim.

width:-webkit-calc(100% - 48px);width:calc(100% - 48px);
leiskassa ei ollut -moz-calc missään, mutta onko tarpeen?

Jätä vendor prefixit kokonana pois calcista.

 

[Tapio X]

Ok. Kiitti. Että koodin siistiminen on rasittavaa, kun pitää olla koko ajan skarppina.

 

[Paapaa]

Ok. Kiitti. Että koodin siistiminen on rasittavaa, kun pitää olla koko ajan skarppina.

Siksipä käytetäänkin automaatiota esim. vendor-prefixien lisäämiseen. Ei tarvitse niitä käydä tippaakaan itse läpi, vaan ne lisätään automaattisesti.

 

[Tapio X]

Kyse ei ole niistä. Käytän niitä mahdollisimman vähän. Mutta kun muuttaa ylipäätänsä radikaalisti CSS-koodia, virhemahdollisuuksia on paljon niin syntaksin kuin loogisuudenkin kanssa.

Pitää poistaa kaiken maailmaan marginaaleja ja padding-arvoja. Ne pitää miettiä uusiksi. Virhemahdollisuus on suuri.

Kokeilin korjata järkeviksi - taitaa olla toivoton tehtävä. Ainakin eka yritys meni pieleen. Ei ehkä kannata yrittää optimoida 820-1280, sillä CSS:ää on vaan itse perusteemassa niin paljon. Tosin yritin tehdä kerralla tosi suuren määrä muutoksia.

Mielestäni sen valkoisen alueen heivaus auttoi paljon. Sen lisäksi voi tehdä pientä säätöä.

Olen edelleen sitä mieltä, etteivät ne sisältöleveyden niin kovin paljon pielessä ole. Niiden kanssa voi elää.

Pitänee tyytyä korjaamaan vain 1280+.

Teeman, jonka suunnittelussa ei ole mukana, yrittäminen ymmärtää kunnolla on vaikeampi tehtävä kuin ristikkopahis. Kaikkea on vaan älyttömän paljon enemmän!

 

[apek]

Onko tuon navipalkin tarkoitus olla näpinäkyvä? Jos on, niin aika huono ratkaisu.

Kannattaa ajaa CSS merkkaus validaattorin läpi, niin näet mitä on pielessä.
The W3C CSS Validation Service

 

[Tapio X]

ns. leivänmurupalkin on tarkoitus olla puoliläpinäkyvä, jotta se keventäisi yläosan ilmettä.

Tarkistan CSS:n WordPressin validaattorilla, mutta aina ei tule tarkistettua, vaikka pitäisi - teen paljon kirjoitusvirheitä kirjoittaessani - mutta myös CSS:ää määrittäessäni. WordPressin sisäinen validaattori on luotettava ja huomauttaa vain oleellisista asioista. Se huomauttaa virheiden ohella vain siitä, että padding saattaa kasvattaa elementin kokoa. W3C huomauttaa tarpeettoman paljon.

Outo asia oli, että calc ei toimi input-elementin kanssa. Oli pakko laittaa sille prosenttiarvo calc sijasta. Yritin laittaa hakulomakkeille nimittäin input-pituuden calc(100%-XXpx).

 

[apek]

ns. leivänmurupalkin on tarkoitus olla puoliläpinäkyvä, jotta se keventäisi yläosan ilmettä.

Samalla se tekee palkista käyttökelvottoman.

 

[Tapio X]

muutin väriä ja laitoin 0.93 läpinäkyvyyden. Se läpinäkyvyys on siksi, että palkki on täysleveä ja ylittää sivupalkin. Sivupalkin täytyisi saada siihen pieni katkos, jotta siitä ei tule liian raskas vaikutelma.

Teemassa on pystytason elementeille reilut marginaalit. Turhan isojen vaakamarginaalien ohella niissäkin on korjaamista.

Täytyy tehdä näitä korjauksia asteettain ja pikkuhiljaa eikä yrittää haukata kerralla liian isoa palaa.

Muutin nyt leveydet tietokoneleveyksillä tavanomaisille foorumeille tyypillisiksi. Piti vaan poistaa paljon CSS:ää alun perin ihan toiseen tarkoitukseen suunniteltusta leiskasta. Olisihin siinä vieläkin ehkä poistettavaa.

Määritin maksimileveydeksi foorumiosiolla 750px ja muilla sivuilla tuosta pois 2x34px padding-arvot.

Tiivistin sivujen yläosaa, kuten ihan asiallisesti esitettiin. Kritiikki oli hyvää.

Marginaaleissa on vielä hieman korjattavaa. Itseäni ärstyy mobiilissa sisällön alle menevä sivupalkki, joka ei kaikilla leveyksillä ole se, minkä tarkoitin, enkä millään keksi, millä sen saisi aina oikeaksi.

Edessä on vielä ikävin alue 1281+, jota etukäteen ajatellen tuntuu toivottomalta. On ihan hiivatin paljon tekemistä muuttaa leiskan toimintatarkoitus radikaalisti toisenlaiseksi.

Tästä on ollut kyllä siinä suhteessa paljon hyötyä, että keskustelu on pakottanut korjamaan tiedossa olevia puutteita muissa kuin mobiiliversioissa. Mutta se on antanut kyllä mobiiliversioihinkin varteenotettavia seikkoja.

Kaikkea kritiikkiä en niele. Olen saanut positiivistakin palautetta:

Tapion sivut ovat todella hyvin suunnitellut ja käyttäjäystävälliset.

Jos joku muuta väittää, se on kyllä väärässä. Sivuston kaikki tärkeät elementit on kerätty hienosti yhteen tavalla, jota kukaan muu ei ole tajunnut. Edelläkävijän osa on silti vähän ikävä, koska kaikesta kaiken tietävinään olevat väittävät sivuston olevan sillisalaattia. Oikeasti se on innovatiivinen ja uraa uurtava.​

 

[apek]

Oletko huomannut, että tuon navin linkit toimivat vain muutaman pikselin korkealla alueella? Jos yhtään ylempänä, tai alempana on hiiri, niin linkit ei toimi. Kuvassa merkitty punaisella täpällä kohta jossa linkit toimivat.

 

[Tup3x]

Oletko harkinnut koko homman tekemistä uudelleen puhtaalta pöydältä? Todennäköisesti olisi nopeampaa...

Suoraan sanoen tuossa on tehty niin ihmeellisiä ratkaisuja, että aikamoista mielikuvitusta on saanut käyttää (toiminnallisuuden ja CSS tyylien osalta).

Kannattaa tutustua Bootstrapiin jos responsiivisen leiskan tekeminen tuottaa hankaluuksia. Tässä tapauksessa ihan perus Bootstrapin komponenttien käyttö olisi ratkaissut jo monta ongelmaa (navit ym.). Siinä tulisi jo lähes automaagisesti toteutettua jutu parhaitten käytäntöjen mukaan (tai vähintäänkin sinne päin).

 

[Tapio X]

Kyllä harkitsin uudestaan tekemistä, mutta mistä olisi löytänyt sopivimman leiskan? Kävin viimeksi leiskan CSS:n systemmaattisesti läpi ja poistin siitä useita @media XXX{} kokonaan. Poistin niin paljon alkuperäistä CSS:ää ja korvasin omallani, että melkein rakensin uusiksi.

Oletko huomannut, että tuon navin linkit toimivat vain muutaman pikselin korkealla alueella? Jos yhtään ylempänä, tai alempana on hiiri, niin linkit ei toimi.

En ole huomannut. Kyse on sitten z-index-ongelmasta. Siirsin tuon navin rakenteessa eri paikkaan. Inhottavimpia ovat z-index-ongelmat, kun ne eivät näy kuin tominnallisuusvikoina. Tuosta pääsee varmasti eroon sillä, että siirtää muualle. Alun perin oli sisältöalueelle, mutta sijoittui otsikon alle mobiililaitteissa eli paikka ei ollut se, mitä halusin.

Testasin äsken tietokoneella. Linkit toimivat ok. Tuo Foorumi, Blogi jne oli vahingossa näkyvissä myös yli 783px alueella tietokoneella. Poistin näkyvistä. Se taisi aiheuttaa ongelman, koska sen z-index oli korkeampi kuin ns. leivänmurujen.

Ihan vaan tiedoksi, että kännykkäversion yläreunan kiinteät linkit on 48px irti otsakekuvasta z-index-ongelman vuoksi. Kyse on visuaalisesta ongelmasta, jota en ole toistaiseksi pystynyt ratkaisemaan. Laitoin vain esille, että ongelma on tiedossani.

Perussisällön leveyksissä ei ole mitään löysää. Eryisesti 783-820px asettelu on erittäin tiukka, mutta toimiva.

Toivon palautetta 750px viewport-arvona mitatusta tekstin maksimileveydestä (suurin piirtein sama kuin sanaristikot.fi). Minusta teksti saisi olla kapeampi (650px luokkaa), mutta kun on erilaisia mielipiteitä, kysyn nyt tässä asiassa muuiden näkökulmi.

 

[Ascend]

Ainakin äsken OnePlus 7 prolla kokeiltuna sivusto oli edelleen aika karmea käyttökokemus. Esim. scrollaaminen ei toiminut kunnolla? Tökkii ihmeellisesti, ja kun koittaa vaihtaa skrollauksen suuntaa, niin skrollaus pysähtyy, ja skrollaus pitää aloittaa uudestaan.

Ilmeisesti sivuston ylläpitäjä ei pidä skrollauksesta, yritetäänkö tässä nyt tehdä siitäkin niin vaivalloista, ettei muutkaan pian halua sitä tuolla sivustolla harrastaa?

 

[Tapio X]

Srollausta ei ole pyritty vaikeuttamaan, mutta palvelin voi tökkiä. Sille en voi mitään.

Kuten toin aiemmin esille ainakaan kuvakaappauksen perusteella OnePlus ei ollut se, mikä on tarkoitus olla. Mutta kun en tiedä laitteen tunnistetietoja, en voi asialle mitään.

Sinänsä on aika outo asia, että OnePlus käyttäytyy aivan eri lailla kuin Samsung Galaxy -puhelimet. Samsungin pyrkivät antaamaan 720x360px viewport-arvon mukaisen sivun.

OnePlus pyrkii antamaan kännykälle HD-tablet-laitteen tyylisen sivun (viewport 600 x 960px). Mutta näennä en osaa määrittää laitteen tunnistetietoja niin, että em. laite saisi sille kuuluvan HD-version.

Kuten olen kertonut, tarkoitus on, että näet sivut tämän kaltaisena:
Aihe: Sivuston mobiiliversio – Mobile version of this site | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Ei ihan, sillä olen vähän muuttanut marginaaleja, mutta kuitenkin tuon tapaisena. Mutta ymmärtääkseni et näe sivuja tuon tapaisena.

Tai sitten sen viewport-arvo on ihan eri kuin OnePlus 3:n, jossa on 480 x 853px. En vaan pysty tukemaan laitetta, jonka tietoja en tiedä tarkasti.

Tarkoitus on muuttaa 1280x800px tablet-laitteen ulkoasua. Toivottavati osuu silloin OnePlus-laitteesi alueeseen. Tuossa laitteessa on pari ongelmaa.

 

[Ascend]

Testasin myös Samsungin A6-luurilla. Ihan samalla tavalla pykii skrollaus silläkin.

Ja eihän se nyt mistään palvelimesta ole kiinni, jos skrollaus tökkii. Kun se staattinen sivu on siihen kerran ladattu, niin ei se skrollatessa sieltä palvelimelta enää mitään kysele.

 

[Tapio X]

Sitten en keksi syytä.

Mutta huomannet, että ulkoausu on aivan erilainen Samsungin luurilla. Tuttavani 500 € Samsung näyttää sivut melkein samoin kuin vaimon J5, vaikka näytön tarkkuus on aivan eri. Skaalaustapa Samsungilla on ihan erilainen.

Rullailin HD-tabletillani ylös/alas enkä kohdannut mitään ongelmaa. En kohdannut ongelmia myöskään 1280x800-tablet-laitteessa (vaakasuuntaan layout olisi kyllä hyvä muuttaa, mutta pystysuunta toimi).

Toki skrollaus pitää pysäyttää ennen kuin vaihtaa suuntaa. Itse en kokenut ongelmaksi. Jos tarkoitat sitä, en voi asialle yhtään mitään. Johtunee aika suuresta määrästä tavaraa.

Mutta skrollausta ei tarvitse tehdä lainkaan perustoimintojen löytämiseksi. Eikö siitä ole mitään iloa sinulle? Sinun ei tarvitse skrollata muusta syystä kuin sivulla olevan sisällön takia. Päämääränä on jokaisessa tilanteessa minulla juuri tämä. Kaikki muu skrollaus on turhaa ja johtuu vain huonosta suunnittelusta.

 

[null]

Ainakin äsken OnePlus 7 prolla kokeiltuna sivusto oli edelleen aika karmea käyttökokemus. Esim. scrollaaminen ei toiminut kunnolla? Tökkii ihmeellisesti, ja kun koittaa vaihtaa skrollauksen suuntaa, niin skrollaus pysähtyy, ja skrollaus pitää aloittaa uudestaan.

Ilmeisesti sivuston ylläpitäjä ei pidä skrollauksesta, yritetäänkö tässä nyt tehdä siitäkin niin vaivalloista, ettei muutkaan pian halua sitä tuolla sivustolla harrastaa?

Jotain saman suuntaista tuli esille kun kokeilin, aika erikoinen kokemus kaikkineen. Ei tarvi toistamiseen vierailla.

En käsitä miksi tuollaista ryönää kannattaa edes parsia kasaan, aloittaa alusta koko homman.

 

[Tapio X]

Tablet vaakasuunnassa skrollaus toimii miellyttävämmin. Pystysuunnassa rullauksen suunnan vaihto kieltämättä hieman tökkii.

Mutta "null" ei näemmä arvosta lainkaan sitä, mitä tein tarpeettoman rullauksen estämiseksi. Ehkä selaimen täytyy suorittaa tavanomaista enemmän laskutoimituksia. Näemmä kaikella on hintansa.

Et löydä mistään muualta sivustoa, jossa sivuston perustoiminnot olisivat esillä yhtä helposti saatavilla. Mutta näemmä sillä ei ole joillekin mitään arvoa, jos jokin muu asia ei toimi optimaalisesti.

Näemmä www-suunnittelu epäonnistuu aina. Jos joku väittää jotain sivustoa täysin onnistuneena, kyse on minusta itsepetoksesta.

 

[apek]

Toki skrollaus pitää pysäyttää ennen kuin vaihtaa suuntaa. Itse en kokenut ongelmaksi. Jos tarkoitat sitä, en voi asialle yhtään mitään. Johtunee aika suuresta määrästä tavaraa.

Ei johdu sivun tavaran määrästä vaan huonosta koodista. Olet rikkonut scrollauksen jonka takia sivu pysähtyy ja vasta sitten alkaa toiseen suuntaan scollaamaan. Minusta se on aika isokin ongelma ja syö käytettävyyttä paljon.

 

[Tapio X]

Ei harmaata ajatatusta, mistä voisi johtua. Vaakanäytössä ongelmaa ei ole ainakaan HD-testilaitteessani. Rullaus ei töki lainkaan. Siinä on yhtä monta kiinteää elementtiä kuin pystynäytössäkin. Taisi tulla onnistunein mobiiliversio, vaikka oli välillä ongelmatapaus.

1280x800 myös pystynäyttö rullautuu hyvin, mutta siinä sivupaneeli on sivulla.

Vaakanäytön ja pystynäytön rakenteellinen ero on siinä, että vaakanäytössä oikean sivupaneelin linkit ovat sisällön perässä, mikä on ihan normaali käytäntö mobiiliversiossa.

Kokeilin oletuksena piilottaa alaosan linkit ja laitoin:

Näytä/piilota haku XXXsivuilta, tuoreimmat aiheet ja viimeisimmät vastaukset

Ei se tuonut muutosta. Toisaalta pakkoko sivua on vierittää pitemmälle kuin sisällön loppun? Sivulla on nyt todella vain olennainen. Vähempää ei suoraan esillä juuri voi olla.

Harmi, jos pieni tökkiminen koetaan kovin pahana asiana. Yritän siivota koodia, jos se auttaisi. Minulla on väliaikaista koodia, jota pitäisi siivota ja järjestellä. Jos ei se auta, sitten ei ja tuo jää jonkin tason toimintaongelmaksi.

Jouduin laittamaan footer-osion, koska ylös/alas-linkit täytyi laittaa jonnekin eikä niitä sivupalkissa voinut pitää eivätkä toimineet sivun yläosasta z-index syistä. Footeriin laitoin lisäksi some-kirjautumiset. Footer on tarkoitus pitää varsin minimalistisena.

 

[nnaku]

Ei harmaata ajatatusta, mistä voisi johtua. Vaakanäytössä ongelmaa ei ole ainakaan HD-testilaitteessani. Rullaus ei töki lainkaan. Siinä on yhtä monta kiinteää elementtiä kuin pystynäytössäkin. Taisi tulla onnistunein mobiiliversio, vaikka oli välillä ongelmatapaus.

Ei ne elementit sitä srcollausta riko . Vaan tuo sinun css sillisalaatti. Muutamat edelliset viestit lukemalla saa jo aikahyvän kuvan mistä ongelmaa kannaattaa etsiä.

Spoileri

1. pari puhelinta = ei toimi
2. Vaakanäytössä ongelmaa ei ole ainakaan HD-testilaitteessani.
3. 1280x800 myös pystynäyttö rullautuu hyvin..

Olisko aika tarkastaa media-queryt jotka puuttu peliin alle 800 w näytöissä?

Spoileri

overflow-y: auto;
Tämä kääntyy sinun tapauksessasi scrolliksi. Jolloin kun sivun alusta yrittää scrollata, ensin rullataan body niin että #page saadaan sen yläosaan. Ja vasta toisella scrollauksella päästää itse #page rullaamiseen.

@media screen and (min-width: 482px) and (max-width:782px) {
    body {
        overflow-x;
        hidden;
        overflow-y: auto; <------ TÄÄLLÄ
        max-width: 782px;
    }

    nav.post-navigation {
        margin-left: 34px;
        margin-right: 34px;
        padding-left: 0;
        padding-right: 0
    }

    footer.entry-meta {
        margin-left: 34px!important;
        padding-left: 0!important
    }

    #page #content-sidebar {
        min-width: calc(100%-68px);
        width: auto!important;
        margin-left: 34px!important;
        margin-right: 34px!important;
        padding-left: 0!important;
        padding-right: 0!important
    }

    #page #content-sidebar aside {
        margin-left: 0!important;
        margin-right: 0!important
    }
}

17 css määritystä ja 9 !importanttia yhdessä media-query blockissa

 

[Tapio X]

Tiedän, että CSS:ssä osa on sillisalaattia syystä, että osa siitä on testivaiheessa. Eniten testiä vaativat osat olen laittanut tiedoston loppuun tai ihan alkuun. Päämääränä on laittaa se järjestykseen ja siivota turhaa pois.

Siivoamista olen kyllä tehnyt poistamalla paljon teeman mukana tarpeetonta ja foorumikäyttöön ongelmallista CSS:ää. Omat lisäni olen vain osittain siivonnut.

Sillisalaatti kyllä kuvastaa vähän luonnettani. Tulee laitettua jokin tarve-esinne vähän minne sattuu ja sitä sitten joutuu etsimään.

Sillisalaatti ei kuitenkaan ollut ongelman syy, mutta keksin, mistä ongelma johtuu.

WordPressissä erittäin ärsyttävänä ja hankaloittavana asiana on se, että kun kirjautuu sisään, WordPress muuttaa CSS:ää. Siitä seuraa se, että on aika ikävästi pakko laittaa

body.logged-in XXX {...}

Muutos on alle 783px korkeudessa todella harmillinen. Yrin muuttaa sekä ei-kirjautuneiden käyttäjien että kirjautuneiden käyttäjien määrittelyjä, mistä sitten johtui tuo tökkiminen. Poistin kirjautumattomilta erityismäärittelyt.

Kirjautuneille ongelma on siinä, että leiskan JavaScript muuttaa CSS-käytöstä siten, että ylös jää 38 px tyhjää, vaikka CSS:ssä HTML sekä padding että margin ovat 0. Sitten kaiken maailman vippaskonteilla yritin pakottaa sisällön ylöspäin.

Kun poistin kikkailut tökkimisongelma hävisi, mutta jäljelle jäi ikävän näköinen tyhjä alue sivun alkuun kirjautuneille käyttäjille. Siinä oli hallintapalkki, mutta halusin sen oletuksen piiloon ja vain linkistä avautuvaksi. En ymmärrä, miten ihmeessä leiskan JavaScript ja CSS pakottavat HTML-elementin yläosaan tyhjää, jota ei omalla CSS:llä saa pois.

Laitoin ehdollisen PHP-skriptin, jolla luon spesiaalimäärityksen. Pakotan siinä body-elementtiä vähän ylemmäksi.

Kiitos hirveästi siitä, että tähän ongelmaan piti paneutua kunnolla. Kokeilin pitkässä säikeessä HD-tablet-laitteellani eikä tökkimistä siinäkään enää ilmennyt.

HD-tabletilla on muuten kunnossa paitsi sivun
Foorumit | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa vasemman ja oikean reunan marginaalien osalta. Sama ongelma vähän ikävämmän näköisenä J5:ssä. Tuon sivun layout pitää jossakin vaiheessa saada kuntoon, mutta jätän tuonnemmaksi. Harmittaa ihan *piip* kun on olennainen sivu, enkä keksi, miksi juuri se sivu näkyy eri lailla kuin muut foorumin sivut.

Ongelma esiintyy vain alle 783 viewport-arvoilla. Tällaisten ongelmien jäljittäminen on *piip* hankalaa.

Tein jonkinlaisen 1281+ -version. Meni suoraan sanonen ihan pieleen. En saanut kaikkia asemoitua keskellä olevaan 1280-alueeseen, joten piti jättää oikeaan reunaan (haku, apuvalikko ja kirjautuminen).

Oli niin totaalisen epäonnistunut yritys, että piti vaihtaa vasempaan reunaan asemoituvaan versioon. Koska vasemmalla ei ole enää sinistä, poistin sen oikealtakin. Näyttää ihan ok:lta n. 1600px leveyteen asti. Siitä ylöspäin oikealla on kyllä tyhjää valkoista riittämiin.

Jotta ylös/alanuolista on hyötyä kiinteinä ne pitää jättää oikeaan alareunaan. Vaatisi jonkilaista JavaScriptiä, että ne voisi pitää pääsisältöalueen oikeassa alalaidassa. Se pitäisi kaivaa jostakin netistä, kun en suoralta kädeltä osaa niin tehdä.

Ongelma on se, että minkään muun alueen sijoittuminen ei saisi koskea nyt oikeaan reunaan laittamiani kohtia. Nyt on määrittelylle haitallista koodia. Olemassa olevaa CSS:ää pitäisi määritellä ensin niin, että se ei koske 1280+ aluetta. Se on kyllä nyt todellinen murheen kryyni.

Laitoin nyt vain kuntoon vasemmalle 1281+ asemoituvan sisällön. 1281+ -alueella saa nyt sietää pelkkää valkeaa tyhjyyttä.

Isot pöytäkoneet ovat lähinnä vain suunnittelijoilla eikä sivuja tehdä suunnittelijoita varten. Taviksilla on korkeintaan läppärit ja tavanomaisilla läppäreillä 1281+ -tietokoneversio toimii vallan hyvin. Kyllä 128+ taviksille riittää.

 

[null]

Isot pöytäkoneet ovat lähinnä vain suunnittelijoilla eikä sivuja tehdä suunnittelijoita varten. Taviksilla on korkeintaan läppärit ja tavanomaisilla läppäreillä 1281+ -tietokoneversio toimii vallan hyvin. Kyllä 128+ taviksille riittää.

Nyt on kyllä totaalisen väärä lähestymistapa. Koita nyt edes keskittää tuo sisältö leveämmillä laitteilla.

 

[Tapio X]

Yritin, mutta eräät asemoinnit menivät kyllä hyvin pahasti pieleen. Osan asemoinneista sain onnistumaan, mutta kokonaisuus ei vaan toiminut. Laitan todo-listalle.

Siteeraamani kommentti oli turhautumistani totaalisen epäonnistuneeseen keskittämisyritykseen. Oli niin kamalan huono lopputulos, että sitä ei voinut pitää esillä.

 

[Tapio X]

Tein seuraavaksi puolikeskitetyn version, jossa

1. Taustakuvallinen otsakealue on keskellä; siinä on
   1. Sivuston otsikko
   2. Päänavigaatio
   3. Ns. leivänmurut
   4. Pääsisältö

Eritystoimintoja en kaikkia onnistunut sijoittamaan keskelle, joten seuraavat on asemoitu aluksi oikealle:

1. Kirjautuminen
2. Haku
3. Toimintovalikko ja sen apuvalikot

Ylös/alasnuolet minun onkin jätettävä oikeaan alareunaan, mutta muut on tarkoitus laittaa keskialueelle. Muut keskelle tarkoitetut elementit onnistuin asemoimaan paitsi haut. Kerran onnistuin jo toisen haun saamaan keskelle, mutten toista. Toistaiseksi siis haut ovat oikeassa yläkulmassa.

Yläreunan taustakuva ei ole yhtenäinen, sillä se on leikattu väärin, jotta voisi kulkea tapettimaisesti. Sen voisi leikata niin, että jatkuisi tapettimaisesti ja olisi koko leveyden mittainen. Mutta katkaistuna mielestäni toimii liittäen sen pääsisältöön.

 

[Nightuser]

Teksti häviää kivasti palkin alle, mutta profiililaatikko menee palkin päältä.

 

[living_death]

Kyllä se vaan näyttäisi paremmalta koko ruudussa.

Fixailin leiskaa huvikseni Firefoxin lisäosan avulla.

 

[Tapio X]

Teksti häviää kivasti palkin alle, mutta profiililaatikko menee palkin päältä.

Huomasin - z-index-ongelma. Koska elementti on kelluva, siinä on oltava z-index, jotta BLOCKQUOTE ei mene päälle. z-index vuoksi sitten tulee kuvailemasi ongelma.

Blockquote käyttäytyy kelluvan elementin kanssa oudosti. Haluan pitää laatikon kelluvana, että tekstille olisi maksimaalinen tila, koska minulla on palkki oikeassa reunassa. Ei ole varaa kahteen kavennukseen. Asiasta seuraa tiettyjä ulkonäköongelmia, mutta se on pienempi paha kuin turhan kapea tekstialue n. 800px leveyksillä. Huomasin, että tätä z-index-ongelmaa ei ole alle 1280-leveyksillä.

Jos muuttaa jonkun elementin z-index-arvoa se voi olla väärin toisessa tilanteessa. Harmittaa tämä ongelma, mutta se on mielestäni varsin pieni. Sain mielestäni isolle tietokonenäytölle sivut muuten toimimaan varsin tyydyttävästi.

Kyllä se vaan näyttäisi paremmalta koko ruudussa.

Harkitaan. Näemmä leikkasit tuota isoa kuvaa. Mitä käytit. Tiettyjä kiinteitä linkkejä ei mielestäni kannata laittaa leveälle näytölle, koska samat linkit on päävalikossa. Tarkoitin ne vain mobiiliversioon, jotta perussivujen takia ei tarvitse avata valikkoa.

Linkki SIVUKARTTA käyttää jQueryä.

Muutit vähän palkkien värejä - väriehdotuksia voi antaa, sillä en ole mitenkään erityisen hyvä värimäärittelyjen suhteen.

En meinannut saada keskitystä toimimaan. Piti kokeilla yhtä sun toista. Lopulta lisäsin vähän elementtikerroksia header.php:hen ja sain suurella vaivalla toimimaan. Tosin pieleen meni taas - tuli z-index-ongelmia ja piti uusin versio ottaa pois käytöstä.

Yläpalkin tausta voisi olla yhtenäinen taustakuvan korjauksen jälkeen. Saumaa ei kuitenkaan äkkiseltään erota.

Laitoin lopulta eräänlaisen hybridin. Nightuserilta on yhtenäinen yläpalkki, mutta sisältö on keskitetty. Kritiikkiä saa esittää. Tämä on vain yksi vaihtoehto, mutta hiivatisti harmittaa, kun en saa isoa näyttöä täysin hallintaani. Parempaa ratkaisua en tällä hetkellä osaa tehdä, koska vähän joka ratkaisussa on ongelmia. Tämä ei mennyt kuin Strömsössä vaan ratkaisu pikemminkin kehkeytyi yritysten ja erehdysten kautta. Minusta lopputulosa esim. 900x1600 näytöllä on ok ja pitäisi olla varsin ok ainakin jonkin verran leveämmälläkin näytöllä.

Kiitos kritiikistä, sillä ilman sitä en olisi viitsinyt edes yrittää keskittämistä leveällä näytöllä, koska tiesin sen olevan ongelmallista.

Poistin alkuperäisen haun, koska se palautti aina sivun alkuun. Siinä oli luokkaa käyttävää JavaScriptiä, joka on määritelty teemassa. Se piti saada pois käytöstä. Etuna myös, että sama CSS haulle kaikkialla.

Ärsyttävin sivu on foorumien aloitussivu mobiiliversiossa. Sitä en osaa korjata.

Toiminnallisuudet eroavat hieman tietokone- ja mobiiliversiossa. Toimintovalikko avautuu tietokoneversiossa ilman klikkausta (vanhanaikaisesti onmouseover koska valikko ei ole saman elementin sisällä kuin sen avaaja - voisihan tuon jQuerynäkin laittaa, mutta toimii vähän vanhanaikaisestikin). Sulkeutuu automaattisesti kun siirrytään sisältöalueelle (siinäkin vanhanaikainen toteutus).

Ihan vaan tiedoksi, että ymmärrän kyllä jQueryn idean. Idea on sama kuin CSS:n luokkien käytössä eli komentoa ei tarvitse laittaa itse elementtiin. Vanhanaikainen onmouse... vastaa CSS:ssä style-attribuutin käyttämistä. Päävalikkoon ei voi laittaa onclick tms. vaan on pakko käyttää jQueryä.

Linkki SIVUKARTTA käyttää jQueryä ja se sulkee avoimen toimintavalikon. Näin toimintovalikko käyttäytyy tietokoneella pudotusvalikon tavoin, mutta mobiilissa vaatii aina näpäytyksen.
https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/levea-naytto.jpg

Leiskaan jäi n. 150px turhaa leveyttä, mutta kaventamaan en ala, koska nykyisten muutosten kassakin oli tekemistä.

 

[Korvatti]

Kun yrittää scrollaa johki suuntaan ni joko kokoajan joku hiton valikko auki tai sit vahingos klikkaan itteni ylös tai alas.

Vaakana käyttökelvoton, yritä ny tihrustaa pikkulootaa. Ei ole oikea kätiselle tehty tämä. Puhelimena on s9+

Spoileri

Spoileri

 

[Tapio X]

Mobiililaitteella kaikki toiminnot vaativat aina näpäytyksen. On tälläkin sivustolla esillä se ylös/alasnuoli kännykässä. Sen suhteen sama ongelma on periaatteessa tälläkin sivustolla. Sen suhteen saisit valittaa tästäkin sivustosta.

Toivoisit varmaan sen ylös/alasnuolen pois täältäkin? Varmasti haluaisit ne pois mm. Matkapuhelinfoorumilta? Miksi vain minun sivustollani linkit tuntuvat ärsyttävän?

Suurimmalla osalla foorumisivustoista ivun alaosassa on ne edellisen kommentin kirjoittajaa ärsyttävät nuolilinkit.

Kun lisäsin sivun alaosaan kolmannen linkin, se tuntuu sitten joitakin ärsyttävät kummastuttavan paljon.

Jos käyttää yhdellä kädellä ei ainakaan sivun yläosan haku tai päävalikko pitäisi olla vahingossa painettavissa.

Jos sijainti tai koko ei ole optimaalinen, voi ehdottaa omasta mielestään parempaa kokoa tai paikkaa.

Suomi24 olisi ehkä ihanteesi? Siinä ylösnuoli on ihan lopussa. Siellä saa ilman häiriötekijöitä rullata sivua ylös alas.

En oikein ymmärrä tätä kritiikkiä En minä vaimon puhelimella oikean reunan toimintoja koskaan vahingossa auki saanut. Aina ihan tarkoituksella.

pikkuloota

Mitä tarkoitat tuolla? Toimintopainikkeita. Laitoin toimintopainikkeet pieniksi, ettei niistä aiheutuisi kenellekään kiusaa. Laitoin korkeutta, jotta olisivat käytettäviä.

Jos haluan pitää tietyt perustoiminnon aina käytettävissä, näemmä sekään ei kelpaa.

Kännykän käyttäjille tuntuu kelpaavan vain loputon rullaaminen ylös alas toimintoja etsien. Onko todella niin, että ylösalasrullaus on niin kivaa että sitä ei millään asialla saa häiritä? Onko tosiaan parempi vaihto maksimaalinen rullaustarve kuin toimintojen löytyminen helposti?

Ihan *piip* vaikeaa kun mikään ei kelpaa. Itse suuresti vihaisin käyttöliittymää, josta sinä pidät - siis kaikki haettava rullaamalla sivua edes takaisin.

Itse arvostan sitä, että toiminnot löytyvät helposti. Jos haluat luoda uuden säikeen, arvostat sitä, että saat rullata itsesi sivun alkuun. Sitä, että uuden säikeen luominen käy helposti milloin tahansa, ei sitten sinulle ole mitään arvoa?

Tietokoneella tälläinen sivusto on ihan *piip* syystä, että hiirellä rullailu on paljon ikävämpää kuin kännykässä. Sivustoni toimii tietokoneella varsin paljon miellyttävämmin - toimintovalikosta löytyy kaikki olennainen.

Tietenkin voisin laittaa valikot mobiilissa vain ylös alas ja koko ajan sitten pitää rullatata edes takaisin, mutta kuinka moni siitäkään pitäisi?

Onko rullauksesta pitävät enemmistö kännykän käyttäjissä? Onko todella niin, että toimintojen nopea käytettävyys on asia, jolla ei ole arvoa kännykän käyttäjille ,jos siitä on pienikin satunnainen haitta rullaukselle?

Teet ihan miten tahansa aina jonkun mielestä suunnittelu on pielessä.

En missään nimessä haluaisi sivujani vain rullauksen ehdoilla toimiviksi, koska sitten toiminnot pitää hakea rullaamalla joko ylhäältä tai alhaalta. Jos rullaus priorisoidaan, käytettävyys laskee muissa suhteissa aivan dramaattisesti.

Totuus on se, että käytettävyys on aina foorumisivustoilla enemmän tai vähemmän jonkun mielestä pielessä. Yritin tosissaan luoda toiminnot niin, että niitä olisi kivempi käyttää kuin esim. tällä sivustolla.

Mutta edellinen kommentti kyllä turhautti - on mahdoton luoda helppokäyttöistä käyttöliittymää - sitä ei saisi oikeastaan olla ollenkaan.

Että alan vihata www-suunnittelua. Tässä kun ei voi kuin epäonnistua. Kaikki sivustot ovat siten enemmän tai vähemmän pielessä. Tuntuu, että kännykkä pilasi mahdollisuuden järkevään www-suunnitteluun.

Meniköhän www-suunnittelu lopullisesti päin *piip*?

Jos sivusuunnittelu tehdään nimimerkin KO ehdoilla ts. sivuilla ei ole edes ylös/alasnuolia vaan sivu on keskialueella pelkkää sisältöä, menetetään sivullani mm. seuraavat asiat:

1. Haun nopea saatavuus
2. Päävalikon nopea saatavuus
3. Nopea paluu aihealueen listaukseen
4. Nopea mahdollisuus luoda uusi aihe
5. Nopea mahdollisuus tärkeimpien ohjeiden käyttöön
6. Nopea siirtyminen sivun alkuun ja loppuun
7. Nopea pääsy palutteen antamiseen
8. Nopea pääsy sääntölinkkiin
9. Nopea pääsy tietoturvalinkkiin
   
10. Nopea pääsy kirjautumaan (kirjautumisessa on aikaraja ja se tulee silloin tällöin uusia)

Yleisesti ottaen kaikki sivuston ydintoimminnot ovat minulla kolmessa painikkeessa ja tällä sivustolla niihin pääsee ylös/alaspainikkeilla.

Kun ainoaksi käytettävyystekijäksi otetaan sivun rullautuvuus ja kaikki painikkeet sivulta poistetaan, on todella mahdotonta luoda kokonaisuutena ottaen hyvää käytettävyyttä. Jos nuoret ottavat rullautuvuuden ykkösasiaksi, se merkitsee pysyvästi huonoa www-suunnittelua!

Onhan se kiva mobiililaitteilla rullailla, mutta jos siitä muodostuu itsetarkoitus, asia on ikävä.

 

[Korvatti]

Punaisella merkattu alue ainoa mikä menee ylös alas, ja avautuu postaukset. Kaikki tuo yläroina pysyy paikoillaan ja peittää isomman alueen näytöltä mistä edes pystyn lukemaan tuota.

Spoileri

 

[Korvatti]

,

 

[Korvatti]

Mobiililaitteella kaikki toiminnot vaativat aina näpäytyksen. On tälläkin sivustolla esillä se ylös/alasnuoli kännykässä. Sen suhteen sama ongelma on periaatteessa tälläkin sivustolla. Sen suhteen saisit valittaa tästäkin sivustosta.

Nytkun sanoit asiasta ni vasta huomasin että täällä on, kivasti menee täällä piiloon kun vähän raahaa sormea ylös.

Kun missään ei saisi olla kiinteitä valikoita ja ylös/alasnuolia - tälläkään sivustolla niitä ei saisi olla . Se olisi kaiketi ihanteesi?

Nuolet ei niinkään häirinnyt vaan se et joku valikko pomppaa ruudulle ku yrittää raahaa sivua ylös.

Suomi24 olisi ehkä ihanteesi? Siinä ylösnuoli on ihan lopussa. Siellä saa ilman häiriötekijöitä rullata sivua ylös alas.

Jopa suomi24 on paremmin optimoitu kännykälle kuin tämä.

Ihan liikaa turhaa sontaa ruudulla kun MOBIILILLA tuolla yrittää jotain selata. Jos tietokoneella parempi niin hyvä niin.

Eikä mun tarvi scrollata jatkuvasti kunhan painan kerran ruutua ja olen takaisin ylhäällä.

Totuus on se, että käytettävyys on aina foorumisivustoilla enemmän tai vähemmän jonkun mielestä pielessä. Yritin tosissaan luoda toiminnot niin, että niitä olisi kivempi käyttää kuin esim. tällä sivustolla.

Omasta mielestä tämän foorumin moobili käytettävyys yksi parhaimmista mitä olen käyttänyt. Toki täälläkin omat negansa mutta muuten todella hyvin optimoitu mobiilille.

 

[apek]

Teksti menee päälle.


Tämäkin menee päälle hassusti.


Näyttää vähän tyhmältä, kun on noin paljon tyhjää tilaa vasemmalla puolella?

 

[Tapio X]

Ison näytön päälle meno on z-index ongelmia. Jos muuttaa yhdelle asialle z-index-arvon oikeaksi, se voi olla toiselle väärin. Ongelmia ei aina saa tyydyttävästi ratkottua.

Sijoitin leivänmurujen kopion header-osioon ja määritin CSS:n sinne uusiksi. Mutta sitten piti siirtää myös toimintovalikko head-osaan, että sen kanssa ei tule z-index-ongelmaa.

Toimii, mutta samaa koodia on nyt useammassa paikassa. Tosin koodimäärä on suhteellisen pieni. Täytyy tutkia joskus, saisiko tuplat pois ilman z-index-ongelmia.

Otsikossa oli position ja z-index. Poistin, jolloin otsikon päälle meno hävisi. Se z-index-ongelma on siten selvitetty.

Sivustolla voi olla vielä z-index-ongelmia. Niiden ratkonta on todella joskus hankalaa.

Liikaa CSS-koodia - toiminnot pätkivät taas. CSS:ää pitäisi taas siivota.

Ihmettelen, miksi näkyy nelilinkkinen apuvalikko. Sen ei pitäisi näkyä kuin tietyissä tilanteissa keskileveässä mobiiliversiossa ja kavennetulla näytöllä tietokoneella. Ehkä selaintunnistuksessani on puutteita.

Koin itsekin tyhjän tilan hieman ongelmalliseksi. Tyhjä tila vasemmalla on siksi, että tekstiä ei ole miellyttävää lukea leveämpänä kuin se nyt on. Tyhjä tila jäi, koska vasemmalla ei ole alkuperäistä kolmatta palstaa lainkaan. Leiskaa pitäisi kaventaa, mutta siihen en nyt ryhdy.

Laitoin harmaan osittaisen taustakuvan, joka jättää 34px marginaalin foorumiosiolla. Toinen vaihtoehto olisi leventää tekstialuetta, mutta kaventaa tekstin leveyttä padding-arvolla. Tällöin avatar-laatikko jäisi ikään kuin omaan palstaansa.

En nyt koe tuota tyhjää aluetta suurena ongelmana, joten sen mahdollinen muuttaminen ei ole korkean prioriteetin asia.

Nytkun sanoit asiasta ni vasta huomasin että täällä on, kivasti menee täällä piiloon kun vähän raahaa sormea ylös....

Nuolet ei niinkään häirinnyt vaan se et joku valikko pomppaa ruudulle ku yrittää raahaa sivua ylös.

Toimintovalikon ei mobiilissa pitäisi pompata vahingossa. Tietokonenäytöllä kyllä, sillä se on tietokoneella tarkoitus avautua ilman klikkausta.

Vasemmalla on valikko, jonka kaltainen valikko on tällä sivustolla ylhäällä. Sen nimittäminen sonnaksi tuntuu kohtuuttomalta, sillä siitä löytyy kaikki sivuston ydintoiminnot. Ei tarvitse miettiä, pitääkö jotain asiaa etsiä ylhäältä vai alhaalta. Toimintojen etsimistä ei ole.

Jos luet toimintolistaa, siinä on mukana säännöllisesti tarvittavia hyödyllisiä toimintoja. Jos haluat uuden aiheen, ei sinun tarvitse mennä sivun yläreunaan etsimään painiketta jolla luot uuden säikeen. Jos haluat katsoa aihelistaa, ei sinun tarvitse mennä sivun yläreunaan etsimään linkkiä aihelistaukseen.

Kun tarkastelet yksittäistä säiettä, silloin milloin tahansa käytettävissä tärkeimmät toiminnot: https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/yksittainen-aihe-erikoislinkit.png

Pitäisi sen olla paljon kätevämpää kuin hakea niitä sivun yläosasta.

Idea on siinä, että kaikki, mitä käyttäjä kulloinkin tarvitsee, löytyy etsimättä ja turhia siirtymättä.

Jos sivulla ei saa olla mitään apuvalikkoe kiinteänä, sivuilla tulee paljon turhaa siityilyä paikasta toiseen ja toimintojen turhaa hakemista.

Minusta suunnittelun tulisi lähtökohtaisesti aina olla sitä, että käyttäjää ei turhaan pompotella!

Ihan oikeasti suunnittelu tulisi lähteä siitä, missä tilanteessa selaaja kulloinkin on ja miten häntä tulisi parhaalla mahdollisella tavalla huomioida.

Tällä sivustolla idea ei ihan toimisi, sillä täällä on hälytys uusista aiheista - ei ole ideaa, mikä sille olisi paras paikka.

Se on vähän lähellä nuolia. Muutin asemoitia. Laitoin 65% ylälaidasta, jolloin peukalon ei pitäisi rullatessa vahingossa osua nappiin, mutta nappi olisi silti peukalon ulottuvissa.

Mielestäni ainakaan yläosan haku ja päävalikko eivät helposti rullatessa osu sormiin ja haittaa rullausta.

Minusta ylikorostat rullausta. Sen ylikorostuksen seurauksena www-suunnittelua ei voi koskaan tehdä järkevästi - aina on pakko tehdä täysin turhia siirtymiä ja aivan turhaa toimintojen etsimistä joko ylhäältä tai alhaalta. Jos arvaa väärin pitää palata toiseen reunaan. Maksimaalinen rullauksen korostus merktisee maksimaalista pompottelua. Minun on vaikea ymmärtää, miksi selaajat sietävät heidän tarpeetonta pompotteluaan eikä juuri kukaan edes yritä pahemmin miettiä, millä sitä voisi välttää.

Mitä tämän sivuston nuoliin tulee, ongelma on se, että ovat liian huomaamattomia. Käytin pitkään sivustoa huomaamatta niitä lainakaan. Huomaamattomuus menee täällä liiallisuuksiin. Mitä ideaa on nuolilla, joita käyttäjä ei edes huomaa olevan olemassa? Eihän se ole hyvää käytettävyyttä! Toimintoja, joita on tarkoitus käyttää ei pidä mielestäni piilottaa ihan näin paljon.

Rullauksen ylikorostus jättää sivustot pysyvästi "kivikaudelle" ts. estää kunnollisen sivustosuunnittelun.

Se, että nuolet ovat tällä sivustolla aluksi piilossa, on hoidettu JavaScript + CSS -koodauksella. Minulta puuttuu JavaScript. En osaa sitä suoralta kädeltä koodata enkä ole etsinyt netistä sille koodia. jQuery + sopivat funktiot kyllä hoitaisivat asian.

Itsellä nuolet on ehkä liian voimakkaasti esillä, mutta minusta se on parempi vaihtoehto kuin tämän sivun nuolien kohdalla - on parempi, että huomaa toiminnon olevan liiankin korostetusti olemassa kuin että se jää kokonaan huomaamatta. Ominaisuus, jota ei huomaa, on merkityksetön.

Hover-efekti ei mobiilissa toimi vaan :hover toimii suurin piirtein samoin kuin :focus. Korostus tulee jälkikäteen ja se menee pois päältä vain näpäyttämällä. Tietokoneella hover-efektinä näkyvä toiminto pitäisi mobiilissa poistaa. Itsellänikin on mobiiliversioita ajatellen turhia hover-määrittelyjä.

Mobiilissa vain :focus on käyttökelpoinen lisäefekti ja se pitäisi olla vain tilanteessa, jossa se on järkevä. Onko nuolten hover-efektin näkyminen mobiilissa täälläkään järkevää? Tosin ei niitä oikein viitsi erikseen mobiiliin ja tietokoneversioon koodata.

 

[Tapio X]

Olen vähän hankala ja kriittinen. Kiitti asiallisesta kritiikistä. Pieniä ulkonäköongelmia sivustolle jäi ja CSS:n siivousta riittää.

Inhottavin ulkonäkövirhe on foorumisivuston alkusivu, joka näkyy joissakin tilanteissa hieman väärin koskien vaakamarginaaleja. Sivun html-rakenne poikkeaa jonkin verran muiden foorumiosion sivujen rakenteesta, sillä siinä on ylimääräisenä elementtiä article. En millään saa kaikissa tilanteissa marginaaleja täysin oikeiksi, mutta tilanne on useimmissa tapauksissa melko siedettävä ilman järkyttävän pahaa ulkonäkövirhettä.

Olen pysyvästi sitä mieltä, että yleisellä tasolla www-suunnittelu on pielessä ja tulee ehkä olemaan maailman loppuun asti, koska käyttäjätilanteen kunnolla huomioivaa suunnittelua eivät eräät selajaat arvosta. Sivut haluttaneen suunnitella tällaisten käyttäjien ehdoilla.

Tosin niille, joille rullaus on primaariasia, voisi evästeillä antaa se mahdollisuus. Ne, jotka puolestaan haluavat, että sivuston perustoiminnot ovat haettavissa ilman tarpeetonta siirtyilyä, saisivat omat asetukset. Ehkä joskus tätäkin harkitsen, mutta nyt en. Jos joku ärsyyntyy tarpeettoman siirtyilyn lopettamiseen tähtäävästä suunnittelustani, menköön sivustolle, jossa hänen rullaustaan ei millään lailla häiritä. Kaikkia en pysty palvelemaan.

Asia, mikä vaikeuttaa suunnittelua on se, että :hover ei toimi mobiilissa kuten on tarkoitus. Sen avulla ei voi etukäteen kertoa mitään mistään. On toimintoja, joiden merkityksestä ei voi kertoa etukäteen. Haku, päävalikko sekä nuolet ylös ja alas ymmärretään ilman apuja. Toimintovalikko pitää kokeilla, mitä sen takaa löytyy. Kun kerran kokeilee, idea toivottavasti hahmottuu.

 

[apek]

Eihän siinä ole mitään väärää että kokeilee ja tekee jotain eri tavalla kuin valtaosa muista. Kunhan sen tekee niin, että se toimii.

Mitä tulee vieritykseen, niin itse en ole sitä koskaan kokenut ongelmaksi millään sivulla. Työpöytäkäytössä käytän hiirielettä jolloin hiiren kursorin ylösvetäminen vie sivun alkuun ja alas vetäminen loppuun. Mobiililla "viskaan" sorvella sivun rullaamaan ja se rullaa sekunnissa tai kahdessa alkuun, tai sitten käytän selaimessa (Samsung Internet) olevaa nuolta joka vie alkuun.

 

[Tapio X]

Kyllä minun sivupalkki toimii ja siinä on ihan oikeasti ideaa.
Kyse ei ole vain siitä, että että ei tarvitse vierittää ylös tai alas (eikä siirtyä jonnekin nuolilla) vaan toimintopalkkiin on koottu tilanteessa järkeviä toimintoja, joita ei tarvitse etsiä mistään. Sivustoilla on ihan liikaa etsittäviä toimintoja.

Et sinä tietokoneohjelmasta halua etsiä toimintoja kovin hajautetusti. Ydintoiminnot on kiva olla helposti käsillä.

Toimintoja voisi olla ehkä enemmänkin (linkki viimeisimpiin viesteihin jne.), mutta monella laitteella tila loppuu kesken eikä runsaasti vieritettävä apuvalikko ole mielekäs. Mobiililaitteessa esillä voi mielekkäästi olla sen verran kuin näytölle vierittämättä luontevasti mahtuu. HD-tablet-laitteella pystysuunnassa voisi olla enemmänkin toimintoja, mutta vaakasuunnassa on tilanpuutetta.

Kun on keskemmällä, ei ole niin peukalovierityksen kohteena. Yritin sijoittaa optimaalisesti.

Ota myös huomioon, että eivät kaikki ole yhtä hyviä vierittäjiä, eivät varsinkaan vanhemmat ihmiset. Toki heille avaaja saisi olla ehkä isompi.

Ennen vanhaan sivut olivat helppokäyttöisempiä, kun oli monella sivustolla kehykset eikä sivuja tarvinnut tarpeettomasti vierittää. Ehkä muutkin, jotka eivät pidä vieriyksestä niitä jäivät kaipaamaan. Toki niitä käytettiin myös latausaikojen laskemiseen.

 

[apek]

Kyllä minun sivupalkki toimii ja siinä on ihan oikeasti ideaa.

Mutta jos samalla rikot monella muulla tapaa sivun toimivuuden, niin se ei ole toimivaa, eikä siinä ole ideaa.

 

[Tapio X]

Jos ainoa kriteerisi on rullaus ja sinusta sitä häiritsen, sitten se ei sinulle sovi, mutta uskon, että joku toinen pitää ideasta. Eivät kaikki halua hirveää vauhtia edes takaisin rullailla.

Rullaus sinänsä nyt toimii - sain siihen liittyvän ongelman korjattua.

Jotenkin turhauttaa tuon tason rullauksen korostus. Se merkitsee sitä, että kaikki toiminnot pitää erikseen hakea joko sivun alusta tai lopusta. Toimintoja ei saa järkevästi tilannekohtaiseksi, koska tilannekohtaisuus on juuri sitä, että toiminto on juuri silloin käytettävissä, kun sitä haluaa - ilman mitään siirtymää.

En ehkä saa sinua ymmärtämään, että juuri turhat siirtymät tekevät käyttöliittymästä minusta äärettömä ikävän. Aina kun siirryt, joudut hakemaan toiminnon jostakin.

En pysty ymmärtämään sinua. En pysty ymmärtämään, että sivustoni kiinteät elementit haittaisivat merkittävästi rullausta. En pysty ymmärtämään sitä, että toimintojen etsiminen olisi kivaa sen sijaan että toiminnot olivat tässä ja nyt.

Anyway toimintoja on mahdoton kehittää, jos enemmistö on kannallasi. Siirtymät merkitsevät aina hakemista eikä niitä oikein voi miettiä järkevällä tavalla tilannekohtaisesti.

 

[apek]

Jos ainoa kriteerisi on rullaus ja sinusta sitä häiritsen, sitten se ei sinulle sovi, mutta uskon, että joku toinen pitää ideasta. Eivät kaikki halua hirveää vauhtia edes takaisin rullailla.

En puhu nyt rullauksesta, vaan siitä mitä tässä viestiketjussa on puhuttu jo pari sivua. Muokkaat CSS:ää niin paljon ja osittain siten ettet edes ymmärrä mitä teet. Tähän ketjuun on laitettu paljon kuvia ja kertomuksia miten sivusi ei vain toimi. Tee asialle jotain sen sijaan että puolustelet omaa viritystä.

 

[apek]

Ja ihan oikeasti tarkoitus ei ole haukkua sinun sivua, vaan auttaa. Ei minulla ole mitään sitä vastaan että tekemäsi valikot ovat aina käytettävissä. Mutta tosiaan kun samalla olet rikkonut sivuston muun käytön, niin se ei ole hyvä asia. Siksi minäkin noita kuvia olen laittanut ja ilmoittanut jos jokin ei toimi, että pystyisit korjaamaan asian.

 

[Tapio X]

Kiitos noita kuvakkaapuskuvista. Olen tehnyt monia muutoksia. Viestissä no 141 esille tulleet z-index-ongelmista johtuneet virheet korjasin. Otsikkovirhe jäi itseltä huomaamatta.

Leveyttä tasapainoitin taustavärillä. Sama ajatus on muuten Suomi24:ssä. Tyhjällä tilalla on suurin piirtein sama taustaväri kuin nyt minulla. Mielestäni toimii riittävän hyvin.

Katsoin täysleveällä ruudulla ja marinaalit olivat kohdallaan (tein pientä säätöä).

Tosin olivat aluksi vain kirjautuneena. WordPress muuttaa CSS:ää ja piti tehdä jotkin marginaalit ja asemoinnit eri lailla riippuen siitä, onko kirjautunut vai ei. Pitäisi olla kaksi konetta, että voisi kaikkea testata helposti. Erilainen käyttäytyminen kirjautuneena ja ei-kirjautuneena on todella ärsyttävä haittatekijä.

Ison näytön korjaaminen oli tosi hankala juttu, koska leiska oli suunniteltu alun perin aika lailla toisenlaiseksi. alle 1281 leveyden monet ratkaisut eivät toimineet sellaisinaan vaan niitä piti muuttaa, että toimisivat kaikilla leveyksillä.

Mitään suuren luokan ongelmaa ei enää pitäisi olla, vaikka pikku virheitä kyllä voi vielä löytyä. Foorumin lähtösivulla minulla oli mobiiliversioissa virheellisiä määrityksiä ja sain ne korjattua.

Tosin @media screen and (max-height:768px) and (min-width:824px) and (max-width:1260px)

testattu vain 1200x960px laitteella, jonka viewport-arvo on 600 x 960px. Muilla leveyksillä taustakuvan asemointi ei ole optimaalinen. Selaimen kehitystyökalussa näkymä pienentyy ja on vaikea täsmällisesti tarkastella tiettyä leveyttä.

Hieman pielessä ovat siten mm. Nexus 9 (vaakasuuntaan 1024) ja perus iPad (vaakasuuntaan 1024px). Asiaa ei kyllä pitäisi juuri huomata.

Muutin leivänmurut ja lisävalikon sellaisiksi, että niiden ei pitäisi olla leveysriippuvaisia, jollaisia ne olivat ennen.

1024 x 1366 iPad Pro saanee tietokoneversion kaltaisen version, mutten pysty testaamaan versiota, koska tietokone ja mobiiliversioissa on erliaiset valikot. Valikon avaus on varmasti ihan pielessä. Prolla tuskin selattu sivujani, joten ongelma ei ole suuri.

Myönnän, että CSS:ää on liian sekavasti ja menen sen kanssa välillä sekaisin - tarkoitus olisi se organisoida kunnolla. Usein tulee ajatus muuttaa jotain, mikä luo uutta sekavuutta.