Kategorie: Responsive Webdesign
Responsive Webdesign – wir müssen uns ändern
Unter dem Titel „Responsive Webdesign – wir müssen uns ändern“ habe ich heute einen kurzen Impulsvortrag vor den Mitgliedern des „IT Klub Mainz“ halten dürfen. Ich habe dabei versucht, kompakt darzustellen, inwiefern sich IT-Projekte ändern müssen, wenn am Ende eine responsive Webseite stehen soll. Die Folien gibt es natürlich wieder bei Speakerdeck.
Jeder Browser ist anders …
Bei der Weiterentwicklung des YAML-Frameworks konfrontierte mich Dirk Jesse gestern mit einem ärgerlichen Verhalten von Chrome. Bei einem Off-Canvas-Menü ignorierte dieser geflissentlich die Eigenschaft position:fixed. Nach ein paar Versuchen kam ich zu der Erkenntnis, dass die Entfernung von -webkit-perspective: 1000; das Problem löste. Ein Grund erschloss sich mir nicht. Also recherchierte ich heute Morgen ein wenig und stolperte schon gleich zu Beginn auf eine frustrierende Erkenntnis von Ian Routledge:
Weiterlesen
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.
Weiterlesen
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.
Weiterlesen
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„.
Weiterlesen
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.
Weiterlesen
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.
Weiterlesen
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.)