Responsive Webdesign

Tabellen – responsive oder scrollbar

George Martsoukos hat bei Sitepoint eine interessante Übersicht verschiedener Lösungen für responsive Datentabellen veröffentlicht. Für die eigene Recherche ist das eine sehr gute Ausgangsbasis.

Auch Sven Wolfermann hatte sich des Themas schon einmal angenommen, allerdings in einer sehr viel übersichtlicheren Form.
(mehr …)

Linkfutter 201 – Responsive Webdesign

Mike Riethmuller erläutert, wie er mit der calc-Funktion in CSS responsive Typographie realisiert, also Typo, die sich an die Umgebunsgbreite anpasst.
Guil Hernandez beschreibt wiederum „ein Sass-Mixin für responsive Typographie„. Das finde ich charamanter.
(mehr …)

Forschung zu Media-Queries

Media-Queries kann man nicht nur in eine CSS-Datei schreiben. Man kann auch bei der Verlinkung externer Stylesheets in einem Attribut angeben, für welche Umgebungsbedingungen das verlinkte Stylesheet gelten soll.

Scott Jehl hat sich die Mühe gemacht und alle vorstellbaren Szenarien für die Anreicherung von verlinkten Stylesheets mit Media-Queries getestet. Das Ergebnis ist eindeutig und einfach zu merken: Alle Browser laden alle externen Stylesheets, auch wenn eine Media-Query nicht zutrifft.

Ich finde das Ergebnis recht klar und logisch. Denn schliesslich können sich die Umgebungsbedingungen theoretisch ändern, während der Nutzer die Seite betrachtet. Wenn der Browser dann alle CSS-Dateien zur Hand hat, kann er schnell auf die Änderung reagieren. 

Linkfutter 167

Unter dem Titel „Das Web der Zukunft“ führt uns im heutigen Artikel des Webkrauts-Adventskalenders Peter Kröner in die spannende Welt der Webcomponents ein.

Bei 24ways schreibt Jeremy Keith mal wieder über sein Leib-und-Magen-Thema „Progressive Enhancement“, diesmal aus der Sicht eines responsiven Projekts: „Responsive Enhancement„.
(mehr …)

Linkfutter 165 – eine Ladung Responsiveness

Hinter dem heutigen Türchen des Webkrauts-Adventskalenders steckt ein Artikel von mir. Ich führe in die Nutzung des neuen Standards für responsive images ein, erkläre also das neue srcset-Attribut und das picture-Element. Mittlerweile gibt es auch schon ein paar Webseiten, die diesen Standard nutzen (Beispiel 1, Beispiel 2, Beispiel 3). Ich bin gespannt, wann ich diesen Ansatz in einem Projekt einsetzen kann/darf.
(mehr …)

HTML5-MasterClass in Hamburg

Frontendentwicklung ist kein leichter Job. Die technischen Rahmenbedingungen ändern sich ständig. Oft bleibt nicht genügend Zeit, um neben dem Job auf dem neuesten Stand zu bleiben. Und am Arbeitsplatz selber wird einem oft die Möglichkeit nicht eröffnet.

Deshalb sind Schulungen für viele Unternehmen und Entwickler wichtig, um technisch nicht abgehängt zu werden.
(mehr …)

Die Einheit vh in der Praxis

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

Linkfutter 155

Es gibt keine Standardauflösungen für responsive Webdesign, das erzähle ich in meinen Schulungen und Vorträgen immer wieder. Und da für die meisten Kunden das mobile Web eh nur aus iPhone und iPad besteht, kann man anhand dieser Übersicht der unterschiedlichen iPhone-Auflösungen meine Aussage schön demonstrieren. Interessant sind ergänzend dazu die Ausführungen zu den iPhone 6-Auflösungen und der Pixelschärfe.

In „Be Progressive“ schreibt Jeremy Keith sehr schön über die grundsätzliche Herangehensweise an Progressive Enhancement. Zum gleichen Thema passt auch prima sein Artikel „Just what is it that you want to do?„.

Linkfutter 149 – RWD

  • Bei Sitepoint wird vorgestellt, wie man mit dem Checkbox-Hack eine off-screen-Navigation ganz ohne JavaScript baut, die man auf schmaleren Monitoren prima nutzen kann.
  • Dudley Storey schreibt über das Picture-Element und bietet dazu ein nettes Beispiel auf Codepen an.
  • Alexander Farkas hat einen Polyfill für responsive Images auf Github veröffentlich. Er baut auf der Arbeit von Leuten wie Scott Jehl auf. Farkas schreibt, man solle einfach die Standards schreiben, der Polyfill erledige den Rest. Na dann: beim nächsten Projekt probieren wir das aus!

Linkfutter 134

Mark Geyer hat einen Workshop zu Animationen im Interface gegeben. Freundlicherweise hat er die sehr interessante und sehr umfangreiche Präsentation dazu online gestellt.

Die Zukunft des E-Commerce ist Responsive, behaupten Patrick Lobacher und Sven Wolfermann in einem gemeinsamen Vortrag.

Markdown soll endlich eine offizielle Spezifikation bekommen, die möglichst alle bisherigen Mutationen auch abdeckt. Und da sich der Markdown-Erfinder wie ein störrisches Kind benimmt, wird das Ganze unter CommonMark verhandelt. Na, dann sind wir mal gespannt.