Zum Hauptinhalt springen

Responsives Webdesign

Responsives Design

Heutzutage werden Websites in der Regel responsiv angelegt. Zu groß ist die Anzahl unterschiedlicher Displaygrößen. Es reicht von 320 Pixel in der Breite bis hin zu 8000 Pixel und mehr. Dabei bedeutet eine niedrige Pixelanzahl nicht immer ein Smartphone und eine hohe Pixelanzahl Desktop-Monitore. Auch ein Tablet kann eine Pixelanzahl von 3000 in der Breite erreichen.

Der Sinn heutiger responsiver Websites besteht auch nicht darin, Smartphone von Tablets und Desktop-Monitoren zu unterscheiden. Früher gab es eine Version für Desktops. Im günstigen Fall bekam ein Mobilgerät eine eigene Version. Dabei orientierte sich der Webdesigner an den verfügbaren Geräten. Alle Geräte bis zu einer Bildschirmbreite von 768 Pixel wurde auf die mobile Website geleitet, der Rest durfte sich mit der Desktop-Version anfreunden.

Heute sind die verfügbaren Geräte vielfältiger. Ein Smartphone ist nicht mehr so leicht von einem Tablet, ein Tablet nicht mehr so leicht von einem Desktop-Gerät zu unterscheiden. Überall steigt die Pixelanzahl. So ist es kaum verwunderlich, dass es mittlerweile kaum noch reine Websites für mobile Geräte gibt. Es ist auch schwer, ein mobiles Gerät von anderen zu trennen. Nur weil ein Tablet eine Displaygröße von zehn Zoll hat, muss der Webbrowser nicht in Vollbilddarstellung laufen. Auch auf einem Tablet kann es nötig sein, die Variante für ein Smartphone anzuzeigen.

Dank responsiver Websites bleibt der Quellcode für alle Geräte identisch. Eine Änderung eines Inhaltes muss nicht auf zwei Seiten stattfinden. Die mobile Website verschmilzt mit der Website für Desktops. Ob allerdings alle Objekte immer sichtbar sind, ist eine andere Frage. Mit der CSS-Eigenschaft display können Elemente auch versteckt werden. Unwichtige Elemente können auf kleineren Bildschirmgrößen gerne ausgeblendet werden. Zudem ist es über JavaScript möglich, Inhalte für kleinere oder größere Bildschirme nachzuladen. Weiteres können Sie in unserem Seminar Responsive Webdesign erlernen.

Inhalt sollte an erster Stelle stehen

Der Inhalt der Website sollte im Vordergrund stehen. Dieser sollte immer sichtbar sein. Im besten Fall auf den ersten Blick. Auf Smartphones erst weit nach unten zu scrollen, um den eigentlichen Inhalt zu sehen, wird selten erfolgreich sein. Ein großes Headerbild funktioniert auf einem Desktop-Monitor gut, auf einem Smartphone eher weniger. Oder würden Sie freiwillig eine längere Zeit nach unten scrollen, wenn Sie auf einer anderen Website den wichtigen Inhalt sofort sehen?

Verbesserte Mediaqueries in CSS3

Dank der Mediaqueries in CSS3 ist es leicht, dieses Headerbild auf großen Bildschirm anzuzeigen und bei kleineren Bildschirmgrößen auszublenden. Dabei ist es eine persönliche Frage des Geschmacks, wie herum dies gelingen soll. Es ist möglich, das Headerbild standardmäßig anzuzeigen und nur bei kleineren Bildschirmen auszublenden. Es ist aber auch anders herum möglich: Standardmäßig das Headerbild auszublenden und nur bei größeren Bildschirmen anzuzeigen. Dies wäre dann eine Art mobile first.

Früher wurden responsive Websites nach unten entwickelt. Es entstand zuerst die Desktopversion, dann wurde diese klein „gezogen“. Dies bedeutete, dass auch Smartphones alle Inhalte der Desktopversion zuerst luden. Dann wurden die nicht benötigten Elemente ausgeblendet, im Quelltest waren sie aber immer noch. Die Mobilfunkunternehmen freuten sich, das noch verfügbare Datenvolumen sank und der Kunde konnte jede Woche ein neues Datenpaket kostenpflichtig bestellen.

Mobile first

Mobile First
Mobile First ist ein Ansatz bei responsivem Webdesign.

Mobile first beginnt zuerst bei den kleinen Geräten. Es wird zuerst eine Website für die kleinen mobilen Geräte entwickelt. Dabei werden die Grafiken klein gehalten, um Bandbreite zu sparen. Erst dann wird das Design auf den Desktop übertragen. Nun kommen größere Bilder zum Einsatz. Auch unser Headerbild darf sich jetzt endlich in voller Größe zeigen.

Beim Ansatz mobile first wird auch die Navigation angepasst. Das bekannte Hamburger-Menü ist auf Smartphones fast überall zu finden. Auf Desktop-Geräten sollten Sie im Jahr 2016 noch Abstand davon nehmen. Die Nutzer sind heute noch nicht bereit, ein Hamburger-Menü auf den Desktop zu suchen, wie eine amerikanische Studie zeigt. Wenn eine Navigation nicht auffindbar ist, so wird der Besucher eventuell nicht das finden, was Sie anbieten und der Besucher möchte. Nicht jede Website hat eine Suche, nicht jeder Besucher möchte die Suche nutzen. Nutzen Sie auf einer neuen Website sofort die Suche, oder stöbern Sie erst einmal?

Veröffentlicht am
Autor: Vertrieb allskills Training
Kategorien: Internet und Wissen

Kommentar schreiben

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

Ein Gedanke zu “Responsives Webdesign”

  • Gustav Sucher
    Geschrieben am 22. Oktober 2018 um 7:26

    Hallo, Responsive Webdesign scheint seit Jahren für Erfolgreich. Zum Glück habe ich das von Anfang unterstützt. So habe ich einige Kunden glücklich machen können. Zum Glück wendet sich auch das Web zum positiven und ersetzt all die Aufwendigen Dinge durch einfachere. Vielen Dank für den super Blog!