Kvázi-reszponzív HUP

 ( trey | 2016. június 30., csütörtök - 7:40 )

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.

Hozzászólás megjelenítési lehetőségek

A választott hozzászólás megjelenítési mód a „Beállítás” gombbal rögzíthető.

Éljen éljen :)

+1

+1

+1

Várjuk, amilyen hamar csak lehet!!!
--
WP8.x kritika: http://goo.gl/udShvC

Éljen!

Kiváncsi leszek, hogy mennyire lesz használható a menü.

Pár kérdésem azért lenne:
- Ez a ráncfelvarrás járni fog Drupal verziófrissítéssel is?
- SSL-t is kapunk?

Köszi!

Üdv. bnv

Ssl... de jó kérdés!
Egyébként hurrá és köszönet!

SSL mar van, csak installalva nincs, trey szerint legalabbis :(

Erre kivántam utalni pontosan :D

Üdv. bnv

Tanúsítvány van, ezen a szerveren már nem lesz SSL. Olyan régi az OS + AMP stack, hogy teljesen értelmetlen lenne az SSL-t bekapcsolni. Épp elég szar így is.

Szervercsere, Drupal csere, OS stb. csere lesz. Majd akkor.

--
trey @ gépház

Aztán lehet tudni mikre lesznek cserélve a dolgok ?

Fedora 23, Thinkpad x220

... és mikor? :P :D

Üdv. bnv

Miért nem annak örülünk, ami most van? Ontopik valami? :)

--
trey @ gépház

Tudod milyen a magyar, ami van az sose jó :D

Fedora 23, Thinkpad x220

Persze, hogy tudom. Itt élek 43 éve ;)

--
trey @ gépház

Az on részét véleményem szerint fent már kifejtettem. Örvendetes a funkció, bár szerintem bővebben akkor fogunk tudni nyilatkozni ha kipróbálható lesz. :D
Örülök, hogy marad a dizájn, már nagyon megszoktam az évek alatt.

Üdv. bnv

Ha jól látom már kint van élesen a funkció. :) Szóval kipróbálható.

Köszönjük!

\o/

Szuper!

csak egy évtized kellett csak hozzá :D

És még egy évtized mire live-ra kerül! :)

Már deploy-oltam ;)

--
trey @ gépház

na bakker, akkor hackelhetek, szegény 1336 széles screenből ha még lejönnek a jobboldali tabok, akkor már azt hiszi, hogy mobilon vagyok, és kapok egy nagyon responzív minden egymás alatt oldalt :(

de leagalább ha becsukom, akkor reszponzívan normális lesz. :)

és tényleg! :) szuper, köszönjük a lelkes júzernek is :)

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

Az, hogy az ls - 1 felül mindig nyitva van eléggé zavaró lett. Akkor már inkább szendvics menü, pedig utálom.

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

hatalmas +1, engem is zavar kicsit.
meg az is, hogy a jobboldali sáv az oldal legaljára került.
szendvicsmenüt a népnek! :-D
--
blogom

+1 a fontméretnek, desktopon is első dolgom a nagyítás, 1600x900-as kijelzőm hiába tűéles, ha olvashatatlanul kicsik a betűk.

Hiába, úgy látszik itt mindenkinek tűéles a látása :)

Lehetne a "Belepes" block lathato a fooldalon, valamint a "friss tartalom" link a "ls -1"-ben?


Sic Transit Gloria Mundi

"Lehetne a "Belepes" block lathato a fooldalon,"

Látszik. Alul.

"valamint a "friss tartalom" link a "ls -1"-ben?"

Kész.

--
trey @ gépház

Elnezest, nem scrolloztam le az aljaig :}
Azt hiszem, a friss tartalom link a leggyakrabban hasznalt nalam. Koszonom.


Sic Transit Gloria Mundi

Nálam meg a tracker. Ha jól emlékszem valamelyik HUP kiegészítőben is fő helyen volt (van?).

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

Ami ugyanaz mint a friss tartalom.

--
trey @ gépház

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*

> mindig

Mindig? Miért lépsz egyáltalán ki? :)

Igazából magától lép ki:-D

*nyomokban mogyorót tartalmazhat*

Nem tudom, hogy más hogy van vele, de én a friss tartalom alatt csak a saját friss tartalmat szoktam nézni. Magyarul egy plusz kattintás.
Ha más is így van vele, akkor lehetne a saját friss tartalom a default a friss tartalomra való kattintás után.

Többször próbáltam érzékeltetni, hogy én is így vagyok vele.

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

+1

Mi is a mirror címe?

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

Te se nézted meg a videót, mi? ;)

--
trey @ gépház

biztos velem van a baj, de nekem se töltődik be, csak homokórázik a végtelenségig
--
WP8.x kritika: http://goo.gl/udShvC

Azt nem mondtam, hogy nincs tűzfal előtte :P

--
trey @ gépház

Mobilnetről ritkán nézek videót, arra nem elég a havi 6 giga.
Viszont látom már megy. Fura, hogy nem kell belezoomolni mint eddig :)

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

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...

[opsz, benéztem. csak ki kellett kapcsolni az évekkel ezelőtt beállított zoomot...]

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.

Én is 110%-on nézem az oldalt, és csodálkoztam hogy egy oszlopba csúszott az egész :(

125% zoom, 14" monitor, 2560x1440 - így jó

És mekkora nagyítást csinál maga az oprendszer? 14"-on ez a felbontás olvashatatlanul kicsinek tűnik.

Jaja, ott is van vagy 200% nagyítás. :)

Azért. Akkor technikailag, már ami a böngésződet illeti, te egy 1280x720-as felbontású monitoron nézed az oldalt :) És a device pixel ratio 2x-es.

én 125%-on nézem már évek óta :D A bithument szerintem még nagyobbal. Ez a két oldal már csak ilyen :)

+1
Nagyon hiányzott a reszponzivitás, de a font méret növelése nélkül -ami valamiért örök tabu téma- kicsit öngól.

Mekkora alapértelmezett fontméret lenne ideális?

--
trey @ gépház

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ó
--

12px lett

--
trey @ géphá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.

Én pl. default méretben olvasom. Valakinek 12, neked 14, de inkább 16.

Azért látod, hogy elég nagy a szórás...

--
trey @ gépház

Na akkor trey, nem maradt mas hatra, mint demokratikus modon megoldani a problemat: irj ki szavazast! :)

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.

Pont ez tetszik a HUP-ban. Jol olvashato a kicsi betumeretnek koszonhetoen.

Ezért lenne jó egy szavazás, mert én is így gondolom (nálam is a kis méret a kényelmesebb), de a felbontásokban nagy lehet a szórás.

Egy huszárvágással meg lehetne oldani ezt a problémát: pontban megadni a betűméretet, nem pixelben. Akkor jó közelítéssel mindenkinél ugyanakkorák lennének a betűk (feltéve, hogy az felhasználók dpi beállítása megfelelő).

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.

Valóban. Azért ez elég gáz szerintem, így semmi értelme a pt, mm és társai mértékegységeknek css-ben.

"Hány százalékos nagyításban olvasod a hupot?"

13 (hupper) * 150% (firefox)

14px szokott lenni mindenhol mostanában,az a bootstrap alapértelmezett mérete is pl. Szerintem az pont jól olvasható mobilon

Megnézted a képeket a cikkben? Szerintem mobilon tökéletes ez a méret, ami most van.

--
trey @ gépház

+1

Nem, mobilon neztem. Szerintem rettento kicsi :(

Hüvelykben mekkora mobilon?

--
trey @ gépház

4,7es mobil és 7es tab (álló).

Nem is elsősorban az olvashatosag a bajom, az csak desktopon, hanem hogy nehéz kattintani

Mobilon nekem ok ez a méret, desktopon kicsi. Gondolom a nagy dpi miatt, ez már a régi lenovomon is gond volt. Bár a Moto G is elég high dpi, de azon jó, legalábbis firefox-al.

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;
}

16 biztos nem lesz. 12 vagy 14. Én a 12 felé hajlok.

BTW: 1920x1080-ban olvasom a HUP-on a jelenlegi mérettel. Semmi bajom nincs vele.

--
trey @ gépház

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 :)

Mert treynek semmi baja nincs vele :)
Még.
--
♙♘♗♖♕♔

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

Ez nagyon jó és nagyon hiányzott

----
올드보이

+1, köszi!

--
Soli Deo Gloria

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

Szuper! Koszi :)

Nagyon jó lett!

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).

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

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)

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

Tegnap 13:09 óta használható ;)

--
trey @ gépház

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.

Azért indult ez a "fejlesztés", mert nem volt tökéletesen kezelhető mobilokon.

Kisebbre vettem. Megnéznéd így?

--
trey @ gépház

Tokeletes lett! Mind az allo tablet (768px) mind a fel fullHD ablak (960px).

Koszonom

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

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

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

Houston, van egy kis gond:

kép

Chrome Version 51.0.2704.103 m desktop

Üdv. bnv

Elvileg javítva (nálam jó).

--
trey @ gépház

Nem jobb a helyzet.

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

szoknom kell, az teny

a lap tetejen levo menu nem ok, a feliratok alja latszik csak

http://i.imgur.com/2eFVZYd.jpg

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

+1

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.

:)

.

Í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

igy sem?

https://codepen.io/surjithctly/pen/pLDwe

--
A vegtelen ciklus is vegeter egyszer, csak kelloen eros hardver kell hozza!

Na nézzük:

- Az opt out megoldás nem működik megfelelően. Akár ki akár bekapcsolom, most mobilon nem látszik.
- A fent jelzett hiba sem javult :(

(Holnap lövök képet.)

- Nehéz?

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

Múlt hét csütörtökön.

--
trey @ gépház