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

Ihan vaan tiedoksi, mikä aiheuttaa mobiilissa sivujen rullauksen takkuilua. Se on sivurakenteen isolle elementille määritelty position:relative, jossa on annettu jokin arvo.

Jouduin kännykkäversiossa käyttämään foorumin aloitussivulla position:relative, mistä aiheutui pieni tökkiminen. Mutta kun sivu on niin lyhyt, että rullausta ei juuri ole, ei sillä sivulla haittaa. Alla funktio, jolla selvitän, mille selaimille haluan vaihtoehtoista valikkoa käyttävän mobiiliversion:

function tap_is_mobile(){
global $_SERVER;
$Firefox=strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox');
$Tablet=strpos($_SERVER['HTTP_USER_AGENT'], 'Tablet');
$Android=strpos($_SERVER['HTTP_USER_AGENT'], 'Android');
$Chrome=strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome');
$iPad=strpos($_SERVER['HTTP_USER_AGENT'], 'iPad');
$iPhone=strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone');
$mobile=($Chrome && $Android) || ($Firefox &&($Android || $Tablet)) || $iPad || $iPhone;
return $mobile;}
PS. Huomasin harmikseni, että Code Snippet kanssa pitää prioriteeteista olla tarkkana. Jos viittaa muussa tietueessa tuohon ja prioriteetti on väärä, sivusto kaatuu. Lisäosa ei varoita prioriteettiongelmista.

Piti tehdä asiasta huomautus ja lisäosaan korjauspyyntö:
Code Snippet and missing priority check | WordPress.org
 
Viimeksi muokattu:
Mitä tietotekniikkaan tulee, olen aina harrastanut vähän erikoisia ratkaisuja. Eräällä sivulla minulla oli "avaruuskapseli" sivun oikeassa reunassa. Siihen oli koottu sivuston keskeiset linkit + haku ja se kulki aina sivun mukana. Mitään perustoimintoa ei silloinkaan tarvinnut mistään etsiä. Sivuilla ei ollut header-osaa eikä footer-osaa, koska se ei niitä tarvinnut. Vähän samasta ideasta nytkin on kyse.

Nykyisessä sivustossakin sekä header että footer ovat oikeastaan totaalisen turhia. Kaikki, mitä on nyt header-osassa, voisi koodata ilman sitäkin.

"Avaruuskapseli" ei toimisi kännykässä, mutta sitä tehdessä kännykkää ei käytetty nettiselailuun.
 
Testasin 1280x800px mobiilinäytöllä - z-index ongelma ns. leivänmurujen kanssa. Sain ratkaistua, mutta apuvalikon väriä en saanut millään muutettua. Menettelee, mutta lopputulos ei ole ihan se, mikä oli tarkoitus.
 
Viimeksi muokattu:
Z-index ongelmat näyttäisi tosiaan olevan nyt kunnossa kaikilla resoluutioilla. :tup:

Semmosen huomasin, että onko tarkoitus että tietokoneella toimintovalikko aukeaa heti, kun hiiren kursori osuu nappiin? Päävalikko kuitenkin vaatii klikkauksen, että aukeaa. Mielestäni parempi olisi toteuttaa myös toimintovalikko siten, että se vaatii klikauksen, koska kaikki mikä tapahtuu tahtomatta on lähtökohtaisesti huono asia verkkosivuilla.
 
onko tarkoitus että tietokoneella toimintovalikko aukeaa heti,

Se on ihan tarkoituksellista. Toimii hyvin 783+ lähtien. Siinä päävalikko on esillä suoraan ja apuvalikko toimii kuin päävalikon linkit eli hover/onmouseover-periaatteella. Pääsääntöisesti tietokonetta käytetään sangen leveillä ikkunoilla.

Sulkeutuu automaattisesti jos menee linkin SIVUKARTTA päälle tai pääsisältöalueelle. Tarkoitus antaa vaikutelma, että toimintovalikkokin on ns. pudotusvalikko.

Alle 783px leveyksillä automaattinen aukeaminen oli tietokoneessa ongelma. Itsellänikin avautui tahattomasti ja ärsytti itseänikin.

Tein painikkeet on nyt tuplana. Alle 783px vaatii tietokoneella klikkauksen.

Oli vähän hankaluuksia saada poistettua esiltä juuri haluttu painike, sillä painikkeella oli id, jolle on CSS. Rikkoo hieman W3C:n periaatteita kun on kaksi elementtiä samalla id:llä, mutta en jaksa tehdä uutta CSS:ää, jolla tästä kauneusvirheestä pääsisi eroon.

Vähän tulee kikkailtua eri orientaatioiden, leveyksien ja laitteiden kanssa kun haluaa optimaalisen toimintatavan kulloiseenkin tilanteeseen.

Ihan vaan tiedoksi, että tietokoneella alle 783 valikko ei ole ihan nätti. Tuli marginaaleja, joita en saanut pois. Vastaavan kaltainen valikko mobiilissa on eri eikä siinä ole marginaaliongelmia.
 
Viimeksi muokattu:
@Tapio X Onko mitenkään mahdollista että jos tulee uutta asiaa niin kirjoittaisit uuden viestin. Tai noita muokkauksia kun sulla on niin tekisit silleen että saisit ne samalle päivälle.

Nyt on joissakin jutuissa muokkaukset seuraavana päivänä ja jos foorumin sivukin vaihtuu sitten vielä uusista viesteistä niin ei niitä vanhoja juttuja kukaan enää lue.
 
Tuosta on minulle aiemminkin huomautettu. Ongelmana on se, että kun toimii impulsiivisesti, tulee sitten paljon pikkuviestejä. Ajattelin, että on pienempi paha korjata aiempia, jos johonkin asiaan tulee muutoksia. Ehkä parempi sitten vaan viitata aiempaan, jos muutoksia on tullut.

Sovitaan niin, että jos saa samalle päivälle, muutoksia voi tehdä. Jos edellispäivän asioihin on tullut muutoksia, niihin lienee syytä vain viitata.
 
Mietin tässä olisiko joskus järkevää koodata eräät asiat asetuksina evästeiden avulla.
  1. Näytä/piilota toimintovalikon avaaja (oletuksena näytä)
  2. Näytä/piilota rivilaskuri (se on pois käytöstä, mutta evästeiden kanssa voisi ehkä toteuttaa) (oletuksena piilota)
En muista evästeiden määrittämisestä enää mitään, vaikka joskus olen sellaisia laatinut. Näitä voisi kokeilla, jos ei ole muutakaan tekemistä.
 
Tuosta on minulle aiemminkin huomautettu. Ongelmana on se, että kun toimii impulsiivisesti, tulee sitten paljon pikkuviestejä. Ajattelin, että on pienempi paha korjata aiempia, jos johonkin asiaan tulee muutoksia. Ehkä parempi sitten vaan viitata aiempaan, jos muutoksia on tullut.

Sovitaan niin, että jos saa samalle päivälle, muutoksia voi tehdä. Jos edellispäivän asioihin on tullut muutoksia, niihin lienee syytä vain viitata.
Joo nimen omaan noi seuraavan päivän muokkaukset pois. Parissa viestissä taisi olla usean päivän muokkausväli. Eihän se kiellettyä ole, mutta kuten sanoin että jos sinne vielä lisäillään tärkeää tietoa vielä niin voi mennä monelta ohi vaikka olisivat lukenut siitä viestistä osan.

Pukkaat uusia viestejä vaan jos siltä tuntuu. Ei tää foorumi siihen kaadu :)
 
Joskus on *piip* ärsyttävää, kun ei saa korjattua jotain asiaa sitten millään. Tietokoneversiossa alle 783 leveydellä foorumisivujen päävalikkoon jää oikealle puolelle tyhjää. Siihen tulee jostakin syystä myös vierityspalkit. En nyt vaan keksi, miksi niin käy.

Mitähän voisin tästä säikeestä tähän laittaa Aihe: Tapion sivusaitti | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Hain esille vanhat sivuni. Muistin vähän väärin. Footerin olin tehnyt, mutta ns. header-osaa ei ole. Footer on vain mainosta ja sisällöllisesti täysin turha. Footeria sivusto ei kaipaa. Toimii vallan hyvin kapselin ja sisällön kanssa ilman mitään muuta härpäkettä.

"Avaruuskapseli" pysyykin paikoillaan eikä elä liiku nykien kuten muistan. Toimivat vieläkin varsin hyvin tablet-laitteella. Pystynäytöllä kapseli on vähän epäkäytännöllisen pieni, mutta ovat HD-tabletillani vieläkin täysin toimivat sivut. Tein ne puhtaana HTML-koodina, joten töitä oli aikoinaan paljon. Oli PHP-sivut, joten saatoin ohjelmoidakin jotain. Alla linkki kapseliin, josta löytyy sivuston kaikki toiminnot, jotka sivulla on esillä. Tuo siis korvaa toiminnallisesti sekä header- että footer-osan lukuun ottamatta ns. leivänmuruja, jotka ovat sisällön yhteydessä.

Poistin kuvan - jotta sivujani ei löydettäisi - enkä turhaa enää.

Kapseli on päävalikko,toimintovalikko ja haku yhdessä paketissa. Siksi header ja footer ovat sille sivustolle turhia. Suunnitelufilosofiani siis juontuu n. 20v. takaa ja mielestäni silloinen sivusto oli edellä aikaansa.

Paremmin vanhat sivuni toimivat mobiililaitteissa kuin monet muut sen ajan www-sivut, jotka rakennettiin usein taulukoille, jotka vaativat ikävän paljon vaakatilaa. Vaikka minullakin teksti on taulukossa, taulukko skaalautuu ja toimii ihan yhtä hyvin kuin DIV. Taulukko oli tarpeen vain haluttujen ulkonäköseikkojen vuoksi.

Skaalautuvuuden suhteen toimivat HD-tabletilla itse asiassa paremmin kuin monet uudet sivustot, vaikka sivut on tehty lähes 20 v. sitten. Eivät näytä mielestäni vieläkään kovin vanhanaikaisilta.

Kännyköillä ongelmana on se, että kapselin linkit ovat pystynäytöllä niin pieniä, ettei niitä vaikea käyttää (hutimahdollisuus on suuri). Vaakasuunnassa päätason linkkejä pystyy juuri ja juuri käyttämään siten, että valinta osuu juuri siihen linkkiin kun on tarkoituskin (alavalikot eivät ole käyttökelpoisia). Perusteksti OK. Toimivat siis kännykälläkin vielä tänä päivänä ihan kohtuullisesti, vaikka niitä ei ole kännyköille suunniteltukaan.

En halua kertoa vanhojen sivujen osoitetta. Jos joku ne löytää, olkoon kertomatta muille. Hävettää liikaa Sanaris-jupakka enkä halua, että minua tunnetaan. Olen kyllä ylpeä siitä, että vanhat sivuni toimivat nykäänkin niinkin hyvin kuin toimivat.

Pyysin kaivelemaan Elisaa sivuston käyttäjätiedot, kun ne on hukassa enkä pääse tekemään sivustolle mitään. En minä niitä suuremmin olisi uudistamassa, mutta poistaisin footerin sekä eräitä osioita, joita en enää halua olevan esillä. Painikkeiden tyyli on vähän vanhanaikainen, mutta ei kovin pahasti. Ei niin pahasti, että niitä kannattaisi uudistaa.
 
Viimeksi muokattu:
Poistin linkin kuvaan edellisestä viestistä.
Mitä uuteen sivustoon tulee, siinä on varmasti tilanteita, joissa sivusto ei toimi suunnitellusti. Näin siksi, että näkymiä on paljon enkä ole osannut kaikkia ottaa huomioon. Löysin viimeksikin yhden näkymän, jota piti korjata.
 
Siirsin blogin foorumin yhteyteen kun kahden sivuston ulkoasun hallinta on turhan työlästä. Laitoin CSS:llä eri otsikon. Ongelma vain siinä, että text-overflow:ellipsis ei toimi ::after kanssa.

h1.site-title {font-size:0!important;max-width:0;}
h1.site-title::after {content:'Tablet-laitteiden hyötykäyttö - sanaristikot & tietokonepiirtäminen';font-weight:400;font-size:1.2rem;display:block;color:#fff;text-shadow:3px 3px 3px #000;max-width:90%; text-overflow:ellipsis;white-space:pre;position:relative; top:-2.8rem}
Nigtuser sanoi, että twitter-viestejä ei saisi olla, mutta jos ottaisin footerin käyttöön, eikö ne blogiosuudelle sopisi?
 
Laita someikonit ihan yläosaan sivustoa ja korjaa ääkkösongelmat teksteissä.

ääkköset.PNG
 
Tuo on staattinen sivu, mistä johtui tuo ääkkösongelma. Laitan siihen toisen staattisen sivun. Staattisessa sivussa ääkköset tulee korvata &-alkuisella koodilla tai sitten pitää muuttaa kirjaimistoon liittyvää metatägiä.

Nyt siellä on <meta charset="UTF-8">, mutta se ei staattiselle index.html-sivulle toimi. Sivu on staattinen, koska alkuperäistä etusivua ei enää ole.

Selitäpä miksi WordPressin generoimassa html:ssä ei ole ääkkösongelmaa, mutta jos sivun kopoioi staattisena html-koodina, tulee ääkkösongelma.

<meta charset="ISO-8859-1"> muutti tilanteen niin, että kaikki muut paitsi CSS:llä määritellyt tekstin ::before tai ::after käyttäen ovat oikein. Ymmärtääkseni ..before/::after ei voi koodata &.... tavalla.

Toinen vaihtoehto on ohjata haluuttuun sivuun.

Kuten kerroin, someikonit ovat iframea käyttävä lisäosa eikä sitä saa nätisti sivun yläosaan. Siksi niiden paikka on joko toimintovalikko, sivupalkki tai footer-osio.

Blogiosastolle ei niitä pitäisi ollakaan. Yritän saada blogiosion melko itsenäiseksi.
 
Viimeksi muokattu:
shot.png

Tuon pitäisi olla oma elementtinsä. Tuon z-indexin takia menee valikon päälle.

Elementti, jonka id on "onscroll", puuttuu ja siitä tuo koodin virhe. Lisäksi noi koko ajan triggeröityvät scroll eventit eivät tee hyvää sulavuudelle varsinkaan mobiililaitteilla. Passivisiksi pitäisi laittaa ja joku throttlaus systeemi käyttöön.
 
On maailmassa ainakin yksi sivusto, joka soveltaa alkuperäistä mobiiliversionideaani - Twitter!

Sivuston vasemman palkin idea on täsmälleen sama kuin minun oikean palkin, jota pidettiin huonona.

Kysyn nyt oikeaa palkkiani vihanneita, miksi ette vihaa Twitter-sivustoa. Miksi Twitter soveltaa ideaa, mitä tällä sivulla vastustetaan henkeen ja vereen? Ihmettelen vaan.

Twitter haukkaa kännykkälevydellä paljon enemmän kuin aluksi määrittämäni 32px. Ks. vertailevat kuvakaappaukset tästä:

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

Minusta olisi kiva, jos kaikki maailman sivustot seuraisivat Twitterin esimerkkiä mobiiliversion suhteen. Olen ainakin minä valmis uhraamaan käytettävyyden eteen jomman kumman laidan - ehkä vasen laita olisi ollut parempi uhrata.

Joku sanoi, etten ole ensimmäinen idean esittäjä - ehkä joku muukin kuin Twitter-sivusto noudattaa minun rakastamaani suunnitteluperiaatetta.

Jos olisin ollut päättämässä, tämäkin sivuston mobiiliversio muistuttaisi Twitter-sivustoa. Itse vaan todella suuresti ihmettelen, miksi niin harva sivusto on Twitterin kaltainen.

Foorumisivusto on mitä suurimmassa määrin toimintosivusto - juuri foorumisivustojen tulisi noudattaa minusta Twitterin suunnitteluperiaatteita mobiiliversioissaan!

Minun mielestäni Twitter-sivuston mobiiliversion alle 783-näytöllä olisi erittäin hyvä malli käyttäjäystävällisen foorumisivuston suunnittelulle.

Jos Twitter-sivusto olisi tämän sivuston kaltainen, kukaan tuskin tykkäisi Twitteristä. En usko, että Twitter-sivuston käyttäjät olisivat valmiit siihen, että toimintoja saa koko ajan olla etsimässä joko sivun yläosasta tai sivun alaosasta.

No tulihan siitä yhden painikkeen kautta saatavista lisätoiminnoista kohtalaisen toimiva, mutta ehkä Twitter-kopio olisi sittenkin ollut parempi ratkaisu, vaikka se sai tällä sivustolla erittäin ankaraa kritiikkiä.
 
Viimeksi muokattu:
Tuon pitäisi olla oma elementtinsä. Tuon z-indexin takia menee valikon päälle.
...koko ajan triggeröityvät scroll eventit eivät tee hyvää sulavuudelle varsinkaan mobiililaitteilla. Passivisiksi pitäisi laittaa ja joku throttlaus systeemi käyttöön.

Huomasin itsekin tuon z-index virheen etusivulla. Poistin z-index-arvon - oli ihan turha tuossa yhteydessä.

Kun poistin on elementin, jonka id on "onscroll", unohdin poistaa siihen liittyvän JavaScript-koodin. Kommentoin JavaScriptin - saatan joskus lisätä sen uudestaan, jos keksi järkevän tavan toteuttaa laskurin. Puuttuvat elementit tosiaan aiheuttavat virheitä. Vähän liian tyypillinen moka minulta.

Testasin mobiililaitteella eikä ihmeempää tökkimistä havainnut. Mobiiliveriossa on vähemmän automaattisia sulkutoimintoja. Idea on siinä, että toiminnot eivät jää tarpeettomasti päälle.

Osan tietokoneella käytetyistä mouseover/onclick voisi laittaa niin, että toimivat vain tietokoneella. Leveähköillä mobiiliversioilla osasta on hyötyä, mutta ei kovin kapealla leveydellä.

"throttlaus " - en ymmärrä, mitä tarkoitetaan.
 
Viimeksi muokattu:
Oikeastaan harmittaa se, että kuuntelin liikaa tämän sivuston kommentteja. Olisi ehkä pitänyt ottaa mallia Twitteristä.

Toisaalta tuli selväksi, että Twitter-tyylinen idea ei kaikkia miellytä. Oikeastaan pitäisi tehdä tutkimus, jossa olisi kolme vaihtohtoa mobiilisuunnittelulle:
  1. Twitter-tyylinen vasemman tai oikean reunan toimintopalkki
  2. Tämän sivun tyylinen siirry ylös tai alas nuolilla toimintoja hakiessasi.
  3. Nyinen foorumiratkaisuni, jossa lisätoiminnot haetaan painikkeella Twitter-tyylisen ison palkin sijasta.
Minusta foorumisivuston suunnittelufilosofiaa pitäisi kunnolla miettiä eikä vain tyytyä valmiisiin ratkaisuihin. Voisin laittaa tutkimuksen vaikk sivustolleni. Se, mikä katsotaan hyväksi suunnittelufilosofiaksi, on mielestäni nyt ihan kaikilla tämän säikeen osallistujilla ihan puhdasta mututuntumaa!
 
Kysyn nyt oikeaa palkkiani vihanneita, miksi ette vihaa Twitter-sivustoa. Miksi Twitter soveltaa ideaa, mitä tällä sivulla vastustetaan henkeen ja vereen? Ihmettelen vaan.
Twitterin selainversio ei näytä samalta kuin mobiilisovellus jota ilmeisesti käytät. Mobiilisovelluksen toiminta on vähintäänkin huono. Sivupalkki ei ole siinäkään toimiva.

Oikeastaan harmittaa se, että kuuntelin liikaa tämän sivuston kommentteja.
Jos et olisi kuunnellut, niin sivustollasi olisi paljon enemmän virheitä. On täällä ihan oikeasti hyviäkin vinkkejä sinulle annettu. Mutta lopeta sitten kuuntelu ja tee niin kuin haluat. Oikeastaan pitäisi lopettaa tämän ketjun lukeminen, kun tunnut vain haukkuvan kun muut yrittää auttaa.

Se, mikä katsotaan hyväksi suunnittelufilosofiaksi, on mielestäni nyt ihan kaikilla tämän säikeen osallistujilla ihan puhdasta mututuntumaa!
Jos jokin muu tapa olisi todettu suuremmassa mittakaavassa paremmaksi, niin kaikki sivut toimisi jo siten kuin mitä sinä yrität tehdä. Maailmassa on kuitenkin aika paljon sivuja jotka katsotaan ihan toimivaksi vaikka ne valikot ja asetukset olisivat saatavilla vain ylhäältä, tai alhaalta, koska se ihan oikeasti on toimiva tapa.
 
puuttuva elementti, johon viitattiin, on rivilaskuri. Poistin divin, mutta vasta äskettäin siihen liittyvän JavaScriptin.
 
Jos Twitter-sivusto olisi tämän sivuston kaltainen, kukaan tuskin tykkäisi Twitteristä

Omalla kännykälläni Twitter EI näytä mitään koko ruudun korkuista työkalupalkkia sivussa. Ja onneksi ei näytä. Sisältö vie koko leveyden ilman työkalupalkkeja.

Sinä olet aivan vapaa toteuttamaan ihan millaiset sivut haluat ja voit olla kuuntelematta niin sovelluskehittäjien, että muuten vain valveutuneiden käyttäjien palautetta. Jos palaute ei miellytä, ei varmaan sellaista kannata kysyäkään?

Jääräpäisyys ei tee mobiilileiskan tarpeettomasta kaventamisesta yhtään sen järkevämpää, vaikka mikä tunnettu sivusto sellaista käyttäisi.
 
Twitterin selainversio ei näytä samalta kuin mobiilisovellus jota ilmeisesti käytät.

Katsoin tietokoneella Twitterin verkkosivua kännykkäleveydellä (n. 400px).
Sitä ei sitten ole mobiiliversiossa. Kapeampana versiona olisi sellaista mobiilinkin kaivannut. Minä pidä sellaisista.

Minulle on annettu hyviä vihjeitä ja aivan tarpeellisia korjausehdotuksia. Korjausehdotuksia on noudattanutkin. Kiitos korjausehdotuksista.

Tarkoitin kuuntelemisella suunnittelufilosofiaa. Minä tykkään Twitterin verkkosivujen mobiiliversion suunnittelufilosofiasta. Se on pohjimmiltan täysin sama kuin mitä tämän säikeen alussa esitin.

Minä puolestaan en tykkään tämän sivuston suunnittelufilosofiasta, mutta tämänkin sivuston kanssa tulee toimeen.

Kuten totesin, suunnittelufilosofioiden arviointi on meiltä kaikilta mutua. Asiasta pitäisi tehdä laaja tutkimus.

En jääräpäisesti kaventanut leiskaa. Kännykkäversiossa ei nykyisellään viedä leveydestä käytännössä juuri ollenkaan (twitter-kuvakaappaukseen verrattuna vain neljännes).

Nykyinen versio on suunnittelufilosofisesti kompromissi Twitterin tietokonäytöllä kapealla ikkunalla olevasta sivupalkista ja avarasta rullattavasta sivusta, jossa sivuleveyttä ei kavenneta.

Se nyt ei ketään täydellisesti miellytä, mutta ei pitäisi olla myöskään ärsyttävä. Painikkeen paikan olen yrittänyt optimoida nimerkin AP -tyylisiä käyttäjiä ajatellen.

Tiedän, että nykyisestä kompromissista myös pidetään - näin minulle on Suomi24 kerrottu. Täytynee tyytyä tähän.

Toisaalta toimintovalikkoon, joka avautuu napista eikä ole aina esillä, ei tarvitse miettiä niin paljoa tilakysymyksiä kuin Twitter-tyyliesessä palkissa, kun koko näyttö on käytettävissä.

Jos olisi taitoa, tekisi kolme versiota ja niille cookiet, jotta asetukset säilyisivät
 
Viimeksi muokattu:
Katsoin tietokoneella Twitterin verkkosivua kännykkäleveydellä.
Ei kyllä twitter, tai mobile.twitter näytä mitään palkkia selaimella katsottaessa millään leveydellä. Tai sitten johtuu siitä, että en ole kirjautuneena twitteriin?

Windows 10 ja Firefox käytössä.

Eka kuva normaali Twitter, ei ole edes responsiivinen. Toinen kuva mobiiliversiolla (mobiili.twitter)
Capture.PNG

Capture2.PNG
 
Näköään tietokone versiota uusineet kirjautuneille...
EDIT: Musta teema koska miksi ei, sensuroitu seuraajat.

2019-07-29_18-42-36.png 2019-07-29_18-43-46.png
 
Sisältö vie koko leveyden ilman työkalupalkkeja.

Valittavaa, että ihmiset ajattelevat tuolla tavoin. Minusta hyvää suunnittelua on tarjota käyttäjälle juuri siihen, missä hän on, se mitä hän juuri siinä kaipaa, ilman minkäänlaista juoksuttamista. Tällainen asenne juuri turhauttaa. Kaikki käyttäjäystävällisyyteen liittyvät parannukset ovat totaalisen mahdottomomia, kun mikään ei saa olla esillä sisällön rinnalla.

Minä tykkään n. 20 v. vanhoista verkkosivuistani enemmän kuin tästä sivustosta, koska se on suunnitelltu tarjoamaan ydintoiminnot ilman turhaa juoksuttamista. Se toki varastaa todella ison palan kännykkänäytön reunasta, mutta sivussa oleva teksti on kyllä luettavissa.

On hirveän surullista, että foorumilistaan paluu, uuden kommentin luominen loppuun tai uuden aiheen luominen edellyttää juoksentelua. Ei siinä ole mitään järkeä.

En todellakaan pidä AP enkä Paapaan ajatuksista, sillä ne luovat vain ärtymystä ja turhautumista. Kaikki pitäisi tehdä vaikeimman mukaan.

Minun on äärimmäisen vaikea ymmärtää, miksi ruudun pitäisi olla aivan puhdas toiminnoista.

Vihaan softia, jotka toimivat kankeasti. Käytän piirrossoftaa, jossa toiminnot ovat helpoiten käytettävissä. Haluaisin just sitä samaa www-suunnitteluun, mutta ainakaan minulle sitä ei tarjota - tarjotaan yleensä vain "juoksumattoja"! Minä inhoan pelkkiä juoksumattoja.
 
Näköään tietokone versiota uusineet kirjautuneille...

Minulla on kyllä valkoinen. Minä tykkäisin oikenpuoleisen kuvan kaltaisesta versiosta kännykässä, joskin palkki saisi puolet kapeampi ja toiminnot pienemmällä. Valitsisin palkin siinäkin tapauksessa, että se olisi juuri sellainen kuin se on.

Jos tulee toimintoon uusi tiedonanto, se näkyy heti. bbPress tosin ei tarjoa mitään tiedonantoa, mutta tällä sivustolla sellainen on. Kun rullailee, käyttis saattaa kadota ja sen mukana tiedoitukset.

Jos haluat laittaa merkinnän Twitterin omaan kirjanmerkkiin, olisi *piip* ärsyttävää, että pitää juoksuttaa käyttäjää sivun alkuun. Palkin kanssa tarpeellinen toiminto olisi just käsillä silloin kuin sitä tarvitaan.

Twitterissä on asetukset - toivoin jaksavani itse tehdä niin. Ne jotka haluavat selata juoksumatolla, saisivat sellaisen, mutta jotka vihaavat juoksumattoja, niiden ei tarvitsisi juosta ylös alas juoksumatollaan.

Tosin niille, jotka juoksumattosuunnittelusta tykkäävät, on vähän vastenmielistä luoda asetukset. Sitäpaitsi idea ei enää toimi ollenkaan. Jos ideana on tarjoata tässä ja nyt mahdollisuus luoda uusi viesti loppuun, sitä ei toimintovalikkoon enää kaivata. En tiedä, mitä juoksumattosuunnittelusta tykkäävät oikein edes kaipaisivat.
 
Viimeksi muokattu:
Sellainen valikkoratkaisu voisi olla minun mielestä ihan toimiva, jossa mobiililaitteella käytettäessä pystyasennossa navigaatiopalkki olisi vaakatasossa joko ylhäällä, tai alhaalla kiinteästi, eli rullaisi sivun mukana. Ja vaakatasossa käytettäessä palkki siirtyisi vasempaan, tai oikeaan laitaan (mieluummin vasempaan, mutta osaava tekijä laittaa senkin käyttäjän päätettäväksi).

Näin pystykäytössä valikko ei häiritse, koska silloin käytössä on pystysuunnassa enemmän tilaa. Samoin vaakatasossa on enemmän sivusuunnassa tilaa, niin palkki ei haittaisi sivussa.
 
Ennemminkin sellainen valikkopalkki, joka katoaa ylös piiloon kun sivua scrollataan alas ja ilmestyy esille kun sivua selaa vähänkään ylös.
 
Näköjään Twitterin uudessa ulkoasussa mobiilileveyksillä käy noin. Olen haukkunut uutta ulkoasua muutenkin (joskin hillitymmin kuin haluaisin, koska olen yrittänyt pitää palautteen asiallisena), mutta tästä saan näemmä lisää bensaa liekkeihin heitettäväksi. Tuo idea ei ollut hyvä sinun sivullasi eikä se ole sen parempi Twitterissäkään. Tosin Twitterissä se ainakin näyttää huomattavasti paremmalle ja ammattimaisemmalle, mutta tilaa vienee tosiaan enemmän. Joka tapauksessa en missään nimessä kehuisi tuota ratkaisua. Palkki voisi varmaan olla ihan käteväkin, jos sen saisi helposti piiloon ja esille, mutta mokoma näyttää olevan koko ajan esillä. Yleensähän tämä helppo tapa piilottaa/näyttää valikko taas on ns. hampurilaisvalikko, josta täälläkin on taidettu puhua...

Tuossa foorumiltasi löytyvästä Twitter-kuvakaappauksesta muuten ilmenee suorastaan erityisen hyvin, miksi sivussa oleva palkki on hirvittävän huono idea: rivipituuksista tulee niin lyhyitä, että lukemisesta tulee lähes tuskallista. Jonkun Twitterin tapauksessa moinen saattaa vielä toimiakin jotenkuten, koska yksittäisten viestien pituus on niin lyhyt, mutta missään asiatekstissä ei toimi senkään vertaa - ja en tosiaan arvosta ratkaisu Twitterissäkään, jos sattui jäämään epäselväksi.
 
Kiinteät navigointielementit voi asettaa ihan miten haluaa. Haun, päävalikon ja apuvalikon voisi laittaa rinnakkain alas tai ylöskin.

Alhaalla olisi peukun ulottuvissa. Jos on alhaalla, paikka on vähän epätavallinen. Poikani ei tykännyt ajatuksesta, että valikko nousisi alhaalta.

Alhaalla olisi se hyöty, että ei turmelisi sivun otsakekuvaa.

Ajattelin vain, että puoliväli olisi optimi. Kaikessa vähän kompromissi.

Vaakatasossa HD-tablet-laitteella palkki on oikeassa yläkulmassa syystä, että oikealla on sivupaneeli. Kun Palkki on täsmälleen sivupaneelin levyinen, se ei vie miltään tilaa ollenkaan. Siinä ratkaisu on optimaalinen - paitsi, jos tykkään mieluun siitä, että paneeli ja palkki olisi vasemmalla.
 
Viimeksi muokattu:
Ennemminkin sellainen valikkopalkki, joka katoaa ylös piiloon kun sivua scrollataan alas ja ilmestyy esille kun sivua selaa vähänkään ylös.

Vaatii vähän JavaScriptiä. Onko esittää koodi jostakin.

En tiedä, mitä tarkoitetaan ns. hampurilaisvalikolla, mutta arvaan, mistä voi olla kyse. Sekin vaatii JavaScriptiä. Valikoissani ei sitä ole muuten kuin avaus/sulkutoiminnoissa.
 
Viimeksi muokattu:
Täytynee joskus tutustua. Myönnän, että ajatuksessasi on ideaa. Henk. koht. pidän kiinteää palkkia parempana vaihtoehtona kuin palkittomuutta.

Palkin suurin etu, että oikein toteutettuna juuri tilanteeseen liittyvät toiminnot eivät tarvitse ainuttakaan ylimääräistä liikettä. Minulle siis tilan pieni kaventuminen on pienempi paha kuin toimintojen hakemiset.

Kyllä tekstiä lukee ihan kivasti vähän kapeammastakin tekstialueesta - kokeilin äsken 20 v. tekemilläni sivuilla, joissa normaali tekstialue on n. 70% näytön leveydestä. Twitterin tietokoneversio mobiilileveysillä ei kavenna noin paljon.

Mutta eikö eri käyttäjillä olekin erilaiset prioriteetit? Tuntuu, että aina ei haluta ymmärtää tätä asiaa - puolin sun toisin.

Minulla painike tuo yhden lisäliikkeen. Esittämässäsi ideassa ei sitäkään tule.

Minusta paras käyttöliittymä on se, missä käyttäjä säästyy eniten siirtymiltä tai lisänäpäyksiltä/klikkauksilta. Kun aina ajattelen tältä näkökulmalta, ymmärtänet kritiikinikin, mitä olen esittänyt tätä sivustoa kohtaan.
 
Viimeksi muokattu:
Minusta paras käyttöliittymä on se, missä käyttäjä säästyy eniten siirtymiltä tai lisänäpäyksiltä/klikkauksilta. Kun aina ajattelen tältä näkökulmalta, ymmärtänet kritiikinikin, mitä olen esittänyt tätä sivustoa kohtaan.
Mutta jos se itse pääasia, eli leipätekstin lukemin hankaloituu millään tavalla siitä, niin se on lähtökohtaisesti huono asia. Kaikissa sivustoissa pääpaino täytyy aina olla leipätekstissä. Kyllä kaiken muun saa siihen ympärille sitten rakennettua.

Ja se että sinä pidät jotain asiaa huonona ratkaisuna, ei tarkoita sitä että se välttämättä olisi huono. Ei se välttämättä ole hyväkään asia, mutta jos se on toimiva, niin... Sama tietysti myös meidän kohdalla jotka pitävät perinteistä tapaa parempana, ei se välttämättä sitä ole.
 
Mielestäni nykyinen versio on melko toimiva kompromissi. En kännykkäversioissa käytännössä vie leipätekstiltä tilaa ollenkaan, koska marginaalit pitää aina olla. Pidin minäkin Twitterin tietokoneversion mobiilileveyksien ratkaisua liian tilaa vievänä.

Ei sen keskellä olevan painikkeen pitäisi sinuakaan suuremmin haitata. Sen pitäisi olla sen verran irti pohjasta, että ei haittaa peukalolla rullausta, mutta kuitenkin olla peukalolla tavoitettavissa.

Minun on vaikea ymmärtää sen olevan merkittävä haittatekijä. Etuja siinä on rutkasti - erityisesti foorumisivuston säikeiden hallinnassa.

bbPressissä voi uuden viestin laittaa joko vastauksena edelliseen tai laittaa loppuun. Ilman sitä lisäpainiketta ei ole aitoa valintatilannetta! Sinun ei tarvitse siirtyä välittömästi loppuun, jos haluat uuden viestin sinne.

Tällä sivustolla tuolla asialla toki ei ole merkitystä, koska uusi viesti tulee aina loppuun.

Kuten olen selittänyt, foorumisivusto toimii erittäin kankeasti ilman sitä lisävalikkoa. Leipätekstin (yli)korostus tuo vääjäämättä erittäin kankean systeemin. Kankeudesta ei vaan pääse pois ilman innovatiivista suunnittelua. Haluako olla torppaamassa sen?

Ihan oikeasti tämän sivuston kaltaisella www-suunnittelulla peli on menetetty, jos ajatellaan sitä, että toimintojen käyttö ei olisi kankeaa. Suunnittelu on minusta lähtökohtaisesti pielessä, kun toimintoja on hajautettu.

Toivon, että jokainen yrittäisi ymmärtää, että kunnon www-suunnittelun tulee lähteä siitä, mitä olen esittänyt. Ainut tapa sille on toimintovalikko, joka on helposti käsillä. Kyse on vain siitä, miten sen toteuttaisi järkevästi.

Tällä sivustolla on toki eräänlainen toimintovalikko, mutta se ei ole sellainen, jonka sen pitäisi olla.

Tämän sivuston pikanavigoinnin vasen puoli muistuttaa meikäläisen toimintovalikkoa, mutta siitä puuttuu ainakin linkki uuden aiheen luomiseen. Voisi siinä olla ohjeiden ohella linkki sääntöihin ja muut footerissa näkyvät linkit. Yleislinkeissä saisi olla kaikki yleislinkit, eikä vain osa. Yleislinkkien osalta pikanavigointi on vajaa.

Toimintovalikon/pikanavigoinnin idea on hukassa, jos se on sivun alussa tai mainosten jälkeen lopussa. Se ei kerta kaikkiaan toteuta tehtäväänsä niin kuin sen tulisi toteuttaa! Koska se ei pysty toteuttamaan kunnolla tehtäväänsä, se on aika turha. Koska toimintovalikko ei täytä tehtäväänsä, minulle on aivan turha väittää, että tämä sivusto on suunniteltu hyvin.

Jotta tämän(kin) sivuston toimintovalikolla (nimeltään pikanavigointi) olisi jotain järkeä ylipäätänsä, sen pitäisi kulkea sivun mukana eikä olla haettavissa kaiken muun "roinan" seasta. "Roinan" seasta haettavana se nyt vaan ei toimi. Lähes tulkoon totaalisen hyödytön lisuke, jota tuskin kukaan tulee käyttäneeksi.

Minulle on aivan turhaa väittää, että palvelusivusto olisi hyvin suunniteltu ilman hyvin suunniteltua ja helposti käytettävissä olevaa toimintovalikkoa. Vaikka toimintovalikko olisi sinänsä hyvä, mutta sitä joutuu hakemaan, peli on menetetty - tällä sivustolla peli on jokseenkin täysin menetetty. Pikanavigaatioksi sitä ei voi nimittää - pikavalikon pitää olla nimensä mukaisesti pikaisesti käytettävissä. Täällä se ei sitä ole.

Toinen asia, mikä ei kunnolla toimi on nuolet. Vaikka tiedän niiden olemassaolon, niitä joutuu hakemaan kun kameleontin tavoin piiloutuvat taustaansa - ärsyttävää. Useimmilta käyttäjiltä jäänee huomaamatta.

Tämä sivusto on periaatteessa kohtuullisen hyvin toimiva "jojosivusto" (käyttäjää pompotetaan sivun alkuun ja loppuun jojon lailla), mutta kun nuolet ovat lähes käyttökelvottomat, useimmille tämä sivusto on tyypillinen "juoksumatto".

Jos leipätekstin korostus tekee sivustosta jojon tai juoksumaton, suunnittelu on ihan pielessä. Eivät kaikki osaa yhtä näppärästi siirtyä ylös kuin esim. AP. AP saattaa tyytyä jojo- tai juoksumattosivustoihin, mutta minä ainakaan ole yhteenkään niistä tyytyväinen - tämä sivusto ei tee poikkeusta.

AP ei tunnu ajattelevan siirtyilyä huonommin taitavia käyttäjiä lainkaan. Toivon, että AP alkaa ymmärtää kunnolla käytön miellyttävyydessä myös toimintojen helpon tavoitettavuuden. Toimiva leipäteksti on tietenkin tärkeää, mutta vain siihen keskittyminen ei tuo kunnollista kokonaistoimivuutta.

Kyllä minusta jojo- ja juoksumattosivustot ovat puhtaasti huonoa suunnittelua! Sitä on tietenkin vaikea myöntää. Onko nyt tämän sivuston käyttäjillä pokkaa myöntää, että sivuston perussuunnittelu on eräiltä osin pielessä?

Toimintovalikon sisältöä pitäisi miettiä yhdessä, mitkä asiat ovat siinä olennaisia eli mitkä aina esillä ja mitkä toiminnon "Lisää toimintoja" takana.

Toimintovalikon pitää elää:
  1. Käyttäjän mukaan
  2. Tilanteen mukaan
  3. Laitteen ja sen orientaation mukaan
Just nuo kaikki elementit minulla on.

En suinkaan väitä, että oma toimintovalikkoni olisi optimaalinen. Se on varsin optimaalinen tilanteessa, jossa ollaan yhden säikeen sisällä.

Foorumilistauksen kohdalla siinä saisi olla paljon enemmän toiminnallisuutta.

viestissä #182 living death esittämä malli on ehkä optimi, mutta en sitä osaa laatia. Kun yhdistin blogi- ja foorumisivustot, tilaa olisi taas kokeilusivustolle.
 
Viimeksi muokattu:
Mielessä on ollut vähän sen kaltainen. Idea on, että sivun alussa toiminnot olisivat sivun alussa, mutta tietyn pisteen jälkeen siirtyisivät toisaalle. Paikka voisi olla ihan hyvin sivun lopussa. Tämä nyt ei ainakaan toiminut.


window.addEventListener('scroll', function() {
var offsetvalue = Math.round(pageYOffset/18);
if(offsetvalue>10){
document.getElementById("test").style.display = "block";}});
Ongelma tuossa on se, että tuon tapaisen pitäisi koskea vain alle 783 viewport-tilanteita. Toki muualta voisi ongelman hoita !important avulla.

Tämä toimi:

window.addEventListener('scroll', function() {
document.getElementById('onscroll').innerHTML = Math.round(pageYOffset/18);});​

Miksi "offsetvalue" ei toimi ehtona?

Noin sivumennen, olen iloinen siitä, että myös nimimerkki AP oli esittämässä rakentavia ehdotuksia.

Jos saisin tuon idean toimimaan sivun aluussa voisi olla aputekstillä, mitä tarjotaan eli Haku, päävalikko ja toimintovalikko. Vähän pitkiä kyllä nuo kolme rinnakkain aputekstien kanssa. Haku tuskin aputekstiä tarvitsee.

Ns. toimintovalikkoon voi laittaa kopion hausta. Siellä on ennestään linkki päävalikkoon. Tietyn matkan jälkeen valikko ja haku häipyisivät näkyvistä ja tilalle tulisi yksi linkki tai kolme päätoimintolinkkiä tulisivat jonnekin vierekkäin ilman aputekstejä.

Missä olisi sitten sen paras sijainti ja minkä kokoisena ja minkä näköisenä?

Siirtyminen ylhäältä alas olisi iso. Toiminnot aluksi tekstin kanssa ja sitten ilman oikeassa tai vasemmassa yläkulmassa toisi vähinten muutosta.

Tietenkin olisi vielä optimaalista, jos vasta pysähdys/paluuliike tuo sen yhden painikkeen esille.

Jos on vain yksi painike, haku ja päävalikko tarvitsevat yhden näpäytyksen lisää. Kolme painiketta nätisti rinnakkain ja vältyttäisiin turhalta näpäytykseltä.

Jos haluat puhtaan näkymän tai haluat toiminnot mahdollisimman lyhyen polun päähän, et voi 100% saavuttaa molempia päämääriä. Joko lisäät polun pituutta tai lisäät painikkeiden määrää. Ratkaisu on aina kompromissi.

Yritän miettiä aidosti toimivaa kompromissia, jossa oikeasti oli pikanavigointi, mutta rullattavuus olisi silti kunnossa. On se niin *piip* vaikeaa tehdä järkevällä tavalla toimivaa www-sivustoa. Itse en voi hyväksyä jojo- ja juoksumattosivustoja omaksi ratkaisukseni, mutta näemmä on vaikea luoda merkittävästi parempi vastinekaan.

Minusta jojo- ja juoksumattosivustot ovat vanhanaikaisia. Minusta jojo- ja juoksumattosivustoista pitäisi uudestaan päästä eroon.

En nyt voi näyttää, mistä on kyse, kun tuon JavaScriptin rakentelu ei onnistunut.
 
Viimeksi muokattu:
Sellainen valikkoratkaisu voisi olla minun mielestä ihan toimiva, jossa mobiililaitteella käytettäessä pystyasennossa navigaatiopalkki olisi vaakatasossa joko ylhäällä, tai alhaalla kiinteästi, eli rullaisi sivun mukana.

https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/IMG_20190730_184750.jpg - toiminnot vaakatasossa ylhäällä. Jos nyt tuohon saisi sen living_death ehdottaman piiloutumisen, ei pitäsi haitata rullausta.

kokonaisuuden CSS:
background-color: rgba(4, 71, 116, .4);border-radius:0 0 0 5px
 
https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/IMG_20190730_184750.jpg - toiminnot vaakatasossa ylhäällä. Jos nyt tuohon saisi sen living_death ehdottaman piiloutumisen, ei pitäsi haitata rullausta.

kokonaisuuden CSS:
background-color: rgba(4, 71, 116, .4);border-radius:0 0 0 5px
Tuo on jo huomattavasti parempi ratkaisu kuin se, että yksi laita on täynnä nappeja. Vielä kun tosiaan laittaa sen piiloutumaan kun sivua rullaa, niin sitten alkaa jo näyttämään hyvältä.
 
Kokeilitko sitä lisäosaa jonka linkin tarjosin? Aika vähän jää koodaamista kun otat sen käyttöön.
 
juuri tuota eventListerneriä ajattelin, mutten oikein osannut ajatella, millä tavalla sitä käyttää.

Valmiista lisäosasta ajattelin ennemminkin ottaa mallia, mutta jos sillä saa halutulle kokonaisuudelle etsityn toiminnallisuuden. Mutta saatan kokeilla sitäkin. Yksinkertaisempi ratkaisu olisi ensisijainen.

Täytyy nyt yrittää koettaa saada toimimaan.

Muutin (jälleen kerran) header.php:tä ja laitoin toiminnot saman DIV-elementin alaisuuteen. Header.php:stä poistin toiminnalliset osta (haun ja valikot) ja määritän ne omalla PHP:llä.
 
Viimeksi muokattu:
Valmiista lisäosasta ajattelin ennemminkin ottaa mallia, mutta jos sillä saa halutulle kokonaisuudelle etsityn toiminnallisuuden. Mutta saatan kokeilla sitäkin. Yksinkertaisempi ratkaisu olisi ensisijainen.
Ei aina kannata ottaa vain mallia ja rakentaa itse perässä, jos valmiita toimivia ratkaisuja on jo saatavilla. Niitä valmiita toimivia ratkaisuja kun on saatettu rakentaa ja optimoida kuukausia, niin aivan varmasti ne myös toimivat paremmin kuin niistä mallia ottamalla tunnissa itse rakennettu systeemi.
 
Muutostyötä on joka tapauksessa, sillä nykyisin kiinnitetyt elementit pitää purkaa ja määrittää niille position:absolute fixed sijaan. Emolle pitää laittaa se toiminnallisuus.

Kokeilen Xiyngin antamaa koodia ensin. Ei toiminut haluamallani tavalla. Piilotti aika pian valikon kun tarkoitus oli ihan toinen. Tosin taitaa vika olla myös epäonnistuneessa muutostyössä, sillä ilman JS:ääkin oli ongelmia ja piti palauttaa edelliset versiot.

Täytyy kokeilla sitä lisäosaa. Laitoin tietyt elementit toimimaan sen kanssa, mutta oma CSS yliajaa ne. Pitää laittaa joitakin asioita eri lailla. Ei vaikuta nyt mitenkään.

No versioita voi tehdä loputtomiin - niitä alkaa olla jo melkoisesti. Vanhempia olen heittänyt roskiinkin.
 
Viimeksi muokattu:
Kokeilen Xiyngin antamaa koodia ensin. Ei toiminut haluamallani tavalla. Piilotti aika pian valikon kun tarkoitus oli ihan toinen. Tosin taitaa vika olla myös epäonnistuneessa muutostyössä, sillä ilman JS:ääkin oli ongelmia ja piti palauttaa edelliset versiot.
Tuo tosiaan piilottaa kiinteällä korkeudella mutta korketta on helppo säätää. Ei tosin tarvinne kovin isoa muutosta sekään, jos tahtoo sen piilottavan esim. sitten, kun on skrollannut n pikseliä alaspäin. Joka tapauksessa tuo havainnollistaa sitä, että aika pienellä vaivalla saa jotain toimivaa aikaiseksi. Valmis kirjasto voi silti hyvinkin olla hyvä ratkaisu, sillä sellaisessa on varmastikin mietitty asiat jo kertaalleen läpi huolella.
 
Suurempi ongelma on konflikteja aiheuttava CSS:ni. Pitää tarkistaa, että se ei yliaja JS-toiminnallisuuksia.

Haun + valikoiden avaajien laittaminen yhteen pakettiin edellyttäisi sitä, että painikkeet irrotetaan muista yhteyksistään (ts. eivät ole osa jotain suurempaa rakennetta). Rakenteiden muuttamisessa tulee helposti virheitä, kun HTML kootaan osista.
 

Uusimmat viestit

Statistiikka

Viestiketjuista
258 754
Viestejä
4 497 955
Jäsenet
74 279
Uusin jäsen
Muskotti

Hinta.fi

Back
Ylös Bottom