Oldal: 1 / 3 123 UtolsóUtolsó
Eredmény: 1 - 10 (23) összesen

Téma: Responsive design

  1. #1
    Bölcs repjegyutazas logója
    Csatlakozott
    11-03-27
    Hely
    Győr
    Hozzászólás
    794
    Begyűjtött 264 köszönetet
    185 hozzászólásával

    Alapbeállítás Responsive design

    Bár a téma (responsive design) több topikban is feszegetve lett már korábban, gondoltam a mobileszközök egyre nagyobb arányban történő használata mellet érdemes lenne külön topikot is szentelni neki, amelyben hasznos linkek és tanácsok mellet, akár egy-egy reszponzív weboldal tapasztalatait is megoszthatnánk.

    A lényeges rész kiemelve a marketing szótárból:

    A responsive design lényege az, hogy ugyanaz a weboldal, a html és css kódokban található "instrukcióknak" megfelelően jeleníti meg az adott eszközön a legoptimálisabb felbontást. Nem csak megjelenésbeli, hanem gyakran használatbeli különbségek is lehetnek az egyes eszközökön responsive design alkalmazása során. Bizonyos funkciók kisméretű kijelzőn már szinte használhatatlanok, ezáltal ezeket a funkciókat ilyen esetekben elrejtik a látogató elől.
    Responsive design | Online marketing szótár

    Tesztelés többféle méretű eszközön:

    http://www.responsinator.com/

    Responsive Design Testing

    "2. linknél sajna külön kell bevinni az url-eket. Nem lehet kattolgatni a mobileszközökben megjelenített felületen."

    Prémium „fizetős” WordPress responsive sablonok:

    WordPress Responsive| ThemeForest


    Utoljára módosítva: repjegyutazas által : 2014-07-11 17:55 Oka: + link
    On-site SEO | WooCommerce webáruház | WordPress | Üvegfóliák értékesítése

  2. #2
    Szerkesztő _lacus_ logója
    Csatlakozott
    11-03-14
    Hely
    Sopron
    Hozzászólás
    258
    Begyűjtött 113 köszönetet
    72 hozzászólásával

    Alapbeállítás re: Responsive design

    Teszteléshez esetleg még a Web Developer Toolbar (firefox plugin) -> Resize -> View Responsive layouts



  3. Az alábbi felhasználók hálásak a válaszért:

    repjegyutazas (2014-07-11)

  4. #3
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: Responsive design

    Én Gerire reagálnék a A legújabb Google hír témából: szerintem a HTMl és CSS gyakorlatilag sosem lesz akkora, hogy az jelentősen zavarja a letöltést manapság, inkább azzal van a gond, ha jó sok nagy kép található az oldalon. Egy jól elkészített responsive oldalon meg nem ugyan azt a képet szolgálod ki egy destop pc-re meg egy mobilra, és ez kliens oldalon van lekezelve (máss css töltődik be, amiben más esetleg a képek url-je).

    Szerintem.



  5. #4
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.433
    Begyűjtött 1.103 köszönetet
    675 hozzászólásával

    Alapbeállítás re: Responsive design

    Idézet Emphus eredeti hozzászólása Hozzászólás megtekintése
    Én Gerire reagálnék a A legújabb Google hír témából: szerintem a HTMl és CSS gyakorlatilag sosem lesz akkora, hogy az jelentősen zavarja a letöltést manapság, inkább azzal van a gond, ha jó sok nagy kép található az oldalon. Egy jól elkészített responsive oldalon meg nem ugyan azt a képet szolgálod ki egy destop pc-re meg egy mobilra, és ez kliens oldalon van lekezelve (máss css töltődik be, amiben más esetleg a képek url-je).
    Szerintem.
    Egy egyszeru mobil CSS meg egy bootstrapon alapulo full featured CSS kozott eleg komoly meret kulonbseg lehet. A kepeket szinten nem feltetlenul a CSS hatarozza meg, hanem a html-ben vannak img tag-ek. Sokszor a responsivtas miatt duplikalni kell a markup egy reszet, es hiaba hidden egy div aminek a hatterkepe a css-ben 2 mega, attol meg letoltodik a nagymeretu kep. De erre megoldas az, hogy szerveroldalon mar a user agent alapjan mas view-t renderelsz.


    If debugging is the process of removing software bugs, then programming must be the process of putting them in.
    Github | Ruby tutorial
    Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
    Respect all, fear none

  6. Az alábbi felhasználók hálásak a válaszért:

    koci (2014-07-11)

  7. #5
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: Responsive design

    Erre inkább az lenne a megoldás, hogy a hidden mellé kiveszed a hátterét a div-nek pl. css-ből, ha rossz a felbontás. Úgyis alapvetően úgy van, hogy különböző felbontás-tartományokra van egy-egy css, és azon belül százalékos értékváltozás. Ha megfelelő felbontásra hidden lesz a css, pontosan ugyan úgy ki tudod venni a hátterét is, és máris nem töltődik le semmi. Pl. jó példa, amit én alkotta: Lanawin.hu - nem reszponzív abban az értelemben, hogy nincs minden felbontásra belőve, hogy 1366px szélesség fölött; 1280-1366 között; illetve ez alatt más és más css töltődik be (de csak néhány számérték változik), ami más és más képeket használ, különböző mérettel - nyilvánvalóan az alacsonyabb felbontásnál rosszabb minőség töltődik le, de ez tökéletesen elég az alacsonyabb felbontáshoz. Pont ugyan így megoldható a mobil is. Persze azért sem reszponzív, mert nincsenek százalékos értékeke, de az innen már apróság.

    Ha egy hidden divnek bent van egy 2 megás háttér, miközben mobilról nézik az oldalt, az rosszul van megírva szerintem, nem a reszponzivitás, hanem a sitebuilder hibája. Ha kliensoldalon lekezelte azt, hogy hidden legyen a div egy felbontásra, akkor a hátterét is illene lekezelni, hogy ne töltődjön be semmi.


    Utoljára módosítva: Emphus által : 2014-07-11 19:30

  8. #6
    Bölcs
    Csatlakozott
    11-12-21
    Hozzászólás
    699
    Begyűjtött 106 köszönetet
    93 hozzászólásával

    Alapbeállítás re: Responsive design

    Szerintem a responsive dizájn alkalmazásakor általános probléma, hogy a látogató teljesen másként látja ugyan azt az oldalt különféle eszközökkel és/vagy böngésző ablak mértben megnézve. Ráadásul sok esetben a mobil nézet már annyira le van butítva, hogy egyenesen bosszantó a látogató számára, így ha nincs lehetősége desktop nézetre váltani akkor inkább elfelejti az egész honlapot.
    Tehát véleményem szerint ha a közel azonos megjelenés valamiért nem biztosítható akkor az a megoldás, hogy inkább hagyni kell a böngészőnek az automatikus méretezést. Persze akkor benne van az is, hogy esetleg mobilon is nagy lesz a letöltendő elemek mérete, de mivel sokan belső hálózaton keresztül kapcsolódnak a netre így ez nem lehet akkora probléma.
    De ha már responsive dizájn optimalizálás...
    Vannak erre különféle megoldások, például eszközökre és/vagy szélességre külön css fájl optimalizálás, stb. Csak hát a sok féle méretet tekintve kell hozzá 5-10 css fájl ami nem lenne gond, ha néha nem kellene változtatni valamin az oldalon. Ilyenkor aztán 5-10 helyen módosítani kell a css-t, na és ezt az 5-10 verziót ellenőrizni is szükséges. Vagy ami ennél is rosszabb, ha 5-10 külön template kerül alkalmazásra az optimális megjelenítéshez...
    Én a következő megoldást szoktam használni...
    480-2050 px böngésző szélesség esetén is egy css fájlt használok, benne minden width %-ban meghatározva és hozzá a betűk mérete is %-ban van megadva! A HTML-ben van egy kis js kód ami detektálja, hogy mekkora a használt böngésző aktuális szélessége, és annak függvényében megadja az alap betű méretet, amelyhez %-os arányban viszonyulni fog minden font méret.
    Ezzel a megoldással közel azonos megjelenés biztosítható 480-2050 px között, és ráadásul ha pc-n nézi a látogató a tartalmat akkor teljesen mind egy, hogy félig vagy teljesen van e kinyitva a böngésző ablaka, vagy netán menet közben módosítja a méretét.



  9. #7
    Bölcs koci logója
    Csatlakozott
    10-03-20
    Hely
    Budapest
    Hozzászólás
    548
    Begyűjtött 80 köszönetet
    60 hozzászólásával

    Alapbeállítás re: Responsive design

    Sziasztok!

    CSS-es kérdésem lenne. Adott egy sliderkép, aminek szélessége 100%, magassága auto.
    Ahogy nyomom össze a képernyőt, a kép úgy lesz arányosan egyre kisebb.
    Ügyfelem kérése viszont az, hogy ne legyen ennyire vékony. Találtam rá css-ben egy calc()-ot, de nem működik valamiért.
    Így próbáltam: height: calc(100% + 60px); de semmi.

    Hogy kellene helyesen használnom?

    Előre is köszönöm!



  10. #8
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: Responsive design

    Idézet koci eredeti hozzászólása Hozzászólás megtekintése
    Sziasztok!

    CSS-es kérdésem lenne. Adott egy sliderkép, aminek szélessége 100%, magassága auto.
    Ahogy nyomom össze a képernyőt, a kép úgy lesz arányosan egyre kisebb.
    Ügyfelem kérése viszont az, hogy ne legyen ennyire vékony. Találtam rá css-ben egy calc()-ot, de nem működik valamiért.
    Így próbáltam: height: calc(100% + 60px); de semmi.

    Hogy kellene helyesen használnom?

    Előre is köszönöm!
    Ha div-re rakod rá a 100%+60px magasságot, akkor előtte a bennefoglaló elemekre is rá kellene rakni (pl. body, html). No meg nem egészen érthető, hogy miért is akarod ezt a 100%+60px-t. Hiszen itt szerintem szélességről volt szó előtte ("ahogy nyomom össze a képernőt" - ez nem széltében összenyomás? Miért akarná bárki magasságban összenyomni a dolgot? Egyszerűen görgethető lesz akkor az oldal, és kész).



  11. #9
    Bölcs koci logója
    Csatlakozott
    10-03-20
    Hely
    Budapest
    Hozzászólás
    548
    Begyűjtött 80 köszönetet
    60 hozzászólásával

    Alapbeállítás re: Responsive design

    Rosszul fogalmaztam elnézést, a magassága az ami túl kevés. Az auto magasságon kívül kell neki még egy kicsi
    Amit írtál megpróbálom, köszönöm!



  12. #10
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: Responsive design

    Idézet koci eredeti hozzászólása Hozzászólás megtekintése
    Rosszul fogalmaztam elnézést, a magassága az ami túl kevés. Az auto magasságon kívül kell neki még egy kicsi
    Amit írtál megpróbálom, köszönöm!
    De hát ez készülékfüggő. Ha én most elfordítom a telefonom, akkor a 100%+60px lehet, hogy kevesebb lesz, mint az eredeti auto magasság.



Oldal: 1 / 3 123 UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •