9 Grundlegende Regeln für Responsive Image Galleries
Responsive Design ist ein wesentlicher und notwendiger Bestandteil der Webentwicklung. Eines der größten Probleme mit Responsive Web Design sind in letzter Zeit Bilder. Viele diskutieren die beste Möglichkeit, Bilder auf einer responsiven Website anzuzeigen. Und was ist dann mit Bildergalerien?
Bildergalerien sind weitaus komplexer als Einzelbilder; Es gibt noch mehr Variablen und Dinge, über die Sie nachdenken sollten, wenn Sie ganze reaktionsschnelle Bildergalerien auf Ihrer Website implementieren. Werfen wir einen Blick auf einige hilfreiche Tipps, um Responsive Bildergalerien richtig zu implementieren.
1) Slideshows: Nav ausblenden, wann immer möglich
Sie verfügen möglicherweise nicht über Navigationselemente auf einem Tablet oder mobilen Gerät, aber auf einem Desktop ist es eine gute Idee, diese Elemente auszublenden, bis sie benötigt werden. Elemente wie Vorwärts- und Rückwärtspfeile und Navigationspunkte sollten so eingestellt sein, dass sie nur angezeigt werden, wenn sich jemand über die gleitende Bildergalerie bewegt. Dadurch werden Ablenkungen vermieden und Konflikte zwischen Inhalts- und Navigationselementen vermieden. Die gesamte Erfahrung fühlt sich weniger durcheinander.
2) Vermeiden Sie zu viele Portraitbilder
Wenn Sie eine Galerie implementieren, bei der es sich um ein Raster aus Bildern handelt, sollten Sie Bilder auswählen, die landschaftsorientiert oder, wenn möglich, quadratisch sind. Dies macht es einfacher, sie auf einem kleinen Bildschirm anzuzeigen. Porträtbilder wären auf einem Smartphone im Hochformat gut, aber der große Betrachtungsbereich eines landschaftsorientierten Telefons macht es schwierig, Porträtbilder zu betrachten. Landschaft ist am besten, aber Sie können sich mit Platz zufrieden geben, wenn Landschaft keine Option ist. Alle Bilder können so eingestellt werden, dass sie in einen Ansichtsbereich passen, aber Hochformatbilder auf einem Querformat-Bildschirm werden sehr klein angezeigt. Ihre Bilder werden nicht so scharf dargestellt wie quadratische oder Querformatbilder, die mehr Fläche des Bildschirms ausfüllen und größer erscheinen. Achten Sie bei der Auswahl der Bilder darauf, die Person, die sie betrachtet, nicht zu vergessen.
3) Verwenden Sie Gesten auf Tablets & Handys
Menschen lieben es, Gesten auf ihren Touchscreens zu verwenden. Sie fühlen sich stärker, wenn es sich anfühlt, als würden sie ein Bild verschieben, weil die Erfahrung eindringlicher ist. Der Versuch, winzige Pfeile oder Navigationspunkte auf einem mobilen Gerät zu tippen, ist zu mühsam. Es ist viel natürlicher, in der Lage zu sein, einen Finger zu nehmen und ein Bild nach oben, unten, links oder rechts zu wischen.
4) Vermeiden Sie Leuchtkästen: Deaktivieren Sie sie auf dem Handy
Wenn Sie Bilder von Produkten haben, wie Maschinen oder Gegenstände, die genauer betrachtet werden sollten (Stoff, Schmuck usw.), dann ist ein Leuchtkasten mit größeren Bildern sinnvoll. Auch dann sollten sie nur auf dem Desktop verwendet werden. Wenn Sie die Größe von Tablets und mobilen Bildschirmen ändern, sollten Sie Lightboxen deaktivieren. Sie können eine Reihe von Benutzererfahrungsproblemen verursachen. Wenn etwas passiert und die Lightbox nicht korrekt dimensioniert ist, können sie möglicherweise nicht auf die Exit-Taste zugreifen, oder Bilder werden möglicherweise nicht richtig angezeigt.
5) Wenn Sie Navigationselemente verwenden, machen Sie sie unauffällig
Wenn Sie eine gleitende Bildergalerie mit einer erheblichen Anzahl von Dias haben, ist eine Navigation sinnvoll. Sie möchten die Benutzer nicht warten lassen, um alles durchzugehen. Sie können einfach mit ihrer eigenen Geschwindigkeit durchklicken, reinkommen, bekommen, was sie brauchen, und aussteigen. Wenn Sie diese Elemente verwenden, achten Sie darauf, sie an Stellen zu platzieren, die nicht im Weg sind. Keine Navigationspunkte über Text oder andere Links führen. Vermeiden Sie außerdem zu komplexe Steuerelemente. Diese nehmen viel Platz in Anspruch, lenken Benutzer vom Inhalt ab und erzeugen ein überladenes Aussehen. Mit Punkten, auf die Benutzer klicken können, um durch bestimmte Bilder zu blättern oder sie zu überspringen, und vorwärts und rückwärts gerichtete Pfeile zu haben, ist reichlich. Übertreib es nicht!
6) Mischen Sie keine Bilder und Videos
Das Mischen verschiedener Medien ist in der Regel in Ordnung, aber das Mischen von Videos dort, wo sie nicht erwartet werden, kann zu Problemen führen. Sie möchten nicht, dass ein Benutzer versehentlich ein Video einleitet, das Sound für alle hörbar abspielt. Trennen Sie Videos und Bilder, damit sie wissen, was sie erwartet. Niemand mag diese Art von Überraschungen.
7) Stellen Sie sicher, dass die Bilder nicht über ihre maximale Breite hinaus skaliert werden
Dies ist wichtig, da Sie eine pixelierte Skalierung von Bildern vermeiden können, die für einen Raum zu klein sind. Bilder sollten groß genug sein, um 100% eines mobilen Geräts zu füllen (in den meisten Fällen), aber Desktop-Sites sollten nur die maximale Breite auf 100% setzen. Ich habe einige Fälle gesehen, in denen jemand eines dieser großen 27-Zoll-Displays hat, und wenn sie die Browser-Breite herausziehen, skaliert das Bild mit ihm über die beabsichtigte Größe hinaus.
8) Bildskalierung
Wenn Sie Bilder skalieren, stellen Sie sicher, dass sie nicht nach oben, sondern nach unten skalieren. Am besten legen Sie die genauen Abmessungen für Ihre Bilder fest. Häufig wird ein Prozentwert für eine Dimension verwendet, während die andere Dimension auf "Automatisch" gesetzt ist. Wenn ein Bild beispielsweise 50% der Breite des Browsers umfassen soll, legen Sie die Bildbreite auf 50% und die Höhe auf auto fest .
9) Vermeiden Sie Bildbeschriftungen
Bildunterschriften oder anderer begleitender Text können für Sie und Ihre Benutzer alle möglichen Probleme verursachen. Das erste Problem ist, dass es schwierig ist, den Text auf einem mobilen Gerät anzupassen. Mit Smartphones haben Sie nur begrenzten Platz, aber wenn Sie versuchen, Text hinzuzufügen, kann sich das gesamte Erlebnis überladen und zusammengepfercht anfühlen. Ein weiteres Problem ist, dass Sie in der Menge an Text begrenzt sind, den Sie verwenden können. Wenn Sie eine Beschriftung oder einen zusätzlichen Text hinzufügen, wird die Variable reaktionsfähiger Text in die Mischung eingefügt. Sie müssen Wortumbrüche berücksichtigen, und wie mehrere Textzeilen am Ende mit Ihrem Bild aussehen werden. Wenn der Text als Überlagerung verwendet wird, müssen Sie sich auch damit befassen, wo er über das Bild fällt. Leichter Text über dem hellen Bereich des Bildes macht den Text unlesbar. Kontrast ist der Schlüssel, und jedes Bild ist anders.
Fazit
Das Endergebnis, wenn es um jeden Aspekt des Webdesigns geht, ist, dass es gut funktionieren muss und den Benutzer berücksichtigt. Wenn niemand Ihre Website benutzen kann, werden sie nicht zurückkommen. Wenn Sie diese einfachen Gebote und Verbote der Responsive-Bildergalerien befolgen, werden die Nutzer beim Betrachten Ihrer Bilder nicht auf allgemeine Probleme stoßen.