Autor: simon

Webdesign: Statisch, adaptive oder responsive?

In diesem Artikel möchte ich erklären, was der Unterschied ist zwischen einer statischen und einer responsiv programmierten Webseite.

Wie muss ich mir das vorstellen? 1. Das klassische, statische Layout Nehmen für den Anfang den Fall einer Webseite, die nicht im Responsive Design programmiert ist. Alle Inhalte haben feste Breiten. Wird der Bildschirm kleiner, bleiben die Elemente unverändert.

In der Realität sieht es ein bisschen anders aus, denn die meisten Tablets und Smartphones versuchen, statische Inhalt so zu verkleinern, so dass sie irgendwie auf den Bildschirm passen.

Früher oder später verschwinden trotz Verkleinerung Inhalte aus dem Sichtfeld. Der User kann sie auch durch Scrollen nicht erreichen. In starker Verkleinerung kann man den Text nicht mehr lesen und Bilder nicht mehr erkennen. Links und Navigationslemente werden so winzig, dass man sie nicht mehr bedienen kann.

Mittelding: Kombination aus mehreren statischen Layouts

Bei dieser Methode werden mehrere starre Layouts miteinander kombiniert. Ab einer gewissen Bildschirmbreite „springt“ das Layout auf die nächst kleinere Version. Man nennt diese Methode auch Adaptive Design.
Der Designer/die Designerin kann weiter mit festen Breiten in Pixeln arbeiten, Elemente können exakt und „pixelgenau“ positioniert werden. Das ist in gewissem Sinn ein Vorteil. Diese Methode hat aber einen gewaltigen Nachteil: Ein Großteil der Besucher landet mit seinem mobilen Gerät irgendwo zwischen zwei Layouts und sieht eine nicht optimierte Darstellung. Man müsste endlos viele Layouts vorhalten, wenn man allen Besuchern eine gut lesbare und bedienbare Version bieten möchte. Das ist nicht praktikabel. Es gibt inzwischen einfach zu viele Geräte mit zu vielen unterschiedlichen Auflösungen und Bildschirmbreiten.

Responsive: Flexible Layouts, die sich anpassen

Bei dieser Methode ist das Layout „fließend“ und passt sich jeder Bildschirmbreite automatisch an. Im CSS wird nicht mehr mit absoluten Werten (Pixel) gearbeitet, sondern mit relativen Werten (Prozent).

Ein Beispiel: In einem statischen Layout hätte eine Header-Grafik eine Breite von 960 Pixeln. In einem fließenden Layout gibt es diesen absoluten Wert nicht mehr. Statt dessen wird definiert, wie groß das Bild im Verhältnis zu seiner Umgebung sein soll. Sagen wir, das Bild bekommt die Breite von 90% zugewiesen — dadurch sehen alle Besucher eine Darstellung, die zu ihrem Gerät passt.

Der Teufel liegt ein bisschen im Detail. Man muss beispielsweise darauf achten, dass jedes Element so skaliert, dass das Design auf kleinen Bildschirmen nicht auseinander fällt. Alle Elemente müssen gut zusammen spielen. Mit dem richtigen Konzept ist das aber kein Problem. Bei Web-Projekten im responsive Design ist es wichtig, dass sich Designer und Entwickler frühzeitig zusammensetzen und die Umsetzung des Designs zu besprechen. Manchmal helfen schon kleine Änderungen an Design und Struktur und die Darstellung über die Gerätegrenzen hinweg lässt sich massiv verbessern.

„Vollgemüllt ist doof.“ „Clean aber auch!“

Bei t3n erschien kürzlich der Artikel Aufgeräumt? Clean? Von wegen! Warum erfolgreiche Interfaces chaotisch und komplex sind. Der Text ist eine gekürzte Übersetzung eines Posts von Jonas Downey, der bei Medium erschienen ist: Why I love ugly, messy interfaces — and you probably do too.

In dem Artikel geht es darum, dass ein unaufgeräumtes Interface oft erfolgreicher ist als ein reduziertes.

User Interfaces sind ein vielschichtiges Thema, für das es keine Patentrezepte gibt. Es gibt nur individuelle Lösungen. Die sind nicht schwer zu finden, wenn man bereit ist, sich mit der Materie auseinanderzusetzen (Mit welchen Anliegen kommen die Besucher? Auf welchem Weg können sie ihr Anliegen lösen?). Aber diese Auseinandersetzung ist mit Arbeit verbunden. Arbeit, die Geld kostet, weil man dafür gute Leute engagieren muss.

Komplex, aber bitte nicht chaotisch

Ein komplexes Angebot wie Die Zeit oder The Guardian braucht eine andere Art von Interface als ein einfaches Blog wie dieses hier. Für mich als Leserin einer Tageszeitungs-Webseite ist es aber überaus wichtig, dass das Interface übersichtlich und klar strukturiert ist. So kann ich mich gut orientieren und finde die Inhalte, die mich interessieren.

Das absichtsvolle Ducheinander

Für das soziale Netzwerk Facebook hingegen ist es nicht so wichtig, ob sich die Besucher gut zurechtfinden. Sie sollen möglichst häufig interagieren, hier ein Like setzen, dort eine Freundschaftsanfrage stellen und da noch schnell zur nächsten Nachricht springen. Eine gewisse Unübersichtlichkeit ist hier gewollt. Mir persönlich ist dieses Konzept unangenehm. Aber für Facebook selbst zahlt es sich aus. Facebook testet jedes noch so kleine Element sehr sorgfältig auf seine Effizienz.

Fazit

Auf komplexe Fragen gibt es keine einfache Antworten, von wenigen Ausnahmen mal abgesehen. Mit einer steilen These lässt sich zwar Aufmerksamkeit erzeugen, aber der Antwort auf die Frage „Was macht ein gutes User-Interface aus“ bringt uns das keinen Schritt näher. Im oben zitierten Artikel wird auch – mal wieder – Craigslist als positives Beispiel für eine erfolgreiche, aber chaotische Nutzeroberfläche genannt. Ich bin mir nicht sicher, wie gut das Unübersichtlichkeits-Konzept für Craigslist funktioniert. Das Netz entwickelt sich ständig weiter. Gewohnheiten ändern sich, Nutzungsszenarien brechen weg, neue entstehen. Ob die Leute von Craigslist das im Blick haben? Die mobile Ansicht der Seite wirkt auf mich jedenfalls nicht überzeugend.

Meine schwierige Beziehung zu Baukasten-Themes

„Du machst doch was mit WordPress, kannst Du mir mal schnell mit meinem Theme helfen?“ Wenn ich diese Frage höre, dann weiß ich: Das könnte knifflig werden. Denn nicht bei jedem Theme kann ich mein WordPress-KnowHow anwenden.

Es gibt Themes, die haben nicht mich im Visier, sondern den Endkunden, der selbst etwas zusammenbauen möchte. Diese Baukasten-Themes bieten eine große Vielfalt an Einstellungsmöglichkeiten im Backend und/oder über den Customizer an. Dort kann man dann für jedes Element die Farbe, Abstände, Größen und so weiter festlegen und sich ganze Seiten-Layouts zusammenklicken.

Es kann allerdings passieren, dass das Theme, das zuerst so vielversprechend aussah, nicht so funktioniert wie erwartet. Auch bei 200+ Optionen gibt es immer Dinge, für die der Entwickler keine Einstellungsmöglichkeit vorgesehen hat.
Das ist der Punkt, an dem viele Leute Hilfe suchen.

Machbar ist alles, aber nicht alles ist rentabel

Rein theoretisch sind Anpassungen im Code über ein Childtheme bei jedem WordPress-Theme möglich. Aber die Codebasis bei Baukasten-Themes ist sehr komplex und verschachtelt. Selbst kleine Anpassungen können viel Zeit kosten, weil man lange suchen muss, um herauszufinden, welche Templates auf welche Weise verändert werden müssen.
Der Zeitaufwand dafür ist im Voraus nicht kalkulierbar, das heisst, ich kann kein belastbares Angebot abgeben. Das ist eine ungute Situation für beide Seiten; der Kunde weiß nicht, welche Kosten auf ihn zukommen und ich kann meine Zeit nicht planen.

Aus diesen Gründen lehne ich freundlich ab, wenn es um die Anpassung von Baukasten-Themes geht. Es lohnt sich einfach nicht.
Anpassungen im Code wären zu teuer bzw. nicht nachhaltig und einen Zeitvorteil beim Zusammenklicken per Customizer/Optionen habe ich auch nicht, denn ich bräuchte dafür genauso viel Zeit wie jeder andere auch. Ich muss mich in jedes Theme neu einarbeiten, weil die Optionen in den Baukasten-Themes keinem Standard folgen. Jeder Entwickler bastelt sich hier seine eigene Systematik.

Meine Basis-Themes
Ich arbeite bei WordPress-Themes überwiegend auf der Code-Ebene, meine Werkzeuge sind CSS, Javascript und PHP. Mein Lieblings-Theme ist minimalistisch und standardkonform.

Größere Projekte entwickle ich auf der Basis des underscores Theme von Automattic. Underscores wurde inzwischen weiterentwickelt zu components. Components bietet eine Auswahl von Modulen, über die man gleich zu Beginn der Arbeit die richtigen Weichen stellen kann – je nachdem ob man ein Portfolio, Business-Theme, Magazin oder Blog bauen möchte.

Kleine Seiten lassen sich gut mit einem Elmastudio-Childtheme umsetzen. Für mittelgroße Projekte, wo ein Custom Theme zu aufwändig wäre und ein Elmastudio-Childtheme zu wenig Möglichkeiten bietet, arbeite ich inzwischen gern mit dem Make-Theme von Thethemefoundry. Das CSS, das das Make-Theme mitbringt, ist reduziert und minimalistisch. Dadurch eignet es sich gut als Grundlage für ein individuelles Design.
Die Code-Basis des Make-Theme ist sehr sauber und hervorragend dokumentiert. Thethemefoundry hat dafür sogar den Ritterschlag von Justin Tadlock’s Theme Review bekommen.

Was ist HTTPS?

HTTPS (Hypertext Transfer Protocol Secure) sorgt für eine verschlüsselte Verbindung zwischen Website und Besucher. In unserem Fall also zwischen dem Webserver, der die Website bereitstellt, und dem Browser.
Um HTTPS einrichten zu können benötigt man ein Sicherheitszertifikat, SSL-Zertifikat genannt.

Diese Zertifikate werden von einer Zertifizierungsstelle ausgegeben. Dabei gibt es verschiedene „Eskalationsstufen“, also unterschiedlich aufwändige (und teure) Zertifikate:

Domain-Validierung
Für die meisten Websites ist dieses Zertifikat ausreichend, da die Art der Verschlüsselung dieselbe ist wie bei den teureren Zertifikaten.
Bei diesem Zertifikat wird ausschließlich die Identität des Seitenbetreibers geprüft und mit den Daten der Domainregistrierung abgeglichen. Dadurch steht dieses Zertifikat innerhalb kürzester Zeit bereit.
Organisations-Validierung
In diesem Fall wird sowohl der Domaininhaber als auch die Organisation dahinter geprüft. Unter anderem geht es darum, ob die Organisation berechtigt ist, die Domain zu führen.
Die Bereitstellung dauert ein paar Tage, unter anderem deshalb, weil man Belege liefern muss wie z.B. einen Auszug aus dem Handelsregister.
Extended Validation SSL
Das teuerste Zertifikat im Bunde. Es ist aufgrund der hohen Kosten vor allem für Onlineshops oder große Hostinganbieter interessant.
Um ein solches Zertifikat zu bekommen werden noch weitreichendere Prüfungen vorgenommen. Man erkennt das Zertifikat daran, dass in der Adressleiste nicht nur das grüne Schloss und „https“ zu finden ist sondern der Name des Unternehmens neben dem Schloss ausgeschrieben wird. Klickt man das Schloss an erhält man weitere Informationen

Typografie im Web

Typografie im Webdesign: Teil 2 – Grundregeln zur Lesbarkeit

Hier ein paar Grundregeln, um die Lesbarkeit deiner Webtexte zu verbessern.

Scannable Text bedeutet, Webtexte werden viel mehr überflogen bzw. vom Auge »abgescannt«, als wie in einem Buch richtig gelesen. Einige Elemente um deine Webtexte für den Leser »Scannable« zu machen:

– Deine Texte sollten nicht zu lang sein.
– Zeilenabstände gliedern den Text.
– Auflistungen lassen sich leicht lesen.
– Schlüsselwörter kannst du durch Farbe, Fett oder Kursiv hervorheben.
– Unterstrichene Wörter weisen auf Links hin.

Um dein Weblayout interessanter zu gestalten, kannst du Elemente wie Buttons, Bilder, Grafiken oder Icons verwenden. So kannst wichtige Elemente betonen.

Weiße Flächen kannst du geschickt als Trennelemente einsetzen. Wichtig ist z.B. ein angenehmer Textrand, Abstände zwischen Überschrift und Text, und Zeilenabstände.

Überschriften sind mit die wichtigsten Elemente in der Typografie.
Sie sollen den Leser fesseln, und sollten daher nicht zu lang sein.

Beim Verhältnis der Überschrift zum Text, heißt es, das richtige Maß zu finden. Ist die Überschrift zu groß, schreckt das den Leser ab. Ist sie zu klein, findet sie nicht die gewünschte Beachtung.Fotos und Grafiken sind abwechslungsreiche Elemente und lockern deine Texte auf.
Indem du Elemente wie Linien und farbige Hintergründe einsetzt, kannst du dein Layout besser strukturieren. So findet sich der Benutzer besser auf deiner Webseite zurecht.

Das sind natürlich nur die wichtigsten Elemente, um die Lesbarkeit deiner Webtexte zu verbessern. Falls du noch weitere Vorschläge, oder Beispiele hast, schreibe doch einfach einen Kommentar.

Läuft mit WordPress & Theme erstellt von Anders Norén