Én a reszponzív megvalósítást mindig utólag csinálom. Bár ha jó az oldalad felépítése akkor bármikor lehet.

A táblázatos oldalfelépítést életfogytiglani fegyház büntetéssel jutalmazzák.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

"akkor általában nem is nagyon kell foglalkozni a nagyobb képernyővel, mert az elemek nem csúsznak egymásra"

Igen tudom, hogy a keskenyebb képernyőn egymásra csúsznak ott szoktam alkalmazni a media query-ket, hogy bizonyos felbontáson úgy rakosgatom az elemeket, hogy azok jók legyenek. De én nagy kijelzőt írtam.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Én a reszponzív megvalósítást mindig utólag csinálom.

Tehat akkor az az allitas amit a haverom megfogalmazott valoban egy baromsag ugye?
Mert bevallom nem szeretnem ujrairni az egeszet.
Sot, valoszinuleg a responzive reszt ,majd csak az utan csinalom meg hogy feltoltottem az oldalt, mert már tenyleg nagyon szeretnem vegre utnak inditani.

[ Szerkesztve ]

XD alias IKSZDé

Ha a HTML struktúra rendezett, könnyen kezelhető, akkor elég megírni a rá szabott reszponzív designt. Persze lehet olyan eshetőség is, hogy mondjuk felépítenek egy komplex weboldalt, teljesen desktopra szabva, majd az idő múlásával felvetődik a mobilra optimalizáltság kérdése is. Na ekkor lehet agyalni, hogyan valósítsuk meg.

De ha az előbbi eset érvényes az oldaladra, akkor media-querykkel meg tudod csinálni.

En most csinaltam valamit, es ugy tunik hogy mukodik de kozben szinte biztos vagyok benne hogy az egesz ugy szar ahogy van

a head reszbe ezt irtam : <link rel="stylesheet" type="text/css" href="responzive.css" media="screen and (max-width: 500px)">

Mig a "responzive.css" fajlba mindent osszezsugoritottam annyira, hogy mobiltelefonos meretben is hasznalhatobb legyen.
Ezzel azt ertem el, hogy ha a bongeszo ablak merete kisebb lesz mint 500px; akkor lep ervenybe a "responzive.css" fajl.

Tudom hogy nagyon nehezen lesz ertelmezheto az utobbi szoveg, de sajnos mivel nagyon kezdo vagyok a temat tekintve ( responzive design), nem igazan tudom megfogalmazni ugy ahogy kellene.

A kerdes csak az lenne, hogy mennyire van kozel a valos megoldashoz az amit itt most osszeganyoltam?
Igazabol csak megneztem egy par perces youtube tutorialt es utana probalkoztam vele.

XD alias IKSZDé

Nagyon zavaró amúgy, hogy ilyen sok mindenre kell odafigyelni. Érthető is, hogy miért ér olyan sokat egy jó fejlesztő munkája.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Lehet így is, vagy a media-queryt írhatod még közvetlen a CSS fájlba is.

Ezzel azt ertem el, hogy ha a bongeszo ablak merete kisebb lesz mint 500px; akkor lep ervenybe a "responzive.css" fajl.

Igen, valami ilyesmről van szó. Ha ezt magában a CSS-ben adod meg, akkor a media-query közt lévő stílus akkor lép érvénybe, ha mondjuk 500 pixelnél kevesebb a width.

@media (max-width: 500px) {
/* ide jön a stílus 500px alá */
}

Megnezem majd a media-query-t is, de ha azt mondjatok hogy az a megoldas amit en alkalmaztam szinten elfogadhato, akkor lehet hogy egyelore igy hagyom....

Bar mondjuk en mar lattam olyan responzive oldalt ahol folyamatosan zsugorodott es rendezodott az oldal tartalma , a bongeszo ablak meretenek csokkentesevel.
Az enyem nem ilyen, de ha ezt is lehet majd hasznalni telefonrol akkor vegul is en elegedett leszek.. ( mas kerdes hogy az oldal latogatoi mit szolnak majd hozza.)

Viszont ez az elso olyan dolog css-ben, amire valoban ugy jottem ra hogy hasznaltam a fejemet egy kicsit... Lehet hogy gyakrabban ki kellene probalnom?

szerk: van valami ami viszont nem az igazi, megpedig a " body".
Ugyanis ez tovabbra is olyan szeles mint a sima style.css fajlban, es nem tudom hogy mit kellene beleirni ahoz hogy olyan szeles legyen mint a container akarom mondani : page.

Probalkoztam azzal hogy width: 500 px; de ez nem jo..

otlete van valakinek?

[ Szerkesztve ]

XD alias IKSZDé

az a baj vele hogy igy hiaba nez ki jol szinte az egesz oldal, mert a tul szeles body miatt ugyan olyan sokat kell oldalra tekerni , mert tul nagy az ures hely a page 2 szele mellett.

[ Szerkesztve ]

XD alias IKSZDé

Mer media query-k nélkül, hogy lehetne responsive az oldal? Jó tudom így, de komolyan?

but without you, my life is incomplete, my days are absolutely gray

Most akkor mégsem jó az amit én csináltam? Az előbb azt mondták hogy ez is egy megoldás...
Igazából nem is kifejezetten responzive oldalt akarok, egyelőre megelékszem azzal hogy ha van egy külön mobil nézet is..

Bár azt még nem tudom hogy hogyan lehet olyat csinálni hogy amikor betöltődik az oldal telefonról akkor a mobil nézet fogadja a látogatót, de legyen lehetősége átállítani az asztali nézetre.

XD alias IKSZDé

Az a baj, hogy olyan madárra lövöldözünk amit nem látunk a felhőktől. Ha nem látjuk, hogy mit akarsz miből csinálni akkor pocsékolhatjuk itt a töltényeket, nem lesz madár a vacsora.

(#1661) fordfairlane

Na és ha amúgy én most szeretnék egy ilyen moduláris blogot csinálni, ami ilyen CMS-hez hasonló összekattintgatható szutyok lenne akkor mennyire szabad ilyen frameworkot használni? Eddig is szemezgettem ezzel a Foundation-al.

[ Szerkesztve ]

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Az is egy megoldás igen, de az igazi ha magába a CSS fájlba írod a media-queryket. Illetve írtad, hogy nem megy magától folyamatosan össze. Ezt vagy úgy tudod megoldani, hogy mondjuk százalékban adod meg az elemek szélességét, vagy több "töréspontot" hozol létre szintén a media-queryk segítségével. Pl. csinálsz 1000, 800, 600, 400 pixelre, vagy ahogy jól esik.

@media (max-width: 1000px) {
/* ide jön a stílus 1000px alá */
}
@media (max-width: 800px) {
/* ide jön a stílus 800px alá */
}
...stb

mobile first

phonegap + responsive = minden lefedve

[ Szerkesztve ]

Bocsi, hogy csak most írok, csak ilyen kifejtett válaszra nem akartam félmondatot visszadobni, hosszabbra meg nem volt idő.
"Azért manapság elég gyakoriak a nagy monitorok"
Teljesen igazad van, ha magamból indulok ki, gyakorlatilag minden eszközöm FHD. De ettől még nem terveznék egy weboldalt/webapp-ot alapértelmezetten fullHD szélességre.

"laptopomnál is a nem túl izmos 1366x768-as felbontás a jellemző"
Ezen a szélességen még szerintem elfogadható egy mondjuk 1000px széles weboldal.

"van az én kijelzőm, és aztán vannak az annál kisebbek. Sanszos, hogy vannak nagyobbak is, amikre elméletileg szintén gondolni kéne."
Igen, végül is kicsit rövidebben de ezt írtam le én is.

"a Javítsuk a Prohardvert! topicban néhányan panaszkodtak, hogy egy nagy monitoron (pl. 24"-en) már hülyén néz ki a "csíkfórum""
A PH! kiváló példa én is fel akartam hozni. Egy IT szakmai fórum ami fix 990px széles, holott igen valószínű, hogy aki egy ilyen fórumot olvas, az a lehetőségeihez képest igyekszik jobb tech cuccokkal körülvenni magát, tehát itt fokozottan igaz, amit te is írtál. Valószínűleg a nagy többség 1920x1080 felbontáson böngészi az oldalt, és tré, hogy 150%-os nagyítással élvezhető csak. Illendő lenne egy 1600-as breakpoint.

Na de vissza a lényegre, attól mert már elterjedtebbek a nagyobb felbontások mint az ősi 1024-1260, én még nem tenném a desktop nézetet az e feletti felbontástartományba, rákényszerítve a kisebb felbontáson netezőket a tablet nézet használatára. Ugyan, mint írtam is egy korábbi posztban, nincs ez kőbe vésve, de szvsz a mobil / tablet / desktop / fhd (és akár a 4k) breakpointok lefednek mindent.

but without you, my life is incomplete, my days are absolutely gray

"Na de vissza a lényegre, attól mert már elterjedtebbek a nagyobb felbontások mint az ősi 1024-1260, én még nem tenném a desktop nézetet az e feletti felbontástartományba, rákényszerítve a kisebb felbontáson netezőket a tablet nézet használatára."
Ezt a tabletnézetre "kényszerítést" most nem értem: pont az a lényege a reszponzív kialakításnak, hogy nincsenek különálló desktop és mobil (vagy tablet) nézetek, hanem az oldal elemei felbontástól függően másképp helyezkednek el, kicsit máshogy néznek ki (pl. más szélességűek, stb.), de egyéb tekintetben az oldal ugyanaz. Szóval pl. teszteled, hogy kisebb szélességen hogy néz ki, aztán mi van, ha nagyobb felbontáson nézed, és így tovább, és közben szépítgeted.
Nem úgy, mint itt, a PH!-n, ahol a kissé lejárt, béna, különdomaines, mobilfelületre átirányítós megoldás van (m.prohardver.hu aldomainen).

Sk8erPeter

Arról mondjuk nem találtam semmit hogy a html kódba hogyan kell beleírni ezt a media queryt.

Mert ha csak simán a css kódba írom bele ezeket, akkor az nyílván nem lesz jó.

XD alias IKSZDé

Simán a CSS kódba kell beleírni.

Na de úgy ahogy pl ha HTML-ben létrehozok egy divet és utána tudok csak a css segítségével annak a divnek tulajdonságokat adni ,gondoltam hogy a media query is hasonlóan működik.

Nem kell semmilyen külön link sem a html kódba?

mint pl a <link rel="stylesheet" type="text/css" href="style.css">

XD alias IKSZDé

Kis segítség.

but without you, my life is incomplete, my days are absolutely gray

Aztaaa ezt hogy csináltad?

Egyéb iránt.. Ez: <link rel="stylesheet" href="print.css" media="print"> lenne akkor az a link amit bele kell írnom a HTML kódba és ezután kezdhetek css-ben dolgozni ugye?

Köszi a segítséget.

XD alias IKSZDé

Itt egy példa. A Kek mindaddig fekete marad, amíg össze nem tolod a jobb alsó részt.

Itt a media-query azt figyeli, hogy 500 pixelhez képest mekkora a rész amiben helyet foglal az oldal. Ha 500-nál nagyobb akkor nem történik semmi, ha 500-nál kisebb, akkor jelen esetben átszínezi a <h2> tartalmát.

Bakker.
Ez nem gyanús: media="print"?

but without you, my life is incomplete, my days are absolutely gray

Tehát akkor jól gondoltam...
jólvanna sorry de inkább kérdezek és leégetem magamat de legalább tudni fogom.

XD alias IKSZDé

Azt még valaki elmagyarázná nekem hogy pontosan hogy is fog működésbe lépni a responzive.css az oldalamon akkor amikor mobilról nézik?

Van egy ilyen Link a HTML-ben: <link rel="stylesheet" type="text/css" href="responzive.css" media="screen and (max-width: 500px)">
És ehez pedig már megírtam a css kódot is.

Csak azt nem értem hogy ha telefonról nézik majd akkor hogyan fogja tudni beállítani az adott készülék hogy a mobil nézet töltődjön be.

XD alias IKSZDé

Link.

Jólvanna, ez idáig is világos volt, csak azt nem értem hogy ha nekem 500px; van megadva, akkor az hogyan lehet hogy a telefonon automatikusan a mobil nézet jön be...
Hiszen a px; érték egy távolság, nem pedig egy méret.
Sorry a hülye kérdéseimért.

Volna mégegy olyan kérdésem is hogy ezt : <link rel="stylesheet" type="text/css" href="responzive.css" media="screen and (max-width: 500px)"> vagyis az 500px; érték helyett mi lenne a leg ideálisabb ?

XD alias IKSZDé

Minden töréspontnak egy külön css fájlt szeretnél csinálni?

"a px; érték egy távolság, nem pedig egy méret."
Wat? Úgy értem, hogy érted?

but without you, my life is incomplete, my days are absolutely gray

Nekem egyelőre csak annyi kellene hogy legyen egy mobil nézet szerűség ) ami talán már kész is van) azért hogy telefonról egy picit egyszerűbb és könnyebb legyen használni.

XD alias IKSZDé

Jóóó most ne szivassatok már légyszi.

Csak szeretném tudni hogy az előbb küldött link és a hozzá tartozó css hogyan fog működni ha mpbilról nézik az oldalamat. ( Merthogy bban sem vagyok biztos hogy egyáltalán ez így, ebben a formában működőképes).

XD alias IKSZDé

Én nagyon jól tudom mit szeretnél csinálni, de lefogadom meg sem nyitottad azt a JSFiddle példát amit küldtem neked. Ezt a <link> tagbe írogatós dolgot pedig szerintem tedd a sarokba ha több töréspontot is szeretnél az oldalon, szvsz egyszerűbb lesz ezt 1 CSS fájlban kezelned.

De megnéztem, csak én úgy érzem hogy nekem egyszerűbb lenne ebben a formában, márcsak azért is mert itt sikerült elérnem hogy ha kisebbre állítom a böngésző ablakát akkor működik a responzive.css fájl, és minden úgy néz ki ahogy elterveztem....

Van annak valami hátránya ha nem akarok több töréspontot? Én úgy érzem hogy az én oldalamra bőségesen elegendő lenne az amit már írtam nektek.

XD alias IKSZDé

Minél több töréspontot adsz hozzá, annál több kijelző méretre tudod optimalizálni az oldalt. Nem kötelező, nem is mindig kell, komplexebb oldalaknák fog ez előjönni. De ha működik minden akkor mi a kérdés?

No de csak annyit tudunk, hogy akkor ha a gépen keresztül nézem meg a böngészővel, akkor úgy tűnik hogy műkodni fog.
én csak tartok tőle hogy akkor szembesülök majd valami hibával amikor megpróbálom telefonnal megnézni.

"Nem kötelező, nem is mindig kell, komplexebb oldalaknák fog ez előjönni." Nos az én oldalam szerkezete nem túl bonyolult, igazából egy amolyan "csempés" felülete van az egésznek, vagyis sok img_containert használok ,és ezekre kattintva töltődik be a tartalom.

XD alias IKSZDé

"az 500px; érték helyett mi lenne a leg ideálisabb ?"
Nincs ilyen, hogy ideális méret, olyan szélességekre optimalizálsz, amilyenre akarsz. Te találod ki, és tesztelgeted, hogy ahogy váltakozik a felbontás, hogy néz ki az oldal. Erre a böngészőkben található fejlesztőpanelt mindenképpen használd, hogy le tudd tesztelni. MÁR MOST kezdj el ismerkedni vele, és akkor jobban fogod talán érteni, hogy működik a dolog, hogyan váltakozik a stílus a felbontás váltakozásával. Ez amúgy eddigi próbálkozásaim alapján a FF-ban speciel jobban működik, mint pl. Chrome-ban (amikor Chrome-ban totál mindegy, hogy változtatom a szélességet, az oldal csak arányosan kisebb lesz, mintha kizoomolnék belőle, de a stílus nem nagyon változik, az elég zavaró tud lenni, volt már ilyen párszor).

"Jólvanna, ez idáig is világos volt, csak azt nem értem hogy ha nekem 500px; van megadva, akkor az hogyan lehet hogy a telefonon automatikusan a mobil nézet jön be..."
Ezt a kérdést már csak azért sem értem, mert Zedz pontosan ilyenre mutatott neked példát, hogy ahol 500 pixel a maximális szélesség, ott az az adott stílus legyen érvényben.
Ezt a végtelenségig bővítheted például úgy, ahogy Zedz mutatta, ahogy fordfairlane linkelte neked a tutorialt, ahogy DNReNTi is próbálkozott átadni az üzenetet, meg mindenki, aki elég kitartó volt.
Melyik része nem világos?
Egyszerű példa: van X szélesség, arra így néz ki az adott div, van Y szélesség, arra így, van Z szélesség, arra meg amúgy. Lényegében ezeket változtatgatod, nincs benne különösebb mágia. Persze nem csak szélesség létezik, hanem más szempontok is, mint a többiek már írták.

Egyébként nem kell minden egyes breakpointra külön-külön CSS-fájlt csinálni, lehet egy nagy CSS-fájlod is (vagy pl. több szélesség egy fájlban).

"Hiszen a px; érték egy távolság, nem pedig egy méret."
Hogy mi a büdös bráner van?

Sk8erPeter

Hmm. Köszönöm, egy kicsit már kezdek magabiztosabb lenni és talán csak összehozom úgy hogy működjön rendesen.
Igazáboól ha főleg az a cél hogy a desktop nézet mellett legyen egy mobil nézet (responzive.css) akkor az előbb küldütt linkben található 500px;-es érték mekkora kellene hogy legyen?
Tudom hogyaz előbb is mondtátok hogy ezt így nem lehet elmondani, de csak a miheztartás végett. É npl az 500px;-t soknak érzem egy picit.

XD alias IKSZDé

Teljesen attól függ, milyen felbontásról nézed. Tabletnél egyáltalán nem sok, bizonyos mobiloknál sok lehet (az enyém vízszintes felbontása pl. 480px), nagy kijelzővel rendelkező téglafónoknál nem biztos, sok rétegre kell gondolni. Mellesleg mivel óriásira növekedett az okostelók felhasználóbázisa, ezért nem véletlenül terjedt el a "mobile first" fejlesztési koncepció, ami szerint először a kisebb kijelzővel rendelkező eszközökre kezdünk el tervezgetni, aztán haladunk szép lassan felfelé. Persze lehet valahol a kettő közt is, hogy mindkettőt folyamatosan nézegeted. Ahogy érzed.
Na de nézd meg a korábbi egyszerű példát, itt fogd meg a középső rácsot, ami elválasztja a HTML, JavaScript paneleket a CSS, Result panelektől, és kezdd el jobbra húzni, ezzel összenyomva a Result területét, láthatod, hogy a betűszín 500px alatt pirosra változik (pedig korábban fekete volt). Kb. így néz ki, amikor különböző méretektől függővé téve változtatgatod a stílusokat. Ez alá beírhatsz még akármennyi szélességű/más paraméterű stílusdefiníciót is. Vágesz?

Sk8erPeter

Ez volt a kurzusteljesítő beadandóm, nem a legjobb de szemlélteti, hogy mi a reszponzív oldal lényege, ha elkezded összehúzni akkor jobb esetben működik is.

Amúgy szerintem (bár az általam mutatott oldal légből kapott értékekkel dolgozik) nézegesd meg a legtöbbet használt mobil képernyő felbontásokat és az alapján old ezt meg. Egy kis kutató munka, megnézed melyek a legtöbbet használt telefonok azoknak milyen kijelzőjük van majd esetleg egy logout bejegyzésben közzé is tehetnéd, hogy ha már ennyit segítenek a többiek akkor nekik is legyen egy kis segítség.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Sziasztok! Webprogramozói kurzusra járok Németországba, és az elején az első hétbe már le kell adni egy komplett projektrevalót. Én ezt az oldalt készítgetem, lényeg, hogy minden egyszerű kezdeti 'tag" (szöveg,kép,videó,form..) szépen megformázva legyen rajta.

Valaki közületek, 5-10 percet szánna nekem arra, hogy az oldalt struktúraügyileg megvizsgálja valamely inspektorral? Nem tudom, hogy mennyire szép avagy "randa" a honlap mögött álló kódom.

Szívesen fogadom a kritikát, hasznos tanácsokat, amelyeket a jövőben elkerülve még jobb honlapokat tudok készíteni (és persze szép, átlátható sturktúrával a háttérben)

Előre is köszönettel,
Adam

Első ránézésre szerintem rendben van a kód. Egy kérdésem lenne, a kapcsolatfelvételnél a form direkt van táblázatban, vagy rendezés céljából készítetted úgy?

Rendezés, így nem szép?

Struktúra kialakításához már nagyon rég óta nem használunk táblázatot, több buktatója is van. Ha azt szeretnéd, hogy az inputok mellett legyenek a hozzá tartozó szövegek, akkor próbáld meg mondjuk így.

Köszi, én sem értem már, hogy így hirtelen miért táblázatos rendezést alkalmaztam a form-ra, pedig már itt is, és máshol is sokszor láttam, mondták, hogy "szentségtörés" ez a módszer, és eléggé elavult.

Az őszintét megvallva, gyorsan össze kellett dobnom a form fület, ezért netről vettem az alapjait, valószínű egy jóval régebbi oldalt dobhatott ki arra a google, hogy "kontakt form", ahol és amikor még ez a módszer volt a best practice..

PumpkinSeed: Bootstrapet, vagy media queryket alkalmazva csináltad a responzív design-t?

[ Szerkesztve ]

"Bootstrapet, vagy media queryket alkalmazva" - szerinted a bootstrap nem media querykkel lesz reszponzív?

Én kérek elnézést!

Bootstrap is media-queryket használ a reszponzív design-hoz. Ha kicsit visszanézel a topikban, az egyik fórumtársnak hosszasan ecseteltük páran, hogyan is lehet működésre bírni a dolgot. Példákkal, linkekkel.

A label tag használatára három jobb módszer kínálkozik hozzá kapcsolódó űrlapelemnél (amit tulajdonképpen leír a label, aminek a címkéje/felirata):
1. a label tag tartalmazza magát az elemet, amit leír:
<label>My label <input type="text" ... /></label>
vagy/és
2. a label tag tartalmazza egy for-attribútum értékében az általa leírt elem id-ját:
<label for="mytextfield">My label</label>
<input type="text" id="mytextfield" ... />
3. a kettő kombinációja:
<label for="mytextfield">My label <input type="text" id="mytextfield" ... /></label>

Tehát ha már külön van választva a két elem, ahogy a példádban látszik, akkor érdemes id-val jelölni, hogy minek is a címkéje.
A felsorolt módszerek erősen javítják a felhasználói élményt, hiszen a fókusz így a labelre rákattintva is belekerül az általa "vezérelt" űrlapmezőbe.

A példádat javítva id-kkel (ja, mondjuk mivel ez a 785-ös edit lett, valszeg nem a Te példád, hanem vetted valami Stack Overflow-s válaszból, ami ilyen szempontból "rossz" volt ):
http://jsfiddle.net/WX58z/785/

Habár ez nem kötelező, rontja a felhasználói élményt, ha a labelre kattintva nem ugrik a fókusz a mezőre.

Sk8erPeter