Responsive Website

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.