• 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, 22 Apr 2014 07:46
Author: "Jens Grochtdreis" Tags: "CSS3, Linklisten, Responsive Webdesign"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 17 Apr 2014 12:47

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.

Im Artikel “Data looks better naked” wird uns gezeigt, wieviel besser Daten aufbereitet aussehen, wenn man die vielen unnützen optischen Weichmacher weglässt. Konzentration auf das Wesentliche, könnte man sagen.

Den gleichen minimalistischen Ansatz gibt es auch für Tabellen: “Clear off the table“. Auch hier wird die Wandlung wieder sehr schön deutlich gemacht, indem man sie in einem animierten GIF sieht.

Author: "Jens Grochtdreis" Tags: "Webdesign"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 14 Apr 2014 07:30
  • John Ferris beschreibt, wie im irgendwann demnächst kommenden Compass 1.0 die Sonderversionen für Legacy-Browser gehandhabt werden: der Browser-Support wird anders ausgewählt und angesprochen. Es soll wohl eine direkte Anbindung an “Can I Use” geben. Ich finde den gewählten Ansatz gut. Ich muss allerdings auch bekennen, dass ich Compass in dieser Form nie genutzt habe. Ich habe mir immer meine eigenen CSS3-Mixins geschrieben.
  • Ein guter Freund ist Vim-Fan. Ich halte mich gerne aus Editor-Diskussionen heraus, möchte aber nicht versäumen einen aktuellen Artikel zum Thema zu verbreiten: Vim is better. Ich bleibe trotzdem bei Textmate :-)
  • Beim RWD-Summit, einer Online-Konferenz, gab es auch eine Session zu responsiven HTML-E-Mails. Es liegt jetzt ein ausführlicher Artikel über diese Session vor. Darin ist auch eine Linkliste zum Thema verlinkt.
Author: "Jens Grochtdreis" Tags: "Linklisten, SASS"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 11 Apr 2014 07:35
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 10 Apr 2014 06:49
  • Mit den Dev-Tools von Firefox kann man im Responsive-Modus Screenshots machen! Toller Tip von Chris Heilmann, der auf einen kurzen Film bei Youtube verweist.
  • Snap.svg ist eine kostenlose JavaScript-Bibliothek, die den Umgang mit SVG-Grafiken erleichtern sollen. Die Demos zeigen vor allem die Animationsfähigkeiten. Die Bibliothek unterstützt nur moderne Browser, was auf der IE-Front bedeutet, dass IE8 und früher nicht darunter fallen. Wer diese auch unterstützen will/muss, sollte Raphaël nutzen.
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 08 Apr 2014 07:30

Am gestrigen Montag haben wir Webkrauts eine neue Webworker-Umfrage gestartet. Vor sechs Jahren versuchten wir erstmals, uns ein Bild von unserer Branche zu machen. Jetzt endlich kommt die Folgebefragung. Die Umfrage richtet sich an alle, die professionell im und für das Internet arbeiten, nicht nur Entwickler.

Am Ende werden wir nicht nur die Fragen auswerten, sondern auch die Rohdaten für eigene Analysen zur Verfügung stellen. Also: mitmachen!

Banner für die Webworker-Umfrage 2014 der Webkrauts

Author: "Jens Grochtdreis" Tags: "Webkrauts"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 07 Apr 2014 11:30

Die BBC hat einen sehr detaillierten, sehr umfangreichen Styleguide für ihre neuen responsiven Webseiten veröffentlicht. Es gibt auch einen Blogbeitrag über die responsive Überarbeitung der BBC-Programmseiten.

Die BBC ist genau wie der Guardian immer technisch weit vorne und mitteilsam. Das finde ich sehr löblich. Unsere öffentlich-rechtlichen Anstalten bekommen so etwas leider nicht hin. Und ich fürchte, das wird sich auch in Zukunft nicht ändern.

Author: "Jens Grochtdreis" Tags: "Vermischtes"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 07 Apr 2014 06:28

Auf dem letzten Frankfurter Webmontag wurden die Vorträge wieder alle aufgenommen, dank des unermüdlichen EInsatzes von Sebastian Greiner. Kurz bevor ich loslegen wollte, stürzte auf einmal die Technik ab und es dauerte etwa fünf Minuten, um den Mac und die darauf befindliche Software für Präsentation und Aufnahme wieder sauber zu starten. Darauf beziehe ich mich zu Beginn des Videos.

Astrid Schüler fasst im Blog des Frankfurter Webmontags die Veranstaltung sehr gut zusammen und verlinkt auf alle Videos. Meine Folien hatte ich schon in meinem kurzen Artikel über den Webmontag verlinkt, ich tue dies unter dem Video der Vollständigkeit nochmal.

Responsives Webdesign vs. Barrierefreiheit von Jens Grochtdreis auf dem Webmontag Frankfurt (wmfra) auf Vimeo.

Author: "Jens Grochtdreis" Tags: "Webmontag"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 03 Apr 2014 10:00
  • Github bietet mit Showcases eine interessante, redaktionell zusammengestellte Übersicht ausgewählter Github-Projekte an. Diese sind thematisch sortiert. Bei IconFonts habe ich ein paar mir bislang unbekannte Projekte entdeckt. Eine interessante Fundgrube zum Stöbern.
  • Es gibt eine Chrome-Extension für JSBin. Früher hätte mich das interessiert. Heute nutze ich JSBin nur noch selten. Ich bin zu Codepen geschwenkt. Da zahle ich gerne Geld für gute Features.
  • Aprilscherze sind manchmal echt klasse: Der defintive Lorem Ipsum-Generator ist wirklich der Hammer. Leider in Flash.
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 03 Apr 2014 05:54

Microsoft beginnt offen zu kommunizieren, welche Techniken in den IE kommen, welche noch erwogen werden und welche schon drin sind. Die Übersicht ist bei weitem noch nicht vollständig, aber sie ist ein sehr guter Anfang. Gibt es bei den anderen Browserherstellern auch eine solche klare Übersicht? Oder muss man sich die Informationen da aus unterschiedlichen Dokumenten zusammenklauben?

Author: "Jens Grochtdreis" Tags: "Browser"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 02 Apr 2014 07:37
  • Sean Fiorotto klopft den Einsatz von Flexbox daraufhin ab, ob und inwiefern man eine Alternative für ältere IE finden kann.
  • BrowseSync scheint so etwas wie LiveReload zu sein, nur für mehrere Devices. Es gibt dafür auch ein Grunt-Plugin. Wer lieber Gulp.js nutzt, der bekommt in einem Artikel erklärt, wie man Gulp zusammen mit Sass und Browsersync nutzt.
  • Chris Sevilleja gibt auf seiner Seite eine Einführung in Bower.
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 31 Mar 2014 07:30

Eine sehr hilfreiche Seite für die Kommunikation mit Kunden (wahlweise auch den Eltern) ist “What’s my Browser“. Diese Seite gibt direkt und schön formatiert aus, mit welchem Browser man unterwegs ist und erwähnt zusätzlich noch ein paar Umgebungsvariablen. Sehr nützlich für Kunden des Schlags “mein Internet Explorer heißt Safari”.

Da hat sich doch tatsächlich jemand die Mühe gemacht, RGB-Entsprechungen zu Pantone-Farben zu suchen und dazu Sass-Variablen zu erstellen. Wer es nutzen will, sollte sich das Projekt bei Github ziehen und dann die notwendigen Variablen aus dem umfangreichen CSS entnehmen. Eine so umfangreiche Farbkonfigurationsdatei ist ja doch eher unhandlich. Ich habe auch noch einen zweiten Ansatz gefunden. Leider hat dieser keine Demoseite.

Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 26 Mar 2014 07:24
  • Elijah Manor animiert das Hamburger-Icon. Keine schlechte Idee.
  • Ich nutze gerne Compass, aber der Nutzen des Frameworks beschränkt sich für meine Anwendungen sehr. Ziemlich nützlich sind die diversen Bildfunktionen, insbesondere die Erstellung von Sprites. Es gibt aktuell ein gutes Tutorial zu Sprites mit Compass bei TheSassWay.
  • Hugo Giraudel veröffentlicht aktuell viel zu Sass. Für eine kleine Serie hat er sich seinen Bruder geschnappt. Dieser veröffentlicht jetzt bei ihm im Blog eine kleine Serie zu Git. Bislang sind drei Teile erschienen (Teil 1, Teil2, Teil3).
  • Der IE kennt so einige Pseudoelemente mehr, als in der Spezifikation vorgesehen sind. Ausweislich dieser Testseite scheint man für die Nutzung der meisten dieser IE-spezifischen Pseudoelemente Windows 8 zu benötigen. Die Testseite sagt allerdings nichts darüber aus, ob auch der IE9 unter Windows 8 die Pseudoelemente dann beherrschen würde.
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 24 Mar 2014 10:02
Author: "Jens Grochtdreis" Tags: "Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 21 Mar 2014 07:14
  • Bei Mozilla beschreiben Ian Devlin und Chris David Mills, wie man einen Cross-Browser-Videoplayer erstellt. Neben dem HTML5-Videoelement wird die Fullscreen API genutzt. Das Styling des Players wurde auf einen späteren Artikel verschoben.
  • Ich werde nie verstehen, warum man auch in 2014 noch so viel Energie darauf verwendet, Textalternativen für Bilder zu diskutieren. Alt-Attribut ausfüllen reicht doch vollkommen, es sei denn, es sind reine Schmuckbilder. Warum muss man daraus eine Mischung aus Wissenschaft und Religion machen? Es gibt noch ganz andere Probleme, die gelöst werden müssten.
  • Da hat tatsächlich jemand ein Sudoku-Feld mit HTML, CSS und JavaScript nachgebaut. Es ist leer, bis man selber anfängt Zahlen einzugeben. Es fehlt also “nur noch” das automatische Ausrechnen von vorgegebenen Spielen.
Author: "Jens Grochtdreis" Tags: "CSS und XHTML, Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 19 Mar 2014 10:04

Sassmeister ist ein tolles Tool, um Sass-Code zu testen oder zu demonstrieren. Es dient mir immer wieder für Schulungen. In den letzten Monaten gab es einige interessante Verbesserungen und Erweiterungen an dem Tool.

Die Sassmeister-Oberfläche auf einem kleinen Bildschirm.

  1. Die Oberfläche ist responsive, kann also auch prima auf kleineren Bildschirmen angeschaut werden.
  2. Wir können zwischen Libsass, Sass 3.2.15 und Sass 3.3.3 wählen. Dadurch kann man prima herausfinden, welche Variante welche Fähigkeiten (nicht) hat.
  3. Mittlerweile kann man auch HTML eingeben und das gerenderte CSS darauf anwenden lassen. Man kann aber auch Markdown, Haml oder Textile schreiben.
  4. Neuerdings kann man auch Emmet hinzuschalten und schreibt sein HTML und SCSS damit schneller.
  5. Wer täglich Vim nutzt wird sich freuen, dass man auch “Vim key bindings” hinzuschalten kann.
  6. Neuerdings kann man zwischen vier verschiedenen Themes für das Codehighlighting wählen. Da kommen bestimmt noch ein paar mehr.
  7. Und wer es noch nicht mitbekommen hat: man kann die Beispiele nicht nur als Github-Gist abspeichern, sondern auch in Artikel einbetten.

Ich bin sehr gespannt, welche Verbesserungen in den nächsten Monaten noch auf uns zukommen. Sassmeister ist für meinen Workflow mittlerweile fast unverzichtbar geworden. Fast deshalb, weil Codepen ein ziemlich guter Ersatz ist.

Author: "Jens Grochtdreis" Tags: "SASS"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 19 Mar 2014 07:00
Author: "Jens Grochtdreis" Tags: "CSS und XHTML, Linklisten"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 17 Mar 2014 10:35
  • Präsentation von Chris Eppstein über die Neuigkeiten in Sass 3.3. Die HTML-Slides sehen zwar nicht besonders hübsch aus, sind aber interaktiv.
  • Hugo Giraudel zeigt, wie man mittels Sass-Mixins die Nutzung von Prefixes so vereinfacht, dass man fast alle CSS3-Mixins löschen kann.
  • Scott O’Hara gibt einen knappen Überblick über Sass-Kontrolldirektiven.
  • Mit Sache gibt es neuerdings eine zentrale Anlaufstation für die Suche nach Erweiterungen für Sass und Compass. Leider müssen alle Erweiterungen bei Github gelistet sein, was die Auswahl naturgemäß ein wenig einschränkt.
  • Der Sass-Newsletter ist für alle Sass-Nutzer immer eine interessate Informationsquelle. Im Archiv kann man sich davon überzeugen.
  • Seit Kurzem ist Sass 3.3 draussen. Und innerhalb einer Woche sind wir nun schon bei Version 3.3.3 gelandet. Und das obwohl die Testphase eine gefühlte Ewigkeit dauerte. Jetzt warten wir nur noch auf die endgültige Version 1.0 von Compass.
  • Eines der neuen Sass-Features erleichtert nun auch den Umgang mit der BEM-Syntax. Die dafür notwendige ”@at-root”-Direktive erläutert Stuart Robson in einem anderen Artikel.
Author: "Jens Grochtdreis" Tags: "Linklisten, SASS"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 11 Mar 2014 08:30

Auf dem gestrigen Webmontag in Frankfurt habe ich nach längerer Pause mal wieder einen Vortrag gehalten. Jan Eggers hatte die prima Idee, ich sollte etwas über Responsive Webdesign und Barrierefreiheit erzählen. Denn das allesüberspannende Thema des Webmontages war “Un:normal”.

Der Webmontag wurde sehr interessant und launig von Sven Michels moderiert. Zum Einstieg führte uns Johannes Wunderer in Barrierefreiheit auf und mit Smartphones ein. Er gab einen breiten Überblick und kam mit seinem Lampenfieber ganz gut zurecht.

Es folgte Enno Park, der uns mit Cyborgs konfrontierte. Enno kann dank eines Cochleaimplantats hören, ist sonst gehörlos. Ich fand seine Aufzählungen, welche Verbesserungen und Erweiterungen es für unseren Körper so gibt – und wie man diese teilweise hacken könnte – sehr interessant. Enno denkt über den rein medizinischen Nutzen hinaus, möchte die Technik kreativ nutzen. Und er gab uns ein paar Szenarien, wie soziale und politische Implikationen aus technischen Hilfen im und am Körper erwachsen können. Ein sehr interessanter Vortrag. Wir hätten anfangs drauf eingestimmt werden sollen, dass er eine halbe Stunde dauern würde. Ich bin einfach an das 15-Minuten-Format gewöhnt.

In der Pause kochte Jan Eggers mit einer Kaffemaschine Essen. Es wurde ein Gericht aus Lachs, Brokkoli, Pilzen und chinesischen Instant-Nudeln zubereitet. Eine verrückte Idee, die aufging.

Nach der Pause war ich an der Reihe. Leider hing sich der Mac auf, kaum dass ich am Pult stand. Es dauerte ein paar Minuten, dann war wieder alles okay, der Livestream bekam auch etwas mit und ich konnte loslegen. Ich merke immer wieder, dass mich feste Redepositionen irritieren. In meiner eigenen Wahrnehmung war das gestern eine meiner schlechteren Perfomances, weil mich diese feste Position so irritiert. Normalerweise bewege ich mich (elfengleich :-) ) auf der Bühne.

In meinem Vortrag gehe ich von einer einfachen Prämisse aus: Jeder Seitenbetreiber sollte als Ziel haben, dass möglichst viele Menschen sein Angebot konsumieren und darüber möglichst in Kontakt treten. Das kann bis zu Käufen gehen.

Responsive Webdesign und Barrierefreiheit sind schlicht Begriffe für Ansätze, dies zu gewährleisten. Es sollen Hürden aus dem Weg geräumt werden, am Besten nie aufgebaut werden. Hürden die einen einfachen Konsum eines Angebots verhindern würden.

Ich weise darauf hin, dass es viele unterschiedliche Hürden gibt. Ich weise auch darauf hin, dass wir nicht wissen, welche Hürden in der nahen Zukunft auf uns warten werden. Und ich weise darauf hin, dass auch noch heute die Basics nicht gekannt und umgesetzt werden. Fünfzehn Minuten reichen nicht für Details aus, deshalb habe ich beispielhaft Alt-Texte für Fotos der Startseiten der Süddeutschen und der FAZ vom Sonntag genommmen. Alle Texte waren daneben. Aus dem Publikum kam der erwartete Standard-Einwand: “Das war das CMS!” Das hört sich für mich an wie: “Der Pumuckl war’s!” Denn das CMS wird bedient und programmiert von Menschen. Also waren es am Ende Menschen. Die haben eine Entscheidung getroffen. Und ich meine, diese Entscheidung war grundfalsch.

Nach mir schloss Chris Boos mit einer sehr interessanten, persönlichen Geschichte den Webmontag ab. Er berichtete, wie er sich als Albino gegen Vorurteile und Entmutigungen durchsetzen und seinen eigenen Weg gehen musste. Mir war gar nicht klar, welche Einschränkungen ein Albino im Sehen hat. Umso beeindruckender, was Chris aus seinem Leben gemacht hat.

Eindrücke dieses wirklich sehr interessanten und facettenreichen Webmontags gibt es auch in einem Storify von Nicole Lücking. In Kürze werden sicherlich auch die Videoaufnahmen der Vorträge auf dem Youtube-Kanal veröffentlicht.

Author: "Jens Grochtdreis" Tags: "Barrierefreiheit, Responsive Webdesign, ..."
Comments Send by mail Print  Save  Delicious 
Date: Monday, 10 Mar 2014 08:26

Mir hat damals unter Windows immer ein einfach zu konfigurierender Webserver gefehlt. Ich habe nie fehlerfrei Virtual Hosts unter Apache einrichten können, obwohl ich mich an die Anleitungen hielt.

Unter MacOSX ist mir dieses Problem genommen, da es MAMP Pro gibt. Für diesen Webserver muss ich einfach einen x-beliebigen Ordner auf meiner Platte aussuchen und einen Domain-Namen vergeben, schon habe ich meinen virtuellen Host. Einfach klasse.

MAMP Pro gibt es jetzt in Version 3. Viele neue Features kamen hinzu. Ich bin vor allem auf die Einbindung von xip.io gespannt. Damit kann ich dann auf meine lokalen Webseiten auch mit meinen mobilen Endgeräten zum Testen zugreifen.

An einer Windows-Version wird wohl auch gebastelt. Das ist prima. Dann kommen die Windows-Nutzer auch endlich in den Genuss eines einfachen Webservers. XAMPP kann dagegen leider nicht anstinken. 

Author: "Jens Grochtdreis" Tags: "Vermischtes"
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