Funkenstrahlen Podcasting, Netzpolitik, App-Entwicklung

01 Design Tips

Ich beschäftige mich in letzter Zeit vermehrt mit modernem Webdesign. Das heißt mit responsive Layouts, die vom mobilen Smartphone über Tablets bis zum 27” Flachbildschrim wunderbar von selbst skalieren. Dabei ist es immer ganz praktisch, wenn man seine kleine private Trick- und Toolkiste parat hat, die einem das Arbeiten erleichtert. Einige dieser Tools, will ich euch hier vorstellen.

Es haben sich dabei wirklich viele interessante Projekte gesammelt, daher habe ich beschlossen nicht alles in einen Blogpost zu packen. Das hier ist also die erste Ladung toller Tips und wenn ihr alles ausprobiert habt, könnt ihr euch bald auf weitere Posts zu diesem Thema freuen :)

Auf geht’s!

CSS Refresh

Wenn ihr öfter am Design einer Webseite arbeitet, dann kennt ihr das sicher: CSS Datei aufmachen, verändern, speichern, F5. Repeat.

Das ist ziemlich umständlich. Um kleine Dinge auszuprobieren könnt ihr am besten direkt im Webbrowser mit “Rechtsklick -> Inspect Element” den Debugger aufrufen und so live Änderungen durchführen.

Wenn ihr die Änderungen dann permanent machen wollt, dann kann dieser Debugger die Änderungen aber nicht speichern. Wenn ihr also ein wenig herumprobiert habt, solltet ihr CSS Refresh nutzen. Dazu müsst ihr folgendes Java Script in den HTML-Head eurer Webseite einbinden:

<script type="text/javascript" src="js/cssrefresh.js"></script>

Das sorgt dann dafür, dass das CSS automatisch im Browser neu geladen wird, wenn ihr im Editor auf Speichern drückt. Das dauert zwar etwas länger als die Änderungen direkt im Browser Debugger zu machen, die Änderungen gehen dafür aber nicht verloren.

Zu beachten ist unbedingt, die JavaScript-Datei nach den CSS-Dateien einzubinden. Nur so kann CSSrefresh Änderungen an den entsprechenden Dateien beobachten und darauf reagieren. Da CSS Refresh nur die Styleheets im Hintergrund aktualisiert, fällt auch das Laden der kompletten Seite inklusive aller Grafiken weg.

Foundation 3

Hierbei handelt es sich um ein Framework, mit dem sich wunderbar Responsive Layouts für eine Webseite erstellen lassen.

Es ist sehr gut dokumentiert und bietet eine wirklich interessante Funktion: Rapid Prototyping. Es lassen sich damit auf die schnelle Layouts erstellen, die bereits klickbar und navigierbar sind, aber noch kein Farbschema oder wirklich Content enthalten. Das ist sehr praktisch, wenn man mal kurz ein paar Ideen testen möchte. Eine kurzes Beispiel wie man das macht findet sich hier.

Auf jeden Fall mal anschauen, wenn ihr Webseiten in aktuellem Design erstellen wollt! Eine ausführliche Einführung gibt es natürlich auch bei Dr. Web.

Gestensteuerung für Bilder

Es gibt hier einen ganz spannenden Artikel, der erklärt, wie man Gesten auf mobilen Geräten via Java Script erkennen kann.

SVGs in die Webseite einbinden

Das MacBook Pro Retina zeigt zudem, wohin die Reise auch im Desktop- und Notebook-Bereich gehen wird. HiDPI-Screens werden schneller Flächendeckung erreichen, als wir heute ahnen. Wir müssen also auf der einen Seite immer kleinere Geräte mit immer besseren Bildschirmen bedienen und auf der anderen Seite unschöne Rastereffekte auf großen Bildschirmen mit HiDPI-Display vermeiden.

Ihr merkt sicher langsam, dass Dr. Web eine recht gute Ressource ist, aus der ich hier einiges verlinke. In diesem Artikel geht es darum, wie man am besten SVG Grafiken in die Webseite einbinden kann, damit man Unschärfe bei hoch auflösenden Displays vermeidet. Als netten Nebeneffekt sind die Dateigrößen von SVGs auch sehr viel geringer und damit die Ladezeiten der Webseiten kürzer.

Alles in allem ist das mit den SVGs dann aber doch nicht so einfach, da viele Browser das noch nicht unterstützen oder es seltsame Seiteneffekte gibt. Hier erhaltet ihr jedenfalls einen guten Überblick über die Möglichkeiten und Alternativen, um SVGs auf der Webseite einzubinden.