Kvázi-reszponzív HUP

HUP

Egyik HUP olvasónk, paksatamas önkéntes munkájának köszönhetően alakul a HUP reszponzív mobilos kinézete!

OnePlus One-on így fest:

Reszponzív HUP Reszponzív HUP

Némi kozmetikázás még van vele, de már most is jól használható. Egyelőre csak a mirror-on működik, de ha elkészül, akkor az éles oldalon is elérhető lesz.

( evone | 2016. 06. 30., cs – 11:29 )

csak egy évtized kellett csak hozzá :D

Nagyon jó lett, ám van pár dolog ami eszembe jutott:

- Egy lehelletnyivel nagyobb fontméret nem esne rosszul
- Az ls -1-ben lévő linkek koppintási területét ki lehetne húzni a konténer széléig? Igen bajos ekkora betüméretnél böködni a linkeket így.
- Az ls -1 csak a főoldalról (hup.hu) látszik. eléggé problémás így navigálni az oldalon imho.

Kb. ennyi :)

Üdv. bnv

Ez igy elegge kenyelmetlen, hogy le kell scrollozni mindig a bejelentkezeshez.

Egyeb eszrevetel, hogy az elfelejtett jelszo link tul kozel van a belepes gombhoz.

Az ls -1 lehetne alapbop bezarva, foloslegesen foglalja a helyet, ha nem hasznalod, ha meg de, rakatt es kinyilik.

Hirtelen ennyi

*nyomokban mogyorót tartalmazhat*

( BlinTux v | 2016. 06. 30., cs – 13:22 )

Az a baj, hogy amíg a fontméret nem emberi, addig így még rosszabb az oldal mint valaha. Ugye mert a zoomolás hatással van a reszponzivitásra is...

Elférne, csak mivel kicsit a betűk, rá kell zoomolni az oldalra, viszont így már aszt hiszi a reszponzivitásért felelős CSS, hogy nem fér el, ezért bekapcsolja a zoomoláskor hitt méretnek megfelelő CSS részt, ami egy oszlopba rakja a blokkokat. Tehát lehet hogy most mobilon fasza, de desktopon lett használhatatlan.

12-es.
#all {
background: #f6f6eb;
color: #000;
padding: 15px 15px 8px;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 12px;
}

ebbe meg a 0.87em et kellene kivenni:
.sidebar {
width: 150px;
/* font-size: 0.87em; */
padding: 0 5px;
}
ezzel tökéletes..

pch
--
http://www.buster.hu "A" számlázó
--

Szerintem 14px.
(bár személy szerint még ennél is kicsit nagyobbat tartok kényelmesnek, de ez már talán egyéni nyűg. Az index cikkek betűméretét és szellősségét tartom jól olvashatónak: font-size: 16px, line-height: 24px;)

De talán egy "Hány százalékos nagyításban olvasod a hupot?" felmérés segíthetne belőni a hup közönsége számára ideális méretet.

Ezért is írtam, hogy szerintem, illetve hogy egyéni nyűg. De abban talán a többség egyetért, hogy a jelenlegi default nagyon kicsi. Ha megnézed a nagyobb látogatottságú website-okat, mind relatíve nagy betű méretet használnak. Fontos a _kényelmes_ olvashatóság. Én is elolvasom a legkisebbet is, de fárasztó a szememnek. Ráadásul ma már nem ritka a nagyobb PPI akár laptopokon, akár asztali monitorokon is. Egy 17"-os CRT-n 1024x768-as felbontáson (~74 PPI) biztos jó volt a 10px, most per pillanat egy 14" 1600x900-as laptopon nézem (~130PPI) és csak hunyorogva tudom elolvasni, 150%-ra húzom fel, hogy jó legyen.

Ez nem így működik. 12pt = 16px, akármilyen monitoron vagy dpi-vel nézed, pont azért, mert régen valakiknek mániája volt a pixel perfect dizájn, és nem tetszett nekik, hogy bizonyos környezetben máshogy nézett ki ugyanaz. (vagy hasonló, mindenesetre valamiért a pont itt nem dpi függő).

Amit érdemes csinálni, az az, hogy kell választani egy egészséges alapértelmezést, ami nem túl kicsi, nem túl nagy (14, 16px), én személy szerint hagynám, hogy a böngésző alapértelmezett fontmérete érvényesüljön, ez a többségnek jó, akinek mégis nagy, az tud zoomolni ki vagy be.

Szerintem az alap betűméret lehetne a böngésző alapértelmezése (ami 16px, de beállíthatja az ember magának nagyobbra, kisebbre) Címsorok ennél százalékosan nagyobbak, apróbetűs részek százalékosan kisebbek.

Ezt használom: 


body, 
html {
    font-size: 1em;
}

#top-nav ul, 
#all,
#top-nav, 
#top-nav a, 
.sidebar .block .content, 
.node .links, 
input[type=text], 
input[type=password], 
select {
    font-size: inherit;
}

Akkor marad továbbra is a css felülírás, és a zoom :) Én is fullhd-n vagyok egy 22 inches monitorral. Nem mondom, hogy ha akarnám ne tudnám elolvasni, de kényelmetlen, bele kell bújni a monitorba. Minek után a fél web 14-16px-t használ nem igazán értem miért ragaszkodtok a pöttöm betűkhöz :)

A fontméret növelésre szavazok én is. Az általam látogatott összes weboldal jól olvasható desktopon és mobilon is (már amelyiknek van mobil nézete) csak a hup-on kicsik a betűk. Ez desktop Chrome-on megoldható a csak erre az oldalra vonatkozó nagyítással (125%), de mobilon nincs ilyen (nem találtam). Így akármennyire örülök a hup mobil nézetnek, az öröm nem teljes :(

--
Soli Deo Gloria

( Kayapo | 2016. 06. 30., cs – 13:41 )

Ez nagyon jó és nagyon hiányzott

----
올드보이

( winben | 2016. 06. 30., cs – 13:44 )

Tök jó lenne a jobb és bal hasábot affixálni, mert ha hosszabb tartalmat görgetsz akkor elfogy szélről a tartalom.

És a betűméretet feljebb kéne venni, igen.

---------------------------------------
Devmeme - fejlesztői pillanatok

( cherockee v | 2016. 06. 30., cs – 20:26 )

Köszönöm szépen paksatamas-nak és trey-nek, klassz lett. Egyúttal szavaznék a 12-es vagy akár kisebb betűméretre, semmiképp sem a 16-osra (szerintem cikkben jó lehetne, de comment-ekben tájékozódásra nem, a változó betűméret pedig fura megoldás lenne).

( miska74 (nem ellenőrzött) | 2016. 06. 30., cs – 22:43 )

Tökéletes 5,5"-on.Nem kell koppintgatni a nagyításért.Köszönet érte.

( Rackshee | 2016. 07. 01., p – 08:35 )

Me likey.

----
"Mert nincs különbség: mindenki vétkezett, és híjával van az Isten dicsőségének. Ezért Isten ingyen igazítja meg őket kegyelméből, miután megváltotta őket a Krisztus Jézus által." (Róma 3.22-24)

( nexudes v | 2016. 07. 01., p – 10:25 )

Köszönjük, remélem nemsokára használatba is lehet majd venni.
Jobban várom, mint a WOT frissítést :)

( Czo v | 2016. 07. 01., p – 11:51 )

Olyan iranyu tervek vannak, hogy 768 px felett ne ugorjon at mobil nezetbe? Retina iPaden tokeletesen olvashato volt allo nezetben az oldal, most viszont ott mar megkapom a mobilnezetet. Tovabba desktopon rendszeresen 960 pixelben olvastam a hupot (1920px / 2) es most itt is a mobilnezet jon. Esetleg css helyett tenyleges telefon user agentet figyelni csak? iPaden a weboldalak 99%-anal tokeletes lenne a desktop nezet.

---
Apple iMac 27"
áéíóöőúüű

"Esetleg css helyett tenyleges telefon user agentet figyelni csak?"

Jaj, ne! Még nem találkoztam olyan (mobil) böngészővel, ahol oldalanként lehetne állítani az user-agentet.

Szvsz a legegyszerűbb ha a domain/url tárolja hogy melyik nézetet akarja a kedves felhasználó, mondjuk tablet.hup.hu url alatt a másikat kapja. (Meg ezen felül egy süti is, persze)

Az a baj, hogy mind az Androidos Chromeban, mind az iOSes Safariban van egy olyan opcio, hogy "asztali oldal kerese", ami abbol all, hogy mobil user agent helyett, desktop user agentet kuld a bongeszo. Ez pl nem mukodik akkor, ha az oldalak a viewport merete alapjan probaljak kitalalni, hogy en mit szeretnek. Az teny, hogy a hup.hu korabban tokeletesen kezelheto volt mobilrol, a kozepso hasab bezoomolva mind a 3.5" mind a 4.7"-es iPhoneomon olvashato volt, mindenhol mashol viszont a desktop oldalt hasznaltam, de ritkan volt 1000px-nel szelesebb a brozer ablaka.

---
Apple iMac 27"
áéíóöőúüű

szerk:
A masik domain azert nem jo otlet, mert akkor meg kell oldani az eszkozfuggo redirectet is. Teszemazt elbookmarkolok valamit tableten, ugyonaz a bookmark desktop oldalt hozzon desktopon, es mobil oldalt mobilon. (iCloud sharelt bookmarkok pl), vagy egyszeruen, valaki kuld egy linket es nem olyan eszkozon neznem meg, mint amirol o linkelte.

( uid_15480 v | 2016. 07. 01., p – 12:06 )

A friss eseményeket/fórumtémákat jelző blokk (az oldal tetején) Fórum hasábjának témajelölői (Ubuntu Linux, Security-all, stb.) kaphatnának egy pár pixeles behúzást? Kilógnak nagyon a blokk széléig mobilon (trey! a te képeden is látható). :)

Köszi!

Üdv. bnv

( b | 2016. 07. 01., p – 15:19 )

Uh de jól néz ki. Thx!
--
GPLv3-as hozzászólás.

( uid_15480 v | 2016. 07. 02., szo – 10:51 )

Houston, van egy kis gond:

kép

Chrome Version 51.0.2704.103 m desktop

Üdv. bnv

( aga_et v | 2016. 07. 03., v – 13:57 )

Az igazság az, hogy eleve féltem tőle, hogy egyszer itt is lesz reszponzív hülyeség. Ha lehet, mobilon is desktop nézetet használok.
Itt ez az egész elég jól indult, örültem neki, aztán az egyéb kérésekkel egyre rosszabb lett.
Most már rendesen kényelmetlen a legtöbb minden ami ezzel járt.
A felső sávban mindig nyitva lévő 'ls - 1' -től kiráz a hideg. Főleg mióta minden egyes sorból az egész egy link lett az amúgy is rohadtvékony sávban. Sokszor sikerül görgetéskor véletlenül beleérni valamelyikbe, így fölöslegesen betölti. Az eddig működő, új hozzászólásra ugró opciót felülvágta, úgy kell kikeresnem a piros 'új' feliratot.
Trackernél eddig ott volt a négy normális elkülönülő hasáb mint a típus, tartalom, szerző, válaszok, legutóbbi beküldés. Legtöbbször már belezoomolás nélkül eltaláltam a friss hozzászólások 'szám új' linkjét, mégha pár mm méretű volt, akkor is. Most egymás alá került a topik szerzőjének neve és ez. Még belezoomolva is 50%-nyi, az esélye annak, hogy nem azt találom el amit akarok.
Ezekre gondolok:
Mobil landscape
Mobil portrait
Desktop

Kb. ezek a legzavaróbbak, meg az, hogy nincs esély visszaállítani az asztali nézetet mobilon, pedig az ilyen 'kvázi' reszponzív oldalakon van értelme. 10-14 colos tableten amúgy is értelmetlen, csak azért mert mobilböngésző fut rajta.

☆☼♫♪♫♪☼☆
AGA@
Fork portal és az egyik logóm :)

"Az eddig működő, új hozzászólásra ugró opciót felülvágta, úgy kell kikeresnem a piros 'új' feliratot."

Erre a hupperben van egész jó megoldás (első újhoz ugrás, új hozzászólások közti ugrálgatás, stb.)
Valójában ha nem muszáj nem is nyitom meg az oldalt mobilon a hupper hiánya miatt.

Fel is merült bennem a kérdés: Miért nincs még a hupper integrálva az oldalba? Nem volna rá igény? (nem minden böngészővel lehet kiegészítőket használni, lásd mobilok)

+1
2560*1440 a telefonom kijelzője.
És ebben a formában nagyon kényelmetlen rajta a hup.
Minden ami fontos, és azért van kirakva a jobb oldali sávra, hogy szem előtt legyen böngészésnél. Ezek most alulra kerültek. A mobilos böngészőkben meg ritka az End billentyű bármely megoldása.
- - - - - - - - - - -
"A fejlesztők és a Jóisten versenyben vannak. Az előbbiek egyre hülyebiztosabb szerkezeteket csinálnak, a Jóisten meg egyre hülyébb embereket. És hát a Jóisten áll nyerésre." By:nalaca001 valahol máshol

( bolond | 2016. 07. 04., h – 08:58 )

A beállítások közt lehessen be/kikapcsolni.

Alapértelmezésben legyen kikapcsolva, és legyen egy adott című oldal (kvazireszponzivhupotakarok.hup.hu), amit ha meglátogat valaki, egy sütibe elmentésre kerül, hogy neki kell ez a jóság/szarság (aztán a böngészőt vissza kell irányítani az előzőleg olvasott oldalra), így a be nem jelentkezettek is tudnak választani. Nyilvánvalóan szükség van egy nemakarokkvazireszponzivhupot.hup.hu oldalra is a kikapcsoláshoz.

:)

( uid_15480 v | 2016. 07. 04., h – 11:12 )

Így az eltelt idő alatt még két dolog jutott eszembe:

- Az ls -1 kaphatna valami dropdown menüt. A folyamatos nyitott állapot csak a lényeg elől veszi el a helyet.
- A kereső az oldal alján nagyon rossz helyen van, jó lenne a ha felköltözne.
- Ahogy mondjuk - megnövelt betűméret mellett a bejelentkező box linkkel/gombbal való helyettesítése sem lenne egy elvetélt ötlet (és akkor nem a főoldalon foglalná a helyet).

Üdv. bnv

"- Az ls -1 kaphatna valami dropdown menüt. A folyamatos nyitott állapot csak a lényeg elől veszi el a helyet. "

(Csak) CSS-ből nehéz megoldani, más egyelőre nem érdekel.

Viszont opcionális (opt-out) lett. Aki akarja, kikapcsolja magának a beállításai közt.

--
trey @ gépház

( samuf v | 2016. 07. 04., h – 13:48 )

Jól látom, hogy élesítésre került?