skip to main content

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

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!
  • 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ätAuflösung
Google Nexus 102560 x 1600
iPhone 51136 x 640
iPhone 61334 x 750
iPhone 6 Plus1920 × 1080
iPad Air2048 x 1536
Microsoft Surface1920 x 1080
Samsung Galaxy S51920 x 1080
Samsung G-Tab 101280 x 800

Perfekt geeignet für Desktop- Tablet- und Smartphone

Responsive Website zum testen


Über 90% aller Besucher sehen sich vor einem B2B oder B2C Geschäft die Firmenwebsite an. Ist diese veraltet, minderwertig oder nicht responsiv, gehen diese weiter zur Konkurrenz. Die meisten Kunden wünschen sich modernes Web Design, wobei die Seite strukturiert, optimiert, schnell, ansprechend und benutzerfreundlich sein sollte.

Responsive Webdesign, Webdesign, Web Design, Desktop, PC, Mac

Responsive Design Ansicht

Desktop

Auflösung von +1024px

Responsive Webdesign, Webdesign, Web Design, Tablet, iPad

Responsive Design Ansicht

Tablet

Auflösung von 768px bis 1024px

Responsive Webdesign, Webdesign, Web Design, Smartphone, Android, iPhone

Responsive Design Ansicht

Smartphone

Auflösung von 320px bis 480px

Sprechen Sie mit uns über Ihre Website!

Möchten Sie Ihre Website "responsiv" für Tablets und Smartphones optimieren?

Sehr gerne beraten wir Sie und helfen bei der Optimierung. (web-d-sign.ch, Webdesign Basel & Zürich)

Full Service Agentur


Webdesign Agentur aus Designer und Entwickler

Webagentur WEB-D-SIGN

Clarahofweg 28, 4058 Basel


Sprechen Sie uns einfach an!


Offertenanfrage für SEO Marketing


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 jede Idee. Top Qualität in Design, Funktionalität und Benutzerfreundlichkeit von talentierten Webdesigner und SEO Experten.

WEB-D-SIGN ist Ihre kompetente und zuverlässige Webagentur für Online Marketing in Webdesign ✔ E-Commerce ✔ Programmierung ✔ SEO & SEA ✔

- -