bevorzugte Einheit wählen:
Die Mindestgröße muss kleiner sein als die maximale Größe.
Ergebnis
Choose your preferred unit:
The minimum size must be smaller than the maximum size.
Result
Eine mobilfreundliche Webseite ist für SEO unerlässlich. Genau hier kommt responsive Web Design ins Spiel. Oftmals machen aber Schriftgrößen, Paddings und Margins einem das Leben schwer. Auf dem Desktop genau richtig, mobil zu groß. Abhilfe schaffen da CSS media queries.
Doch es gibt noch einen besseren Weg ohne media querris: die clamp() CSS Funktion!
Mit unserem Tool kannst du dir für rem, px, em, vw und % Werte die clamp Funktion dynamisch ausgeben lassen. Nur noch eine Zeile Code nötig!
Hier ein Beispiel: Du möchtest eine Überschrift mobil 24px und Desktop 70px groß haben. Die maximale Breite deines Viewports ist 1620px. Für dein Design soll die mobile Schriftgröße von 24px bei einem Viewport von 480px erreicht sein. Ist der Viewport kleiner (wie beim iPhone 6), dann bleibt die Schrift aber 24px groß. Die Einträge im Tool wären dann wie folgt:
Die CSS Ausgabe: clamp(24px,4.63px + 4.04vw,70px); kopierst du dir nun zu deiner CSS Eigenschaft in dein Stylesheet. Für das Beispiel der Schriftgröße sieht das dann so aus:
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 den je. Ob deine Webseite mobil optimiert ist, kannst du mit dem Mobile Friendly Test von Google 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.
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.
Seitenladegeschwindigkeiten sind ein anerkannter und wichtiger Rankingfaktor.
Schlechter oder zu viel überflüssiger Programmiercode verringern die Ladezeit.
Beim responsive 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!
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.
Tool-Tipp
Nutze unser neues kostenloses Search Intent Tool, um die Suchintention von Keywörtern automatisch zu bestimmen.
Videobeispiel:
Videobeispiel:
Videobeispiel:
Videobeispiel:
Videobeispiel:
Fast 92% aller Browser kommen mit der clamp Funktion gut klar, Tendenz steigend. Ältere Safari Versionen machen hier manchmal Probleme.
Browser Support für CSS clamp(); Quelle: caniuse.com