Responsive Design ist schön, macht aber viel Arbeit

Responsive Webdesign ist heute State of the Art im Webdesign. Alle Kunden wollen eine Webseite, die auch auf mobilen Geräten gut funktioniert. Das stellt uns Designer vor neue Herausforderungen.

Beim Entwerfen des Designs für eine Webseite beginnt man in der Regel mit der Desktopansicht. Ich mache das jedenfalls so, auch wenn der Code später „mobile first“ gebaut wird. Die Desktopansicht ist ein guter Einstieg und man bekommt schnell ein Gefühl für die Gestaltung.

Dann wäre da noch die Frage
„Wie sieht das Design auf einem kleinen Bildschirm aus?“

illu-rwd-2-frei

„Auf dem Tablet wird dann alles irgendwie schmäler.“

Okay. Aber was passiert, wenn die Spalten so schmal werden, dass man den Text nicht mehr lesen kann? Und kann man dieses Bild da noch erkennen, wenn es nur noch 30×50 Pixel groß ist? Und wie soll man diesen winzig kleinen Link mit dem Finger anklicken?

Es hilft nichts. Damit die Seite auch auf kleinen Bildschirmen lesbar und bedienbar muss man verschiedene Szenarien durchspielen.
Weiterlesen →

WordPress absichern: 5 Goldene Regeln

Hacker nehmen gerne WordPress-Installationen unter Beschuss. Das liegt aber nicht daran, dass WordPress besonders unsicher ist. der Grund ist, dass WordPress so weit verbreitet ist. WordPress-Installationen sind also rein von der Masse her ein lohnendes Ziel.

Ein weiterer Grund ist, dass WordPress häufig von Leuten installiert wird, die sich nicht so gut auskennen. Sie sind sich nicht klar darüber, dass ein Redaktionssystem nichts ist, dass man einmal installiert und dann vergessen kann. Das System braucht Aufmerksamkeit, man muss es pflegen. Und man sollte bei Installieren ein paar Regeln beachten.

Weiterlesen →

Icon Font oder SVG?

Es gibt immer wieder Diskussionen darüber, ob man kleine Symbole auf einer Webseite über einen Icon-Font oder besser über SVG-Grafiken einbinden sollte.

Icon-Fonts werden deshalb mit SVG-Grafiken auf eine Stufe gestellt, weil SVG ein Vektorformat ist und man diese Grafiken über CSS einfärben kann. Das kann man mit „normalen“ Pixelbildern (PNG, JPEG) nicht machen. Hier braucht man für jede Farbe ein eigenes Bild.

Bei der Entscheidung für oder gegen Icons-Fonts gibt einige Vor- und Nachteile abzuwägen. Ich fasse mal die Wichtigsten zusammen:

Nachteile Icon-Fonts

  • Opera Mini kann keine Icon-Fonts darstellen
    Opera Mini hat einen sehr hohen Marktanteil in Regionen, die keine gute Internet-Infrastruktur haben (Asien, Afrika). Seiten laden schneller, weil Opera Mini „überflüssige“ Daten ausblendet. Icon-Fonts, die über @font-face eingebunden sind, findet Opera Mini überflüssig.
  • Manche Browser (Chrome, Firefox) in manchen Versionen haben Rendering-Probleme.
    Das heisst, die Symbole können unscharf aussehen.

Vorteile Icon-Fonts

  • Über Standard-CSS integrierbar, keine Umbauten am HTML-Code notwendig
  • Auch alte Browser (IE 7 und IE 8) können Icon-Fonts darstellen.
  • Es müssen keine Fallback-Lösungen eingebaut werden.
    Für SVG-Icons braucht man Fallback-Lösungen für ältere Browser

Schlussfolgerung

Jedes Projekt ist anders. Aber wenn man sich sicher ist, dass man auf Opera Mini verzichten kann, dann ist die Entscheidung für einen Icon-Font in Ordnung. Das Einbinden von Icon-Fonts geht schnell, man braucht keine Fallback-Lösungen und für das Styling über CSS braucht man kein Expertenwissen.
Der Umgang mit SVG ist deutlich anspruchsvoller und erfordert mehr KnowHow.


Dieser Artikel beschreibt ausführlich die Vor-und Nachteile beider Herangehensweisen:
Ten reasons we switched from an icon font to SVG

 

Tipps für gute Texte im Web

Nicht jeder Text eignet sich für die Veröffentlichung auf einer Webseite. Eine „Zweitverwertung“ bereits vorhandener Texte gelingt daher am besten, wenn man mit kritischem Blick auswählt und das Textmaterial mediengerecht aufbereitet.

3 Kriterien für gute Texte

  1. Komm auf den Punkt
  2. Gliedere Deinen Text
  3. Fasse Dich kurz

1. Komm auf den Punkt

Ein guter Text – im journalistischen Sinn – ist das Gegenteil von dem, was man uns in der Schule und an der Uni beigebracht hat. Dort haben wir gelernt, dass man erst Mal alle Argumente sammeln muss. Dann folgt eine ausführliche Betrachtung sämtlicher Aspekte und erst ganz am Schluss präsentieren wir das Ergebnis unserer Überlegungen.
Weiterlesen →