Grundlagen des responsiven Webdesigns


Grundlagen des responsiven Webdesigns

320, 768 und 1024 bedeuten Ihnen diese Nummer etwas? Diese Nummern sind kein Da Vinci Code, sondern die Breiten in Pixeln, die viele Designer mit den Breiten von Tablets und vollwertigen PCs verbinden.

Und was wenn die Bildschirme von dem Handy, Tablet und Tischrechner nicht 320/768/1024 Pixel breit ist? Es gibt viele verschiedenen Breiten der Bildschirmen auf verschidenen Geräten und wir sehen responsive Design noch durch die Zahlen 320,768 und 1024.

Für diejenigen, die in diesem Gebiet keine Experten sind, responsives Webdesign (reagierendes, regulierbares) ist ein Zutritt zu dem Webdesign, in dem die Webseite so gemacht wird, dass die eine optimale Erfahrung den Besucher der Webseite ermöglicht. Bei diesem Zutritt ist der Inhalt leicht lesebar,die Änderungen der Navigationsgröße sind minimale.

Was passiert mit den Größen die zwischen 320/768/1024 sind?

responsive-webdesign-beispiel

Quelle: uberebayshopdesign.com

Dank unserer langjährigen Arbeit in dem Webdesign-Gebiet, haben wir viele Webseiten gesehen, die diese drei Breakpoints benutzen, in denen die Stylen für Layout deklariert sind.

Das ist aber viel besser, als eine altmodische statische Webseite, die nur für den Tischcomputer passend ist, zu haben.Solches Design wird auch auf den Bildschirmen anderen Größe funktionieren, aber mit welchem Effekt?

Wenn die Bildschirmbreite kleiner als 768 Pixel ist, wird automatisch die Webseite für Handys erscheinen. Auch, wenn solcher Ihhalt auf dem Bildschirm mit der Breite kleiner als 1024 Pixel erscheint, wird der automatisch zu der Tabletgröße gewechselt.

Prozente oder Pixel?

Wenn Sie responsives Layout designieren, sollten Sie immer höhsten möglichen Dimensionen in Prozenten geben. Dimensionen in Prozenten ermöglichen gleichmäßige Verkleinerung und Vergrößerung des Inhalts auf den verschiedenen Bildschirmen.

Dieser Zutritt wird sicherlich ermöglichen, dass der Inhalt immer 90 Prozent der Bildschirmgröße auffüllt.

Der Inhalt ist am wichtigsten

Wenn Sie die Breakpoints wählen, sollten sie immer auf den Inhalt und nicht auf die Breiten des Bildschirmes passen. Statt dass Sie ein Design erstellen und danach modifiziern, sollten Sie entdecken, auf welche Breite beginnt der Inhalt mit dem Widerspruch.

Sie können mit dem Design in der Breite  1400 Pixel beginnen und danach verkleinern bis zu dem Moment des Widerspruchs. Auf dem Punkt, denn das nächste Breakpoint setzen und weitermachen. Am Ende haben wir 2, 6 oder 10 verschiedene Breakpoints.

Wir kommen zu der Schlussfolgerung, dass der Inhalt statt der Bildschirmgröße entscheidet. Mit so viele verschiedenen und neuen Geräten und Bildschirmgrößen, die monatlich auf dem Markt erscheinen, ist es unmöglich die Breakpoints für die responsiven Projekte zu definieren. Auch, wenn wir die Variablen wie die Bildschirmbreite benützen, ist es nicht einfach perfektes Layout für jede Bildschirmgröße zu bekommen.

Hauptregel: Designieren Sie nicht für die Bildschirmbreite sondern für den Inhalt

facebook
twitter
google
pinterest