Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Die Basics des Responsive Webdesign in 9 schicken GIFs

    Die Basics des Responsive Webdesign in 9 schicken GIFs

Die Basics des Responsive Webdesign. (Grafik: Froont)

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Responsive Webdesign: Früher war alles leichter

Früher war alles einfacher: Webdesigner konnten sich an festen Größen und Standards orientieren und ihre Projekte entweder auf die Desktop-Ansicht oder das mobile Internet ausrichten. Diese Zeit ist vorbei – wer möchte, dass Nutzer egal an welchem Ort und egal, welches Endgerät sie nutzen, sorgenfrei die eigenen Inhalte konsumieren können, muss sich mit Responsive Webdesign auseinandersetzen. Und das ist manchmal gar nicht so einfach.

Sandijs Ruluks von Froont. (Bild: Twitter)
Sandijs Ruluks von Froont. (Bild: Twitter)

Sandijs Ruluks kennt das: Der Grafikdesigner aus Riga bezeichnet sich selbst als „Designer, der aus der Print-Welt in die Welt des Webs gekommen ist.“ Auch er hat sich die neuen Denk- und Gestaltungsmuster zunächst hart erarbeiten müssen. Zusammen mit Freunden hat er vor Kurzem Froont gegründet, eine Design-Plattform, auf der Webdesigner direkt im Browser arbeiten und mit anderen Designern kollaborieren können. Auf dem Froont-Blog findet sich auch das gemeinsam verfasste „Open Web Design Manifesto“.

Für alle, die ebenfalls manchmal Schwierigkeiten damit haben, das Responsive-Design-Konzept zu verstehen, hat Ruluks neun GIFs erstellt, die die wesentlichen Prinzipien einfach und schnell veranschaulichen. Freundlicherweise hat er sie uns zur Verfügung gestellt.

1. „Responsive Webdesign“ versus „Adaptive Webdesign“

Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. „Die beiden Ansätze ergänzen sich, daher gibt es hier kein ‚richtig oder falsch‘“, schreibt Ruluks. Die Unterschiede verdeutlicht das erste GIF:

 

responsive_webdesign_adaptive_webdesign

2. Der Flow

Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.

 

04_flow-vs-static-2

 

3. Relative Einheiten

Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an, wie das nächste GIF zeigt:

 

 

responsive_webdesign_prinzip_relative_einheiten

4. Breakpoints

Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. „Aber nutzt Breakpoints mit Umsicht“, warnt Ruluks, „wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen“.

 

03_with-breakpoints-vs-without-breakpoints-1

 

5. Maximal- und Mindestwerte

Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.

 

07_max-width-vx-no-max-width-1

 

6. Verschachtelte Objekte

Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen. Das folgende GIF veranschaulicht das Container-Prinzip:

 

05_nested-vs-not-nested-1

 

7. „Mobile First“ und „Desktop First“

Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? „Technisch gesehen gibt es keine großen Unterschiede. Leg los und schau, welcher Ansatz besser für dich funktioniert“, so Ruluks.

 

08_desktop-first-vs-mobile-first-3

8. Webfonts und Systemschriften

Die Wahl der eingebetteten Schriften kann einen Einfluss auf die Ladezeiten der Webseite haben. Während es Webfonts zwar in viel mehr Varianten gibt und sie eine Seite sehr schön individualisieren können, werden die in den Betriebssystemen der Nutzer vorinstallierten „System Fonts“, so Ruluks, „schnell wie der Blitz“ angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.

 

06_system-fonts-vs-webfonts-1

 

9. Bitmaps und Vektoren

Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle Browser unterstützen SVG-Formate. „Wählt also mit Bedacht“, so das Resümee von Sandijs Ruluks.

 

09_vectors-vs-images-1

Hier geht's zum Original-Beitrag „Nine Basic Principles of Responsive Webdesign“ von Sandijs Ruluk auf dem Froont-Blog. Hilfreich für euch ist vielleicht auch unsere Artikelreihe zum Einstieg in flexible Projekte mit Responsive Webdesign.

Finde einen Job, den du liebst

3 Reaktionen
MarcoBosse
MarcoBosse

Bedarf den Kunden das zu erläutern ist auf jeden Fall da. Ich habe auch schon extra dafür eine Gif-Animation erstellt.
http://www.bosse-media.de/wp-content/uploads/responsive_webdesign.gif

Antworten
Marco.Willi
Marco.Willi

Schön aufs Wesentliche reduziert. Hilft vielleicht, die Prinzipien so manchem Kunden einfacher zu erläutern. Danke!

Antworten
Toni
Toni

Geile GIFs. Für mich lösen die Grid von Zurb Foundation und Google WebFonts alle obere Probleme.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen