Ob Themes und Templates, Javascript oder Regexe, Responsive Design oder Typografie – der gewiefte Webdesigner erleichtert sich die Arbeit mit den zahlreichen frei im Netz verfügbaren Werkzeugen.
Als angehender Webentwickler müssen Sie nicht lange suchen, um praktische Werkzeuge zu finden, die Sie beim Design und der Umsetzung Ihrer Webpräsenz unterstützen: Der Natur der Sache gemäß finden Sie im Netz zahlreiche Webseiten, die nützliche Tools für das Gestalten und Testen von Webseiten bereithalten. Im Folgenden stellen wir Ihnen sechs besonders hilfreiche Vertreter dieser Gattung vor.
Angerichtet
Wer auf ein populäres CMS wie WordPress, Drupal oder etwa Serendipity setzt, der muss nicht lange nach ansprechenden Templates zur Gestaltung seiner Webseite suchen: Auf den jeweiligen Projektseiten sammeln die Entwickler die von der Community erstellten freien Templates. Im Themes Directory von WordPress unter http://wordpress.org/themes stehen beispielsweise über 2500 Wordpress-Templates zur Wahl.
Auch ohne tiefer gehende Kenntnisse zur Webentwicklung gelingt so schnell der Aufbau einer attraktiven Webseite, wenn auch Probleme oft durch Versuch und Irrtum gelöst werden müssen. Oft besteht die größte Hürde beim korrekten Referenzieren der entsprechenden Elemente im Stylesheet des Themes. Muss ich in die style.css jetzt bsp {...} schreiben, .bsp {...}, #bsp {...} oder .bsp p {...}? Und was bezieht sich eigentlich auf was?
Sollten Sie sich nur ungern auf Selfhtml.org in die Thematik der CSS-Selektoren einlesen wollen, dann finden Sie im CSS Diner unter http://flukeout.github.io eine praktische Lernhilfe zu Cascading Style Sheets. In 26 Leveln gilt es, den richtigen Selektor zu finden. Links im CSS-Editor tragen Sie Ihre Lösung ein, rechts in der HTML-Ansicht erscheint der HTML-Code der Dinge, die auf dem Tisch liegen und referenziert werden möchten (Abbildung 1).
CSS Diner hilft Ihnen beim Erlernen des Umgangs mit CSS-Selektoren.” width=”300″ height=”192″ />
Abbildung 1: Als Web-Einsteiger müssen Sie zuerst die Grundlagen verstehen. DasCSS Diner hilft Ihnen beim Erlernen des Umgangs mit CSS-Selektoren.Javascript-Ablage
Die heutige Webentwicklung kombiniert HTML, CSS und Javascript. Der HTML-Code beschreibt dabei lediglich die Inhalte, die Cascading Style Sheets bestimmen das Aussehen der Webseite und mit Javascript lassen sich dynamische Elemente einbinden. Das Zusammenspiel dieser drei Komponenten fällt angehenden Webmastern schwer, auch wenn es nur ein bestehendes Template anzupassen gilt. Zum Einstieg in die Webentwicklung gilt es daher, die verschiedenen Techniken gemeinsam zu testen. Mit JS Bin (http://jsbin.com) gelingt dies sehr gut.
Die Oberfläche von JS Bin (Abbildung 2) setzt sich aus den Panelen HTML, CSS, Javascript, Console und Result zusammen, die Sie über die Kopfleiste ein- und ausblenden. Mit Ausnahme von Result und Console handelt es sich dabei um Eingabefelder. Result dagegen fungiert, wie der Name schon vermuten lässt, als Ausgabefeld, das Ihre Eingaben sofort umsetzt. Dieses Bedienlayout haben viele vergleichbare Dienste adaptiert, auch wenn sich die Ausrichtung oder Anzahl der Panels von Dienst zu Dienst unterscheidet.
Abbildung 2: Wer Webseiten entwickelt, der kann dies inzwischen auch direkt im Browser tun – mit einer webbasierten Entwicklungsumgebung wie JS Bin.
Die Menüleiste am oberen Fensterrand bietet darüber hinaus erweiterte Einstellungsmöglichkeiten. Dort speichern Sie Ihr aktuelles Bin oder setzen einen Milestone zum Archivieren. Über den Punkt Share geben Sie das aktuelle Bin frei oder lassen sich den einzubettenden Code zum Einbinden in eine andere Webseite anzeigen – so arbeiten Sie gemeinsam an einem Teil Ihrer Webseite. Hier besteht auch die Option, bekannte Frameworks wie jQuery, Mootools, YUI und viele mehr zu integrieren.
Ausdrücklich
Die Wikipedia beschreibt einen regulären Ausdruck als “eine Zeichenkette der theoretischen Informatik, die der Beschreibung von Mengen von Zeichenketten mit Hilfe bestimmter syntaktischer Regeln dient”. Auch wenn sich der Satz stark nach Informatikstudium anhört: Spätestens, wenn Sie in der Shell eine Auswahl an Dateien mit *.jpg ansprechen, nutzen Sie einen einfachen regulären Ausdruck oder kurz gesagt einen Regex.
Reguläre Ausdrücke kommen nicht nur in Skripts und beim Programmieren zum Einsatz, auch beim Entwickeln von Webseiten brauchen Sie ab und an einen Regex. Manchmal angeln Sie damit per PHP bestimmte Beiträge aus Ihrer Webseite, ein anderes Mal wählen Sie per CSS eine Vielzahl von Elementen aus und weisen dieser Auswahl dann einen eigenen Stil zu. RegExr hilft Ihnen beim Verstehen, Entwickeln und Testen von regulären Ausdrücken (Abbildung 3).
Abbildung 3: Das Beherrschen von regulären Ausdrücken gehört zu dem Rüstzeug eines jeden Programmierers und Webentwicklers. Der RegExr hilft Hobby-Webdesignern beim Verstehen dieses Werkzeugs.
Unter http://regexr.com geben Sie über eine Weboberfläche eigene reguläre Ausdrücke ein. Regexr markiert dann in Echtzeit weiter unten im Text die jeweiligen Treffer der Suche. Fahren Sie hier mit dem Mauscursor über die markierten Texte, erscheinen zusätzliche Informationen. Alternativ bedienen Sie sich bei den Beispielen aus der Seitenleiste oder Sie helfen sich mit einem Blick in das Cheatsheet und die ausführliche Regex-Referenz.
Aufgehübscht
Das Entwickeln eines individuellen Templates für eine CMS-gestützte Homepage gelingt dank zahlreicher Template-Vorlagen meist sehr einfach. Hier eine andere Schriftart verwendet, da etwas mehr Platz zwischen den Absätzen gelassen, dort einen Block ein wenig anders eingefärbt – durch simple Änderungen an den CSS-Dateien des Templates lässt sich das schnell machen. Am Ende bläht sich der CSS-Code jedoch kräftig auf, die Ladezeiten steigen (wenn auch aufgrund der geringen Größe der Textdateien nur wenig) und die CSS-Datei entwickelt sich zu einem unübersichtlichen Monstrum.
Code Beautify hilft Ihnen dabei, den CSS-Code Ihrer Webseite – aber auch andere Code-Dateien, wie HTML, Javascript, C# oder SQL – abzuspecken und übersichtlich zu formatieren (Abbildung 4). Kopieren Sie dazu den fraglichen Code in den Webeditor unter http://codebeautify.org oder laden Sie ihn über den Open-Button und tippen Sie zur Formatierung auf Beautify. Minify entfernt dagegen sämtliche für die Darstellung im Browser unnötige Zeichen – also auch Zeilenumbrüche, Einzüge und Kommentare. Dadurch lässt sich der Code nur noch schwer lesen und bearbeiten, der minimierte Code reduziert jedoch das zu übertragende Datenvolumen und damit die Ladezeit.
Abbildung 4: Ordnung ist das halbe Leben – auch beim Programmieren und Entwickeln von Webseiten. Code Beautify räumt CSS-Code auf und komprimiert ihn auf Wunsch auf das Nötigste.
Angepasst
Aufgrund der Vielfalt von Anzeigegeräten sollten Sie Ihre Webseiten so gestalten, dass sie sich bei jeder Bildschirmgröße gut bedienen lassen. Im Jargon der Webentwickler nennt sich dieser Ansatz responsives oder reaktionsfähiges Webdesign. Sehr viele Templates für die diversen Content-Management-Systeme greifen entsprechende Techniken bereits auf. Bei Änderungen an der Webseite gilt es daher, diese auf möglichst viele unterschiedliche Auflösungen zu testen. Dabei hilft Ihnen beispielsweise das browserunabhängige Bookmarklet Viewport Resizer.
Den Viewport Resizer aktivieren Sie entweder über einen Klick auf den Button auf der Homepage unter http://lab.maltewassermann.com/viewport-resizer, oder Sie sichern das Bookmarklet in den Lesezeichen Ihres Browsers – so starten Sie den Resizer auf jeder Webseite ohne Umweg. Der Resizer öffnet am oberen Rand eine schmale Icon-Leiste. Über diese wählen Sie die Anzeigegröße einer Reihe von Geräten aus. Per Drag & Drop an einem der Griffe am Rand des Anzeigebereichs oder dem Feld Customize bestimmen Sie die Größe des Viewports selbst (Abbildung 5).
Abbildung 5: Mit dem Bookmarklet Viewport Resizer testen Sie die Darstellung von Webseiten auf unterschiedlichen mobilen Geräten.
Ausgerichtet
Bei der Gestaltung Ihrer Webseite sollten Sie nicht nur auf das Positionieren von Blöcken, Widgets oder Bildern achten, sondern immer auch ein Auge auf die Typografie haben. Eine gut gestaltete Webseite nutzt passende und leserliche Schriftarten und variiert Schriftgrößen und Abstände bei Überschriften, Zwischentiteln und Lauftext. Mit dem Gridlover (http://www.gridlover.net/app) erstellen Sie per Mausklick ein entsprechendes Textraster (Abbildung 6).
Abbildung 6: Wie groß sollten die Abstände auf Ihrer Webseite zwischen Texten und Überschriften ausfallen? Gridlover erstellt für Sie ein ansprechendes CSS-Layout.
Über die Schieberegler im Kopf der Seite geben Sie die Schriftgröße, die Zeilenhöhe und einen Skalierungsfaktor vor. Gridlover blendet nach einem Klick auf Styles eine Seitenleiste mit dem CSS-Code des von Ihnen über die Regler generierten Layouts ein. Dieser lässt sich dann in eigene Projekte übernehmen. Den von Gridlover vorgegebenen Blindtext tauschen Sie unter Content gegen eigene Inhalte aus.
