![\"Content](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2017\/08\/grafik1.jpg\")
<\/p>\nW\u00e4hrend Webdesign und Programmierung zueinander geh\u00f6ren, wie der linke Schuh zum rechten, kommen diese beiden Bestandteile oft nicht aus ein und derselben Feder. Manch einer kann wunderbar Webseiten designen, w\u00e4hrend ein anderer wenig Sinn f\u00fcr \u00c4sthetik, aber daf\u00fcr umso mehr f\u00fcr Code hat.
\nNat\u00fcrlich gibt es auch Multitalente, die beides beherrschen, jedoch ist es eher die Regel als die Ausnahme, dass einer f\u00fcr das Design zust\u00e4ndig ist und ein anderer f\u00fcr die Programmierung. Klar sollte darum sein, dass man mit dem Design nicht die Programmierung inklusive bekommt und umgekehrt. Nach der Erstellung der Webseite ist also vor der Erstellung der Webseite. Denn wenn das Design steht, muss anschlie\u00dfend noch alles so umgesetzt werden, damit man online die Webseite genauso sehen und bedienen kann, wie man es sich w\u00fcnscht.<\/p>\n
Steht das Webdesign im ersten Schritt schon einmal, so musst Du Dir sp\u00e4testens jetzt die Frage stellen, welche Art von Website sich denn f\u00fcr Deinen neuen Webauftritt eignet.
\nProgrammiersprachen und Softwarel\u00f6sungen gibt es allerdings wie Sand am Meer und \u00fcber jede l\u00e4sst sich ein eigenes Buch verfassen. Um hier also einen \u00dcberblick zu bekommen, werde ich haupts\u00e4chlich auf HTML und Content-Management-Systeme eingehen und deren Vor- und Nachteile kurz erl\u00e4utern.<\/p>\n
<\/p>\n
HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) sind die Grundpfeiler einer Webseite und ergeben gemeinsam ein tolles Team. W\u00e4hrend in HTML der strukturelle Aufbau und Inhalt einer Webseite definiert wird, k\u00fcmmert CSS sich um das Auftreten der Seitenelemente bez\u00fcglich Form, Farbe und Verhalten. Gemeinsam programmiert man in HTML + CSS Struktur und Layout einer Webseite.
\nDa ein HTML-Dokument zun\u00e4chst einmal nur statisch ist, muss man auf weitere Programmiersprachen zur\u00fcckgreifen, um dynamische Webseiten erstellen zu k\u00f6nnen. Zu den am weitesten verbreiteten z\u00e4hlen zum Beispiel JavaScript und PHP. Mit Hilfe dieser Programmiersprachen k\u00f6nnen Struktur und Inhalt dynamisch erstellt oder sogar w\u00e4hrend des Seitenbesuchs angepasst werden. Daf\u00fcr gibt es die unterschiedlichsten Softwarel\u00f6sungen, zum Beispiel Content-Management-Systeme oder kurz: CMS. Beispiele bekannter CMS-Softwares sind: Joomla, Typo3, Drupal und nat\u00fcrlich WordPress.
\nDer Hauptzweck eines CMS ist es, alle Inhalte strukturiert abzuspeichern, um sie anzeigen und verwalten zu k\u00f6nnen. Da es sich bei Content-Management-Systemen praktisch um fertige L\u00f6sungen handelt, spart man hier Kosten in der Entwicklung, d.h. es muss nicht jede Funktion frisch programmiert werden. Au\u00dferdem kann der Webseiteninhaber seine Homepage ohne gro\u00dfe Vorkenntnisse selbst verwalten und dies von jedem Computer aus tun, da die \u00c4nderungen online erfolgen. Der Adminbereich, \u00fcber den dies gemeistert wird, ist auch f\u00fcr Anf\u00e4nger leicht bedienbar.<\/p>\n
Es ist schwer, pauschal zu sagen, welche Art von Website g\u00fcnstiger oder teurer ist. Dies h\u00e4ngt auch immer vom Projekt ab. Allerdings ist bei Kleinstprojekten HTML meistens g\u00fcnstiger. Grunds\u00e4tzlich gilt aber: je komplexer eine Website, desto h\u00f6her liegt die Wahrscheinlichkeit, mit einem CMS g\u00fcnstiger dran zu sein.
\nTante Ernas Webvisitenkarte (statische Website) ist nicht mit einem Onlineshop (dynamische Website) vergleichbar. Bei einer statischen Website wird jede Seite einzeln programmiert. Bei einer dynamischen Website muss zuerst das CMS installiert und eingerichtet und anschlie\u00dfend noch das Webdesign eingebaut werden.<\/p>\n
![\"Programmierung](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2017\/08\/grafk2.jpg\")
<\/p>\n
M\u00f6chte man an einer statischen Website etwas am Inhalt \u00e4ndern, so muss dies direkt im Code geschehen und bedarf daher HTML-Kenntnisse. Bei einer dynamischen Seite werden diese \u00c4nderungen \u00fcber WYSIWYG-Editor eingegeben, was einer Schreibprogramm \u00e4hnlichen Oberfl\u00e4che gleichkommt und auch f\u00fcr Laien verst\u00e4ndlich ist. Darin gibt man seine Texte ein und l\u00e4dt Bilder, Dokumente oder Videos hoch.
\nWYSIWYG steht f\u00fcr \u201e What You See Is What You Get\u201c und bezieht sich darauf, dass man beim \u00c4ndern oder Erstellen von Inhalten eine Vorschau auf das Ergebnis hat. Dies ist ziemlich praktisch und vor allem sehr benutzerfreundlich. Durch die einfache Bedienbarkeit eines WYSIWYG-Editors, kann man selbst kleine oder gr\u00f6\u00dfere \u00c4nderungen vornehmen, ohne diese in Auftrag geben zu m\u00fcssen. Dabei spart man sowohl Zeit, als auch Geld.<\/p>\n
![\"What](\"http:\/\/www.designenlassen.de\/blog\/wp-content\/uploads\/2017\/08\/grafik3.jpg\")
Quelle: advancedcustomfields.com\/resources\/wysiwyg-editor\/<\/p><\/div>\n
Eine in HTML erstellte Website ben\u00f6tigt praktischerweise keine Wartung, wohingegen in eine Website, die mit einem CMS, wie beispielsweise Joomla oder Wordpress erstellt wurde, regelm\u00e4\u00dfig Updates eingepflegt werden m\u00fcssen. Hinzu kommen hier noch Sicherheits-Updates, die unbedingt in k\u00fcrzester Zeit erfolgen m\u00fcssen. Die meisten Content-Management-Systeme bieten aber die M\u00f6glichkeit, zeitnah und automatisch \u00fcber Updates informiert zu werden.
\nWer auch immer letztendlich f\u00fcr die Wartung der Website zust\u00e4ndig sein wird, sollte vor allem zuverl\u00e4ssig sein und langfristig ausgew\u00e4hlt werden, denn jeder Programmierer, der zu einem sp\u00e4teren Zeitpunkt neu zum Projekt hinzukommt, muss sich immer erst in das System einarbeiten. Die Wartung einer Website ist also bei einem CMS ein weiterer Kostenpunkt, den man ber\u00fccksichtigen muss.<\/p>\n
Beim Gestalten einer Webseite muss darauf geachtet werden, dass das Design nicht nur auf dem Computerbildschirm, sondern auch auf diversen weiteren Displaygr\u00f6\u00dfen (zum Beispiel Smartphone, Tablet, Fernseher) gut aussieht. Um dies zu erm\u00f6glichen, muss man schon bei der Gestaltung ansetzen, indem man hier verschiedene Layouts erstellt, in denen unterschiedliche Breakpoints ber\u00fccksichtigt werden. Das sind im CSS hinterlegte Regeln, die definieren, wie die Seite auf unterschiedlichen Ger\u00e4ten angezeigt wird.
\nSo ist zum Beispiel beim Aufrufen einer Webseite mit dem iPad klar, dass die Webseitengr\u00f6\u00dfe passend zum Tabletformat angezeigt wird und nicht im Mobil- oder Desktopformat. Und diese verschiedenen Formate, mit angepasstem Inhalt, m\u00fcssen eben auch gestaltet werden.
\nAu\u00dferdem ist es sinnvoll bereits bei der Gestaltung Webfonts zu verwenden, die sp\u00e4ter im CSS einfach eingebunden werden k\u00f6nnen. Es gibt eine Menge weboptimierter Schriftarten, an denen man sich bedienen kann. Allerdings ist hier auch Vorsicht geboten, da wie bei Stockmaterial auch, die jeweilige Lizenz zu beachten ist. Diese kann von Schriftschnitt zu Schriftschnitt unterschiedlich sein.<\/p>\n
Wenn eine Website nur wenige oder sehr spezielle Funktionen hat, dann ist man mit einer individuell von Profis programmierten Softwarel\u00f6sung besser bedient. F\u00fcr welche Art von Website – ob statisch oder dynamisch – man sich letztendlich entscheidet, ist eine Frage der Komplexit\u00e4t. Man sollte aber unbedingt eine w\u00e4hlen, die den eigenen Anspr\u00fcchen am meisten nutzt. Um dies zu wissen, muss klar sein, wohin die Reise geht, wenn die neue Onlinepr\u00e4senz ins Auge gefasst wird.<\/p>\n","protected":false},"excerpt":{"rendered":"
W\u00e4hrend Webdesign und Programmierung zueinander geh\u00f6ren, wie der linke Schuh zum rechten, kommen diese beiden Bestandteile…<\/p>\n","protected":false},"author":24,"featured_media":8288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[18,41],"tags":[],"class_list":["post-8268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-know-how","category-tipps-tricks"],"yoast_head":"\n