Zurück zu Mobile Responsiveness

Was ist ein fließendes Raster?

6 Minuten Lesezeit

Fließende Raster sind Layoutstrukturen, die sich an die Bildschirmgröße anpassen, auf der eine Website angezeigt wird. Durch die Definition von Spaltenbreiten über Prozentsätze/relative Einheiten passen sich fließende Raster-Layouts an, wenn sich die Viewports auf einem Bildschirm ändern.

Wenn Sie Fluid Grids korrekt implementieren, können Sie die Funktionalität auf kleinen Smartphones, Desktop-Monitoren und Geräten dazwischen verbessern – beachten Sie jedoch, dass die pixelbasierten Messungen zu beengten/überdimensionierten Layouts führen können.

Profi-Tipp:
• Verwenden Sie CSS-Media-Queries für die weitere Layout-Anpassung, die auf bestimmte Bildschirmgrößen angewendet wird. Sehen Sie sich die Geräte an, die Ihr Publikum verwendet, und beginnen Sie mit diesen.
• Responsive Bilder und Fluid Grids sind unerlässlich, um die Leistung zu erhalten und eine konsistente Benutzererfahrung auf verschiedenen Geräten zu gewährleisten.
Die wichtigsten Punkte:
  • Verwenden Sie Fluid Grids für ein responsives Design
  • Bevor Sie sich zwischen Fluid Grids und einer der Alternativen entscheiden, sollten Sie Ihre Bedürfnisse bewerten
  • Websites mit Fluid Grids können je nach Gerät, auf dem Sie sie betrachten, unterschiedlich aussehen
Hocoos kleines Logo Antworten Mobile Reaktionsfähigkeit

Was ist ein fließendes Raster?

Wie unterscheidet sich ein fluides Grid von einem festen Grid?

Fluide Grids und feste Grids unterscheiden sich hauptsächlich in ihrer Flexibilität. Die Ränder/Spalten von fluiden Grids ändern ihre Größe basierend auf der Bildschirmgröße, während feste Grids die gleichen Spaltenbreiten beibehalten. 

Tiefer Einblick:
Browser-Entwicklungstools können Ihnen helfen, mehrere Bildschirmgrößen zu simulieren. Sehen Sie sich an, wie sich Ihre Website und ihre Fluid Grids basierend darauf anpassen.  

Was sind die Vorteile der Verwendung eines fluiden Grids im Webdesign?

Unternehmen könnten aus folgenden Gründen Fluid Grids in Webdesigns verwenden: 

  • Benutzererfahrung: Priorisieren Sie ein konsistentes Erscheinungsbild über alle Geräte hinweg, um eine reibungslosere Benutzererfahrung zu gewährleisten.

  • Adaptives Layout: Berücksichtigen Sie unterschiedliche visuelle Anforderungen und barrierefreie Technologien.

  • Zukunftssicher: Neue Bildschirmgrößen werden entstehen, wenn Hersteller aktualisierte Smartphone-, Tablet- und Desktop-Modelle herausbringen, und Sie müssen Ihre Website auf dem neuesten Stand halten. Fluide Grids sollten sich automatisch an verschiedene Bildschirmgrößen anpassen, daher sollten Sie dies bei der Entwicklung Ihrer Website berücksichtigen.

  • SEO: Erkunden Sie die potenziellen Auswirkungen einer responsiven Website auf die Suchmaschinenoptimierung (SEO). Berücksichtigen Sie, wie fluide Grids eine solche Website ermöglichen könnten. 

Welche Beispiele gibt es für Websites, die fluide Grids effektiv nutzen?

Einige bekannte Websites, die fluide Grids in ihren Webdesigns verwenden, sind: 

  • The Boston Globe: Neuenglands wichtigste Zeitung verwendet fluide Grids für die geräteübergreifende Nutzung von Artikeln.

  • CSS Tricks: Diese Webentwickler-Website verwendet fluide Grids.

  • A List Apart: Dieses Online-Magazin richtet sich an Webentwickler, Designer und Geschäftsinhaber, die ihre eigenen Websites erstellen. Es verwendet fluide Grids auf seinen Seiten.

Achten Sie beim Betrachten dieser Websites auf die Methoden, die Sie für Ihr eigenes Website-Layout übernehmen können. Sie sollten auch darüber nachdenken, ein Design zu wählen, das sowohl Fluid Grids verwendet als auch mit Ihrer Marke übereinstimmt. 

Fazit

Die Verwendung von Fluid Grids ist aufgrund ihrer Fähigkeit, verschiedene Geräteauflösungen zu berücksichtigen, weit verbreitet und trägt zu Responsive Webdesign-Praktiken bei. Im Vergleich zu Websites mit festem Raster erfordert diese Option möglicherweise mehr technisches Fachwissen. Die potenziellen Vorteile könnten jedoch die Herausforderungen überwiegen. 

Zukunftssicherheit, Barrierefreiheit, und UX sind alles inhärente Überlegungen bei der Implementierung von Fluid Grids. Zahlreiche Beispiele stehen zur Inspiration zur Verfügung, und es wird immer empfohlen, das Website-Design vor dem vollständigen Start zu testen.

Inhaltsverzeichnis

Weitere hilfreiche Artikel

BEREIT, IHR KLEINUNTERNEHMEN ZU STARTEN?

Wichtiger Hinweis: Die Informationen unseres Expertenteams sollen Ihnen ein allgemeines Verständnis des Prozesses der Webseitenerstellung und der Ihnen zur Verfügung stehenden Funktionen vermitteln. Es ist wichtig zu beachten, dass diese Informationen keine professionelle Beratung ersetzen, die auf Ihre spezifischen Bedürfnisse und Ziele zugeschnitten ist.
Lesen Sie unsere redaktionelle Standards für Answers-Inhalte.
Unser Ziel ist es, Sie in die Lage zu versetzen, eine großartige Webseite zu erstellen. Wenn Sie Fragen haben oder Unterstützung während des Erstellungsprozesses benötigen, zögern Sie nicht, Kontaktieren Sie uns. Wir helfen Ihnen gerne weiter und weisen Sie in die richtige Richtung.