Blogthemen filtern:

Unsere Blogthemen

Responsive Images in Neos

Integration mit Fluid

Bildauflösung und deren Dateigrößen

Überall im Web wird mit Bildern gesprochen. Das beste Design lässt sich schnell auf ein sehr unansehnliches Niveau herunterbringen, wenn die Qualität der Bilder nicht ausreicht.

Hier besteht für Entwickler eine neue Schwierigkeit eine positive User Experience zu erzeugen. Auf der einen Seite sind hochauflösende 5k-Displays und Internetverbindungen jenseits der 6.000er Marke. Auf der Anderen sind ebenso scharfe Displays auf Smartphones, bei begrenztem Highspeed-Datenvolumen. 

4. Mai 2017
Marcel Tams

Marcel Tams

Falter und Morrison strahlen in neuem Glanz

Neuer Look, neue Funktionen, besseres Handling. BIKE&CO stellt die Websites seiner Fahrradmarken neu auf

Unter www.falter-bikes.de und www.morrison-bikes.de können sich, insbesondere Endkunden, jetzt noch einfacher über ihre Räder und die markenführenden Händler informieren. 

Die eBusiness Endkundenstudie, die der Fachhandelsverband im Jahr 2016 in Auftrag gegeben hat, trifft ein eindeutiges Fazit: Der Endkunde will die Informationen zum Produkt online und in erster Linie auf der Seite des Fahrradherstellers. 

Dies hat Marketingleiter Georg Wagner zum Anlass genommen, die Websites der hauseigenen Marken „Falter“ und „Morrison“ zu relaunchen. Dabei stehen die Bedürfnisse des Endkunden klar im Fokus.

Die neuen Seiten bestechen mit emotionalen Bildern, endkundengerechten Informationen und Social-Media-Anbindung. Mit der übersichtlichen Menüführung und der spezifischen Händlersuche mit Google Maps wurde außerdem die Bedienbarkeit optimiert. 

„Der Kunde stellt inzwischen höhere Ansprüche an die Website einer Marke als noch vor einigen Jahren.“, so Wagner. „Sie soll emotionalisieren und das Markenimage transportieren und gleichzeitig mit harten Fakten und Innovationen überzeugen. Die Website soll den Weg zum Kauf aufzeigen und Interaktionsmöglichkeiten bieten. Damit muss die Homepage mehr sein, als die Visitenkarte im Netz.“

14. Februar 2017
Lars Lehners

Lars Lehners

Beacons und Content-Management

Eine Technologie-Demo gibt Aufschluss über den aktuellen Stand der Technik

Estimote Beacons und Sticker

Beacons sind kleine Funkfeuer, die ähnlich wie ein Leuchtturm ein ständiges Signal aussenden. Ein Gerät wie ein Smartphone oder Tablet kann nun die Entfernung zu einem Beacon ermitteln und je nach App und gewünschter Logik darauf reagieren. Der Vorteil zu Verfahren wie GPS ist die Eignung auch in Innenräumen und die eindeutige Codierung von Orten.

Für Beacons sind derzeit die zwei Protokolle iBeacon (Apple) und Eddystone (Google) geläufig. Diese basieren auf einer energiesparenden Variante von Bluetooth und werden sowohl von iOS als auch Android unterstützt.

Was ist der Einsatzzweck für Beacons?

Im Prinzip können sämtliche Geo-bezogenen Anwendungen mit Beacons realisiert werden. Der Kreativität sind hier keine Grenzen gesetzt und die Technik wird mittlerweile in Museen oder Baseball-Stadien weltweit eingesetzt. Eine schöne Liste mit realisierten Projekten gibt es beim Hersteller Estimote unter Apps and Projects with Estimote.

Estimote Beacons

Die Demo-Applikation

Um die Themen Beacons und unsere Erfahrungen im Bereich Content-Management zu verbinden, haben wir mit unserer Demo-Applikation Beacon Spot als iOS App eine Location-basierte Darstellung von sogenannten Spots implementiert. Jeder Spot hat einen Bezug zu einem bestimmten Ort und vermittelt einen bestimmten Inhalt (z.B. auch über das Prinzip des Storytellings). Diese werden über ein Neos CMS als eigene Seite oder externer Link gepflegt und dann in einer App automatisch eingeblendet.

Zu jedem Spot kann in Neos die Kennung des Beacons hinterlegt und eine Mindestdistanz für das automatische Öffnen des Inhalts angegeben werden. Diese Kombination aus iOS App und CMS kann bereits viele praktische Anwendungsfälle wie in einem Museum, einer Produkt-Ausstellung oder Messe abbilden.

Da die App die Annäherung an einen Beacon eindeutig registrieren kann, haben wir als Demonstration auch noch einen Rückkanal in Form einer Darstellung von Besuchern eines Spots in Echtzeit implementiert. Dafür kann in der App (optional) ein Name vorgegeben werden.

Als Hardware kommen in unserer Demo Beacons von Estimote zum Einsatz. Diese gibt es als Entwickler-Paket oder auch in größerer Stückzahl. Zudem sind sie wetterfest und mit vielen interessanten Funktionen ausgestattet. Aber auch von vielen anderen Herstellern sind Beacons verfügbar. Die Seite Beacon Guide bietet eine umfangreiche Auflistung verfügbarer Beacon Hardware.

Entwicklung der iOS App

Für die Demo wurde die iOS App Beacon Spot entwickelt. Beim Start der App wird eine Information angezeigt und es kann optional ein Name angegeben werden. Im Hintergrund wird die Liste der verfügbaren Spots aus dem Neos CMS abgerufen. Neben jedem Spot wird nun währen der Benutzung ein Indikator für die Entfernung angezeigt. Die Liste der Spots wird zudem nach Entfernung sortiert. Kommt ein Spot in die zuvor festgelegten Distanz öffnet sich der dahinterliegende Inhalt automatisch.

Mit Hilfe des Estimote SDKs und die Umsetzung als native App konnten die Anforderungen innerhalb weniger Tage umgesetzt werden.

Integration in Neos CMS

Über eigene Inhaltstypen (Node Types) konnte in Neos sehr einfach die Datenstruktur für Spots realisiert werden. Über eine weiter Definition sind diese Daten als JSON-Feed für die App verfügbar. Neben externen Inhalten können Inhalte für einen Spot auch direkt in dem Neos CMS gepflegt werden.

In sehr kurzer Zeit konnte also ein einfaches und trotzdem individuelles Content-Management für die App inklusive Beacon-Daten implementiert werden.

Realtime Analytics mit Go

Als dritte Komponente wollten wir in der Demo die Bewegung der App-Benutzer und die Interaktion mit Beacons visualisieren. Dafür wurde ein schlanker Server auf Basis von Go entwickelt. Dieser sammelt Tracking-Daten und liefert sie über eine Websocket Verbindung an eine Visualisierung im Browser. Wird ein Spot von einem App-Benutzer geöffnet, so ist dies in der Visualisierung direkt sichtbar. Eine Gewichtung zeigt aktive und inaktive Besucher auf den jeweiligen Spots.

Visualisierung des Trackings

Fazit

Mit einer iOS App, einem CMS auf Basis von Neos und einem Realtime Analytics Server konnte eine überzeugende Demo für die aktuellen Fähigkeiten von Beacons aufgebaut werden. Mit diesen Erfahrungen können wir für unsere Kunden in Zukunft spannende Projekte mit dieser Technik anbieten.

12. Januar 2016
Christopher Hlubek

Christopher Hlubek

Es geht voran!

Nachdem Severin die letzten Mockups unserer neuen Webseite finalisiert hatte, konnte ich endlich mit dem Design beginnen. Doch wie sollte die neue Webseite aussehen? Wir waren uns einig, dass wir ein reduziertes, klares Design brauchen, das modern wirkt und den Content unterstützt, anstatt ihn durch Effekte in den Hintergrund zu drängen. Schnell fiel der Begriff "Flat Design", doch was zeichnet Flat Design eigentlich aus?

Flat Design bedeutet die Reduktion auf das Wesentliche, d.h. keine Farbverläufe, keine Schlagschatten, keine Texturen, keine 3D-Effekte. Im Gegenzug jedoch klare Konturen, vollflächige Farben und verstärkter Einsatz von Typografie als Gestaltungsmittel.

Microsoft hat es vorgemacht und mit der Modern UI (Metro-Design) ein neues Designkonzept entwickelt, dass sich deutlich vom "Skeuomorphism Design" von Apple unterscheidet und einfach den visuellen Nerv der Zeit getroffen hat. 

Aber auch aus technischer Sicht hat das Flat Design Vorteile. Dadurch, dass auf Effekte nahezu vollständig verzichtet wird, können zahlreiche Grafiken mittels CSS3 realisiert werden, wodurch es schlichtweg ressourcenschonender ist. Hinsichtlich leistungsschwächerer Prozessoren in Smartphones und schlechten Datenverbindungen ein Punkt, der nicht außer Acht zu lassen ist.

Aber wieder zurück zum Design. Nach einigen Diskussionen sind wir zu dem Ergebnis gekommen, dass wir das Design nicht gänzlich Flat gestalten, sondern es mit dezenten Kanten versehen, um dem Design somit das gewisse Etwas zu verleihen. 

Eine Herausforderung sind unsere vier Firmenfarben, da diese durch vollflächigen Einsatz in verschiedenen Browsergrößen stets anders wirken, sie aber dennoch mit dem Rest der Webseite harmonieren sollen.

Da wir in der Konzeption mit der mobilen Ansicht begonnen hatten ("Mobile-First"), habe ich auch beim Design zuerst die Mobilvariante gestaltet, bevor ich mich schrittweise der Desktopvariante näherte. Für mich war es spannend zu sehen, welche Möglichkeiten einem offen stehen, wenn man in der nächst größeren Version plötzlich mehr Raum zur Verfügung hat. Auf einmal ist es möglich zusätzliche Elemente wie z.B. Bilder und längere Texte zu verwenden oder das Design einfach luftiger zu gestalten.

Eine weitere Herausforderung war der "One-Page"-Charakter der einzelnen Seiten. Um viel Content auf einer einzigen Seite sinnvoll darzustellen, haben wir diesen in einzelne Sektionen eingeteilt, welche auch visuell voneinander getrennt sein sollten, was mit einer einzigen Farbe und nur einem Grauton nicht immer einfach war.

Doch jetzt ist es geschafft und ich bin mit dem Design soweit fertig, dass es mit Umsetzung losgehen kann.

Es geht voran!

Startseite in 320 Pixel Breite

Startseite in 480 Pixel Breite

Startseite in 768 Pixel Breite

Startseite in 1024 Pixel Breite

7. August 2013
Thilo Kressdorf

Thilo Kressdorf

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.

11. Juli 2013

Severin Glöckle

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.

24. Juni 2013
Laura Möller

Laura Möller

In den letzten Jahren ist die Nutzung des mobilen Internets in Deutschland von 13% im Jahre 2008 rasant auf über 50% im letzten Jahr angestiegen (vgl. Accenture). Dabei geht es schon lange nicht mehr nur um das Chatten mit Freunden oder Nutzen von Apps, sondern immer mehr auch darum, reguläre Webseiten über das Smartphone oder Tablett aufzurufen (vgl. Vivaki). Umso wichtiger ist es, Nutzern mobiler Geräte ein optimales Erlebnis zu bieten.

Die Anpassung einer Webseite an verschiedene Auflösungen mittels CSS (das sogenannte "responsive Webdesign") ist ein Schritt, Inhalte für unterschiedlichste Geräte bestmöglich darzustellen. Zahlreiche CSS-Frameworks (beispielsweiseTwitter Bootstrap oder Foundation von Zurb) vereinfachen diesen Prozess, sind jedoch in Verbindung mit von Content-Management-Systemen generierten Formularen häufig nur schwer zu vereinbaren.

Der folgende Artikel zeigt eine Möglichkeit, mehrspaltige und responsive Formulare - generiert mit der TYPO3-Extensionpowermail - auf Basis von Twitter Bootstrap umzusetzen.

5. April 2013

Severin Glöckle