Beispiel einer schlecht optimierten und nicht reagierenden E-Commerce-Seite.
Browsen auf einer Webseite, die nicht für Mobile optimiert ist, ist eine schlechte Erfahrung, vor allem beim Einkauf. Wenn Sie die Seite nach ein paar Sekunden schon wieder verlassen, sind Sie nicht allein. Die Design-Firma Copter Labs berichtet über eine 28% höhere Absprungrate der Besucher, die auf mobilen Geräten surfen, als Besucher die an herkömmlichen PC’s sitzen, wenn eine Webseite nur für Desktops konzipiert ist.
Beispiel für eine optimierte und responsive Design eCommerce-Seite.
Es gibt eine Lösung für die Optimierung von Websites für mobile Geräte: Responsives Webdesign. Eine responsive designte Webseite überprüft das Gerät von einem Besucher und reagiert darauf, indem Form, Textgröße und Bildgröße angepasst werden. Sie gibt all Ihren Besuchern den gleichen Inhalt, passt aber ihren Bildschirm in einer benutzerfreundlichen und leicht zu navigieren Weise an.
Jeder eTailer sollte eine responsive designte Webseite haben. Hier sind zwei überzeugende Gründe:
1. Mobile Geräte haben den Desktop überholt. Wir haben den Wendepunkt überschritten.
Schauen Sie sich diese Ankündigung von der beliebten ecommerce platform Shopify: vom August 2014 an: “Letzte Woche verwendeten das erste Mal in der Geschichte mehr Menschen Handys und Tablets, um Online-Shops zu besuchen, als Sie Computer nutzen. Mit Blick auf Daten von über 100.000 E-Commerce-Shops, die die Shopify Plattform nutzen, stellten wir fest, 50,3% des Verkehrs kam aus dem Mobilfunk (40,3% von Mobiltelefonen, 10% von Tabletten) und nur 49,7% von Computern. “
Große Marken glauben daran.
Im März 2015 hat Nike bekannt gegeben, dass das Unternehmen mehr mobilen Datenverkehr als Desktop Verkehr hatte. Ein Analyst bemerkte: “Nike.com Umsatz steigerten sich um 42 Prozent in den drei Monaten im Vergleich zum Februar, durch erhöhten Traffic und Conversions waren mobile Besucher den Desktop-Browsern zum ersten Mal überlegen.”
2. Google belohnt Responsive Webdesign Seiten.
Erhöhen Sie Ihren Rang.
In 2012 erklärte Google ganz direkt, sie bevorzugen Responsive Design Webseiten. Die Verwendung von Responsive Design, anstelle einer Desktop-only Webseite oder eine andere Webseite für Handys zu bieten, wird Ihr Suchmaschinen-Ranking verbessern. Google erkennt die Vorteile von Responsive Design Webseiten, und stufen die Responsive Design Webseiten höher im Ranking.
Listen Sie Ihre Produkte in Google Shopping? Erfahren Sie, wie Sie Ihr Google Shopping Produktbilder optimieren.
Was bedeutet das für Produktbilder auf Responsive Design Webseiten?
Zuerst schauen wir uns an, was standardmäßig passiert. Wenn Sie Responsive Design nutzen, dient dieselbe Webseite sowohl auf den Desktop als auch dem Mobile-Nutzer – sie ist nur neu geordnet. Die Abmessungen Ihrer Bilder werden angepasst, um den Bildschirm zu füllen, aber sie sind mmer noch die gleichen Bilder – der gleiche Inhalt, Auflösung und (entscheidend) Dateigröße. Ein hochauflösendes 20 MB Bild eines Kleides kann wertvoll auf einem Desktop sein, weil der Benutzer die Ansicht vergrößern und jedes Detail unter Beibehaltung der Perspektive sehen kann. Es ist aber übertrieben für mobile Geräte und wird viel zu langsamen Laden, besonders wenn die Datenübertragung über Mobilfunk läuft.
Was Sie wirklich wollen, ist, den Besuchern die höchste Bildqualität, die diese zu schätzen wissen, zu liefern – aber nicht höher.
Es gibt ein paar Methoden, dies zu tun. Wir werden uns zwei Methoden näher anschauen, zusammen mit wirkungsvollen gratis Lösungen, die Sie verwenden können.
1. Größe der Bilder ändern mit Adaptive Images
Eine einfache Lösung ist Adaptive Images. Adaptive Images ist ein kleines PHP-Skript, das die Bildschirmgröße des Besuchers erfasst, um dann die Größe Ihrer Bilder in der richtigen Größe für das Gerät zu liefern. Sie müssen also keine Vielzahl von Bildern für unterschiedliche Bildschirmgrößen und Auflösungen für den heutigen mobilen Markt schaffen; es wandelt alles im laufenden Betrieb. Es kann sogar hochauflösende Retina displays von Apple bewältigen. Es ist vollständig rückwärts kompatibel, was bedeutet, dass wenn Sie das Skript heute hinzufügen, wird es alle bereits vorhandenen Bilder zu handhaben wissen. Wenn Sie nun über die Kosten besorgt sind, keine Angst: Es ist kostenlos!
Das Setup ist schnell und einfach, wenn Sie mit der Verwaltung von Dateien Ihrer Webseite auf Ihren Web-Host komfortabel sind. Wenn Sie die Arbeit mit Ihrer Webseite gewohnt sind, kann es buchstäblich in 5 Minuten abgeschlossen sein. Wenn Sie WordPress nutzen, gibt es ein ähnliches Plugin, welches Sie verwenden können, der Name ist ImageMagick.
Das waren die Vorteile von Bildgrößeänderung mit Adaptive Images. Was sind die Nachteile?
Erstens, wenn Sie ein Content Delivery Network nutzen, Adaptive Images arbeitet nicht mit CDNs. Dies ist für die meisten kleinen Unternehmen kein Problem, kann sich aber auf große Einzelhandelsunternehmen auswirken. Zweitens, das Hochladen eines PHP-Skript und anderen Dateien bei der Installation kann auf diejenigen die das noch nie gemacht haben einschüchternd wirken. Drittens, durch Bildgrößenänderung für jeden Benutzer über ein Skript kann sich manchmal die Ladegeschwindigkeit der Webseite verlangsamen. Vielleicht möchten Sie einen aktiveren Ansatz als nur Ihre Bildgrößenänderung vornehmen.
2. Verschiedene Bilder bedienen mit Picturefill
Wenn Sie eine Do-it-yourself-Person sind, kann Picturefill als mobile Produktfoto Lösung für Ihre Webseite effektiv sein. Manchmal, wenn ein Bild kleiner gemacht wird, geht die Art Direction verloren. So sollten Sie eine beschnittene Version, eine andere Form oder ein anderes Bild insgesamt anbieten. Es gibt neue HTML web standards die lassen Sie kleine, mittlere, große und extragroße Bilder anlegen, die dann je nach Bildschirmgröße des Besuchers bedient werden. Nicht jeder Browser unterstützt die neuen Standards, darum übernimmt Picturefill, um sicherzustellen das es funktioniert.
Erfahren Sie, wie Sie einen effizienten Fotoproduktions-Workflow entwickeln, sodass Sie Aktionen in Ihrer Nachbearbeitungs-Software erstellen können, welche die Bilder dann in jeder Größe ausgeben.
Picturefill ermöglicht ein hohes Maß an Anpassung, aber es implementiert auch einiges an Arbeit. Sie müssen alternative Bilder für alle Produkt-Bilder, die Sie als ‘responsive’ behandeln wollen, erstellen und das HTML-Markup für Ihre Webseite wird auch Bearbeitung benötigen. Die Codierung ist ein Job für Web-Entwickler, die teuer werden kann (Picturefill selbst ist kostenlos).
Sie können vielleicht die Bildgrößenänderung selbst vornehmen, aber es kann Ihnen möglicherweise Zeit und Ärger sparen, wenn Sie diese Arbeit an einen komfortablen 24-Stunden-Turnaround aussourcen. Mit Pixelz können Sie die Bildgröße, die Sie möchten, spezifizieren und Sie können unseren komfortablen Qualitätsprüfer nutzen, um die Bildgröße und andere Details mit einem Klick zu überprüfen, noch bevor Sie die Bilder runterladen.
Das Aufkommen von smartphones und Tablets hat verändert wie Menschen das Internet erleben. Mit diesen Veränderungen kommt Gelegenheit; die Möglichkeit, mehr Kunden zu erreichen, häufiger und in vielfältiger Hinsicht. Nutzen Sie den Augenblick! Optimieren Sie Ihre Produktbilder für die Handynutzung und verwenden Responsive Webdesign, um sicherzustellen, dass Sie ein Teil des neuen Internets sind. Pixelz kann Ihre Produktbilder in 24 Stunden oder weniger bearbeiten und liefern.
Starten Sie noch heute mit der Gewinnung neuer Kunden!