Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung
Screenshot_1

Responsive Webdesign: Praktische Techniken, Effizient, perfomant & wartbar

Responsive Webdesign (RWD) ist in der Praxis oft eine Herausforderung. Die Designer können aber mit entsprechenden Techniken, effizientes, performantes und wartbares RWD realisieren, ohne bei User Experience Kompromisse eingehen zu müssen.

In diesem Artikel werden einige Techniken zusammengefasst.

Ganzheitlich betrachtet geht es bei Responsive Webdesign um alle relevanten Interfaces. Um ein optimales Ergebnis zu erzielen, stehen für alle Geräte verschiedene Techniken zur Verfügung.

Icon Fonts

Die Auflösung von Grafiken ist zu einer Herausforderung durch die Vorstellung von Retina Displays geworden. Eine Lösungsmöglichkeit besteht hier im Einsatz von mehreren Versionen der Grafik, natürlich abhängig von der Bildschirmauflösung (PPI).Diese Möglichkeit ist hauptsächlich beim Einbinden von Content-Grafiken mit serverseitigem Handling der Bildformate praktikabel, aber für die Gestaltung von responsiven User-Interfaces unpraktisch. Mit Icon-Fonts kann man dieses Problem beheben, sie werden hier einfach als Schriften eingebunden. Da sie vektorbasiert sind, sind hier die Auflösungsunabhängigkeit und der Einsatz im User-Interface einfach. Bei Einzelgrafiken haben Icon-Fonts den Vorteil, dass der Browser eine Font-Datei und nicht viele Einzel-Icons laden muss. Dadurch reduziert sich der Overhead-Traffic und ermöglicht eine verlustfreie Skalierung und eine einfache Style-Anpassung.

Focal Dropping

Beim Skalieren rutschen manchmal Bilder aus dem sichtbaren Bereich für die Benutzer, dann verliert das Motiv jeglichen Sinn. Hier gibt es verschiedene Möglichkeiten die Probleme zu beheben. Eins davon ist Focal Point. Hier wird mit purem CSS ein für das Bild essenzieller Punkt definiert. Wenn das Bild beschnitten wird, dient der Punkt als Zentrum. Dazu sucht man einen Punkt im Bild der fokussiert werden soll, und gibt den Offset von der Mitte des Bildes via Klassendefinition an das Element weiter.

HTML

<div class=facal-point right-3 up-3“>
<div><img xsrc=“guy.jpg“ alt=““ /></div>
</div>

Compressive Images: Dateigröße gering halten

Benutzt der Webdesigner im Responsive Design nicht das responsive Images, kann an vielen Geräten eine zu große Version der Grafik entstehen. Darum sollte immer sicher gestellt werde, dass die Dateigröße gering ausfällt. Mit jpeg-Mini kann man die Dateigröße der Bilder sehr gut reduzieren. TinyPNG liefert bei PNG-Grafiken optisch verlustfreie Grafiken mit bis zu 70 Prozent der ursprünglichen Dateigröße zurück.

jpeg mini

Conditional Loading

Conditional Loading kann man als Erweiterung zum Mobile-First-Ansatz ansehen. Das gelieferte Grundlayout beschränkt sich auf das für das Mobilgerät notwendige Markup. Durch eine Abfrage, die analog zu dem Stylesheet definierten Media-Queries erfolgt, wird dann ein zusätzlicher HTML-Code nachgeladen, der dann für das jeweilige Endgerät richtig ist. Diese Technik ist richtig angewandt eine enorme Performance-Steigerung.

HTML/JavaScript

<div>
<p>Hier könnte ein Artikeltext stehen, der für alle Geräte dargestellt werden soll.</p>
</div>
<script type=“text/javascript“>
if($(window).width()>=600){
	$(‚body’).append(load_site_module(‚friendlist’));
}
</script>

Eine Beispielimplementierung für Conditional Loading zeit oben genanntes Listing, dort wird in der Basis-Version der Seite nur ein Artikeltext ausgeliefert und bei entsprechender Bildschirmgröße nur für diese Größe gedachter Content nachgeladen. So werden nur die benötigten Komponenten für die jeweiligen Größen der Geräte nachgeladen und müssen nicht im Stylesheet bedacht werden. Damit kann auch die übertragenden Datenmengen und die Renderzeit spürbar reduziert werden.
Wann der Einsatz sinnvoll ist, gilt immer abzuwägen. Zu viele nachgeladene Daten und die unterschiedlichsten Inhalten, sollten mit Bedacht, auf User-Experience, SEO und HTTP-Overhead betrachtet werden.

Conditional CSS

Die Technik von Conditional-Loading funktioniert sehr gut mit Pixelwert-basierten Media-Queries. Hier können bei Abfragen einiger Szenarien jedoch ungenau sein, denn von einigen Browsern wird der Scrollbalken für die screnn-width unterschiedlich berechnet. Dadurch können bei der Gestaltung der Breakpoints Pixelwerte Probleme für die Designer entstehen. Hier kann der Einsatz von „em“-Werten die Lösung sein. Diese kann man jedoch nicht so einfach mit JavaScript abfragen, um die passenden Inhalte und das Markup für diese Media Query nachzuladen.

Dieses Problem kann mit Hilfe von Pseudo-Klassen einfach behoben werden. Webdesigner müssen dem body-Tag des Dokuments ein Pseudoelement anhängen, dann können sie mit der content-Eigenschaft einen beliebigen und für JavaScript lesbaren Wert erzielen.

HTML/JavaScript

@media all and (min-width: 45em) {
body:after {
content: 'widescreen';
display: none;
}
}
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'widescreen') {
// Load some more content.
}

Vertical Media Queries

Ein weiterer Schritt in Richtung „Mobile First“ ist Vertical Media Queries. Hier wird beim Ansatz zunächst das gemeinsame Styling definiert und dann mit Media Queries um zusätzliche Eigenschaften ergänzt. Wie man für zwei Breakpoints eines Designs unterschiedliche Überschriften-Styles definieren kann, zeit das folgende Listing.

CSS

h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
}
@media screen and (min-width: 700px){
h1{
 font-size:18px;
  line-height:24px;
}
}
@media screen and (max-width:699px){
 h1 {
  font-size:14px;
  line-height:16px;
}
}

Das Vertical Media Queries kann in vielen Fällen deutlich kürzere und übersichtlichere CSS herstellen, es ist viel einfacher, Elemente-Eigenschaften hinzuzufügen als fertige Layouts Eigenschaften wieder wegzunehmen. Bei der Rendering-Geschwindigkeit wird sich diese Technik ab einer gewissen Komplexität des Stylesheets auch positiv auswirken.

Media Queries Splitting

Durch die Arbeit mit Responsive Webdesign wird der Webdesigner gezwungen in vielen Dimensionen gleichzeitig zu denken und diese im CSS festzuhalten. Die Komplexität des Stylesheets nimmt bei zunehmender Anzahl von Breakpoints und Gestaltungselementen zu und die Übersicht dementsprechend ab. Um endloses Suchen der Code-Fragmenten zu vermeiden empfiehlt sich das Aufteilen von Media Queries. Wenn man das Styling für Artikel und Artikelübersicht in verschiedene Media Queries aufteilt, entstehen ein deutlich besser wartbarer Code und mehr Übersicht bei notwendigen Änderungen.

Fazit

Responsive Webdesign ist ein spannender, junger Bereich der sich ständig weiterentwickeln wird und den Webdesignern noch eine lange Zeit beschäftigen wird. Die Techniken die hier beschrieben wurden, sind erst der Anfang, der zu erwartenden Entwicklung. In der Zukunft wird uns in Anbetracht der sich ständig weiterentwickelnden Medienlandschaft mit verschiedensten Bildschirmgrößen, Formaten, Auflösungen und Endgeräten, Responsive Webdesign noch sehr beschäftigen.