Einige Tools und einfache Hilfsmittel für Webseiten-Designer im Überblick
Beim Webdesign geht es um Funktionalitäten, um Technik und Programmierung und dennoch ist Web-Design aber im eigentlichen Sinne eine gestalterische Aufgabe. Der Designer ist entweder gleichzeitig Programmierer oder er stimmt sich im Teamwork mit ihm ab – ein Spannungsfeld.
Kooperation zwischen Gestaltung und Programmierung
Aber so, wie beim Automobilbau der Ingenieur dem Objekt-Designer nahe bringt, warum sein Entwurf im Windkanal keine optimalen Werte bringt, so müssen Designer und Programmierer beim Webdesign eng zusammenarbeiten. So wie der Automobildesigner genau wissen muss, welche Funktionen unter der Haube schlummern sollen, so muss der auch nicht-programmierende Web-Designer genau wissen, was programmiertechnisch möglich ist.
Unter der Haube: HTML5 und CSS3 für Nicht-Programmierer
Dafür sind Kenntnisse über die Möglichkeiten von HTML5 und vor allem von CSS3 wichtig.
Zunächst: Was sind HTML und CSS? HTML ist eine Programmiersprache, die dafür zuständig ist, wie die Webseite aussieht. Das „HT“ steht für „Hyper Text“ und das „ML“ für „Markup Language“. Diese Auszeichnungssprache beruht auf Standards bzw. bedient sich dieser. Ein HTML-Dokument strukturiert bestimmte Inhalte. CSS (Cascading Style Sheets) ist eine korrespondierende Sprache, die auf HTML aufsetzt und diesen strukturierten Inhalten ein Gesicht gibt.
CSS gibt HTML ein Gesicht
HTML ist der Körper, CSS die Haut, die ihn umgibt, wenn man einen bildhaften Vergleich heranziehen will. Allerdings ist CSS weit mehr als ein simpler Überzug, weil die Haut quasi wechselbar und leicht austauschbar ist und bestimmte komfortable Möglichkeiten bietet, Gruppen von Elementen auf einmal eine Gestaltung zuzuweisen und diese Gestaltung dann für alle diese Elemente auch wieder zu verändern – z.B. in Bezug auf Schriftparameter, Farben oder auch grafische Spezifikationen wie Eckrundungen, Strichstärken oder Verläufe. CSS bietet also eine Art strukturierter und zeitsparender Flexibiliät beim Gestalten und beim gestalterischen Verändern. Dabei wird das HTML-Dokument – also die Grundstruktur der Seite oder des Elementes – nicht angetastet.
Grafik und „Responsive Design“ mit HTML5 und CSS3 – nicht nur für Programmierer
Die aktuellen Versionen HTML5 und CSS3 bieten inzwischen ausgefeilte grafische, visuelle und animierte Möglichkeiten. Im folgenden ein paar Beispiele und Tools für Grafik-Designer (und Programmierer), die konkrete Anwendungen zeigen. Grundsätzlich basiert auch das responsive Design von Webseiten, dass sich flexibel unterschiedlichen Bildschirmgrößen anpasst, auf HTML5 und CSS3.
Übersicht über Bildschirmgrößen für flexibles und anpassungsfähiges Web-Design
Das war auch schon das erste Stichwort für ein sehr hilfreiches Tool: eine Webseite, die in drei getrennten Listen die Bildschirm-Größen von Smartphones, Tablets und PC-Monitoren aufführt. Dabei werden getrennt Bildschirmdiagonale (in Zoll), Bildschirmhöhe und Bildschirmbreite (in Pixeln) angegeben, außerdem die Bildschirmauflösung in DPI und der jeweilige Verbreitungsgrad. Man kann mit dem „Responsive Design“ nicht auf jede einzelne Bildschirmgröße eingehen, kann aber so die wesentlichen für sich ermitteln, damit die Webseite auch auf kleinen Bildschirmen gut aussieht.
Neue Navigation: Interessante neue und zahlreiche Möglichkeiten der Gestaltung von Navigation und Navigationselementen gibt es bei tympanus.net . Gerade Navigationen profitieren in Sachen Interaktivität und Look&Feel von den neuen Technologien.
Eine schicke Akkordeon-Navigation, die sich fächerartig von oben nach unten in Zwischenschritten öffnet, gibt es hier zu sehen.
Dropdown-Menüs können jetzt auch runde Ecken haben. Noch vor Kurzem waren runden Ecken keine Selbstverständlichkeit. Jetzt ist das ganz einfach. Im Bild ist zu sehen, dass auch bei Browsern, die CSS3 nicht unterstützen, die Navigation noch gut wirkt.
Testfeld & Spielwiese: Der „CSS3-Generator“ zeigt, was die Programmierung kann
Wer es grundsätzlicher angehen möchte, schaut sich eine Seite wie den CSS3-Generator an. Dort können Gestaltungselemente mit Umrissen, runden Ecken, Schatten oder Transparenzen versehen und per Schieberegler verändert werden. Eine ganz simple Möglichkeit, um Essenzielles für Design und Programmierung zu sehen und zu verstehen und sich dabei auch noch Codebeispiele generieren zu lassen.
„Menu-Maker“ als umfassender Menü-Generator für Webseiten
Und noch ein grafischer Generator: Der „Menu-Maker“ erlaubt es Menüs unterschiedlichster Art aufzurufen, bezüglich Farben und Abmessungen zu modifizieren und sich die Dateien downzuloaden. Außerdem werden für jedes Menü getrennt der HTML-Code und der CSS-Code ausgegeben. Hier kann man als Gestalter auf Erkundungstour gehen und sich komplette Menüs aus oft reinem CSS bauen. Einige der Angebote sind kostenlos, andere erfordern eine kostenpflichtige Premium-Mitgliedschaft.
Die HTML5-Welt auch für ältere Browser
Vordergründig Ähnliches scheint „CSS3 Pie“ anzubieten, sieht man doch auf der Startseite ein grafisches Element, dessen Farbe, Verlauf und sonstigen Spezifikationen man über Eingabe nummerischer Werte ansehen und verändern kann. Tatsächlich ist „CSS3 Pie“ aber eine Erweiterung für Microsofts Internet Explorer, der in den älteren Versionen 6-9 HTML5 nicht unterstützt. In einem gewissen Umfang bringt „CSS3 Pie“ diese Versionen nun dazu, HTML5 zu verstehen und darzustellen. Der Download ist kostenlos. Hinter der Geschichte dieses Tools verbirgt sich der jahrelange Kampf um HTML5 als neuem Standard und die sehr unterschiedliche und mangelnde Unterstützungspolitik vor allem von Seiten Microsofts.
Fazit für Designer, die nicht programmieren:
Das Web ist voll von Applikationen, Tools und Tutorials, die es auch dem nicht programmierenden Designer erlauben, die Möglichkeiten von HTML5 und CSS3 zu verstehen. Faszinierend genug ist dieses Lernfeld.
