Im E-Commerce werden immer größere schwarze Zahlen geschrieben. Und weil mittlerweile mehr als die Hälfte der Deutschen via Smartphone, Tablet und Co. im Internet surft, wird auch der mobile Onlinehandel immer mehr zunehmen. Darin sind sich nicht nur Experten einig. Auch Alexander Graf von Kassenzone hat sich in seinem neuesten Blogbeitrag mit dem Thema Mobile Shops der Top 100 Onlinehändler auseinandergesetzt und gibt Einblicke in die Möglichkeiten einen Onlinenshop für mobile Endgeräte zu optimieren. Wir von Netshops kennen die technischen Maßnahmen genau, die einen Onlineshop auch mobil zu einem Einkaufserlebnis werden lassen. Das Zauberwort lautet responsive Webdesign.

Netshop Agenturreferenzen E-Commerce

Was ist eigentlich responsive Webdesign?

Der Begriff responsive bedeutet so viel wie reagierend und meint somit die Anpassung einer Webseite auf jeweilige Begebenheiten wie zum Beispiel die Bildschirmgröße. Responsive bezieht sich nicht nur auf das Layout einer Webseite, sondern auch auf die Interaktion mit ihr und die Eigenschaften des jeweiligen Endgeräts.

Wir von Netshops vereinen ein zu 100 Prozent liquides Layout mit individuell angepassten adaptiven Designstrukturen, sodass sich die Webauftritte optimal an Desktop-PC, Notebook, Tablet oder Smartphone anpassen.

Responsive Webdesign beginnt mit der Konzeption.

Wir legen schon in den ersten Schritten Wert darauf, die Webseite nicht nur als Desktop-Auftritt zu betrachten, sondern die Zielgruppe und ihre Gewohnheiten als mobile User ins Auge zu fassen. Deshalb konzipieren wir von Anfang an mit fluiden Wireframes um deutlich zu machen, wie die Webseite auf den unterschiedlichen Endgeräten ausgegeben werden kann und welche Funktionen dafür wichtig sind.

Fluides Layout bei responsive Webdesign.

Das Layout spielt für die Usability einer Webseite eine große Rolle. In Bezug auf responsives Design muss das Layout im Vorfeld für Smartphone, Tablet und Co. angepasst werden. Wir legen unsere Designs deswegen auf Elementebene an um so in einem fluiden Grid-System auf nur einem Template die Seitenstruktur flexibel koordinieren zu können. Pixel für Pixel und Browser für Browser nehmen wir Einstellungen am Design vor um die Ausgabe so responsive wie möglich zu machen.

Assets_Viewport_SML

Passende Assets für jeden Viewport.

Auf dem Bildschirm eines Desktop-PC wirkt ein Panoramabild eindrucksvoll. Dasselbe Bild auf einem Smartphone wirkt unpassend. Ein hochauflösendes Bild wiegt viel schwerer als ein kleiner Thumbnail und kann einige Endgeräte durch die benötigte Ladezeit überfordern. Deshalb achten wir von Netshops darauf, das passende Asset für Retina- oder Mobile-Screens auszugeben. Bilder, Grafiken oder Videos werden je nach Endgerät und Bandbreite angeglichen.

Verschiedene Interaktionsmöglichkeiten werden mit berücksichtigt.

Ob eine Webseite responsive ist oder nicht, zeigt sich nicht nur im visuellen Erscheinungsbild. Ebenso wichtig ist es, verschiedene Nutzungsschnittstellen zu berücksichtigen: ob mit der Maus geklickt, mit dem Finger getappt oder mit der Fernbedienung gedrückt wird, lassen wir bei unseren Projekten nicht außer Acht. Vergleichbare Hover- oder Scrolling-Effekte versuchen wir auch im mobilen Bereich zu integrieren.

Die Umsetzung von responsive Webdesign im Quellcode.Wie wird responsive Webdesign umgesetzt?

Responsive Webdesign wird mithilfe von Media Queries erzeugt, die in das CSS-Stylesheet eingebettet sind und für jedes Element und jede Auflösung definiert werden. Die Media Queries lesen die Viewport-Größe aus und generieren die Ausgabe anhand der Browserbreite. Dadurch kann mit nur einer URL, einmalig erstelltem Content und nur einem Code ein und dieselbe Webseite für unterschiedliche Geräte erzeugt werden.

Netshops betreibt ausführliches Real World Testing in Open Device Labs.

Real World Testing im Open Device Lab

Wenn die gesamte Konzeption, Gestaltung und Entwicklung eines neuen Projekts abgeschlossen ist, ruhen wir uns noch lange nicht aus. Wir betreiben ausführliches Real World Testing mit unterschiedlichsten mobilen Endgeräten und mit verschiedenen Browsern in bestens ausgestatteten Open Device Labs. Dadurch können wir im Vorfeld mögliche Bugs entfernen und einen fehlerfreien Livegang sicherstellen.

Responsive Webdesign dient als Unterstützung von SEO.

Wir wissen, dass ein weiterer wichtiger Aspekt eines responsive Webdesigns die Suchmaschinenoptimierung ist. SEO, die Search Engine Optimization, meint die Optimierung des Contents einer Webseite, sodass diese bei Suchmaschinen wie Google höher gerankt wird als andere. Bei separaten mobilen Webseiten ist der Content meist gekürzt und die mobile Seite kann deswegen nicht gut gefunden werden. Durch das responsive Webdesign erstellen wir nur einmalig Content für ein Template. Der Inhalt ist also auch bei den mobilen Seiten suchmaschinenoptimiert.

 

2 Kommentare zu “Responsive Webdesign made by Netshops

  1. Responsive Design ist eine tolle Sache, vor allem im Online Shopping ist responsive Webdesign mittlerweile ein Muss für jeden Marketing Agentur.

Schreibe einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Benötigte Felder sind mit * markiert.

Sie können HTML Tags und Attribute benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


*

Formular leerenAbschicken