Responsive Webdesign Basel & SEO Agentur

Eine Website für alle Bildschirmgrössen

Warum Responsive Webdesign?

Für Ihre Kunden...

Die mit Hilfe von HTML5 und CSS3 Media-Queries zur Verfügung gestellte Technik wird Responsive Webdesign, Responsiv Design oder kurz "RWD" genannt. Diese erlaubt die einheitliche Darstellung Ihrer Website-Inhalte, wobei Sie Ihren Kunden eine Mobile und eine Desktop-Version in einer Website anbieten. Dabei reagiert das Design Ihrer Website so flexibel, dynamisch und schon fast lebendig, dass es sich von verschiedenen Nutzergruppen, optimal auf Computern, Smartphones und Tablets bedienen lässt.

Responsive Webdesign

Mobile optimierte Websites sind kein Trend! Es folgt den Bedürfnisse Ihrer Kunden und nicht umgekehrt. Ein Endnutzer wird nicht lange auf Ihrer Website weilen, wo auf starr entworfene, herkömmliche Websites immer noch mühsehlig mit den Fingern gezoomt werden muss, um die Texte in anständiger Grösse lesen zu können.

Wir sind in einer Zeit, wo es nicht mehr "die Bildschirmgrösse" oder "das Gerät" gibt und uns zum umdenken Anlass geben sollte.

Inzwischen gibt es viele Geräte mit unterschiedlichen Displaygrössen, die perfekt mit Responsive Web Design berücksichtigt werden können. Bestimmt haben auch Sie eines oder mehrere der folgenden, internetfähigen Geräte in Ihrem Haushalt:Smart-TV, Computer, Laptop / Notebook, Netbook, Tablet und Smartphone.

Ja? - Ihre Kunden auch!

Diverse Studien in verschiedene Länder, belegen eine stetige Zunahme an Tablets und Smartphones Verkäufe. Durch die verstärkte Nutzung des Internets über mobile Endgeräte, gehen Sie hiermit auch auf die Bedürfnisse Ihrer mobilen Nutzer und Zielgruppen ein. Responsiv optimierte Websites bieten nicht nur die Benutzerfreundlichkeit sondern auch gute Bedienbarkeit für alle aktuellen und zukünftige Geräte und Bildschirmgrössen.

Was spricht für und was gegen RWD?

Responsives Design Pro & Contra

Mal sehen wer gewinnt...

Was spricht für responsives Design?

Ihre Website ist pflegeleichter, da nur noch eine Version für alle Endgeräte vorhanden ist.
Ihre Zielgruppe kann mit nur einer Website angesprochen werden. Ob der Mitarbeiter auf der Baustelle mit seinem Smartphone, die Sekräterin am PC oder der Kollege im Aussendienst mit dem Tablet, allen wird nur eine Website angezeigt. Einfach genial!
Tolle Landingpages als One Page Website erstellen, die für Ihr Unternehmen geeignet sind.
Die Entwicklung geht schneller voran und somit auch eine Kostenersparnis für Sie als Kunde.
Ein ganz klarer Vorteil ist die Usability (benutzerfreundlich), da sich das Layout immer dem Endgerät anpasst und nicht mit den Fingern gezoomt werden muss.
SEO-Technisch gesehen ist es zwischenzeitlich Pflicht geworden, da für alle Geräte dieselben URLs verwendet werden und kein Duplicate Content entsteht.

Was spricht gegen responsives Web Design?

Der Arbeitsaufwand für uns als Webdesigner und Entwickler ist höher als bei herkömlichen Websites, wodurch höhere Kosten für Sie als Kunde entstehen.
Einige Kunden sehen die Vorteile und den Grund für Mehrkosten nicht, obwohl heute mehr als die Hälfte über Smartphone ins Internet geht.
Bei grossen und komplexen Websites wie einem Web-Shop, kann ein deutlicher Mehraufwand entstehen.
Die Testphase nach Abschluss des Projekts ist viel umfangreicher, da verschiedene Geräte getestet werden müssen.
In Zeiten von 2G/3G waren Ladezeiten noch problematisch wegen der geringeren Bandbreite. Aber das ist mittlerweile auch Tabu.

Geräte mittels CSS3 Queries ansprechen

Wie erstelle ich eine Responsive Webseite?

Die Stylesheet wird um weitere Module ergänzt...

Media Queries

Smartphone (portrait and landscape):
@media only screen and (min-device-width:320px) and (max-device-width:480px) { /* CSS */ }
Smartphone (landscape):
@media only screen and (min-width:321px) { /* CSS */ }
Smartphone (portrait):
@media only screen and (max-width:320px) { /* CSS */ }
iPad (portrait and landscape):
@media only screen and (min-device-width:768px) and (max-device-width:1024px) { /* CSS */ }
iPad (landscape):
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) { /* CSS */ }
iPad (portrait):
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { /* CSS */ }

Smartphone und Tablet-Auflösungen

Die Entwicklung von Smartphones und Tablets geht rasant voran und als Webdesigner müssen wir auf alle Bedürfnisse und Endnutzer Rücksicht nehmen. Damit das "sich selbst" anpassbare Design auch funktioniert, sollte die Stylesheet durch HTML5 und CSS3 optimiert werden, um auch in Zukunft weitere Engeräte zu unterstützen. Hier eine kleine Liste mit Smartphone und Tablet -Bildschirmauflösungen für Responsive Webdesign und wie sie angesprochen werden.

Standard Auflösungen von Smartphone und Tablet in px

Smartphones:: 320 bis 480
Tablets:: 768 bis 1024
Desktop:: 1024+

Gerät	Auflösung
Google Nexus 10	2560 x 1600
iPhone 5	1136 x 640
iPhone 6	1334 x 750
iPhone 6 Plus	1920 × 1080
iPad Air	2048 x 1536
Microsoft Surface	1920 x 1080
Samsung Galaxy S5	1920 x 1080
Samsung G-Tab 10	1280 x 800

Responsive Webdesign

Was ist Responsive WebDesign?

Warum Responsive Webdesign?