9 Tipps für einen erfolgreichen Webshop

Ein Webshop bietet Ihnen die im Vergleich zur Offlinewelt kostengünstige Möglichkeit, ihr Geschäftsmodell im Internet abzubilden. Die Vielzahl der Shops in den jeweiligen Produktbereichen bedingt es aber, einige wesentliche Punkte zu beachten, damit Ihr Shop den gewünschten Erfolg hat und sich vom Wettbewerb abheben kann. Wir gehen bei den folgenden Tipps davon aus, dass Ihre Produkt- und Preispolitik konkurrenzfähig ist, und gehen daher nicht weiter darauf ein.

1 Logo

Das Logo ist für jeden Besucher einer Website – und damit auch für Ihren Webshop – das erste grafische Element, nach dem instinktiv gesucht wird und das in Erinnerung bleibt. Entscheidend sind hier vor allem die Größe und die Platzierung des Logos. Ein Logo sollte nicht dominant sein, vielmehr sollte es nicht übersehen werden und sich zudem auch harmonisch in das Gesamtbild der Seite einfügen. Die Platzierung ist erfahrungsgemäß links oben optimal, da es hier mit den Sehgewohnheiten des Menschen korrespondiert. Der Blick geht von links oben nach rechts unten und selektiert dann die wichtigen Bestandteile einer Seite.

Beispiele aus dem Internet:
Screenshot von ebay

Screenshot von ebay

Screenshot von Zalando

Screenshot von Zalando

2 Eyecatcher

Analog zur Offlinewelt ist Ihr Webshop das Schaufenster für potenzielle Kunden. Ähnlich wie bei einem Schaufenster in einer Fußgängerzone muss zunächst ein grafisches Element die Aufmerksamkeit erregen und den Besucher Ihres Webshops auf der Seite halten und ihn neugierig machen. Das grafische Element soll einen Bezug zu Ihren Produkten haben, denn der Besucher ist ja aktiv auf Ihre Seite gekommen und weiß bereits im Groben etwas zu Ihrer Produktpalette.

3 Beschreibung Geschäftszweck

Jetzt ist der Zeitpunkt gekommen, dem Besucher den Zweck Ihres Webshops zu erläutern und damit gehen wir von der Phase der Aufmerksamkeit in die Phase des Interesses über. Erläutern Sie in kurzer und prägnanter Form, warum der Besucher auf der Seite verbleiben soll und warum Ihr Webshop sein Informations- oder Kaufbedürfnis am besten befriedigt. Wofür steht die Seite und was wird den Besucher im Weiteren erwarten? So lautet die Fragestellung.

4 Alleinstellungsmerkmal

Nachdem der Besucher Ihren Geschäftszweck erfasst hat und sein Interesse geweckt wurde, gilt es nun, ihn zu einer Aktion zu bewegen. Hierzu gilt, Ihre Alleinstellungsmerkmale anzuführen. Was unterscheidet Ihr Angebot von dem anderer Webshops der gleichen Branche? Dieser Schritt ist elementar und entscheidet mit darüber, ob ein Besucher ein Käufer wird oder nicht. Die Nennung der Alleinstellungsmerkmale sollte immer stichpunktartig erfolgen und schnell erfasst werden können. Begleitende grafische Elemente zur Vorhebung sind zu empfehlen.

Grafische Auflistung der Alleinstellungsmerkmale:
Beispiel Gabionen Kaiser

Beispiel: Gabionen Kaiser

5 Call-To-Action

Wenn der Besucher die vorgehenden Punkte bejahend aufgenommen hat, tritt er in die Kaufphase ein. Hier ist es nun wichtig, ihm ein Call-to-Action-Element anzubieten. Darunter verstehen wir ein prägnantes grafisches Element, das ihn zur Produktebene leitet. Dieses Element sollte so ausgelegt sein, dass der Besucher ein Produkt bequem und gezielt suchen kann und platziert, dass es sofort ins Auge springt und sich schlüssig in die vorgenannten Elemente einfügt.

Button A

Button A: nicht sichtbar

Button B

Button B: besser

6 Reason Why?

Sie haben nun den Besucher auf die Produktebene geleitet und er hat ein Produkt seiner Wahl gefunden. Nun stellt sich die Frage nach dem „Warum soll ich hier bestellen?“. Es sollte nun die emotionale Absicherung der rational bereits getroffenen erfolgen. Listen Sie nochmals alle Alleinstellungsmerkmale und Ihren Service auf und platzieren Sie den „Jetzt kaufen“ Button so, dass er nicht penetrant, aber doch augenfällig ist. Nutzen Sie zudem ein Analysetool wie Google-Analytics, um zu analysieren, an welcher Stelle im Informations- und Kaufprozess der Besucher abspringt und optimieren Sie anhand dieser Zahlen Ihren Webshop.

7 Benutzerführung

Wie bereits in den vorgenannten Punkten immer wieder angemerkt, ist die Benutzerführung ein wesentlicher Punkt für den Erfolg Ihres Webshops. Sie bilden de facto ein Verkaufsgespräch ab, in dem Sie den potenziellen Kunden geschickt und sinnvoll durch Ihren Webshop leiten können. So ist bei erfolgreichen Webshops die Navigation ausgeblendet, wenn der Warenkorbbereich aufgerufen wurde. Ein Fast-Kunde soll hier nicht noch abgelenkt werden, sondern soll seinen Einkauf in Ruhe beenden und kann dann nach dem Kauf wieder auf Produkte hingewiesen werden.

8 Testimonials

Was wir im Offlineleben unter „Mundpropaganda“ verstehen und ein sehr wirksames Marketingtool ist, wird im Internet über die Kundenstimmen (Testimonials) abgebildet. Sammeln Sie (echte) Kundenstimmen und platzieren Sie diese so, dass sie augenfällig sind und dem Besucher signalisieren „Hier bin ich gut aufgehoben“.

9 Trust-Elemente

Im Internet spielen neben den harten Faktoren wie Preis und Produkte auch weiche Faktoren eine übergeordnete Rolle, da der Kauf anonym erfolgt und wir keinen Kontakt zu den Verkäufern haben. Einer dieser Faktoren ist das Vertrauen, das die Besucher einem Webshop entgegen bringen. Erhöhen Sie dieses Vertrauen durch entsprechende Trust-Elemente wie Gütesiegeln, Trusted Shop Zertifizierung usw… Achten Sie dabei aber auch darauf, nicht ein Sammelsurium von Trust-Elementen anzuhäufen, sondern ausgewählte und anerkannte Elemente zu integrieren und diese auch so augenfällig zu präsentieren, dass sie nicht untergehen.

  • Facebook-Likes
  • Videos
  • 360°-Sicht
  • Top-Bilder
veröffentlicht in Allgemein | bisher keine Kommentare

Flash to iOS und Flash to Android

Flash bietet die Möglichkeit zur Darstellung, Animation und Manipulation von vektorbasierten Grafiken, Rastergrafiken und Videoclips. Für Websites wird Flash in unterschiedlichen Bereichen angewendet. Diese reichen vom Werbebanner über das Menü bis hin zum Video-Player. Die Inhalte liegen im SWF-Format vor und benötigen zur Wiedergabe eine Software. Auf dem Desktop-PC kann man dank des Adobe Flash Players multimediale und interaktive Inhalte problemlos darstellen. Schwieriger gestaltet sich dies bei Smartphones und Tablets. Man unterscheidet hier unter anderem zwischen den beiden großen Softwarekomponenten von Adobe: Flash Player und AIR.

Zum Profil von Rob Bulmahn

Bildquelle: Rob Bulmahn@Flickr/ Lizenz: CC BY 2.0

Adobe Flash Player

Der Adobe Flash Player ist eine Multi-Platform Client Runtime. Das heißt, sie bietet Nutzern verschiedener Betriebssysteme, wie Windows, Linux und Mac OS, die Möglichkeit, ein und dieselbe Software sowohl eigenständig als auch eingebettet in einen Browser auszuführen.

Problematisch gestaltet sich die Darstellung von Flash in mobilen Browsern, da seit dem Herbst 2013 keine Updates mehr für das mobile Browser-Plug-In des Adobe Flash Players zur Verfügung gestellt werden. Auf Apple iOS war die Darstellung von Flash-Inhalten zunächst gar nicht verfügbar. Erst seit die Nutzungsbestimmungen angepasst wurde und somit Apps mit Editoren generiert werden dürfen, die nicht von Apple stammen, ist die Darstellung möglich. Ob Apple jedoch an dieser Regelung festhält, bleibt abzuwarten.

Adobe AIR

AIR (Adobe Integrated Runtime) ist ähnlich wie der Flash Player eine plattformübergreifende Laufzeitumgebung, die das Ausführen von Flash als AIR-Anwendungen ermöglicht. Diese werden in AS3 (ActionScript 3) programmiert, was die Entwicklung von Desktop-Anwendungen RIAs (Rich Internet Applications) und Apps für iOS, Android, Blackberry OS, Samsung Smart TVs in einem Schritt ermöglicht.

Die Vorteile von AIR liegen einerseits in der Plattformunabhängigkeit, andererseits in der Bereitstellung von nativen Anwendungen. Trotz des nativen UIs (User Interface) bietet AIR eine Vielzahl von Anwendungsmöglichkeiten.

Screenshot Flash

Screenshot: Flash to Android

Anwendungsmöglichkeiten mit Flash

Zu den Anwendungsmöglichkeiten zählt unter anderem die Möglichkeit, bestehende Flash- bzw. AIR-Projekte relativ schnell auf andere Plattformen portieren zu können. Bei der Umsetzung neuer App-Ideen ermöglicht AIR aufgrund der Plattformunabhängigkeit das Erreichen eines großen Publikums.

Es gibt viele Beispiele für Spiele, interaktive Anwendungen und Apps, die auf AIR basieren. Conqu ist eine Task-Management-App, die auf Desktop-PCs, Tablets und Smartphones läuft. Das Spiel Machinarium ist ein webbasiertes Spiel, das nur innerhalb von zwei Monaten in eine App für das iPad konvertiert wurde.

Ebenso wurden Anwendungen, wie Yahoo Map, Antenna für die Webradiosuche und Accu Weather mit AIR entwickelt. Doch auch im Bildungssektor findet AIR Verwendung. Im E-Learning-Bereich kann man mit der Adobe eLearning Suite, in der Adobe Professional enthalten ist, interaktive Anwendung entwickeln, die das Lernen unterstützen.

Screenshot von der Oberfläche von Conqu

Screenshot: Conqu

Fazit

Die Darstellung von und Entwicklung mit Flash ist dank Adobe AIR, Apache Flex und anderen Tools nicht mehr nur auf dem Desktop-PC möglich, sondern unter anderem auch für iOS und Android. Dank der Nutzung von nur einer Programmiersprache ist das Vorgehen sehr zeitsparend.

Für die Spieleentwicklung ist das ein enormer Fortschritt. Doch auch in anderen Bereichen findet Flash Anwendung, wie im immer wichtiger werdenden E-Learning. Wie die Zukunft von Flash in der Zeit von HTML 5 aussieht, bleibt abzuwarten.

veröffentlicht in Allgemein | bisher keine Kommentare

PIM – Produktinformationsmanagement

Es ist nicht überraschend, dass ein PIM etwas mit Daten zu tun hat – genau genommen mit allen einem Produkt zugeordneten Informationen. Diese können sehr vielfältig sein: Produktbeschreibungen, Datenblätter, Logistikinformationen, Produktbilder und -videos, Dokumente, Tabellen und viele mehr.

Aufgaben des Datenmanagements

Zudem sind die Informationen in einem Unternehmen verteilt und nicht zentral an einem Ort gesammelt. So ist häufig intransparent, wo welche Informationen vorliegen und woher sie beschafft werden können. Die Aktualisierungen der Produktinformationen sind in der Regel nicht aktualisiert und obliegen dem Kenntnisstand sowie dem Engagement der involvierten Mitarbeiter.

Dass auf Basis eines derartigen Datenmanagements gewisse Schwierigkeiten auftauchen und dass aus der Nutzung der Daten ein Erkenntnisgewinn entsteht, erscheint nachvollziehbar. Zudem wird ein weiterer zentraler Punkt im Produktdatenmanagement mit Schwierigkeiten behaftet sein – die Auslieferung von Daten in unterschiedliche Ausgabekanäle, wie zum Beispiel Shopsystem, CMS, Apps, Reportings, Kataloge und andere Printprodukte.

Grafische Darstellung des Produktinformationsmanagements

PIM - Produktinformationsmanagement

PIM als Lösung

Hier greift das onlinebasierte Produktinformationsmanagement (PIM) ein – Produktdaten aus verschiedenen Datenquellen werden zentralisiert in ein System integriert und können entsprechend der gewünschten Ausgabekanälen mit zusätzlichen Daten veredelt werden. Die Ausgabe in die einzelnen Kanäle erfolgt unternehmensweit einheitlich und den CI- und Compliance-Vorgaben entsprechend. Zudem stehen diese damit auch unabhängig vom Standort weltweit einheitlich zur Verfügung. Die Integration von Produktdaten in bestehende Onlineshops, Content Management Systeme (CMS) und andere softwarebasierte Ausgabekanäle ist ebenfalls Bestandteil eines PIM. Zudem gibt die Möglichkeit der Anbindung an das ERP-System zur Datenpflege und Bereitstellung von Daten zur Analyse des Gesamtprozesses.

Ein wesentlicher Bestandteil ist am Ende die Analyse der Daten und deren Nutzung in den Kanälen. Sie geben einen Rückschluss auf die Datenqualität und deren Präsentation. Somit ist die Basis für eine Optimierung der Prozesse im Produktdatenzyklus geschaffen und entspricht einem allgemeingültigen Data-Loop. An dessen Ende steht ein Erkenntnisgewinn, der regelmäßig überprüft wird und wichtige Informationen zur Optimierung der Daten und deren Ausgabekanäle liefert.

veröffentlicht in Allgemein | bisher keine Kommentare

Apple: Neue Vorgaben für den App Store

Apples Februar-Deadline und Xamarins 64-Bit-Support

Apple hat angekündigt, dass alle Apps, die für den App Store eingereicht werden, ab dem 1. Februar 2015 auf iOS 8 SDK basieren müssen und für diese auch 64-Bit-Support angeboten werden muss. Es gibt noch keine definitive Aussage darüber, ob damit nur neue Apps gemeint sind, oder ob es dabei auch um Updates für bereits veröffentlichte Apps geht. Xamarin empfiehlt daher, dass alle Einreichungen für den App Store, seien es neue Apps oder Updates, spätestens ab der Deadline den neuen Anforderungen entsprechen. Die Migration sollte für die meisten Apps nicht mehr als einen Tag dauern.

Xamarin hat in der Unified API (vereinheitlichte Programmierschnittstelle) signifikante Fortschritte gemacht, das Code-Sharing und der 64-bit-Support wurden verbessert. Eine stabile Version wird für den 5. Januar erwartet. Daher würde es sich empfehlen, sich für Anfang Januar die Migration der iOS-Apps auf die Unified API vorzumerken.

Folgende Daten sollten Sie als App-Entwickler kennen:

  • Heute: Die letzte Version der Unified API ist in Xamarins Alpha Channel verfügbar und es wird empfohlen alle NuGet, Components, oder andere veröffentlichte Bibliotheken, die für iOS vorgehalten werden, in die Unified API zu überführen oder sie zu updaten, damit sie darin funktionieren. Benutzen Sie bitte dieses Alpha Release, wenn Sie diesen Monat eine iOS Komponente im Xamarin Component Store veröffentlichen. Die stabilen Versionen sind veraltet und sollten nicht mehr verwendet werden.
  • 5. Januar: Die Unified API wird in der stabilen Version für Xamarin Studio und Visual Studio veröffentlicht und alle veröffentlichten Components im Component Store werden erweitert, um diese zu unterstützen. Ab diesem Zeitpunkt wird von Xamarin die Portierung aller 32-Bit-Apps auf 64-Bit empfohlen. Außerdem wird die Version einen Migrationsassistenten für Xamarin Studio und Visual Studio enthalten, mit dem sich die klassischen 32-Bit-Projekte auf duale 32/64-Bit-Projekte mit umstellen lassen.
  • 1. Februar: Alle neuen im App-Store veröffentlichten Apps müssen 64-Bit-Support beinhalten.
Logos von iOS und osx

Bildquelle: Xamarin

Was Sie heute für die zukünftige App-Entwicklung tun können:

Wenn Sie mit NuGets, Components oder iOS-Plug-Ins arbeiten, sollten Sie gleich beginnen, Ihre Bibliotheken auf die Unified API zu portieren, die zurzeit im Alpha Channel angeboten wird, sodass Ihre Bibliothek für 64-Bit-Apps zur Verfügung steht. Dabei können Ihnen die unten stehenden Informationen helfen.

Wenn Sie ein App-Entwickler sind, sollten Sie sich jetzt darauf vorbereiten, Ihre Apps im Januar zu migrieren, wenn die jetzige Version der Unified API im Stable Channel herauskommt. Auch bei dieser Vorbereitung können Ihnen die unten stehenden Informationen nützlich sein.

Xamarin stellt auf seiner Dokumentationsseite einen vollständigen Leitfaden mit den nötigen Maßnahmen zur Verfügung. Hier sind einige der wichtigsten Themen, mit denen Sie sich beschäftigen sollten, bevor Sie mit der Migration beginnen.

Sie können die Migration manuell durchführen oder Xamarins Migrationsassistenten verwenden, der größere Teile der Arbeit für Sie übernimmt.

Fenster: Migrate to unified API Preview

Bildquelle: Xamarin

Installation von Xcode 6.1

Wenn Sie Windows mit Visual Studio verwenden sollten Sie außerdem:

Um mehr zu erfahren, besuchen Sie den Xamarin Blog, lesen Sie die Xamarin.iOS 8.6 release notes und die Dokumentation.

Es handelt sich bei diesem Artikel um eine Übersetzung aus dem Blogbeitrag von Xamarin.

veröffentlicht in Allgemein | bisher keine Kommentare

Big Data – Ein Hype oder doch mehr?

Big Data ist vielleicht das Wort der IT im Jahr 2014. Was hat es damit auf sich und ist es tatsächlich für alle Unternehmen von Bedeutung? Wesentliche Merkmale sind bereits im Namen verankert – Big und Data. Es handelt sich um Daten jeglicher Herkunft. Das Wort „Big“ deutet an, dass die Datenmenge groß ist und es entsprechend ein „Small“ gegeben haben muss.

binary-system

Bild: geralt@pixabay / Lizenz: CC0 Public Domain

EDV – Data Mining – Big Data

Zunächst blicken wir in die Vergangenheit, als die Elektronische Datenverarbeitung (EDV) in den Unternehmen Einzug hielt. Erkenntnisgewinn aus den zur Verfügung stehenden Daten war die Zielsetzung. Dieser versetzte ein Unternehmen zum Beispiel in die Lage Prozesse zu optimieren, Produkt- und Preisstrategien zu entwickeln und sich dadurch einen Wettbewerbsvorteil zu erarbeiten. Der dazugehörige Begriff ist die Business Intelligence, die Analyse der Daten ist dem Data Mining zugeordnet.
Reden wir von Big Data, ändert sich vom Grundsatz her nichts – noch immer werden Daten zusammengefasst, analysiert und führen zu einem Erkenntnisgewinn. Dieser Prozess stellt einen Kreislauf dar, weshalb auch von einem Data Loop die Rede ist.

Die Änderungen in der heutigen Debatte beziehen sich im Wesentlichen auf drei neu dazugekommene Faktoren:

  • die Datenmenge
  • die Anforderung an die Verarbeitungsgeschwindigkeit
  • die Datenvielfalt
  • radar-dome

    Bild: WikiImages@pixabay / Lizenz: CC0 Public Domain

    Big Data für Unternehmen

    Mit diesen Beispielen ist bereits eine Abgrenzung zu der Mehrzahl der Unternehmen genannt, für die Big Data zunächst keine Rolle spielen wird. Die meisten Unternehmen erzeugen gar nicht die immensen Datenmengen und benötigen demzufolge keine zusätzlichen Technologien zur Steigerung der Verarbeitungsgeschwindigkeit.

    Vielmehr kann es ein wichtiges Ergebnis der Big Data-Debatte sein, dass Unternehmen verstärkt in die Optimierung jeglicher Prozesse einsteigen, die einen tatsächlichen Erkenntnisgewinn erzeugen. Dazu gehört mit Sicherheit die Integration von onlinebasierten Softwarelösungen, die flexibel auf bestehende und hinzukommende Datenquellen reagieren, Prozesse optimieren und dadurch einen messbaren Nutzen erzeugen.

    Die onlinebasierte EDV mit kleinteiligen, aufeinander abgestimmten Projekten ist für die meisten Unternehmen der erste Schritt in Richtung Big Data. Und je mehr darüber gesprochen wird, umso mehr Dynamik gewinnt die Erkenntnis, nach der Notwendigkeit einen Erkenntnisgewinn aus Daten zu erzielen. Vor diesem Hintergrund ergibt es Sinn, wenn wir hier von Smart Data oder auch von Smarter Business Solutions reden.

veröffentlicht in Allgemein | bisher keine Kommentare

Google labelt „Mobile-freundliche“ Websites

Wer zukünftig mit seinem Smartphone die Google-Suche nutzt, erhält durch ein Label in den Google-Suchergebnissen sofort Auskunft darüber, ob eine Website für mobile Nutzer optimiert ist. Möglicherweise wird sich die sogenannte „Mobile-Friendliness“ zum Ranking-Faktor entwickeln.

Die Nutzung von Apps steigt

Die Internetnutzung durch mobile Endgeräte steigt stetig: Seit 2011 hat sich die Smartphone-Nutzung von 18 % auf 40 % mehr als verdoppelt. Zugleich ist ein Rückgang der Nutzung des Desktop-PCs zu verzeichnen. Lag sie 2011 noch bei 51%, ist bis 2013 bereits ein Rückgang auf 43 % zu verzeichnen.[1]

Entsprechend wird es immer wichtiger, dass Websites für Mobile optimiert sind. Google setzt es sich mit dieser Neuerung zum Ziel, die Nutzerfreundlichkeit für Smartphone-User zu steigern. Umständliches Scrollen und Zoomen sollen dadurch vermieden werden. In den Google-Suchergebnissen werden geeignete Seiten entsprechend hervorgehoben, wie aus dem Google-Webmaster-Blog hervorgeht.

Screen Mobil Testing Tool

Screenshot: Google-Ergebnis für Xamarin bei ISEO

Wann ist eine Website „Mobile-Friendly“?

Eine Website wird von Google als „Mobile-Friendly“ gekennzeichnet, wenn sie folgende Kriterien erfüllt:

  • Software, die nicht für mobile Geräte tauglich ist, wird vermieden, z.B. Flash
  • Texte sind ohne Zoomen lesbar
  • Der Inhalt ist so an die Seitengröße angepasst, dass weder horizontal gescrollt noch gezoomt werden muss
  • Hyperlinks sind in einem ausreichenden Abstand zueinander platziert, um ein gezieltes Anklicken zu ermöglichen

Screenshot: Beispiel für das Label

Mit dem Mobile-Friendly Test von Google kann überprüft werden, ob eine Website mobil-freundlich ist. Wir als Full-Service-Agentur helfen Ihnen gerne bei der Optimierung Ihrer mobilen Website!

„Mobile-Friendliness“ als Ranking-Faktor

Im Rahmen dieser Neuerung wird ebenso drauf hingewiesen, dass die „Mobile-Friendly“-Kriterien zu Experimenten im Ranking-Bereich genutzt werden. Eventuell sind damit mobiloptimierte Seiten bei Google zukünftig höher platziert als jene, die nicht als „mobile-friendly“ eingestuft werden. Ob und wann sie einen Einfluss auf das Ranking haben wird, ist noch nicht bekannt.

_________________________________
[1] Studie von Do Mobile!: „Deutschland wird Mobile – Sind die Unternehmen vorbereitet?“

veröffentlicht in Allgemein | bisher keine Kommentare

Inkscape: Das Tool für Webdesign und Appdesign

Auch wir haben unsere Designprojekte jahrelang mit Photoshop umgesetzt. Es erwies sich immer als ein Tool, welches kaum Wünsche offen ließ. Die Stärken liegen unserem Ermessen nach eindeutig in der Bildbearbeitung, vergleicht man Photoshop mit klassischen Layoutprogrammen, wie InDesign, Quarkxpress oder Illustrator. Die Skalierbarkeit von Objekten und Grafiken, das Anordnen, Ausrichten und Exportieren einzelner Designelemente für das Web- oder Appdesign in verschieden Ausgabegrößen, unterliegt aktuell noch vielen Einschränkungen oder einem sehr zeitaufwendigen Workflow.

Photoshop wurde in erster Linie für die Ausgabe von pixelbasierten Dateien entwickelt. Eine kontinuierliche Optimierung durch Adobe findet zwar regelmäßig statt, aus unserer Sicht fehlen aber zu viele Funktionen, die man beispielsweise aus der Arbeit mit Illustrator oder InDesign kennt. Als Alternative nahmen wir vektorbasierte Werkzeuge in den Focus, wie Illustrator, Sketch und Inkscape. Für unseren Workflow erkannten wir, dass Inkscape unseren Bedürfnissen am ehesten entsprach.

Bild: Inkscape Splashscreen

Unsere Arbeit mit Inkscape

Inkscape ist ein freies OpenSource-Designtool, das vektorbasiert arbeitet. Der Editor erzeugt eine XML-Struktur und SVG wird als Dateiformat eingesetzt. Die Produktionsdateien sind somit sehr nah an den SVG-Spezifikationen der W3C ORG. Fertig produzierte Layout-Dateien können bei der Umsetzung mit dem Browser, ideal mit Firefox oder Chrome, dank der hervorragenden SVG-Unterstützung, geöffnet werden. Bei der Untersuchung der geladenen Datei mit den jeweiligen Entwicklerwerkzeugen des Browsers werden die Vorteile deutlich.

Bild: SVG im Browser dargestellt

Farben, Schriftgrößen und CSS- Anweisungen für die Umsetzung, beispielsweise für das Webdesign, sind sofort sichtbar und lassen sich bei Bedarf auch per Copy & Paste direkt in das Code-Projekt einfügen. Zudem bieten HTML5 und CSS3 im Zusammenspiel mit SVG Dateien und Javascript viele Möglichkeiten der Animation ohne auf Flash zurückgreifen zu müssen. Es gibt mittlerweile auch sehr ausgereifte JavaScript-Bibliothen wie z.B. Snap.svg

Beispiele dazu findet man im Netz

Bild: Screenshot von snapsvg.io

Ein weiterer Vorteil, den Inkscape mit sich bringt, ist die Möglichkeit sehr schnell und gezielt einzelne Layout-Elemente als SVG-Datei ausgeben zu können. Damit lassen sich diese gleich in ein Projekt zur Aniamtion, als Logo, Icon oder als Element für die verlustfreie Skalierung im Responsive Design einbinden.

Auch beim Ausrichten, Anordnen und Verteilen der Elemente eines Layouts, verdeutlichen sich die Vorteile eines echten Layoutprogramms. Mit wenigen Mausklicks hat man ein sauber ausgerichtetes Design, im dem sich Objekte pixelgenau per Tastatureingabe verschieben und anordnen lassen.

Bild: Ausrichten und Verteilen in Inkscape

Das Exportieren aus Inkscape ist ebenso so einfach: Man markiert ein Objekt mit der Maus und exportiert mit Datei -> Bitmap exportieren (Umschalt + Strg + E) das jeweilige Objekt als PNG-Grafik. Hier können zudem die Ausgabegröße und Auflösung festgelegt werden.

Bild: Die Funktion exportieren in Inkscape

Mühseliges Finden, Zuschneiden und Exportieren einer Bildebene, wie in Bildbearbeitungsprogrammen, entfallen. Inkscape verfügt ebenso wie Illustrator über die Möglichkeit in Ebenen zu arbeiten, punktet aber zusätzlich mit einer Vielzahl von Funktionen, Filtern und zusätzlichen Plugins.

Es können auch Plottdateien erstellt werden, Präsentationen mit verschieden Werkzeugen (SVG-Animationen, die im Browser laufen), PDF-Dateien, Postscripts, AutoCAD und vieles mehr. Die Filterpallette ist umfangreich, vom Strichcodegenerator bis hin zur Möglichkeit Text in Blindenschrift zu rendern.

Ein großer Gewinn für Designer ist auch der Webslicer, der es ermöglicht, das gesamte Layout als Webpaket zu exportieren. So werden nicht nur Bilder, sondern auch eine Beispieldatei im HTML Format und die korrekt verlinkte CSS-Datei ausgegeben.

Unser Fazit

Christian Dürr, Designer bei ISEO, über die Arbeit mit Inkscape: „Die Veränderung des Workflows verlief nicht immer reibungslos, der Mensch ist ja auch gerne ein Gewohnheitstier. Hat man sich aber auf die Arbeitsweise mit Inkscape eingestellt, möchte man dieses Tool nicht mehr missen.“

Wir sind bei der Umsetzung unserer Layouts schneller und effektiver geworden. Photoshop nutzen wir natürlich noch immer, meist für die Bildbearbeitung oder für besonders anspruchsvollen „Eye Candy“.

veröffentlicht in Allgemein | bisher keine Kommentare

Mobile Karte erstellen mit TileMill

Für die Erstellung von Karten gibt es unterschiedliche Möglichkeiten. Für einen Großkunden bekamen wir den Auftrag, eine App zu entwickeln, in der unterschiedliche Standorte dargestellt werden können. Um dieses Vorhaben zu realisieren, haben wir uns für die Kartenerstellung durch TileMill mit CartoCSS aus OpenStreetMap entschieden. TileMill ist eine Open-Source-Software zur Erstellung von Karten und für jeden frei verfügbar. Das Tool wurde von Mapbox entwickelt und ist unter Windows, Linux und Mac nutzbar. In der App-Entwicklung arbeiten wir mit Xamarin auf der Programmierbasis von C#.

Bild: Bildexport Deutschlandkarte aus TileMill

App-Entwicklung mit TileMill

TileMill ist ein Tool, das sowohl für die wissenschaftliche Nutzung im Bereich der Kartografie als auch für die allgemeine Kartenerstellung auf einer Website und für die Einbindung in Applikationen geeignet ist. ESRI Shapefile, KML, GeoJSON, GeoTIFF, PostGIS, CSV und SQLite sind als kompatible Datenquellen zu verzeichnen. Die Rohdaten werden aus OpenStreetMap importiert, aufbereitet, zusammengeführt und gestylt, so dass hochwertigen Karten entstehen, die direkt in das .mbtiles-Format exportiert werden.

Als Datengrundlage zur Kartenerstellung und Datenmanipulation werden freie Geodaten von Mapbox für die Länderinformationen verwendet, die für TileMill optimiert sind. In unserem Fall lagen die Daten im Esri-Shapefiles-Format vor und wurden bereits mit Mapnik’s shapeindex tool indexiert, damit Abfragen innerhalb von CartoCSS erfolgen kann. Erweiternde Daten, wie einzelne Bundesländer, Flüsse oder Städte, können über die Geofabrik bezogen werden. Städteinformationen sind in der Mapbox Cloud zu finden und können in TileMill in einem neuen Layer eingefügt werden. Muss man die Geodaten um Informationen erweitern, beispielsweise wenn bei Ländern das Kartenmaterial nicht ausreichend aufbereitet ist, kann eine Bearbeitung oder Erweiterung der Attribute notwendig sein. Nur dadurch sind die Abfragen in CartoCSS gewährleistet.

Bild: Bildexport aus TileMill

Durch das Reinladen und die optische Aufbereitung von Esri-Shapefiles in TileMill als Layer, besteht die Möglichkeit neben der Position und Farbgebung auch das Verhalten diverser Zoomstufen festzulegen. In unserem Fall erwies es sich als sinnvoll, Städtenamen erst ab einer höheren Zoomstufe einzublenden bzw. sie dem Format entsprechend anzupassen.

CartoCSS dient der Gestaltung des Kartenmaterials durch Stylingangaben und Bedingungen. Wer den Umgang mit CSS kennt, dem wird das Derivat CartoCSS bekannt vorkommen. In diesem Fall werden aber zusätzliche Möglichkeiten, Bedingungen abzufragen und auf diese zu reagieren, geboten.
Nach dem Abschluss der Style-Anpassungen werden die Kartendaten im .mbtile-Format, einem SQLite-Format, exportiert. In diesem werden Einzelbilder unter entsprechenden Zoomfaktoren und Koordinaten als Indizes gespeichert.

Frank Ortner, Programmierer bei ISEO, über die Arbeit mit TileMill: „Die Möglichkeiten in der Kartengestaltung sind durch TileMill extrem umfangreich und durch CartoCSS sehr flexibel.“

veröffentlicht in Allgemein | 1 Comment

Studentenprogramm von Xamarin

Mit dem neuen Programm erleichtert Xamarin Studenten die App-Entwicklung. Das Unternehmen, das die Entwicklung nativer Apps für iOS, Android und Windows mit einem Quellcode C# gewährleistet, stellt den Studenten hierbei die Entwicklungsumgebung kostenfrei zur Verfügung.

Zudem gibt es mit dem „Xamarin Student Ambassador“-Programm die Möglichkeit, dass studentische Botschafter ihre Kommilitonen bei der App-Entwicklung und Programmierung mit C# unterstützen können. Um ein „Xamarin Student Ambassador“ zu werden, muss man lediglich Spaß an der App-Entwicklung und am Unterrichten mitbringen. Eine Affinität zu den neuesten Technologien sollte ebenso vorhanden sein, wie das selbstverständliche Interesse, die aktuellen Entwicklungen zu verfolgen.

Xamarin for Students

Quelle: https://xamarin.com/student

Als Botschafter ergibt sich die Chance, eng mit dem Entwickler-Team von Xamarin zusammenzuarbeiten. Zudem bietet das Unternehmen neben kostenfreiem Zugriff auf Xamarin Business für iOS, Android und Mac zusätzlich einen freien Zugang zu den Kursen an der Xamarin University.

Auch Lehrkräfte und akademische Institutionen werden mit Software und Lehrmaterialien unterstützt, sofern diese Kurse zur Entwicklung mobiler Apps anbieten, oder dies zukünftig beabsichtigen.

veröffentlicht in Allgemein | bisher keine Kommentare

App-Entwicklung: Cross-Platform Development im Überblick

In der App-Entwicklung hat man die Wahl zwischen plattformübergreifendem Framework und applikationsspezifischem Design. Die erste Option bedingt zwar einen geringeren Aufwand und die App wird auf jeder Plattform ähnlich funktionieren. Andererseits ist es schwierig, das UI-Design so anzupassen, dass es für alle Plattformen passt. Option 2 wird häufig für die Spielentwicklung gewählt. Es zeichnet sich dadurch aus, dass durch einen höheren Aufwand eine möglichst plattformspezifische App designt werden kann. Im Folgenden stellen wir Ihnen für die erste Option den Vergleich zwischen PhoneGap, Titanium und Xamarin vor.

Allgemeines zu Cross-Platform Development

Die plattformübergreifende Entwicklung ist ein großes Thema – zumindest, bis der Tag kommt, an dem alle die gleiche Entwicklungsplattform nutzen. Mit Android, HTML, WebKit, Windows, iOS, Xamarin, PhoneGap, Titanium und Corona werden nur einige der vielen Möglichkeiten genannt.

In PhoneGap/Cordova, Appcelerator Titanium und Sencha werden beispielsweise Web-Applikationen geschrieben, die in eine native Applikation verpackt werden. Die Alternative ist die Verwendung eines plattformübergreifenden Werkzeugs, das native Apps ausgibt. Als Beispiele hierfür sind Xamarin Studio oder Embarcardero FireMonkey zu nennen.

Bild: http://pixabay.com/en/twitter-facebook-together-292988/


Man muss sich also zwischen dem deutlich aufwendigeren Vorgehen, zwei oder mehr UI-Designs für eine Applikation zu pflegen und den möglichen Einschränkungen im Design entscheiden.

Des Weiteren gestaltet es sich immer problematisch, in einem Browser an die Qualität eines nativen UIs heranzureichen: Sencha beispielsweise setzt ein großes Team von Web-Programmierexperten ein, deren vorrangige Aufgabe es ist, sich in ihrem UI-JavaScript Framework Sencha Touch dieses Problems anzunehmen. Nichtsdestotrotz ist es heute weder in den meisten Browsern noch auf den meisten Plattformen möglich, die Qualität des Verhaltens einer nativen Applikation zu erreichen. Die Frage, ob der Browser schon gut genug sei, muss zunächst im Hinblick auf die eigenen Anforderungen und Sensibilitäten beantwortet werden. Dennoch ist es unzweifelhaft so, dass Browser-Applikationen weniger gut als native UIs sind. Abhängig vom Browser, können sie sogar deutlich schlechter sein.

Xamarin

Xamarin, ursprünglich ein Geschäftsbereich von Novell, hat in den letzten 18 Monaten seine eigene IDE und ein eigenes Snap-in für Visual Studio auf den Markt gebracht. Die zugrunde liegende Prämisse von Xamarin ist es, mit Hilfe von Mono (Cross-Platform-Implementierung des .NET-Frameworks) in C# eine geteilte Codebasis für Projekte zu schaffen und diese mit systemabhängigen Erweiterungen zu nativen Apps zusammenzusetzen.

Zusätzlich zu der Erschaffung einer visuellen Design-Plattform, in der sich native Applikationen entwickeln lassen, wurden Testumgebungen integriert, native Bibliotheken eingebunden und ein Shop für Erweiterungen und Komponenten nach dem Vorbild von Nuget eingerichtet. Vor Kurzem wurde für iOS eine Möglichkeit zum visuellen Design in der IDE eingerichtet, wodurch die Verwendung von XCode für Entwickler entfällt. In Visual Studio werden jetzt alle drei Plattformen unterstützt und zudem ist dank der Xamarin Testcloud die Möglichkeit gegeben, die Entwickler beim Testen zu unterstützen.

Xamarin hat von Anfang an eine reiche, virtuelle Design-Erfahrung für Android geliefert. Zudem gibt es die Möglichkeit Custom Delegates anzulegen, die den Entwickler von den objective-C- und Java-Einschränkungen befreien. Weiterhin funktionieren viele Bibliotheken, wie zum Beispiel Newtonsofts JSON.Net, unproblematisch in allen drei Umgebungen.

Entwicklungsumgebungen von Xamarin

PhoneGap

PhoneGap verfolgt zwei wichtige Ziele: Einerseits soll die Entwicklung von HTML-basierten Web-Applikationen als native Apps ermöglicht werden, andererseits wird ein gemeinsames natives API-Set bereitgestellt. Zu diesem gehören unter anderem ein einfacher Kamerazugang, Geräteschnittstellen und Sensoren, die nicht über den Browser abrufbar sind. Vergleichbar mit der Entwicklung einer statischen Website, schreiben Entwickler HTML-, CSS- und JavaScript-Dateien in einem lokalen Verzeichnis.

Besonders treffend hat Kevin Whinnery den Vorteil von PhoneGap in seinem Blog beschrieben: „It does what it does, and it does that well.“ (Es tut, was es tut und das tut es gut). Neben der Tatsache, dass das PhoneGap-Team nur den kleinsten gemeinsamen Nenner von nativen APIs für webbrowserbasierte Apps implementiert hat, können einfache native Erweiterungen schnell entwickelt werden.

Zu den Nachteilen zählt, dass JavaScript keine zur Applikationsentwicklung geeignete Programmiersprache ist, da unter anderem unterschiedliche Bibliotheken nicht kompatibel sind. Zudem resultiert die Unmenge an immer neuen Frameworks und Bibliotheken in einer Überfülle an Wahlmöglichkeiten, von denen zu viele noch nicht ausgereift sind. Die Fähigkeiten zur Interaktion mit anderen Applikationen oder Gerätefähigkeiten sind zudem sehr eingeschränkt. Dies ergibt jedoch aus der Tatsache, dass es in HTML5 bis auf Standortbestimmung, Kamera und lokale Datenbanken keine Standards gibt und eine Änderung den entsprechenden Verlust der Plattformunabhängigkeit zur Folge hätte.

Appcelerator Titanium

Titanium Mobile verfolgt das Ziel, eine plattformübergreifende high-level JavaScript Runtime und eine API für die mobile Entwicklung bereitzustellen. Zurzeit werden hierbei iOS, Android und Desktopbrowser unterstützt.

Auch bei Titanium sind zwei wichtige Annahmen zur Mobilentwicklung zu beachten. Auf der einen Seite gibt es einen Kern von APIs in der Mobilentwicklung, die sich über alle Plattformen hinweg vereinheitlichen lassen. Diese Bereiche sollten für Code-Recycling anvisiert werden. Auf der anderen Seite gibt es plattformspezifische APIs, UI-Konventionen und Eigenschaften, die Entwickler in den Entwicklungsprozess einbeziehen sollten. Für solche Fälle sollte ein plattformspezifischer Code existieren, um die bestmögliche Nutzungserfahrung zu gewährleisten.

Unser Fazit: Wir entscheiden uns für Xamarin

Nachdem man sich mit allen Möglichkeiten befasst hat, ist es ratsam, die Wahl des Entwicklungstools je nach den Produktbedürfnissen zu treffen. Generell ist es jedoch sinnvoll, dass man sich für eine Herangehensweise entscheidet.

Wir haben uns für Xamarin entschieden und sind sehr zufrieden mit unserer Wahl. Zu den Vorteilen zählen unter anderem:

  • Native Performance
  • Besser lesbarer Code gegenüber Scriptsprachen
  • Einfacheres Testen: Gemeinsamer Code braucht nur einmal getestet werden
  • Möglichkeit zur Nutzung der Testcloud
  • Gemeinsame Geschäftslogik über die Zielplattformen hinweg: je größer die Geschäftslogik – desto größer die Einsparungen
  • Support: Xamarin bietet umfangreichen Support an (direkt oder in der Community / im Forum)

Frank Ortner, Programmierer bei ISEO zu Cross-Platform Development mit Xamarin: „Die Auslagerung und gemeinsame Nutzung der Geschäftslogik und Datenhaltung schuf eine höhere Effektivität, Qualität und damit einen harmonischeren Projektverlauf als bei der konventionellen nativen App-Entwicklung in Java und Objektive-C.“

veröffentlicht in Allgemein | bisher keine Kommentare