Was ist eigentlich Responsive Design?

Responsive Design oder anpassungsfähiges bzw. reaktionsfähiges Webdesign bezieht sich auf Techniken zur Webseitenerstellung. Diese Techniken ermöglichen es, den Gerätetyp und die Browsergrösse zu erkennen, worüber eine Webseite besucht wird, um die Darstellung entsprechend daran anzupassen.

 

Die Grösse sowie die Auflösung der Displays auf unterschiedlichen Geräten wie Smartphones, Tablets, Desktop-PCs etc. können stark variieren. Damit sich eine Webseite auf jedem Gerät in gleichbleibend guter Qualität anzeigen lässt, ist ein Responsive Design eine der wichtigsten Voraussetzungen. Mit einem reaktionsfähigen Webdesign passen sich Layout, Format und die angezeigte Informationsmenge der Bildschirmauflösung und den Bildschirmeigenschaften eines jeweiligen Gerätes automatisch und in der bestmöglichen Auflösung an.

Auf dem Gebiet des Responsive Designs weist Prime erstklassige Referenzen auf. Durch die Nutzung einer breiten Palette von Open Source Technologien sind wir in der Lage, jederzeit auf individuelle Kundenbedürfnisse reagieren zu können.

 

Warum Responsive Design?

Die Verwendung eines reaktionsfähigen Webdesigns bietet dem Anwender grossen Nutzungskomfort. Die Webseitenbesucher können mit einer Vielzahl von Endgeräten auf Inhalte zugreifen und frei navigieren, ohne die Grösse ständig neu einstellen oder scrollen zu müssen. Im Zeitalter mobiler Technologien und vielfältiger Computermedien ist die Verwendung von Responsive Design unerlässlich.

 

Fünf gute Gründe für eine Webseite im Responsive Design

Responsive Design …

  1. … ermöglicht den Zugriff auf Ihre Internetseite von verschiedenen Endgeräten aus.
  2. … ist eine wichtige Marketingstrategie.
  3. … optimiert die Referenzierung Ihrer Webseite bei Suchmaschinen.
  4. … trägt dazu bei, Zeit und Geld zu sparen.
  5. … vereinfacht den Zugang zu Ihrer Webseite.

 

Das Vorgehen bei Responsive Design

Die wichtigsten Elemente bei der Webseitengestaltung im Responsive Design sind die Inhalte (Bilder, Texte und Medien). Wir bauen ein flexibles Layout und definieren, wie die Inhalte auf verschiedenen Geräten und Bildschirmgrössen angezeigt werden sollen. Für alle Seiten und alle Geräte wird derselbe HTML-Code verwendet. Das Layout jeder Seite kann dank CSS Media Queries verändert werden. Diese geben an, welche CSS Regeln entsprechend des verwendeten Browsers angewendet werden.

1. ANWENDERRECHERCHE

Zunächst untersuchen wir das Nutzerverhalten in Bezug auf die bestehende Kunden-Website, um so die optimalen Ansätze für die Zielgruppe zu erarbeiten. Die gesammelten Daten sind eine wichtige Voraussetzung, um eine individuell auf den Kunden zugeschnittene Webseite erstellen zu können.

2. INHALTSSTRUKTURIERUNG

Im zweiten Schritt führen wir ein Content-Inventar durch, um alle Webseiteninhalte (Bilder, Texte, Navigationselemente, etc.) zu sichten und festzulegen. Für die inhaltliche Strukturierung einer reaktionsfähigen Webseite gibt es zwei Möglichkeiten:
  • Der Aufbau kann so konzipiert werden, dass er von einem Mobiltelefon aus gelesen werden kann. Das Layout kann durch Media Queries angepasst werden, um die Anzeige auf Computern oder Tablets zu optimieren.
  • Dank Media Queries kann für jedes Gerät ein unterschiedliches Layout bereitgestellt werden. Einige Inhalte können bei Mobiltelefonen oder Tablets mit den Befehlen „hier klicken“ oder „mehr erfahren“ verborgen werden.

3. LINEARE KONZEPTION

Interaktive Konzeption und Entwicklung bestimmen den Stil und das Layout mit Hilfe von Sitemap und Darstellung. Hierdurch entsteht ein visueller Führer durch den Webseitenaufbau.

4. REFERENZIERUNG DES INHALTS

Diese detaillierten Layouts werden so entwickelt, dass ein Netzwerkplan, grafische Unterbrechungen und die verwendeten Proportionen bei der Webseitenerstellung aufgenommen werden können. Sie zeigen den Inhalt der Webseite und die für die unterschiedlichen Medien verfügbaren Darstellungstypen.

5. ENTWICKLUNG EINES PROTOTYPEN

Ein HTML-Prototyp mit Screenshots wird erstellt. Änderungen können auf Wunsch und nach Anforderungen des Kunden vorgenommen werden. Vorherige Schritte können überarbeitet und die gewünschten Änderungen eingebaut werden. Der überarbeitete und korrigierte Prototyp wird schliesslich produziert. Jetzt wird die Endfassung entwickelt; dabei werden die Media Queries hinzugefügt, um das Layout entsprechend der Zugangsgeräte festzulegen. Das ist die letzte Entwicklungsstufe, bevor die neue Webseite im Responsive Design online gehen kann.