Responsive Webdesign ist ein Muss

Noch vor wenigen Jahren gehörte das Tabellenlayout wie der Käse zur Pizza. Dabei wurde das Design an feste Bildschirmauflösungen optimiert, in der Regel 800 x 600, 1.024 x 768 oder 1.280 x 1.024 Pixel. Das Design war dabei fixiert, wer beispielsweise eine größere Auflösung hatte, musste mit viel Whitespace leben. Der unschöne Nebeneffekt konnte mit schicken Hintergrundbildern etwas gelindert werden. Einige Kunden bestanden bereits vor wenigen Jahren darauf, auch eine mobile Internetpräsenz zu besitzen. Diese wurde allerdings oftmals auf eine Subdomain ausgelagert und bot nur eine abgespeckte Funktionalität. Hier herrschten einspaltige Layouts ohne grafische Ansprüche, die lediglich die nötigsten Informationen mit Text darstellten.

Sunday Best

Das bisherige Designkonzept begann mit der Einführung von iPhone, iPad sowie den Android Smartphones ins Wanken zu geraten. Mit ihrer Einführung mussten plötzlich zahlreiche Bildschirmauflösungen bei der Erstellung der Webseite beachtet werden. Durch die immense Popularität der Smartphones und die gleichzeitige Internetnutzung unterwegs wuchs zugleich der Anspruch an die mobilen Webseiten. Webdesigner standen vor einer großen Frage – was tun? Theoretisch hätten sie eine Webseite für Desktoprechner, eine spezielle für iPhones sowie iPads und eine minimalistische für alle anderen mobilen Geräte entwickeln können. Der Aufwand für die Pflege dieser Webseiten wäre allerdings zu groß. Hinzu kommt das Problem mit den verschiedenen Auflösungen, die verlangen würden, dass man immer wieder eine neue Webseite entwickelt.

Eine viel einfachere Lösung bieten HTML5, CSS3 sowie Javascript. Sie erlauben das Programmieren von Device unabhängigen Webseiten, die automatisch Text, Bilder und andere Elemente skalieren und der passenden Auflösung des Gerätes anpassen.

3 Schritte zum Responsive Webdesign

Feste Schriftgrößen sind Schnee von gestern

Die Verwendung von festen Schriftgrößen hat sich leider jahrelang nicht geändert. Der Grund dafür ist auch hier die Tatsache, dass früher fast jeder dieselbe Auflösung nutzte. Wer heute eine feste Schriftgröße auf seinen Webseiten nutzt, steht vor dem Problem, dass die Schrift auf einem Monitor mit Full-HD-Auflösung winzig klein sein könnte, während sie auf einem Smartphone zu groß wäre. Im Responsive Webdesign nutzt man aus diesem Grund keine Pixelangaben als Definition der Schriftgröße, sondern relative Werte.

Simon Collison

Schriftgrößen, Zeilenhöhen und andere Elemente werden auf der Basis von Prozent oder auch em definiert. Eine Schriftgröße von 16 Pixeln entspricht so dem Wert 100% oder 1em. Diese Werte werden in CSS-Dateien festgelegt und von jedem Webbrowser interpretiert.

Flexible Layouts sind die Zukunft

Die bisherigen Webseiten verfügten über feste Layouts, oftmals mit einer Breite von 960px, heute wird auch 1.140px genutzt. Sinnvoll sind beide Werte nicht, denn nach wie vor nutzen viele Internet User kleine Auflösung bei ihrem Monitor. Dies hat zur Folge, dass sie horizontal scrollen müssen, um den kompletten Inhalt der Webseite sehen zu können. Auf der anderen Seite sehen Webseiten, die eine solche Pixel-Breite nutzen, auf einem hochauflösenden Monitor zu klein aus. Der User müsste möglicherweise sogar heranzoomen, um die Elemente gut erkennen zu können.

Sparkbox

Im Responsive Webdesign werden die Elemente in ihrer Maximalgröße begrenzt. Auf der Basis dieser Größen werden sie auf relative Werte heruntergerechnet. Ein Element eines Layouts mit einer Pixelbreite von 960px würde man so beispielsweise auf 31,25% definieren. Dabei definiert man für Bilder, Videos sowie anderen Objekten mit dem Befehl max-width:100%; stets die Maximalgröße. Für das Problemkind Internet Explorer gibt es bereits fertige Scripts, um auch diese Definitionen zu verarbeiten.

Media Queries

Seit Jahren wird bereits das media-Tag genutzt, um beispielsweise spezielle Stylesheets zur Druckausgabe zu laden. Mit CSS Media Queries kann man heute Stylesheets für bestimmte Geräte laden. Mit dem Befehl media="screen and min-width: 800px könnte der Designer ein Stylesheet laden lassen, welches nur dann aufgerufen wird, wenn das Browserfenster des Internet User mindestens 800 Pixel nutzt.

Das Thema kann noch in viele weitere Bereiche eingegangen werden. Interessante Inspirationen zum Thema Responsive Webdesign gibt es übrigens auf der Showcase Seite Mediaqueri.es.

Artikelbild: Creative Commons by Jeremy Keith / Flickr.com

Wie wichtig das Design für Besucher ist

Webseiten generieren heutzutage ihren Traffic zum Großteil über Suchmaschinen. Der beste Content bringt nichts, wenn die Seite nicht professionell und ansprechend gestaltet ist. Dabei muss man nicht unbedingt außergewöhnliche Grafiken nutzen, sondern eine gute Balance aus einfacher Navigation und Inhalt bieten. Viele Besucher entscheiden innerhalb weniger Sekunden nach dem sie eine Webseite aufgerufen haben, ob sie dort verweilen und sich weiter umsehen, oder ob sie die Seite verlassen. Wer an dieser Stelle seinen Besucher mit viel, unüberschaubarem Content regelrecht erschlägt, wird keinen Erfolg haben. Auch die übermäßige Nutzung von Werbung kann negative Folgen mit sich ziehen. Um zu verdeutlichen, wie ein simples, aber effektives Design aussieht, nachfolgend das Beispiel der rumänischen Fast-Food-Kette Lucas Super Sandwich.

Lucas Super Sandwich

Obwohl ein sehr minimales Design verwendet wurde, wird auf den ersten Blick deutlich, worum es hier geht: Sandwiches. Die großen Fotos lassen dem Besucher das Wasser im Mund zusammenlaufen, sodass er sich sicherlich auch das Menü ansehen wird. Dennoch ein gutes Webdesign nicht alles. Professionelle Designs können über einen kurzen Zeitraum zwar Schwachstellen beim Inhalt vergessen lassen, jedoch ist dies keine Dauerlösung. Ebenso wie beim Design benötigt man kreative Köpfe, die sich mit der Texterstellung genau auskennen, den passenden Stil für die jeweilige Seite finden und auf Kundenwünsche eingehen können.

Mehrwert für den Leser

Mehrwert Leser

Aktuelle Inhalte

Das Schreiben von aktuellen Inhalten ist in der Regel mit sehr viel Zeitaufwand verbunden, den viele nicht investieren wollen. An dieser Stelle lohnt sich natürlich die Beauftragung eines Texters, der sich mit der Content-Erstellung auskennt. Je nach Art der Webseite muss mehr oder weniger Recherche betrieben werden, die oftmals sehr viel Zeit kostet. Dennoch wird die Aktualität einer Webseite belohnt, denn die Topsuchmaschinen werten aktuelle Webseiten höher als statische Seiten.

Formatierung, Textaufbau, Keywords

Der Textaufbau und eine leserliche Formatierung sind sehr wichtig für die Besucher einer Webseite. Lange Fließtexte will und kann niemand lesen. Hier gilt es regelmäßig sinnvolle Absätze zu machen, Aufzählungen können ebenfalls den Lesefluss verbessern. Für Informationen, die nicht im Text untergebracht werden können, hilft ein Verweis auf andere Webseiten. Ebenfalls wichtig ist die Verwendung von Keywords, ohne dabei zu übertreiben oder unleserliche und grammatikalisch falsche Sätze zu bilden. Auch beim Einfügen von Bildern und Videos sollte man nicht sparsam sein, jedoch muss ein Gleichgewicht zwischen Text, Bilder und Videos vorhanden sein.

Rich Snippets

Auch bei den Suchergebnissen kann man mithilfe von Keywords und einer entsprechenden Formatierung den Inhalt der Webseite gekonnt darstellen und auf sich aufmerksam machen. Die erste und letzte Seite im obigen Beispiel nutzen sogenannte Rich Snippets. Erstere zeigt mit ihrer Bewertung, dass sie eine seriöse Webseite ist, während die Letztere in den Google Suchergebnissen die nächsten Konzerte anzeigt.

Jede Suchmaschine begrüßt gute Überschriften mit Schlüsselwörtern. Ebenfalls wichtig ist ein Einleitungstext mit Keywords, die möglichst sinnvoll verknüpft sind. Dabei spielt es keine Rolle, ob es sich um einen Teaser oder Abstract handelt, beide haben denselben Effekt. Die Überschriften erhalten eine höhere Gewichtung als der eigentliche Text. Wer somit die Headline gekonnt auswählt, kann an dieser Stelle Boden gut machen.

Artikelbild: © by-Sassi / pixelio.de
Mehrwert Leser: © Benjamin Thorn / pixelio.de

Wer davon genug hat, nutzt jetzt einfach Google minus Google! Die Google-Suche ohne Google-Seiten:
Google-Google

Als erstes sucht ihr euch ein Muster aus und stellt die Größe und die Transparenz ein.

Im Moment stehen euch insgesamt 68 verschiedene Muster in 7 unterschiedlichen Kategorien zur Verfügung.

Im nächsten Schritt könnt ihr die Ausrichtung des Musters bestimmen.

Jetzt noch schnell die Größe und Transparenz des der “Hintergrundfusseln” und die Gesamtgröße des Hintergrundmusters einstellen und fertig!

Wer will kann jetzt noch einen Account anlegen, seine erstellten Muster abspeichern oder in der “Top Rated”-Galerie stöbern. Super praktisch und total einfach das Ganze!

via Pixelgraphix

• Sistrix hat sein PDF SEO-für Einsteiger überarbeitet.
• Google lässt sich einen Button 110 Mio. Dollar pro Jahr kosten.
• Immer im richtigen Moment abgedrückt hat Matt Stuart.
• Erste Firefox 3.0 beta ist draussen.
• Domains innerhalb von Sekunden finden! Mit der Schnecke.
• Morgen findet die 100. und zugleich erste Livesendung von Technikwürze statt! Einfach mal reinhören. Es lohnt sich bestimmt.

Übrigens gibt es dort im Shop das Buch Typo digital noch bis Montag für 0 €uro (früherer Preis 16,90€). Nur die Versangebühren von 4,-€ sind noch zu zahlen.

via Peter Kröner