*
Logo
blockHeaderEditIcon


Website24 Socialmenu
blockHeaderEditIcon
Mobile-Website Menu
blockHeaderEditIcon
Slider Mobile Websites
blockHeaderEditIcon
Bedeutung
blockHeaderEditIcon
 

Was bedeutet Responsive Website oder Responsives Webdesign?
 



Google wertet Websiten ohne Optimierung für mobile Endgeräte ab.


Mit Klick auf den nachfolgenden Link können Sie direkt testen, wie Google Ihre Website sieht:

Google-Analyse


Beim Responsiven Webdesign (engl. responsive = reagierend) handelt es sich um ein gestalterisches und technisches Paradigma (Denkweise) zur Erstellung von Websites, die je nach benutztem Endgerät (Smartphone, Tablet-PC, Notebook, Dektop-PC, usw.) und Bildschirmauflösung reagieren können.

Je nach Anforderung des jeweiligen Endgerätes erfolgt der grafische Aufbau der responsiven Website. Insbesondere die Anordnung und die Darstellung der einzelnen Elemente (Navigation, Texte, Spalten) sowie die Nutzung von unterschiedlichen Eingabemethoden (Maus, Touchscreen). Basis hierfür sind neue Webstandards (HTML5, CSS3, Media Queries, JavaScript).

Beim Responsiven Webdesign folgen Funktion, Design und der Inhalt der jeweiligen Bildschirmauflösung des verwendeten Endgerätes, also dem verwendeten Tablet oder Smartphone oder Desktop. Im Englischen auch "Form follows function" genannt.

Sehr wichtig ist vor Allem, dass die Website so flexibel gestaltet ist, dass egal mit welchem Endgerät eine gleichbleibende Benutzerfreundlichkeit vorhanden ist. Inhalte sollen vom Benutzer schnell aufgenommen werden können.

Oftmals wird von Webagenturen zur bisherigen Desktop-Website eine neue "Mobile Website" dazu verkauft, quasi wird zwischen der Mobil- und der Desktop-Version getrennt. Hierdurch entsteht ein nicht unerheblich höherer Pflegeaufwand von Content (Textinhalte) und Bildern. 
Wir gehen einen anderen Weg und erstellen ausschließlich Websiten, die sich auf allen Endgeräten gleichermaßen darstellen lassen. Absolute Benutzerfreundlichkeit ist der Weg.



Ausgewählte Referenzen im responsiven Webdesign finden Sie weiter unten

Responsive Test Mobile Website
blockHeaderEditIcon

Testen Sie selbst, wie Ihre Website auf verschiedenen Endgeräten aussieht:
 

Wir haben Ihnen nachfolgend diverse Seiten aufgelistet, mit denen Sie sehr einfach testen können, wie Ihre Seite auf mobilen Geräten aussieht

Text1 Mobile Websites
blockHeaderEditIcon

Darstellung der Website auf mobilen Geräten


Folgende Besonderheiten sind bei Handys, Smartphones und Tablets zu berücksichtigen:
 

  • das Display ist kleiner
  • die Internetverbindung ist langsamer
  • statt mit der Maus wird per Touchscreen navigiert
  • Plugins wie Flash oder Java sind - je nach Endgerät - evtl. nicht vorhanden oder abgeschaltet
Tablet-Ansicht Mobile Websites
blockHeaderEditIcon
Responsives Webdesign by SP-Design Bellheim Bild zeigt die Website, Blog von ScaleART aus Waldsee
Bild C4 Mobile Websites
blockHeaderEditIcon
Text C5 Mobile Websites
blockHeaderEditIcon

Optimierung für mobile Endgeräte

Insgesamt sollte die Version für mobile Endgeräte (Smartphones, Tablets) möglichst schlank, übersichtlich und auf das Wesentliche reduziert sein. Daraus ergeben sich u.a. folgende Ansatzpunkte für eine Optimierung:

  • Bilder sollten bezüglich der Maße und Dateigröße optimiert sein, damit schnellere Ladezeiten erreicht werden
  • Der Headerbereich (Kopfbereich) mit dem Logo ist so anzupassen, dass er auf dem kleinen Display gut aussieht
  • Das Menü (Navigation) sollte als sogenanntes Toggle-Menü ausgebildet werden (ausklappbares Menü). Zu beachten ist, dass die Navigation nicht allzusehr verschachtelt ist, sondern nur die wichtigen Punkte zum Anklicken bietet.
  • Keine Hover-Effekte (aufklappende Menüs), da diese wegen fehlender Maus nicht funktionieren
  • Die Schriftgröße muss so gewählt werden, dass diese weiterhin lesbar ist
  • Das Layout sollte einspaltig sein, d.h. linear von oben nach unten.
  • Der Inhalt sollte auf die Schwerpunkte einer Website gelegt werden (ohne Werbebanner, Animationen usw.)
  • Unten am Ende der Seite sollte sich ein Telefon-, und Mail Teaser befinden (Telefonnummer kann damit direkt gewählt werden bzw. es kann es öffnet sich per Touchklick direkt das Mailprogramm).
Bewertungssigel
blockHeaderEditIcon
Kontakt C15 Mobile Websites
blockHeaderEditIcon

Überzeugt oder noch Fragen?

Rufen Sie uns jetzt an und vereinbaren Sie einen Termin für ein unverbindliches Beratungsgespräch.

Telefon 0 72 72 . 9 72 36 61

oder schreiben Sie uns

info@sp-design.eu

Titel referenzen mobile Website
blockHeaderEditIcon

Ausgewählte Referenzen für Responsive Websites

 

Syntec
blockHeaderEditIcon
Syntec AG Homburg 2 sprachige Website Maschinenbauunternehmen

Syntec AG, Maschinenbau Homburg
Multilinguale Website (DE / FR)
www.syntec-ag.de
Scaleart
blockHeaderEditIcon
ScaleART Waldsee Web-Blog über RC Modellbau Baumaschinen und LKW

ScaleART Waldsee (Pfalz) 
Modellbaumanufaktur - Web-Blog
www.scaleart-der-blog.de
Bitog
blockHeaderEditIcon
BiToG Grillen mit Bio Tonschalengrill von Bitog Vertrieb und Dienstleistungen Karlsruhe

Tothi
blockHeaderEditIcon
Kinderarztpraxis Dr. Tothi Sulzbach an der Murr

Dr. med. Marianna Tóthi, Kinderarztpraxis
Sulzbach an der Murr (Baden-Württemberg)
​www.kinderarztpraxis-tothi.de
Tiator
blockHeaderEditIcon

Website von Tiator Transporte Herxheim, ein Projekt von SP-Design: Websites & eCommerce Bellheim

Tiator Herxheim, Herxheim (Pfalz)
Transporte - Abbruch - Steine
​www.tiator-transport.de
Schmitts Blog
blockHeaderEditIcon
Web Blog von Steuerberater Pierre Schmitt

Pierre Schmitt, Weingarten (Baden)
Steuerberater ​Web-Blog
​www.steuerberater-pierre-schmitt.de
Maler Ohl
blockHeaderEditIcon
Maler und Gipser Ralf Ohl Mutterstadt

Ralf Ohl, Mutterstadt (Pfalz)
​Maler- und Gipserfachbetrieb
​www.maler-gipser-mutterstadt.de
Feuerwehr
blockHeaderEditIcon

Freiwillige Feuerwehren Weingarten in der Pfalz - SP-Design: Websites & eCommerce, Bellheim

Freiwillige Feuerwehr, Weingarten (Pfalz)
Sponsoring by SP-Design
​www.feuerwehr-weingarten-pfalz.de
Moni
blockHeaderEditIcon
Website von Gästehaus Moni Jäger aus Weyher mit eBike-Vermietung

Gästehaus Moni Jäger in Weyher (Pfalz)
Vermietungsplattform mit Kalender
​www.gaestehaus-jaeger-weyher.de
Renner
blockHeaderEditIcon
Renner GmbH Industrieanlagen, Bellheim - Verkaufs Website - Relaunch by SP-Design: Websites & eCommerce Bellheim

Renner Industrieanlagen, Bellheim (Pfalz)
Kunststoff- und Metallbearbeitung
​www.renner-industrieanlagen.de
Halblicht
blockHeaderEditIcon
Halblicht by Daniela Ehmer - Burnout-Coach und Autogenes Training

Daniela Ehmer, Landau (Pfalz)
Verkaufsplattform Onlinekurse
​www.halblicht.net
NZG
blockHeaderEditIcon
Nachhilfezentrum Schaal Germersheim, ein Projekt von SP-Design Bellheim

Christine und Wolfgang Schaal
Nachhilfezentrum Germersheim (Pfalz)
www.nachhilfezentrum-germersheim.de
Bagheri
blockHeaderEditIcon

Facharztpraxis Bagheri Philippsburg

Sholeh Bagheri Vanani, Philippsburg (Baden) Physikalische Medizin und Rehabilitation
​www.facharztpraxis-bagheri.de
Schmitt
blockHeaderEditIcon
http://www.steuerberater-pierre-schmitt.de - Eine Website von SP-Design Bellheim

Stb. Pierre Schmitt Weingarten (Baden)
Steuerberatung (inkl. Logodesign)
​www.steuerberater-pierre-schmitt.de
Galabau-Heger
blockHeaderEditIcon
Garten und Landschaftsbau Heger Freisbach

Patrick Heger in Freisbach (Pfalz)
Garten- und Landschaftsbau
​www.galabau-heger.de
Schurig
blockHeaderEditIcon
Schurig Geschenkartikel Bellheim - Verkaufs Website - Relaunch by SP-Design: Websites & eCommerce Bellheim

Schurig Geschenkartikel in Bellheim (Pfalz)
Verkaufsplattform über Bestellformulare 
www.schurig-geschenkartikel.de
Langosch-Sinz
blockHeaderEditIcon
Praxis Dr. Langosch-Sinz aus Eppingen

Dr. med. Beate Langosch-Sinz, Eppingen
Hausärztliche Praxis
​www.langosch-sinz.de
Tierheilpraxis
blockHeaderEditIcon
Tierheilpraxis Antje Schäufele Waghäusel

Antje Schäufele, Waghäusel (Baden)
Tierheilpraxis, Affiliatemarketing
​www.tierheilpraxis-schaeufele.de
Fewo Bellheim
blockHeaderEditIcon
Ferienwohnung Bellheim Vermietung Gerhard Eggemann, ein Projekt von SP-Design Bellheim

Gerhard Eggemann, Bellheim (Pfalz)
Vermietung eines Ferienhauses
www.ferienwohnung-bellheim-pfalz.de
B Waltenberger
blockHeaderEditIcon
Bettina Waltenberger Offenbach an der Queich bei Landau, Klassische Homöopathie, ein Projekt von SP-Design Bellheim

Bettina Waltenberger, Offenbach Queich
Klassische Homöopathie, Heilpraktikerin
www.heilpraktikerin-waltenberger.de
Axinte
blockHeaderEditIcon
Schiffsbedarf Axinte, ein Projekt von SP-Design: Websites & eCommerce

Maria-Luiza Axinte, Miltenberg (Bayern)
EH Schiffsbedarf B2B Plattform
​www.schiffsbedarf-axinte.de
Elter
blockHeaderEditIcon
Elter Orthopädietechnik und Sanitätshaus, Ein Relaunch in responsive Webdesign von SP-Design: Websites & eCommerce Bellheim

Josef Elter, Gaggenau (Baden)
Orthopädie und Sanitärfachgeschäft
​www.eot-gaggenau.de
Smartphone
blockHeaderEditIcon
Benutzername:
User-Login
Ihr E-Mail