Sieht mein Shop wirklich so schlecht aus?

Normalerweise ist der Shop schneller. Ich bin gerade am Ändern der Startseite. Warum nun der Shop so langsam ist, weiß ich auch nicht. Ist erst seit ich diverse Änderungen vorgenommen habe. Allerdings nur bei den Einkaufswelten. 

Ich hoffe, das gibt sich im Laufe des Tages wieder. 

…wenn die Ladezeiten schlecht sind, gleich beim Webhoster anrufen und nachfragen, was los ist.

 

Grüße

Hallo Dr. Rivera, 

vielen Dank für den Hinweis. Ich werde versuchen, daß noch zeinah zu ändern.

@Trixx “Ein Template würde ich nicht kaufen. Einfach aus dem Grund dass Du Dich dabei abhängig von dem Programmierer machst.”

Davor habe ich auch etwas “angst”; wir sind auch auf der Suche und finden nix; wir machen das jetzt wahrscheinlich so: immer mal kleine Änderungen am Template bis es passt (wahrscheinlich nie :wink: )

@Vitago GmbH “Bei Presto gibt es tausende und da bekommt man schon sehr schöne Templates für 80,-.”

Du meinst sicher Prestashop ?

Fast alles Schrott und nur schwer anpassbar an deutsches Recht, vom nicht vorhandenen Support der Entwickler ganz zu schweigen.

…wer sich mal etwas mit Prestashop beschäftigt hat, wird schnell feststellen, dass selbst die tollsten Templates nichts helfen, denn der Shop ist derzeit wohl nicht rechtssicher.

Bei Shopware ist das zwar auch noch nicht bei 100%, aber wesentlich besser.

Und jetzt wieder zurück zur Ausgangsfrage und Hilfe für den Uhrenschopbetreiber.

 

Grüße

Hallo

wenn man Änderungen am Theme im laufenden Betrieb vornimmt, bekommen einfach einige Besucher die zur Kompilierung des Themes und evtl. sonstiger Caches benötigte Zeit mit. Wenn die Ladezeit im Bereich von 20 Sekunden liegt, ist das mit Sicherheit die Themekomplilierung und kein Fall für den Hoster.

 

Das „Flackern“ der Dropdown und scheinbar willkürliche Zuklappen, wenn man versucht mit der Maus in das Dropdown zu gehen, liegt an der border-bottom für ul.navigation–list. Wird diese entfrent, funktioniert es in jeder Situation. Die Programmierung des Erweiterten Menüs ist leider sehr fehleranfällig, wenn man mit Paddings oder Borderlines in der horizontalen Navigation arbeitet. 

Ein wenig Aufräumen und schon passt es.

Im Footer könntest Du die senkrechten Trenner z.B. ändern, indem Du die „border“ entfernst, und das ganze per background-image im container löst - dadurch werden alle gleich lang. Die „Underlines“-Border sollten auch weg.

Ich habe das gerade mal on-the-fly im chrome gemacht:

Dazu schnellhack-css:

 background-size: 1px 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-image: linear-gradient(to bottom, #F5F5F5 5%, #dadae5 10%, #dadae5 100%, #fff),linear-gradient(to bottom, #F5F5F5 5%, #dadae5 10%, #dadae5 100%, #fff),linear-gradient(to bottom, #F5F5F5 5%, #dadae5 10%, #dadae5 100%, #fff);
    background-position: 24% center, 49% center, 74% center;

Für detailierter habe ich grad keine Zeit, kann aber bei Wunsch kann ich heute Abend mal als Vorlage meine Footer.less „posten“.

 

Hallo,

das größte Manko, dass ich bisher gefunden habe:

Die Ladezeiten von den einzelnen Seiten sind grausam. Ich habe hier in der Firma zwar nur ne 6.000er Leitung, aber ohne deinen Shop im Browsercache zu haben 25 sek Ladezeit ist mehr als übertrieben: Das solltest du sofort in den Griff kriegen. So lange wartet kein Kunde.

Ursachen hierfür:

Es werden 10(!) Schriftarten geladen zum Teil über Google zum Teil über deinen Server. Brauchst du all diese überhaupt? Wenn ja würde ich mir Gedanken machen, die nur auf den benötigten Seiten zu laden und dafür andere weg zu lassen.

Eine kaputte Font-awesome (mag ggf. aber an meiner Firewall liegen). Elemente auf der Seite werden erst angezeigt, nachdem das laden dieser aufgehört hat. (20-25 Sek. ungecached)

Jeder User muss sich zuerst mit 8 (! inkl. deinem) Server verbinden, was die Ladezeiten nach oben schraubt. Lade dir z. B. das Billsafe-Logo für Rechnungen runter und integrier es lokal über deinen Server. Wie es bei Klarna z. B. der Fall ist.
Was hat thawte da zu suchen? Schön und gut, dass du dein Zertifikat glaubhafter machen willst, aber thawte kennt kein Mensch außer man ist im Thema. Weshalb dieses Siegel unnötig ist. Auch das der IT-Rechts-Kanzlei ist für den kaufenden Kunden irrelevant.

Design:

Footer finde ich gelungen. Ist schön übersichtlich. Mich stören nur die vielen Bildchen die recht unscharf wirken.

Header ist grausam. Eine Mischung aus braun und dunkelblau? Wo harmonieren diese Farben? Finde ich wie geschrieben furchtbar.

Listing finde ich schön gemacht. Nur n bisschen zu dunkel. Ein schwarzer dicker Rand um die Elemente beim Mouseover und 2 dicke dunkle balken die reinfliegen.
Was ich gut finde sind die Filter, die hast du ordentlich gepflegt und man kommt schnell zu dem Produkt. Ggf. würde ich die Filter gleich ausgeklappt anzeigen.

Detailseite:

Nichts gegen Sicherheitsmerkmale oder Siegel von Trusted-Shops etc. aber einmal reicht. Hier wird mir permanent aufs Auge gedrückt (im Footer auch), dass der Shop ein Trusted-Shops Siegel hat sowie SSL-Verschlüsselt ist.
Weniger ist manchmal mehr :slight_smile:
Klarna verwirrt mich ein bisschen. Die sollten sich unter dem “inkl. MwSt.” gesellen und weniger Platz beanspruchen.

Design-Empfehlung:

Ich bin kein Uhrenverkäufer und kenne mich mit diesen auch nicht aus, ich liebe meine Smartwatch aber mehr hab ich damit nicht am Hut.

Den Shop würde ich eher Gestalten wie eine Botique. Das ganze sollte hochwertig aussehen. Farblich würde ich hier das braun mehr in Richtung gold ändern. Also im Prinzip alles heller gestalten. Denke das würde deine Zielgruppe ansprechen, da du ja keine “billigen” Uhren verkaufst, sondern bekannte Markenuhren. Du solltest auch Abstände verringern. Es ist oft ein rießiger “white space” zwischen den Elementen. z. B. Navigation zu Infobar. Hier sinds nur ein Paar Pixel, aber die machens i-wie unschön. Dann von der Infobar zur Breadcrump… Hier ist viel zu viel Abstand, da kannst ja nochmal ne Infobar rein knallen. Von er Breadcrump zum Artikel ist auch zuviel Abstand (Siehst du in meinem Screenshot / Meine Auflösung: 2560x1440. Kunden mit schlechter Auflösung müssen bei dir viel zu viel Scrollen um Informationen zu bekommen. Bei Mobile und Tablet würde ich die Info-Bar fast ganz rausnehmen, wird viel zu Groß dargestellt.

Ich würde alle Grafiken wie Zahlungsmöglichkeiten, Versanddienstleister und Social-Media grau machen. Bei einem Mousover kann gerne die Farbe hinzukommen. Aber farbig in der Menge nehmen Sie zuviel Aufmerksamkeit weg vom Produkt.

Hoffe du kannst mit meinem Text was anfangen :smiley: Bei Fragen mir einfach eine PN schicken.

Grüße
 

Das mit den Ladezeiten konnte ich bisher nicht bestätigen. Bei mir kommt alles sofort. Ggf. liegt hier je nach Zugangsprovider ein Routingproblem vor.
VDSL50 Berlin

Hallo Neoxx, 

wow! Vielen Dank für die ausführliche Analyse. 

Da sind natürlich Dinge dabei, die ich auch schon gesehen habe, die ich aber als Laie nicht abstellen kann, da mir hierzu die Kenntnisse fehlen. Ich werde deine Ausführungen aber mal als Grundlage nehmen und mich Punkt für Punkt vorarbeiten. Mal sehen wieweit ich komme. 

Ich habe immer Angst, das meine Änderungen, die ich selbst vorgenommen habe, beim nächsten Update dann weg sind. 

Wo änderst Du denn??? Im eigenem Theme passiert bei einem Update eigentlich nichts, ausser SW ändert mal einen Block-Namen - wäre dann aber schnell gefixt broken heart
Doch wohl nicht im Original- Responsive???

Nein, nicht im Original Template. Dann wäre ich ja auf der richtigen Seite, wenn meine geänderten Dateien im eigenen Template dann später wieder passen.

Soweit ich das sah, ist ein gekauftes Plugin im Einsatz. Hier ist die Frage, was bietet das gekaufte Theme an Variationsmöglichkeiten.

Gut das mit den Ladezeiten kann auch an meiner Verbindung und der dahinter hängenden Firewall liegen. Unnütz sind dennoch die vielen Verbindungen zu verschiedenen Servern sowie die vielen Schriftarten.

Mach Dir nur vor jeden größeren Umbau eine Sicherungskopie vom “ist”-Zustand für einen “Schritt zurück”, wenn es mal in die falsche Richtung gegangen ist. heart

Es ist ein gekauftes Template (als Plugin) im Einsatz. Es bietet die Farbauswahl und eine kleine Gestaltung des Footers (Zahlungsicons usw). Man kann auch die Farben der Tabellen und Panels einstellen, wobei ich sagen muß, daß ich hier nicht genau weiß, was sich dahinter verbirgt. Und die Buttons und Badgets kann man farblich einstellen. Außerdem kann man in der linken Spalte eigene Bilder einpflegen. 

Das müßte es auch dann gewesen sein. 

Was mir gerade noch auffällt sind die Animationen im Advanced Menü. Bei “Zur Kategorie …” ist diese viel zu schnell. Bei den Unterkategorien hingegen zu langsam. Wirkt alles nicht flüssig.

Beim Mouse-Over der Kategorien werden diese mit einem zarten grau im Background bestückt. An meinem Display fast unsichtbar. Würde ich so machen wie mit dem Home-Icon. Eine leiste durchziehen die einfarbig ist. Beim Mouseover kann das Element wieder einen weißen Hintergrund bekommen. Mach zudem die Schriftart dick.
Das ganze würde dann so aussehen (ich krieg leider nicht den weißen Streifen raus): (Bei Chronographen ist der Mousover)

Kleine Anmerkung: Der hover bei den Produkt Boxen nervt.

Der Nutzer geht generell mit der Maus über das Produkt, wenn man bspw. die Beschreibung des Produktes lesen möchte. Hier kommt dann aber direkt dieser blöde hover mit “Zum Produkt / Bestellen” genau in der Mitte und genau über den Text.

Von der Usability daher nicht sehr gut.

Das keine Bestellungen kommen denke ich hängt aber weniger mit dem Design zusammen sondern wohl eher vielmehr mit deiner Platzierung bei Suchmaschinen, Preisvergleichen und hängt natürlich auch mit deinen Preisen und der deiner Konkurrenten zusammen.

Es kommt natürlich auch immer auf das Produkt an, sucht der Kunde speziell nach einer bestimmten Uhr und gibt hier direkt den vollen Produktnamen seiner Uhr ein, sucht er eher nach “Armbanduhr” usw.

Weiterhin ist mir nicht ganz klar, warum Leute ständig 10 verschiedene Farben nehmen und dann auch noch über den Editor irgendwelche Farben auswählen. Bspw. hier:

Wieso klatscht du dort einfach ein blau aus dem Editor rein, was überhaupt nicht in das Gesamtbild passt?

Diese  Kategorie Texte sind in der Regel erst einmal für Google, da der Besucher diese nicht lesen wird. Wenn du also etwas hervor heben möchtest, dann als fetten Text.

@Neoxx: Wie bekomme ich denn einen durchgängigen farbigen Balken hin, der von einer Seite des Bildschirms zu anderen reicht und der dann in der „Mitte“ das Menü enthält? In welcher Datei könnte ich da Änderungen vornehmen?

@kayyy

vielen Dank für die Begutachtung. Dort habe ich leider manuell die Farbe gesetzt. Stammt noch vom alten Template mit blauer Farbe. Werde ich gleich ändern. 

Wieder schnell in Chrome Entwickler-Tools on-thy-fly

.navigation-main {
	background: #3D272A;
}

.navigation--list {
	background: transparent;
	border:0;
}

.navigation--link {
	border-right:0;
	color: white;
}

Führt zu

Der border:0 führt dann auch gleich dazu, dass die „Lücke“ zum Advanced verschwindet. CSS natürlich nur als Anhaltspunkt ohne Class-Verschachtelung und Responsive-Viewports