Responsiv-Templates für Gambio GX2

Thema wurde von Steffen (indiv-style.de), 12. Dezember 2013 erstellt.

  1. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Da ich ja ein Fan von Responsiv-Templates bin, habe ich nun begonnen das EyeCandy-Templates responsiv umzubauen! Dat ist gar nicht so leicht aber auch wiederum nicht so schwer!

    Wer mal schauen möchte kann sich den Stand der Entwicklung hier mal ansehen! Im Moment ist nur die Startseite zu 80% fertig!

    Benutzt bitte verschiedene Endgeräte und gebt mal ein Feedback was ihr davon haltet.....

    responsiv.indiv-style.png
     
  2. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    So, hier mal ein grobes Beispiel der Artikeldetailseite:
    Bild1: Smartphon
    Bild2: Smartphon quer
    Bild3: Tablet PC
    Bild4: Desktop-PC

    gx2Resp1.jpg gx2Resp2.jpg gx2Resp3.jpg gx2Resp4.jpg
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. April 2011
    Beiträge:
    993
    Danke erhalten:
    208
    Danke vergeben:
    100
    #3 Anonymous, 12. Dezember 2013
    Zuletzt bearbeitet: 12. Dezember 2013
    Hallo Steffen,

    responsiv bedeutet auch unnötige Sachen wegzulassen, auszublenden. Nur das alleinige wegfloaten der Container ist es leider nicht nur ...

    Du kannst keinem auf einem Handy zumuten solche Scrollwege zu gehen ... Der Leitfaden sollte sein "auf einem Blick, mit einem Click" ...

    BTW.: ich sitze auch an einer responsiven Umsetzung für den GX2
     
  4. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Nimms mir net übel aber so schlau war ich schon! Das muss ich mir von niemanden noch erklähren lassen..... [NERV ON]

    Du weist auch das man erst alle Inhalte fliesen lassen muss ehe man dem Admin die Möglichkeit bietet auszuwählen was wann wo gezeigt wird! Und ob jemand dem Handy die Scrollwege zumutet oder nicht, überlasse ich dem Anwender!

    PS: es nervt diese ständige Schlaumeierei! :mad::mad::mad:
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. April 2011
    Beiträge:
    993
    Danke erhalten:
    208
    Danke vergeben:
    100
    Na Feedback haste doch bekommen

    Da stand nicht "Rene darf dazu nichts schreiben" ... und mit Kritik muss man umgehen können.

    Ich werde auch nichts mehr schreiben, da ich nicht möchte das Dir noch eine Perle aus der Krone fällt ...

    von daher tschö mit Ö
     
  6. Manni_HB

    Manni_HB G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    9.098
    Danke erhalten:
    1.540
    Danke vergeben:
    909
    Ort:
    Bremen
    Hallo Buben ...

    gannnz ruhig, friedlich & sachlich bleiben/werden! :rolleyes:
     
  7. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.971
    Danke erhalten:
    1.576
    Danke vergeben:
    1.162
    also mit dem S3 von Samsung sieht das schon mal gut aus. Und die Artikel-Detailseite ist doch auch fertig (mehr oder weniger..).

    Weiter machen!!
     
  8. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.203
    Danke erhalten:
    6.208
    Danke vergeben:
    1.107
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Kundenlogin: email adresse und PW wird nciht richtig in 2 zeilen geteilt, sondern in einer mit umbruch vor dem 2. eingabefeld.
    Artikel Detailseite: Artikelnummer, Liferzeit usw. könnte in einer zeile bleiben springen aber in 2 Zeilen. Platzverschwendung dank zu vieler "......."

    das mal so auf die schnelle
     
  9. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Danke, aber das sind Dinge die noch nicht dran sind! Aber ich habs notiert. Der Aufbau der Details ist noch lange nicht so wie es sein sollte.
     
  10. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.203
    Danke erhalten:
    6.208
    Danke vergeben:
    1.107
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    tzz Klugscheisser :p
    war überigens auf dem S3 mit KitKat 4.4.1 im Chrome 31.0.
     
  11. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.971
    Danke erhalten:
    1.576
    Danke vergeben:
    1.162
    musst Du immer beim Surfen was essen..........?! :)
     
  12. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.203
    Danke erhalten:
    6.208
    Danke vergeben:
    1.107
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    lol, kann nix für die Namen der Android Version
     
  13. Hanjü

    Hanjü Erfahrener Benutzer

    Registriert seit:
    15. August 2011
    Beiträge:
    174
    Danke erhalten:
    5
    Danke vergeben:
    42
    Steffen mach weiter so,
    Sieht auf iPad und iPhone schon echt geil aus.
    Oups durfte ich das sagen, na ja egal.
     
  14. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Hanjü, heute ging es weiter! Hab heute das Katmenü eingebaut! Da das Mega-Gedöns im Gambio nicht so wollte wie ich das haben will..... ;)
    Desweiteren hab ich einen 2. Boxenbereich als Footer geschaffen!! Natürlich responsiv!

    Könnt ja mal testen ob das so funzt!

    gx2Resp5.jpg
    [​IMG]

    http://responsiv.indiv-style.de/
     
  15. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Ein wichtiger Punkt wurde von Rene schon angesprochen! (ich glaube meine Antwort war doch etwas "RAU"!! Tschuldigung!!! ;) )
    Das ausblenden von nichtgewünschten Boxen. Da dies ohne den Style-Emil nur mit nem Eingriff in die DB geht und das nur global hab ich das angefangen komplet unabhängig vom SE zu machen. Und mit der Option Boxen in der reinen mobilen Ansicht auszublenden.... ;)

    gx2Resp6.jpg

    hier kann man in Zukunft einfach die Boxen im Adminbereich hin und herschieben! UND!!!! Man kann eigene Boxenbereiche mit eigenen Styles anlegen... ;) ;) ;)
     
  16. Hanjü

    Hanjü Erfahrener Benutzer

    Registriert seit:
    15. August 2011
    Beiträge:
    174
    Danke erhalten:
    5
    Danke vergeben:
    42
    #16 Hanjü, 17. Dezember 2013
    Zuletzt bearbeitet: 17. Dezember 2013
    Alter Falter, wan bist du fertig ? Ich will haben :p

    Wie gesagt iPad und iPhone alles ok.
     
  17. Muecke

    Muecke Erfahrener Benutzer

    Registriert seit:
    26. April 2011
    Beiträge:
    556
    Danke erhalten:
    16
    Danke vergeben:
    72
    Samsung S3 sieht es gut aus. Deins funktioniert wenigstens. Grummel. :)
     
  18. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Das sieht ja schon mächtig gut aus....
     
  19. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Ja Winfried, es geht vorran! Nächster Step ist fertig! Die Ansicht der Boxen abhängig von der Displaygrösse. Da ich dies mit den gm_boxes nicht machen konnte, habe ich nun das ganze Boxengedöns in den Admin gepackt! Nun ist es möglich alle Boxen bequem aus dem Adminbereich zu steuern!!! Und wir haben ins Templates gleich 4 Boxen-Areas eingebaut!

    gx2Resp8.jpg

    Wie auf dem Bild zu sehen ist gibt es den Bereich Links, einen 2. über dem Footer, einen 3. unter dem Footer und einen 4. ganz unten! Ob man so viele braucht spielt erst mal keine Rolle! Es ist machbar!!!

    Das ganze lässt sich super im Admin steuern:#

    gx2Resp7.jpg

    Aufgelistet werden die Boxen nach den Bereichen wo sie positioniert sind. Es kann eingestellt werden ob die Box immer oder nur auf Desktop oder nur im Mobilen System angezeigt werden soll. Funktioniert schon prächtig! Beipiel:

    Bild 1 ganz oben ist ne Desktopansicht und das Bild ganz unten ne Mobile! Wie man sieht sind die Boxen unten fasst alle wech, so wie ich es im Admin eingestellt hatte.....

    gx2Resp9.jpg

    Am besten sieht man das Boxen-switchen auf nem Tablet! Einfach mal die Seite im Querformat aufrufen und dann hochkannt drehen.......

    Fortsetzung folgt! ;) ;) ;)
     
  20. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    31.203
    Danke erhalten:
    6.208
    Danke vergeben:
    1.107
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    slider is noch nicht und content index unten und so hat noch keinen zeilenumbruch. aber sonst wirds schon richtig gut.