Unser Lexikon.

Wir erklären: Responsive Webdesign.

Responsive Webdesign

Da sich die Größen und Auflösungen der heutigen Endgeräte stark unterscheiden, muss sich das Layout einer Webseite entsprechend anpassen, um dem Betrachter ein optimales Nutzererlebnis bieten zu können. Der Fachbegriff dafür ist "Responsive Webdesign". Ist eine Webseite nicht responsiv gebaut, also nicht für Mobilgeräte optimiert, straft Google sie im Ranking ab. Diese Maßnahme wird von Google im Jahr 2016 noch einmal verschärft. Es ist heute also für jeden, der seiner Konkurrenz vorraus sein möchte und eine gute Position bei Google anstrebt, unerlässlich, seine Webseite auch für Mobilgeräte zu gestalten.

Da das Erstellen von resposiven Webseiten ohne Hilfsmittel sehr aufwendig und fehleranfällig sein kann, setzen wir auf sogenannte Grid-Systeme. Diese Systeme sind Bestandteil eines Front-End Frameworks und erleichtern das Positionieren von Elementen auf der Webseite. Durch die Verwendung eines Grid-Systems kann Ihre Homepage auf einem Desktop-PC anders aussehen als auf einem Tablet oder Smartphone. Denn durch das Definieren von Umbruchpunkten können wir die Spalten des Grids nebeneinander oder untereinander präsentieren. Wir stellen sicher, dass Ihre Inhalte optimal lesbar sind und die Bedienung der Website auf jedem Gerät perfekt ist.

Mittlerweile gibt es unzählige Front-End Frameworks. Zum Beispiel Twitter Bootstrap, Foundation oder Semantic UI. Wir haben uns für Twitter Bootstrap spezialisiert, da es eines der ältesten und meist verbreitetsten Front-End Frameworks auf dem Markt ist. Mit Twitter Bootstrap bieten wir Ihnen eine solide und extrem ausgereifte Technologie als Grundlage für Ihre Homepage. Sie funktioniert einwandfrei in jedem modernen Browser.

Wir möchten euch einen kurzen Einblick in das CSS-Framework Bootstrap von Twitter geben. Das CSS-Framework gibt uns die wichtigsten Elemente für eine gelungene Homepage vor und sorgt durch das definierte Grid-System und Mediaqueries für eine Responsive Webseite. Unterstützt werden die CSS (oder LESS) Dateien durch nützliche Javascript-Module. Mit diesen Javascript-Modulen lassen sich zum Beispiel Modalfenster oder Foto-Slider leichter umsetzen. Um Bootstrap zu installieren, muss man sich zuerst die aktuelle Version von der Webseite herunterladen oder über ein CDN (Content Delivery Network) einbinden. Nun binden wir in den <head>-Bereich des HTML-Gerüsts die CSS-Dateien von Bootstrap ein und fügen an das Ende der Seite (bevor der <body>-Bereich geschlossen wird) die Javascript-Dateien ein. So erreichen wir ein schnelles Laden der Homepage. Beide Stellen können um eigene CSS- und Javascript-Dateien erweitert werden.


Unsere Erklärung von "Responsive Webdesign" für Sie. Die Erklärungen für dieses Lexikon haben wir nach bestem Wissen und Gewissen zusammengestellt. Für einige Begriffe haben wir auch weitere Links hinterlegt, damit Ihnen der Einstieg in die Welt der Webseiten leichter fällt.

Sollte unser Eintrag fehlerhaft oder unvollständig sein, freuen wir uns auf Ihren Kontakt.

Schreiben Sie uns.