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

[greenlight]

Itse kyllä käyttäisin ihan selaimen vakiofontteja ja ne riippuvat myös käytetystä alustasta. Linuxilla on luultavasti eri fontti kuin Macilla ja Androidilla mobiilissa myös omansa. Käyttäjälle on mukavin kokemus, kun teksti näyttää samalta joka paikassa.

 

[living_death]

Frequently Asked Questions  |  Google Fonts  |  Google Developers

 

[JRan]

Itse kyllä käyttäisin ihan selaimen vakiofontteja ja ne riippuvat myös käytetystä alustasta. Linuxilla on luultavasti eri fontti kuin Macilla ja Androidilla mobiilissa myös omansa. Käyttäjälle on mukavin kokemus, kun teksti näyttää samalta joka paikassa.

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

Tämän tyyppisellä pääsee jo kohtuu pitkälle, toki jos tosiaan haluaa pakottaa käyttäjän pois system fonteista, niin kyseistä settiä voi käyttää esim. sillä aikaa, kun selain lataa Google fontteja asynkroonisesti.

 

[Tapio X]

En vaihda teemaa, mutta voin kyllä yrittää sitä muuttaa. Teeman vaihdossa on liikaa töitä. Sitäpaitsi teemassa on nätti haku oikeassa yläkulmassa. Sen rinnalla minulla on normaali kirjautuminen. Sosiaaliset kirjautumiset on lisäosa. Se vie niin paljon tilaa, ettei sitä voi ylimmälle riville laittaa.

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

Myönnän, että laitoin päävalikkoon kaiken mahdollisen. Syynä on se, että jos ne sekundaarisemmat sivut laittaa footer-osioon, ajattelin, että niitä luetaan huonommin. Ajattelin, että ne olivat enemmän tyrkyllä kuin tavallisesti. Tämä olisi varta vasten tavanomaisesta käytännöstä poikkeava valinta.

Idea ei sitä paitsi ole toiminut. Vaikka ovat olleet päävalikossa, ei silti ole käytetty. Ehkä oli huono ajatus laittaa tyypillisesti footer-osion linkkejä päävalikkoon. Täytyy harkita niiden siirtämistä tavanomaisempaan paikkaan. Linkkejä ohjeiden ym. alisivuille ei voi sitten kyllä olla.

Ahtaminen teki sen, että 800px vaakatila loppui kesken ja päädyin osalla linkeistä vähän erikoiseen ikonien käyttöön. Kahteen riviin menevää päävalikkoa en voinut hyväksyä, sillä sellainen pudotusvalikko näyttää todella rumalta. Olen nähnyt netissä todella ruman näköisesti kahteen riviin meneviä päävalikoita. Jos pudotusvalikon linkit eivät mahdu yhdelle riville, asialle pitää tehdä jotain.

Sitäpaitsi laitoin leivänmurut päävalikon alle, joten en varannut edes tilaa kahdelle riville.

Sinänsä pudotusvalikot toimivat kunnolla vain tietokoneella + mobiililaitteilla, joilla on juuri niille tarkoitettu kynä. Mutta sellaiset mobiililaitteet ovat harvinaisia.

Poistin Google fontit käytöstä ihan tarkoituksella. Alun alkaen oli Lito. Ajattelin, että turhaan latausta. Toki ladattavia fontteja on Genericons ja Dashicons, jotka joka tapauksessa latautuvat. Fonttina on vain sans-serif.

Tiedän, että marginaaleja on liikaa. Se on tullut esille moneen kertaa. Leiskassa jää maksimileveydellä tyhjää vasemmalle n. 280px. Se on ajateltu leiskassa kolmanneksi sisältöalueeksi, mutten hyödynnä sitä mitenkään. En koe mielekkääksi hyödyntää, koska se toimii vain tietokonenäytöllä ja joissakin tablet-laitteissa. 1000px - sivupalkki jäljelle jäänyt alue kyllä pitäisi hyödyntää kunnolla, mutta on vain jäänyt muuttamatta tältä osin CSS.

Leiskan hyötyleveys on 1280px ja se ei keskitä, jos tämä raja ylittyy. 1600px näytöllä tulee melkein keskitys, koska HTML taustaväri on sama kuin käyttämättömän vasemman palkin taustaväri. Feikkikeskitys, joka ei n. 1281-1400px kohdalla näytä hyvältä. Tiedän, että tuo on vähän ongelma, mutta rakenne on turhan kompleksi. että sitä kannattaisi yrittää muuttaa.

Tässä sinisävyt tulevat WordPressin sinisestä valmiiksi määritellystä paletista. Tumminta sinistä olen vaalentanut joissakin kohdin läpinäkyvyydellä. Harmaat sävyt tulevat bbPress lisäosasta. Ajattelin, että WordPressin siniset ja bbPressin harmaat sopivat yhteen, enkä muuttanut näitä perusvärejä. Huomiovärinä on oranssi.

 

[JRan]

Katoin aiemmin sivua kännykällä, mutta nyt tuli vilkaistua ihan desktopillakin, niin näyttää tältä:


Ehkä tossa jotain "pientä" kehittämisen varaa olisi...

 

[Tapio X]

Leiskan maksi hyötyleveys on 1280px. 1600px sivusto vaikuttaa suurin piirtein keskitetyltä. Vaikuttaa, että käytössäsi on n. 2500px leveyden desktop. 2500px desktop-näytöllä näyttää naurettavalla. Tiedän, mutta 2500px desktopin jätän huomioimatta. Läppärin ruudun leveys on tyypillisesti 1600px luokkaa, missä siis tulee feikkikeskitys eikä desktop-moodi vaikuta naurettavalta. Itselläni on pöytäkoneessa läppäritason näyttö.

2500px näytön leveys ja sitä suuremmat resoluutiot kaipaisivat samaan tapaan muuntokertoimen kuin mobiililaitteetkin. Esim. 4K desktop ei tietenkään kaipaa samaa viewport-arvoa kuin 4K tablet-laite, vaan sellaisen, että lopputulos vastaisi läppäriä. Tavanomaisen 1000-1280px hyötylevyden omaava www-sivu näyttää keskitettynäkin aika naurettavalta korkearesoluutioisessa laitteessa, sillä tyhjää tilaa on tolkuttomasti.

Tosin Vivaldissa ihan ok, sillä sille voi laittaa rinnakkaisia välilehtiä, jolloin yksittäisen selainikkuna voi laittaa kullekin www-sivulle optimaaliseen leveyteen.

Ei ole mitään järkeä huomioda vain harvojen käyttämää korkearesoluutioista ammattinäyttöä.

Tarkoitus on tukea seuraavia viewport-arvoja:

1. 320x480px (vain pystynäyttö, sillä testilaite ei näytä www-sivuja toiseen suuntaan)
2. 360x720px (720x1280px kännykkä)
3. n. 590x1050px (HD-laite tai iPad 9,7; tämän tyypin vaakanäyttö ei ole kunnossa)
4. 800x1280px
5. 900x1600px - läppäritason desktop

 

[Tapio X]

Ihan vaan tiedoksi, jos joku ei tiedä, Vivaldi on varsin näppärä www-suunnittelussa. Sen moottori on Chrome tai Chromium, joten se näyttää sivut samoin tai lähes samoin kuin Windows Chrome. Koska välilehtiä voi asentaa rinnakkain, www- sivua voi näppärästi tarkastella eri leveyksillä vain siirtämällä rinnakkaisten välilehtien välissä olevaa erotinta sivusuunnassa. Jos laittaa näytön alareunaan merkinnät, voi siirtyä hetkessä esim. katsomaan, mitä sivut näyttävät Android Chromessa tietyllä leveydellä.

Toimii varsin hyvin 340x480px kännykän, Samsung Galaxy J5 ja HD Huawein emuloinnissa. Testaaminen noille ei vaadi erityistä testausmoodia. 800x1280 Chrome ei toimi, koska siinä on fontinkäsittelyongelma.

 

[living_death]

Kannattaisi tehdä nämä harjoittelut omalle koneelle asennetun WAMP serverin kautta ja siirtää sivut palvelimelle vasta sitten kun sivut ovat siinä kunnossa, että ne ovat käyttökelpoiset vierailijoille eikä vain sivuston ylläpitäjälle.

Hiukan vähän mietityttää, että ensin avataan ketju aiheesta, mutta sitten ei kuitenkaan kuunnella käyttäjien mielipiteitä tai parannusehdotuksia.

Nyt lasketaan pikseleitä ja rampautetaan Wordpress sivuston vakioteema omalla "kehittämisellä" ja ihmetellään miksi sivut toimivat eri tavalla erilaisissa päätelaitteissa.

Jätän kommentoinnin tähän, koska asioista ei oteta opiksi tai kuunnella/haluta kehittää asioita parempaan suuntaan.

 

[apek]

Hienosti jätetään taas huomioitta muut käyttäjät ja tehdään sivuja vain itselle. Tuhoon tuomittu projekti.

 

[Tapio X]

1280px leveys + asemointi vasemmalle on Teeman omainaisuus, ei oma viritelmä. Koska muuttaminen keskitetyksi on vaikeaa, en edes yrittänyt tehdä tälle asialle juuri mitään. Ainoat asiat, mitä tein oli taustakuvan jatkuminen yli 1280 px leveyden ja HTML:n taustavärin määrittäminen samaksi kuin käytöstä poistamani vasen sivupalkki.

Sille, että vasemmalle jääminen näyttää leveällä näytöllä huonolta, en antanut painoarvoa, koska se ei koske keskiverto vierailijaa. Hyvin harvalla on korkearesoluutioinen pöytäkone. Jos on desktop-laite, se on yleensä läppäri. Läppärillä toimivuus saa siksi riittää.

Monet asiat tulivat matkan varrella, viimeisimpänä HD-laitteiden ongelmat. En osannut ottaa mitenkään huomioon aluksi sitä, millaisia viewport-arvoja eri laitteet käyttävät. Itse asiassa HD-ongelma olisi minulla jäänyt tyystin huomaamatta, jos en olisi ostanut HD-laitetta. Hiivatin paha, kun en tällä hetkellä tiedä, miten saisi sen kunnolla korjattua.

Matkan varrella on tullut uusia ideoita, joista ei alussa ollut tietoakaan, joten etukäteen en voinut tehdä kaikkea valmiiksi.

Koska valikkorakennetta arvosteltiin, kokosin apusivut yhden linkin alasivuiksi. Tilaongelmien takia kahdessa kohtaa suoraan esillä on vain ikoni.

 

[JRan]

Sille, että vasemmalle jääminen näyttää leveällä näytöllä huonolta, en antanut painoarvoa, koska se ei koske keskiverto vierailijaa. Hyvin harvalla on korkearesoluutioinen pöytäkone. Jos on desktop-laite, se on yleensä läppäri. Läppärillä toimivuus saa siksi riittää.

Näiden asioiden oikein tekemisessähän ei ole ole mitään vaikeaa, eikä monimutkaista, ongelma on vaan se, että käytät jotain roskateemaa, joka ei selkeästi ole oikeasti responsiivinen (syystä tai toisesta), ei ole alkujaankan ollut tai olet sen saanut rikottua. Pikseleidein laskeminen, mihin @living_death tossa aiemmin viittasi on juurikin täysin järjetön tapa tehdä nykyään mitään.

Myöskin tuolta sivusi html:stä löytyy ihan järjettömiä juttuja, kuten esim. taulukkorakenteita (joilla tehdään layouttia), iso määrä style määrityksiä suoraan elementeissä, inlainattua CSS:ää monta kilotavua, vaikka nyky suositus onkin inlining nopeus syistä ja FOUC-tyyppisten juttujen estämiseksi, niin pitäisi silti katsoa, että mitä CSS:ää laitat millekin sivulle. Wordpressissä tämä pitäisi tehdä vähintäänkin template-kohtaisesti, jotta siitä saavutetaan oikea hyöty. Ja tämän hallintaanhan auttaa kummasti esim. LESS tai SASS.

Jos olet oikeasti asiasta kiinnostunut ja haluat tehdä itse hyvän ja ylläpidettävän teeman, niin heitän tähän pari hyvää, helppoa ja minimalistista mobilefirst css frameworkkia. Näiden avulla saa yllättävän pienellä tehtyä ihan itse huikeasti hienomman ja huomattavasti modernimman wp-teeman, jonka kanssa ei tarvitse laskea pikseleitä, eikä myöskään hävetä ulkonäön puolesta, eikä myöskään hämmästellä, että kävikö joku sivuilla 8k näytöllä.
Milligram - A minimalist CSS framework.
mini.css - Minimal, responsive, style-agnostic CSS framework
Pure
Skeleton: Responsive CSS Boilerplate

Jos wp-teeman tekeminen tyhjästä ei ole tuttua, niin alkuun auttaa, vaikka Underscores, jolla voi luoda "tyhjän taulun, mihin piirtää".

Toki jos et halua mitään edes muutaman sadan rivin frameworkkia avuksi, niin sitten suosittelen vähintäänkin tutustumaan CSS FlexBoxiin sekä mobilefirst tekemiseen. Eli yksinkertaisuudessaan tehdään sivu jonka toimii mobiililaitteilla ja lisätään tyylejä, jotka muokkaavat sivua vain ja ainoastaan isommilla näytöillä (frameworkit määrittelee yleensä näihin breakpointit). Näin mobiililaitteet renderöivät sivut paljon nopeammin, koska eivät koskaan edes yritä renderöidä suurinta osaa CSS:stä.

Eli on siis huikea ero, että käytätkö @media (min-width: [xx]px) {} vai @media (max-width: [xx]px) {} tyyppisiä media queryjä, mobilefirst sivuilta löytyy ainoastaan min-width määrityksiä (muutamaa poikkeusta lukuunottamatta), koska pienimmät laitteet ohittaa suoraan aina "itselleen" liian isot leveydet. Tuolta tekemiltäsi sivuilta näyttää löytyvän molempia sekaisin ja sieltä täältä.

EDIT: typo

 

[Tapio X]

Myönnän, että teeman valinta ei mennyt ihan nappiin. En minä sitä rikkonut. Muuttaminen siten, että sivu keskittyy, tuntuu vaan liian hankalta. Valitsin teeman, kun ihastuin sen joihinkin piirteisiin. Ei tullut perusteellisesti mietittyä miten teema yleisesti toimii.

Huomasin harmikseni itsekin, että siinä oli turhan paljon jo lähtökohtaisesti @media... kohtia ja itse piti lisätä muutamia lisää.

Tiedän kyllä noiden min/max logiikan ja yritin käyttää johdonmukaisesti, mutta niitä on varmaan vahingossa tullut käytettyä epäjohdonmukaisestikin (väliaikaisessa CSS:ssä en edes yrittänyt toimia systemaattisesti). Mobiili/työpöytä breaking point on 782 ja max-width:782px on aivan järkevä. Muitakin olennaisia käännepisteitä on, siksi esim. min-width:482px & max-width:782 on järkeävä, koska tuolla alueella on joitakin eroavaisuuksia max-width:481 -alueen kanssa.

max-width suhteen logiikka täytyy vain ajatella hieman eri lailla kuin min-widht.
max-width ensin yhteinen CSS leveämmälle alueelle, esim. max-width:782px,
sen jälkeen kapeammalle, kuten esim. max-width:481, jolloin leveämmän viewport-arvon omaavat laitteet hyppäävät yli.

min-width logiikka on tietenkin päin vastoin eli ensin pienimmät arvot ja sen jälkeen isommat.

Käyttää siten max tai min -arvoja tai yhdistelmiä, olennaista on se, että yritetään välttää määrittämästä samalle leveydelle eri arvoja ts. tulee yliajotilanteita.

min + max -arvolliset pitää sijoittaa sinne, missä on järkevintä. Ne ovat järkeviä silloin, kun niillä voidaan välttää yliajotilanteita, esim. jotkin määrittelyt 481-472 aluetta, mutta ei mitään muuta. Mitään mikä koskee vain tätä aluetta, ei sitten laiteta muille leveyksille.

Jos halutaan välttää yliajot kokonaan, ensin yleinen CSS, sitten kaikki loput

min-width:280
min-width 281 & max-width 319
min-width 320 & max-width 481
...

Tuo saattaa kasvattaa tietodoskokoa, joten ei välttämättä tuokaan ole ideaaliratkaisu. Sekaratkaisulla voi minimoida koon ja minimoida yliajot, mutta sekaratkaisu on vaikea hallita.

Turhaa CSS:ää minulla on taatusti. Yliajotilanteita on liikaa. On äärimmäisen haastaavaa luoda CSS niin, että kullakin viewport-arvolla toimitaan optimaalisesti.

@media... on kyllä liikaa, mikä johtuu valitusta teemasta. Niitä pitäisi karsia. Tiedän, että CSS:ssä olisi siivottavaa. Tuntuu vain yhtä tympeältä kuin sotkuisen varaston siivous.

Aloittelin siivousta, mutta pahimmille ongelmakohdille (1900x1200px tablet vaakasuunnassa käytettynä ja korkearesoluutioinen työpöytä) en oikein tiedä, mitä niille tekisi. Ne vaatisivat paljon muutoksia toimiakseen kunnolla.

Pientä apua 1900x1200px tablet-laitteelle tuli siitä, että poistin some-palkin kelluvuuden.

Muutaman taulukkojutun lisäsin. Pieniä juttuja, jotka eivät missään riko layoutia. En viitsinyt yrittää tehdä DIV:nä - tiedän, että jos joku katsoo HTML:ää, joku voi niistä huomauttaa. Inline CSS on PHP:llä lisättyjä tekstejä. Kun kirjoittaa tekstin raakakoodina, laitoin osan CSS:stä suoraan. Tiedän, että niistäkin joku voi huomauttaa.

style-tägit on siksi, että en käytä teeman tarvitsemassa CSS:n osalta CSS-tiedostoja lainkaan, koska haluan pitää CSS:n helposti muokattavana. CSS on helppo vaihtaa toiseen. Toinen vaihto on toki käyttää FTP:tä ja vaihtaa sen avulla CSS-tiedoston sisältö. Seuraavaksi taidan käyttää FTP:tä ainaki korjausvaiheessa.

Minulla on ollut mielessä eriyttää CSS kolmeen kokonaisuuteen. Koko sivuston vaatima CSS ( + CSS, jossa sama CSS tarvitaan joillekin elementeille, vaikka ne esiintyvät vain tietyn tyyppisillä sivuilla), vain tavallisten sivujen vaatima CSS ja vain foorumisivuston tarvitsema CSS. Näin ei generoitasi tarpeetonta CSS:ää. Tämä olisi suhteellisen helppo toteuttaa ns. CodeSnippet palikoilla laittamalla CSS:llä vain ehdot is_forum() tai !is_forum(). Helpottaisi paljon, koska jos foorumille tai tavallisille sivuille tarvitsee erilaista CSS:ää, ei toisen tyyppisiä sivuja tarvitisisi huomioida lainkaan. Mutta tämä on jäänyt tekemättä, mutta olen aloittanut kuitenkin uusien CSS-tiedostojen kokoamisen.

 

[maitopurkki]

Tämä käyttöliittymä on täydellinen, nuolien avulla ei tarvitse kuin yhtä kättä puhelimen käyttämiseen. Mainoksen viemä tila siirtää kontrolleja alas, vieläkin hoituu yhdellä kädellä.

 

[Nightuser]

Hienosti jätetään taas huomioitta muut käyttäjät ja tehdään sivuja vain itselle. Tuhoon tuomittu projekti.

Siltä se vähän näyttäisi.

 

[Tapio X]

Tarkastelen nyt tämän sivuston mobiiliversiota.

Tällä sivustolla alussa on otsakuva + neljä toimintokerrosta jossa on kaksi valikkoa. Toinen valikoista tyypillen pop-up. Perusidea sama kuin meikäläisen pop-upeilla.

Koska yksi on ns. leivänmurut vastaa kerrokset minulla kolmea toimintokerrosta.

Alun viiteen kerrokseen toki pääsee nuolilla helposti

Yläosan neljän toimintokerroksen lisäksi alaosassa on yksi toimintokerros. Toimintokerroksia siten viisi (+ mainokset päälle).

Kuusi palkkia ei minusta mikään ihanne ole, vaikka kyllä tämä sivusto varsin toimiva on.

Ideani oli toimintokerrosten välttäminen ja korvaaminen yhdellä sivupalkilla, joka on jaettu kahteen osaa.

Alaosa vastaa tämän sivuston nuolia ja ne on loogisesti eri asia.

Keskimmäisen osion sitten muutin yhdeksi painikkeeksi, joka muistuttaa tämän sivuston pikavalikkoa.

Myönnän, että en osannut ajatella lainkaan, miten kännykästä pidellään kiinni. Enkä osannut odottaa saamaani vastustusta tilankäytöstäkään.

Ihan oikeasti ajatuksenani oli rakenteellisesti yksinkertaisempi rakenne, jossa toimintokerrokset ja toimintojen hakemiset olisi minimoitu.

Ideani ei sitten toiminut, mutta toivon, että perusideaani kunnioitettaisiin.

Käyttämässäni teemassa eikä oikein missään WordPress-teemassa tämän sivun kaltainen rakenne onnistu. WordPress-teemojen erittäin paha yleinen puute on se, että ns. header-osion alle ei ole sisältöaluetta, jonne voisi sijoitella tällä sivustolla olevia toimintokerroksia.

Leiskassani niitä pitäisi nostella position:absolute/fixed avulla. Nostin position-määrittelyillä kirjautumisen ylänurkkaan. Mutta position:absolute on varsinkin aika ongelmallinen. Sen ympärillä ei saa olla mitään asemoitua emoelementtiä. Nykyisellä leiskalla tämän sivun kaltaisten kerrosten luominen on vaikeaa.

Muutin teeman header.php-tiedotoa lisäämällä ns. koukun, jonka avulla header-osaan voi puskea sisältöä PHP-funktioiden avulla. Lomakkeilla täytettävää sisältöaluetta en osaa siihen lisätä.

Siirsin eräät elementit sinne, mutta en vielä aivan kaikkea, mikä olisi järkevää sijoittaa header-osioon eikä minnekään muualle.

Muutin leiskaa niin, että sivupalkin sijasta onkin sisältöalueella yläpalkki. Tuo sekin järkevyyttä leiskaan, kun siihen voi siirtää otsikon yläpuolelle laitettavan leivänmurun niin, että se on aina otsikon yläpuolella. Muutakin siihen voi sijoittaa.

 

[Tapio X]

Muutokset kesken, kun on muutakin tekemistä ja motivaatio ei meinaa riittää. Kaikki kommentit muita kuin mobiiliversion suhteen ovat hyvin pitkälle oikeutettuja.

En halua kuintenkaan missään nimessä tämän sivuston kaltaista mobiiliversiota, koska tavoite oli päästä tällaisesta suunnittelusta pois! Jos yrittäisin tämän sivuston kaltaista rakennetta, luopuisin ihanteistani.

Hyvin monen kerroksen sijaan on vain yksi apuvalikko

Muutin apuvalikon avausikonin ymmärrettävämmäksi. Nyt valikko-ikoni ja sen kanssa +-merkki. Tämän kombinaation pitäisi olla ymmärrettävä. On valikko ja sen lisäksi apuvalikko (jollainen on tälläkin sivustolla). Kun ikonien rinnalla on tekstit, ei niin optimaalinen ikonikin toimii. On todella harmi, että Dashicons ei vaan ole tarpeeksi ikoneja.

 

[Nightuser]

En nyt tiedä millä laitteella tätä edes pitäisi lukea, mutta näkymä on tämmöinen nyt tietokoneella.

E: Mobiilissa näköjään näkyy koko teksti. Aika tönkköä tuolla on silti surffailla.

 

[Xanthe_]

@media screen and (min-width: 482px)

content p, body.bbpress div.bbp-reply-content ul
{
margin-left: -100px!important;
}

Tuon margin-left:in kun ottaa pois niin teksti ei häviä piiloon.

 

[apek]

Kannattaisi kyllä oikeasti harkita jonkun uuden valmiiksi responsiivinen teeman asentamista ja jättää muokkaus vähän vähemmälle. Ei tämä projekti ainakaan parempaan päin näytä olevan menossa.

Tai tietenkin jos haluaa opiskella ja kokeilla, niin ei niitä kokeiluja kannata tehdä varsinaisille sivuille, vaan ensin omalle koneelle ja vasta toimivat ratkaisut julkaista. Keskeneräistä ei julkaista.

Nyt jos menisin ekaa kertaa kyseiselle sivulle ja näkisin, että teksti ei edes näy kokonaan, niin sulkisin sivun heti, enkä palaisi koskaan.

 

[Tapio X]

Kannattaisi kyllä oikeasti harkita jonkun uuden valmiiksi responsiivinen teeman asentamista ja jättää muokkaus vähän vähemmälle.

Tiedän kyllä, että tällä leiskalla on vaikea saada järkevät vasemman ja oikean reunan marginaalit. Tavoitteena on käydä CSS läpi ja yrittää korjata marginaalit järkeviksi. Nimen omaisesti vasemman ja oikean reunan marginaalien suhteen tuli valittua huono teema kun on niin *piip* paljon säätämistä.

Harmittaa kyllä itseäni nuo marginaaliongelmat ja niihin liittyen tietenkin turhan kapeat sisältöalueet. Ja harmittaa paljon myös 1900x1200 -laitteiden huono vaakatoimivuus.

Viewport-korkeus on jotain 450-500px väliltä. Laitoin ->550px rajaksi sille, milloin normaali valikko poistetaan näkyvistä. Kun viewport on noin matala, kiinteä 96px palkki on siitä iso pala, mutta en ole osannut ongelmaa vielä ratkaista.

Tuo tekstin piiloon meneminen vasemmalla oli puhdas vahinko kun yritin siistiä CSS-koodia. Tuli siis siistimisyrityksen yhteydessä. Korjattu. Tarkoitus olipoistaa negatiivisen marginaalin tarve, joka johtuu bbPressin CSS:n ylisuuresta padding-arvosta. Koska minulla ei ole mahdollisuutta testisivustoon yrittäessäni tehdä korjauksia, kaikki vahingossa tehdyt virheet sitten näkyvät.

Tönkköä selata - en ymmärrä ollenkaan. Foorumeilla navigoidaan ihan samaan tapaan kuin tälläkin sivustolla. On foorumeiden lähtösivu ja yksittäiseen foorumiin ja aiheeseen murupolku. Näinhän näissä aina toimitaan. Peruslogiiikka on se, minkä foorumisofta määrittelee.

Yksinkertaistin siis perusvalikkoa kuten Nightuser kuvakaappauksesta näkyy. Päävalikossa on suoraan esillä vain olennaisimmat linkit + linkki muihin sivuihin.

Ei tuota enempää voi yksinkertaistaa. En pidä hyvänä ajatuksena ripotella kohdan MUUT sinne tänne leiskaa, vaikka monet vastaavia linkkejä ripottelevat sinne sun tänne jolloin niitä saa etsiäkin sieltä sun täältä.

Muutin niin, että päävalikon tekstit näkyvät nyt kokonaan, jos sivun leveys on riittävä. Jos leveys ei riitä, tekstit RISTIKKOAPUSIVUT ja RISTIKKOARTIKKELIT näkyvät vasta kun hiiri menee kuvakkeen päälle.

Huomasin, että tällä sivustolla leveysongelmaan on kehittyneempi systeemi. Jos päävalikko ei mahdu kokonaan sille varattuun tilaan tietokoneversiossa, valikkoa jatketaan mobiilimenutyylin. Minusta se oli vähän hämmentävä menetelmä, kun ihmettelin, mitä ihmettä oikealla on vielä valikkonappi ja siitä oikealle vähän alempana vielä pikavalikkonappi.

->481 muutin marginaalit 10px vasemmalle ja 21px oikealle. Sivun yläosan, keskiosan ja alaosan painikkeet ovat marginaalin levyisiä. Ei pitäisi viedä liikaa tilaa ("varastaa" leveyttä käytännössä n.3%, koska ilman kiinteitä elementtejä oikea marginaali voisi olla 10px). Vasemmat ja oikeat marginaalit pitäisi olla kunnossa. Mielestäni myös pystymarginaalit ovat toimivia. Pystymarginaalit ovat tarkoituksellisen väljiä, jotta sivu ei vaikuta ahdetulta. Jonkun mielestä niissä saattaisi olla korjattavaa.

Aivan virheettöminä en pidä ->481-aluettakaan. Päävalikon taustavärin kanssa on virhe enkä keksi, miten korjata.

1900x1200px mobiililaitteille pystysuunnassa sivupaneelin vasen marginaali on väärin. (Footer-osion otin kokonaan pois käytöstä.)

>782: järjestin sivupaneelit toimintoja niin, että tärkeimmät ovat alimpina ja siten parhaiten peukalolla käytettäviä. Ainakin peruskännykällä (esim. Samsung Galaxy J5) apuvalikko + sen toiminnot ovat mahdollisimman hyvin peukalon ulottuvilla.

Oikean reuna vastaa melkein tämän sivuston kuutta kerrosta (viittä ylhäällä ja yhtä alhaalla; noihin kuuteen sisältyy ns. leivänmurut, jotka minulla on otsikon alla, koska niitä ei teemassa oikein muualle saa kännykkäleveyksillä).

Haku & päävalikko + lisävalikko + ylös/alas-nuolet ilman, että ne vievät tilaa miltään, pitäisi olla melko toimiva ratkaisu. Suoraan foorumille tultaessa näkymä on mahdollisimman yksinkertainen.

Sijoittelua ja sisältöä voin korjailla, mutta en halua tämän sivuston kaltaista monikerroksisia ja joiltakin osin hieman sekavia toimintokerroksia. Se on viimeinen asia, mitä haluan.

Minusta tämä sivu kuten useimmat www-sivut ovat rakenteellisesti hirveän rikkonaisia. En tällaisesta rikkonaisuudesta pidä.

Mutta löytää sille vaihtoehto ei olekaan yksinkertaista. Ainakin äärimmäisen turhauttavaa.

Tein kritiikin pohjalta joitakin muutoksia, vaikka perusideastani en luopunut.

No ehkä www-suunnittelu on minun mielestäni aina pielessä. Nyt ainakin se kännykkäversio on lähellä ihanteitani. Jos ei kelpaa, luovutan. En toisentyyppiseksikään haluaisi millään sitä muuttaa.

En minä ainakaan tämän sivuston kuutta kerrosta minään ihanteenani pidä. Minun on äärimmäisen vaikea ymmärtää sinne sun tänne ripottelun ihannointia, sillä itseäni menettely ärsyttää todella paljon. Ripottelen vain äärimmäisessä hädässä ts. jos sitä kovin vaaditaan ja keskittämisestä ei lainkaan tykätä. Että nettisuunnittelu voi olla välillä todella vastenmielistä.

Korjailen muiden laitteiden toimintoja pikku hiljaa. Erinäiset marginaaliongelmat eivät ole kriittisiä eikä ole suurta motivaatiota niiden korjaamiseen.

Näin sivumennen. Sivustollani ei ole teknisessä mielessä ainuttakaan ns. pop-up-ikkunaa. Pop-up-ikkunan on erillinen ponnahtava apusivu, jollaisia ole kyllä joskus käyttänyt. Mutta sivuillani kyse on niitä muistuttavista piilotetuista/paljastetuista elementeistä.

En ole tutustunut tämän sivuston koodiin, mutta oletan, että ponnahtava editori ja ns. pikavalikko eivät myöskään ole ns. pop-up-ikkuna vaan sellaisia muistuttavia elementtejä.

 

[Tapio X]

Sen sijaan että ahdetaan sivun ylä- ja alosa täyteen tavaraa, laitoin valikko+ -linkin myös normaalisivuille. Laitan sen alle toimintoja, joiden ei tarvitse olla aina esillä. Mitään ylimääräistä ei sitten ole missään. Tämä prosessi on keskeneräinen.

Muutin vähän leiskaa, jotta sain muuteltua rakenteita. Nyt 1900x1200 vaakatila näyttää tältä:

https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/hd_vaaka.png

https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/hd_vaaka-2.png

Olen hieman muuttanut ulkoasua, mutta ydinajatus on sama.

Rakentelu on keskeneräinen. Joitakin pieniä CSS-ongelmia tuosta löytyy, joten ei kannata suhtautua ylikriittisesti. Ärsyttävin on z-index-ongelma, joka koskee ylös/alanuolia. Ne jäävät valikon päälle. Niiden pitäisi mennä sivupalkin päälle, mutta ei valikon päälle, mutta en ole onnistunut löytämään täysin toimivia z-index-arvoja. Sekoilen niitten kanssa kyllä ihan liikaa.

Kysyin tyttäreni mielipidettä (vähän yli 30v) ja hän sanoi "Ihan jees".

Ainakin hän piti ratkaisua hyvänä

Kaikki olennainen löytyy oikean reunan kiinteästä 260x96px kokoisesta käyttöliittymästä. Se jää sivun oikeaan laitaan eikä rullaudun sivun mukana. Mielestäni täysin toimiva ratkaisu enkä enää haluaisi suuremmin panostaa tämän viewport-tyypin tablet-laitteille.

Koska pitkässä sivussa selaimen käyttöliittymä häviää, laitoin lisävalikkoon myös linkin ladata sivun uudestaan - ei tarvitse rullata sivua ylöspäin, jotta käyttis tulee näkyy. Että minä inhoan syvästi turhaa rullaamista jota monet tuntuvat rakastavat kaikkein eniten.

Minulla on kaksi toimintokerrosta tuossa paketissa. XenForo tarvitsisi enemmän, mutta kun leveällä näytöllä ei haittaisi, vaikka sivupalkin leveyinen palkki olisi korkeampikin. Koska avatar vie tietyn tilan, toiminnot olisi järkevää laittaa vasemmalle ottamaan avatarlaatikon verran tilaa. Avatar-laatikolle kyllä pitäisi antaa enemmän leveyttä. Voi olla, että FexForo tarjoaa niin paljon toimintoja, että niitä on vaikea mahduttaa järkevän kokoiseen laatikkoon.

En tarvitse kuusikerroksisia rakenteita kun tuollakin pärjää! Toki ominaisuuksiakin on vähemmän kuin tällä sivustolla.

Ehkä tämäntapainen olisi kaikille tablet-laitteille paras kun laitetta käytetään vaakasuunnassa?

Foorumin sisällöllä saisi olla pienemmät marginaalit, mutta ei ole mitenkään tarpeen, että teksti on laidasta laitaan - sellainen on epämielyttävää lukea. Ainakin itse inhoan laidasta laitaan meneviä tekstejä ja kavennan tietokoneella selainikkunaa, jos sellaisia sivuja tapaan. Jos marginaalit olisivat paremmat, tekstille varatun tilan leveys olisi varsin optimaalinen. Sivupalkki ottaa tilasta juuri sopivan alan!

Tutkailin tämän sivuston rakennetta. Jotkut linkit, jotka ovat ylhäällä, toistetaan alhaalla. En mitenkään voi pitää tämän sivuston totetutusta täydellisenä, jollaisena joku sitä mainosti. Ihan tarpeetonta käyttäjän juoksuttamista, kuten nettisivuilla yleensä.

Kaikki listat ovat erillissivuilla. Minusta sivupalkki olisi niille kätevämpi.

bbPress-foorumista puuttuu ominaisuuksia. Suurin puute ehkä hälytyksen puuttuminen. Mutta tärkeimpien listojen pitäminen tablet-laitteilla ja tietokoneella sivupalkissa, on mielestäni kätevämpää kuin erillissivut.

bbPressissä kännyköillä toki ne menevät loppuun, mutta alaspäinnuolella löytyvät helposti.

Seuraavaksi pitäisi korjailla yli 800px leveyden marginaaleja. Hirveä työ, joka tuntuu vastenmielisestä.

 

[Tapio X]

Tämä käyttöliittymä on täydellinen, nuolien avulla ei tarvitse kuin yhtä kättä puhelimen käyttämiseen. Mainoksen viemä tila siirtää kontrolleja alas, vieläkin hoituu yhdellä kädellä.

Joo, mutta ei kaikkia ylä- tai alaosan kaikkia toimintoja voi yhdellä kädellä hoitaa. Toimintoja on keskellä ruutuakin. Ainakin rullausta tarvitaan, jotta neljännen kerroksen toimintoihin pääsee ja peukalolla pitää kuroitella. En ole näppärä kännykän käyttäjä, joten en ole kyllä paras arvioimaan. Itse kun selaan paljon tablet-laitteella. Siinä jokainen turha liike tablet-laitteella pitäisi pyrkiä eliminoimaan.

 

[living_death]

Mitä ihmeen kerroksia? Tee toimivat sivut aloittaen responsiivisesta teemasta ja mieti sitten vasta onko tarvetta omien virityksien tekemiseen.

Hoida footeri kuntoon ja laita osa linkeistä ja tiedoista sinne, eikä mitään diipadaapa Twitter viimeisimpiä postauksia.

Ei pitänyt enää kommentoida, mutta on niin outo tapa lähestyä toiminnallisen verkkosivujen toteuttamisessa.

 

[Tapio X]

Toiminnot on tässä moneessa pystytason kerroksessa.

En panosta blogisivuun nyt lainkaan eli en mieti sen footeria.

Korjaan tämän teeman. katson että se on pienempi paha kuin aloittaa alusta jollakin toisella teemalla.

Tiedän, että nykyisen teeman korjaamisessa foorumille optimaaliseen käyttöön iso työ, koska rakenteita pitää olennaisella tavalla muuttaa. Poistin sivupalkin itsensä määritykset. Mutta en ole vielä poistanut sivupalkille varattua tilaa. Vasemmalle palkille on varattu tilaa enimmillään n. 280px, mutta tuo tilavaraus on turha, koska en käytä vasemman reunan aluetta lainkaan. 820->1280px alueen kaikki leveyssuhteet pitäisi määrittää uusiksi. Osa max/min määrittelyistä pitäisi poistaa kokonaan.

Ristikkoapusivut | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Jos tuota liikuttaa sivusuunnassa tietokonenäytöllä, näkee melkein alkuperäiset leveyssuhteet (poistin kapeamman version sinisestä vasemman reunan palkista). Foorumiosiolla muutin noita, koska haluin enemmän tilaa itse foorumille. Olisi pitänyt muutoksia tehdessäni tehdä vieläkin rajumpia muutoksia.

Alunperin tarkoitus ei ollut käyttää tätä teemaa foorumissa, mutta kun laitoin blogiin, yritin muuttaa foorumikäyttöön. Ei täysin onnistunut.

Mobiilissakin on uudistettavaa. Oikeastaan pitäisi luoda 783+ viewport tableteille saman tapainen layout, jonka loin HD-mobiililaitteille (Eräällä tuttavalla on HD-kännykkä. Hän sanoi, että siinä vaakanäyttö on ihan samanlainen kuin HD-tabletlaitteessani). Näin samaa viewport-arvoa käyttävä tietokoneversio olisi erilainen.

Jouduin teknisten ongelmien vuoksi määrittelemään apuvalikon uusiksi. Rymitttelytkin uusin. Laitoin myös erottimet erityyppisille toiminnoille/linkeille tietyille sivuille. Kun siirsin valikkoa vähän irti oikeasta reunasta z-index-ohjelma häipyi. Siinä ei enää juuri ole CSS-ongelmia, mutta aivan moitteeton lopputulos ei vielä ole.

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

Pyrkimyksenä on välttää tavanomaisia ratkaisuja. Pyrkimyksenä ainakin foorumissa on mm. välttää footer-osion käyttö kokonaan. HD:n mobiiliversio ei sitä kaipaa lainkaan. Kaikki tarpeellinen on siinä 260x96px mukana kulkevassa palkissa. Koska palkki on täsmälleen saman levyinen kuin sivupalkki, sen ei ketään pitäisi ärsyttää. Ratkaisu ihan oikeasti toimii. Ainakin bbPress-alustan toiminnot siihen saa hyvin.

Ratkaisussa ei ole esillä ainuttakaan turhaa elementtiä. Suoraan esillä on vain oleelliset. Ei pitäisi ärsyttää ketään. Eivät vie tilaa miltään, sillä sivun alussa sivupalkin toiminnot ovat normaalisti esillä. Aina rullatessa niistä osa häipyyy näkyvistä riippumatta siitä, jääkö sivulle kiinteä elementtiä vai ei.

Ihan oikeasti apuvalikko on kätevä.

Toki jos miettii toimintakerroksia, jos mukaan otetaan some-kirjautumiset ja ns. leivänmurut, minulla ei ole toimintokerroksia juuri vähempää kuin tällä sivulla. Ydintoiminnot kulkevat kuitenkin aina mukana ja ovat kompakti paketti.

Leivänmurut voisi yrittää laittaa kiinteäksi JS:llä kun sivua on rullattu tietty matka - toistaiseksi en osaa sitä toteuttaa.

HD-mobiililaite vaakatasoon laitettuna on ilman systeemejäni erittäin epämiellyttävä käyttää foorumeilla, koska kerrallaan näkee todella vähän kommentteja. Nuolet ylös/alas auttavat paljon, mutta miksi jättää käyttäjän helpottaminen pelkästään noihin nuoliin, kuten yleensä foorumeilla tehdään?

Foorumisivuston haku, valikkojen avaus ja toiminto "Lataa sivu uudestaan" eivät siirrä käyttäjää minnekään. Turha rullaus on 100% pois!

Apuvalikon sisältö muuttuu käyttäjän ja sivun mukaan ja linkkejä on 5-11 kpl. Käyttäjällä on aina oleelliset toiminut mukana eikä niiden takia tarvitse siirtyä sen paremmin sivun alkuun kuin loppuunkaan. Koska toiminnot vaihtuvat tilanteen mukaan, hyödyn pitäisi olla maksimaalinen. En ymmärrä, jos tätä ei voida pitää hyvänä ratkaisuna. Olen miettinyt apuvalikon sisältöä hyvin tarkkaan.

Yritin laittaa mukaan some-kirjautumiset, mutta en saanut toimivaa toteutusta.

Normaalisivuilla haku vie sivun alkuun - siinä teeman laatijoiden koodi, jota en osaa tältä osin muuttaa.

XenForossa voisi tulla ongelmia, mutta kun minulla ei ole XenForo, ei minun XenForo-ongelmia tarvitse miettiäkään.

Yli 1280 määritän sitten enemmänkin uusiksi, jos motivaatiota riittää. Jos ei riitä, saanee kelvata nykyinen vasemmalle sijoittuminen.

Tavoitteena on kolme erilaista mobiiliversiota:
->481 (muutamia pieni variaatioita)
482->782 (ei variaatoita)
783+ (poistettava kaikki mahdolliset variaatiot, joita nyt leiskassa on ja vain aivan välttämättömat variaatiot mukaan)

Periaattessa kaksi tietokoneversiota:
* 783 > 1280 (vain välttämättömat variaatiot)
* 1281+

Itse asiassa siirsin leiskalla vasemmalla olleen sisältöalueen otsakealueen alapuolelle. Siinä on nyt näkyvillä ns. leivänmurut. Lisäksi siinä on eräitä asemoituja elementtejä, jotka ovat yleensä piilotettuna.

CSS:ää on liikaa - selain ei tee aina määritellyn CSS:n mukaan. Tekstin ja taustan väri eivät aina toimi niin kuin olen määritellyt. CSS:n varattu muisti vaan loppui kesken. Tekee mitä tahansa, ei voi olla varma, toimiiko selain oikein vai väärin.

Puskurimuistin loppumisesta kielii se, että kun poistin jotain CSS:ää, toinen alkoi toimia. Kerran kaadoin CSS:llä tietokannan, nyt tukin selaimen puskurimuistin. Aika harvinainen tapaus taitaa olla.

 

[Tapio X]

Laitoin HD-määritykset sopiviksi myös iPadeille - tosin niille on taatusti heittoa, sillä en voi testata laitteilla ja virtuaalitestauskin on ongelmallista.

Mietin kännykkäversiota vielä osittain uusiksi. Perusajatus kuitenkin säilyttäen.

Otin pois käytöstä vakiovalikon, koska sen kanssa en saanut ratkaisua, joka ei palauttaisi käyttäjää sivun alkuun. Laitan tilalle HD-tablet-laitteessa käytetyn valikon.

SaataPoistan oudot kuvakkeet sivupaneelista ja korvaan tekstillä. Saatan järjestellä sivupaneelin HD-tablet-laitteen tapaan ja ehkä otan sen apuvalikon käyttöön.

Tietokoneella mobiiliversioleveyksillä valikot ovat vanhat, epätyydyttävästi toimivat mobiilivalikot.

Tilanteen mukaan toimiva apuvalikko on kännykässäkin aidosti hyödyllinen. On harmi, että ihmiset eivät ole tottuneet aidosti hyödyllisten tilannekohtaisesti vaihtuvien ominaisuuksien käyttöön. Eikö olisi jo aika niihin ihmisiä totuttaa eikä juoksuttaa käyttäjää edes takaisin?

Suunnittelufilosofian pitäisi aina lähteä tilannekohtaisesti ja mikä kussakin tilanteessa on hyödyllistä. Lisäksi tietyt elementit ovat helposti löydettävissä

Ei mielestäni riitä se, että sivut vain skaalautuvat tilanteen mukaan, myöskin toimitojen tulisi elää tilanteen mukaan.

Tilannekohtaisen lisävalikon tekeminen vaatii toki vaivaa.

Sain värit haluamikseni.

412 x 824,412 x 847 ja 480 x 853 viewport kännytkät ovat ongelma - vaasuunnassa käytettynä korkeus ei riitä oikein millekään. Noin mataliin, mutta suhteellisen leveisiin näyttöihin mikään ratkaisu ei ole hyvä.

Samsung ei huippumalleissakaan tuon tyyppisiä käytä.

 

[greenlight]

Otin pois käytöstä vakiovalikon, koska sen kanssa en saanut ratkaisua, joka ei palauttaisi käyttäjää sivun alkuun.

Oikeasti: mitä helvettiä? Miten olet edes onnistunut koodaamaan valikon, joka muuttaa sivun scroll positionia? Kuulostaa todella ihmeelliseltä ja järkyttävältä räpellykseltä.

 

[living_death]

Käy tuolta katsomassa kunnon responsiivinen teema ja lopeta se pikselien kanssa säätäminen.

Ei siinä mitään jos haluat oppia www-sivujen tekemistä, mutta sen voi tehdä paikallisesti omalla koneella, eikä suoraan julkisesti palvelimella.

https://themeforest.net/

Sitten kun kaikki on kunnossa, siirrä sivut palvelimelle.

how to move wordpress from wamp to live server - Google-haku

 

[Tapio X]

Miten olet edes onnistunut koodaamaan valikon, joka muuttaa sivun scroll positionia?

JavaScriptillä. Koska valikko oli asemoitu position:absolute ja valikkonappi position:fixed, piti tietenkin palauttaa sivun alkuun, jotta valikko näkyisi kunnolla. Nyt molemmat ovat position:fixed ja valikolla overflow-y:scroll.

Kosketusnäytöllä valikkoa on helppo skrollata. Tietokoneella olisi ärsyttävä hiirellä skrollailla, joten sille on pudotusvalikot.

Valikon voi avata milloin vain ja jos ei rullaa liikaa, valikon selaus ei muuta sivulla olemisen paikkaa. Jos rullaa valikon tai alkuun ja jatkaa rullaamista, sisältö takana siirtyy. Näin ainakin käy vaimon kännykällä. HD-tablet-laitteessani näin ei käy. Valikon rullaus ei siirrä milloinkaan sisältöä.

Tilaa olen yrittänyt jättää järkevän määrän.

420px viewport tosin jättää ikävän matalan valikon. iPad/HD-tablet-versio ei oikein kunnolla siinä toimi. Tiedän, että joidenkin kännyköiden kanssa on ongelmia.

 

[Tapio X]

Käy tuolta katsomassa kunnon responsiivinen teema ja lopeta se pikselien kanssa säätäminen.

Kyllä minä tiedän, että käyttämäni teema on ongelmallinen, mutta en haluaisi aloittaa hommaa ihan alusta. Pienemmällä vaivalla pääsee kuitenkin korjaamalla nykyisen teeman CSS. Kuten kerroin, olen muuttanut sen rakenteita.

 

[living_death]

Ei sitä saa korjattua, jos se ei ole alussa ennen sen rakenteeseen puuttumista ollut toimiva.

 

[Tapio X]

Kyllä se onnistuu, mutta taatusti tulee välillä pahoja mokia ja lopputulos näyttää satunnaisesti pahalta.

Mitä siihen valikon korkeuteen, laitoin sille maksimikorkeuden.

@media screen and (max-height:768px) and (min-width:824px){/*iPad, HD-tablet-laite, One Plus 3 + eräät muut kännykät (412 x 824,412 x 847,480 x 853)*/​

Vain niin saa siedettävän korkuisen kiinteän valikon. Piti siirtää 180px oikeasta laidasta, jotta sai sen täyskorkeana. HD-tablet ja iPad eivät täyskorkeata olisi tarvinneet, mutta ei kannata yrittää luoda joka laitteelle omaa korkeutta.

Pystysuuntaan yksinkertaisinta on seuraava:

@media screen and (max-width:782px){
#main-menu{height:-webkit-calc(100% - 96px)!important;height: calc(100% - 96px)!important;}

On aina oikean kokoinen.

 

[Paapaa]

En tiedä, millaista ideaa nyt ollaan toteuttamassa, mutta kannattaa @Tapio X sisäistää, että tämän ketjun perusteella sulla on aika lailla valtavirrasta poikkeava näkemys siitä, millainen on hyvä käyttöliittymä nettifoorumilla. Se alussa esitelty painikearmada olisi suurelle osalle käyttäiä turha, ärsyttävä ja veisi arvokasta sivusuuntaista tilaa. Ja sen pienentäminen tekee sen käyttämisestä ärsyttävää. Tuollaisia ei foorumeilta löydy ihan syystä. Varo, ettet yritä pakottaa käyttäjille jotain sellaista, mitä kukaan ei halua. Varo, ettei omat visiosi sumenna tavoitetta: luoda paras sivusto käyttäjiä (ei sinua) varten. (Tai ainakin oletan, ettet tee tuota itseäsi varten).

Paras tietenkin olisi validoida UI:si oikeilla käyttäjillä, ottaa heiltä palautetta vastaan ja edetä sen mukaan. @living_death antoi hyvän ohjeen, etsi sopiva valmis responsiivinen teema ja muokkaa sitä maltillisesti käyttäen inspiraationa olemassaolevia foorumeita.

 

[Tapio X]

Samsungin kännyköille pystysuuntaan käytettynä painikkeet on minimoitu, mutta kyllä ne toimivat. Olen testannut tuttavieni uusimmillakin Samsungeilla. Tietenkin minimointikin on ongelma, koska pieniä painikkeita täytyy painaa tarkasti. Siihen kännykän käyttäjät ovat tottuneet, sillä kirjaimet ovat pieniä. Painikkeista tosin tuli kirjainpainikkeitakin pienempiä, koska leveämmätkään eivät kelvanneet. Koska niitä on harvassa, minäkin nakkisormineni pystyn niitä käyttämään.

Pyöristetyillä reunoilla olevassa Samsungissa ovat itse asiassa puoliksi reunapyöristyksessä. Itse asiassa hauskan näköisiä sellaisessa kännykässä.

Valikko ja haku toimivat siististi. Avattu sivupalkki pitäisi uusia. Turhan pieni ja turhan pientä tekstiä. Pienuus vähän naurettavaa HD tablet-laitteessa tai iPadissa (pystysuuntaan käytettynä se esillä).

HD-tablet/iPad painikkeet eivät ole turhan pieniä. Kun leveyttä on enemmän, ne eivät varasta sivuleveyttä, koska marginaali, jossa toiminnot ovat, on leveyteen suhteutettuna ihan OK.

Haku ja valikko erittäin toimivia. Kun ne ovat aina esillä eivätkä siirrä käyttäjää minnekään, pitäisi olla asia, josta aidosti ihan jokainen voisi pitää. Millään muulla sivustolla haku ja valikko eivät ole yhtä helposti käytettävissä.

Tavallisten sivujen haku pitäisi oikeastaan koodata itse uusiksi. Alkuperäinen kompleksia JavaScriptiä sisältävän haun ongelma on se, että se palauttaa aina sivun alkuun. Tästä aiheutuu turhaa skrollailua, jos ei siirrykään toiselle sivulle. Aika helppo tehtävä. Pohjaksi oma nykyinen valikko foorumiosion valikko, jossa lomakkeiden data-tiedot määritellään uudestaan.

Ongelma taitaa olla siinä, että vihaan kaikkea ylös/alas rullausta, jota pidän tarpeettomana. Sitä ei ehkä koeta yleisesti niin ärsyttävänä.

Oikei - on totaalisen mahdoton luoda kaikkia tyydyttävä ratkaisu. Minua ärsyttää oikeasti foorumisivustoilla kaikkinainen rullailu. Jotain toista toinen asia.

Eniten potuttaa, että pitäisi luoda sivusto, josta itse en tykkäisi lainkaan. Aina pitää ärsyttää jotakuta.

Ideana on se, ei käyttöliittymä ei toiminnot piilotettuna vie piilotettuna tilaa käytännössä lainkaan, mutta siinä on silti kaikki olennainen on aina käytettävissä.

Vaakanäytössä käyttöliittymän ottama tila ei ole ongelmia, kun oikeassa reunassa on joka tapauksessa saman levyinen sivupalkki.

Koska varasin valikoille ja apuikkunoille koko käytettävissä olevan pystytilan, jopa One Plus 3 tai Google Pixel 3 erittäin ongelmallisella vaakanäytöllä päävalikoiden ja apuikkunoiden pitäisi toimia kohtuullisesti (apuvalikko voi tuottaa ongelmia, mutta laitoin sille overflow-x:auto).

https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/avattu-valikko.jpg

Toteutus on noin, jotta toimisi HD-tablet-laitteiden ohella em. kännyköissä.

Ongelma tällä hetkellä, että visuaalisesti toimii täysin oikein vain 1920x1200px näytöllä viewport-arvolla 600 x 960px. Muilla yläreunan taustakuvat eivät kohdistu. Pitäisi varmaan luoda taustakuva, jonka ei tarvitsisi kohdistua pikselitarkasti.

 

[living_death]

Perse edellä puuhun.

- responsiivinen kaikilla päätelaitteilla toimiva teema
- toimiva yksinkertainen valikkorakenne
- mahdollinen sivupalkki, mutta sekin varauksella
- älä käytä varjostuksia
- värimaailma kuntoon
- isot fontit käyttöön
- footeri kuntoon
- someikonit yläpalkkiin ja footeriin
- älä käytä "kotisivu" sanoja sivuilla, jollet halua harrastelijan mainetta
- kunnollisessa teemassa voi määritellä itse värit, yläosien, sivupalkkien jne. koot miten haluaa
- katso Google Analysatorilla millä päätelaitteilla eniten sivuillasi vieraillaan
- foorumit ovat kuolleet ja nekin ainoat jotka saavat lukukertoja ja vastauksia ovat harvassa
- eli ei omaa foorumia sivulle, jollet halua puhella yksin, facebookin sivu tueksi jos tarvitsee

Älä muuta koskaan teeman omaa html- tai css-koodia käsin, koska seuraavassa päivityksessä kaikki voi olla nollattu. Jos et päivitä teemaa, voit olla kusessa hyökkäysien takia.

Käytä erillistä css-editoria.

Advanced CSS Editor

 

[Tapio X]

Miksi ei varjostuksia - niillä saa mielestäni kivan ulkoasun ja tietyissä tilanteissa ne selkyttävät tekstiä, koska ne luovat kontrastia. Jos eivät nyt muodissa, tulevat joskus uudestaan muotiin - muoti muuttuu eikä sen perässä kannata juosta.

Värimaailmaa en osaa korjata. Kuten kerroin se on WordPressin oman sinisen väripaletin ja bbPressin harmaasävyjen yhdistelmä. Minulla ei ole mitään ideaa, miten siinä muuttaisin.

Someikonit on lisäosa. En juuri pysty vaikuttamaan niiden ulkoasuun. Niiden kokoa ei saa optimoitua (ovat itse asiassa iframen sisällä eli ovat kokonaan kontrollini ulkopuolella). Niitä ei järkevällä tavalla saa muualle kuin sivupalkkiin tai footeriin. Sivun oikeaan tai vasempaan yläreunaan laitettuna vievät aivan liikaa tilaa ja pilaavat ulkoasun. Niitä on mahdoton laittaa yhtä siististi kuin tällä sivustolla.

Olen muuttanut kolmea teeman tiedostoa käsin. Ei iso urakka, jos joutuu päivittämään teeman. Tiedän ongelman. Tyhjensin CSS:n ja päivityksessä tekisin samoin.

Perus suunnitteluongelma on se, että foorumi on lisäosa, joka ei ole integroitu mihinkään teemaan. Eka kertaa testatessa leveysarvot olivat erittäin pahasti pielessä. Liittäminen teemaan pitää tehd itse.

 

[living_death]

Miksi ei varjostuksia - niillä saa mielestäni kivan ulkoasun ja tietyissä tilanteissa ne selkyttävät tekstiä, koska ne luovat kontrastia. Jos eivät nyt muodissa, tulevat joskus uudestaan muotiin - muoti muuttuu eikä sen perässä kannata juosta.

Värimaailmaa en osaa korjata. Kuten kerroin se on WordPressin oman sinisen väripaletin ja bbPressin harmaasävyjen yhdistelmä. Minulla ei ole mitään ideaa, miten siinä muuttaisin.

Someikonit on lisäosa. En juuri pysty vaikuttamaan niiden ulkoasuun. Niiden kokoa ei saa optimoitua (ovat itse asiassa iframen sisällä eli ovat kokonaan kontrollini ulkopuolella). Niitä ei järkevällä tavalla saa muualle kuin sivupalkkiin.

Olen muuttanut kolmea teeman tiedostoa käsin. Ei iso urakka, jos joutuu päivittämään teeman. Tiedän ongelman. Tyhjensin CSS:n ja päivityksessä tekisin samoin.

Kontrastia pitää olla, mutta valikkofonttien varjostuksessa aika tumma väri. Kokeilisin ehkä vaaleampaa. Googlen tms. fonteilla saa ilman kikkailuja parempaa jälkeä aikaan.

Aiemmin linkkaamallani Advanced CSS Editorilla voit muokata kaiken väreistä lähtien. Kysy apua jos tarvitset. Esim. Firefoxin "Inspect Element" toiminnolla saa css-luokat esille ja sitä kautta tiedät mitä koodia käpistelet.

Toiminto tulee esille kun klikkaat hiiren kakkosnapilla minkä tahansa elementin päällä ja valitset tulevasta pudotusvalikosta "Inspect Element".

 

[living_death]

Lisään tähän vielä mielestäni hyödyllisiä WordPress lisäosia:

- Child Theme Configurator
- Google Analytics
- Really Simple SSL
- Simple Custom CSS
- TinyMCE Advanced
- WP Server Stats
- WP-reCAPTCHA
- WPBakery Page Builder
- Yoast SEO

 

[nnaku]

Enpä oo aikoihin nähny noin paljon !importanttia ja postion absolutea! Saattaa johtua se sivun keskittämisen hankaluus noista kahdesta.
Plus sulla on tossa päällä joku pseudo elementti absolutena. Millä rajataan toi vasen laita 240px irti reunasta. Ei suinkaan kannata sirtää sitä bodyä tai sen sisältöä. Lisäksi ton pseudon alla on jokut toiset breadcrumpsit jotka ei näy... (pseudo kuvassa läpinäkyvänä)

Vahva suositus on että scräppää koko paska ja aloita alusta. Jos joku css ei toimi, poista se! Tuolla on ihan vitusti kaikkea huuhaa sillisalaattia mukana, mikä ainoastaa sekoittaa sun omaa päätäs.

Mutta jos ei aijo kuunnella viisaita sanoja niin...
Ota html{ max-width:1280} helvettiin ja anna body{margin:0 auto} jotta saat ton leiskan edes keskelle ruutua!

 

[Tapio X]

Kyllä minä tiedän, että isolla tietokonenäytöllä olisi hirveästi korjattavaa. Jätän sen asian viimekseksi.

Kun teeman skaalaus loppuun 1280 pikseliin, sen ylittävä leveys pitäisi miettiä täysin uusiksi. Siihen lähden viimeksi. Tiedän kyllä, että se pitää korjata. Mutta pelkkä 1280px rajoitus ei riitä vaan muutostöitä on paljon muutakin. Body margin:auto ei voi laittaa ennen kuin monta muuta asiaa on laitettu toimimaan sen kanssa. Asia on varsin kompleksi.

Näyttää siltä, että keskitit jossakin ohjelmassa tuon. Keskityksestä tuli ongelmia, koska elementtien asemoinnit eivät toimi. Hyvin moni elementti on kuvakaappauksen sivussa väärin asemoitu. Asemointien lisäksi pääsisältöalueen vasemmalla puolella oleva sininen tila pitäisi ottaa hyötykäyttöön. 783+ alue pitäisi määrittää uusiksi.

Tuo apuvalikko-ongelma tuli kun apuvalikko piti näkyä mobiiliversiossa, mutta se ei saisi näkyä tietokoneversiossa. Sain korjattua apuvalikko-ongelman.

Mobiilin lisävalikokn. Siinä on nyt yksinkertainen tekstivalikko, joka on sama kuin tietokoneversiossa. Tiedä häntä laitanko ikoneja mukaan ollenkaan.

Mitä WordPressin lisäosiin tulee, minulla on mm. Google Analystics.

 

[Tapio X]

Kontrastia pitää olla, mutta valikkofonttien varjostuksessa aika tumma väri. Kokeilisin ehkä vaaleampaa. Googlen tms. fonteilla saa ilman kikkailuja parempaa jälkeä aikaan.

Jos on tumman sininen tausta, pitää olla sitä tummempi varjostus, että tulee lisäkontrastia. Vaalea varjon tummansinisessä taustassa ei toimi. Ei toimi kontrastin parantaja ja on lisäksi erittäin ruma. Myös kullankeltainen väri vaatii rajun kontratin, että toimisi. Tietyissä tilantessa varjo on kontrastin ja selkeyden takia.

Muita taustoja vastaan minulla on yleensä vaaleampi varjostus (osassa varjostusta pitäisi vaalentaa). Näissä varjo ei ole kontrastin takia vaan ulkonäkösyistä.

Mobiililaite pystysuuntaan laitettuna muutin paria asiaa. Laitoin avaupainikkeen alalaitaan nuolten yläpuolelle. On ainakin peukalolla hyvin tavoitettavissa. Muutin apuvalikon korkeuden dynaamiseksi. Valikko ottaa ylä- ja alosan painikkeiden välisen tilan. Korkeus määräytyy automaattisesti laitteen mukaan. Tarvittaessa tulee vierityspalkki.

 

[Xiyng]

Näyttää siltä, että keskitit jossakin ohjelmassa tuon.

Onnistuu tosiaan suoraan selaimen kehitystyökaluilla. Niissähän pääsee siis varsin vapaasti muokkaamaan olemassaolevaa CSS:ää ja vaikka uuttakin, jolloin tuloksen näkee saman tien eikä vasta sivun uudelleenlatauksen jälkeen. Helpottaa kummasti kehitystä... Esimerkiksi living_deatin yo. kuvakaappaus Firefoxissa näyttää suunnilleen, mistä sen voi tehdä Firefoxissa.

 

[Tapio X]

Yleensä vain katson, mikä on elementin class tai id-attribuutit. En ole sillä koskaan muuttanut mitään väliaikaisesti. Mutta kuten huomaat kokeilustani, muutoksia pitäisi tehdä paljon. Jos muutat yhtä kohtaa, sillä on kumulatiivisia seurauksia.

Olisi ehkä hyödyllistä käyttää. Minulla meinaa välillä huolellisuus pettää. Paha moka on yksi } liikaa tai liian vähän ja ulkoasu on ihan rikki.

 

[Desgorr]

Joo-o. Ylävalikko vie melkein puolet tilasta kun lukee Oneplus kutosella vaakatasossa. Ehkä tuota kannattaisi vielä miettiä?

 

[Tapio X]

Tuo ei ole se, mikä on tarkoitus olla useimmissa mobiililaitteissa.

Mobiiliversiossa ei pääsääntöisesti ole tarkoitus olla koko leveyttä vievää kiinteää elementtiä paitsi 1280x800 viewport-arvon omaavissa laitteissa.

Useimmissa tablet-laitteiden viewport-kategoriaan kuuluvissa mobiiliversiossa vain oikean reunan 96x260px alue seuraa mukana. Se on oikean reunan sivupalkin kokoinen, joten rullatessa koko vasen reuna eli tekstialue on vapaa.

Sivujen tarkoitus oli laitteessasi käyttäytyä näin:
Aihe: Sivuston mobiiliversio – Mobile version of this site | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Seuraava kommentti näyttää valikot avattuina. Päävalikko avautuu koko selainikkunan antamaan korkeuteen. Sen voi avata milloin tahansa eikä sen avaaminen siirrä käyttäjää minnekään. Sama koskee apuvalikkoa.

Kuvakaappaukset ovat 1920x1200px näytöllä, jonka viewport-arvot ovat 600 x 960px.

laitoin ehdot

@media screen and (max-height:768px) and (min-width:824px) and (max-width:1260px){/*iPad, HD-tablet-laite, One Plus 3 + eräät muut kännykät (412 x 824,412 x 847,480 x 853)*/
​

Tuon on tarkoitus kattaa myös One Plus 3. Katsoin taulukosta One Plus 3, jonka viewport-arvot ovat 480 x 853px. Arvot ovat tuon rajauksen sisällä.

Minulla ei ole tietoa One Plus 3:n viewport-arvoista, joten en voi sitä huomioida.

Tarkoitus on, että kuvakaappauksen kaltainen näkymä on laitteissa, joilla pystysuuntainen viewport-arvo on vähintään 800px.

Tosin olen ajatellut, että kaikilla yli 783 viewport-arvon leveyksillä ei mobiilissa olisi lainkaan leveää yläpalkkia vaan se olisi vain tietokoneversiossa. Tätä muutosta en ole kaikille mobiililaitteille saanut aikaiseksi. Siksi tuossa on myös max-width-rajaus.

Mobiiliversiossa ns. pudotusvalikoita ei ole lainkaan, sillä se ei ole mobiililaitteissa toimiva ratkaisu. Itse asiassa äärimmäisen huono kosketusnäytöllä (toimivat kunnolla vain ja ainoastaan laitteilla, joilla on niitä varten suunniteltu kynä ja sivuja selataan kynän kanssa).

Tietokoneessa ns. pudotusvalikot on kivat käyttää ja niillä on tilaa olla aina käytettävissä. Tietokoneessa puolestaan mobiilityyppiset rullattavat valikot ovat epämiellyttäviä. Tietokoneversio kaipaa erilaista toimivuutta.

Rajaukset perustuvat @media ... ohella selaintunnistetietoihin, joten asia on aika monimutkainen. En vain onnistunut luomaat One Plus 6 sille sopivaa rajausta. En todellakaan ymmärrä, miksi rajaukseni eivät toimi.

 

[apek]

Eihän tuo nyt oikein toimiva sivu ole tällä hetkellä.

 

[Tapio X]

En nyt ymmärrä, mikä siinä sitten mättää. Kaikki toiminnot löytyvät sivun ala- tai yläreunasta ja ne ovat aina käytettävissä. Kun ovat reunoissa, ei pitäisi visuaalisesti haitata.

Tuon kuvan perusteella jollakin laitteella ei näyttäisi olevan pieniä ongelmia, koska harmaat reunat menevät painikkeiden päälle ja vasemmalla on tyhjää.

Ainakaan testikännykässä (Samsung Galaxy J5) ei ollut toimintaongelmia. Valikko ja apuvalikot ottivat koko ruudun ja marginaalit olivat kohdillaan.

Yhden suunnitteluvirheen korjasin. Olin määritellyt apuvalikon korkeuden väärin. Apuvalikko ottaa kaiken tilan, mikä on käytettävissä painikkeiden välissä, mutta painikkeet näkyvät aina kun apuvalikon avaa.

Apuvalikossa linkeillä on tilaa, mutta ehkä pitää määritellä linkit lohkoiksi, että toimisivat helpommin. Siitä löytyy tietyt olennaiset sivut, olennaiset toiminnot sekä tilanteen mukaan vaihtuvat toiminnot. Käyttäjän ei tarvitse hakea mitään mistään muualta kuin pää- ja apuvalikosta. Mistään muualta niitä ei tavanomaisella kännykällä enää löydäkään.

Apuvalikossa on kuvassa näkyvässä tilanteessa pikavalintoina:

1. Paluu aiheluetteloon
2. Linkki uuden aiheen tekemiseen
3. Uuden viestin kirjoittamismahdollisuus säikeen loppuun (vastauksen voi laittaa myös yksittäisen kommentin perään)

Apuvalikossa on käyttöliittymätoimintoja, jotka saattavat puuttua tai olla väliaikaisesti kateissa.

Kokeilin käyttää painikkeita yhdellä kädellä. Onnistuin. Kun mitään ei tarvitse etsiä mistään, mitään turhaa vieritystä ei ole.

Päävalikko vie melkein koko ruudun piilottaen alaosan painikkeet. Pitäisikö madaltaa?

Huomasin, että valikoissa linkit olivat liian lähellä toisiaan. Sormi valitsi helposti väärän linkin. Laitoin linkeille sekä ylös että alas mielestäni sopivat padding-arvot.

Tablet-laitteella ongelmaa ei ollut.

 

[jooseppi79]

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

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

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

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

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

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

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

Mutta onko kaikki muumit laaksossa? Kenen penaalista puuttuu kynä? Miksi käyttäjän pitäisi päästä sivun loppuun?

 

[nnaku]

Näyttää siltä, että keskitit jossakin ohjelmassa tuon.

Jep Google chrome dev-tools

Jos muutat yhtä kohtaa, sillä on kumulatiivisia seurauksia.

Tämä erottaa ne jyvät akanoista. Ei pitäs ikinä edes päätyä tollaiseen tilanteeseen, missä minnekkään ei voi koskea tai kaikki perkelöityy!
Siksi kehoitinkin sua dumppaaman projun ja aloittamaan vähän hitaammin alusta. Säästät siinä aikaa ja saata jopa oppiakin jotain, koska voit olla varma että asia x tapahtui sinun käskystäsi. Eikä siksi että se ehkä on 3-4 viimeviikon aikana kirjoitetun sillisalaatin summa.

 

[apek]

En nyt ymmärrä, mikä siinä sitten mättää. Kaikki toiminnot löytyvät sivun ala- tai yläreunasta ja ne ovat aina käytettävissä. Kun ovat reunoissa, ei pitäisi visuaalisesti haitata.

Tuon kuvan perusteella jollakin laitteella ei näyttäisi olevan pieniä ongelmia, koska harmaat reunat menevät painikkeiden päälle ja vasemmalla on tyhjää.

Jos viittasit tuohon minun kuvaan, niin en puhu tuosta sinun tekemästä valikosta, vaan siitä että täytyy scrollata koko sivun verran, ennen kuin sisältö alkaa. Niin paljon on korkeussuunnassa tyhjää ja huonosti sijoitettuja elementtejä.

 

[Tapio X]

Sisällössä on kyllä ylhäällä kieltämättä tyhjää. Laitteesta riippuen suhteellinen skrollausmäärä tietenkin vaihtelee.

Sivun yläosan lisävalikko ja leivänmurut oli tarkoitus laittaa ylemmäksi, mutta tuli vastaan z-index-ongelma. Kun siirsin aivan yläpalkin alle, linkit eivät toimineet. En keksi, mikä aiheuttaa z-index-ongelman. Oli pakko jättää tyhjä tila yläpalkin sekä sen alapuolella olevien linkkien väliin. Sitä itseänikin ärsyttävää väljyyttä aiheuttavaa asiaa en osaa tiivistää.

Suhteellisen väljästi sijoittelu oli sinänsä tarkoituksellista. En ajatellut väljyyden olevan kovin suuri ongelma. Olet kyllä oikeassa, että yläosan elementit on turhan väljästi sijoiteltuja. Niin ahtaminen kuin liika väljyyskin ovat huonoja asioita. Koska ongelmia on ennestään, en nosta tätä prioriteeteissa kovin korkealle.

Väljyys myös sitä, että foorumin ohella on muita sivuja, joissa on väljä sijoittelu. Myös niiden yläosaa pitäisi tiivistää.

Muutin apuvalikkoa niin, että se ottaa maksimitilan. Laitoin niin, että tilankäyttö alkaa alhaaltapäin. Näin kaikki linkit ovat mahdollisimman lähellä peukaloa. Voi näyttää vähän hassulta, mutta tämäkin muutos tehty käyttäjää ajatellen. Jos nyt joku käyttää yhdellä kädellä ja tekee valintoja peukalon avulla, sekin on otettu huomioon.

Koska ylös/alasnuolet olivat niin pieniä, nostin niiden korkeutta. Vaikka ne ovat kapeita, korkeus tuo lisää kosketuspintaa ja väärän painikkeen painamisen riski vähenee.

Jos jätetään ylös/alapainikkeet pois, esillä olevaa käyttöliittymään on useimmilla mobiililaitteella pystysuuntaan laite sijoitettuna vain kolme painiketta. Käyttöliittymä on karsittu minimiin, mutta siinä on maksimaaliset ominaisuudet. Peukaloakin täytyy siirtää vain valikon ja haun vuoksi oikeaan ylälaitaan.

Jossakin vaiheessa laitan apuvalikkoon ikoneja toimintoihin, joihin saa järkevät ikonit. Kaikkiin ei millään saa järkeviä ikoneja ja eivät kaikki linkit niitä kaipaakaan.

Pientä säätämistä apuvalikossa riittää loputtomiin.

Minua pyydettiin luomaan footer-osio. Sitä ei nyt ole lainkaan, mutta saatan laittaa muutamat lisävalikon toiminnot tuplana footeriin. Sivusto ei sinänsä tarvitse footeria lainkaan, mutta ihmiset ovat tottuneet, että se olemassa, joten ehkä se pitää lisätä.