(Jatkoa aiheeseen Miksi Ohjelmointiputka on niin tylsä paikka nykyään?)
ulkoasuakin saisi uudistaa.
p99o kirjoitti:
ulkoasuakin saisi uudistaa.
Miten?
vesikuusi kirjoitti:
p99o kirjoitti:
ulkoasuakin saisi uudistaa.
Miten?
Ainakin kännykälläni luettaessa teksti on melko pientä, jos sivu on skaalattu siten, että keskustelun yksi rivi mahtuu kerralla kuvaruudulle.
Asiaa on puitu ennenkin: https://www.ohjelmointiputka.net/keskustelu/
Nykyversion saisi kohtalaisen helposti responsiiviseksi.
Tuotanoin. Nykyinen versio on aika responsiivinen, oletko kokeillut?
vesikuusi kirjoitti:
Tuotanoin. Nykyinen versio on aika responsiivinen, oletko kokeillut?
Puhelimella ei ole responsiivinen. Pystyasennossa matsku niin pientä että aika hankala käyttää. Vaakana toimii suht OK minun silmään (5,2" ruutu).
No tuo on totta. Enpä ole portraitissa ennen yrittänyt putkaa lukea.
vesikuusi kirjoitti:
Tuotanoin. Nykyinen versio on aika responsiivinen, oletko kokeillut?
Olen kokeillut, ja onhan se. Sivusto ei kuitenkaan mobiililaitteella tunnu kovin responsiiviselta.
Joitakin huomioita:
1) Minimileveydestä pitäisi saada hieman pienempi.
2) Sisällön asettelu ei saisi rikkoutua, kun sivupalkki on auki.
3) Koodin olisi lisättävä meta viewport -tägi.
HTML5 kirjoitti:
Nykyversion saisi kohtalaisen helposti responsiiviseksi.
Onko näin? On helppo lisätä pari määrettä ja tehdä sivusta kohtalaisen ”responsiivinen”, mutta esimerkiksi keskustelun etusivun ja alueiden taulukot eivät asetu nätisti vaikkapa 320 pikselin leveyteen, joten ne täytyisi toteuttaa jotenkin toisella tavalla. Ilomielin otan vastaan esimerkin, jossa on muutamia keskeisiä sivuja (keskustelun etusivu, itse keskustelu kooditageineen ym.) täydellisen responsiivisesti toteutettuina ilman purkkaviritelmiä tai erillisiä versioita eri tilanteisiin. (Ainakin Googlen Webmaster Tools muistaakseni vaatii mobiiliystävälliseltä sivulta viewport-määrettä width=device-width, joka voi kännykällä tarkoittaa 320 pikselin leveyttä.)
Toteutin nyt kuitenkin kokeellisesti edellä mainitut kolme kohtaa. Saa kommentoida.
p99o kirjoitti:
ulkoasuakin saisi uudistaa.
Nykyinen ulkoasu on neutraali ja mielestäni selvä. Mitä uudistamisella siis saavutettaisiin? (Teknistä toteutusta tietenkin voidaan hioa, mutta se on eri asia.)
Nyt näkyy hyvin kännykällä. Kiitos!
Jaska kirjoitti:
Nyt näkyy hyvin kännykällä. Kiitos!
Mielenkiintoista, sillä minulla on Ohjelmointiputka toiminut aina ennen hyvin puhelimella. Nyt sen sijaan sivupalkki näkyy koko sivun levyisenä ja teksti levittäytyy aivan liian leveälle, jotta sitä olisi mukava lukea. Käytössä minulla on Nexus 5 ja Firefox.
Ainoa ongelma, joka minulla on Putkan kanssa ollut on se, että Putka uudelleenohjaa uudet viestit -sivulla olevat linkit, jolloin puhelimeni ei merkitse alkuperäisiä linkkejä vierailluiksi.
Hennkka kirjoitti:
Nyt sen sijaan sivupalkki näkyy koko sivun levyisenä ja teksti levittäytyy aivan liian leveälle, jotta sitä olisi mukava lukea. Käytössä minulla on Nexus 5 ja Firefox.
Mulla on kanssa Nexus 5 ja ongelma oli CM Browserin kanssa. Testasin uutta sivua Firefoxilla ja minulla sivu näkyy hyvin myös sillä. Ainoastaan tuosta logosta näkyy "On error goto Ohjelmointiput" eli se ei skaalaudu.
Muutin juuri äsken skaalausta vielä vähän (Jaskan ja Hennkkan testien välissä). Kuitenkin edelleen ainakin alueen viestilistaus ja Uudet viestit -sivu ovat liian leveitä pienimmille laitteille. Tähän ei taida olla mitään helppoa ja hyvää ratkaisua.
Sivupalkin näyttäminen koko ruudun levyisenä pienillä laitteilla on nähdäkseni tarpeellista mutta hieman rumaa. Kuitenkin oikeassa yläkulmassa on nappi, josta turhan palikan saa piilotettua, joten haitta ei ole jatkuva.
Koska ei ole – ainakaan toistaiseksi – hyvää tapaa tehdä responsiivista taulukkoa, olen antanut taulukoiden valua sivun reunan yli ja määrittänyt taulukolle valkoisen taustavärin. Tätä kirjoittaessani huomasin, että Metabolix on menetellyt samoin.
Metabolix, meta viewport -määreessä pitäisi lukea initial-scale, ei initial-scaling.
Sivu tosiaan skaalautuu nyt paremmin pienillä näytöillä!
Leveiden taulukkojen suhteen (ainakin tuo viestilistaus) kannattaa kokeilla laittaa taulukko wrapperin sisään mikä saa automaattisen vaakascrollin jos sisältö menee yli.
Tällein matsku pysyy linjassa muun sisällön kanssa ja pelkästään ylimenevä osa saa vierityspalkin.
Mm. Bootstrap hoitaa homman tällä tavalla: http://getbootstrap.com/css/#tables-responsive
Nämä tyylit pois:
/* ei ole suositeltua muuttaa fonttikokoa html-elementissä,
koska se sotkee mm. suhteelliset breakpointit */
html {
font-size: 10pt;
}
/* fonttikoon pienennys entisestään on myrkkyä luettavuudelle pienellä näytöllä! */
@media all and (max-width: 450px) { html { font-size: 9pt; } }
@media all and (max-width: 400px) { html { font-size: 8pt; } }
@media all and (max-width: 350px) { html { font-size: 7pt; } }Tilalle:
/* 10pt = ~13px / 16px = tämä */
html body {
font-size: 0.8125em;
}
/* kun alle 480px (nyt kun ei olla sörkitty html-elementin fonttia niin 1em = 16px) */
@media all and (max-width: 30em) {
/* turha tilantappaja */
html {
padding: 0;
}
/* turhia */
body, #logo {
border-radius: 0;
}
/* skaalataan 480px maksimikokoon */
#logo {
background-size: 480px;
height: 54px;
}
#linkkipalkki {
padding: 0;
text-align: justify;
}
#linkkipalkki li:before {
content: none;
}
#linkkipalkki a {
display: inline-block;
padding: 0.5em;
}
#alueet,
#aiheet {
display: block;
border: 1px solid #E7E7E7;
margin: 1em -0.75em;
width: auto;
}
#alueet thead,
#aiheet thead {
display: none;
}
#alueet tbody,
#alueet tr,
#alueet td,
#aiheet tbody,
#aiheet tr {
display: block;
}
#alueet tr + tr,
#aiheet tr + tr {
border-top: 1px solid #E7E7E7;
}
/* ylimääräinen tyhjä tila tekee luettavuudelle hyvää */
#alueet td {
border: none;
display: block;
padding: 1em;
}
#alueet td:first-of-type {
font-weight: bold;
font-size: 1.25em;
padding: 0.5em;
}
/* kikka */
#aiheet tr {
text-align: justify;
}
#aiheet td {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
padding: 0.25em 1em;
text-align: left;
width: 100%;
}
#aiheet td:first-of-type {
font-size: 1.125em;
font-weight: bold;
padding: 0.5em;
}
/* kikka taas */
#aiheet td:nth-of-type(2),
#aiheet td:nth-of-type(3) {
vertical-align: top;
width: auto;
}
#aiheet td:nth-of-type(3):after {
content: ' viestiä';
}
}Nämä kohentaisi vasta yläpalkkia, keskustelun etusivuja ja keskustelujen listausta, mutta olisipahan suunta kohti parempaa mobiilikokemusta.
Merri kirjoitti:
fonttikoon pienennys entisestään on myrkkyä luettavuudelle pienellä näytöllä!
Toisaalta myös sivusuuntainen skrollaaminen on myrkkyä, joten jotain täytyy tehdä. Itse ainakin mieluummin luen pientä kuin rullailen ristiin rastiin. (Tietenkin optimaalista olisi saada sivusta sellainen, että isompi teksti mahtuu ilman skrollausta, mutta siinä on ongelmansa.)
Merri kirjoitti:
turha tilantappaja
Poistin nyt joitain turhia täytteitä.
Merri kirjoitti:
#aiheet td:nth-of-type(3):after { content: ' viestiä'; }
Tällaiseen törmäsinkin jo selvittäessäni ”responsiivisia” vaihtoehtoja. Mielestäni tuo on iljettävä purkkaviritelmä. Tyylien pitäisi toimia, vaikka sivun rakennetta hieman muutettaisiin. CSS:n sekaan siis ei pitäisi joutua kirjoittamaan sisällön kuvausta tai sarakkeiden määriä. Eikö nykytekniikka todellakaan tarjoa järkevämpiä toteutustapoja?
Yksi vähän siedettävämpi viritelmä voisi olla div ja dl, jolloin voisi isolla ruudulla muuttaa dd:t sarakkeiksi ja piilottaa dt:t. Silti on aika rumaa.
Laita teksti sinne omaan span-elementtiin ja piilota se kun hypätään pois mobiilista. Käytin pelkkää CSS:ää vain koska oletin ettei HTML:ään haluta koskea.
Vaakasuuntaisesta skrollauksesta pääsee eroon sillä, että antaa periksi halulle pitää asioita rinnakkain. Sitten on toki koodit ja sisällölliset taulukot, mutta ne sitten voi pistää vaakaskrollattaviksi erikseen. Kunhan perusleiska ei vieri vaakasuuntaan niin se riittää.
Nykyisellään isomorfiset sivut käyttäen esim. Reactia mahdollistavat sivun rakenteen muokkaamisen tarpeiden vaatimalla tavalla. Esimerkiksi sain tässä juuri aikaiseksi töissä komponentin, joka esittää datan taulukossa jos on tilaa ja muutoin näytetään haitari, josta saa avattua vähemmän oleelliset lisäinfot tarvittaessa. Se on sitten oma asiansa, onko mitään haluja lähteä kohti modernin JavaScript-kehittämisen maailmaa PHP-pohjaisella sivustolla.
Nyt on teksti hyvän kokoista kännykällä, välissä kävi kyllä liian pienenä itsellekkin, vaikkei näössä mitään vikaa muuten ole.
Tavallinen teksti on aivan liian isoa, koodilainauksien teksti aivan liian pientä samoin kuin tän kommenttilaatikonkin. Aiemmin kaikki oli kohdillaan.
Tuunasin vielä fonttikokoja ja vähän muuta. Toivottavasti nyt sopii. Poistin myös aihelistasta kohtalaisen turhan viestimäärätiedon. Taulukkomuoto pysyy.
Merri kirjoitti:
Käytin pelkkää CSS:ää vain koska oletin ettei HTML:ään haluta koskea.
Erikoinen oletus. Tietenkin lähtökohta on, että sivusto olisi helposti ylläpidettävä, ja sitä ei auta, jos asiat ovat ihan väärässä paikassa.
Metabolix kirjoitti:
Tällaiseen törmäsinkin jo selvittäessäni ”responsiivisia” vaihtoehtoja. Mielestäni tuo on iljettävä purkkaviritelmä. Tyylien pitäisi toimia, vaikka sivun rakennetta hieman muutettaisiin. CSS:n sekaan siis ei pitäisi joutua kirjoittamaan sisällön kuvausta tai sarakkeiden määriä.
Kyllä se sanonta menee yleensä toisin päin, eli että tyylejä pitäisi voida vaihtaa ilman tarvetta koskea html-runkoon. Tekstin syöttäminen css:n kautta on silti munkin makuuni huono ratkaisu.
Jälkilöylyttelynä tulee, mutta nyt kyllä arvoisa herra Metabolix, oletko yhtään katsonut, millaisesta HTML:stä Putka koostuu ennen kuin kritisoit CSS:ää purkkaviritelmäksi sen pohjalta, että sarakkeisiin pitää kohdistaa :nth-of-typellä?
Valitsimet ovat toisarvoisia. Jos niistä haluaa siistimpiä, niin kirjoittaa sinne HTML:ään classeja, jolloin CSS:ään voi laittaa fiksummat valitsimet tilalle! On aivan tolkuttoman typerää syyttää valitsimia huonoiksi. Jos valitsin on huono, niin vika on jossain muualla kuin valitsimessa (jos vika ei ole valitsimen kirjoittajassa, niin sitten se on HTML:ssä tai toisissa valitsimissa).
Jos haluaa siistiä CSS-tyylittelyä minimaalisin ongelmin, niin suosittelen tutustumaan BEMmiin. Sitä noudattamalla saa pilkottua sivuston eri osaset fiksuiksi osakomponenteiksi ja samalla kullekin osaselle saa classin.
Parasta valitsinten teossa olisi päästä siihen, että jokaiseen asiaan voi viitata suoraan vaan yksinkertaisella valitsimella kuten html, body tai .thread__title, koska heti kun alkaa käyttää tarkempia valitsimia kuten html *, niin sitten pitää käyttää tärkeämpää valitsinta kuten html body, koska html * yliajaa pelkän bodyn. BEM on verrattain tehokas työkalu ohjaamaan kehittämistä suuntaan, jossa on lähes aina mahdollista käyttää mahdollisimman yksinkertaista valitsinta. BEM:n suurin ongelma onkin sitten siinä, että classit voivat olla hyvin verbooseja:
"accordion-title accordion-title--animated accordion-title--checked accordion-title--enabled accordion-title--first accordion-title--content"
Gzippaus kylläkin hoitaa koko-ongelman. Ja eihän HTML:ää ihmisille tehdä, vaan koneille.
Merri kirjoitti:
oletko yhtään katsonut, millaisesta HTML:stä Putka koostuu
Olen. Koska selvästi en ymmärrä nykyaikaisten nettisivujen tekemisestä mitään, voisitko vielä täsmentää, mikä siinä HTML:ssä noin totaalisesti sitten mättää? (Ei tarvitse kopioida koko sivua tähän, voit kuvailla parilla sanalla tai laittaa yksityistä palautetta.)
Merri kirjoitti:
ennen kuin kritisoit CSS:ää purkkaviritelmäksi
Estääkö huono HTML mielestäsi jotenkin CSS:n huonouden, vai millä tavalla huono HTML-koodi oikeuttaa vielä huonomman CSS-koodin? Vaikka yksi asia olisi pielessä, ei se ole mikään syy tehdä tahallaan muitakin typerästi.
Merri kirjoitti:
Valitsimet ovat toisarvoisia. Jos niistä haluaa siistimpiä, niin kirjoittaa sinne HTML:ään classeja, jolloin CSS:ään voi laittaa fiksummat valitsimet tilalle! On aivan tolkuttoman typerää syyttää valitsimia huonoiksi.
Olen täysin eri mieltä. CSS-koodia voi arvioida ihan samanlaisin perustein kuin muutakin koodia. Hyvä koodi on esimerkiksi helppolukuista ja ymmärrettävää ilman pitempää perehtymistä. Tämän takia :nth-of-type(3) on samalla tavalla huono valitsin kuin $local_variable_3 on huono nimi muuttujalle. Et varmaan sentään väitä, että muuttujien nimet ovat toisarvoisia ja että $local_variable_3 on yhtä hyvä kuin $viestien_määrä?
Merri kirjoitti:
Jos haluaa siistiä CSS-tyylittelyä minimaalisin ongelmin, niin suosittelen tutustumaan BEMmiin.
Hieno käytäntö, mutta tuo nyt ei silti ratkaise juuri mitään todellista tyylittelyn ongelmaa. Yhtä hyvin voisi sanoa, että jos haluaa hyvää PHP-koodia, kannattaa lukea PHP:n tyyliopas – joka ei siis myöskään opeta varsinaista ohjelmointia vaan ainoastaan nimeämis- ja muita muotokäytäntöjä.
jos maagiset merkkijonot ja muut vaivaavat, voi aina käyttää vaikka less:iä tai sass:ia, ja tehdä saman asian muuttujilla.
/* LESS */
@amount-of-messages-col: 3;
@amount-of-messages-text: ' viestiä';
#aiheet td:nth-of-type(@{amount-of-messages-col}):after {
content: @amount-of-messages-text;
}/* SASS */
$amount-of-messages-col: 3;
$amount-of-messages-text: ' viestiä';
#aiheet td:nth-of-type(#{$amount-of-messages-col}):after {
content: $amount-of-messages-text;
}Koodi ainakaan tablettini selaimella ei ole nyt tasalevyistä, mikä on hieman häiritsevää.
Metabolix kirjoitti:
Merri kirjoitti:
Valitsimet ovat toisarvoisia. Jos niistä haluaa siistimpiä, niin kirjoittaa sinne HTML:ään classeja, jolloin CSS:ään voi laittaa fiksummat valitsimet tilalle! On aivan tolkuttoman typerää syyttää valitsimia huonoiksi.
Olen täysin eri mieltä. CSS-koodia voi arvioida ihan samanlaisin perustein kuin muutakin koodia. Hyvä koodi on esimerkiksi helppolukuista ja ymmärrettävää ilman pitempää perehtymistä. Tämän takia :nth-of-type(3) on samalla tavalla huono valitsin kuin $local_variable_3 on huono nimi muuttujalle. Et varmaan sentään väitä, että muuttujien nimet ovat toisarvoisia ja että $local_variable_3 on yhtä hyvä kuin $viestien_määrä?
Olen eri mieltä kanssasi valitsimen nimeämisestä. Kuinka edes voit väittää :nth-of-type(3) valitimen nimeämistä samalla tavalla huonoksi kuin $local_variable_3? :nth-of-type(3) kertoo hyvinkin selkeästi, että valittu elementti on kolmas kaksoispisteen edessä olevaa tyyppiä, kun taas $local_variable_3 ei kerro yhtään mistään, muusta kuin, että sen on paikallinen muuttuja ja mahdollisesti kolmas sellainen.
Täytyy sanoa, että nyt kun olen alkanut käyttää Ohjelmointiputkaa enemmän puhelimella, fonttikoko on liian pieni. Tekstin lukeminen särkee silmiä.
Metabolix kirjoitti:
Toisaalta myös sivusuuntainen skrollaaminen on myrkkyä, joten jotain täytyy tehdä. Itse ainakin mieluummin luen pientä kuin rullailen ristiin rastiin. (Tietenkin optimaalista olisi saada sivusta sellainen, että isompi teksti mahtuu ilman skrollausta, mutta siinä on ongelmansa.)
Mutta se ei toimi niin! Jos teksti on liian pientä, sitä pitää zoomata ja sitten joutuu siirtelemään edes takas.
Minä viisveisaan siitä, miten taulukot mahtuvat ruudulle. Liian pientä tekstiä on mahdotonta lukea miellyttävästi. Tyyliseikat ovat toissijaisia.
Toinen asia olisi, että "sivupalkissa" pitäisi näkyä uusin viesti ja linkki uusimpiin viesteihin.
Joo teksti on edelleen liian pientä, taisi jossain välissä olla vähän parempi, mutta itse ainakin joudun nykyään zoomailemaan ja sen jälkeen skrollailemaan, ennen näitä "parannuksia" en muista että tuota olisi joutunut tekemään.
Edit. Vaakatasossa kun lukee, fontti on luettavan kokoinen. Puhelin pystyssä liian pieni.
Omassa näössä ei pitäisi olla vikaa, ainakaan en ole muaalla huomannut :)
Omassa kännykässä teksti on nykyisellään minulle ihan sopivan kokoista sekä vaaka- että pystysuunnassa (näyttö 4,5", 1280 x 768px).
Sivupalkissa voisi minustakin olla linkki suoraan viimeisimpään viestiin. Nykyiselläänhän linkin osoite on muotoa https://www.ohjelmointiputka.net/keskustelu/
Lisäksi aiemmin oli muistaakseni näkyvillä myös ketjuun tulleiden viestien (tai vastausten) määrä, mutta nykyään ei. Ainakin minua kiinnostaisi nähdä viestien määrä, niin näkisi helposti onko edellisen käynnin jälkeen johonkin ketjuun tullut paljonkin uusia viestejä.
Mobiilissa ei taida enää pystyä näkemään "Uudet viestit" -osiota, eikä täten linkkiä viestilistaukseen, jona tuon osion otsikko toimii.
*edit*
Olin puusilmä, löytyihän sen tuosta keskustelu headerin alta, kuten muutkin linkit.
Mobiilissa kun kirjoittaa keskusteluun, niin ilmeisesti näppäimistön "työntämänä" toi esikatsele-nappi siirtyy teksti kentän päälle. Ja jää siihen vaikka näppäimistön "sulkisi". Tosin samaa ei tapahdu jos on toi tekstin esikatselu päällä.
Selaimena Chrome.
Oskuz kirjoitti:
Mobiilissa kun kirjoittaa keskusteluun, niin ilmeisesti näppäimistön "työntämänä" toi esikatsele-nappi siirtyy teksti kentän päälle.
Taitaa olla sataprosenttisesti selaimen bugi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.