Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Modernes Responsive Design berücksichtigt viel mehr als nur verschiedene Displaygrößen

Jede responsive Website wird mit einem flexiblen Layout gestaltet, dass sich stufenlos an den verfügbaren Platz im Browser anpasst. Dadurch werden sowohl unterschiedlich große Displays berücksichtigt, als auch Split Screen-Funktionen.

Arbeitsplatz bei kulturbanause in Berlin-Kreuzberg
Arbeitsplatz bei kulturbanause in Berlin-Kreuzberg

Die flächendeckende Verbreitung von Smartphones, Tablets, Notebooks führt jedoch auch dazu, dass Ihre Website über Geräte aufgerufen wird die sehr unterschiedlich bedient werden. Beispielsweise mit der Mouse, über einen Touch-Screen, mit Hilfe eines digitalen Stifts oder per Sprache. Und darüber hinaus laufen auf den Geräten auch noch unterschiedliche Betriebssysteme und verschiedene Browser oder Apps mit denen Websites betrachtet werden können. Ganz zu schweigen von individuellen Einstellungen, die im Betriebssystem vorgenommen wurden.

Wir sorgen dafür, dass Ihre Website perfekt funktioniert, toll aussieht und den Nutzer zum Ziel führt – unabhängig davon mit welchem Gerät Ihre Kunden die Website besuchen und wie sie ihr Gerät konfiguriert haben.

Fully Responsive – vom Kick-Off bis zum Go Live

Responsive Design hat sich längst als Standard durchgesetzt. Was anfangs noch als »Layout für Smartphone, Tablet und Computer« begriffen wurde, ist heute deutlich flexibler und komplexer. Wir haben uns von Beginn an auf diese Technologie spezialisiert, zahlreiche Publikationen zu diesem Thema veröffentlicht und hunderte Workshops und Inhouse-Schulungen durchgeführt. Unsere Workflow sorgt dafür, dass Projekte von Beginn an auf allen Geräten getestet werden und alle am Projekt beteiligten Personen in Form von interaktiven Prototypen die Entwicklung verfolgen und beeinflussen können. Beim Thema Responsive Webdesign sind wir daher mit allen Wassern gewaschen.

Tolle Layouts – auf allen Geräten

Viele Kunden und Designer kritisieren, dass sich im Responsive Webdesign viele Websites sehr ähnlich sehen. Wir verfolgen die Entwicklungen im Webdesign sehr genau, wissen warum sich ein visueller Trend entwickelt hat und wie er zustande kommt. Wir lassen uns nicht durch Tools und Technologien steuern, sondern wir steuern die Technologie. Daher sind wir sowohl in der Lage einzigartige Layouts zu entwerfen, als auch solche die bewusst den Mainstream bedienen.

Case Study eines Responsive Webdesign-Projekts

Cordes & Graefe →

Für den Haustechnik-Dienstleister Cordes & Graefe haben wir das UX/UI Design sowie die Frontend-Umsetzung der Website übernommen. Die Component Library umfasst mehr als 40 Komponenten und 18 Templates.

Erstklassige Suchmaschinenoptimierung dank Responsive Design

Sowohl die Adresse Ihrer Website als auch die Inhalte bleiben identisch – unabhängig davon, über welches Gerät ein Anwender die Seite besucht. Diese Tatsache macht es Suchmaschinen leicht, Inhalte auszulesen und zu bewerten. Google empfiehlt den Einsatz von Responsive Webdesign ausdrücklich und informiert darüber, dass schlecht optimierte Websites abgestraft werden können.

Häufige Fragen zum Thema Responsive Webdesign

Was ist ein Breakpoint?

»Breakpoint« ist ein Begriff aus dem Gebiet des Responsive Webdesign. Beim Responsive Webdesign werden Websites so entwickelt, dass sie optimal auf Displays jeder Größe und Ausrichtung dargestellt werden. Dazu ist es notwendig, dass das Layout ab einer bestimmten Displaygröße umstrukturiert wird. Die Navigation rutscht beispielsweise unter das Logo, sobald zu wenig Platz zur Verfügung steht. Diesen Punkt nennt man Breakpoint.Ein Breakpoint wird im CSS-Code meist über einen sog. Media Query erreicht. Breakpoints müssen sich jedoch nicht zwangsläufig auf das Layout einer Website beziehen. Auch das Austauschen von Grafiken für hochauflösende Displays, die Unterstützung von Touch-Screens etc. wird mit Breakpoints erreicht.

Responsive Webdesign

»Rapid Prototyping« bezeichnet einen konzeptionellen Ansatz bzw. einen Workflow im Webdesign. Da sich moderne Webanwendungen und responsive Websites nicht effizient mit statischen Grafiken planen lassen, wird anstelle dessen ein interaktiver Prototyp bzw. ein Clickdummy erstellt. Dieser Prototyp zeigt sowohl die Funktionalität, als auch die Flexibilität der Website, ist aber meist noch nicht visuell ausgearbeitet. Entwickelt wird der Prototyp entweder direkt in HTML und CSS – z.B. unter Zuhilfenahme eines CSS Frameworks, mit Hilfe spezieller Prototyping-Tools (z.B. Adobe XD, Invision) oder mit einer Kombination von statischen Design-Tools (z.B.. Sketch, Photoshop) und Plugins (z.B. Craft, Invision).

Was bedeutet Mobile First?

»Mobile First« bezeichnet ein Konzept im Responsive Webdesign bei dem die Website als erstes für mobile Endgeräte entwickelt wird. Für größere Displays wird die Seite anschließend erweitert und angepasst.

Bei Mobile First muss unterschieden werden zwischen konzeptionellem Mobile First und Mobile First aufgebautem CSS-Code (technischem Mobile First). Beim konzeptionellen Ansatz muss sich der Konzepter frühzeitig über Priorisierung und Positionierung von Elementen Gedanken machen. Da sich dieser Ansatz größtenteils auf die Inhalte einer Website bezieht, spricht man auch von »Content First«.

Mobile First aufgebauter CSS-Code wird so bezeichnet, da der Code für die mobile Ansicht im Dokument ganz oben steht. Das führt unterm Strich zu weniger und besser strukturiertem Code und somit i.d.R. zu schnelleren Websites.

Alternative Modelle zu Mobile First sind Desktop First und Tablet First.

Kunden-Feedback zu unseren RWD-Projekten

  • Mit den Kulturbanausen haben wir für den Launch unserer Webseite zusammengearbeitet. Mit dem Ergebnis sind wir sehr zufrieden: Der Look ist modern und professionell, die Funktionalität entspricht unseren Anforderungen, die redaktionelle Bearbeitung der Seite ist intuitiv gestaltet. Wir danken für die professionelle Zusammenarbeit, die guten Ideen und die sehr gute Umsetzung.

    Oktober 2021, Laura Berger, Koordinatorin des Beirats der Bundesregierung Zivile Krisenprävention und Friedensförderung

  • Wir möchten uns bei euch für den fantastischen Einsatz bedanken. Das war sicher kein einfaches Projekt, deshalb bedanke ich mich auch für die tolle Kooperation, die Flexibilität und die hohe Professionalität von allen Kulturbanausen!

    September 2021, Dipl.-Des. Julia Junghänel, gewerkdesign GmbH + Co.KG

  • Professionelle und kompetente Agentur! Die Zusammenarbeit verlief stets sympathisch und für Fragen wurde sich viel Zeit genommen. Auch bei kurzfristigen Änderungswünschen behält das Team einen kühlen Kopf. :-)

    Wir fühlten uns beim Relaunch unserer Webseite bestens unterstützt, weshalb wir uns dazu entschieden haben, auch bei der zukünftigen technischen Betreuung der Seite mit den »Kulturbanausen« zusammenzuarbeiten. Vielen Dank an das gesamte Team!

    August 2021, Alina Weber, Benndorf und Hildebrand GmbH

  • Wir haben für den Relaunch unserer Webseite mit kulturbanause zusammengearbeitet. Während der Umsetzung waren wir durchgehend zufrieden. Die umfangreiche Erfahrung von kulturbanause wird in den strukturierten Abläufen und der hilfreichen Beratung immer wieder deutlich. Auch für spezifische Wünsche von uns, die technisch etwas komplexer waren, konnten sehr gute Lösungen gefunden werden.

    Als Ergebnis steht nun eine Webseite, die nicht nur gut aussieht und für die Nutzer*innen sehr gut funktioniert, sondern von uns auch einfach »bespielt« werden kann. Aufgrund der positiven Erfahrung haben wir uns entschlossen, auch bei der technischen Betreuung der Webseite mit kulturbanause zusammenzuarbeiten.

    August 2021, Georg Zolchow, Landeskoordination Berlin, Schule ohne Rassismus – Schule mit Courage

  • Von der ersten Kontaktaufnahme bis zum Re-Launch unserer neuen Website war das kulturbanause-Team ein verlässlicher, fordernder, effizienter und professioneller Partner an unserer Seite. 

    Wir haben nicht nur eine absolut tolle und einzigartige Website bekommen, die technisch einwandfrei funktioniert und sich gut „bedienen“ lässt, sondern durchliefen darüber hinaus einen Prozess der Standortbestimmung, an dessen vorläufigem Ende eine klarere Kommunikation steht – nicht nur via unsere neue Website, sondern auch im Verbund der genutzten SocialMedia-Kanäle.

    Februar 2021, Sibylle Feucht/Leitung DAS ESSZIMMER – Raum für Kunst+, gUG(haftungsbeschränkt)