Auch mal aus dem Raster ausbrechen

In der letzten Woche wurde ich von unserem Designer mal wieder vor eine zunächst scheinbar nicht umsetzbare Aufgabe gestellt. Aber was ist schon unmöglich? 😉

Die Designvorgabe lautete, dass ein Container, der über ein Template in eine bestehende Seite und damit in einem vorgegeben „grid“ eingebunden wird, eine andere „background-color“ über das komplette Browserfenster erhalten sollte. Weiterlesen


Responsives Webdesign ganz Speziell

Jeder Frontend Entwickler weiß, dass in Zeiten der mobilen Internetnutzung responsive Seitengestaltung nicht mehr weg zu denken ist. Dies geschieht in den Regel in Abhängigkeit des viewports, sprich ändert sich die Größe des sichtbaren Browserfensters, ändert man die CSS Eigenschaften der einzelnen Elemente oder blendet diese ggf. sogar aus.

Möchte man jetzt aber mal ein gezieltes Element responsive von einem anderen speziellen Element abhängig machen, ist dies durch rein CSS schlicht nicht möglich. Hier haben sich aber glücklicherweise ambitionierte Entwickler Gedanken gemacht und eine Lösung per JavaScript gefunden. Weiterlesen


Responsive Pixelart

Das Netz ist geil! Was in den letzten Jahren im Internet gesellschaftlich und kulturell geschaffen wurde ist einfach der Wahnsinn und in dem Umfang einmalig in der gesamten Menschheitsgeschichte. Ich mega Froh ein Teil davon zu sein und diese Entwicklung weiter voran zu treiben. Weiterlesen




Image lazy loading – Bilder laden wenn sie gebraucht werden

Warum

Eine klassische Newsseite besitzt eine Vielzahl von Bildern und hat – so es denn auch was zu berichten gibt – einen größeren Umfang. Aktuelle Browser laden beim Aufrufen eines HTML-Dokumentes alle Bilder runter die enthalten sind. Am PC stört das wenige und ist seltener ein Nachteil, bei mobilen Websites bedeutet es aber das eine Menge Daten geladen werden, von denen ich unter Umständen nichts habe, da ich nur die neusten 3 Einträge überfliege und dann weiter surfe. Die restlichen Bilder bekomme ich, aufgrund des kleinen Viewports, nicht mal im Augenwinkel mit. Neben den verbrennen von mobilen Datenvolumen blockiert das Laden von Bildern natürlich in dem Moment Bandbreite, die ich für andere Resourcen besser brauchen kann.

Weiterlesen


Responsive Images – hochauflösende Bilder auf Smartphones und Tablets

Um eine möglichst hohe Bildschärfe zu erzielen besitzen aktuelle Smpartphones eine hohe Pixeldichte. Damit Bilder dort entsprechend gut aussehen, benötigen diese eine höhere Auflösung, wie wir sie bei gleicher Größe der Darstellung vom Desktop gewohnt sind. Um jedem Device ein optimales Bild zu liefern und Resourcen nicht unnötig zu verschwenden in dem man immer ein großes Bild ausliefert, bietet sich das, noch recht neue, srcset Attribut des img-Tags an. Im folgen stelle ich dieses kurz vor und zeige wie ich es bisher verwende.

Weiterlesen


Flexbox im Responsive Webdesign

Was ist Flexbox?

Flexbox ist eine Möglichkeit mit CSS3 Layouts zu gestalten. Im Grunde genommen ist es die erste richtige Möglichkeit mit CSS Layouts zu erzeugen, wenn man bedenkt das floats nie für das Gestalten von Layouts gedacht waren und sich nur mit Work-Arounds benutzten lassen (clearfix, ..). Neben Flexbox gibt es auch CSS3 Grid Layouts, aber diese sind im produktiven Einsatz aufgrund des schlechten Browser-Supports bisher uninteressant. Konzentrieren wir uns also darauf für was man Flexbox im Alltag benutzen kann 🙂 Weiterlesen


Material Design für Websites mit Googles Material Design Lite

material

Mit Material Design hat Google eine einheitliche Designsprache geschaffen, die alle Produkte des Unternehmens übergreift. Dabei wird von Farb-Guides bis zu Animationen eine ganze Menge abgedeckt. Nachdem die Spezifikationen für Material Design von einigen Frontend-Entwicklern für z.B. Bootstrap umgesetzt wurden, oder diese ein komplett neues Framework auf der Material Design Basis schufen, fühlte sich Google nun angehalten ein eigenes Framework zu veröffentlichen. Der Grund: Google waren die Interpretationen nicht genau genug an die Specs angepasst und man wollte im Zusammenarbeit mit dem original Material Design Team etwas Offizielles der Öffentlichkeit bieten. Dabei ist Material Design Lite entstanden.

Weiterlesen


JavaScript bei bestimmten Media-Queries ausführen

Möchte man JavaScript Funktionen bei einer bestimmten Bildschirmauflösung ausführen, so bieten sich dazu verschiedene Techniken an. Beispielweise könnte man per window.outerWidth eine bestimmte Pixelbreite des Fensters in Erfahrung bringen und diese Abfragen. Nun ist es so, dass JavaScript Funktionen die auf einer bestimmten Auflösung basieren, häufig mit dem Design der Seite zu tun haben. Für die Steuerung des Designs sollten aber doch CSS-Angaben zuständig sein. Zudem wird es Problematisch wenn sich das Design der Seite ändert und ganz andere Pixelbreitenangaben nötig sind, für die man dann wieder die zweite Baustelle JavaScript bearbeiten und synchron halten muss. Im Folgenden stelle ich ein Grundgerüst vor, dass es erlaubt die Logik JavaScript zu überlassen, und per CSS die Bedingungen für jene zu setzen.

Weiterlesen