Zur Zeit wird gefiltert nach:Suchmaschinenoptimierung
Filter zurücksetzen

03. Sep 2013

Extension für mobile.de-Schnittstelle

Gravatar: Christian Lange
Standard mobile.de Händlerseite
Standard mobile.de Händlerseite mit festem Layout

Immer mehr unserer Kunden aus der Automobil- / Kfz-Branche fragen uns nach Lösungsmöglichkeiten zur Darstellung und Einbindung von Fahrzeugen in deren Internetseiten. Für solche Anwendungsfälle entwickeln wir normalerweise individuelle Lösungen, bei denen die Pflege und Datenhaltung direkt in TYPO3 erfolgt. Basierend auf diesen Daten werden passende Listen- und Detailansichten ausgeliefert. Solche individuellen Erweiterungen können mit Schnittstellen flexibel an die internen Systeme angebunden werden, wodurch eine zusätzliche manuelle Pflege der Datensätze entfallen kann.

Solche Schnittstellen müssen immer individuell auf die Spezifikationen des eingesetzten Verwaltungssystems angepasst werden und erzeugen hierdurch zusätzliche Aufwände. Bei unseren Kunden konnten wir als Gemeinsamkeit feststellen, dass obwohl unterschiedliche Systeme eingesetzt und darüber verschiedene Online-Fahrzeugbörsen bedient werden, die Fahrzeuge früher oder später in 99% aller Fälle zu mobile.de exportiert werden.

Somit lag es für uns auf der Hand nach einer praktikablen Lösung zu suchen, mobile.de als zentrale Schnittstelle zu verwenden und dadurch weiterhin unabhängig von der intern eingesetzten Software zu sein. Glücklicherweise bietet die Automobil-Plattform eine sehr gute Export-Schnittstelle über welche die gepflegten Fahrzeuge eines Händlers, wie Lager- / Gebrauchtwagen, für die weitere Verwendung abgerufen werden können - Sogar für Motorräder und LKW kann diese Schnittstelle genutzt werden.

Auf Basis von Extbase und Fluid haben wir eine Erweiterung (Extension) für TYPO3 entwickelt, die diese mobile.de-Schnittstelle nutzt und die Fahrzeuge - bei Bedarf auch von mehreren Händler-Accounts - abruft, zusammen fasst und je nach Wunsch auf der Webseite darstellt. Im Gegensatz zu der einfachen iFrame-Lösung die von mobile.de im Händlerbereich angeboten wird und einfach einzurichten ist, hat man mit unserer TYPO3-Extension die Möglichkeit das Layout & Design komplett flexibel an den Rest der Webseite anzupassen. Die angezeigten Werte und Filter lassen sich individuell bestimmen und positionieren. Durch den Einsatz von responsiven Templates lassen sich sämtliche Ansichten auch für Smartphones, Tablets und weitere Geräten optimiert ausgeben. Unerwünschte Werte wie z.B. die Gesamtanzahl der Fahrzeuge können dabei weggelassen werden und die komplexen Filtermöglichkeiten kann man auf eine jeweils sinnvolle Auswahl reduzieren. Bei Bedarf können die Fahrzeugdatensätze in TYPO3 durch eigene, nicht bereits durch mobile.de zur Verfügung gestellte, Werte / Informationen erweitert werden, so dass durch den externen Dienstleister hier keine Einschränkung geschaffen wird.

Screenshots vom TYPO3-Backend

Backend-Plugin für Listenansicht
Backend-Plugin für Listenansicht
Filterung über Schnittstelle
Filterung über Schnittstelle
Backend-Plugin Teaserbox
Backend-Plugin Teaserbox

Die Extension bringt bereits verschiedene Plugins mit einer Vielzahl an Einstellungsmöglichkeiten mit sich, so dass neben einer umfassenden Fahrzeugauflistung mit Filter- und Sortierungsmöglichkeit auch vordefinierte Listen ausgegeben werden können, um z.B. auf den Unterseiten bei einem Mehrmarkenbetrieb zu einem Fahrzeughersteller direkt die passenden Gebrauchtwagen zu dieser Marke anzeigen zu lassen. Modell-Detailseiten können automatisch mit passenden Gebraucht- / Lagerwagen angereichert werden, so dass ein Interessent direkt sehen kann, was der Händler vorrätig hat. Schließlich ist dies einer der Hauptunterschiede zu den Mitbewerbern.

Zusätzlich zu diesen Listenansichten besteht die Möglichkeit ausgewählte Fahrzeuge in sogenannten Teaser-Boxen anzupreisen. Darüber lässt sich z.B. das „Fahrzeug des Monats“ zu einem besonders interessanten Preis an präsenten Stellen der Website darstellen.

Durch die Darstellung der Detailseiten direkt innerhalb der eigenen Webseite kann nicht nur deren Darstellung auf die eigenen Bedürfnisse angepasst werden, sondern der Inhalt kann von Suchmaschinen auf der Seite gefunden werden und steigert dadurch die Sichtbarkeit der Internetseite in Google & Co. Die Fahrzeuge lassen sich somit über feststehende URLs unterhalb der eigenen Domain direkt aufrufen. Für diese URLs kann man z.B. QRCodes erstellen, die dann direkt im Fenster des jeweiligen Fahrzeugs positioniert werden und dem Interessent direkt vor Ort weitere Informationen zur Verfügung stellen können.

Nicht nur auf der eigenen Webseite kann mit Hilfe unserer Erweiterung das Fahrzeugangebot präsentiert werden. Über TYPO3 lassen sich damit auch spezielle Ansichten generieren, die losgelöst von der eigentlichen Webpräsenz als Facebook App oder im iFrame innerhalb einer anderen Applikation anzeigt werden können. Der Vorteil gegenüber der von mobile.de zur Verfügung gestellten Facebook App ist dabei, dass auch dort das eigene Look & Feel eingehalten werden kann und außerdem mehrere Händler-Accounts (z.B. von unterschiedlichen Standorten / Marken) zusammengefasst angezeigt werden können, was ansonsten nicht möglich wäre.

Sollten wir jetzt Ihr Interesse geweckt haben, zögern Sie nicht uns direkt anzusprechen. Gemeinsam finden wir für Sie die optimale Lösung, um Ihre Gebraucht- und Lagerwagen auf Ihrer Webseite anzuzeigen.

11. Jul 2013

Konzeption & Prototyping: Content First als Ansatz für eine nachhaltige Webseite

Gravatar: Severin Glöckle

Ob Smartphone, Tablet, oder irgendwo dazwischen: Beinahe wöchentlich erscheinen neue Geräte. Egal wie verschieden sie jedoch sind, alle diese Geräte können Webseiten darstellen. Auf diese Weise entstehen ständig neue Situationen und Kontexte, in denen eine Webseite genutzt wird. Ob in der U-Bahn, am Flughafen, im Café oder zu Hause auf der Couch - Ziel des Nutzers ist es immer, die Informationen einer Webseite so einfach und effizient wie möglich zu erhalten.

Informationen im Mittelpunkt: Content First als Grundsatz

Durch die Wahl eines Geräts und eines Browsers, sowie gegebenenfalls durch individuelle Einstellungen bestimmt jeder Nutzer heutzutage selbst, wie er eine Webseite konsumieren möchte. Wir als Webdesigner verlieren daher zunehmend die Kontrolle darüber, wie ein Besucher eine Webseite angezeigt bekommt.

Der Erfolg von Nachrichten-Applikationen wie Flipboard und Diensten wie Pocket zeigt, dass viele Nutzer mittlerweile sogar vollkommen auf gestalterische Elemente verzichten, wenn sie am Inhalt einer Webseite interessiert sind.

Für eine nachhaltig erfolgreiche Webseite muss daher vielmehr der Inhalt im Zentrum stehen. Wenn die Auswahl und Strukturierung von Inhalten bereits in der Planung eines Projektes den höchsten Stellenwert hat, spricht man vom "Content First"-Ansatz (frei übersetzt: "Der Inhalt kommt zuerst!"). Dabei werden im ersten Schritt ausschließlich Inhalte und ihre Struktur definiert und erst in weiteren Schritten ein Design anhand dieser realen Inhalte entwickelt.  

Zum Vergleich: Wurde eine Gestaltungsvorlage auf Basis von Platzhaltertexten (sprich: Lorem ipsum) entwickelt und soll schließlich mit echten Inhalten gefüllt werden, besteht die Gefahr, dass Design und Inhalt nicht vollständig zusammen passen. Daraufhin wird meist der Inhalt so modifiziert, dass er zum Design passt - und somit häufig an Aussagekraft und Bedeutung verliert.

Um schon bei der Konzeption einer Webseite sicherzustellen, dass tatsächlich nur die wichtigsten Inhalte im Mittelpunkt stehen, kann der Präsentationsrahmen bewusst so klein gehalten werden, dass nur Platz für die wichtigsten Informationen bleibt. Häufig wird dafür ein Gerät mit einem möglichst kleinen Bildschirm als Startpunkt für die Konzeption gewählt. Da es sich dabei in der Regel um ein Smartphone handelt, wird diese Art der Konzeption auch als "Mobile First" (frei übersetzt: "Mobile Endgeräte kommen zuerst!") bezeichnet. Obwohl die Optimierung für mobile Geräte natürlich ein wünschenswerter Nebeneffekt ist, sollen vorrangig Informationen und Inhalte im Fokus stehen. Wir sprechen daher von "Content First".

"Content First" in der Praxis: Iterativer Workflow und Prototyping

In der Praxis kann die Umsetzung einer Startseite nach dem "Content First" Ansatz beispielsweise wie folgt aussehen:

Ablaufdiagramm für die Konzeption nach dem Content First Grundsatz
Nach Auswahl und Gewichtung der wichtigsten Inhalte erfolgen Optimierungen und Gestaltung.

Durch die Implementierung sämtlicher Inhalte in einem Prototypen sind schon sehr früh erste Ergebnisse im Browser zu sehen. Da ein solcher Prototyp problemlos mit einem mobilen Gerät - beispielsweise einem Smartphone - aufgerufen werden kann, wird bereits ein Gefühl für die Webseite vermittelt und es kann direkt Feedback zum Konzept gegeben werden. Zudem können neue Ideen und Vorschläge leicht ausprobiert und direkt im Browser beurteilt werden. 

Nach der Sammlung und grober Strukturierung der Inhalte werden diese basierend auf dem kleinstmöglichen Präsentationsrahmen gewichtet und angeordnet. 

Aufbauend auf den Prototypen der kleinsten Auflösung werden schrittweise weitere Prototypen für höhere Auflösungen angelegt. Da die grundlegende Anordnung und Gewichtung der Inhalte bereits festgelegt ist, steht nun die schrittweise Optimierung (das sogenannte "progressive enhancement") im Vordergrund: Überschriften können beispielsweise durch längere Teaser-Texte angereichert und Bilder in unterschiedlichen Größen und Bildausschnitten dargestellt werden. Beispielsweise können zusammengehörige Inhalte bei kleineren Geräten so gruppiert werden, dass zunächst nur ein Element sichtbar ist und weitere Elemente erst durch Interaktion des Nutzers sichtbar werden. Höhere Auflösungen bieten hingegen genug Raum zur gleichzeitigen Darstellung aller Inhalte.

Neben der Optimierung für verschiedene Auflösungen ist auch die Anpassung an Geräteeigenschaften wichtig. Für Touch-basierte Geräte sollten zur leichteren Interaktion beispielsweise größere Schaltflächen angezeigt werden, wohingegen bei Maus-basierten Geräten Interaktionen auf Mausbewegungen basieren können. Solche Geräteeigenschaften können zur Vereinfachung in einem Prototypen an die Auflösung geknüpft werden. So können kleinere Auflösungen beispielsweise gleichzeitig Touch-basierte Geräte repräsentieren.

Im folgenden sind Bilder von verschiedenen Entwicklungsstadien eines Prototyps für die Startseite der neuen networkteam-Webseite zu sehen.

Screenshot eines Prototypens für die neue networkteam Webseite.
(1)
Screenshot eines Prototypens für die neue networkteam Webseite.
(2)
Screenshot eines Prototypens für die neue networkteam Webseite.
(3)
Screenshot eines Prototypens für die neue networkteam Webseite.
(4)

(1) Nur die wichtigsten Inhalte finden auf einer schmalen Präsentationsfläche Platz - (2) In größeren Auflösungen können weiterführende Informationen dargestellt werden - (3) Zu Beginn werden Inhalte grob gruppiert und angeordnet - (4) und mit jeder Phase iterativ weiterentwickelt und optimiert

Axure RP: Interaktive Prototypen komfortabel erstellen

Zur Erstellung dieses Prototyps haben wir Axure RP eingesetzt. Das Programm bietet viele nützliche Funktionen zur Konzeption von Webseiten wie:

  • Ein Drag & Drop Interface zur Erstellung des Prototyps
  • Ein "Sketchiness"-Faktor zur verfremdeten Darstellung von Elementen, damit diese wie von Hand gezeichnet aussehen
  • Direkte Ausgabe der Dateien als HTML und somit zur Anzeige im Browser
  • Möglichkeit, selbst komplexere Interaktionen zu simulieren
  • Erstellen von wiederverwertbaren Widgets und Master-Templates

Leider unterstützt Axure RP in der aktuellen Version 6.5 noch kein responsives Verhalten. Da zudem sämtliche Elemente mit fest definierten Pixelangaben erstellt werden, müssen für verschiedene Auflösung einer Seite in Axure RP tatsächlich mehrere Seiten in der jeweiligen Auflösung erstellt werden, was teilweise zu stark erhöhtem Arbeitsaufwand führt.

Das Programm ist insgesamt jedoch ein wichtiger Bestandteil unserer Konzeptionsphase und besonders hilfreich, um früh im Projekt Feedback zu erhalten und so eventuelle Fehler auszubessern. In kommenden Versionen soll Axure zudem responsive Prototypen ermöglichen.

Die Planung steht: Weitere Schritte auf dem Weg zur neuen Webseite

In den kommenden Wochen werden wir in unserem Blog den Entstehungsprozess unserer neuen Webseite begleiten und beschreiben, wie aufbauend auf dem "Content First"-Konzept das Design und schließlich die komplette Webseite entsteht. Wir hoffen, auf diese Weise einen Einblick in unsere Arbeitsweise zu geben und die meist komplexen Schritte auf dem Weg zu einer nachhaltig erfolgreichen Webseite anschaulich zu beschreiben. Gerne beantworten wir Fragen zum Thema und freuen uns auch über neue Anregungen und konstruktive Kritik!

24. Jun 2013

Responsive Webdesign

Gravatar: Laura Weiss

Mobile Endgeräte werden immer wichtiger in unserem Alltag. Große Monitore sind auf unseren Schreibtischen auch bereits die Norm. Dieser technologische Fortschritt hinterlässt seine Spuren bei der Entwicklung von Webseiten. Daher werden Webseiten nun immer häufiger "responsive" aufgebaut.

Responsive Webdesign stellt eine aktuelle Technik dar, wobei mit Hilfe von HTML5 und CSS3 Media-Queries eine Optimierung des Layouts und der Inhalte auf Desktop PC, Tablet und Smartphone vorgenommen werden kann.

Media Queries

Media Queries sind dabei eine wesentliche Voraussetzung, welche die Art und Eigenschaften des betrachtenden Gerätes abfragen und somit die Webseite auf einem großen Display anders darstellen, als auf einem Tablet oder Smartphone. Erfahrungsgemäß entsteht für die Entwicklung eines Responsive Designs zwar ein Mehraufwand in der Konzeption und Gestaltung, der bei der technischen Umsetzung aber wieder eingespart werden kann.

Standard Auflösungen der verschiedenen Geräte sind:

  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1024px
  • Computer-Desktop: 1024px+

Frameworks

Viele Frameworks bieten mehr oder weniger unkompliziert nutzbare Komponenten für die Gestaltung responsiver Webseiten. Derzeit setzen wir als Framework Bootstrap ein, welches von Twitter entwickelt wurde. Bootstrap basiert auf einem 12-spaltigen Grid-System mit einer Default-Breite von 940px. Der Kern des Frameworks sind LESS-CSS, HTML sowie jQuery Komponenten. Bootstrap ist sehr umfangreich und enthält sehr viele Oberflächenelemente, Navigationselemente, Labels und Hinweisnachrichten.

Auch aus SEO Sicht sollen Webseiten die eine schlechte mobile Ansicht liefern, laut Google, bald im Index nach unten rutschen. Um so wichtiger ist es also, Webseiten immer auf dem neuesten Stand zu halten und Responsive Webdesign zu nutzen. So wird ermöglicht, dass alle Inhalte auf allen Bildschirmen ideal dargestellt werden.

Auch wir haben Erfahrungen in diesem Bereich und bereits einige Seiten in Responsive Webdesign umgesetzt. Weitere werden in nächster Zeit folgen.

Link: Offizieller Google Beitrag zum Ranking von mobilen Webseiten

20. Jan 2012

Googles neuestes Algorithmus-Update

Gravatar: Berit Hlubek
SEO: Wichtige Inhalte sollten above-the-fold dargestellt werden.
Grafik: Above-The-Fold

In seinem gestrigen Blog-Post schrieb Matt Cutts (Google-Entwickler, Head of the Webspam Team), dass das neueste Algorithmus-Update seinen Fokus auf die Bewertung der Layouts und die Menge der Inhalte von Webseiten legt.

Benutzermeinungen haben ergeben, dass es nicht gut aufgenommen wird, wenn der gesuchte Inhalt einer gefundenen Seite erst nach einigem Scrollen erreichbar ist. Webseiten deren Inhalte sich überwiegen unterhalb des direkt sichtbaren Bereichs befinden, können von dieser neuen Algorithmus-Anpassung betroffen sein. Die User Experience von Webseiten deren Inhalte überwiegend unterhalb des direkt sichtbaren Bereichs positioniert sind oder „above-the-fold“ übermäßig viele Werbe-Einblendungen positionieren, werden mit der neuen Anpassung schlechter ranken.

Auch seitens Google versteht man, dass das Platzieren von Werbung im sichtbaren Bereich ein übliches Mittel zur Refinanzierung darstellt. Negativ betroffen seien daher auch nur die Webseiten, die es mit der Masse an Werbung above-the-fold übertreiben oder es dem Benutzer erschweren den eigentlich relevanten Inhalt zu finden. Mit dem direkt sichtbaren Bereich oder dem Bereich "above-the-fold" ist der Bereich einer Webseite gemeint, der direkt ohne Scrollen zu sehen ist - üblicherweise sind dies ca. 768px Bildschirm-Höhe.

Die Anpassung soll weniger als 1% aller globalen Suchanfragen beeinflussen. Man wird also in nur einer von 100 Suchanfragen eine Umsortierung der Suchergebnisse feststellen können. Sollte man das Gefühl haben, dass die eigene Webseite von diesen Änderungen betroffen ist, rät Google zu prüfen, wie diese Webseite mit den Inhalten im oberen Webseitenbereich umgeht. Empfehlenswert sind dafür Tools zur Anzeige des sichtbaren Bereichs verschiedener Bildschirmauflösungen, um einschätzen zu können, wie die Seite unter unterschiedlichen Bedingungen wirkt.

Ändert sich das Layout einer Seite, so wird Google dies bemerken, sobald die Seite erneut gecrawled wird. Der zeitliche Abstand hierfür hängt von unterschiedlichen Faktoren ab. Im Durchschnitt kann man aber davon ausgehen, dass es einige Wochen dauert, bis sich eine Layout-Änderung in der Positionierung auswirken wird.

Fazit:
Auch innerhalb unserer SEO-Workshops empfehlen wir unseren Kunden den Fokus einer Webseite auf gute Benutzbarkeit und gute Inhalte zu legen. Dieses Google-Update bestätigt diese Ansicht erneut. Sie haben das Gefühl, Ihre Webseite könnte eine Optimierung des Layouts oder der Benutzerfreundlichkeit benötigen? Melden Sie sich bei uns und wir finden die für Sie optimale Lösung.

20. Nov 2011

Google Verbatim Search

Gravatar: Berit Hlubek
  • More Google Search Options
  • Google Verbatim Search

Die Google-Algorithmen haben mittlerweile einen sehr hohen Komplexitäts-Grad erreicht. Bei einer einfachen Suche werden zum Beispiel auch mögliche Rechtschreibfehler und sinnverwandte Inhalte einbezogen.

Im Normalfall verhelfen diese Algorithmen zu verbesserte Suchergebnissen und sollen dem Suchenden helfen. In einigen Fällen möchte man allerdings ausschließlich nach der exakten eingegebenen Kombination suchen und keine sinnverwandten Suchergebnisse geliefert bekommen. Durch die eigentlich hilfreichen Algorithmen wird bei diesen Suchanfragen das Finden des Gesuchten schwieriger als es sein müsste.

Um diese Suchanfragen zu vereinfachen wurde ursprünglich der "+"-Operator eingeführt. Allerdings haben Google zufolge zu wenig Suchende diesen Operator verwendet und in zwei Drittel aller Fälle sei er zudem falsch verwendet worden. Daher wurde der "+"-Operator vor einigen Wochen entfernt.

Seit dieser Anpassung erreichten Google viele Anfragen nach einer Möglichkeit gezielter nach exakten Suchbegriffen suchen zu können. Google hat diese Anfragen ernst genommen und eine neue Suchfunkion geschaffen. Mit der Nutzung der Google Verbatim Search wird exakt nach dem eingegeben Begriff gesucht und die folgenden üblichen Optimierungen sind dabei nicht aktiv:

  • Automatisierte Rechtschreibkorrektur
  • Personalisierung der Suchanfrage durch Bevorzugen bereits besuchter Webseiten
  • Einbindung von Synonymen
  • Auflisten von ähnlichen Suchergebnissen
  • Suche nach Worten mit dem selben Wortstamm
  • Markieren einiger Suchwörter als optional (z.B. circa)

Die neue Google Verbatim Search steht momentan nur in der englischsprachigen Suche zur Verfügung und ist dort über die Seitenleiste unter „more search tools“ zu finden.

Quelle:
Google Inside Search