Template kaufen / selber erstellen
1 
marctrix
3 
Gunnar Bittersmann
1 
JürgenB
6 Sicht eines Tekkis
1 Gunnar Bittersmann
2 0 marctrix
0
0 
at
Template kaufen / selber erstellen
Matthias Scharwies
TSHallo,
vielleicht hat von euch jemand kurz Zeit der sich dieses Template anschauen kann, vom CSS Code:
https://preview.arraythemes.com/atomic/
Es geht darum ich benötige für mich eine kleine Webseite. Natürlich könnte ich auch ein eigenes Wordpress Design erstellen, die Frage ist, ist es "schädlich" wenn man etwas fertiges nimmt und dennoch z.B. im Bereich Marketing und Design tätig ist und nichts eigenes hat? Ich bin da etwas hin und her gerissen.
Was sagst ihr dazu? Und wie ist das oben genannte Template CSS mäßig aufgebaut? Sagt ihr OK oder doch lieber die Finger lassen? Oder so ein "kleines" Design lieber selber erstellen?
-
Hej Sophie,
vielleicht hat von euch jemand kurz Zeit der sich dieses Template anschauen kann, vom CSS Code:
https://preview.arraythemes.com/atomic/Es geht darum ich benötige für mich eine kleine Webseite.
Erst mal vorab: Die Größe der Website spielt eigentlich keine Rolle. Schließlich sehen in einem CMS alle Seiten gleich aus, bzw. man hat halt ein paar "Seitentypen"
Auf einer großenSite, verwendet man diese öfters, auf einer kleinen seltener. Unter Umständen benötigst du auf einer "kleinen" Site weniger Seitentypen. Aber das ist nciht zwingend der Fall und umbenötigte Seitentypen stören ja erst mal auch nicht.
Natürlich könnte ich auch ein eigenes Wordpress Design erstellen, die Frage ist, ist es "schädlich" wenn man etwas fertiges nimmt und dennoch z.B. im Bereich Marketing und Design tätig ist und nichts eigenes hat? Ich bin da etwas hin und her gerissen.
Meiner Meinung nach ist es nicht schädlich. Ich bin sogar ein Freund von: ist auf x-tausend Seiten erprobt!
Was sagst ihr dazu? Und wie ist das oben genannte Template CSS mäßig aufgebaut?
Habe leider gerade nicht die Zeit, das anzuschauen…
Sagt ihr OK oder doch lieber die Finger lassen? Oder so ein "kleines" Design lieber selber erstellen?
Siehe oben…
Meine Vermutung: du möchtest nicht, dass deine Seite aussieht, wie die von vielen anderen Menschen. Dazu zwei Dinge, die sich auf den ersten Blick widersprechen:
- Doch willst du
- Deine Seite wird nciht aussehen, wie die von anderen, wenn du ein fertiges Layout nimmst
Warum?
- du willst eine moderne Webseite, die viele bekannte Designelemente mit anderen Seiten teilt. Du willst, dass Menschen deine Seite verstehen und Dinge wiederkennen, so dass sie die Bedienung deiner Webseite nicht erst lernen müssen. Das würden sie nicht tun, weil sie dazu keine Lust haben und vermutlich verschwinden. Also willst du durchaus Seiten, die in mancherlei Hinsicht so aussehen und sich so verhalten wie andere Webseiten
- Diese Themes lassen sich in der Regel durch viele Stellschrauben an eigene Wünsche anpassen. Oft kommen die sogar mit "Ausprägungen" für allerhand Anwendungsfälle, so wie Optimizr (https://optimizerwp.com/templates/) - insofern hat man im Endergebnis doch eine ziemlich individuelle Website. Zumal die schiere Zahl der verfügbaren fertigen Layouts kombiniert mit eigenen Anpassungen dafür sorgt, dass man einer ähnlichen Seite wie deiner nicht so schnell wiederbegegnet im Web!
Kurz gesagt: ich bin für fertige Themes. Einzige Voraussetzungen: dein Webauftritt ist so "gewöhnlich", dass du in dem riesigen Pool verfügbarer Themes ein für Dich passendes findest.
Dabei sind schon ziemlich ausgefallene und spezielle Fälle abgedeckt. Z.B Themes für Taxi-Firmen, Hotels, Handwerker, Agenturen usw…
Marc
-
@@Sophie
vielleicht hat von euch jemand kurz Zeit der sich dieses Template anschauen kann, vom CSS Code:
https://preview.arraythemes.com/atomic/Es ist von der Stange, d.h. es passt ein bisschen, aber nicht richtig.
Es ist grob fehlerhaft:
main-navigation ul li a:active, .main-navigation ul li a:focus { outline: none; }Bei Tastaturnavigation erkennt man überhaupt nicht, wo man ist.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
Hallo,
html laut Validator OK, css aber nicht:
Gruß
Jürgen-
Servus!
Hallo,
html laut Validator OK, css aber nicht:
Vieles sind aber kleinere Tippfehler, die sich durch Entfernen von Klammern, bzw. Hinzufügen von einem Doppelpunkt korrigieren lassen.
Gruß
JürgenHerzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hej Matthias,
html laut Validator OK, css aber nicht:
Vieles sind aber kleinere Tippfehler, die sich durch Entfernen von Klammern, bzw. Hinzufügen von einem Doppelpunkt korrigieren lassen.
Zudem tut valides CSS oft nicht was man will. Ein Vendor-Präfix beispielsweise ist kein valides CSS.
Oder veraltete Syntax (gibt es eigentlich Fälle, wo man die ohne Vendor-Präfix schreibt?)…
Marc
-
@@marctrix
Ein Vendor-Präfix beispielsweise ist kein valides CSS.
Wie kommst du denn darauf?
Oder veraltete Syntax (gibt es eigentlich Fälle, wo man die ohne Vendor-Präfix schreibt?)…
Und es hat
zoom: 1gemacht.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
Hallo marctrix,
Ein Vendor-Präfix beispielsweise ist kein valides CSS.
Hersteller-spezifische Präfixe sind in CSS standardisiert. Weil sie aber nicht weiter auf ihre formale Richtigkeit überprüft werden konnten, meldete der offizielle Validator bei ihrer Verwendung Fehler – bis 2011.
MfG, at
-
-
-
-
Allein
https://preview.arraythemes.com/atomic/wp-content/themes/atomic/style.css?ver=4.8.1
liefert 123,91Kb. Mit den anderen CSS-Dateien zusammen kommt man auf knapp 200 KBytes. Dann folgt da noch eine Menge mächtiges Javascript, insbesondere jquery von dem wohl bestenfalls 0,03% benutzt werden. Dann noch die Fonts.
Bis hier her gab es noch keine einzige Information für den Betrachter.
Gesamt: (Mit 109 MBit/s-DSL und "fast ping")
54 Anfragen 0,98 MB / 474,52 KB übertragen Beendet: 4,72 s DOMContentLoaded: 4,89 s load: 5,91 sMir erscheint das als viel zu viel, es muss also schon gute Gründe dafür geben, das zu verwenden. Im Zug, irgendwo in der Steppe zwischen Frankfurt am Main und Hamburg will man das mit GPRS (59 kBit/s) nicht laden. (Ich bin oft mit dem Smartphone-WLAN unterwegs.) Auch das WLAN im ICE hängt dann durch.
Die Frontender, die natürlich möglichst brutal schnell eine auf den ersten Blick brauchbar erscheinende Webseite hinstellen wollen, mögen mir diese substantielle Kritik nachsehen: Ich bin der Auffassung, dass hier ein eklatantes Missverhältnis zwischen Aufwand (Menge der zu übertragenden Daten) und Ergebnis ("Hallo Welt!") vorliegt.
Technik-philosphisch betrachtet handelt es sich um das Problem, dass eine eierlegende Wollmilchsau gekauft wird, weil man Eier braucht. Ein Huhn wäre billiger, bräuchte weniger Futter, noch weniger Platz und würde täglich ein Ei legen, statt hin und wieder nur (saure) Milch und die ebenso nicht benötigte Wolle zu geben
-
@@Regina Schaukrug
Fast alles richtig, nur hier muss ich widersprechen:
Die Frontender, die natürlich möglichst brutal schnell eine auf den ersten Blick brauchbar erscheinende Webseite hinstellen wollen
Das sind keine Frontender, sondern Leute, die besser die Finger von Dingen lassen sollten, von denen sie keine Ahnung haben.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Die Frontender, die natürlich möglichst brutal schnell eine auf den ersten Blick brauchbar erscheinende Webseite hinstellen wollen
Das sind keine Frontender, sondern Leute, die besser die Finger von Dingen lassen sollten, von denen sie keine Ahnung haben.
Du hast Recht. Ich korrigiere:
Diejenigen selbsternannten "Frontender", welche brutal schnell eine auf den ersten Blick brauchbar erscheinende Webseite hinstellen wollen
-
-
Allein
https://preview.arraythemes.com/atomic/wp-content/themes/atomic/style.css?ver=4.8.1
liefert 123,91Kb. Mit den anderen CSS-Dateien zusammen kommt man auf knapp 200 KBytes.
Bei den Werten handelt es sich nicht um das tatsächlich übertragene Datenvolumen, sondern um das Volumen nach der gzip-Dekomprimierung. Das genannte Stylesheet hat ein Übertragungsvolumen von 21KB. Ingesamt haben alle Stylesheets auf der Startseite zusammen ein Übertragungsvolumen von 60KB. Das erstmal ohne Wertung.
Dann folgt da noch eine Menge mächtiges Javascript, insbesondere jquery von dem wohl bestenfalls 0,03% benutzt werden.
jQuery hat mininifiziert und gzip-komprimiert eine Dateigröße von 33KB. Alle JavaScripts zusammen haben ein Volumen von 118KB. Auch das möchte ich als neutrale Festellung verstanden wissen.
Dann noch die Fonts.
…haben hier ein Übetragunsvolumen von 154KB.
Mildernde Umstände sind hier, dass alle statischen Assets der Seite gecacht werden. Beim Aufruf einer Folgeseite müssen Stylesheets, Skripte und Schriften kein zweites Mal geladen werden.
Gesamt: (Mit 109 MBit/s-DSL und "fast ping")
54 Anfragen 0,98 MB / 474,52 KB übertragen Beendet: 4,72 s DOMContentLoaded: 4,89 s load: 5,91 sDas ist interessant. Bei mir sind es 62 Anfragen, die ein Gesamtvolumen von 1,2MB aufweisen. Bei dem zweiten Wert hast du vermutlich einen Copy&Paste-Fehler begangen, denn die Größe ist dimensionslos und ohne weitere Erklärung nicht aussagekräftig. Wie auch immer, bei real übertragenen 1,2MB und der genannten Übertragunsrate von 109MBit/s wäre eine Übertragungsdauer von ~88ms zu erwarten gewesen. Das deutet also darauf hin, dass die Übertragunsdauer maßgeblich von einer anderen Größe als dem Datenvolumen beeinflusst wird. Ein Blick in die Dev-Tools kann dieses Mysterium vielleicht aufklären, hier mal ein partielles Diagramm:
Es ist gut zu sehen, dass die Datenübertragungs-Bereiche (blau) pro Zeile einen verhältnismäßig kleinen Anteil einnehmen. Den Löwenanteil macht hier die Time-To-First-Bit (grün) aus. Das heißt, dass die Anfragen unverhältnismäßig lange auf dem Webserver verweilen, bis die tatsächliche Datenübertragung beginnt. Dem folgen dann Queueing-Tasks (weiß), Initial-Connection-Setup (orange) und SSL-Verschlüsselung (violett).
Beim Haupt-HTML-Dokument (oben erste Zeile) wird das besonders deutlich:
Der Daten-Download macht hier nur einen Bruchteil der Anfrage aus.
Mir erscheint das als viel zu viel, es muss also schon gute Gründe dafür geben, das zu verwenden.
Das kann man sicherlich so sehen, weniger Datenvolumen ist immer wünschenswert. Allerdings bekämpft man in diesem speziellen Fall nur ein Symptom. Die eigentlichen Netzwerk-Engpässe haben andere Ursachen. Die unverhältnismäßige Time-To-First-Bit ist vermutlich eine Kombination aus fehlkonfiguriertem Webserver und Wordpress. Die hohe Idle-Time ist eine Folge der vielen Einzel-Anfragen. Hier wäre es sinnvoll, die Skripte und Stylesheets zu bündeln.
Hat man diese Flaschenhälse erstmal behoben und sind noch genügend Ressourcen vorhanden, dann sollte man sich auch dem Übertragungsvolumen nochmal ansehen, wobei ich mich auch hier auch wieder vom größten zum kleinsten Übel vorkämpfen würde: Bilder -> Fonts -> JavaScript -> Stylesheets.
Viele Grüße
-
Hej 1unitedpower,
vielen Dank für den umfangreichen Beitrag!
Das kann man sicherlich so sehen, weniger Datenvolumen ist immer wünschenswert. Allerdings bekämpft man in diesem speziellen Fall nur ein Symptom.
Jein, was die Geschwindigkeit angeht hast du recht. Mich ärgert bei großen Datenmengen allerdings in erster Linie die Tatsache, dass das auf mein inklusiv-Volumen einen schlechten Einfluss hat. Wenn das aufgebraucht ist, wird es erst unerträglich langsam!
Vor allem wenn es Werbung ist (hier natürlich nicht), dann wird klar, dass vieles im web nicht kostenlos ist. Wir zahlen de facto um Werbung angezeigt zu bekommen.
Jedenfalls klingt das jetzt auf das konkrete Theme bezogen erst mal gar nicht so schlecht. Zumal sich ohne große Mühe einiges sparen lassen dürfte, wenn eigene Bilder und eventuell Standard-Fonts verwendet werden.
Marc
-
54 Anfragen 0,98 MB / 474,52 KB übertragen Beendet: 4,72 s DOMContentLoaded: 4,89 s load: 5,91 sDas ist interessant. Bei mir sind es 62 Anfragen, die ein Gesamtvolumen von 1,2MB aufweisen. Bei dem zweiten Wert hast du vermutlich einen Copy&Paste-Fehler begangen, denn die Größe ist dimensionslos und ohne weitere Erklärung nicht aussagekräftig.
Äh. Nein. Ich habe alle 5 Zeilen in einem Rutsch kopiert. Warum sollte der "zweite Wert" falsch sein. Es waren 0,98 MB (=980 KB) entpackt und 474,52 KB gepackt, wenn ich die Zahlen richtig interpretiere.
Der Unterschied in der Anzahl der Requests und der Datenmenge kann daran liegen, dass ich den Cache nicht abgeschaltet habe. Tatsächlich kommt, da stimmen wir überein, zu den großen Datenvolumen noch ein miserabel "getunter" Server und das von mir nicht empfohlene Wordpress (nebst wohl einigen Plugins) hinzu.
Was den Stylesheet und das Javascript betrifft: Es dürfte sich lohnen, nicht benötigtes Zeug zu löschen. Auch ist es richtig, dass der Server (scheinbar) lange für die Antwort braucht. Die Gründe hierfür kann ich aber nur vermuten.
-
-
-
Hallo Sophie,
was bietest du denn an: Anpassungen bestehender Templates oder eigenständige Designs? Denn einfacher als mit einer eigenen Website kommst du an keine Referenz.
MfG, at
-
Hello,
im Prinzip sollten bessere Template-Collections (HTML, CSS, JavaScript, ...) auch immer einen aktiven Designer enthalten, mit dessen Hilfe man aus dem vollumfänglichen Paket automatisiert die tatsächlichen Teile der Komponenten auswählen kann und so das Gesamtpaket (in Richtung Client) meistens auf ein Minimum (1 Viertel ist typisch) zusammenstreichen kann.
Liebe Grüße
Tom S.--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
-
Hallo TS.
im Prinzip sollten bessere Template-Collections (HTML, CSS, JavaScript, ...) auch immer einen aktiven Designer enthalten, mit dessen Hilfe man aus dem vollumfänglichen Paket automatisiert die tatsächlichen Teile der Komponenten auswählen kann und so das Gesamtpaket (in Richtung Client) meistens auf ein Minimum (1 Viertel ist typisch) zusammenstreichen kann.
Wenn ich dich beziehungsweise diesen einen Satz (mitsamt seinen Einschüben) wenigstens einigermaßen richtig verstanden haben sollte, woran ich allerdings ernsthafte Zweifel hege, bleibt am Ende nur eine (nicht ganz unwesentliche) Frage offen: Und?
MfG, at
-
Hello,
das sollte auch so heißen
die tatsächlichen Teile der Komponentendie tatsächlich benötigten Teile der Komponentenvielleicht verstehst Du mich jetzt?
Es ging um die nutzlos übertragenen Kilobytes vorgefertigter Template-Pakete.
Liebe Grüße
Tom S.--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
-
Hallo TS.
vielleicht verstehst Du mich jetzt?
Ein wenig.
Es ging um die nutzlos übertragenen Kilobytes vorgefertigter Template-Pakete.
So in etwa hatte ich mir das schon gedacht, aber den Zusammenhang zu meinem Beitrag nicht herstellen können. Dennoch eine kurze Erwiderung:
Was ein Template umfasst oder nicht, hängt nicht nur vom Template, sondern auch von dem Content Management System sowie gegebenenfalls weiteren Komponenten ab, für das oder die es entwickelt worden ist.
Und in aller Regel lassen sich bei Schriftarten, Bildern und anderen Medien sehr viel größere Einsparungen erzielen als beim Template-Code. Mehrfach eingebundene Bibliotheken oder ähnliches lasse ich mal außen vor.
MfG, at
-
Hej at,
Und in aller Regel lassen sich bei Schriftarten, Bildern und anderen Medien sehr viel größere Einsparungen erzielen als beim Template-Code.
Ich habe mal alles gelöscht, dem ich zustimme.
Zu diesem einen Satz möchte ich aber anmerken, dass zu „in aller Regel“ zwar recht hast, dass es hier aber um einen konkreten Fall geht. Wenn Regina Schaukrug recht hat und tatsächlich 200kByte allein an css übertragen werden, dann muss man schon ziemlich hoch auflösende oder schlecht komprimierte Bilder verwenden, um diese Datenmenge unerheblich werden zu lassen, so dass eine Optimierung keinen Sinn macht.
Dann dürfte die Seite aber nahezu unbenutzbar langsam werden…
Marc
-
Hallo marctrix,
vielen Dank für den Hinweis auf den Beitrag von Regina Schaukrug – auch wenn du meines Erachtens nicht die richten Schlüsse daraus ziehst.
Denn wenn eine Textdatei in der Übertragung praktisch ebenso groß ist wie auf auf dem Speichermedium, funktioniert offenbar etwas anderes nicht.
Die von ihr gemessenen „123,91Kb“ für die style.css sind nämlich entweder ein Tippfehler und es handelt sich wie auch in der Summe um kB, oder es sind tatsächlich kb und der Wert ist damit schlicht unbedenklich. In meinem Dateisystem belegt die style.css jedenfalls 127 kB, mittels gzip komprimiert aber nur 22 kB.
Und nur zu Erinnerung: Die Menge aller für die Darstellung der Seite nötigen Ressourcen liegt in meinem Browser bei 1,64 MB. Soviel zum konkreten Fall.
MfG, at
-
Hej at,
vielen Dank für den Hinweis auf den Beitrag von Regina Schaukrug – auch wenn du meines Erachtens nicht die richten Schlüsse daraus ziehst.
Na da bin ich mal gespannt.
Denn wenn eine Textdatei in der Übertragung praktisch ebenso groß ist wie auf auf dem Speichermedium, funktioniert offenbar etwas anderes nicht.
Oder es wurde nicht eingesetzt. Wie auch immer habe ich dazu im konkreten Fall keine Informationen. Insofern kann ich diesbezüglich auch keine Schlüsse gezogen haben.
Und nur zu Erinnerung: Die Menge aller für die Darstellung der Seite nötigen Ressourcen liegt in meinem Browser bei 1,64 MB. Soviel zum konkreten Fall.
Da würdest du nicht als eine von mehreren möglichen Maßnahmen die Größe der css-Dateien verkleinern? Zum Beispiel mittels der von dir genannten Methoden (falls nicht bereits geschehen)?
Ich denke doch! 😉
Ist das css denn minimized? Und die js-Dateien? Kann das hier am iPad gerade nicht überprüfen. Für so was habe ich keine Tools installiert. Das mache ich immer am Computer. Ist aber eigentlich auch egal.
Ich denke, bei 1,64 MB gibt es mehrere Stellen, an denen man noch was rausholen kann…
Marc
-
Hallo marctrix,
die Bilder übernimmt man meist eh nicht vom Template, bei den Fonts empfiehlt sich zumindest eine Anpassung an die eingesetzten Sprachen, das Laden überflüssiger Bibliotheken kann man schnell auskommentieren und mod_deflate kann unabhängig vom Template konfiguriert werden. Alles in allem ein überschaubarer Aufwand.
Lohnt es sich danach noch, das CSS zu überarbeiten, um komprimiert wieviel einzusparen? 10 kB oder 15? Für eine Datei, die nach dem Laden der ersten Seite im Cache liegt. Wenn ich das wollte, würde ich gar nicht mit einen fertigen Template beginnen, sondern ein eigenes erstellen, denn der Aufwand muss ja offenbar ohnehin in keinem sinnvollen Verhältnis zum Ergebnis stehen.
MfG, at
-
Hej at,
die Bilder übernimmt man meist eh nicht vom Template, bei den Fonts empfiehlt sich zumindest eine Anpassung an die eingesetzten Sprachen, das Laden überflüssiger Bibliotheken kann man schnell auskommentieren und mod_deflate kann unabhängig vom Template konfiguriert werden. Alles in allem ein überschaubarer Aufwand.
Habe ich erwartet, dass du das auch genau so machen würdest.
Lohnt es sich danach noch, das CSS zu überarbeiten, um komprimiert wieviel einzusparen?
Nie und nimmer!
Marc
-
-
-
-
-
-
-
-
-
Hallo,
nichts in diesem Bereich. Mich kann man als Hostesse für Events und Messen mieten.
-
Hallo Sophie,
dann nimm das, was dir am wenigsten Schwierigkeiten bereitet. Je nach persönlichen Vorlieben und Fähigkeiten sowie der Qualität des Templates.
MfG, at
-
-
