Responsive Webdesign unverzichtbar
Responsive Webdesign ist heute in aller Munde und nimmt an Wichtigkeit täglich zu. Für jede Webseite, die etwas erreichen soll, ist es längst unverzichtbar, sich an die verschiedenen verfügbaren Endgeräte anzupassen. Es gilt, schnellstmöglich zu reagieren!
Was ist Responsive Webdesign?
In der Internet-Entwicklerszene hört man das Stichwort „Responsive Webdesign“ schon seit einiger Zeit. Wichtiger wird es nun, da immer mehr Menschen mit Mobilgeräten im Internet surfen. Der Begriff Responsive Webdesign bedeutet nichts anderes, als dass das Design einer Webseite auf die aktuelle Umgebung des Users reagiert und somit auf allen Geräten und mit allen Browsern optimal dargestellt wird. Die Inhalte müssen gut aussehen, benutzbar und komplett zugänglich sein. Das gilt für große Monitore, Tablet-PCs, Laptop-Bildschirme und Smartphones in derselben Weise. Dieses Ziel kann jedoch nie völlig erreicht werden. In der Regel scheitert es schon am Testen. Man müsste sämtliche Browser mit sämtlichen Geräten ausprobieren, um ausschließen zu können, dass die Seite bei einer der Kombinationen nicht richtig angezeigt wird.
Wie funktioniert Responsive Webdesign?
Für Responsive Webdesign kommt CSS und HTML5 zum Einsatz. Berücksichtigt werden die Faktoren Bildschirmgröße, Auflösung, verwendete Browser, Orientierung von Quer- oder Hochformat. Je nachdem werden dann Größen und Platzierungen von Bildern, Spalten und Schriften angepasst. Es kommt beim Responsive Design aber noch auf mehr an, als das. So werden die Seiten häufig anders strukturiert, wenn ein Nutzer beispielsweise mit einem Mobilgerät online ist. Die Informationen sollten aber auch trotz veränderter Struktur für alle Nutzer gleichermaßen zugänglich sein.
Was macht gutes Responsive Design aus?
Richtig gutes Responsive Webdesign benötigt nur eine Seitenversion für alle Nutzer. Je mehr die Seite getestet wird, desto besser ist das für die Nutzbarkeit an sämtlichen Geräten und mit allen Browsern. Wer die Möglichkeit hat, sollte die Seite unter Mac, PC, iPhone, iPad, Android, 7 Phone und Notebook testen. Zu den wichtigsten Browsern zählen Internet Explorer, Firefox, Opera und Safari/Chrome. Da es aber sehr viele Versionen jedes Browsers gibt, sollte man sich die Logfiles der Seite ansehen, um zu entscheiden, welche relevant sind und welche man vernachlässigen kann.
Das Layout muss für User an mobilen Endgeräten leicht zu bedienen sein. Das bedeutet, Schaltflächen müssen großzügig bemessen sein und mehrere Spalten sind zu meiden. Damit Text auch auf den eher kleinen Smartphone-Displays gut lesbar ist, sollte die Schrift relativ groß sein und soll den User am hochauflösenden großen Bildschirm nicht „erschlagen“. Bestenfalls werden die jeweiligen Bedürfnisse erkannt und an das Gerät angepasst. Responsive Webdesign kann erkennen, welche Auflösung verwendet wird und stellt das Layout automatisch um. Texte werden skaliert und Bilder eventuell anders strukturiert. Dies funktioniert dank der CSS3 Queries, die verantwortlich sind für das Erkennen der Auflösung.
Alternativen zu Responsive Webdesign
Eine Alternative zu responsive Design sind Apps und Mobil-Versionen. Auf diese Weise bieten Seitenbetreiber ihren Usern eine gute Experience. Ob und welche Variante man für die jeweilige Seite wählt, ist abhängig vom Einzelfall. Wichtig ist allerdings immer, dass die User nicht zur Nutzung einer Version gezwungen werden. Sie sollten es zwar so komfortabel wie möglich haben, also das System sollte sich merken, welche Version zuvor verwendet wurde, doch sollte stets die Möglichkeit bestehen zu wechseln. Oft suchen User andere Inhalte oder bevorzugen dann eine andere Optik.
Fazit
Ob die eigene Site kompatibel ist für mobile Endgeräte kann man selbst testen. Sind Bilder und Spalten auf dem Smartphone nur teilweise oder gar nicht zu sehen, dann sind Anpassungen dringend erforderlich. Durch Responsive Webdesign werden auch User mit innovativen Geräten angesprochen. Dies ist in Zeiten von Smartphone, Tablet und Netbook von immer größer werdender Bedeutung.
So sieht unsere Seite in einer kleinen Auflösung aus:
Tags:
- responsive