Responsive (Re)-Design – Eine besondere Herausforderung an die Gestalter

Herausforderung Responsive Webdesign

Wer bereits viele Websites erstellt hat und viele Kunden betreut, wird wohl zu allererst auf die Frage stoßen: Wie kann ich meinen Kunden ein Responsive Design ihrer bestehenden Website liefern ohne von vorne zu beginnen?

Sie oder die Kunden haben sich vielleicht viel Mühe mit der Seite gegeben und über einen langen Zeitraum Content eingepflegt. Einziges Problem: das Design der Seite ist nicht auf dem neuesten Stand, es soll responsive werden.

Verständlich, dass man in diesem Fall nicht unbedingt noch einmal bei 0 anfangen will. In so einer Situation sind gute Web-Gestalter gefragt. Denn es können sich dabei sowohl gestalterische und programmiertechnische, als auch inhaltliche Schwierigkeiten ergeben.

Besonders Seiten, die mit CMS erstellt wurden, bereiten häufig Probleme. Denn jedes CMS hat seine Eigenheiten, was z.B. die Verteilung von Klassen und Attributen betrifft. Ein schönes Beispiel ist Typo3, das Bild- Textelemente mit dynamischen CSS versieht. So werden hier Margins und Klassen in Abhängigkeit der Bildbreite generiert und zugewiesen. Auf solche und andere technischen Schwierigkeiten wird man auf jeden Fall stoßen.

Ein anderes Problem sind die Inhalte bzw. Informationen. Eine Responsive Design Vorlage sollte nach dem Mobile First Prinzip entwickelt werden. In diesem Fall heißt das von wichtigsten und wenigen zu mehr Informationen. Allerdings wird oft versucht, möglichst viel Informationen gleichzeitig anzuzeigen und somit den Bildschirm zu füllen. Hier ist ganz klar Fokussierung notwendig, wenn man dem Besucher auch auf kleinen Bildschirmen und Smartphones seine Inhalte anbieten will. Auf kleinen Ausgabegeräten ist weniger mehr.

 

Wie es aussehen kann zeigen die auf http://mediaqueri.es/ gesammelten Beispiele gelungener Umsetzung von responsive Websdesign.

Share

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*


eins + = 5

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>