Menü

Wie funktioniert responsives Webdesign?



Hier gibt es eine komplette Entscheidungshilfe für Webseitenbetreiber, die Ihre Webseiten für Smartphone, Tablet und Monitore anpassen möchten zum Download:
Download Entscheidungshilfe responsive Webdesign.zip



Mehr als 50% der Internetnutzer sind mit mobilen Geräten im Web unterwegs.

„Think Mobile“
Für Webseitenbetreiber heißt das zu allererst, dass neue und bestehende Internetseiten für die unterschiedlichen Geräte angepasst werden sollten um von überall erreichbar zu sein. HTML5 und CSS3 sind dabei die aktuell angewendeten Standards, die in moderne Browser bereits integriert sind.

Einfache Lösung - responsives Webdesign
"Mobile Internetseiten" sind in der Regel eigenständige Internettauftritte speziell für kleine Displays. Sie existieren meist als „Zweitversion“ neben der Hauptseite und müssen natürlich extra gewartet werden.
Strebt man eine Internetpräsens an, die sich allen Gerätetypen anpasst, spricht man von "responsivem Webdesign". Durch das Schreiben sogenannter "Media Queries" wird dafür gesorgt, dass sich die Bild- und Textelemente auf den unterschiedlichen Geräten entsprechend der Bildschirmauflösung anordnen und in ihrer Größe variieren, wobei das grundsätzliche Erscheinungsbild und die Inhalte erhalten bleiben.

Reaktionsfähiges Webdesign – wichtige Vorteile
  garantierter Wiedererkennungswert durch das immer gleiche Layout auf Handy, Tablet und Desktop
  Nutzer können sich sofort orientieren
  Internetseiten können häufiger genutzt werden
  Wartungsarbeiten fallen nur einmal an
  Kosten entstehen nur für eine Internetpräsenz

responsive Internetseiten – Umdenken und Mitdenken
Dabei gilt es gerätespezifische Details zu beachten:
  kleinere und unterschiedliche Displays (zusätzlich Portrait oder Landscape)
  Navigation per Touchscreen ohne Maus
  zum Teil langsamere Internetverbindungen
  Nutzung hochauflösender Retina-Displays
  Flash funktioniert auf einigen Geräten nicht bzw. ist abgeschaltet

Konsequente Umsetzung heisst dann:
  übersichtliche, möglichst kurze Quelltexte schreiben
  eventuell Bilder in unterschiedlichen Versionen nachladen
  gut navigierbare Menüs, einklappbar für kleine Geräte
  keine Hover-Effekte (fehlende Maus)
  prozentuale Größenveränderungen für Titel, Texte und Bilder usw.
  ansprechendes Layout, interessierende Anordnung der Elemente
  Weglassen von nicht zwingenden Details für kleine Geräte ohne das Gesamtlayout zu beeinträchtigen
  Einfügen von "Media Queries", die den Größenumbruch zwischen den Geräten erfassen und die Anpassung steuern

„Media Queries“ – die Umbruchstellen zwischen den Geräten
Um die Reaktionsfähigkeit einer Seite zu erreichen, sind in den *.css - Dateien sogenannte "Breakpoints", die die Grenze zwischen den Displaybreiten definieren, angegeben. An diesen Punkten werden Containergrößen und Schriftgrößen geändert, neue Bilder für die Geräte nachgeladen, Container "versteckt" und später wieder auf einem anderen Gerät angezeigt oder Menüstrukturen geändert.
Wir verwenden folgende 3 Breakpoints für Handy, Tablet und Desktop:
(Abbildung: Ansicht Handy --> Ansicht Tablet --> Ansicht Desktop)


Container - die Herzstücke unseres Systems

Die farbigen Flächen in den vorangehenden Abbildungen werden in unseren *.css- und *.html-Dateien "Container" [id=“container…“] genannt. Sie besitzen prozentuale Größen für die jeweilige Bildschirmbreite und verändern ihre Lage und ihre Größe. In unserem System gibt es sie in folgenden Varianten:

Hinweise zur Arbeit

  Die Bezeichnungen der Container entsprechen Bruchstücken [Beispiel: „container_1_3“ bedeutet: Container nimmt ein Drittel der Gesamtbreite ein.]
  Container können individuell kombiniert werden.Es ist möglich, Container ineinander zu schachteln. Dabei ist zu beachten, dass die Container in der Grundversion sowohl Innen- wie auch Außenabstände besitzen. Ein Schachteln ohne gesonderte Regulierung engt daher den Platz ein.
  Die Container sind stets in Gruppen einer waagerechten Reihe von links nach rechts zusammengefasst.
  Die letzte Containerbezeichnung wird mit „_r“ (right, rechts) [Beispiel: „container_1_3_r“] ergänzt. Dies garantiert eine fehlerfreie Darstellung und saubere Seitenränder.
  Die Container sind lediglich in ihrer Anordnung und Breite definiert.
  In den *.css-Dateien sind zur optischen Gestaltung Boxen vordefiniert. Werden diese als class=“box[xx]“ ergänzt, ändert sich das Aussehen der Container.

web-designwerkstatt – Vorlagen für individuelle Webseiten
Fehlt Ihnen die Zeit zum Schreiben eigener Seiten?
Erscheint Ihnen der Aufwand zur Gestaltung eines eigenen Layouts zu umfangreich?
Passt das Layout einer schon fertigen Vorlage zu Ihrer Idee?
Wir bieten Ihnen eine stetig wachsende Anzahl responsiver Schablonen für ihre anpassungsfähige Webseite. Mit Nonsenstexten und Beispielbildern als Platzhalter gefüllt, bestehen die Templates jeweils aus der Indexseite, einigen Beispielseiten und der Übersichtsseite für die vorhanden Container und die sonstigen Elemente. Auf unserer Internetseite können alle flexiblen Templates in ihrer Funktion auf dem Handy, dem Tablet und dem Desktop live in vollem Funktionsumfang getestet werden.

Selbstverständlich prüfen wir auch Ihre Seite, ob sie responsiv umgeschrieben werden kann und welche Kosten dabei entstehen.

zu den Vorlagen  Templates






RESPONSIVES WEBDESIGN


Grundlagen

Test Ihrer Seiten

Unsere Leistungen - Anfrage

Webkatalog responsiver Seiten

Blog

CMS simple - Demo


Social Media








unsere GOOGLE+ Community besuchen
responsive webdesign Vorlagen professionelles Webdesign Webseiten optimieren für Handy suche Webdesigner wer schreibt Webseiten Umschreiben Homepage responsive Handy Tablet Desktop mobile Homepage Homepage anpassen für Handy web DESIGN werkstatt erste Internetseite Webdesigner gesucht Handwerk Wellness Hotel Ferienwohnung bewegliche Internetseite Agentur web Design eigene Homepage mobile darstellen Webdesign werkstatt Studio professioneller Webdesigner responsive Homepage web-designwerkstatt eigene Webseiten optimieren für Smartphone Tablet Webseite erstellen eigene mobile Webseiten für Smartphone Auto Handwerk Tischler Versicherung Wer schreibt Webseiten umschreiben gesucht suche Webdesigner suche webdesigner professionell erste Homepage responsive themes
IMPRESSUM   AGB       Datenschutz paypal versand