Responsive Web Calculator

So nutzt du den Responsive Web Calculator

Responsives Webdesign ist ein zentraler Faktor für eine gute User Experience und wirkt sich indirekt auch positiv auf SEO aus. Besonders Schriftgrößen, Abstände und Layouts sind oft eine Herausforderung. Was auf dem Desktop stimmig aussieht, wirkt auf dem Smartphone schnell zu groß.

Viele Entwickler lösen das mit Media Queries. Es gibt jedoch eine einfachere und effizientere Lösung: die CSS Funktion clamp(). Mit ihr legst du in nur einer Zeile eine minimale, eine flexible und eine maximale Größe fest, ganz ohne zusätzliche Breakpoints.

Unser Responsive Web Calculator unterstützt dich dabei. Wähle deine Werte in rem, px, em, vw oder Prozent und das Tool erzeugt sofort den passenden clamp() Code für dich.

• Wähle eine Einheit, in der du deine Werte eingeben möchtest. Du hast rem, px, em, vw und % zur Auswahl. Für ein barrierefreies Webdesign empfehlen wir, wenn immer möglich, rem Werte zu nutzen.
• Lege die Mindestgröße und die maximale Größe für deine gewünschte CSS-Eigenschaft fest (siehe Anwendungsbeispiele).
• Lege den kleinsten und größten Viewport für deine Webseite fest. Zwischen diesen beiden Viewports wird sich die CSS-Eigenschaft (z.B. font-size) proportional und dynamisch dem Viewport des Nutzers anpassen. Die Eigenschaft wird beim kleinsten festgelegten Viewport die Mindestgröße haben und diese nicht unterschreiten und beim größten Viewport die maximale Größe haben und diese nicht überschreiten.  
• Kopiere den ausgegebenen Wert in deine gewünschte CSS-Eigenschaft.

Hier ein Beispiel:
Wir gehen davon aus, dass die HTML-Grundgröße auf 62,5 % gesetzt ist. Damit entspricht 1 rem = 10 px.

Du möchtest eine Überschrift mobil 2.4 rem (24 px) und auf dem Desktop 7 rem (70 px) groß haben. Die maximale Breite deines Viewports ist 162 rem (1620 px). Für dein Design soll die mobile Schriftgröße von 2.4 rem (24 px) bereits bei einem Viewport von 48 rem (480 px) erreicht sein. Ist der Viewport kleiner, zum Beispiel beim iPhone 6, dann bleibt die Schrift bei 2.4 rem stehen.

Die CSS Ausgabe: clamp(2.4rem,0.46rem + 40.35vw,7rem); kopierst du dir nun zu deiner CSS-Eigenschaft in dein Stylesheet. Für das Beispiel der Schriftgröße sieht das dann so aus:

• font-size: clamp(2.4rem,0.46rem + 40.35vw,7rem);

Warum ist responsive Webdesign wichtig für SEO?

Vielleicht denkst du dir jetzt: Was hat denn responsives Webdesign mit SEO zu tun?

Wir leben in einer Welt, in der der mobile Traffic höher ist als der Desktop-Traffic. Mobilfreundliches Webdesign ist daher wichtiger denn je. Ob deine Webseite mobil optimiert ist, kannst du mit dem Mobile Friendly Test prüfen.

Weiterhin hat Google im März 2021 auf den Mobile-First Index umgestellt. Wenn deine Webseite für Mobilgeräte und deren Nutzer nicht optimiert ist, hat das negative Auswirkungen auf deinen SEO-Erfolg. 

Verbessert die Nutzer­freund­lichkeit der Webseite

Gerade im deutschsprachigen Raum haben wir oft Wörter, die sehr lang sein können. Bei großer Schriftgröße, z.B. in Überschriften, ragen die gern mal an der Seite raus und werden abgeschnitten. Blöd für den Nutzer und schlecht für die Usability. 

Google möchte den Besuchern einer Webseite aber Ergebnisse zeigen, die die Nutzerfragen befriedigen. Mit abgeschnittenen Texten oder verzogenen Layouts wird das schwer möglich. 

Ein responsives Webdesign ist daher essentiell für eine positive Nutzererfahrung und Google wird Webseiten, die darauf achten und dem Nutzer die positive Erfahrung bieten, belohnen.

Schnellere Ladegeschwin­digkeit

Seitenladegeschwindigkeiten sind ein anerkannter und wichtiger Rankingfaktor. 

Schlechter oder zu viel überflüssiger Programmiercode verringern die Ladezeit. 

Beim responsiven Webdesign kommen sogenannte CSS media queries zum Einsatz. Damit können für definierte Viewportgrößen spezifische CSS-Eigenschaften für beliebige Elemente festgelegt werden. Bei komplexen Designs sind manchmal viele media queries erforderlich. Das erzeugt eine Menge Code, der verarbeitet werden muss.

Mit der clamp() Funktion lassen sich viele Zeilen CSS-Code sparen. Durch die Formel aus unserem Tool passen sich die Größen proportional dem Viewport an. Anstatt viele media queries für Desktop, Tablett und Mobile ist nur noch eine Zeile Code notwendig. 

Weniger Code = schnellere Ladezeit!

Verringerung der Absprungrate

Das Layout ist zerschossen? Die Texte abgeschnitten? Das schafft nicht gerade Vertrauen in die Webseite und der Nutzer springt zurück zur Suche und klickt lieber auf ein anderes Ergebnis. 

Achtest du auf responsives Webdesign, kann dir das nicht passieren. Sind jetzt noch die Texte gut und erfüllen die Suchintention, wird der Nutzer zum einen länger auf der Seite bleiben und zum anderen auch das finden, was er gesucht hat. Die Absprungrate wird geringer.

Google kann das Verhalten der Nutzer messen und wird Webseiten mit positiven Nutzersignalen höher bewerten.

Anwendungsbeispiele für die Praxis

font-size: Schriftgrößen für Headlines und Texte

Videobeispiel:

• font-size: clamp(32px,9.22px + 4.75vw,88px);

margin: Außenabstände

Videobeispiel:

• margin-bottom: clamp(60px,34.29px + 5.36vw,120px);

padding: Innenabstände

Videobeispiel:

• padding-top: clamp(16px,9.14px + 1.43vw,32px);
• padding-bottom: clamp(16px,9.14px + 1.43vw,32px);
• padding-right: clamp(32px,18.29px + 2.86vw,64px);
• padding-left: clamp(32px,18.29px + 2.86vw,64px);
• font-size: clamp(16px,14.29px + 0.36vw,20px);

letter-spacing: Zeichenabstände bei Texten

Videobeispiel:

• letter-spacing: clamp(0.2em,-0.06em + 0.05vw,0.8em);

width: Breite von Elementen

Videobeispiel:

• width: clamp(60px,-25.42px + 20.34vw,300px);

Wie gut ist der Browser Support für die CSS clamp() Funktion

Über 95 % aller Browser unterstützen die CSS-Funktion clamp() inzwischen problemlos. Nur sehr alte Versionen von Safari, Internet Explorer oder Nischen-Browsern wie Opera Mini zeigen Einschränkungen. Für moderne Projekte ist clamp() damit heute absolut zuverlässig einsetzbar.