Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Responsive Design auf Bootstrap-Basis

    platzerits

    • Neu im Forum
    • Beiträge: 13
    Responsive Design auf Bootstrap-Basis
    am: 24. Februar 2016, 16:00:21
    Hi,

    bin gerade dabei ein Responsive Template auf Bootstrap-Basis zu bauen.

    Nach einem kurzen Ausflug zur Konkurrenz (Shopware) haben wir uns dazu entschlossen, wieder zu modified zurück zu kehren.
    Nach zwei Monaten betrieb, blieb als einziger Pluspunkt bei Shopware nur noch das Responsive Template übrig.
    Alles andere war sehr viel umständlicher und vieles fehlte, bzw. konnte nur durch teure Plugins dazu gebastelt werden.

    Auch die Anbindung an JTL Wawi war uns zu teuer.

    Ok, genug geschwafelt! Hier der Link zum aktuellen Entwicklungsstand des Templates:
    http://modified.natura-animale.de

    Ist noch nicht fertig. Aber ich wollte es hier mal teilen. Evtl. möchte ja jemand das Template als Basis haben um darauf aufzubauen :)

    Falls noch jemand Tipps hat, dann nur her damit. Das Template ist noch nicht perfekt. Ich arbeite ja noch dran :)

    VG
    Michael

    Linkback: https://www.modified-shop.org/forum/index.php?topic=34443.0

    webald

    • modified Team
    • Beiträge: 2.791
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #1 am: 24. Februar 2016, 16:31:47
    Browser-Breite: 768
    Da hast Du plötzlich ein 2-zeiliges Menü

    Bootstrap 3?

    platzerits

    • Neu im Forum
    • Beiträge: 13
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #2 am: 24. Februar 2016, 16:38:03
    Danke für den Hinweis!

    Ja, Bootstrap 3.

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #3 am: 24. Februar 2016, 16:54:54
    Ein Zitat von hier http://holdirbootstrap.de/css/

    Zitat
    Bootstrap3 benutzt bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Doctypes erforderlich machen.

    du baust aber dein Shop-Template mit diesem Doctype auf

    Code: XML  [Auswählen]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    das ist nicht gut, vergiss XHTML.

    Tipp: Suche im Netz nach freien Bootstrap3 Templates/Themes, damit ersparst du dir viel Arbeit.

    Grüsse
    Hanspeter

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #4 am: 24. Februar 2016, 17:16:31
    Ja, unbedingt html5! Da geht dann auch so was:
    http://www.w3schools.com/tags/att_script_defer.asp

    platzerits

    • Neu im Forum
    • Beiträge: 13
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #5 am: 24. Februar 2016, 17:47:32
    Ja, unbedingt html5! Da geht dann auch so was:
    http://www.w3schools.com/tags/att_script_defer.asp

    Ok, für was sollte man sowas einsetzen?

    webald

    • modified Team
    • Beiträge: 2.791
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #6 am: 24. Februar 2016, 18:01:17
    30 Sekunden auf der Seite => Enscheidungsfauler Kunde => Sonderangebot

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #7 am: 24. Februar 2016, 18:04:20
    Damit kann man die script tags im header lassen (das ist ja standard im Shop) aber erreichen, dass die Seite schon gerendert wird, obwohl die JS Dateien (die bei Bootstrap gigantisch groß sind) noch gar nicht fertig runtergeladen sind.
    Dadurch erreicht man visuell eine höhere Performance. Der Kunde sieht die Seite schon komplett aufgebaut, in Wirklichkeit lädt aber noch das JS. Ohne defer wartet der Kunde bis die JS Dateien endlich mal runtergeladen sind, weil der Browser erst dann rendert, wenn er weiß, dass das JS das DOM nicht mehr ändert.

    Der Mobiluser mit schwacher Funkverbindung ist dann schon weg .... bei Deinem Mitbewerber.

    Das ist ein Punkt der wichtig ist ... es gibt weitere.
    Schau mal:
    https://gtmetrix.com/reports/modified.natura-animale.de/VX8hMnW3

    platzerits

    • Neu im Forum
    • Beiträge: 13
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #8 am: 24. Februar 2016, 18:17:36
    Damit kann man die script tags im header lassen (das ist ja standard im Shop) aber erreichen, dass die Seite schon gerendert wird, obwohl die JS Dateien (die bei Bootstrap gigantisch groß sind) noch gar nicht fertig runtergeladen sind.
    Dadurch erreicht man visuell eine höhere Performance. Der Kunde sieht die Seite schon komplett aufgebaut, in Wirklichkeit lädt aber noch das JS. Ohne defer wartet der Kunde bis die JS Dateien endlich mal runtergeladen sind, weil der Browser erst dann rendert, wenn er weiß, dass das JS das DOM nicht mehr ändert.

    Der Mobiluser mit schwacher Funkverbindung ist dann schon weg .... bei Deinem Mitbewerber.

    Das ist ein Punkt der wichtig ist ... es gibt weitere.
    Schau mal:
    https://gtmetrix.com/reports/modified.natura-animale.de/VX8hMnW3

    Ok, das ist ein Argument! Danke für den Link! Ich werde mir das mal genauer anschauen.

    Bonsai

    • Viel Schreiber
    • Beiträge: 4.127
    • Geschlecht:
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #9 am: 25. Februar 2016, 09:54:43
    Wenn Du viele unterschiedliche JS Dateien hast, dann zuerst testen was mit defer noch läuft, und danach zusammenfassen zu einer Datei (Anzahl http Requests verringern) .... was schreibe ich so lange ..... hier von Matt:
    http://www.modified-shop.org/forum/index.php?topic=17967.0

    slavaka

    • Neu im Forum
    • Beiträge: 1
    Re: Responsive Design auf Bootstrap-Basis
    Antwort #10 am: 08. März 2016, 11:19:38
    Hallo, das Design finde ich wunderschön,
    kann man es eventuell als Vorlage haben?

    Vielen lieben Dank und Liebe Grüße!
    AS
    11 Antworten
    7098 Aufrufe
    05. November 2013, 14:35:33 von Aladin
    0 Antworten
    2057 Aufrufe
    20. April 2015, 12:43:46 von neueid
    1 Antworten
    388 Aufrufe
    06. Juni 2023, 10:40:00 von Der G