Responsive Website

Für die Anpassbarkeit einer Website auf mobilen Geräten ist das Responsive Webdesign zuständig. Eine Responsive Website kann somit unabhängig der Art des Geräts uneingeschränkt angezeigt werden, um Benutzerfreundlichkeit und Zufriedenheit zu gewährleisten.
Drei Menschen sitzen am Tisch und schauen auf ein Mobiltelefon
© Ketut Subiyanto

Definition Website

Website ist aus den Begriffen World Wide Web und Site (deutsch: Standort) zusammengesetzt. Eine Website ist die Webpräsenz eines Anbieters im Internet. Sie ist eine Sammlung von Inhalten, die über eine individuelle Webadresse erreichbar ist. Alle öffentlich zugänglichen Websites bilden zusammen das World Wide Web.

Es gibt auch private Websites, die nur über ein privates Netzwerk zugänglich sind, wie zum Beispiel die interne Website eines Unternehmens für seine Mitarbeiter.

Benutzer können auf Websites mit einer Reihe von Geräten zugreifen, darunter Desktops, Laptops, Tablets und Smartphones. Die Softwareanwendung, die auf diesen Geräten verwendet wird und den Zugriff auf verschiedene Pages im Web ermöglicht, wird als Webbrowser bezeichnet.

Definition Responsive Website

Das Wort Responsive kommt aus dem Englischen und bedeutet auf Deutsch reagierend. Eine Responsive Website kann auf allen Geräten angezeigt werden, indem sie sich automatisch an den Bildschirm anpassen, unabhängig davon, ob es sich um einen Desktop, Laptop, Tablet oder Smartphone handelt. Dafür wird ein Responsive Webdesign benötigt (kurz RWD). Das Responsive Webdesign ist ein Webentwicklungsansatz, der das Erscheinungsbild einer Website dynamisch verändert, abhängig von der Bildschirmgröße und der Ausrichtung des jeweiligen Geräts.

Haupttechnologien einer Responsive Website

Es gibt fünf Schlüsselprinzipien, welche den Kern der Funktionsweise einer Responsive Website bilden. Im Folgenden werden diese Hauptkomponenten dargestellt.

Fluid Grids

Fluid Grids sind Rastersysteme, die sich an den Screen des Users anpassen. Während der Begriff manchmal synonym mit “flüssigen Layouts” verwendet wird, stellen sogenannte flüssige Raster sicher, dass alle Elemente ihre Größe im Verhältnis zueinander ändern.

Flexbox-Layout

Die Flexbox ist ein eindimensionales Layout-Modell. Ihre Aufgabe ist das Zusammenfügen alle Elemente einer Website in ein Layout. Dabei passt sich das Layout flexibel an das jeweilige Display an. Da die Flexbox eindimensional ist, befasst es sich immer nur mit dem Layout in einer einzigen Richtung, entweder den Spalten oder den Zeilen, auf einmal.

Media Queries

Media Queries ist eine Funktion von CSS 3. CSS ist die Abkürzung für Cascading Style Sheets und ist eine Stylesheet-Sprache für elektronische Dokumente. Eine Stylesheet-Sprache ist eine Computersprache, die für Darstellung von strukturierten Dokumenten eingesetzt wird. CSS wurde entwickelt, um die Trennung von Präsentation und Content, einschließlich Layout, Farben und Schriftarten, zu ermöglichen. Media Queries ermöglichen es, die Erscheinung von Inhalten an unterschiedliche Bedingungen wie die Bildschirmauflösung (z. B. mobile und Desktop-Bildschirmgröße) anzupassen. Die meisten modernen Browser unterstützen CSS3-Medienabfragen, die es Websites ermöglichen, Daten von einzelnen Besuchern zu sammeln und CSS-Stile anzuwenden.

Flexible Bilder

Eine Herausforderung bei der Erstellung einer Responsiven Website kann die Größenänderung von Bildern sein. Eine Möglichkeit für die Größenänderung ist die Verwendung der CSS-Eigenschaft max-width. Sie stellt sicher, dass Bilder in der Originalgröße geladen werden. Dies ist jedoch nicht möglich, wenn der Viewport schmaler als die Breite (eng. width) des Bildes ist. Der Viewport ist der sichtbare Bereich in einem Browserfenster.

Responsive Typografie

Die Responsive Typografie beschreibt das Ändern von Schriftgrößen innerhalb von Media-Queries, um kleinere oder größere Mengen an Text an der Bildschirmfläche zu reflektieren.

Geschichte

Das Prinzip der Responsive Website entstand in den 1990er Jahren aus dem Bedürfnis heraus, Websites auf allen Arten von Geräten und Bildschirmauflösungen zugänglich zu machen. Erste Anleitungen zu einem flexiblen Layout enthielt ein Buch von Zoe Mickley Gillenwater aus dem Jahr 2010 über Stylesheets 3.0.

Der Begriff Responsive Web Design (RWD) wurde von Ethan Marcotte, einem unabhängigen US-amerikanischen Webentwickler, in einem Artikel im Magazin A List Apart geprägt, der dessen Theorie und Praxis im Jahr 2011 beschreibt.

Sowohl Nutzer als auch Entwickler begannen, die Vorteile und die Bedeutung des Responsive Web Designs zu erkennen, als die mobile Nutzung weiter zunahm. Diese Erkenntnis der Wichtigkeit wurde bestätigt als Google ankündigte, dass die Suchmaschinen Responsive Websites im Suchmaschinenranking priorisieren würden. Das .NET Magazine listete Responsive Design als einen der Top-Trends des Jahres 2012 auf.

Abgrenzungen zu anderen Websites

Mobile Website

Eine mobile Website ist eine browserbasierte Möglichkeit, um auf Internetinhalte zuzugreifen. Im Gegensatz zu regulären Websites ist sie speziell für mobile Geräte konzipiert und wird daher auf dem Desktop nicht perfekt dargestellt. Der Unterschied zu einer Responsive Website liegt in der Anzahl der Templates. Templates sind Designvorlagen zur Erstellung von Websites. Normalerweise ist die Desktop-Version die normale Ansicht der Website. Für die mobile Website wird eine zusätzliche, unabhängige Vorlage hinzugefügt. Für eine Responsive Website wird nur eine Version entwickelt, welche sich an alle verwendeten Umgebungen anpasst.

Adaptive Website

Eine adaptive Website verwendet unterschiedliche Layouts für jede Bildschirmgröße. So muss für jede dieser Größen ein eigenes Layout entworfen werden, da es weitgehend von den verwendeten Bildschirmgrößen abhängt. Eine fluide Anpassung an alle Bildschirmgrößen wie bei einer Responsive Website findet nicht statt.

Liquide Website

Eine Liquide Website benutzt ein liquides Layout. Wenn die Größe des Browserfensters geändert wird, dehnt sich das liquide Layout aus, um den gesamten verfügbaren Bereich des Bildschirms auszufüllen. Der zur Verfügung stehende Platz auf dem Bildschirm wird immer im gleichen prozentualen Verhältnis genutzt. Wenn zum Beispiel die Breite einer liquiden Website auf einem Desktop verkleinert wird, werden die Inhalte schmaler. Die Anordnung der Layoutelemente bleiben unverändert. Eine Responsive Website kann als ein Teil verschiedener liquider Layouts definiert werden.

Beispiele Responsive Website

Dropbox

Dropbox ist ein File-Hosting-Dienst des amerikanischen Unternehmens Dropbox, Inc. mit Hauptsitz in San Francisco, Kalifornien. Ein File-Hosting-Dienst ist eine Online-Dateiablage , welches Benutzern ermöglicht, Dateien hochzuladen, auf die über das Internet zugegriffen werden kann, nachdem ein Benutzername und ein Kennwort oder eine andere Authentifizierung angegeben wurden.

Die Dropbox Website verwendet ein fließendes Raster und flexibles Bildmaterial. Wenn von Desktop Geräten zu mobilen Endgeräten, wie beispielsweise zu einem Tablet oder Smartphone, gewechselt wird, ändert sich die Schriftfarbe und die Ausrichtung des Bildes.

Um beispielsweise zu verhindern, dass User die Website verlassen, weist ein kleiner Pfeil Desktop-Benutzer darauf hin, nach unten zu scrollen, um weitere Inhalte zu sehen. Derselbe Pfeil fehlt auf mobilen Endgeräten, da davon ausgegangen wird, dass die User auf einem Device mit Touchscreen-Funktionen ganz natürlich scrollen werden.

Ebenso ist das Anmeldeformular auf Desktop-Geräten sichtbar. Auf Tablets und mobilen Geräten, auf denen der Platz begrenzt ist, ist es hinter einem Call-to-Action-Button versteckt.

Shopify

Shopify Inc. ist ein kanadisches, multinationales E-Commerce (Online-Handel)-Unternehmen mit Hauptsitz in Ottawa, Ontario. Es ist auch der Name seiner E-Commerce-Plattform für Online-Shops und für den Einzelhandel. Shopify bietet Online-Händlern eine Reihe von Dienstleistungen, einschließlich Zahlungen, Marketing und Versand.

Das Benutzererlebnis auf der Shopify Website ist über alle Geräte hinweg konsistent. Nur die Call-to-Action-Schaltfläche und die Abbildungen haben sich zwischen Desktop- und Mobilgeräten geändert.

Auf PCs und Tablets befindet sich der Call-to-Action-Button rechts neben dem Formularfeld. Auf mobilen Geräten befindet er sich darunter.

Ebenso sind Illustrationen auf PCs und Tablets rechts neben dem Text anzufinden, während sie auf mobilen Geräten unter dem Text platziert sind.

Vorteile Responsive Website

Zu den Vorteilen gehört, dass eine Responsive Website die User Experience (deutsch: Benutzererfahrung) erhöht. Etwa 88% der Benutzer kehren nach einer unzufrieden Benutzererfahrung nicht auf die Website zurück. Wenn der Benutzer das Gefühl hat, dass die Website nicht benutzerfreundlich ist und er beispielsweise immer gezwungen ist, den Zoom zu verkleinern, beeinträchtigt dies die Benutzung.

Ein weiterer Vorteil einer Responsive Website ist ein verbessertes Suchmaschinen-Ranking. Seit April 2015 berücksichtigt Google die Responsivität einer Website als eines der Signale, die den Rang der Website auf der Suchergebnisseite bestimmen. Wenn eine Website nicht responsive ist, platziert Google sie auf der Ergebnisseite niedriger.

Außerdem benötigen Responsive Websites nur einen geringen Wartungsaufwand. Sie sind so konzipiert, dass sie auf alle Bildschirmgrößen passen. Es gibt keine Änderung des Inhalts und anderer Elemente, um auf ein anderes Gerät zu passen. Die Website verwendet denselben Content auf allen Geräten. Die Verwaltung einer einzigen Seite erfordert weniger Wartung, weniger Kosten und ist weniger zeitaufwendig.

Responsive Website bei TenMedia

Die TenMedia GmbH ist eine dynamische Softwareagentur zwischen Alexanderplatz und Rosa-Luxemburg-Platz in Berlin. Seit 2011 liegt unser Fokus auf Individualsoftware, Datenbanken, Online-Plattformen und Apps. Bei der Entwicklung von Websites richten wir uns nach den Wünschen unser Kunden und achten dabei auf die Umsetzung eines Responsive Webdesgins. Mit unserer langjährigen Erfahrung in der Softwareentwicklung für bspw. kleine und mittelständische Unternehmen, Privatpersonen und Selbstständige und als Gründer eigener Portale sind wir in der Lage, die Vorstellungen unserer Kunden optimal umzusetzen.

Wir freuen uns über innovative Ideen und sind jederzeit per E-Mail, telefonisch oder persönlich in unserem Büro in Berlin Mitte erreichbar.

Gefällt dir, was du siehst? Teile es!
Neueste Beiträge
Ein kleiner weißer Serviceroboter reicht an einem warm beleuchteten Schreibtisch eine Tasse, im Hintergrund sitzt eine erwachsene Person auf dem Sofa. Ein Sinnbild dafür, wie sich KI datenschutzkonform nutzen lässt – auch dort, wo künstliche Intelligenz nah an persönlichen Daten und am Alltag agiert.
KI datenschutzkonform nutzen: Der Praxis-Fahrplan für 2026
KI datenschutzkonform zu betreiben entscheidet 2026 darüber, ob künstliche Intelligenz zum Wettbewerbsvorteil oder zum Haftungsrisiko wird. Verantwortliche in Unternehmen und Behörden brauchen klare Antworten: Welche Tools sind erlaubt, was ändert sich zum August, und wie lässt sich KI-Datenschutz im Unternehmen praktisch umsetzen? Dieser Beitrag liefert den Fahrplan für den Alltag.
Weiterlesen... Lesezeit: 6 Min.
Die Erde vom Weltall betrachtet. Die Sonnenstrahlen bahnen sich ihren Weg daran vorbei. Ein Satellit für Erdbeobachtung schwebt darüber.
Satellitendaten im Alltag: Wie Erdbeobachtungs-Software Felder, Städte und Klima verändert
Wenn ein Landwirt seine Subventionsunterlagen einreicht, hat ein Satellit bereits gemessen, ob das Feld tatsächlich die gemeldete Kultur trägt. Wenn Stadtplaner Hitzeinseln identifizieren, laufen die Analysen über Satellitendaten. Wenn nach einer Überschwemmung Hilfe koordiniert wird, arbeiten Einsatzkräfte mit in Echtzeit aktualisierten Karten aus dem Orbit. Was all das verbindet: Software, die rohe Sensordaten in entscheidungsrelevantes Wissen verwandelt — und die in immer mehr Bereichen des öffentlichen und wirtschaftlichen Lebens unsichtbar Einzug hält.
Weiterlesen... Lesezeit: 4 Min.
Ein Philosoph in Toga unterhält sich auf Augenhöhe mit einem humanoiden Roboter – ein Sinnbild dafür, wie bewährte Legacy-Systeme und moderne KI bei der Modernisierung zusammenfinden.
Legacy-Modernisierung mit KI: Altsysteme digital recyceln
Legacy-Modernisierung gilt als Mammutaufgabe – doch künstliche Intelligenz verspricht, Altsysteme in Quartalen statt Jahren zu erneuern. Dieser Beitrag ordnet ein, was KI beim Modernisieren von Altsystemen wirklich leistet, wo sie scheitert und wie sich Legacy-Software mit KI realistisch modernisieren lässt – ohne teure Fehlentscheidungen.
Weiterlesen... Lesezeit: 5 Min.
Zufällige Beiträge
Ältere Dame nutzt modernen Lautsprecher. Sie ist begeistert von der Technologie von Google Little Signals.
Google Little Signals: Open Source im Smart Home
Smartphones, Smart Watches, Sprachassistenten und intelligente Lautsprecher: Sie helfen uns, unseren Alltag zu strukturieren. Doch zu welchem Preis? Akustische Signale, schrille Töne, dröhnende Vibrationen. Wie aus dem Nichts tauchen sie auf, weil jemand mit uns kommunizieren will oder wir uns selbst an etwas erinnern wollen. Was wäre, wenn uns anstatt des Schrillens eines Klingeltons ein sanfter Lufthauch umweht? Oder wenn die Visualisierung eines Schattens die Vibrationsfunktion ersetzt? Google ist dieser Frage in einer besonderen Studie nachgegangen.
Weiterlesen... Lesezeit: 4 Min.
Frau mit Tablet im Büro
Digitalisierung für KMU: Warum die Umstellung so viel Zeit kostet
Immer mehr KMU in Deutschland beschäftigen sich verstärkt mit der digitalen Transformation. Durch die Corona-Krise haben Digitalisierungsthemen wie zum Beispiel Homeoffice oder Online-Shops zunehmend an Bedeutung gewonnen. Trotzdem sind bisher vergleichsweise erst wenige KMU digitalisiert. Woran liegt das und warum ist diese Transformation so zeitintensiv?
Weiterlesen... Lesezeit: 2 Min.
Ein Smartphone mit zersplittertem Display und Augenklappe liegt in einem Krankenhausbett am Tropf, daneben zeigt ein Monitor einen kritisch niedrigen Akku. Ein Symbolbild für die akute Notlage der IT-Sicherheit im Gesundheitswesen.
IT-Sicherheit im Gesundheitswesen: Warum Software für Kliniken und Praxen angreifbar bleibt
IT-Sicherheit im Gesundheitswesen stand im März 2026 unerwartet im Scheinwerferlicht. Das Bundesamt für Sicherheit in der Informationstechnik veröffentlichte die Ergebnisse von drei parallelen Studien zu Praxisverwaltungssystemen, Krankenhausinformationssystemen und digitalen Pflegedokumentationssystemen — nüchtern formuliert, aber mit alarmierenden Befunden. Dieser Beitrag ordnet die BSI-Gesundheitssoftware-Analyse ein, zeigt die strukturellen Ursachen hinter den Lücken und skizziert, was Hersteller, Kliniken und Praxen im kommenden Jahr konkret tun müssen, um nicht auch zur Schlagzeile zu werden.
Weiterlesen... Lesezeit: 5 Min.
Zufällige Glossareinträge
Junger Mann mit Bart sieht erstaunt auf sein Notebook.
Datensicherungskonzept
Ein Datensicherungskonzept dient dem Schutz vor Datenverlust und Datenmissbrauch. Maßnahmen zur Datensicherung schützen Unternehmen vor wirtschaftlichen Schäden und rechtlichen Auseinandersetzungen. Doch was genau ist ein Datensicherungskonzept? Eine Definition sowie Infos zu Grundlagen und Anforderungen sind im folgenden Text zusammengefasst.
Weiterlesen... Lesezeit: 6 Min.
Mitarbeiter einer Agentur entwickeln mithilfe von Frameworks eine Software am Laptop.
Frameworks
Entwicklungsframeworks sind Tools für die Web- und App-Entwicklung, die die Programmierung mithilfe von vorgegebenen Strukturen erleichtern.
Weiterlesen... Lesezeit: 7 Min.
Eine junge Frau in legerem rosa Anzug. Sie sprintet dynamisch vor gelbem Hintergrund. Sie betreibt Performance-Optimierung.
Performance-Optimierung für Web und EDV
In der digitalen Ära, in der Geschwindigkeit und Effizienz an vorderster Front stehen, ist die Performance-Optimierung ein entscheidender Faktor für den Erfolg von Websites, Webanwendungen und EDV-Systemen. Dieser Artikel beleuchtet vor allem die technischen Aspekte der EDV- und Website-Performance-Optimierung. Er bietet praktische Tipps zur Steigerung der Effizienz digitaler Assets von KMU und Konzernen.
Weiterlesen... Lesezeit: 9 Min.