Responsive Webdesign

Flexibles Design / Layout

In den letzten Jahren ist es üblich geworden, sich von statischen Webseiten mit einer bestimmten Größe zu trennen und statt dessen ein flexibles Layout zu entwerfen. Grund hierfür ist die steigende Anzahl der mobilen Geräte sowie der Trend zu immer größeren Displays. Da Bilder mehr als tausend Worte sagen, soll ein Scrennshoot der Seite - http://ami.responsivedesign.is/# - verdeutlichen, was unter flexiblem Layout oder Design zu verstehen ist.

Responsive-Webdesign-screenshoot

Am i responsive

Auf der Seite - http://ami.responsivedesign.is/# - können Sie also Ihre eigene Webseite eingeben und in den verschiedenen Geräten begutachten. Sollten Sie diese Seite aufrufen, möchte ich Ihnen auch gleich meine Lieblingsseite zur Überprüfung mit an die Hand geben: http://stuffandnonsense.co.uk/  von Andy Clarke, der weiter unten noch zu Wort kommen wird.

Was heißt responsive? Der Begriff "Responsive Web Design" wurde von Ethan Marcotte im Mai 2010 durch einen Artikel populär gemacht. Übersetzt heißt Responsive Web Design soviel wie "reaktionsfähiges" Webdesign und ich nenne es einfach flexibles Layout. Marcotte übernahm damals den Terminus responsive aus der Architektur, wo er für Gebäude steht, die flexibel auf Umwelteinflüsse reagieren oder beispielsweise ihren Bewohnern Heimeligkeit vermitteln, indem sie die Fenster abdunkeln, sobald eine Person den Raum betritt.
Ausschlaggebend für das Umdenken und den neuen Trend hin zu flexiblen Layouts war das Erscheinen des iPhones im Jahr 2007. Mit dem iPhone gab es erstmals die Möglichkeit Internetseiten komfortabel auf einem mobilen Gerät zu betrachten.
Einer der Vorreiter und anerkannten Experten auf dem Gebiet des responsive Webdesign, Andy Clarke, beschrieb den Umbruch in der Webdesign-Szene teffend: "From now on, if it is not responsive, it is not web design."

Flexibles Layout und Wirtschaftlichkeit

Nach den bisherigen Ausführungen scheint es, als wäre ein flexibles Layout nur etwas für Webdesigner mit übertriebenem optischen Anspruch. Dem ist nicht so.
Ein Punkt, wenn auch nicht der Wesentlichste, ist sicher, dass eine flexibel gestaltete Webseite ein Qualitätkriterium ist. Statische Seiten lassen sich auch von Laien verwirklichen oder über ein Baukastensystem zusammensetzen.
Ein wirtschaftlich ernst zu nehmender Punkt ist die wachsende Zahl internetfähiger Mobilgeräte sowie der Umfang der Internetnutzung mit diesen Geräten. Mobile Geräte werden zunehmend auch zu Hause verwendet. Anstatt unbequem vor dem Desktop am Schreibtisch zu sitzen, wird von der Couch aus mittels Handy gesurft und bestellt.
Christoph Zillgens schreibt in seinem empfehlenswerten Buch, "Responsive Webdesign", Hanser-Verlag auf Seite 13:
"Schon längst werden über Mobilgeräte große Geschäfte getätigt. eBay verkauft über seinen Mobilableger mehrere tausend Autos im Monat, Schmuckläden verkaufen teure Diamantringe auf demselben Weg. .... Wenn ich im Wohnzimmer liege und Anbieter A mir kein vernünftiges Interface auf meinem mobilen Gerät bietet, werde ich eher bei Anbieter B kaufen, als an den Schreibtischrechner zu wechseln. Responsive Webdesign ist somit aus wirtschaftlicher Sicht nicht bloß ein aufgesetztes Feature, sondern von grundlegender Bedeutung."

Responsive - Aktualität

Der Seitenname dieser Seite ist "flexibles Layout", weil es in unserer Website nicht vorrangig um responsive Design geht und ich von den üblichen Nutzern unserer Seite nicht erwarte, dass ein Terminus wie responsive animiert, die Seite anzuwählen. Da wir uns auf unseren Seiten und in unserer täglichen Arbeit intensiv mit dem Thema Suchmaschinenoptimierung beschäftigen, habe ich jedoch nach den Schlüsselwörtern zu flexiblem Design gesucht.

Google Trends

responsive-Webdesign
responsive-Design

Wie Sie auf der Grafik oben sehen können, ist das Suchinteresse zu dem Begriff "responsive" seit dem Jahr 2011 schlagartig angestiegen und erreicht in den Suchanfragen bei Google mittlerweile eine "Topstellung". Das es sich hierbei tatsächlich um das responsive  aus dem Bereich Webdesign handelt veranschaulicht eine weiter Übersicht der Seite Google Trends, bei der verwandte Begriffe zu dem Suchwort responsive gelistet sind.

Flexibles Layout / Die Umsetzung

Die Umsetzung eines flexiblen Layouts erfolgt mit den neuen Standards wie html5 und css3. Durch diese Techniken ist es seit ein paar Jahren möglich, zB ein Bild analog zur Seitengröße schrumpfen zu lassen. Wenn Sie Ihr Bildschirmfenster zusammenschieben, werden Sie dies an dem Bild ganz oben gut nachverfolgen können.

Ein weiterer wesentlicher Bestandteil eines flexiblen Layouts sind Mediaqueries. Innerhalb dieser können Anweisungen gegeben werden, wie sich einzelne Teile der Seite zu verhalten haben. "Schrumpfen" Sie Ihr Fenster, so können Sie diesen Effekt an der Hauptnavigation unterhalb unseres Fischerbildes nachverfolgen. Bei einer Größe von 980 Pixel droht der Begriff Programmierung seinen Rahmen zu sprengen. Um dem Wort wieder etwas mehr Platz zu geben, wurde die Anweisung erteilt, den Abstand der Navigationleiste nach links und rechts aufzuheben.
Ab einer Größe von 800 Pixel wiederholt sich dieses Problem. Zudem sind wir jetzt bei einer Bildschirmgröße angelangt, die eigentlich nur noch mobilen Geräten zuzuordnen ist. Da bei diesen nicht mehr die Maus sondern die Finger zum Anwählen der Navigationpunkte genutzt werden, sollten die Navigationpunkte nun größer werden, um die Bedienung der Seite zu erleichtern. Aus diesem Grund wurde die Navigation umgestaltet und "versteckt". Sichtbar und zwar in einer "fingeradäquaten" Weise wird sie, indem das Wort Navigation gedrückt wird.

Da das Kriterium Bedienbarkeit der Seite bei mobilen Geräten ein solch große Rolle spielt, ist die Navigation unserer Seite auf iPhone und Co noch einmal eine andere. Das von uns eingesetzte CMS Contao bietet die Möglichkeit, mobilen Geräten ein eigenes Layout anzubieten. Das Programm erkennt hierbei, ob die Website von einem Desktop oder mobilen Gerät aufgerufen wird.
Für ein mobiles Endgerät können wir deshalb eine so genannte Quicknavigation ausgeben, welche die Bedienbarkeit der Website erhöht.

Adresse

  • FischerNetzDesign
  • Dechant-Heimbach-Str. 50
  • 53177 Bonn
  • Tel : +49 (0) 228 - 53455790
  • info@FischerNetzDesign.de
  • Büro Windhagen

  • FischerNetzDesign
  • Köhlershohner Str. 34
  • 53578 Windhagen
  • Tel : +49 (0) 2645 - 7040790
  • Fax: +49 (0) 2645 - 7040799

Social Media

folgen Sie uns:


empfehlen Sie uns: