Lightboxen sterben nicht aus. Da ist es nicht falsch, sich über eine qualitativ gute Lightbox Gedanken zu machen: Making Modal Windows Better For Everyone
Da Karusselle nicht aussterben wollen, kann man sich ja mal Gedanken über „gute“ Karusselle machen: Are Web Carousels Out? (7 Tips for Mobile & Desktop Optimization)
Andrew Ckor beschreibt, wie man mittels der Einheit „vh“ viewportfüllende Designs ohne eine Zeile JavaScript erstellen kann. Er unterfüttert seine Ausführungen mit guten und bekannten Beispielen.
Die Einheit wird ab IE9 unterstützt. Für den IE8 benötigen wir entweder einen Polyfill, eine JavaScript-Funktion oder wir geben einfach im Geiste von Graceful Degredation diesem Browser ein leicht anderes Design. Der IE9 hat allerdings einen üblen Bug: in Printstylesheets werden aus „90vh“, also der 90%igen Viewporthöhe, einfach mal „90 Seiten“. Die IE-Entwickler haben einen schrägen Humor! (Auf der verlinkten Seite im Reiter „Known Issues“ schauen.)
Vernünftige Farben und Farbpaletten für ein Design zu finden ist sicher nicht einfach. Wie wäre es mit der Erstellung einer Farbpalette? Da wäre auch noch der schon etwas ältere, aber sehr schnelle „Color Schemer Online v2„. Adobe bietet mit Kuler in dieser Richtung auch etwas an. Die Bedienung scheint mir nur nicht so intuitiv zu sein. Oder ist einer Liste der Hauptfarben bekannter Webseiten interessant? Gibt es auch in einer anderen Variante. Und wenn man selber eine Farbpalette aus einer Bilddatei erstellen lassen möchte, dann kann man das bei Pictaculous tun.
„Ist es komplex, mache es einfach.“ Dieser gute Rat steht im Blog der Webseiten der Britischen Regierung. Für die Regierungsseiten wurde eine Guideline für Inhalte veröffentlicht, die sich sogar um barrierefreie PDF sorgt.
In einem erklärenden Artikel heben die Autoren nun darauf ab, warum Sätze möglichst unter 25 Worte haben sollten. Ideal scheint eine Länge von etwa 11 Worten zu sein. Es wird zudem darauf verwiesen, dass die Texte möglichst einfach gehalten werden sollten, wenig Jargon und Fachvokalubar enthalten sollten. Die Guideline für Inhalte ist Teil der umfassenden „Design Principles“ der Regierungsseiten.
Durch Zufall bin ich auf zwei Artikel in einem kanadischen Blog gestossen. Beide befassen sich mit der These, dass weniger durchaus mehr sein kann, speziell wenn es um Design geht. Der Autor nimmt sich Tabellen und Datenvisualisierungen vor. Die Wandlungen von der Variante mit viel optischem Balast zur übersichtlichen, klaren Version wird anhand animierter GIFs visualisiert. Man kann sich aber glücklicherweise immer auch eine PDF-Präsentation mitnehmen, in denen die einzelnen Schritte dokumentiert sind.
„Lorem Ipsum gone wrong“ zeigt „gute“ Beispiele, warum man erst den Inhalt haben sollte, bevor man designt. Blindtexte können nach hinten losgehen. Aber es ist aller Erfahrung nach schwer, Kunden das zu erklären. Hat was vom Kampf gegen Windmühlen.
Anna Debenham schreibt über die neue Pattern Library von A List Apart. Ein interessanter Artikel und ein noch viel interessanteres Projekt. Es wurde auch für den Styleguide von Code for America genutzt. Den sollte sich jeder mal anschauen. Toller Code und schöne Gestaltung.
Weiterlesen
Welcher Browser unter welchem Betriebssystem unterstützt welche Unicode Zeichen? Wenn man sich diese Ergebnisse so anschaut, dann sollte man wohl von Unicode-Zeichen im Webdesign die Finger lassen. Das Projekt hat noch mehr Features, als nur diese sehr komplexe Liste darzustellen.
Weiterlesen
Hin und wieder kann es vorkommen, dass man erklärende Infos zu einem Navigationspunkt weitergeben möchte. Oder einfach noch ein wenig Werbung für die zu erwartenden Inhalte machen will. Das kann man prima ohne JavaScript mit ein wenig CSS erreichen. Ich habe drei unterschiedliche Varianten in einem Codepen zusammengestellt. Als Basis für die Gestaltung habe ich die Standard-Dateien von YAML – meinem bevorzugten Framework – genutzt. Schliesslich kommt es im Wesentlichen auf die Umsetzung der Funktionalität, nicht auf das konkrete Design an.
See the Pen Navigation with additional infos on hover – stripped down by Jens Grochtdreis (@jensgro) on CodePen
In allen drei Varianten wird beim Überfahren des Listenelementes – nicht des darin enthaltenen Links – ein zusätzlicher Text eingeblendet. Ich habe diesen mittels der YAML-Klasse ym-hideme aus dem Viewport geschoben und nicht mittels display: none ausgeblendet. Dadurch ist der Zusatztext Screenreadernutzern grundsätzlich zugänglich. Es geht hier ja nur um einen visuellen Effekt. Diese Klasse arbeitet mit position:absolute, um den zu versteckenden Text aus der Sicht zu schieben. Und hier setzt der Unterschied der ersten beiden Vorschläge an.
Denn beim Überfahren eines Listenelements werden die Positionierungskoordinaten des Zusatztextes verändert. left: 100% sorgt dafür, dass der Zusatztext direkt an die Navigation anschliesst. Der Verzicht auf einen Pixelwert macht die Lösung flexibel. Sie kann in fixen, aber auch in fluiden oder responsiven Layouts eingesetzt werden. Durch die absolute Positionierung ist der Orientierungsrahmen wichtig. Ein absolut positioniertes Element orientiert sich nach dem nächsten Elternelement, dass eine andere Positionierung als static hat. Elegant löst man dieses Problem meist mit position: relative.
In der ersten Varianten wird der Liste position:relative zugewiesen, in der zweiten Variante ist es das Listenelement selber. So hängt in der ersten Variante der Text also immer ob an der Navigation. Das lohnt sich speziell für längere Texte. Bei der zweiten Version hängt der Text direkt am Navigationspunkt und macht so seine Zugehörigkeit für die Nutzer sehr deutlich. Die dritte Version ist komplett anders. Hier realisiere ich durch left: 0 und einem position: relative auch für den eingeblendeten Container, dass der Text direkt unter innerhalb der Navigation als Ergänzung zum Navigationspunkt erscheint.
Um das Einblenden ein wenig angenehmer zu gestalten, habe ich Transitions genutzt. Alte IE werden diese nicht anzeigen, das Ausklappen funktioniert trotzdem. Wegen der Animation war es mir wichtig, die Hintergrundfarbe nicht wie bei den anderen beiden Lösungen auf den Zusatztext zu legen, sondern auf das aktivierte Listenelement. So gibt es keine leichte Verzögerung, bis man die Hintergrundfarbe sieht, die Animation wirkt dadurch viel angenehmer.
Wen der SCSS-Code nicht interessiert, der kann sich auch das resultierende CSS leicht anschauen. Einfach am rechten unteren Ende des SCSS-Tabs auf „View Compiled“ klicken und das resultierende CSS wird angezeigt. Alternativ auf „Edit und Codepen“ klicken und dann im CSS-Tab auf das Wort „CSS“ klicken. Auch dann wird das SCSS in CSS umgewandelt.
Übrigens habe ich auch eine Seite erstellt, die die Techniken im Zusammenhang eines Gridsystems zeigen. Denn es stellt sich ja die Frage, ob die nach rechts ausragenden Layer nicht mit anderen Informationen auf der Seite kollidieren. Der Praxistest zeigt, dass da kein Problem entsteht.