Responsive . Optimiertes Design auf allen Devices

Markenbildung durch einheitliches, hochwertiges Corporatedesign. Das Design und das Layout einer responsive Website passen sich automatisch an die jeweilige Bildschirmgröße an. Ihre Website wird auf den verschiedensten Endgeräten optimal dargestellt.

Websites am Smartphone, Tablet, Laptop, große Screens und TV: Mit der Flut an verschiedensten, internetfähigen Endgeräten wurde das sogenannte "Responsive Webdesign" entwickelt. Hier passen sich die Elemente einer Website vom Layout bis zur Schriftgröße dem Ausgabebildschirm des jeweiligen Geräts an. Ein wichtiger Vorteil ist, dass dem mobile-Benutzer dieselben Inhalte angezeigt werden, wie dem Benutzer am Schreibtisch.

WIr sind spezialisiert auf Responsives Webdesign

Wir realisieren seit 2012 responsive Websites. Unser Anspruch ist, dass das Design und Layout Ihrer Website perfekt responsiv umgesetzt ist und auf jedem Device der eigentliche Inhalt im Fokus des Besuchers steht.

Praxisbeispiel

Wie die Anpassung eines Webdesigns auf verschiedenen Endgeräten praktisch funktioniert, erklären wir am Beispiel der Startseite der Website der Kinderklinik der Medizinischen Hochschule Hannover. Auf der Webseite mhh-kinderklinik.de wird über sog. "media queries" (Medien-Anfragen) die Bildschirmgröße des Ausgabemediums ermittelt und eine dem Medium angepasste Darstellung aktiviert: Links (bzw. auf dem Smartphone als erstes) sehen Sie die Startseite, aufgerufen mit einen 1680px breitem Desktop-Monitor und rechts (bzw. auf dem Smartphone weiter unten) auf einem Smartphone mit 356px Breite.

1. Anpassung des Kopfbereichs mit Logo und Menü

Die Website verfügt über ein horizontales Menü, welches durch Aufklappen Infos und Unterpunkte ein- oder mehrspaltig anzeigt. Dieses Menü verbirgt sich bei kleinen Bildschirmgrößen hinter dem sog. "Burger-Button" oben rechts. Das Logo wird entsprechend der Ausgabegröße in der Größe angepasst, die farbigen Elemente in der Desktop-Version werden auf dem Smartphone aus Platzgründen weggelassen.

2. Anpassung des Layouts

Auf dem großen Monitor ist das querformatige Bild oben als Ganzes zu sehen, auf hochformatigen Displays wie dem Smartphone wird das Bild auf einen Ausschnitt reduziert: der bildlastige und dadurch freundliche Eindruck bleibt. Der oben sichtbare Bereich der Startseite ist so angelegt, dass alle Elemente unabhängig von der Bildschirmgröße zu sehen sind. Im weiteren Verlauf der Website werden auf dem Smartphone mehrspaltige Inhalte meist untereinander in einer Spalte dargestellt.

3. Anpassung der Schriftgrößen

Überschriften, die auf dem Desktop eher groß sind, werden auf kleineren Bildschirmen wesentlich kleiner. Wie bei der Vereinfachung des Menüs können auch weitere Elemente in einer bestimmten Bildschirmgröße versteckt werden: hier z. B. die Begriffe bei den thematischen Icons unterhalb des oberen Bildes – auf dem Smartphone sind nur die Symbole sichbar.