wie-sparen.eu - Infoseite zu Sparthemen

Hallo,

schöner Benutzername...

Die Webseite ist meiner Meinung nach aber nur "ok".

Warum verwendest Du kein HTML5?
Es sind einige Fehler und unnötige Konstrukte vorhanden. Verwende statt , z.B.
Schmeiß die meta-Tags "robots", "audience" und "revisit-after" raus. Der viewport ist auch unnötig, initial-scale=1 ist Standard. Die keywords interessieren heute auch keinen mehr, ebensowenig wie author und date - letzteres ist auch noch vier Jahre alt, was soll das für eine Info sein...?

Der fb-root-Div gehört in den body-Bereich, nicht in den head.

Google Analytics in den Fußbereich packen und dringend anonymisieren!

Das responsive Design habe ich jetzt nicht gründlich überprüft, aber das kann man schöner lösen. Zumal beide Dateien heruntergeladen werden, zumindest am PC. Aber: es ist schön, dass du das schon einmal berücksichtigt hast, das ist ein guter Anfang.

Die Sparschweine sind eine schöne Markierung der Tipps, man könnte sie aber sicher in Sprites zusammenfassen.

Insgesamt finde ich den Aufbau aber gut, das Design ist nicht sonderlich modern, aber übersichtlich. Die Markierung der Partnerlinks finde ich gut, das könnten mehr so machen.

Das als Ersteindruck... Ganz solider Auftritt, aber mit viel Potential nach oben.

Gruß
Matthes

Hallo Matthes,

ich danke Dir für Deine ausführliche Antwort. Ich habe schon mal angefangen Deine Vorschläge abzuarbeiten und will jetzt auch noch auf Deine Fragen und Anregungen eingehen:

Warum nicht HTML5?

Ich habe mit der Seite bereits 2012 begonnen und sie auch schon in dem Jahr Online gestellt. Allerdings war sie zu dem Zeitpunkt noch nicht ganz fertig und ich habe mich aus Zeitmangel sehr lange nicht mehr um die Seite gekümmert. Ich habe die Arbeiten an dieser Seite erst vor ca. drei Monaten erst wieder aufgenommen und den Doctype einfach unverändert gelassen.

Verwende statt

Hast recht! Dummheit meinerseits, ist behoben.

Schmeiß die meta-Tags "robots", "audience" und "revisit-after" raus.

Heute bestimmt unnötig, sind aber bereits seit 2012 vorhanden und ich hoffe sie schaden nicht.

Der fb-root-Div gehört in den body-Bereich, nicht in den head.

Ja, ich sehe auch gerade, dass FB das so empfiehlt. Funktioniert aber zum Glück trotzdem. Werde es vermutlich demnächst mal ändern.

Google Analytics in den Fußbereich packen und dringend anonymisieren!

Habe in irgendeinem renommiertem IT-Forum gelesen, dass der Header der beste Ort sei. Begründung habe ich vergessen. Dass mit der Anonymisierung wusste ich bis eben noch gar nicht. Habe diesen dringenden Tipp jetzt als erstes umgesetzt.

Der viewport ist auch unnötig, initial-scale=1 ist Standard

Das habe ich auch gedacht. Aber ohne den viewport-tag hat es absolut nicht funktioniert. Ich habe das responsive-design nachträglich integriert und sehr lange rumprobiert weil es einfach nicht funktionierte. Die Lösung war am Ende eben dieser viewport-tag.

Die keywords interessieren heute auch keinen mehr, ebensowenig wie author und date - letzteres ist auch noch vier Jahre alt, was soll das für eine Info sein?

Keywords sind bestimmt überflüssig, author wird ausgelesen und verwendet, wenn man eine Seite bei facebook verlinkt, date ist das tatsächliche Erstellungsdatum der Seite.

Das responsive Design habe ich jetzt nicht gründlich überprüft, aber das kann man schöner lösen. Zumal beide Dateien heruntergeladen werden, zumindest am PC.

Habe vorher recherchiert, wie ich es technisch am besten umsetzen könnte. Diese Lösung erschien mir trotz des von Dir erwähnten Nachteils die beste zu sein. Hat angeblich auch irgendwelche Vorteile gegenüber nur einer css-datei, habe jetzt aber vergessen welche.

Die Sparschweine sind eine schöne Markierung der Tipps, man könnte sie aber sicher in Sprites zusammenfassen

Hast vermutlich recht. Werde das mal recherchieren. Derzeit reichen meine css-Kenntnisse nicht aus.

Insgesamt finde ich den Aufbau aber gut, das Design ist nicht sonderlich modern, aber übersichtlich.

Ich finde auch, dass es irgendwie unmodern aussieht, weiß aber nicht so recht wie ich das ändern könnte. Schon gar nicht ohne das Design komplett neu zu machen, was ich eigentlich nicht möchte. Ich bin absolut kein Grafik- und Designprofi.

Gruß

nichtganzdau

Matthes schrieb:

Der viewport ist auch unnötig, initial-scale=1 ist Standard.

Ich hatte das auch bereits probiert. Bislang bin ich nicht um die Angabe herum bekommen. Meine Seite ist ja trivialst aufgebaut, trotzdem wird bei fehlender Angabe nicht korrekt skarliert. Zumindest habe ich verschiedene Ergebnisse bekommen, mit den mobilen Geräten Samsung Galaxy Nexus, Galaxy S6, Nexus 5, aber alle haben eines gemeinsam, die Grafiken wurden nicht hochscaliert.

Xenotyp schrieb:

Matthes schrieb:

Der viewport ist auch unnötig, initial-scale=1 ist Standard.

Ich hatte das auch bereits probiert. Bislang bin ich nicht um die Angabe herum bekommen.

Ich hatte damit ewig Ärger. Laut der Entwicklerwerkzeuge von Firefox hat es nämlich auch ohne viewport funktioniert. Auch die allermeisten Webseiten für Browsertesting haben alles korrekt angezeigt. Nur eben leider echte Smartphones nicht.

Matthes schrieb:

Meine Seite ist ja trivialst aufgebaut,

Ich finde der Quelltext wirkt nicht gerade trivial. Benutzt Du irgendein CMS oder Ähnliches?

Ansonsten habe ich heute noch ein paar kleine Fehler im Quelltext meiner Seite mithilfe des W3C-Validators beseitigt. Viele werde ich allerdings nicht los, da sie durch eingebundenen Code von Facebook, Google, und ganz besonders Amazon verursacht werden (letzteres besonders schön zu sehen auf der Unterseite „Strom sparen“). Ansonsten ist mir aufgefallen (was die meisten im Forum wahrscheinlich auch schon wussten), dass der Website-Check von Seitenreport nur die Startseite analysiert, jedenfalls in Hinblick auf Code-Fehler und einige andere Faktoren.

Gut zu wissen, die viewport-Geschichte. Das werde ich wohl mal genauer prüfen müssen.

Ich würde übrigens die Inhalte noch einmal überarbeiten.
Klasse ist, dass du das Menü per CSS platzierst und im HTML nach dem Inhalt lädst. Jetzt noch den Inhalt schöner aufbereiten und alles passt.
Statt dutzender
wären

und entsprechende margins schöner.
Statt für das Thema des jeweiligen Absatzes wäre eine Überschrift, h1-h6, deutlich besser. Kann man per CSS auch so gestalten, dass es optisch gar nicht anders aussieht.

Die Links könnten alle title-Attribute vertragen.

Die CSS-Dateien könnten noch verkleinert werden, lies dir mal Texte zu "minify css" durch.

Folgendes kann man viel kürzer schreiben:
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;

Besser ist:
padding: 5px 20px 0;

In der style-CSS hast du am Ende vier Elemente mit padding-left:20px, das ist kürzer so:
element1, element2, element3, element4 {padding-left:20px}

Schau, ob es noch mehr Code gibt, den du auf diese Weise zusammenfassen und damit kürzen könntest.

nichtganzdau schrieb:

Xenotyp schrieb:

Meine Seite ist ja trivialst aufgebaut,

Ich finde der Quelltext wirkt nicht gerade trivial. Benutzt Du irgendein CMS oder Ähnliches?

Du hast sicher die Adresse auf meinem Avatar eingeben. Da wird tatsächlich ein CMS eingesetzt, das demnächst im wCF2.2 auch für die Allgemeinheit downloadbar ist. Das ist aber nicht meine Seite, dort habe ich lediglich vor einigen Jahren im Team mitgewirkt. Meine triviale Seite findet sich in meinem Profil.

PS: Kontentmäßig habe ich mich schon einmal durch deine Seite gewühlt. Für mich als Sparfuchs ganz interessant (Bei mir hat alles Energieeffiziensklasse A+++ und LED im ganzen Haus). Es gab da echt einige Kniffe die ich noch nicht kannte.
Ich wette wenn Matthes mit dir und deiner Seite "durch" ist, bist du auch wieder völlig up to date und SEO gerüstet.

@Matthes: Danke noch für die Hinweise. Das mit dem CSS verkürzen, werde ich demnächst mal nach und nach angehen. Die
durch

ersetzen, werde ich auch irgendwann mal machen (das wird lange dauern).

Was die title-Attribute angeht, meine ich irgendwo gelesen zu haben, dass sie als veraltet gelten und heute nicht mehr unbedingt benutzt werden sollten. Da kann ich aber auch im Irrtum sein.

Was meinst Du denn mit Inhalte überarbeiten und Inhalt schöner aufbereiten? Ich habe die Spartipps sehr sorgfältig recherchiert und war bislang der Auffassung, dass sie auch ganz gut strukturiert präsentiert werden. Allerdings denke ich auch, dass es insgesamt ruhig etwas moderner aussehen dürfte, ohne aber dabei an Übersichtlichkeit zu verlieren.

@Xenotyp: Sorry, ich habe eure Seiten verwechselt. Habe mir den Quelltext von Matthes´ Seite angesehen. Deine Seite ist natürlich wirklich simpel aufgebaut. Dafür aber sehr übersichtlich ohne überflüssigen „Design-Ballast“, was ich persönlich auch sehr schätze.

Die title-Attribute sind nicht veraltet. Sie sollten vorhanden sein.

Die Aufbereitung der Inhalte meinte ich rein auf HTML bezogen. Inhaltlich sind sie sehr gut und verständlich und die optische Struktur ist gut. Aber die Code-Struktur nicht.
Die fett hervorgehobenen Stichworte zu Beginn eines Absatzes sollten z.B. besser Überschriften (h1-h6) sein, aus SEO-Gründen. Dabei kannst du die Überschriften mit CSS so gestalten, dass es optisch gleich bleibt.
In deinem Aufbau wären h4 für diese Textteile gut geeignet,

ist auf der Seite "Heizkosten sparen" die Überschrift "Heizkosten senken", darunter würden sich die Stichworte strukturell gut einordnen.

Außerdem hast du z.B. bei den Sparschweinbildchen einige Inline-Styles, die in die CSS-Datei gehören.

Hallo Matthes,

danke noch für die weiteren Tipps. Die Inline-Styles werde ich, sobald ich etwas Zeit habe, ins CSS verschwinden lassen. Das mit den title-Attributen werde ich noch mal genauer recherchieren. Bin mir wirklich sicher, da mal etwas gelesen zu haben. Dass mit den Überschriften hatte ich mir auch schon überlegt. Spricht bestimmt einiges dafür, eventuell aber auch etwas dagegen. Einige Spartipps sind nur ein oder zwei Sätze lang. Somit hätte ich auf einigen Unterseiten ein eher ungünstiges Verhältnis von Überschriften zu Textabsätzen.

So, es hat ein wenig gedauert, aber mittlerweile habe ich die Inline-Styles bei den Sparschweinen in die CSS-Dateien verbannt. Zudem haben die Spartipps jetzt alle h4-Überschriften und
s wurden durch