Tools

Die Entwicklung moderner Websites wird immer komplexer und ohne die unzähligen Tools und Scripte würde die Umsetzung eines Projekts noch länger dauern. Gerade für lästigen Aufgaben werden praktische Tools entwickelt um dem Webdesigner unter die Arme zu greifen. Eine umfangreiche Liste aller uns bekannten Tools findest du übrigens auf Best Webdesign Tools.

Stylesheets aus HTML-Markup generieren: Bear CSS

bear-css-logo

Die meisten Webdesigner werden beim Coding einer Seite ähnlich vorgehen. Sofern nicht direkt ein Template (z.B. Boilerplate) zum Einsatz kommt, schreibt man zunächst das HTML-Markup. Wenn die HTML-Struktur steht, wird die CSS-Datei angelegt und alles über das Stylesheet gestaltet.
Wenn auch ihr Websites nach diesem Muster umsetzt, kann Bear CSS euren Workflow spürbar beschleunigen.

Beitrag zu Ende lesen

Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

html5please-logo

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

Beitrag zu Ende lesen

CSS-Dokumente perfekt strukturieren: ProCSSor

procssor-logo

Wer als Webdesigner im Team mit anderen Entwicklern arbeitet, hat sicher schon die ein oder andere Diskussion zum Thema Code-Design geführt. Insbesondere bei der Strukturierung von CSS-Code können die Meinungen stark auseinander driften. Sollen die CSS-Eigenschaften nun untereinander oder nebeneinander geschrieben werden? Gehören Leerzeilen zwischen die Eigenschaften oder soll vielleicht sogar alles in einer Zeile geschrieben werden? Und wo ist der beste Platz für öffnende und schließende Klammern?
Damit jeder Entwickler arbeiten kann wie es ihm am besten gefällt wurde der Online-Dienst ProCSSor ins Leben gerufen.

Beitrag zu Ende lesen

Responsive Webdesign & CSS3 Media Queries

resposive-design

Das so genannte "Responsive Webdesign" und die CSS3-Technologie "Media Queries" gehören aktuell zu den heißesten Trends der Webentwicklung. Beide Begriffe beschreiben die Möglichkeit das Layout einer Website für mobile Endgeräte wie Smartphones und Tablet-Computer anzupassen. Wenn ihr euch umfassend über mobiles Webdesign informieren wollt, seid ihr hier genau richtig. Auf dieser Seite findet ihr eine inhaltlich aufbereitete und strukturierte Zusammenfassung aller Beiträge die ich zu diesem Thema veröffentlicht habe.

Wenn ihr Fragen zum responsive Webdesign habt die hier nicht geklärt werden können, schreibt mir einfach eine Mail (info@kulturbanause.de) oder nutzt die Kommentarfunktion. Ich werde schnellstmöglich antworten oder einen Beitrag zu diesem Thema veröffentlichen.

Was ist responsive Webdesign?

Unter responsive Webdesign versteht man die optische Anpassung einer Website an verschiedene Ausgabemedien. Moderne Websites werden längst nicht mehr nur für die Bildschirmansicht erstellt - die Darstellung muss auch auf iPad, iPhone und Co. übersichtlich und benutzerfreundlich bleiben. Nun gibt es unterschiedliche Ansätze eine Website für verschiedene Endgeräte zu optimieren. Eine dieser Möglichkeiten ist die CSS3-Technologie Media Queries die lediglich die Darstellung einer Website anpasst, aber die identischen Inhalte nutzt. Der große Vorteil dieser Variante ist, dass alle Versionen auf einen technologischen Kern zugreifen und daher auch nur an einer Stelle gepflegt werden müssen. Das ist einfach und spart Zeit.

Zwei Beispiele für Responsive Webdesign

Es gibt auch andere Lösungen wie native Apps oder "echte" mobile Websites. Diese Lösungen werden meist dann gewählt, wenn die mobile Version gänzlich andere Inhalte bieten soll als die eigentliche Website oder auf die Hardware-Funktionen des Endgeräts (beispielsweise GPS oder die Kamera) zugegriffen werden soll. Beide zuletzt genannten Varianten sind in der Regel eigenständige Projekte die unabhängig von der eigentlichen Website funktionieren, häufig technologisch völlig anders umgesetzt sind und separat gepflegt werden müssen.

Auf dieser Seite wird das Thema responsive Web behandelt. Einen guten Einstieg in die Materie bieten euch die folgenden Beiträge.

Getting started: Media Queries & Responsive Webdesign

Der folgende Artikel erklärt anhand eines in sich abgeschlossenen Mini-Tutorials die Verwendung von Media Queries.

Dieser Artikel ist schon einige Zeit älter, ergänzt das Thema in meinen Augen allerdings trotzdem gut, da ein konkretes Endgerät - in diesem Fall ein iPhone - angesprochen werden soll. Neben der reinen Darstellung werden auch gerätespezifische Eigenschaften (z.B. der Zoom) angesprochen.


Tools, Frameworks und Hilfsmittel

Es existieren eine Menge Tools um die Arbeit mit mobilen Websites zu vereinfachen. Folgende Tools habe ich bereits vorgestellt.


Häufige Probleme im responsive Design lösen und vermeiden

Sobald ihr die erste mobile Website online gestellt habt, werdet ihr schnell merken, dass bestimmte Inhaltstypen oder Browser besonders gerne Ärger machen. Zu diesem Zweck findet ihr hier ein paar praxisnahe Tipps um auch anspruchsvolle Inhalte und den Internet Explorer "responsive" zu halten.


Inspiration

Zuletzt noch ein wenig Inspiration für eigene Projekte. Der Media-Queries-Showcase zeigt beeindruckende Beispiele aus dem responsive Web.

Responsive Layouts online testen: responsivepx

responsive-px-logo

Ich habe euch ja bereits einige Tools zum Live-Testing von responsive Webdesigns vorgestellt. Mit responsivepx möchte ich diese Sammlung nun um einen weiteren Dienst ergänzen. Grundsätzlich funktioniert das Tool ähnlich wie die konkurrierenden Angebote auch: Ihr gebt eine URL ein und könnt das Design auf verschiedenen Viewports testen. Der Vorteil von responsivepx besteht allerdings darin, dass ihr eine Website sowohl in der Höhe als auch in der Breite flexibel testen könnt.

Beitrag zu Ende lesen

W3Clove

w3c-love-icon

Die Markup-Validierung gehört zu den absoluten Standard-Aufgaben bei der formellen Überprüfung einer Website. Sei es nun bei der Fertigstellung eines neuen Webprodukts, bei einer Aktualisierungen oder einfach aus Interesse - validiert wird ständig. Lästig ist allerdings, dass in den gängigen W3C-Validatoren jede URL einzeln überprüft werden muss. Bei umfangreichen oder gar dynamischen Projekten wie Blogs kann der Vorgang daher sehr zeitaufwändig werden. W3Clove überprüft alle Unterseiten einer Website mit nur einem Klick.

Beitrag zu Ende lesen

Bessere Bildkompression mit Kraken

kraken-logo

Performance-Optimierung zählt zu den wichtigsten Arbeitsbereichen eines Webdesigners. Es ist zwar manchmal etwas lästig die Website zu optimieren, vernachlässigen sollte man es deswegen aber nicht. Eine Möglichkeit die Ladezeit der Website zu verringern, ist die stärkere Kompression von Bildern. Vielleicht erinnert ihr euch noch daran, dass ich die Online-Komprimierungsdienste JPEG Mini, Smush It und Puny PNG verglichen habe. Nun möchte ich euch auf ein weiteres Tool aufmerksam machen: Kraken.

Beitrag zu Ende lesen