Responsive Webdesign

Perfekt für alle Medien: Smartphones, Tablet und Desktop PC



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

Responsive Webdesign ist 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 Webdesign 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?

Responsive Webdesign Pro & Contra


Mal sehen wer gewinnt...

Was spricht für Responsive Webdesign?

  • 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!
  • 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 Responsive Webdesign?

  • 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 Responsive Webdesign?


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 zum testen


für Desktop- Tablet- und Smartphone

Visitenkarten, Webdesign, Web Design

Responsive Design Ansicht

Desktop

Auflösung von +1024px

Webdesign, Web Design

Responsive Design Ansicht

Tablet

Auflösung von 768px bis 1024px

Webdesign, Web Design

Responsive Design Ansicht

Smartphone

Auflösung von 320px bis 480px

Sprechen Sie mit uns über Ihre Website!

Haben Sie Interesse Ihre Website "responsive" für Tablets und Smartphones zu gestalten?

Sehr gerne beraten wir Sie bei der Optimierung - Sprechen Sie uns via Kontaktformular an. (web-d-sign.ch, Webdesign Basel & Zürich)

Full Service Agentur


Webdesign Agentur aus Designer und Entwickler

WEB-D-SIGN

Clarahofweg 28, 4058 Basel


Rufen Sie uns für eine Beratung an!


Offertenanfrage für Printmedien


Responsive Design

Webdesign - auf hohem Niveau


WEB Programmierung

Programmieren - mit PHP & MySQL


Graphic Design Basel

Visuelle - Kommunikation


Online Marketing Basel

SEO & SEM - Optimierung


Webhosting - Data Center

Server - Shared, VPS oder Dedicated


Corporate Identity Design

CI Design - Logo, Visitenkarten, Flyer...


Portfolio


Erfolgreiche Projekte und Referenzen

Mit Web-d-sign


Erhalten Sie Höchstleistungen aus einer Hand.

Wie auch immer Sie sich präsentieren wollen, wir unterstützen Sie dabei. Qualität in Design, Funktionalität und Benutzerfreundlichkeit von talentierten Webdesigner. Wir sind Ihr kompetenter und zuverlässiger Ansprechpartner für Web-Projekte...