miradlo.com Auflösungen testen

In den letzten Wochen habe ich mich intensiver mit Responsive Webdesign befasst. Hierbei geht darum, die Inhalte einer Seite möglichst optimal für alle Geräte darzustellen. Egal ob mobiles Smartphone oder großer Monitor mit hoher Auflösung alle Nutzer sollen ein Layout finden, was zu ihrem gerade genutzten Gerät passt. Beim Barcamp Stuttgart habe ich am Samstag eine Session zu diesem Thema angeboten, dieser Beitrag enthält die Links und Infos hierzu.

Die Techniken im Hintergrund sind gar nicht so neu, vorgestellt wurde CSS 3 schon vor einigen Jahren. Sinnvoll einsetzbar wurde diese Möglichkeiten jedoch erst seit sie von den wichtigsten Browsern auch interpretiert wurden. Für mobile Geräte konnte man zunächst mittels media="handheld" ein anderes Layout festlegen, Geräte wie das iphone melden sich jedoch gar nicht als handheld und bekamen daher doch wieder dasselbe Design wie Nutzer mit großen Desktopmonitoren.

media queries je nach Auflösung

Mittels media queries aus CSS 3 wird ein Layout je nach Auflösung ausgegeben. Zunächst habe ich ein Layout erstellt wie es in meiner Arbeitsumgebung optimal passt. Mein erster Schritt war also das Layout für eine hohe Auflösung wie z.B. 1920 * 1080 Pixel anzulegen. Danach probierte ich immer kleiner werdende Auflösungen und sobald mir etwas nicht gefiel, passte ich es an. Das habe ich so lange gemacht bis ich eine weitere Verkleinerung nicht mehr für sinnvoll hielt, sprich bei weniger als 300 px Breite erzwinge ich einen Scrollbalken, Beispiel:

@media only screen and (max-width: 429px) {
#mainwrapper{
    min-width: 270px;
}
}

Genauer ansehen könnt ihr euch das CSS layout.css im unteren Teil von der Seite miradlo.com. Testen lassen sich Seiten:

• screenfly dort werden diverse Auflösungen je nach Gerät angezeigt, einfach die URL eingeben, z.B: miradlo.com
• Responsive Webdesign Testing zeigt direkt mehrere Auflösungen auf einen Blick, auch hier einfach die URL eingeben, z.B: miradlo.com

Responsive Webdesign vs. Apps

Ich halte diese Technik insbesondere für sehr sinnvoll. Damit werden weiterhin dieselben Inhalte auf allen Geräten ausgegeben und trotzdem wird das Design angepasst. Für große Seitenbetreiber, wie wikipedia können auch Apps für iphone, android usw. eingesetzt werden, um mobile Versionen zu nutzen. Bei der Mehrzahl aller Websites ist das jedoch nicht sinnvoll und meist auch finanziell nicht machbar. Plugins wie für WordPress die eine mobile Variante erstellen sind sicher oft besser als nichts, sie zeigen jedoch nicht mehr das Ursprungsdesign der jeweiligen Seite. Responsive Webdesign ist eine gute Lösung für viele Seiten und der Aufwand ist nicht so viel höher wie beim Erstellen einer App.

Je nach Design lässt sich das auch im Nachhinein noch relativ einfach anpassen, das klappt jedoch sicher nicht immer. Das gesamte Design muss mit flexiblen Breiten zurecht kommen. Die einzelnen div-Container müssen problemlos verschiebbar sein, sonst lohnt sich das nicht. Einige weitere Links zu diesem Thema:

• Responsive Webdesign – Verschiedene Devices simulieren und testen
• Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks
• Responsive Webdesign mit CSS3 Media Queries: So funktioniert’s

GIMP Farbverlauf

Christian verlinkte auf eine Seite mit vielen Photoshop-Gradients und dem Hinweis, die sollten auch in GIMP nutzbar sein. Einige sahen ganz interessant aus, also schaute ich mal nach einer Möglichkeit sie in GIMP zu nutzen. Einfach öffnen nützte nichts, da wurde nichts erkannt, was ein Verlauf werden könnte.

Deshalb recherchierte ich und fand eine Anleitung, wie das geht. Es braucht ein Plugin für GIMP

GIMP-Plugin für Verläufe

• Plugin Sample a Gradient Along a Path wird nach dem Download einfach im Systemordner des Benutzers gespeichert: home/user/gimp_version/scripts/
• beim nächsten Öffnen von GIMP ist es nutzbar.
• bei den Verläufen, die ich wollte, war ein *.jpg eines Verlaufs
• Bild des Verlaufs öffnen
• Pfadwerkzeug nehmen und den Verlaufspfad aus dem Verlauf markieren
• zum Farbverlaufseditor wechseln
• einen beliebigen Verlauf anklicken -> rechte Maustaste -> Sample Gradient wählen
• es öffnet sich ein Fenster (bei mir immer hinter dem anderen Einträgen, falls nichts passiert mal danach schauen)
• unter Gradient Name einen eindeutigen Namen eingeben
• fertig

Im Verlaufseditor gibt es jetzt einen weiteren Verlauf, der genutzt werden kann.

GIMP Verläufe

Wem das zu viel, der kann sich auch einfach einige GIMP-Verläufe holen, z.B. bei gimp-tutorials.net 130 Verläufe für GIMP

Sicherungen nicht vergessen

Um Plugins, eigene Verläufe, Muster usw. nicht zu verlieren bei einer Neuinstallation, sollte der Gimp-Ordner natürlich gesichert werden. Bei mir ist er mit Versionsnummer benannt, bei einem Update existiert dann oft ein weiterer Ordner, die Plugins usw. müssen dann noch reinkopiert werden, damit sie in der neuen Version nutzbar sind.

Unlesbare Navigation

Teaserinfos laufen in- und übereinander

Fast auf allen Seiten, auch auf ordentlich sauber mit HTML und CSS erstellten, passen die Formularelemente mit meinen Einstellungen nicht.

Ein Klick auf die Bilder führt zur vergrößerten Ansicht.

Benutzerdefinierte Mindestschriftgröße

Einerseits habe ich seit Jahren in dem Browser, den ich normalerweise nutze, eine Mindestschriftgröße eingestellt, weil ich sonst auf sehr vielen Seiten, schlicht nichts lesen kann. Hinzu kommt, dass selbst damit inzwischen viele Seiten eine derart schicke, Minischrift haben, dass ich erneut die Schrift vergrößern muss.

Einfach wäre die Mindestschriftgröße erneut höher zu setzen, doch das geht leider nicht, denn spätestens bei Seiten mit Formularen, sind damit nur noch sehr wenige überhaupt nutzbar. Oft komme ich nicht mal soweit, weil schon vorher die Benutzung nicht mehr klappt:

• Insbesondere horizontale Navigationen werden meist schlicht auf eine vordefinierte Schriftgröße festgezurrt und werden unlesbar, wenn die Schriftgröße erhöht wird, z.B. stern.de
• Zusammenstellungen wie in vielen Teasern und anderen Bereichen, die Aufmerksamkeit wecken sollen laufen völlig in- und übereinander z.B. auf suedkurier.de

• Beschriftung der Eingabefelder unlesbar
• Eingabefelder zu klein

Schriftgrößen insbesondere in Formularen und so

Häufig sind Formularelemente mit fixen Werten vordefiniert, wenn ich also die Schriftgröße so setze, wie ich es bequem lesen kann, dann kann ich wichtige zusätzliche Infos nicht mehr lesen:

• Eingabefelder sind zu klein um den gesamten geforderten Inhalt lesbar anzuzeigen (Deutsche Bank)
• Beschriftung der Eingabefelder unlesbar, bzw. kann sogar ganz verschwinden (suedkurier.de)

Die Konsequenz ist bei mir ein Mischsystem:

• eine Mindestschriftgröße die für manche Seiten passt
• erhöhen der Schriftgröße, wenn ich etwas lesen will
• verringern der Schriftgröße, um Bedienungselemente nutzen zu können

Überflüssig und ärgerlich

Schade, dass nur für schicke Optik so häufig auf zugängliche, nach Webstandards erstellte Seiten verzichtet wird. Das Web ist von seinen Grundlagen her optimal geeignet solche Probleme zu vermeiden und es den Nutzern zu überlassen, welche Einstellungen ihren Bedürfnissen entsprechen. Doch leider gibt es noch immer viel zu viele Designer, die Webseiten entwerfen, als sei es Papier.

Dazu passt die unsägliche Schriftgrößenumrechnung, die pixelgenau und berechenbar sein soll: den Mythos der 62,5% erklärt toscho in einfachen Worten.

Ich wünsche mir, wie viele andere, dass der Unsinn – Papierlayouts im Web 1:1 abzubilden – aufhört. Eine Initiative dazu ist der Blue Beanie Day, siehe: Blaue Mützen : Blue Beanie : 30.11.2010 Webstandards

PS: Falls jemand meint ich solle mal einen Optiker aufsuchen, ja das habe ich getan, ich habe eine Brille für die Ferne und eine Lesebrille, keine von beiden hilft mir am Bildschirm.

Blue Beanie Tag

Heute ist Blue Beanie Tag, zuerst las ich bei Robert davon, auch t3n berichtet darüber, es gibt eine facebook-Gruppe. Worum es geht?  Webstandards sollen ins Bewußtsein gerückt werden.

Eine weitere Idee ist: Fünf Sätze zu diesem Thema zu formulieren, die für einen selbst wichtig erscheinen um Webstandards voran zu bringen.

Meine Wunschliste zu Webstandards

• Inhalte sind wichtig und sollten für alle zugänglich sein (kleines zartgrau auf weiß ist keine lesbare Schrift)
• Flash ist kein Designelement (als Navigation ist Flash immer falsch und auch sonst wird Flash oft überflüssigerweise eingesetzt)
• Grafische Captchas behindern alle Nutzer
• Formularelemente sollen ebenfalls mitwachsen je nach gewählter Schriftgröße (ich nutze eine Mindestschriftgröße und kann oft Formulare nicht nutzen, weil die Felder zu klein bemessen sind)
• valides HTML und CSS tun nicht weh und sind eine Grundlage für bessere Seiten für alle Nutzer

Aprospos Webstandards

• Adventskalender Webkrauts

Inzwischen schon traditionell der Adventskalender der Webkrauts . Ab dem 1.12. gibt es wieder täglich einen Beitrag rundum Webstandards von wechselnden Autoren der Webkrauts. Ich bin sicher auch dieses Jahr wieder lesenswert.

Beim nächsten Mal installierte ich erstmals ernsthaft lokal, mit den Daten, die dann live auch genutzt werden sollen. Ich nahm die fortgeschrittene Installation, um auch gleich mal genauer zu sehen, was sich so einstellen lässt, da S9y für mich ja noch neu ist.

Schritt für Schritt änderte ich die Rechte, um auch da gleich zu testen, ob Serendipity da alle Probleme anzeigt. Bis zum Ende der Installation und dem Hinweis alles habe geklappt lief es problemlos.

• Adminbereich eines Redakteurs bei S9y

Doch dann…

Erster Aufruf des neuen Blogs

Ups, tja nur weil da keine Warnungen waren, war es wohl doch übertrieben direkt Umlaute zu nutzen. Ein abgeschnittener Blogtitel und ein ebenso beschnittener Untertitel sehen schon mal nicht so hübsch aus.

Auf der Seite gibt’s ein Login, nette Idee, mal sehen was sich da versteckt, denn das Forum empfiehlt bei Umlautproblemen den Titel erneut zu setzen.

Huch, “/serendipity/admin die Seite kann nicht gefunden werden“, hm, das ist ein bisschen unpraktisch, denn alle Tipps basieren darauf, erstmal im Admin irgendwas anzupassen. Ein bisschen recherchieren bringt wenig, denn der Admin-Benutzername war schon frei von Umlauten und auch bei erneutem Setzen mittels einer extra erstellten recover.php ändert sich nichts.

Also gut, dann nochmal in die Schritt-für-Schritt-Doku schauen und da mal genauer lesen und prüfen:

“…You can do that by calling your URL http://yourdomain.com/serendipity/serendipity_admin.php” Hm, wie jetzt serendipity_admin.php? Nun gut, die hätte den Vorzug, dass sie existiert, denn mir war schon klar, dass /admin nicht klappen konnte, weil es nicht vorhanden war, allerdings wusste ich ja nicht, ob da nicht beim Installieren versehentlich was nicht angelegt wurde.

Juhu, ein Erfolg: serendipity_admin.php lässt sich aufrufen und sieht aus wie eine Adminoberfläche, wenn auch ohne jedwedes Styling, das war beim ersten Testen noch anders… Na denn, weiter geht’s…

Admin ohne Styles

Keine Ahnung was ich falsch gemacht habe, aber mein Adminbereich lässt sich nicht nur nicht per Link aufrufen, er findet auch die CSS-Dateien nicht… Klar, gut ist, dass er trotzdem nutzbar ist, aber so ganz ohne Styles ist es schon sehr spartanisch.

Die nächste Installation

Bei einer weiteren Installation nahm ich nicht die fortgeschrittene, sondern die einfache Variante, da ich vermutete, dass irgendeine Einstellung schuld war, am Problem der fehlenden Styles. Stimmte auch, denn mit der einfachen Variante hatte der Admin Styles und auch das Login klappte wie gewünschte über die Blog-Oberfläche.

Allerdings auch hier gab’s wieder das Umlautproblem, trotz angegebener Sprache Deutsch fraß s9y alles ab einem Umlaut. In den Einstellungen läßt sich das zwar wieder ändern, aber es stört schon.

Einstellungen

Ich würde ja erwarten, dass ein bereits gespeichertes Passwort und eingeloggt sein ausreicht, aber das stimmt so nicht. Bei den eigenen Einstellungen läßt sich auch das Passwort ändern, falls man etwas anderes ändern will, muss trotzdem das Passwort zweimal angegeben werden, sonst beschließt Serendipity, dass das keine korrekte Eingabe war, löscht alles Eingegebene und beschwert sich übers fehlende Passwort.

Ignoriert wird zunächst alles ab einem Umlaut und auch die Sprachangabe deutsch führt nicht dazu, dass das bereits eingestellt ist, sondern muss in den persönlichen Einstellungen wiederholt werden.

Administration | Konfiguration | Generelle Einstellungen

Na bravo, hier wollte ich den – schon gewohnt gefressenen – Blogtitel mit Umlauten einstellen.

->  Seite wählen -> Blogtitel ändern -> Speichern -> alle Umlaute kaputt und Titel mit kaputten Umlauten

nächster Versuch:
->  Seite wählen -> Blogtitel ändern -> Zeichensatz ändern -> Speichern -> alle Umlaute doppelt kaputt und Titel ebenfalls mit kaputten Umlauten

ein weitererVersuch:
->  Seite wählen -> Blogtitel ändern -> Zeichensatz ändern wieder UTF8 -> Speichern -> alle Umlaute weiter kaputt und Titel wieder abgeschnitten

noch ein Versuch:
->  Seite wählen -> Blogtitel ändern -> Zeichensatz nicht ändern -> Speichern -> alle Umlaute weiter kaputt aber Titel stimmt

weiter geht’s:
-> Autorennamen wieder reparieren  -> Kategorien mit Umlauten wieder reparieren -> neuen Beitrag schreiben -> alte Beiträge reparieren

Taraa, tröööt, jubelnde Webentwicklerin und überhaupt…

Ja, dieses Mal klappt es und scheint jetzt ok. Nochmal testen, ob sich der Blogtitel jetzt nochmal ändern lässt und sich alles auflöst:

Nein, dieses Mal bleibt alles soweit ok.

Was lerne ich daraus?

Zunächst einmal, dass es wohl nur mit der einfachen Installation sinnvoll ist. Wie ich inzwischen weiß, wird bei der fortgeschrittenen Installation nichts angegeben, was sich nicht nachher noch ändern ließe. Nachträgliches Ändern hat den Vorzug, dass ich immerhin weiß an welcher Ecke ich was eingestellt habe, was S9y nicht mag.

Beim vierten oder fünften  Versuch stellte ich während des Testens dann auch fest, dass es einen Zusammenhang zwischen einem Adminbereich ohne Styles und einigen Themes besteht, die plötzlich auch keine Styles mehr hatten.

Admin ohne Design und manche Themes funktionieren nicht

Also ging ich mal an die Stellen, die mir verdächtig erschienen und verglich Einstellung für Einstellung der Installationen. Pfade und so waren in Ordnung, aber da gab’s einen Unterschied, der mir schon wahrscheinlich erschien und der auch reproduzierbar den Fehler zeigt:

• URL-Formung hat drei Alternativen
  • Disable URL Rewriting
  • Use Apache errorhandling
  • Use Apache mod_rewrite

Die Einstellung bei einfacher Installation ist Disable, ich hatte wegen etwaiger Pfade und hübscher URLs mod_rewrite eingestellt, vielleicht würde das auf dem Server sogar klappen, denn lokal gibt es meist Schwierigkeiten beim Umschreiben. Jedenfalls kann ich auch bei anderen Installationen den Fehler erzeugen, wenn ich auf mod_rewrite umschalte und das Problem ist weg, wenn ich es anlasse.

Benutzergruppen

Wenn solch eine harmlos aussehende Drop-Down-Box solche Auswirkungen hat, dann fällt mir direkt ein, dass es doch gut wäre die Benutzerrechte einzuschränken. Hier war ich dann sehr angetan, denn wie das Bild zeigt, es gibt eine Rolle, die wirklich nur anzeigt, was jemand zum Schreiben braucht und nicht mit unzähligen Konfigurationsmöglichkeiten überfordert. Einstellbar einfach beim Benutzer anlegen mittels zuweisen der Rolle Redakteur z.B.

Als nächstes gehe ich dann morgen mal suchen, wie ich dem WYSIWYG-Editor abgewöhne die Option der Schriftartänderung anzuzeigen…

• Jeder Artikel hat ein völlig eigenes Design, durchklicken ist faszinierend.
• Auch das neue Outlook soll mit Word als Grundlage (Schreib- und Rendering Engine) Mails versenden. M$ meint, so könnten die Outlook-Nutzer dasselbe sehen, was sie auch schreiben. Das klingt nett, wenn man dabei zu erwähnen vergisst, dass nur andere Outlook-Nutzer die HTML-Mails auch so angezeigt bekommen…
• YALM (Yet Another Linux Magazine) die Juni-Ausgabe hat folgende Themen:
  • GIMP in neun Schritten erweitern
  • Scribus (I): Ein Titelblatt erstellen
  • Office Shoot Out – Teil I
  • Websites mit dem Internet Explorer 6, 7 und 8 unter Linux testen
  • Moblin 2 Beta Preview
  • Video-Tutorials mit Wink
• Webstandards und Kreativität müssen sich nicht ausschließen, schreibt Nils Pooker in einer Kolumne bei Create or Die. Ein schickes Beispiel für Kreativität und Webstandards ist auch Nils’ eigene Seite.
• Verschiedenste Schriften im Web nutzen, über Cufón die Technik, die das ermöglicht, dazu gibt es auch ein WordPress-Plugin.

identica, der Microblogging-Service, stellte eine neue Version online. Morgens ruckelte es zunächst ziemlich, später wackelte nochmals einiges. Unter anderem konnte ich mit identifox, dem Plugin für den Firefox nicht mehr arbeiten.

Doch nach mehrfachem Fragen in der Gruppe !identica kam irgendwann die Lösung gegen die Probleme mit identifox:

• Cookies löschen
• Browser neu starten
• Datei löschen
  • via tioduke
    • XUL.mflasl bei Linux
    • XUL.mfl unter Windows

Gruppen sind eine prima Erfindung, ich kann so themenrelevante Gruppen lesen und bekomme die Nachrichten aller, die mittels !gruppenname dort schreiben. Damit lässt sich eine gute Auswahl treffen.

Bislang gabs bei identi.ca noch nicht die Möglichkeit den Hintergrund des eigenen Profils anzupassen, seit dem 25. 6. geht das jetzt. Ich bin eher langweilig mein identi.ca-Design gleicht stark dem von twitter.

Doch manche packte der Spieltrieb:

maxguat

m1

m1 probierte diverse sich bewegende Hintergrundbilder aus und identica rumpelte wieder heftig. Normalerweise ist identica deutlich stabiler als twitter, aber diese neue Version rumpelte doch ein paarmal. Die Links hier musste ich teils ohne echten Zugriff einfügen, denn beim Artikel schreiben war identica teils wieder weg… Neuerdings gibt es zwei weitere – mich stark beeindruckende – Eigenschaften:

• Ein Dent, also die Nachricht in identica kann Anhänge erhalten
• Nachrichten und ihre Antworten können als Thread betrachtet werden

Mir gefällt vieles an identica besser als an twitter, die Eigenschaften, das offene Format… Deshalb schreibe überwiegend von identica aus und sende nur automatisiert an twitter weiter. Direkte Nachrichten innerhalb von twitter beantworte ich dort und die Mitteilung über neue Blogeinträge geht zur Zeit auch nur zu twitter. Der Vorzug von twitter ist, dass es ganz viele Menschen gibt, die nur dort zu erreichen sind.

Ich habe heute in der Linkliste auf zwei Beiträge zu flexiblen Layouts hingewiesen.

• Flexible Layouts haben ihre Vorzüge, trotz Seitenzoom der Browser
• Ein weiterer Artikel meint es wäre gut nicht über die flexiblen Layouts zu streiten, sondern sie schlicht als Variante zu sehen.
• In obigem Artikel wird auf mehrere Videos zu YAML verlinkt, die gibt es auch als eine Präsentation, direkt bei Galileo

onli kommentierte daraufhin recht ausführlich. Beim Schreiben meiner Antwort fiel mir auf, dass es ein bisschen lang wird, deshalb jetzt als eigenen Artikel. onli schrieb:

“Ich bin über die Diskussionen über flexible Layouts immer wieder überrascht. Denn eigentlich führt die Diskussion am Thema vorbei. Das eigentliche Problem dürfte sein, dass CSS in derzeitiger Form ungeeignet ist für das, was ein dynamisches Layout erfordert. Man kann viele Dinge einfach nicht zuverlässig erreichen, die nötig wären: Elementen eine dynamische Größe zuordnen, aber mehreren Elementen immer die gleiche. Nachbarbeziehungen, die über ein float hinausgehen usw usf. Sicher, ich bin kein Profi, aber es scheint mir so, als sei die Ursache der Diskussion dergestalt, dass einige notwendige Layoutanforderungen mit dynamischen Layouts nicht oder nur schwer umsetzbar sind. Die Antwort sind dann aber nicht pixelgenaue Layouts, sondern Verbesserungen am Handwerkszeug.

Ich werde mir bei Gelegenheit die verlinkten Videos anschauen, vielleicht beinhalten diese ja Konzepte, die meine obige Argumentation ad absurdum führt, weil damit dann alles so umsetzbar ist wie ich es mir vorstelle. “

Ich habe ja schon mal recht ausführlich über flexible Layouts geschrieben, ein paar Bildbeispiele wie sich flexible Layouts auswirken habe ich anlässlich eines Wechsels des Hintergrunds mal beschrieben.

Meines Erachtens sind flexible Layouts nicht schwierig, wenn man von vorne herein flexibel denkt. Das Hauptproblem ist, dass ein Design auf Papier in fester Größe entworfen wird und dann eben häufig auch nicht mehr so einfach flexibel umgesetzt werden kann.

Design bedeutet häufig, es ist ein Entwurf eines Designers, der gestern einen Flyer in A5 entwarf, morgen ein Plakat in A0 und deshalb heute beim Entwurf einer Webseite in 1024*768 denkt. Solche Entwürfe können sehr schwierig umzusetzen sein und sind oft auch nicht flexibel lösbar.

Für mich ist jedoch die Grundlage des Webs, dass ich eben nicht weiß, welches System, welche Auflösung mein Nutzer gerade verwendet, dass ich nicht weiß, ob er Schriftgrößen ändert und und und.

Ich versuche deshalb Layouts von vorne herein so zu erstellen, dass es nicht wichtig ist,welche Voraussetzungen gegeben sind. Leider ist die Tendenz jedoch nach wie vor, das Optimieren auf eine Auflösung und nicht das Erstellen eines anpassungsfähigen Layouts.

Yaml von Dirk Jesse auf das sich die Videos beziehen ist ein Framework, was den Webautoren schon vieles abnimmt. Enthalten sind in Yaml bereits Definitionen um Browserfehler zu umgehen. Es gibt z.B. auch WordPress-Yaml-Themes, die sich recht einfach anpassen lassen, weil vieles eben bereits berücksichtigt wurde. Der Nachteil ist offensichtlich, ein Framework muss alles berücksichtigen und ist deshalb schon ein dickeres Ding.

Ich selbst nutze natürlich auch Vorlagen und fange nicht bei jedem Layout bei 0 an, aber ich nutze kein Framework. Für meine eigen Layouts kenne ich mittlerweile den größten Teil der möglichen Probleme und ihre Lösung.

Im Gegensatz zu fast allen Designern entwerfe ich Layouts nicht auf Papier, auch nicht in einem Bildbearbeitungsprogramm, sondern wirklich live auf einer Testseite. Ich sehe so viel schneller, welche Idee problematisch werden könnte und überlege mir Alternativen, noch bevor das erste Layout fertig ist.

Ist CSS ungeeignet für Layouts?

onli überlegt, ob CSS nicht einfach ungeeignet ist und sich das Handwerkszeug verbessern müsste. Nein, das glaube ich nicht. Das Hauptproblem bei CSS-Layouts ohne Tabellen und in modernem Design ist nicht das CSS. Die Realisierung für standardkonforme Browser wie Firefox, Opera, Safari usw. die ist nicht so schwierig. Es kommt selten vor, dass es spezielle Anpassungen braucht, um ein Layout für diese Browser wie gewünscht zu realisieren. Das eigentliche Problem sind die alten Versionen der Internet Explorer und leider in manchen Fällen sogar der aktuelle IE8.

Manches ist irgendwann bekannt und lässt sich recht schnell auch für die IEs anpassen. Aber immer mal wieder passiert es, dass wegen eines IE-Fehlers Stunden drauf gehen, um eine Lösung zu finden. Microsoft möchte, dass jeder ihrer Browser auch die Seiten korrekt darstellt, die für eine fehlerhafte Vorgängerversion optimiert wurden. Dabei entstehen immer wieder Probleme und noch hat jede IE-Version teils haarsträubende Fehler. Das kommt zwar auch bei anderen Browsern mal vor, nur falls Firefox 2.14 etwas falsch darstellt, dann ist es das heute beim Stand von Firefox 3 nicht so schlimm, denn nur wenige nutzen aktuell diese eine Version, wenn ein Layout trotzdem lesbar bleibt, käme kaum ein Webautor auf die Idee, wegen dieser einen Version etwas zu ändern. Beim IE hält eine Version “ewig” der immer noch stark verbreitete IE6 ist aus dem Jahr 2001, da gab es noch gar keinen Firefox…

Was ist die Lösung für dynamische Layouts?

Die eine ultimative Lösung gibt es nicht. Denn ein modernes Layout mit dem Anspruch das zu zeigen, was heute Stand der Technik ist, das passt zu modernen Browsern. Der IE6 kommt aus einer Zeit als ganz andere Designs entworfen wurden, für die Layouts seiner Zeit war er auch kein Traum, aber noch akzeptabel. Für heutige Layouts ist er einfach ungeeignet und das führt dazu, dass es sehr aufwändig wird, wenn ein besonderes, aktuelles Design umgesetzt werden soll.

Meine Layouts, die nicht darauf aufbauen, dass sie pixelgenaue Linienführungen haben, lassen sich schon deshalb viel einfacher umsetzen. Außerdem habe ich nicht den Anspruch, dass ein Layout in jedem Browser absolut identisch aussieht. Für mich genügt es, wenn alles lesbar ist und die Optik nicht völlig verschoben. Wenn der IE6 das “miradlo bloggt”-Bildle nicht genauso darstellt wie alle anderen, dann ist mir das egal, es ist nicht so hübsch, aber auch nicht kaputt, ich höre an dieser Stelle auf und bastele dann nicht noch Stunden weiter, um mit Tricks und Schlichen eine identische Optik zu bekommen.

Wozu auch? Denn mein sich anpassendes Layout sieht je nach Auflösung sowieso immer ein bisschen anders aus. Für mich ist es wichtig, dass Besucher in etwa ein Design bekommen, was aktuell ist, dass alles lesbar und bedienbar ist und möglichst wenig Scrollbalken hat. Dieses Ziel lässt sich mit CSS und flexiblen Layouts recht gut erreichen.

Manches lässt sich nicht dynamisch und zuverlässig erreichen?

onli fragt sich, ob nicht einfach was fehlt um zuverlässig z.B. Elementen eine dynamische Größe zuzuordnen, aber mehreren Elementen dabei immer die gleiche.

Auch das fällt für mich unter Browserprobleme. Es ist mit standardkonformen Browsern durchaus möglich solche Anforderungen zu erfüllen. Die Grenze dessen ist vor allem der IE6. Für mich kein Grund das nicht zu nutzen, denn ich mag die speziellen Stylesheets die per Conditional Comments z.B. nur genau dem IE6 sagen, was er zu tun hat. Damit bekommt der IE6 dann eben etwas was nicht so flexibel ist, aber für einen Browser der so alt ist, kann ich damit leben.

Falsch finde ich etwas nicht zu nutzen, nur weil der IE6 es nicht kann. Ebenso überflüssig finde ich es Tage in eine Lösung für den IE6 zu investieren, nur um irgendwas auch da noch hinzubekommen. Allerdings halte ich auch nichts davon, “das Kind mit dem Bad auszuschütten” und dem IE6 einfach gar kein Layout und Warnhinweise zu geben. Die Nutzer eines IE6 nehmen ihn entweder, weil er ihnen am Arbeitsplatz vorgeschrieben wird oder weil sie nicht in der Lage oder bereit sind einen anderen Browser zu installieren.

Insgesamt meine ich geht es um genau zwei Punkte:

• Das Web ist nicht aus Papier, ein Layout sollte daher nicht für “welche Auflösung auch immer” optimiert werden
• Eine Webseite muss nicht in jeder Umgebung identisch aussehen

Berücksichtigt man das, dann gibt es kein Problem mit flexiblen Layouts, so einfach ist das.

• Soll ich die Kategorien weiter pflegen?
• Wieso ist Navigation und Funktion miteinander in der gleichen Liste?
• Welches Layout sollte ich nun nutzen?
• Gefällt das alte Design den Kunden mehr als das Neue?

Solche Gedanken hat man ja immer, wenn man eine Webseite neu gestaltet.
Und deshalb bin ich auf folgende Idee gekommen:

Lass doch das Design vom Kunden auswählen

In bestimmten Rahmen kann man sich erlauben zwei- oder drei Designs anzubieten.
Wenn man auf die Seite kommt, erscheint das aktuelle Design.
Wenn man dann ein anderes Design, mit z.B. mehr Funkionalität, haben will, kann man dies auswählen.
Das Design wird gewechselt und der Kunde hat andere Möglichkeiten als zuvor.

Ja aber, dann muss man ja Kundendaten speichern!

Wenn man will, dass der Kunde beim nächsten Mal das gleiche Design vorfindet, muss man mindestens einen Cookie auf der Kundenmaschine abspeichern.
Oder noch komplizierter: Der Kunde muss sich am System anmelden.
Das wäre bei einem normalen Blog oder einer normalen Webseite wirklich ein Overkill.
Ich will einfach nur die Wahlmöglichkeit bereitstellen. Wenn ein Kunde dann das Design wechseln will, soll er hierzu eine Möglichkeit erhalten.
Falls der Kunde Cookies zulässt, kann man immer noch über eine permanente Umstellung nachdenken.

Ist das nicht eine halbherzige Idee?

Ich denke nicht. Es lässt dem Kunden die Freiheit, zwischen verschiedenen Designs auszuwählen.
Vielleicht ist der Kunde heute positiv eingestellt und will eine schöne, leuchtende Darstellung?
Vielleicht will er heute nur Text, da er schnell was suchen muss?
Wenn man sich den Mehraufwand leisten kann, dann wäre es vermutlich eine gute Idee mehr als ein Design zur Verfügung zu haben.

• Briefmarken gesucht? Oder schreibt ihr nur noch elektronisch? Selbst dann gibt s beim tuxlog.de einen Tipp: Briefmarken mit Gimp selbst gestalten. Eine schöne bebilderte Schritt-für-Schritt-Anleitung, entweder mit Hilfe eines Plugins oder mit einem Tipp, wie es auch ohne Plugin geht.
• Layer- und Schatteneffekte per Plugin im Gimp nutzen, mit Installationsanleitung und ausführlicher Beschreibung.
• Wer noch ein bisschen mehr übers Zeichnen lernen wissen möchte, kann sich die im akademie-Blog empfohlene Serie auf akademie.de mal ansehen. Klasse gemachte Animation dazu bereits im Blogbeitrag, schaut selbst…
• Einfach weil die Meldung schon klasse klingt: Hacker im Beirat des US-Heimatschutzministeriums
• WordPress 2.8 kam ja am Donnerstag raus, mittags dann bereits auch in deutscher Version. Wer noch nicht aktualisiert hat und Bedenken wegen genutzter Plugins hat, sollte sich mal die Liste getester Plugins bei WordPress ansehen. Vielleicht kommt es mir nur so vor, aber ich finde es gibt mehr Problemmeldungen bei diesem Update als auch schon. Klar, im Forum gibts auch Hilfe- und Fehleranfragen dazu, die nichts mit WordPress selbst zu tun haben, aber sowas wie 32 MB Memory Limit reichen nicht für WordPress ohne Plugins, na denn…
• Ansonsten war es ja die erste (K)Ubuntu-Woche bei mir/uns. Dirk und Roman berichteten, bei Roman gabs noch den Link zu Wie ich zu Ubuntu kam und warum ich es so mag
• Gefühlt finde ich Ubuntu beim Hochfahren schon nicht so langsam, aber das Ziel ist es in unter zehn Sekunden zu schaffen.
• Wo ist das mobile Webdesign? fragt sich Björn vom Webzeugkoffer, interessant auch ein sehr ausführlicher Kommentar hierzu. Noch nutzen nicht so viele auch mobile Geräte, aber die Nutzerzahlen steigen.
• LinuxAdvanced nicht nur für die Schule Artikel und Links zu EDU-Systemen mit Linux bei RTFM!
• Jeffrey Zeldman geht wieder zurück beim Webdesign und nutzt für die eigene Seite ein Retrodesign.

ZDF neues Design

ZDF Schlagzeilen im alten Design

Eric aka yatil, der das vorige Redesign des ZDF in einem Artikel bei den Webkrauts noch gelobt hatte, schrieb Samstagmorgen bei twitter:

“Wieder eine Vorzeigeseite weg #zdf #heute #bestpractice #410gone”

Ich lese das ZDF per RSS und mir fiel in letzter Zeit schon immer häufiger auf, dass immer mehr Videos und immer weniger Texte angeboten werden. Um Informationen zu bekommen mag ich keine Videos. Immer häufiger las ich daher schon bei tagesschau.de.

Nach Erics Hinweis schaute ich mal auf die Startseite und war entsetzt. Auch in den Foren gab es Kritik zum neuen Design. Mobil scheint es wohl kein so großes Problem zu sein, da es die abgespeckte und mobile Version gibt, wobei manch einer diese wohl bisher nicht nutzte und jetzt enttäuscht ist.

Für mich ist es unverständlich warum jetzt auch eine Informationsseite, wie das ZDF nur noch auf Flashbildchen setzt und nicht mehr auf ein übersichtliches Informationsangebot. Sicherlich nicht alle blocken Flash und manch einer wird auch das neue Design mögen.

Wie im Screenshot zu sehen, ist zumindest bei meinen Einstellungen keine sinnvolle Information mehr zu finden. Klar, habe ich auch mal in einem Browser ohne Flashblocker getestet, leider ist das nicht viel besser. Statt übersichtlicher Informationen lädt zunächst ein Flashvideo mit einem Fernsehprogrammtipp und Links zu weiteren Videos. Am Rande springen die Schlagzeilen durchs Bild, ich hasse solch hopsenden Kram, wenn es schon sich bewegende Inhalte sein müssen, dann doch bitte in einem laufenden Fluss, aber nicht im Sekundenwechsel Gehopse.
Schade, wieder eine Seite die nur noch auf schnelle Bildchen und Videos setzt und nicht auf übersichtliche Inhalte.

Nachtrag am 12.5.

Es gibt jedoch auch Besucher des neuen Auftritts, die ganz begeistert sind und vor allem das moderne und schickere der Seiten loben. Siehe Artikel und Kommentare im Design Tagebuch.

t-online.de

Durch meinen Linktipp kam onli zu einer Seite, bei der er den empfohlenen Text auf seinem Röhrenmonitor nicht lesen konnte. In einem Kommentar zu seinem Beitrag stellte ich die Theorie auf, dass ein Teil schlecht lesbarer Farbwahl an den neuen Designs liegt, die nahezu ausschließlich aus Hintergrundbildern und nicht mehr wie früher aus angegebenen Farben bestehen.

Ich kannte und nutzte lange einige Webseiten und Add-Ons, die überprüften, ob die gewählten Farbkombinationen auch für Menschen mit eingeschränkter Sehfähigkeit noch nutzbar sind. Was ich immernoch bei jedem Layout mache sind zumindest zwei Tests:

Design auf Farbkontraste testen

In einem meiner Browser, die immer teste, habe ich ein recht ungewöhnliches apricot als Hintergrundfarbe eingestellt, damit fällt mir sofort auf, falls ich an einer Stelle vergessen habe, die Hintergrundfarbe zu deaktivieren. Ich nutze den Seamonkey für manches nebenbei, deshalb weiß ich, dass bei weitem nicht alle Webautoren das testen, sehr amüsant finde ich wie schlecht das z.B. bei t-online klappt.

Die Kontraste lassen sich z.B. mit dem Firefox Add-On Colour Contrast Analyser testen. Aber eben leider nur die Kontraste der Hintergrundfarben, das gilt nicht für Hintergrundbilder und ist daher kaum noch für ein Design passend.

Sinnvoll ist immer auch ein kurzer Test mit vischeck.com dort werden die häufigsten Formen von Farbblindheit simuliert, damit fallen ganz unglückliche Farbkombinationen auf. Sinnvoll ist selbst einen Screenshot zu machen, um zu testen, testet man eine Website direkt, fehlen die Hintergrundbilder und der Eindruck ist verfälscht.

Ebenfalls gut ist die Seite von Colorblind Filter dort kann auch noch einiges eingestellt werden.

Website auf Zugänglichkeit testen

Die Accessibility-Toolbar für den Firefox testet vieles, was automatisiert möglich ist, z.B. auch den Farbkontrast auf derselben Grundlage, wie das Farbkontrast-Add-On. Die Toolbar kann jedoch eben nur automatisiert testen, nicht alles was da an Fehlermeldungen oder eben nicht aufgeführt wird, ist tatsächlich relevant. Hier wird beispielsweise ein Fehler angezeigt, weil blogoscoop als Bild eingebunden ist, ohne dieses Bild können jedoch keine Zugriffe gezählt werden, hier nutze ich im Moment ein unsichtbares Bild.

Ich bin nicht so begeistert von der Erweiterung, weil sie zwar viele Tests bietet, aber halt nicht “mitdenken” kann. Ein weiterer gemeldeter Fehler für dieses Blog ist, die h1 auf der Startseite sei nicht identisch mit dem title-Attribut. Ja, stimmt und das wird auch so bleiben, denn dieses Blog hat einen title für die Startseite, der etwas ausführlicher ist, als das Logo, welches hier innerhalb der h1 liegt. Manche Erklärung für einen angegebenen Fehler sagt mir keineswegs in für mich verständlicher Form, was das Problem ist. Ich habe schon einiges Wissen zu diesem Thema, sicherlich mehr als viele Webautoren, aber für manchen Hinweis reicht das nicht aus. Aus meiner Sicht sollte eine solche Toolbar jedoch so klare Meldungen bringen, dass auch weniger versierte Webautoren zumindest verstehen was gemeint ist.

Layout ohne Grafiken testen

• miradlo bloggt ohne Grafiken

Mit der Webdeveloper-Toolbar, die ich in Firefox und Seamonkey installiert habe, lässt sich eine Website ohne Grafiken anzeigen (für den IE gibt was ähnliches). Das zweite Bild zeigt dieses Blog ohne Grafiken. An diesem Beispiel sieht man, worauf ich achte, wenn ich Bilder für ein Layout einsetze:

Die Hintergrundfarben aller Bereiche sind angelehnt an die Farbe der Layoutbilder, die Vorteile:

• die Optik nicht mehr ganz so schick, aber noch immer sehr ähnlich
• ganz schlecht lesbare Farbkombinationen fallen auf
• falls die Seite mal langsam lädt, fällt es kaum auf, weil die Farben eben sehr ähnlich sind
• wer ganz ohne Grafiken surft bekommt trotzdem noch ein lesbares Design

Fazit der Farbkombinationen

Auch nach nochmaliger Recherche konnte ich nichts finden, mit dem sich auch Farbkombinationen von Hintergrundbildern und Text testen lassen. Damit gibt es eben keine Alternative für aktuelle Designs, die auf Farbverlaufsbildern basieren, mit Transparenzen arbeiten oder ähnlichem.

Ich meine das Bewusstsein, dass Webseiten in erster Linie lesbar sein sollten, hat sich noch bei weitem nicht durchgesetzt. Außerdem wird von vielen Webautoren zuwenig getestet. Doch es fehlt auch an automatisierten Tests und die Werkzeuge die solche Tests erlauben sind häufig nicht verständlich.

Layoutfarben aus der Headergrafik

Als Nicht-Grafikerin, die aus der Informatik kommt, ist mir Design ja schon von vorne herein nicht ganz so wichtig. Für völlig abgefahrene Traumentwürfe bin ich daher auch nicht die Richtige. Mir würde schon die Geduld fehlen unzählige Farbkombinationen auszuprobieren, aber mir fällt auf, wenn etwas gar nicht zusammenpasst.

Um vorm Erstellen eines Layouts die ersten Ideen zu bekommen, gibt es Hilfsmittel.

Erweiterungen, Plugins oder ähnliches die den Kontrast von Farbkombinationen auf Webseiten prüfen, haben meines Erachtens weitgehend ausgedient, falls sie nicht auch Farben aus Bildern hinzuziehen. Denn inzwischen gibt es kaum ein Design, was nicht mittels Hintergrundbildern erstellt wird. Schließlich soll hier und da noch ein Schatten, ein Transparenzeffekt ein Farbverlauf oder ähnliches genutzt werden. Ich kenne derzeit kein Hilfsmittel, was auch mit den Farben eines Bilds etwas anfangen kann. Falls es automatisiert nicht möglich ist, ist es sinnvoll auf verschiedenen Monitoren und auch mal mit abgedunkeltem Modus zu testen, um festzustellen, ob der Kontrast immer lesbar bleibt.

Um eigene Farbideen mal nebeneinander zu sehen, mag ich ColorCombos.

Kombinationen, die laut Farbwerten zueinander passen, lassen sich sehr schön mit dem Color Scheme Generator finden.

Wenn möglich nutze ich zum Logo passende Farben und wähle genau die, die auch im Logo enthalten sind, z.B. beim Guggat emol Blog, das Logo entstand aus den Farben von Diagrammen, die Farben fürs Blog kamen aus dem Logo.

Meine Lieblingsversion, um Farbzusammenstellungen zu finden, sind jedoch Fotos. Wie solche Kombinationen aussehen können zeigen die Beispiele für Farbkombinationen aus Fotos. Ein Beispiel für eine Farbzusammenstellung aus Fotos im Header ist das Layout von Rüdigers Seite auf dem Screenshot.

Wann immer es ein Design mit Bild im Kopfbereich, also einer Headergrafik ist, nehme ich mir die Farben aus dem Foto. Stimmiger und passender geht es aus meiner Sicht gar nicht. Wer gerade erst beginnt mit Layouts zu experimentieren ist mit dieser Variante auf der sicheren Seite und kann wenig falsch machen.