• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2
aA :  -   + pdf Infos Unsubscribe

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Tuesday, 19 Aug 2014 05:32

Lange tat sich nichts Sichtbares bei Compass, der großen Mixin-Bibliothek für Sass. Es gab eine lange Phase mit Beta-Versionen der kommenden neuen Version 1.0, mehr aber auch nicht. Und selbst als Sass 3.3 erschien, war die neue Compass-Version noch nicht veröffentlicht.

Nun aber wurde vor ein paar Tagen Compass 1.0 veröffentlicht, und gestern kam Sass mit Version 3.4 nach. Mal schauen, wann ich die Zeit finde, die neuen Features zu lesen, zu begreifen und vielleicht sogar in meinen Workflow einzubauen. Wobei ich von Compass mittlerweile nur noch die Bilderfunktionen nutze. Aber das genügt ja auch.

Author: "Jens Grochtdreis" Tags: "SASS"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 18 Aug 2014 06:28

Steve Faulkner sagt uns, was WAI-ARIA nicht tut. Es macht beispielsweise aus einem zum Link umformatierten DIV keinen echten Link mit eingebauter Tastaturunterstützung uvm. . Zum Thema lohnt sich auch der Einstieg von Jan Eric Hellbusch.

Hast Du gedacht, Du wärst von der Werbeindustrie nicht mehr identifizierbar, wenn Du möglichst viele Cookies löschst und ein paar Browser-Plugins installierst? Ist leider nicht so. Die Electronic Frontier Foundatin bietet zu diesem Thema eine Testseite. Die zeigt sehr schön, dass ich sehr wohl mit meinen speziellen Systemkonfigurationen aus der Masse heraussteche. Man kann auch Canvas zur Identifizierung eines Browsers nutzen.

Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 15 Aug 2014 06:26

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.

Man kann Tic-Tac-Toe mit CSS realisieren, ohne die Hilfe von JavaScript. Man muss es aber nicht. Ich finde solche Experimente immer sehr grenzwertig. Sie verdrehen den Fokus von CSS. Wer Spiele spielen will, der soll doch einfach JS nutzen. Eine großen Nutzen haben solche Experimente allerdings: sie zeigen Strategien auf, die man evtl. abgewandelt auch für richtige Webseiten nutzen kann. Hier ist es der kreative Umgang mit dem z-index. Der führt allerdings auch zu einem Aufblähen des HTML. Das wäre mit JS vollkommen unnötig.

Bist Du Gulp-Nutzer und möchtest Dir Dein Gulpfile visuell zusammenbasteln? Mit Gulpfiction geht das.

Author: "Jens Grochtdreis" Tags: "Linklisten, Webdesign"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 13 Aug 2014 06:30
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 11 Aug 2014 06:30
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 08 Aug 2014 10:30

An Alphabet of Accessibility Issues” bietet für jeden Buchstaben des Alphabets ein anderes Accessibility-Problem an. Eine sehr interessante Methode, sich dem Thema zu nähern.

Dayle Rees hat für eine große Menge Editoren Farbschemata gesammelt und stellt sie via Github zur Verfügung. Auf einer Beispielseite kann man sich die diversen Themes anschauen. Ich habe den Eindruck, es gibt fast nur dunkle Themes.

Author: "Jens Grochtdreis" Tags: "Barrierefreiheit, Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 08 Aug 2014 06:30

Auch in der zweiten Jahreshälfte werde ich wieder auf Konferenzen sprechen und längere Schulungen geben. Neben den hier im Anschluss genannten öffentlichen Terminen gebe ich auch immer wieder inhouse Schulungen in Agenturen und Firmen. Ich biete ein breites thematisches Portfolio an, aus dem man sich gerne seine Wunsch-Schulung zusammenstellen kann.

Am 3. Oktober darf ich bei den Digitalvisions in Wien sprechen. Ich werde über modulare Webentwicklung sprechen. Dabei konzentriere ich mich vor allem auf Systeme der Klassenbenamungen (OOCSS, BEM und SMACSS) und auf die Organsisation mittels Sass. Es gibt noch Karten!

Vom 13. bis 15. Oktober finden in Berlin die HTML5-Days zusammen mit den JavaScript-Days statt. Ich war an der Programmplanung beteiligt und werde selber drei halbtägige Workshops/Schulungen beisteuern. Ich fange an mit “Spielerei mit CSS3“, gehe dann über zu “Modulare Webentwicklung mit Sass” und ende am dritten Tag mit “Responsive Webdesign“. Bis zum 12. September gibt es die Tickets noch zum Early-Bird-Tarif.

Vom 26. bis 19. Oktober wird wieder die Webtech in München sein. Ich werde dort über “Neue Kleider, alter Ärger: Responsive Webdesign vs. Barrierefreiheit ” sprechen. Leider ist noch kein Sessionplan veröffentlicht. Bis zum 28. August gibt es die Tickets übrigens noch zum Frühbucher-Tarif.

Und Anfang Dezember ist eine Neuauflage der “HTML5-MasterClass” zusammen mit Peter Kröner geplant. Aber es ist noch nichts fest gemacht, deshalb soll dies nur eine lose Ankündigung sein.

Author: "Jens Grochtdreis" Tags: "In eigener Sache, Veranstaltungen"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 07 Aug 2014 06:17

“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.

Author: "Jens Grochtdreis" Tags: "Vermischtes, Webdesign"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 06 Aug 2014 06:26

An einer Bemerkung von Tom Arnold auf Twitter entspann sich ein interessanter Austausch von Tweets. Sein Heckenschneiden wurde so behandelt, als befände man sich in Verhandlungen zu Webdesign. Ich kann von Glück sagen, dass ich solche Gespräche nie geführt habe, Freunde berichten mir aber in buntesten Farben von exakt solchen Dialogen. Ich habe die Tweets in Storify zum besseren Nachlesen zusammengestellt.

Tom hat mittlerweile seine eigene Tweet-Liste verbloggt. Die Auswahl differiert von meiner, ist also auch durchaus eine Leseempfehlung.

Author: "Jens Grochtdreis" Tags: "Vermischtes"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 04 Aug 2014 06:30
  • Fritz Weisshart weist in seinem Blog auf den seiner Meinung sehr empfehlenswerten Videoplayer “Able Player” hin. Sein Fokus liegt dabei auf Barrierefreiheit. Einen Test ist es wert.
  • In einem anderen Artikel thematisiert Fritz das Herausschieben von Inhalt aus dem visuellen Bereich, damit nur Screenreadernutzer diesen Inhalt bekommen. Offenbar hat unser bisheriges Best-Practice-Verfahren einen unerwünschten Nebeneffekt auf dem iPhone mit Voice-Over. WebAIM empfiehlt eine kleine Detailänderung.
  • Noch ausführlicher hat sich Jan Eric Hellbusch mit den unterschiedlichen Möglichkeiten, Inhalte aus dem Viewport zu verschieben, beschäftigt. Ein sehr interessanter Artikel.
  • Hugo Giraudel ist ein Tausendsassa in Sachen Sass. Wöchentlich erscheint mindestens ein neuer Artikel irgendwo von ihm. Jetzt hat Hugo eine lange Liste mit Sass-Links veröffentlicht, die zum großen Teil zu seinen Artikeln weisen. Es sind auch eine Menge Links zu Codepen und zu interessanten Sass-Projekten. Für Sass-Fans ist da sicherlich eine Menge zu entdecken.
  • Todd Motto hat eine Mikro-Template-Engine für JavaScript veröffentlicht. Es sind nur ein paar wenige Zeilen Code. Sowas hätte ich gerne für PHP.
Author: "Jens Grochtdreis" Tags: "Barrierefreiheit, Javascript, Linklisten..."
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 31 Jul 2014 06:51
Author: "Jens Grochtdreis" Tags: "Linklisten, Webdesign"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 30 Jul 2014 06:40
  • Da nutzt mal jemand Tumblr für etwas Sinnvolles und gibt “Accessibility-Tips“. Und da das Endlos-Scrolling ausgeschaltet ist, muss man sich über den Menüpunkt “Overview” selber einen Überblick über die bisherigen Themen schaffen.
  • Und wer noch ein wenig Musse hat, der kann sich durch einen unattraktiven Textwust beim W3C über Barrierefreiheit kämpfen. Trotz des schlichten Äußeren sind die “Accessibility Basics” durchaus lesenswert.
  • Das W3C gibt weiterhin Tips für “Accessibility Testing” – ebenso im unattraktiven Standards-Wiki-Outfit.
  • Die Filament Group beschreibt, wie man Iconfonts barrierefrei einsetzen kann.
  • Den Grunt-Task “grunt-accessibility” habe ich schonmal in einem Projekt eingesetzt und war sehr angetan.
Author: "Jens Grochtdreis" Tags: "Barrierefreiheit, Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 28 Jul 2014 06:23
  • Von der diesjährigen Beyond Tellerrand sind bislang vier Videos auf Vimeo veröffentlicht. Darunter befindet sich auch der schlechte Vortrag von Erik Spiekermann, den ich niemandem empfehlen kann. Der Vortrag von Chris Coyier hingegen über SVG ist unbedingt empfehlenswert.
  • Die Videos der HTML5-DevConf
  • SeeMe ist ein Wörterbuch für Gebärdensprache. Man kann sich in sehr kurzen Videos ein Wort nach dem anderen zeigen lassen. Damit hat man die Gebärdensprache zwar nicht gelernt, beginnt aber deren Komplexität langsam zu erkennen. Sehr interessant!
  • Interesse am Gridsystem “Susy”? Dazu gibt es eine elfteilige Serie von Videotutorials.
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 25 Jul 2014 06:24
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 23 Jul 2014 06:00
Author: "Jens Grochtdreis" Tags: "HTML5, Javascript, Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 21 Jul 2014 06:30
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 18 Jul 2014 10:08

Kurz nach der Veröffentlichung des gestrigen Artikels über die markierte Headline gingen Reaktionen über Twitter, später auch in den Kommentaren des Beitrags ein. Darin wurden andere Lösungsvorschläge gemacht. Ich habe diese im Folgenden dokumentiert und jedem Vorschlag einen eigenen Codepen spendiert.

Der Sinn der gestrigen Übung war nicht, eine ideale Lösung vorzuschlagen. Dafür müsste ich auch Vorschläge für Mediaqueries machen. Doch dieses Detail kann jeder individuell im eigenen Projekt relativ simpel umsetzen. Ich wollte eine bessere Lösung zeigen, die nicht darauf baut, dass eine Überschrift sinnloserweise in drei Überschriften getrennt wird.

Ich finde die Ansätze interessant. Aber nicht jeder hatte offenbar die Limitierungen seines Ansatzes im Blick. Ich habe den Eindruck, es ging im Wesentlichen darum, die BR-Elemente wegzubekommen.

Mein Vorschlag

Durch die Nutzung der BR-Elemente kann ich den Zeilenumbruch direkt steuern. Es ist ein Element, das Redakteuere instinktiv verstehen und viel mehr lieben, als wir mögen. Aber die zusätzliche Formatierung mit SPAN-Elementen macht die Umsetzung in einem CMS durch Redakteure schwieriger.

See the Pen marked headline – example 1 by Jens Grochtdreis (@jensgro) on CodePen.

Die ausgelassene Version

Ich hatte bewußt eine Version mit Floats ausgelassen. Denn wenn die Agentur schon ein solches HTML-Chaos anrichtet, wie groß ist dann die Chance, dass Floating und Clearing verstanden wurden?

Wichtig ist bei dieser Lösung, dass die nachfolgenden SPAN-Elemente immer den vorherigen Float clearen. So wird ein Umbruch erzeugt, der dem BR gleich kommt. Wichtig ist zudem, die Überschrift ihre floatenden Kinder umfassen zu lassen. Das habe ich hier mit overflow:hidden gelöst. Ich hätte auch den Clearfix nehmen können.

See the Pen marked headline – example 2 by Jens Grochtdreis (@jensgro) on CodePen.

Vorschlag von Dennis Frank

Dieses Beispiel funktioniert nur, weil Dennis die Breite des umgebenden Containers – in seinem Beispiel BODY – beschränkt hat. Also muss für den Realitätscheck ein Wrapper-Container drum, der eine Breite vorgibt, damit die Worte an den richtigen Stellen umbrechen.

See the Pen marked headline – example 3 by Jens Grochtdreis (@jensgro) on CodePen.

Vorschlag von Marc Hinse

Diese Version ist wegen der doppelt verschachtelten SPAN-Elemente besser in einem CMS umsetzbar. Sie kommen einfach ins Template. Allerdings ist die Lösung von einem umgebenden Container abhängig, dem eine Breite gegeben wird. Diese Breite steuert dann den Umbruch. Das Ergebnis ist also zufällig das gleiche wie bei meinem Vorschlag. Es ist aber nicht individuell kontrollierbar. Zudem hängt die Überschrift links aussen und lässt sich dort auch nur schwer wegbewegen. Das CSS ist nicht einfach konfigurierbar und muss in seiner Mechanik unbedingt dokumentiert werden.

See the Pen marked headline – example 4 by Jens Grochtdreis (@jensgro) on CodePen.

Lösung von Tom Arnold

Auch diese Lösung kommt nur mit einem umfassenden Container aus. Ursprünglich stand noch eine Breite von 50% im CSS. Dabei ist aber das Endergebnis bei kleineren Breiten sehr schlecht, weil keine Mindestbreite erwähnt wird. Immerhin muss diese Lösung nicht mit Positionierungsproblemen, wie die von Marc leben. Von meiner Lösung unterscheidet sie sich nur durch die fehlenden BR-Elemente. Allerdings kommt sie auch weniger solide daher und benötigt eine separaten Wrapper-Container.

See the Pen marked headline – example 5 by Jens Grochtdreis (@jensgro) on CodePen.

Lösung von Dennis Erdmann

Dennis Erdmann wies mich auf ein ähnlich formatiertes Element innerhalb der Slider bei der Segeberger Kliniken Gruppe hin. Es handelt sich dabei um Zitate, keine Überschriften. Ich habe die dahinterliegende Idee auf die Überschriften transportiert.

Diese Lösung kommt wieder mit zwei ineinander verschachtelten SPAN-Elementen, hat einen Wrapper-Container, der die Breite und damit den Umbruch vorgibt und hat ein leichtes Positionierungsproblem, weil die Überschrift links rausragt.

See the Pen marked headline – example 6 by Jens Grochtdreis (@jensgro) on CodePen.

Vorschlag von Fabian Beiner

Fabian machte einen Vorschlag in den Kommentaren zum Artikel, der nur auf zwei Eigenschaften beruht. Das Ergebnis finde ich charmant. So kann ich auf die BR-Elemente verzichten.

See the Pen marked headline – example 7 by Jens Grochtdreis (@jensgro) on CodePen.

Vorschlag von Tomas Caspers

Der Vorschlag von Tomas verbessert den von Fabian in der Weise, dass nur noch eine Regel notwendig ist. Mein Favorit! Aber wir kommen nicht um die SPAN-Elemente herum.

See the Pen marked headline – example 8 by Jens Grochtdreis (@jensgro) on CodePen.

Author: "Jens Grochtdreis" Tags: "CSS und XHTML"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 18 Jul 2014 06:30
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 17 Jul 2014 06:37

HTML und die Semantik einer Seite ist die eine Seite der Medaille. Wir können uns viel Mühe bei der Strukturierung unserer Inhalte geben, die Seite wird erst durch pfiffige Designideen zu einem Hingucker. Erst die Optik weckt unser Interesse an den Inhalten richtig.

Es kann immer wieder vorkommen, dass wir bei der Auszeichnung einzelner Inhalte zweifeln, welche Semantik die korrekte ist. Ich empfehle zudem immer, nur so viele Tags wie notwendig zu nutzen. Und die “Notwendigkeit” ist immer wieder ein Knackpunkt. Denn zahlreiche Designideen sind nicht mit einfachen Mitteln zu realisieren. Oft muss man Extra-Code schreiben, um das gewünschte Ergebnis zu erzielen.

Früher hat es mich immer wieder geärgert, wenn ich aus optischen Gründen “mein” HTML aufblähen musste. Das hat wohl mehr mit Entwicklerstolz als mit allem anderen zu tun. Denn ein zusätzliches DIV oder SPAN interessiert weder eine Suchmaschine, noch einen Screenreader. Und wir sehende Nutzer haben sowieso keine Verbindung zum Quellcode, also kann er uns egal sein.

Mittlerweile habe ich weniger Problem damit, Extra-Code für einen optischen Effekt zu schreiben. Aber es sollte sich im sinnvollen Rahmen halten. Ich bin nun über ein Beispiel gestolpert, bei dem der sinnvolle Rahmen m.E. gesprengt wurde und die naheliegende, saubere Lösung nicht gesucht wurde.

Die Seite “fussball.de” wird demnächst einen Relaunch erleben. Zu diesem Zweck gibt es eine Infoseite, die mit einem netten Design aufwartet. Die Überschriften haben einen Hintergrund bekommen, der an einen Textmarker erinnert. Dieses Designdetail kommt vor allem im Print immer wieder vor und ist recht beliebt. Lassen wir Geschmacksfragen einmal beiseite, stellt sich die Herausforderung, diese Optik auch im Internet zu realisieren.

Die Herausforderung: eine Headline mit Marker-Hintergrund

Die Überschrift ist also in drei Teile geteilt und die Hintergrundfarben sind immer nur so breit, wie der jeweilige Teil der Überschrift. Der von der Agentur erdachte Code ist dafür denkbar schlecht gewählt. Alle drei Teile sind separate, übereinander verschachtelte Überschriften. Diese befinden sich nicht einmal auf der gleichen Ebene, sondern sind immer in DIV-Container geschachtelt.

Schauen wir uns die Herausforderung einmal genauer an:

  1. Wir benötigen eine Lösung, bei der die Überschrift in zwei oder mehr Teile geteilt werden kann.
  2. Diese Teile sollen einen Hintergrund bekommen.
  3. Der Hintergrund läuft nur so weit, wie der Text läuft.
  4. Der Text hat in alle vier Richtungen Padding.

Ich möchte bei der Lösung dieser Aufgabe die Überschrift nicht aufteilen. Denn es handelt sich schliesslich nicht um drei Überschriften, sondern nur um eine. Ich kann akzeptieren, extra HTML für ein Designergebnis zu schreiben. Dabei sollte aber die Semantik der Seite nicht beeinträchtigt werden. Also umfasse ich alle drei Überschriftsbestandteile mit einem SPAN. Dies nutze ich, um die Hintergrundmarkierung zu realisieren. Es läge jetzt nahe, die SPANs als Blockelemente zu formatieren. Allerdings würden dann die Hintergründe so breit laufen, wie die Überschrift Platz hat. Und alle Markierungen wären gleich breit.

Da der Text aber in alle vier Richtungen ein Padding haben soll, muss ich die SPANs zumindest als Inline-Block-Elemente formatieren. Die gewünschten Zeilenumbrüche realisiere ich dann mit dem BR-Element, das genau für diesen Zweck da ist. Ich vergesse nur gerne, dass es BR gibt.

See the Pen Headline mit Marker-Hintergrund by Jens Grochtdreis (@jensgro) on CodePen.

Das Ergbnis ist nicht so pur und rein, wie ich es gerne hätte. Aber das Designziel ist erreicht, ohne dabei mein HTML zerstört zu haben. Und das ist ein gutes Ergebnis. Ich wünschte, die Entwickler von fussball.de hätten ein wenig über das Designproblem nachgedacht, dann wären sie sicher zum gleichen Ergbenis gekommen.

Author: "Jens Grochtdreis" Tags: "CSS und XHTML"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 16 Jul 2014 06:30
  • PleaseJS erstellt Zufallsfarben unterschiedlichster Art. Insbesondere für die Suche nach der richtigen Inspiration kann das recht nützlich sein.
  • grunt-photobox macht Screenshots von Webseiten und vergleicht unterschiedliche Entwicklungsstände. Man kann auch nur einzelne Bestandteile der Webseite fotografieren.
  • Hugo Giraudel hat mit SassDoc ein Dokumentationstool für Sass-Files erstellt. Es orientiert sich an den bekannten JSDoc, JavaDoc usw. Mittlerweile gibt es auch Zusatztools zu SassDoc. Ich habe SassDoc mal getestet: es lässt sich problemlos einrichten und erzeugt sehr schnell ein Ergebnis. Man muss allerdings seine Kommentare dementsprechend gestalten.
  • CSS-Colorguard ist ein node.js-Tool, das Farben eines CSS auf Ähnlichkeit überprüft und Warnungen ausspricht. Die Plugins für Grunt, Brokkoli und Gulp sind im Projekt selber verlinkt. Leider kann man nur CSS-Dateien überprüfen, keine SCSS-Dateien. Das scheint auch nicht angedacht zu sein.
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader