Kunst

Webdesign

Vita

Home

[



Bescht Blog: 
Html / CMS?

Zurück zur Blog Artikel Auswahl

CMS oder HTML statische Seite? Best Practice und Faktencheck…

CMS oder HTML statische Seite? Es scheinen sich zwei Lager zu bilden: Die „Handcoder-Wizards“ gegen die „CMS-Gurus“. Wer hat nun recht?
Klare Antwort: Keiner! Aber bringen wir ein wenig Licht ins Dunkel:

Jeder Designer hat seine persönlichen Vorlieben – aber ein guter Designer kann beides und stellt seinem Kunden nicht nur die eine oder andere Variante vor. Zur guten Beratung müssen beide Optionen beleuchtet werden.

Das persönliche Gespräch ist ein MUST HAVE. Denn eines ist klar: nicht jeder Schuh passt jedem. Welches System also für die Homepage wählen?

Hier einmal CMS und „handcoding“ HTML im Vergleich:

WORDPRESS- das (marktführende) CMS? Auf jeden Fall eines der beliebtesten Systeme.

CMS: WordPress Installationen  bedienen 38% des Webs auf internationaler Ebene ( Stand Januar 2021)

CMS oder HTML statische Seite - best practice und ein Vergleich

CMS WordPress

Pro

  • Robuste, solide Architektur
  • Schnelle Bearbeitung/ Änderungen von Inhalten ohne Quelltextänderungen, Backend-Modifikationen
  • Mehrere Benutzer können am Projekt mit unterschiedlichen Rechten arbeiten = Arbeitslastverteilung 
  • Große Bandbreite an Plugins und Erweiterungen
  • Einfach Inhalte ändern – auch ohne Programmierkenntnisse
  • Automatisch skalierbar/ responsiv für alle Endgeräte und Browser
  • Komplexe Funktionalitäten können zu relativ geringen Kosten nachgerüstet werden ( Buchungssysteme/
  • Abrechnungssysteme, Terminkalender, E-Learning / Blende Learning Portale…

Contra

*für ungeübte PC-User

  • Erfordert immense Einarbeitung für Anfänger
  • Es gestaltet sich bei Unwissenheit problematisch,  die Optik zu erreichen- zum Beisplie Position eines Bildes, Überblendungen, Bildwechsler…
  • Erfordert fundierte Schnulung & nachhaltigen Mitarbeitereinsatz, um das Potential eines  CMS vollumfänglich zu nutzen
  • Höhere Einrichtungs-, Server-/Hosting- und (je nach Designer) Design-Entwicklungskosten
  • Häufige Sicherheitsupdates und damit einhergehende Wartungsarbeiten und -kosten

Ernsthafter Nachteil eines CMS- Faktencheck

 Ein CMS benötigt immer mehr Ressourcen vom Webspace und Technik, sowie höhere Serveranforderungen des Providers.

… aber:

Wenn eine Webseite früher oder später jedoch Datenbankanwendungen benötigt, wie zum Beispiel für einen Kundenpool, Buchungssysteme, etc… dann ist eine hohe Anforderung an den Server ebenso Voraussetzung

FÜR WEN EIGNET SICH EIN CMS?

  • wenn viele Seiten/Beiträge häufig aktualisiert werden (zum Beispiel bei Blogs/ Kunden-News – Termine)
  • Wenn man einen Benutzerpool anlegen möchte, der mit etwas PC Geschick die Webseite optisch pflegen möchte, ohne im HTML Code „herumfummeln“ zu müssen. (Und dabei einen kompletten Zusammenbruch der Seite provoziert, und der Designer dann wieder Feuer löschen muss…- Erfahrungswert meinerseits? )
  • wenn man eine Benutzerverwaltung, -berechtigung und -Zugriffs Steuerung benötigt
  • wenn man interaktiv Seiten- und Beitragserstellung, deren Genehmigungen realisieren, überwachen möchte
  • wenn Seiten mehrfach erstellt werden müssen ( z.B Sprachversionen – ob mit oder ohne Googlehilfe ( von der ich persönlich abrate- automatische Übersetzungen zeigen keine Professionalität! In meinem zweiten Leben bin ich auch Englisch Coach. Oder war es das erste?? Sei‘ s drum – gerne bereit!)
  • wenn Datenbanken und Unser-Verwaltung, z.B. Kundenlisten/ Mailing/ Newsletter realisiert werden sollen.
  • Wenn Portale mit sehr großen Teilekatalogen, Dokumentationsarchive, die häufig aktualisiert werden, Referenzmaterial oder Lern- und Übungsmaterial wie z. B. für eLearning Websites angelegt werden sollen
  • Wenn man einen Webshop und/oder einen Blog betreiben möchte

CMS – Contra-Argument : Schlechteres Ranking. Wahr oder falsch?

Statische Homepage – mit HTML, CSS, J-Query…

Ich gebe zu – bis vor einigen Jahren habe ich selber schwerst gegen die WordPress- Jünger und Joomla-Ritter gewettert. Meine Argumente waren wie die noch heute proklamierten Mythen der unflexiblen Designs – der schnelleren Ladezeiten, und mehr.

Zwei der Mythen kläre ich hier unten auf – gerne gleich klicken.

Aber lassen wir es hier auf den Vergleich ankommen und stellen die Vor- und Nachteile dar:

Webdesign statsich - das gute, alte HTML. Wir lieben es und brauchen es!

Gute Nachricht: Eine Kombination aus HTML statisch – CMS ist machbar!
Beispiel:

Eine statische Landingpage und Datenbank-basierte Module als CMS im Wechsel.

Handcoding – HTML & Co

Pro

  • Um einiges schneller als ein CMS – selbst ohne Caching oder CDN*-Kosten.
  • Sicherer als ein CMS, weil Angriffsflächen wie Datenbanken und Serverskripte wegfallen
  • Eventuell preisgünstige Neugestaltung oder einzelner Seiten oder der ganzen Website- hier kommt es immer auf den Designer an

     

     

    *CDN= Content Delivery Network – ein Verbund von Servern, die sich die Jobs des Verteilens der großen Webinhalte aufteilen.

Contra

  • Nicht geeignet für extrem umfangreiche Websites mit vielen Einzelseiten (ab 10 Unterseiten)
  • Nicht geeignet für komplexe Seiten: eCommerce- (Webshops), eLearning-, Blogs und Forenwebsites.
  • In reinem HTML/ CSS/ Java oder jQuery (oder auch mit PHP-Anteilen) geschrieben und erfordert daher extreme Programmierkenntnisse, wenn die Inhaltspflege nicht von einem Profi gemacht wird. PLUS: Die Garantie verfällt natürlich, sobald ein „Fremder“ an dem Code arbeitet.
  • Jede individuelle Anwendung muss extra programmiert werden.
  • Wartungsarbeiten müssen vorgenommen werden, da sich die Browsereigenschaften & Anforderungen regelmäßig ändern

Größter VORTEIL der statischen Seite – Faktencheck

Schnelleres Laden!

Natürlich ist die handgecodete Seite in der Performance schneller! Und somit wird sie besser gerankt! Vorerst!  Warum ist das so?

Die Inhalte können direkt  aus der HTML-Seite ausgelesen werden, und es müssen keine Datenbankabfragen stattfinden wie bei einem CMS. Das sieht  in etwa so im Vergleich aus:

Kurze Erläuterung:

Bei einer statischen Website mit HTML bekommt der Server, der anfragt, die Inhalte darzustellen, sofort die Antwort: Ja – hier!
Bei einem CMS landet die Serveranfrage erst in der Datenbank, in der die Inhalte hineingeschrieben sind. Die werden dann in einTemplate  gebettet und ausgegeben. So verzögert sich die Darstellung der Inhalte zeitlich. Meist um ein paar hundertstel Sekunden bis hin zu 5 bis 9 Sekunden. Je nach Größe und Umfang der Anfrage.

Jetzt bleibt die Frage aber nur halb geklärt:

Ist das Ranking einer statischen HTML Seite tatsächlich IMMER besser?

HTML-CMS-Server Abfragen Vergleich- was lädt warum schneller
Ja – mal ein echtes Bild – ich wollte auch mal gerne eine Skizze machen… so wie ich in meinen Unterrichten auf das Whiteboard scribbele…
Webdesign statsich - das gute, alte HTML. Wir lieben es und brauchen es!
WORDPRESS- das (marktführende) CMS? Auf jeden Fall eines der beliebtesten Systeme.
Mythen aus der Codingwelt

Oder: was (manche) Designer gerne behaupten

Zwei besonders häufige  Mythen , die  bei den Handcoding – Verfechtern, (von denen ich auch einer war) aufkommen:

Mythos #1: Bei CMS bist du designtechnisch ja immer eingesperrt – CMS Seiten sehen immer gleich aus

STIMMT- VOLLKOMMEN RICHTIG

Wenn der Designer eben NUR das CMS bedienen kann und von Html/ CSS (der optischen  Auszeichungssprache) keine Ahnung hätte.

Dann empfiehlt es sich aber von Haus aus, dem Designer für sein Kommen zu danken und sich nach einem Neuen umzusehen.

Kleiner Tipp: Wenn ein Designer von „Html programmieren“ spricht, rate ich das gleiche Verfahren. HTML ist keine Programmiersprache.

Fazit

Behauptet das dein Designer per se, CMS ließe sich nicht indivdualisieren, stehe auf und geh! Es ist besser für dich!

Handgecodete HTML Seiten werden immer besser bei Google gerankt, weil sie ja schneller laden!

Jeder liebetIch liebe dieses Argument, weil es richtig …. war!

Vor etwa 10 Jahren vollständig – heute bedingt und jetzt- angelandet in 2021- aktuell noch mehr an Wahrheitsgehalt verloren hat.

Google ändert gefühlt alle 5 Monate sein „Best Practice“ – sprich: wie sucht, sortiert und rankt Google. Welche Maßgaben gibt es.

Natürlich spiel die Ladezeit eine enorme Rolle- aber direkt, fast zeitgleich sortiert Google nach substanziellem Inhalt: den Stories. Content ist „wieder“ King!

Google ist bestrebt , sich qualitativ ab- und herauszuheben. Somit möchte Google fundierte, gut recherchierte Inhalte mit Links – intern/ extern. Sämtliche Kopien, reinste Plagiate & geklaute Inhalte straft Google ebenso auf Dauer.

Was bedeutet das? Richtig! Ein enormer Vorteil einer statischen Seite, nämlich die Statik, ist hier für Google ausgehebelt: Zu Anfang freut sich Google natürlich über die schnelle Performance und rankt die Seite eventuell schneller hoch als eine CMS-Seite.

Stellt Google allerdings durch seine Crawler fest, dass sich da so gar nichts inhaltlich tut, oder schlimmstenfalls sogar Inhalte stumpf abgekupfert wurden, bzw. nicht recherchiert oder gar in unpassender Sprache mit vielen „Boost-Words“ verfasst wurde, fällt die Gunst ziemlich schnell.

Und noch eine alte Socke kann getrost in den Müll:

„SEO- Titel dürfen nicht länger als 80 Zeichen und Beschreibungen nicht mehr als 160 Zeichen sein!“

Falsch – zwar „sieht Google“ nur diese Anzahl von Zeichen und stellt diese in den Ergebnissen dar – aber: der Überschuss wird sehr wohl erfasst und ausgewertet – trägt also dazu bei, die Suchergebnisse zu beeinflussen. Letztendlich ist das Nutzerverhalten ausschlaggebend. Ist die Bounce Rate gering und die Conversion Rate gut – ist viel gerettet!

Page Speed, first contentful paint, layout shift- absolutes Kriterium. Jedoch ist es allen Suchmaschinen letztendlich wurscht, wie diese Werte sind, wenn die User die Page gerne und immer wieder besuchen und sich lange dort aufhalten.

Was nützt mir eine rasend schnelle Page, bei der gleich alles fein da ist, aber keiner kommt gucken…

Es gibt so einige SEO Tools, die so gar nichts mit Performance und Code-Schlankheit zu tun haben -die aber gerne übersehen werden:

Authenzität:

Kommt der inhalt so authentisch rüber, dass ich diesem Service – dem Produkt glauben kann?

Stickwort: Review & Bewertung (über die Google Business Site oder Ranking Portalen)

Marke:

Ist deine Marke bereits bekannt und/oder etabliert? Kümmerst du dich um deine kunden per Chats, Newsletter, Spezial Angeboten, Social Media? Schaltest du Aneigen in Social Media oder Google?

Geschenke, Geschenke, Geschenke:

Jeder liebt Geschenke – ich auch! Du gibst gerne – her damit? Kleine Geschenke erhalten die … Kunden. Wenn ich das Gefühl habe, ich kann bei dir Nützliches für Lau bekommen, ist die Wahrscheinlichkeit höher:

  • öfters auf deiner Homepage vorbeizusehen
  • eher bei dir als bei anderen das Produkt oder die Dienstleistung zu erwerben ( altes Reciprocate-Prinzip)
  • über dich zu sprechen udn so andere User auf deine Seite zu locken.

Und es gibt noch soviel mehr. Aber das soll es an dieser Stelle gewsen sein. Ich glaube – ich habe dir eine überschaubare Menge an Wissen geschenkt… du siehst – ich kümmere mich. 

Also – viel Spaß mit deinen Webprojekten der Zukunft oder wir beide starten etwas gemeinsam. Wer weiß…

Fazit:

Dieses Argument wird mit zahlreichen Optimierungsoptionen und guten SEO Plugins ausgehebelt. Denn selbst wenn die Ladezeit höher als bei statischen Seiten ist, gibt es im SEO mehr Kriterien, eine Seite zu ranken als über die Ladezeit. Weitaus mehr!

Ein guter, zusätzlicher  Überblick wird dir hier auf dieser englischen Page gegeben:

Famous last words

Ich habe hier bestenfalls etwas Verwirrung entknoten, die Hardliner der festgefahrenen Idiologie aber sicher nicht überzeugen können. Eines bleibt gewiss: die stetige Veränderung des WWW. Dank Tim Berners Lee und seinen Mannen müssen wir entscheiden ob es sich als Büchse der Pandorra erweist, oder zum heiligen Gral der Technik, der internationalen Kommunikation und des gemeinsamen Wirtschaftens wächst. Ich bin für zweiteres und plädiere a) für Wohlwollen und b) für eine „0 und 1“- freie Zeit. Daher: einen herzlichen Gruß an alle da draußen… ich werde jetzt mal genau da hingehen, mir den wundervollen Gesang der Vögel anhören, und mich freuen, dass die Hummeln und Bienen sich auf meinem Balkon wohlfühlen. Wer hierzu noch einen Tipp hat, wie ich den kleinen Flügel-Gesellen im Winter was Gutes tun kann – bitte unbedingt melden!  

Ute Bescht

Künstlerin |  Webdesignerin | Dozentin - Meine Leidenschaft streckt sich von Leinwand auf den Bildschirm und mündet vor Teilnehmern!

Ute Bescht- Künstlerin & Webdesignerin aus Bremen - Individuelle Kunst für das Web mit CMS & Html

Web Design Bescht Art - Portfolio der Websites

Der neueste Bescht in der Webdesign Familie- und eher untypisch - aber ich liebe auch das schwarz-weiß Spiel. Eine Website in HTML5 & SCSS. Gestaltet mit Bildwechslern und SVG-Curtain- Slider. Clean, leicht, handmade. Leise Effekte, das Auge beruhigend. Fließend weich und komplett crossbrowser-kompatibel.
Diese Gestaltung fand sofort Freunde und der nächste Auftrag dafür ist gerade im Werden.

Website besuchen:

Website VERUM GmbH - TrainCoaching © - Human(HR)Resoucing - Consulting in Bremen

Dieses Webprojekt ist angelegt, um zu wachsen. Die Firma ist beweglich, innovativ, und passt sich den Marktgegebenheiten stetig an. Mit ihrem Portfolio muss sie das auch. Hier sollen die Inhalte, die eben auch aufgrund der Materie wie Kosten Optimierung, Change Prozess Begleitung,u.a. auch sehr zielgerichtet und faktsich sein müssen- weich dargestellt werden. Das ist hier auch kein Problem gewesen, da der Spirit der Firma trotz seiner wegweisenden Inhalte den Menschen an erste Stelle stellt. Das "Dach" dieser Firma auf den Säulen ihrer Angebote ist nur einem Sinn unterlegen: Wahrheit Mensch.

Details:
  • CMS WordPress & DIVI Builder
  • Individuell angefertige Moodboards & Mockups
  • SVG Buttons
  • Individualisiertes CSS/ SCSS (SASS)

VERUM GmbH Colorboard

#000d2f

#d68f33

#ecd8c0

#f4ebe2

#eaf4fe

#416391

mehr Design Projekte

eine kleine Auswahl meiner gestalteten Homepages mit den jeweiligen Colorboards

Bunt-fröhlich-wild. Das Künstlerhaus ART15 im Bremer Schnoor - auch noch mitten im ältesten Giebelhaus des historischen Viertels. Eine WordPress-Lösung - natürlich wieder individualisiert mit SCSS & Java. Wichtig ist hier die Bewegung - aber auch den Raum für die gezeigte Kunst zu geben. Da die Logofarbe ein warmes Rot ist, war der Gegensatz schwarz und weiß schon fast verpflichtend.

Website besuchen:

#9a2522

#000000

#ffffff

#990404

Heilpraktikerin für Psychotherapie - Entspannungspädagogin. Hier sollte alles im sanften und warmen Ockerton gemischt mit warm abgetöntem Aschgrau und Tumbleweed- Gelb angelegt werden. Diese Website ist ein statisches HTML mit CSS, gestaltet als ONE-Page-Layout. Das eignet sich besonders für kleinere Webseiten- Projekte und ist sehr beliebt gerade zum Start einer Web Präsenz.

Website besuchen:

#a69690

#5e4f49

#bbcdc7

#daab9a

#dad3ce

Gerda Osterloh - Kommunikations Trainerin. Wichtig war hier die Umsetzung der Lieblingsfarbe. Ich habe hier einen Gegensatz mit verschiedenen Blau-Grüntönen Midnight Green, Maximum Blue Green, Luxe Cadet Blue und Middle Red Lachs designed.  Diese Website ist ein statisches HTML mit CSS, gestaltet als ONE-Page-Layout. Auch hier war der Fokus auf sanfte Übergänge und stimmige Bildbearbeitung.

Website besuchen:

#11525f

#e59585

#f8f9fa

#23bdbf

#629e9c

#2c2f3a

IRENE GERDES & RIJANA KRÖGER PHYSIOTHERAPIE. Hier schwebt das Design im Türkis / Apfelgrün der Töne Cadet Bluegreen, Acid Green, Fluorescent Blue symbolisiert hier Frische und Gesundheit. Das Team hat komplett neue Praxisräume und diese Farbgebung wurde natürlich im Design und der Farbwelt aufgegriffen. Buttons, Fotos, Look & Feel aus einem Guss. Die verwendete Technik ist auch hier ein ONE-Page Design mit CSS/SCSS.

Website besuchen:

#45a0a1

#cdded4

#5af1eb

#c3c501

#5cc8c7

Manfred Fischer Immobilien - hier ging es bereits bei der Logoerstellung los. Nachdem ich das CI festgelegt hatte, sollte die Website mit einem CMS zur späteren selbständigen Bearbeitung erstellt werden. Ebenso ist geplant, über eine API die Portale Immowelt und Immoscout einzubinden. Das Design soll schlicht und elegant wirken - darum fiel die Wahl auf die dunkle (NCS)  & helle (Beau blue) Cyan Variante des Logos über ein hell Leder Ocker. 

Website besuchen:

#BA6A1A

#BDB49A

#ACC9DF

#353532

#0F88C5