publicplan E-Government Blog

Responsive Webdesign - Ein "must have" im Bereich E-Government!

Blog

Kontakt

publicplan GmbH

Bilker Straße 29
40213 Düsseldorf

 

Tel +49 (0)211 635501-80
Fax +49 (0)211 635501-89

 

Torstraße 218
10115 Berlin

 

Tel +49 (0)30 6098980-80
Fax +49 (0)30 6098980-89

infoatpublicplan.de

Responsive Webdesign - Ein "must have" im Bereich E-Government!

Autor
Lara Knebel
Datum

Unter einem "responsiven" Webdesign versteht man, dass Funktion, Design und Inhalte einer Internetseite sich dem jeweiligen Endgerät anpassen (egal ob Smartphone, Tablet, Notebook oder PC). Warum sollte man diesen Mehraufwand der Programmierung in Kauf nehmen? Schaut man sich die Statistiken an, so stellt man fest, dass der Anteil der mobilen Endgeräte von Jahr zu Jahr steigt. Weltweit werden bis 2018 ca. 1,873 Mrd. Smartphones im Einsatz sein - ganz zu schweigen von den Tablets.

 

Statistik Absatz Smartphones weltweit
Prognose zum Absatz von Smartphones weltweit von 2010 bis 2018 (in Millionen Stück)
Quelle: statista.de

 

Frühere Webseiten wurden für maximal 1000 Pixel Seitenbreite optimiert (die Standardauflösung war damals 1024x768 Pixel, zieht man davon die Bedienelemente des Browsers, z.B. die Scollleiste ab, verblieben weniger als 1000 Pixel in der Breite). Heute gibt es da deutlich mehr zu berücksichtigen:

Je nach Endgerät und "Haltung" des Endgerätes (hochkant oder quer) variiert die Seitenbreite von 330 Pixel beim Smartphone bis weit über 1400 Pixel beim Dektop-PC. Es macht also Sinn, die Darstellung und Bedienung der Internetseite an die verschiedenen Endgeräte anzupassen.

Oftmals erspart man sich durch die Implementierung des responsiven Verhaltens auch die Entwicklung teuerer Apps. Apps müssen für die verschiedenen Betriebssysteme der Smartphones und Tablets jeweils einzeln entwickelt werden. Das führt dazu, dass man heute mindestens 2 populäre Zielplattformen bedienen muss: iOS von Apple und Android von Google. Es gibt darüber hinaus aber auch noch Windows Phone von Microsoft und das Betriebssystem von Blackberry - für eine hohe Abdeckung hätte man also insgesamt verschiedene Apps. Eine weitere Hürde bei Apps ist die Einstellung der App in den jeweiligen Appstore des Anbieters. Hier müssen AGBs akzeptiert werden, die nach ausländischem Recht (oft amerikanisch) und in Englisch abgefasst sind. Dies betrifft auch Apps, die eigentlich kostenfrei angeboten werden.

Letztendlich setzt nun auch der Suchmaschinen-Riese Google das responsive Verhalten einer Webseite voraus, um ein entsprechend gutes Ranking ab dem 21.04.2015 zu erhalten (siehe unseren Blogartikel zum Thema Aufgepasst! Google führt neuen Rankingfaktor "Mobiltauglichkeit" ein! Ist Ihre Behördenwebsite schon mobile-friendly? http://bit.ly/1B8Fw79).

Was muss beim "Responsive Design" beachtetet werden?

Wenn Sie sich für eine responsive Webseite entschließen sollten Sie dabei beachten, dass Sie ein neues Design- und Bedienkonzept benötigen. Warum das so ist? In der Regel geht man bei der Konzepterstellung nach dem "mobile first"-Prinzip vor. Man konzipiert also die Webseite für die kleinste Auflösung und entwickelt darauf basierend die Darstellungs- und Bedienformen für die höheren Geräteklassen. So werden bspw. die Inhalte beim Smartphone eher untereinander angezeigt und bei den größeren Geräten kann man dann schrittweise die Inhalte auch nebeneinander anordnen. Diesen Effekt nennt man in Fachkreisen "Flow". Wie sich die Elemente einer Webseite anordnen können, sehen Sie in der unteren Abbildung der Referenzseite von publicplan. So sieht man im PC und dem Laptop 4 Referenzkacheln in einer Reihe, wohingegen bei Tablet nur 2 Kacheln und beim Smartphone nur eine Kachel pro Reihe sichtbar ist.

 

Responsive Webdesign

 

Genau anders herum muss man beim Einstellen von Bildern, Videos usw. vorgehen - für die höchste Auflösung und damit auch beste Darstellungsform müssen die Bilder in einem geeigneten Format bereit stehen. Für die kleineren Geräteklassen hingegen - bei denen Datenvolumen manchmal nicht nur Geld sondern auch bei einer langsamen Verbindung Nerven kosten - müssen die großen Bilder zwingend heruntergerechnet und -skaliert werden. Damit Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren, empfehlen wir auf Vektoren-basiertes Bildmaterial, zum Beispiel SVG-Dateien oder Icon-Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel händisch optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle (alten) Browser unterstützen SVG-Formate. Eine schnell geladene Website ist aber nicht nur aus Nutzersicht freundlich, sondern auch aus Sicht der Suchmaschine ein "muss".

Durch die große Anzahl der mobilen Endgeräte muss in der Folge dann auch umfangreich getestet werden, ob sich Texte und Inhalte dem jeweiligen Endgerät anpassen. Dabei sind nicht nur die verschiedenen Varianten der Browser und mobilen Betriebssysteme relevant, sondern auch die physischen Auflösungen und Bildschirmgrößen der Endgeräte.

Bei der Programmierung spielen so genannte "break points" eine Rolle. Dabei handelt es sich um Pixelwerte oder -spannen, die denen sich die Internetseite in einem bestimmten Layout darstellt. Wird so ein "break point" überschritten, verändert sich das Layout.

Um die beschriebenen Merkmale "live" ansehen zu können, empfehlen wir Ihnen die Website vergabe.NRW unter http://www.vergabe.nrw.de.

 

Weboberfläche Vergabe NRW

 

Zusammenfassung

Warum ist "responsive design" gerade in der E-Government Branche ein Muss? Auf diese Frage gibt es eine deutliche Antwort: Weil Ihre Zielgruppe (Bürger, Unternehmen) heutzutage zunehmend "mobil" im Internet unterwegs ist. Ist Ihre Webseite nicht attraktiv und mobil-tauglich, springt Ihnen der Webseitenbesucher ab und wendet sich einer für ihn übersichtlichen Seite zu. Darüber hinaus wird die Sichtbarkeit und Findbarkeit bei Google ab dem 21.04.2015 deutlich leiden, wenn Ihre Internetseite nicht die wesentlichen Kriterien der Mobiltauglichkeit entspricht.

Damit Ihnen das nicht passiert, sind wir für Sie da! Wir konzeptionieren Ihre neue Webseite nach Ihren Vorstellungen, ohne dabei Ihre Zielgruppe zu vergessen! Nach einem mit Ihnen abgestimmten Konzept setzen wir Ihnen Ihre Webseite "responsive" um und begleiten Sie bei der Weiterentwicklung und täglichen Betreuung.

Haben wir Ihr Interesse geweckt? Kontaktieren Sie uns gerne unter:

Tel.:+49 (0) 211 635501-80

Email: infoatpublicplan.de

Zum Schluss noch ein paar Worte über uns:

Die publicplan GmbH entwickelt kundenspezifische Softwarelösungen für die Öffentliche Hand. Unsere Kernkompetenz liegt in der innovativen Umsetzung von web- und Open Source-basierten Lösungsideen. Im Falle einer responsiven Webseite analysiert die publicplan GmbH Ihre bestehende Homepage und erarbeitet ein Konzept für eine mobiltaugliche Oberfläche, die auf die Bedürfnisse der Zielgruppe zugeschnitten ist. Nach der Konzeptionierung programmieren wir diese mittels dem Content Management System Drupal, welches sich hervorragend für komplexe Portale einsetzen lässt. Weitere Referenzprojekte von publicplan finden Sie auf unsere Referenzseite.