Glossar

Responsive Design

Responsive Design

Eine "responsive" gestaltete Webseite (engl. für "reagierende" Webseite) passt sich in ihrer Darstellung dem Ausgabegerät an. So werden Smartphones oder Tablets nicht auf eigene, für mobile Geräte programmierte, Seiten umgeleitet. Die Seite ist so erstellt, dass sich das Layout an den jeweiligen Bildschirm, bzw. an die Größe des Browserfensters, anpasst. Das Layout kann sich aber auch verändern. Dies geschieht an sog. "Breakpoints", Stellen an denen bestimmte Seitenbreiten oder -höhen über-, bzw. unterschritten werden.

Auch bei einer responsive aufgebauten Webseite kann man denselben Content, je nach Ausgabegerät oder Bildschirmgröße, unterschiedlich darstellen, oder Inhalte weglassen und hinzufügen.

Der bis vor einiger Zeit hauptsächlich verfolgte Ansatz, mobile Geräte auf eigens dafür gestaltete Seiten umzuleiten, bedeutet einen erheblichen Mehraufwand. Dies ist bei kleineren Webauftritten, unter dem Gesichtspunkt der Wirtschaftlichkeit, oft nicht umsetzbar. Auch gibt es technische Gesichtspunkte, die dieses Verfahren immer aufwändiger werden lassen. Nur für sehr große und sehr komplexe Webauftritte ist die gerätespezifische Seitengestaltung noch immer das Mittel der Wahl. Diese Vorgehensweise wird auch als "Adaptive Design" oder "Adaptive Layout" bezeichnet, je nachdem welche Definition man hierfür heranzieht.

Responsive Design bedeutet allerdings in vielen Fällen auch, dass man sowohl bei der Programmierung als auch in gestalterischer Hinsicht Kompromisse machen muss. Nicht zuletzt deshalb erfordert es oft eine sehr enge Zusammenarbeit zwischen Webdesigner und Entwickler.

Wenn sie responsive Design in Aktion sehen möchten, so ändern Sie einfach langsam die Breite dieses Browserfensters... 

Content Management Systeme

Content Management Systeme

Content Management Systeme (CMS) oder auch Content Management Frameworks (CMF) sind serverseitige Programme die es ermöglichen Funktionen und Inhalte der Webseite zu trennen. Durch die Installation zusätzlicher Module lassen sich Funktionen ergänzen. Durch die Vergabe von Berechtigungen können auch wenig erfahrene Nutzer die Inhalte der Seite ändern, ohne Webseite als solche "demolieren" zu können.

Man kann Webseiten auch ohne CMS aufbauen. Allerdings bieten solche Systeme so viele Vorteile, dass es durchaus sinnvoll ist auch kleine Webseiten hiermit zu realisieren. Dies sind  insbesondere einfach zu installierende Module, welche Funktionen bereitstellen die sonst nur sehr aufwändig umsetzbar wären.

Wichtig bei der Auswahl eines CMS sind nicht nur allein seine Funktionen. So spielt die Flexibilität des Systems, d.h. mit möglichst einfachen Mitteln das gewünschte Ergebnis zu erzielen, eine erhebliche wirtschaftliche Rolle. Niemand bezahlt einen Webentwickler gerne dafür, dass er ein CMS "umbaut" damit es das kann was es soll. Nicht zuletzt deshalb gewinnen sog. "Content Management Frameworks" (CMF) immer mehr an Bedeutung. Mit dem CMF baut man sich ein CMS, so wie man es braucht. Oder man erweitert es, wenn die Anforderungen sich ändern. Solche CMF sind z.B. MODX, Drupal oder TYPO3.

Ein weiteres Kriterium, aus Kundensicht, ist die Verfügbarkeit von einschlägig bewanderten Entwicklern für das entsprechende CMS/CMF. Es kann immer sein, dass der Entwickler vom Baum fällt oder bei größeren Projekten schlicht Verstärkung braucht.

Suchmaschinenoptimierung

Suchmaschinenoptimierung

Suchmaschinenoptimierung oder "Search Engine Optimisation" (SEO) ist ein abendfüllendes Thema. Hierzu wird soviel Unfug verbreitet, dass Google hierzu einen eigenen Ratgeber verfasst hat. Ignorieren sollte man das Thema jedoch auch nicht. Jede Webseite will gefunden werden (es mag Ausnahmen geben). Daher sollten ein Paar Features zur Grundausstattung jeder Webseite gehören: Eine robots.txt (sagt der Suchmaschine was sie wo findet), eine sitemap.xml ("Lageplan" der Webseite, sagt der Suchmaschine was sie indizieren soll, wird von einem CMS-Modul automatisch erstellt), ein "canonical-name" Tag im Quellcode (sagt der Suchmaschine welche die "eigentliche" URL der Seite ist). Dazu ein "description-tag" im Quellcode, wenn man der Suchmaschine die Auswahl der Seitenbeschreibung in den Suchergebnissen nicht selber überlassen möchte. Das reicht fürs erste (ohne hier weiter auf programmiertechnische Aspekte einzugehen die zum "Handwerk" gehören) und sollte nicht extra berechnet werden.

Man sollte die Seite dann noch in einen "Webmasteraccount" der großen Suchmaschinen aufnehmen und wenn man so etwas wie einen Geschäftsraum hat, leistet z.B. "Google Places" gute Dienste. Ein Paar Links zu anderen Seiten und von anderen Seiten auf die eigene schaden auch nicht. Das Wesentliche ist interessanter Inhalt!

Ist diese Grundausstattung vorhanden beginnt die eigentliche Suchmaschinenoptimierung.

HTML5

HTML5

Kaum sind 10 Jahre vorüber gibt es wieder eine neue HTML-Version. Viele schöne neue Features wie z.B. das einbetten von Videos. 

Allerdings gibt es auch umstrittene Neuerungen. Die "Semantik" wäre da so was. Darunter versteht man in diesem Fall strukturierende Elemente von HTML5. Anstatt die Webseite durch "div"-Elemente zu gliedern, werden Elemente wie "header", "article", "nav" etc. eingesetzt. Das soll u.a. Suchmaschinen irgendwie helfen, den Inhalt besser zu erfassen. Irgendwie. Denn was das genau bewirken soll ist durchaus umstritten wie im SMASHING MAGAZINE oder in .net magazine zu lesen ist. Auch wie man es hätte besser machen können wurde schon vor einiger Zeit diskutiert. Diese strukturierenden Elemente sollen Webseiten maschinenlesbarer machen. Ich bezweifle stark, dass dies gelingen wird. Mich erinnert dies ein wenig an das bisherige Wirrwar um die Doctypes. Für HTML5 gibt es nur noch einen Doctype...
Inzwischen wird auch die Komplexität von HTML(5) kritisiert.

Code

Code

Guter Code ist schlank, gut strukturiert und sauber dokumentiert, und im Fall von HTML/CSS usw. auch noch richtig verwendet. Darüber hinaus ist er auch noch fehlerfrei. Soweit die guten Vorsätze. 

Was die Fehlerfreiheit angeht, so kann dies jeder mit einem HTML-, bzw. CSS-Validator überprüfen. Das Ergebnis offenbart dem Laien allerdings nicht ob hier ein Genie oder Stümper am Werk war. Das Problem: Das Code der Spezifikation entspricht, heißt noch nicht dass alle Browser diesen auch richtig interpretieren. Letztere machen hierbei nämlich Fehler (der Internet Explorer ist hier ein unrühmliches Beispiel). Teilweise ist man gezwungen diese Fehler mit, im Sinne der Spezifikation, fehlerhaftem Code "auszubügeln".
Zudem werden neue Features zumeist erst einmal als Browser-spezifische Erweiterung ("Pseudo-Elemente" und "Pseudo-Klassen") implementiert. Auch wenn diese dann "offiziell" sind empfielt es sich, die Browser-spezifischen Erweiterungen zusätzlich anzugeben um ältere Browser weiterhin zu unterstützen, auch wenn diese beim validieren als Fehler erkannt werden.
Darüber hinaus sind gerade beim Responsive Design, genauso wie beim Adaptive Design, manchmal Kniffe erforderlich, die nicht gerade zu "schönem Code" führen.

Responsive - Flexible Breite

Responsive Websiten mit flexibler Breite, teilweise auch Höhe (so wie diese Seite), haben mehrere vorgegebene Layouts für bestimmte Monitorbreiten, selten auch für die Monitorhöhe. Da sich jedoch die Breite der Webseite flexibel an die Breite des Browserfensters anpasst, sind hier weniger verschiedene Layouts erforderlich als bei anderen Verfahren. Im Gegensatz zu Webseiten mit nur flexibler Breite, ändern Grafiken und Bilder bei Seiten mit zusätzlich flexibler Höhe ebenfalls ihre Größe. Dadurch bleibt das Layout bei verschieden großen Browserfenstern in seinen Proportionen (im wesentlichen) erhalten.

Responsive - Fixierte Breite

Responsive Webseiten mit fixierter Breite haben mehrere vorgegebene Layouts, jeweils für bestimmte Monitorbreiten (selten auch für die Monitorhöhe). I.d.R. sind dies Spaltenlayouts mit gleichen Spaltenbreiten für alle Varianten. Normalerweise sind dies 4 Layouts für kleine Smartphones, große Smartphones (sog. Phablets), Tablets und kleine Monitore, sowie große Monitore. Diese fixierten Spaltenbreiten werden eingesetzt wenn Inhalte nicht skalieren sollen. Dieser Ansatz wird auch als "Adaptive Design" oder "Adaptive Layout" bezeichnet, je nachdem welche Definition man hierfür heranzieht.

Statische Seitengröße

Webseiten mit statischer Seitengröße sind für eine Mindestbildschirmbreite, bzw. Breite des Browserfensters ("Viewport"),  gestaltet. I.d.R werden solche Layouts für max. 960 Pixel ausgelegt. Größere Tablets können diese noch im Querformat darstellen, ohne zu zoomen. Im Hochformat und bei kleineren Geräten muss der Besucher der Webseite scrollen.

Bilder und Grafiken

Keine Webseite ohne Bilder und Grafiken. Die besondere Schwierigkeit hierbei: Unterschiedliche Monitorgrößen und Monitorauflösungen. Bei letzterem bereiten insbesondere moderne Retina-Displays Probleme. Je nach Größe und Auflösung der Monitore müssen, abhängig von der Größe der Bilder oder Grafiken, z.T. mehrere Versionen bereitgestellt werden. Dies besonders für Smartphones, die von großen Datenmengen verschont werden sollten. Bilder und Grafiken können selbstverständlich auch flexibel an die jeweilige Seitenbreite angepasst werden. Dies kann allerdings je nach Browser und Betriebssystem zu einem erheblichen Qualitätsverlust führen. Dies gilt insbesondere für PNG-Dateien (gerne für Grafiken eingesetzt).

Mediaplayer

Bei Mediaplayern, insbesondere Videoplayern, stellen die unterschiedlichen Fähigkeiten der Webbrowser und Betriebssysteme, speziell bei mobilen Geräten, die größte Herausforderung dar. Das eine Betriebssystem unterstützt Flash nicht, der andere Browser kein mp4 oder WebM etc. Es gibt jedoch inzwischen Player die, je nach Plattform, den richtigen Codec laden, sich flexibel an die Seitenbreite anpassen und in ihrer Optik anpassbar sind.

Blogs und News

Blogs und News sind programmiertechnisch dasselbe. Für so gut wie jedes Content Management System gibt es entsprechende Module, wenn auch nicht immer mit dem gewünschten Funktionsumfang. Will man die Kommentarfunktion nutzen, so sollte man sich darüber bewusst sein, dass die Kommentare ständig zeitnah überprüft werden müssen, um ggf. rechteverletzende Inhalte zu löschen.

Formulare

Das gute alte Kontaktformular gibt es zwar noch, wird aber immer weniger eingesetzt. Es sei denn, man möchte bei der Kontaktaufnahme bestimmte Informationen vom Besucher.

Ein Formular ist relativ aufwändig. Es muss an das Layout der Seite angepaßt werden, sollte gegen Spambots gesichert sein und die Datenübertragung zudem verschlüsselt erfolgen. Letzteres erfordert ein SSL-Zertifikat, was mit zusätzlichen laufenden Kosten verbunden ist.

Kalender

Für nahezu alle Content Management Systeme gibt es Kalendermodule. Jedoch nicht alle  lassen sich ohne weiteres in ein flexibles Layout einbauen. Hier müssen oft Kompromisse beim Layout des Kalenders gemacht werden.

Mehrsprachigkeit

Die Komplexität mehrsprachiger Webseiten ist unterschiedlich, je nachdem wie verschieden der Inhalt der Sprachvarianten ist. Im "schlimmsten Fall" kommen so gut wie eigenständige Webseiten je Sprache dabei heraus. Dies kann in manchen Fällen jedoch auch die sinnvollste Lösung sein. Ein ganz wesentlicher Faktor ist hier die Zielgruppe. Soll es ein Service für Besucher sein die der Landessprache nicht mächtig sind, oder wendet sich eine Sprachvariante an einen bestimmten Markt? Bei letzterem wird z.B. das Thema Suchmaschinenoptimierung zu einem bestimmenden Faktor für die Seitenstruktur.

Multidomain

Multidomain steht nicht für Seiten die unter mehreren Domains erreichbar sind. Das einzurichten ist trivial. Multidomain steht für eine Webseite, bzw. ein Content Management System, das mehrere Domains "beheimatet" und diese auch als einzelne Webseiten darstellt, auch gegenüber Suchmaschinen. Viele mehrsprachige Webseiten sind so aufgebaut, insbesondere wenn länderspezifische Toplevel-Domains zum Einsatz kommen (.de, .com. usw.). Auch für Landing Pages kann dieses Feature eingesetzt werden.

Editierbarkeit durch den Kunden

Will der Inhaber einer Webseite selber Inhalte ändern oder ergänzen können, müssen im Content Management System entsprechende Benutzer und Rechte vergeben werden. Ohne Content Management System (CMS) ist so etwas zwar auch möglich, bietet dann jedoch nur sehr eingeschränkte Möglichkeiten. Grundsätzlich müssen hierbei die Zugriffsmöglichkeiten auf Inhalt und Struktur der Webseite voneinander getrennt werden. Je nach CMS mehr oder weniger aufwändig.

Die Bearbeitung der Inhalte erfolgt dann mittels eines sog. WYSIWYG-Editors ("What You See Is What You Get“), eine Art Textverarbeitungsprogramm. In manchen Fällen kann es jedoch sinnvoll sein, Inhalte direkt als HTML-Code einzugeben.

Um auch Laien das ändern oder ergänzen des Inhaltes so einfach wie möglich zu machen, werden Seiten im CMS auch als Formular dargestellt. Hier finden sich dann Felder für Überschriften, Bildunterschriften, Textabschnitte oder zum Einfügen von Bildern. Die Formatierung übernimmt das CMS. Je nach Bedarf können hier auch Kontrollkästchen angelegt werden, mit denen der Bearbeitende z.B. Abstände, Schrift- oder Hintergrundfarben selber festlegen kann.