Skip to content

Webdesign anno 2015

Webdesign ist ein Beruf - und eine Kunst. Und damit nichts, was man sich “mal eben” im Vorbeigehen für die professionelle Gestaltung der eigenen Webpräsenz aneignen kann.

Dennoch müssen Webseiten (gerade heute!) nicht mehr entweder “klassisch schlicht” oder … nun ja, bunt überladen und/oder unbeholfen aussehen wie in den Neunzigern. Die technischen Entwicklungen der letzten Jahre erlauben es vielmehr auch dem interessierten Laien, mit vertretbarem (Lern-) Aufwand durchaus ansehnliche Ergebnisse zu erzielen.

Für ein wirklich individuelles Konzept wird man freilich weiterhin sowohl über die notwendige Kreativität für einen entsprechenden Entwurf und dann auch die handwerklichen Kenntnisse verfügen müssen, um diesen Entwurf auch umzusetzen. Andererseits muss ich (zumindest für mich) gestehen, dass alle Webseiten, die ich in den letzten mehr als 15 Jahren gestaltet habe, ohnehin nicht “kreativ” in diesem Sinne waren. Vielmehr habe ich entweder vorhandene Templates als Basis genommen oder mich von anderen Seiten, die mir gut gefallen haben, “inspirieren” lassen - entweder nur optisch oder auch mit Anleihen aus den CSS-Definitionen. Wem das genügt - und die Auswahl an “Mustern” ist ja nun mittlerweile nahezu unendlich groß -, der hat gute Chancen, mit überschaubarem Zeiteinsatz seine bestehenden Seiten optisch und technisch ins 21. Jahrhundert zu befördern oder neue Seiten mit einem modernen “look & feel” zu schaffen, so lange er zumindest ein wenig mit den Grundzügen von HTML und CSS vertraut ist.

Ich möchte in der Folge - und in einer kleinen Serien von Beiträgen über die nächsten Wochen - einen Überblick über diese Möglichkeiten geben; wohlgemerkt einen Überblick aus der Sicht eines interessierten Laien, der selbst noch nicht alle Facetten dessen, was möglich ist, überblickt (und auch nicht immer trittsicher in den zugehörigen Begrifflichkeiten ist). Daher freue ich mich über ergänzende - oder berichtigende - Kommentare.

HTML 5 und CSS 3.0

Die neuen “Webstandards” HTML 5 und CSS 3.0 haben etliche alte Zöpfe abgeschnitten und dafür eine Vielzahl neuer Möglichkeiten hinzugefügt. HTML-Elemente zur optischen Seitengestaltung sind endgültig verschwunden (oder bekamen in manchen Fällen neue Bedeutungen), neben das nahezu omnipräsente <div>-Element sind weitere Elemente zur semantischen Strukturierung der Seite getreten, und dazu kommen u.a. noch Erweiterungen für Formulare und zur Einbindung von Multimedia-Elementen. Auch CSS 3.0 enthält eine Vielzahl neuer Funktionen, so zum Beispiel Media Queries, die eine Anpassung des Layouts je nach Bildschirmgröße ermöglichen, und Eigenschaften wie transition, transform oder animation, mit denen früher Javascript vorbehaltene Funktionalitäten in CSS realisiert werden können. Die Gestaltung übersichtlicher, standardkonformer Webseiten ist heute leichter als jemals zuvor.

Am wichtigsten dürften wohl die Stichworte “responsive design” oder “mobile first” sein - beide bezeichnen Prinzipien zur Gestaltung einer Seite, die sowohl auf großen Full-HD-Bildschirmen als auch auf kleinen Smartphone-Displays brauchbar aussehen. Ein verbreiteter Weg ist dabei die Gestaltung eines Designs zunächst für das kleinste unterstützte Gerät (“mobile first”), das sich mit zunehmender Größe des Browserfensters (Stichwort “Media Queries”) ausdehnt.

Ich weiß, das klingt alles toll - und sehr, sehr kompliziert. Was es aller Voraussicht nach auch ist, wenn man von Null anfängt und sich alles selbst zusammenbaut.

Frameworks für HTML, CSS und Javascript

Das schöne ist: das muss man gar nicht.

Es gibt nämlich fertige Frameworks, sozusagen Baukästen, die in der einfachsten Version das Grundgerüst einer HTML-Datei mit CSS und Javascript bieten, die für “responsive design” vorbereitet ist und mit eigenen Elementen ergänzt werden kann. Darüber hinaus gibt es dann auch “Luxusversionen” wie bspw. Bootstrap (vormals Twitter Bootstrap), ein Framework, das neben einem Grid, also einer Layout-Grundstruktur zur mehrspaltigen Gestaltung einer Webseite, eine große Menge vorbereiteter, aufeinander abgestimmter CSS-Definitionen, HTML-Bausteine und Javascript-Schnipsel mitbringt, mit denen man - durch schlichtes Kopieren und Anpassen der Beispiele - seine Website oder seine Web-Applikation erheblich aufpeppen kann.

Ergänzend gibt es eine Vielzahl fertiger Designs (“Templates”), von denen man sich für die optische Gestaltung der eigenen Seite inspirieren lassen kann, wenn sie nicht wie hundert andere Seiten aussehen soll, die mit demselben Framework gestaltet wurden - in etwa so, wie man auch sein Blog mit “Templates” oder “Themes” individualisieren kann. Alle CSS-Definitionen lassen sich dabei nach dem persönlichen Geschmack übersteuern, um der eigenen Website eine noch persönlichere Note zu verleihen. In jedem Fall sehen die selbst gestalteten Seiten dann in fast allen (einigermaßen modernen) Browsern ähnlich oder jedenfalls vertretbar aus und passen sich den verschiedenen Bildschirmgrößen vom Smartphone über das Tablet und den Laptop bis hin zum Großbildschirm an.

Webfonts und Iconfonts

Auch hinsichtlich der verwendeten Schriftart(en) sind die Zeiten der Auswahl zwischen “Serifen” und “serifenloser Schrift” vorbei. Vorbei auch das Problem, dass die angegebene Schriftart auf dem Rechner des Besuchers installiert sein muss (was innerhalb eines “Ökosystems” wie Windows recht gut funktioniert, plattformübergreifend hingegen nicht so gut), wenn nicht ein “Fallback” auf Standardschriften erfolgen soll.

Es gibt nämlich die Möglichkeit, einen Webfont einzubinden, den der Browser des Besuchers dann nachlädt. Diese Schriften - bzw. entsprechende Lizenzen - kann (und muss) man teilweise kaufen; es gibt aber auch kostenloses Angebote, wie zum Beispiel Google Fonts, wo über 670 Schriften in verschiedenen Schriftstärken und Varianten zur Auswahl stehen. Wer die Wahl hat, hat dort auch die Qual…

Die Navigation auf einer Seite lässt sich oft elegant unter Verwendung von Symbolen gestalten. Wer kennt sie nicht, die Icons der sozialen Netzwerke, von Facebook über Twitter bis zu Google+ und weiter? Wer kennt nicht die allgemein verbreiteten Symbole für Mailadressen, Up-/Downloads oder Einstellungen? Diese Symbole stehen auf einfache Weise in Form von Iconfonts zur Verfügung, Schriftarten, die keine Buchstaben, sondern Symbole enthalten. Teilweise sind solche Iconfonts Bestandteile von Frameworks (so sind bei Bootstrap die Halflings von GLYPHICONS inbegriffen), teilweise sind sie frei verfügbar, teilweise kosten sie Lizenzgebühren.

Daneben gibt es eine unübersehbare Vielzahl von Grafikbibliotheken, bei denen Symbole und Zeichnungen unter freier Lizenz oder auch solche zusammengestellt sind, an denen sich die Rechte für kleines Geld erwerben lassen. Auch bieten Bilderdienste eine Unzahl von Fotos an, an denen sich - zumindest für den nicht-kommerziellen Bereich - die Rechte für überschaubare Geldbeträge im einstelligen Eurobereich erwerben lassen, wenn der passende “Hingucker” noch fehlt.

LESS, SASS und Co.

Mit den vorstehend geschilderten Möglichkeiten lässt sich bereits eine Menge anfangen; doch damit nicht genug. So wie sich Webseiten - also HTML-Dateien - “dynamisch” aus Scriptsprachen heraus generieren lassen, so ist es auch möglich, CSS-Dateien dynamisch aus einem Quellcode heraus zu erzeugen, der besser verständlich ist und/oder den Einsatz von Variablen u.ä. ermöglicht. LESS und SASS sind Beispiele dafür.

So liefert das Framework Bootstrap zwar “fertige” CSS-Dateien mit, die man sich - wenn man will - auch durch einen Generator nach den eigenen Vorstellungen erzeugen lassen kann. Flexibler ist aber die Erstellung der CSS-Datei aus einzelnen LESS-Schnipseln heraus. Das ermöglicht es bspw., eine Farbe oder die Schriftgröße zentral an einer Stelle zu ändern und dann eine neue CSS-Datei zu erzeugen, in der sich alle Elemente der entsprechenden Farbe geändert haben oder die Schriftgrößen aller Elemente nunmehr proportional angepasst wurden.

Markdown, Textile, AsciiDoc …

Auch seine Texte muss man zwar noch selbst verfassen, aber nicht zwingend in HTML. Wie ich in diesem Blog schon mehrfach berichtete, ist Markdown eine gut verwendbare Alternative. Ähnlich, aber jeweils auf ihre Weise anders, sind bspw. Textile und AsciiDoc.

Templates und Template Engines

Besteht eine Website nur aus einer oder wenigen Seiten, kann man Struktur und Navigation durch “copy & paste” für jede neue Seite übernehmen … um dann freilich auch jede Änderung für jede einzelne Seite nachzuvollziehen. Das macht schon sehr bald keinen Spaß mehr - und auch keinen Sinn.

Die Lösung dafür ist der “Zusammenbau” der Webseiten aus einem oder mehreren Templates, bestehend aus dem Grunddesign der Seite und Navigationselementen sowie den darin eingefügten “eigentlichen” Inhalten. Die meisten Templatesysteme unterstützen dabei das zusätzliche Einbinden von ausführbarem Code, entweder eine spezielle “Template-Sprache” oder PHP, Perl, Ruby und ähnliches. Andere, wie bspw. HAML, gehen darüber hinaus und ersetzen auch HTML durch eine vereinfachte, besser lesbare Template-Sprache.

static site generators, CMS und Web Application Frameworks

Will man diese weiteren Schritte gehen und seine Website (bzw. deren HTML-Dateien) aus Templates zusammenbauen, das CSS kompilieren und die Inhalte aus Markdown-Dateien liefern, geht das nicht von selbst; man benötigt dafür entsprechende Software.

Das kann ein (mehr oder weniger) gewichtiges Content Management System (kurz CMS) sein, mit dem man Seiten online in einem Editor erstellen kann und dass sie dann beim Aufruf aus ihren Bestandteilen erzeugt (und ggf. cached). Für diese Zwecke kann man auch ein Blogsystem oder ein Wiki einsetzen, wobei manche Blogsysteme (man denke an Wordpress) bereits eine Zwitterstellung zwischen Blog und CMS einnehmen.

Gestaltet man keine Website, sondern mehr eine Anwendung, bietet sich ein Web Application Framework an, das seine Inhalte üblicherweise aus Templates, Code und Datenbanken zusammenbaut.

Ist man weder auf die Funktionalität eines CMS angewiesen, weil man seine Webseiten auch selbst in einem Editor erstellen kann oder will, noch auf interaktive Funktionen wie Kommentare, Bestellseiten oder ähnliches, kann man die Website auch mit einem static site generator (offline) erstellen und die daraus erzeugen Dateien dann hochladen. Über diese Möglichkeit habe ich bereits an anderer Stelle berichtet.

Versionsverwaltung, Automatisierung und weitere Möglichkeiten

Auch für die Gestaltung seiner Website kann man natürlich auf all die anderen Tools zurückgreifen, die uns heutzutage zur Verfügung stehen. Verwaltung des Sourcecodes in git, automatischer Neubau der Seite bei Änderungen im Repository oder neuen Daten in einem RSS-Feed, Erstellung neuer Webprojekte aus Vorlagen heraus, wie Mattias Mees es in seinem Beitrag “Vom Build-Tool zur Projektvorlage” umreißt - und vielerlei mehr.

Von einfach bis komplex ist fast alles möglich.

Vertiefende Lektüre

Zur Vertiefung der einzelnen, in diesem Übersichtsartikel nur angerissenen Themengebiete folgt eine Reihe ergänzender Beiträge zum Thema “Webdesign anno 2015” in Form einer kurzen Reihe, bestehend aus:

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]

Trackbacks

Netz - Rettung - Recht am : (Re-)Launch von is-easy.de

Vorschau anzeigen
Im Usenet war (und ist?) es üblich, bei Bedarf auf die eine oder andere im Web publizierte FAQ oder Anleitung zu verweisen, am liebsten mit einer knackigen kurzen URL, die aber zugleich sprechend ist. Die heute bekannte Flut der URL-Verkürzer gab es damal

Netz - Rettung - Recht am : HTML 5 und CSS 3.0

Vorschau anzeigen
Aktuelle Browser setzen zunehmend die neuen Möglichkeiten von HTML 5 und CSS 3.0 um, die ich in meinem Artikel “Webdesign anno 2015” bereits angerissen hatte. Doch was ist daran alles neu? HTML 5 Der aktuelle HTML-Standard macht endgültig Sc

Netz - Rettung - Recht am : Frameworks für HTML, CSS und Javascript

Vorschau anzeigen
Vergangene Woche hatte ich einen Überblick über die vielfältigen Möglichkeiten gegeben, die in HTML 5 und CSS 3.0 enthalten sind - ohne dabei Javascript überhaupt anzusprechen. Heute möchte ich zeigen, wie man sich diese neuen Möglichkeiten zunutze machen

Netz - Rettung - Recht am : Webfonts und Iconfonts

Vorschau anzeigen
Webseiten vermitteln in der Regel Informationen und bestehen daher auch - im Regelfall sogar: weit überwiegend - aus Text. Text, der möglichst angenehm zu lesen sein soll, und dabei am besten noch gut aussehen. Zu bedenken sind daher die Auswahl einer gee

Netz - Rettung - Recht am : LESS, SASS und Co.

Vorschau anzeigen
LESS? SASS? Hä? LESS und SASS (Syntactically Awesome Stylesheets) sind CSS-Präprozessoren; man könnte sie vielleicht auch als CSS-Compiler bezeichnen. Sie erzeugen aus einer CSS-ähnlichen, aber mächtigeren Sprache gültige CSS-Dateien, konzeptionell entfe

Netz - Rettung - Recht am : Templates und Template Engines

Vorschau anzeigen
HTML und CSS, Frameworks wie Bootstrap, Web- und Iconfonts, LESS oder SASS bieten viele Möglichkeiten zur Gestaltung standardkonformer, gut lesbarer und auf verschiedenen Endgeräten nett anzusehender Webseiten. Eine größere Webpräsenz komplett “von

Netz - Rettung - Recht am : Webseiten und Webapplikationen erstellen und pflegen

Vorschau anzeigen
Viele der in den vergangenen vier Wochen dargestellten Möglichkeiten rund um die Gestaltung von Webangeboten lassen sich ohne größeren technischen Aufwand umsetzen. Will man jedoch Templates einsetzen, andere (vereinfachte) Auszeichnungssprachen wie Markd

Netz - Rettung - Recht am : Markup-Formate konvertieren

Vorschau anzeigen
In meiner Reihe “Webdesign anno 2015” habe ich versucht, einen Überblick über Techniken und Tools zu geben, die letztlich jedermann die Gestaltung moderner, gut aussehender Webseiten ermöglichen. Das hatte natürlich einen konkreten Anlass: ich

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Matthias Mees am :

Matthias Mees

„Webdesign ist ein Beruf - und eine Kunst.“ Da möchte ich direkt widersprechen. :-)

Aus meiner Sicht ist es keine Kunst. Das Endergebnis mag z.T. auf Menschen, die mit HTML, CSS und JS wenig bis gar nicht vertraut sind, wie Kunst wirken („Magie“ habe ich auch schon gehört; oder „Voodoo“), aber tatsächlich ist es Handwerk, weil es viel mehr mit sehr spezialisiertem Fachwissen und vor allem Erfahrung zu tun hat als mit Begabung.

Vor allem: Jede/r kann mindestens HTML und CSS erlernen. (Über JS kann man diskutieren, weil es eben „echte“ Programmierung ist.)

Thomas Hochstein am :

Thomas Hochstein

QUOTE:
Aus meiner Sicht ist es keine Kunst. Das Endergebnis mag z.T. auf Menschen, die mit HTML, CSS und JS wenig bis gar nicht vertraut sind, wie Kunst wirken („Magie“ habe ich auch schon gehört; oder „Voodoo“), aber tatsächlich ist es Handwerk, weil es viel mehr mit sehr spezialisiertem Fachwissen und vor allem Erfahrung zu tun hat als mit Begabung.

Ist bei "Design" nicht immer oder doch zumindest ab und an auch ein kreativer Aspekt dabei? Ein Design umzusetzen - das würde ich auch eher als Handwerk bezeichnen, ganz gleich, ob auf Papier oder im Web. Aber das muss ja nicht alles sein.

Matthias Mees am :

Matthias Mees

Natürlich ist es kreativ. Ich würde aber kreativ nicht unbedingt mit Kunst gleichsetzen. :-)

Thomas Hochstein am :

Thomas Hochstein

QUOTE:
Ich würde aber kreativ nicht unbedingt mit Kunst gleichsetzen.

Okay. Dann halt Kunsthandwerk. :-) Oder Handwerkskunst …

Kommentar schreiben

HTML-Tags werden in ihre Entities umgewandelt.
Markdown-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Favatar, Pavatar, Twitter, Identica, Identicon/Ycon Autoren-Bilder werden unterstützt.
Formular-Optionen
tweetbackcheck