In dem dritten und letzten Teil unserer Serie „eine erfolgreiche Website“ geht es um die „Programmierfreundlichkeit“.
Mit der Zeit wurde die Gestaltung von Internetauftritten immer komplexer. Die Ansprüche der Klienten stiegen und damit auch der Arbeitsaufwand von Designentwicklung bis hin zur Umsetzung. So soll eine Internetseite immer mehr Funktionen erhalten, Widgets bereitstellen, geräteunabhängig funktionieren und ein trendgerechtes, aber authentisches Design vertreten.
Doch wie lassen sich diese Aspekte umsetzen, ohne dass der Preis den Rahmen sprengt?
In diesem Artikel soll es um eine möglichst effiziente und effektive Arbeitsweise gehen, die ein paar grundlegende Punkte berücksichtigt.
Bevor wir uns den Arbeitsabläufen („Workflows“) widmen, schauen wir uns einen Faktor an, der sich zwar nicht beeinflussen lässt, uns momentan aber in die Karten spielt. Die Rede ist von bestimmten Designtrends. Aktuell liegt dieser Trend beim „Flat-Design“, das erstmals bei Microsoft Windows 8 angewandt wurde und mittlerweile viele Anhänger gefunden hat.
Das Flat-Design verkörpert aber nicht nur den digitalen Look des Mediums Internet, sondern sorgt mit seinen vielen Farbflächen und der Reduzierung auf das Wesentliche auch dafür, dass wir unsere Internetseite einfacher als bei anderen Trends an unterschiedliche Bildschirmgrößen anpassen können. Denn Umsetzungsschwierigkeiten durch die browserabhängige Darstellung gibt es nur in Ausnahmefällen.
Im Internet stehen viele Muster bereit, die flexible Breiten für Inhaltsbereiche zur Verfügung stellen und mit denen es zumindest etwas leichter ist, das sogenannte „Responsive Design“ umzusetzen. Lediglich die Umbrüche der verschiedenen Elemente bei Veränderung der Bildschirmgröße müssen angepasst werden. Wichtig: Die Umbrüche sollten nicht nach den unterschiedlichen Bildschirmgrößen angepasst werden, sondern nach den natürlichen Brüchen des Designs. So ergibt sich selbst beim Verändern der Größe des Browserfensters ein natürlicher Fluss und das Design wirkt, trotz unterschiedlicher Darstellung, harmonisch und einheitlich. Unter http://ow.ly/nSndN finden Sie ein Beispiel der sogenannten Fluid-Grids, mit denen sich die oben erwähnten, laufenden Übergänge schaffen lassen.
Der Punkt, der sich an solche Fluid-Grids anschließt, ist die Entwicklung von Workflows. Sie sind enorm wichtig, um Zeit zu sparen und die Kosten zu minimieren. Dabei helfen nicht nur Addons für HTML-/CSS-Editoren wie Emmet (früher Zen Coding), das aus Kurzschreibweisen und Funktionen Elemente in HTML- bzw. CSS-Code generieren kann, sondern auch die bewusste Planung von Arbeitsabläufen.
Wichtigster Aspekt: Schon während der Entwicklung des Layouts sollte man die Umsetzung im Hinterkopf behalten. Denn wer zwar ein geniales Design abliefert, dann aber an der Umsetzung scheitert, sorgt für einen Anstieg des Arbeitsaufwandes und in Folge dessen auch für einen vermeidbaren Preisanstieg.
Ein paar weitere Punkte möchte ich Ihnen gerne an einem konkreten Beispiel verdeutlichen. Der Auftrag ist eine Neugestaltung einer bereits bestehenden Website, die an die aktuellen Trends angepasst werden muss und geräteunabhängig funktioniert.
Bevor wir mit dem Gestalten anfangen, sollten wir uns folgende Fragen stellen: Wie viele Spalten soll die Seite besitzen und in welchem Verhältnis stehen diese Spalten zueinander (50% – 50% // 33% – 66%)? Wenn wir in diesem Schritt darauf achten, dass das Layout gut umsetzbar ist, ersparen wir uns eine Menge an Anpassungsarbeit für Spalten und Umbrüche, die sonst eine Ausnahmeregelung erfordern würden. Aber nicht nur Umbrüche oder Verhältnisse sollten wir uns vorher gut überlegen, auch Abstände sollten durchdacht gesetzt werden, damit die Elemente auf allen Geräten leicht voneinander differenzierbar sind. Ist das Layout fertig, können wir uns an die Umsetzung machen.
Nachdem wir uns ja bereits vor dem Erstellen des Layouts Gedanken zu den Verhältnissen und Umbrüchen gemacht haben, sollte Ihnen ein bestimmtes Fluid-Grid vorschweben, das Sie im Folgenden erstellen, einbinden und anpassen müssen.
Werden bestimmte Widgets benötigt, wie zum Beispiel eine Slideshow, sollte zuerst im Internet geprüft werden, ob es bereits ein vorprogrammiertes Muster gibt und ob dieses mit Anpassungsarbeiten benutzt werden kann, bevor alternativ ein eigenes Widget programmiert wird. Sollten Icons benutzt werden, empfiehlt es sich auf Icon-Fonts zurückzugreifen, da die Farbe der Icons ganz einfach über die CSS-Datei angepasst werden kann und nicht mit einem Bildbearbeitungsprogramm geändert werden muss.
Wenn Sie das Addon Emmet für ihren Editor installiert haben, können Sie mithilfe verschiedener Kurzschreibweisen auch umfangreichere Elemente schneller erstellen und gestalten.
Als letzten und wahrscheinlich langwierigsten Punkt widmen wir uns der Browser-Kompatibilität, also der Anpassung an alle gängigen Browser. So verhindern wir, dass es vereinzelt zu Darstellungsfehlern kommt. Ein Tool, das alle aktuellen Browser unterstützt, finden sie auf browserstack.com. Entweder laden Sie die von Ihnen erstellte Internetseite auf den Server des Tools hoch oder Sie geben einen Link an, der zu ihrer Internetseite führt. Danach klicken Sie sich durch die verschiedenen Browser und wählen das jeweilige Betriebssystem, auf dem Sie die Internetseite testen wollen.
Gerade der Internet Explorer ist immer mal wieder für die ein oder andere negative Überraschung in der Darstellung gut. Sollten sich aber selbst dort keine Fehler mehr finden lassen, können Sie damit beginnen, die Internetseite auf ihren Server hochzuladen und für die weitere Pflege in ein Content-Management-System einzubinden. Dies erleichtert Ihnen nicht nur bei der Erstellung von mehreren Unterseiten das Leben, sondern ist auch der eigenständige Zugang sein, um Inhalte in die Website einzupflegen.
Wie Sie sehen, gibt es viele kleine Tools und Hilfsmittel, die das Erstellen einer Website erleichtern können und mit den richtigen Arbeitsabläufen können Sie die Zeit bis hin zur Fertigstellung der Website minimieren.
Am Ende unserer dreiteiligen Serie heißt es nun Résumé ziehen. Eine erfolgreiche Website von Authentizität über Usability bis hin zur Programmierfreundlichkeit erstreckt sich über viele kleine Aspekte, die schon vor der eigentlichen Umsetzung eine Menge an konzeptioneller Arbeit erfordern. Beachtet man jedoch die grundlegenden Punkte, kann man nicht nur möglichst effizient an der Gestaltung und Programmierung arbeiten, sondern auch eine Website schaffen, die mit ihrem Design und ihrer Benutzerfreundlichkeit glänzen kann.