Projekte

Relaunch von Cosmopolitan.de

  • Geschrieben am: 11.03.2015
  • von: admin

Bildschirmfoto 2015-03-11 um 20.18.29Im Dezember 2014 wurde die neue Webseite des Magazins Cosmopolitan neu gelauncht. Basierend auf dem CMS Drupal wurde vor der Implementierung der Responsive Webseite ein dynamischer Prototyp erstellt. Dieser dient dazu, sämtliche Seitentypen produktiv zu erstellen und klickbar zu machen, um daran Anpassungen und Erweiterungen durchführen zu können. Dieser Prototyp ist eine eigenständige Webanwendung, deren Komponenten (CSS, Javascript, Fonts und Bilder) 1:1 im Produktivsystem genutzt werden. Als Technologien wurden dafür Gulp.js, bower.io, SCSS und jQuery genutzt. Die Entwickler haben die Möglichkeit, sämtliche Arbeitsabläufe der Entwicklung über Gulp.js zu automatisieren. Vom Komprimieren der Sourcen über das Erstellen von Iconfonts bis zum Starten eines Servers mit Livereload wird alles zentral über Gulp organisiert. Dieser Workflow ist die Grundlage für eine professionelle, agile Arbeitsweise zur Erstellung und den Betrieb einer dynamischen Webseite. Benchmarc interactive war maßgeblich an der Erstellung des Prototypen und dem Aufsetzen des Workflows beteiligt. Cosmopolitan ist die deutschsprachige Ausgabe des bekannten Magazins - eine Publikation der Bauer Media Group.

Support für wunderweib.de

  • Geschrieben am: 27.06.2014
  • von: admin

Wunderweib WebseiteBeim Bauer-Verlag unterstützen wir in den letzten Monat den Relaunch von Wunderweib.de. Dort wurde das Frontend komplett überarbeitet und mit Hilfe von jQuery, Less, HTML5 und CSS3 neu aufgesetzt. Der Relaunch fand pünktlich im Juni statt. Die Webseite basiert auf dem CMS FirstSpirit. Was ist wunderweib? "www.wunderweib.de - DAS Magazin für wunderbar weibliche Frauen! Bei uns gibt es die geballte Kompetenz der 30 beliebtesten Frauenzeitschriften Deutschlands. WUNDERWEIB.de bietet die ganze Welt der Frauen in einem Portal! Egal ob Beauty- und Modetipps oder Ratgeber rund um das Thema Familie und Haushalt - bei WUNDERWEIB finden Sie die geballte Kompetenz aus mehr als 30 Zeitschriften. Neugierig geworden? Dann jetzt schnell Fan werden und immer auf dem Laufenden bleiben! WUNDERWEIB - Frauen klicken anders."

Professional ScrumMaster

  • Geschrieben am: 01.11.2013
  • von: admin

PSMISeit heute ist Marcus Bindseil zertifizierter Professional ScrumMaster. Die Zertifizierung wurde auf Scrum.org, der Herkunft von Scrum, abgelegt. Scrum ist ein Framework zur nachhaltigen Entwicklung komplexer Produkte, mit dessen Hilfe Menschen komplexe adaptive Aufgabenstellungen angehen können, und durch das sie in die Lage versetzt werden, produktiv und kreativ Produkte mit dem höchstmöglichen Wert auszuliefern. Scrum ist  einfach zu lernen und lässt sich schnell  einsetzen. Somit kann Scrum häufig den ersten Schritt darstellen, um Softwareprojekte agil zu machen. Darüber hinaus definiert Scrum klare Rollen (Entwicklerteam, Produktverantwortlicher und ScrumMaster) und einen gut strukturierten, aber dennoch flexiblen Entwicklungsprozess. Bei aller Transparenz bleibt stets die Möglichkeit erhalten, Besonderheiten und Erfahrungen des eigenen Projektes zu berücksichtigen und sich so seinen individuellen Scrum-Prozess zu erarbeiten. Der ScrumMaster sorgt dafür, dass das Team möglichst effektiv arbeiten kann. Dazu sorgt er für einen reibungslosen Ablauf des Scrum-Prozesses, hilft dem Team bei seiner gruppendynamischen Entwicklung und unterstützt es bei der Beseitigung von Hindernissen. Der ScrumMaster hat eine Führungsrolle ohne Weisungsbefugnis inne. Damit folgt der dem modernen Führungsansatz des "Führen durch Dienen" (Servant Leadership). Wer einen ScrumMaster aus seinem bestehenden Team für diese Rolle auswählt, sollte auf jeden Fall einen erfahrenen Mitarbeiter auswählen. Da der ScrumMaster neben dem Product Owner eine wichtige Rolle im Scrum Team übernimmt, sollte dieser sehr sorgfältig ausgewählt werden und die folgenden Fähigkeiten mitbringen: Der ScrumMaster

  • sollte idealerweise eine externe Person sein, da es oft zu Komplikationen in der Ausführung der Rolle durch interne Mitarbeiter kommen kann. Vor allem wenn der ScrumMaster gleichzeitig ein Vorgesetzter ist. Nur zu leicht fallen interne Mitarbeiter in ihre ursprüngliche Rolle im Unternehmen zurück und bringen nicht die nötige Disziplin zum Durchsetzen der Scrum Prozesse und dessen Erfolg mit.
  • sollte sich mit Scrum auskennen und praktische Scrum Erfahrung mitbringen, denn ein ScrumMaster ist sowohl Coach, Mentor, Moderator und Vermittler gleichzeitig.
  • sollte vom Product Owner als auch vom ausführenden Team (Entwickler, Designer, Redakteure etc.) akzeptiert als auch respektiert werden. Sicher gibt es bei dem einen oder anderen Team ein paar Anlaufhürden zu überwinden, aber nach einiger Zeit im Team sollte sich seine Akzeptanz klar heraus kristallisiert haben.
  • sollte eine starke Persönlichkeit haben, die er vor allem bei Komplikationen und im Konfliktmanagement einzusetzen weiß.
  • sollte seine Rolle als ScrumMaster ausfüllen und nicht in die Versuchung geraten als Team Mitglied mitzuarbeiten. ScrumMaster ist eine Vollzeitaufgabe und zum anderen würde bei einer Doppelfunktion schnell ein Interessenkonflikt vorherrschen.

Eine Alternative zu Excel?

  • Geschrieben am: 07.10.2013
  • von: admin

Viele Firmen erfassen wesentliche Finanzdaten noch in einer zentralen Excel-Datei. Das funktioniert so lange gut, wie nur eine Person die Datei bearbeitet und verändert. Doch was passiert, wenn mehrere Abteilungen Ihre Daten in das Dokument eintragen müssen? Dann kommt es unweigerlich zu Synchronisationsproblemen, Formeln werden blind überschrieben, Felder falsch ausgefüllt... Wer kennt das nicht? Dieses Problem kann man einfach und schnell lösen! Erfassen Sie Ihre Daten über ein strukturiertes und auf Sie zugeschnittenes Webinterface. Ihre Vorteile:

  • Erfassung der Daten von überall und zeitgleich möglich
  • Validierung der eingegebenen Daten erfolgt sofort
  • Auswertung der Daten, Erzeugung von Reports sofort und von überall möglich
  • Übersicht über die Änderungshistorie zur Eliminierung von Fehlerquellen
  • Export der Daten in sämtliche Formate möglich

Es lohnt sich definitiv, mal den Aufwand und Nutzen einer individuellen Lösung gegenüberzustellen, anstatt sich weiterhin über die angesprochenen Probleme schwarz zu ärgern. Sprechen Sie uns an, wir helfen gern!

NAVES Finance Suite - Liquiditätsplanung

  • Geschrieben am: 20.07.2013
  • von: admin

Die Firma NAVES Corporate Finance GmbH beauftragte uns mit der Erstellung einer Finance Suite. Diese sollte im Wesentlichen folgende Aufgaben erfüllen:

  • Erfassung von Eingangrechnungen
  • Erfassung von Ausgangsrechnungen
  • Erfassung von Banksalden und Krediten
  • Erfassung der Charterzeiten für Schiffe
  • Managementreport über sämtliche Ausgaben und Einnahmen
  • Reports über die Performance der Schiffe
  • Liquiditätsplanung

Bildschirmfoto 2013-09-26 um 10.45.35

Das Management hat somit jederzeit und von überall die Möglichkeit, sich einen aktuellen und genauen Überblick über die Kennzahlen der Firma zu verschaffen. Diese Anforderungen wurden in einer webbasierten Lösung auf Basis von PHP5, MySQL5, jQuery und Twitter Bootstrap schnell umgesetzt und ist bereits produktiv im Einsatz. Zur schnellen Erfassung der Rechnungen ist eine BarcodeScanner-Anbindung implementiert worden.

Neue Webseite für Hamburg-Offshore

  • Geschrieben am: 12.02.2013
  • von: admin

Hamburg Offshore

Für die Reederei Hamburg-Offshore Fonds- und Assetmanagement GmbH haben wir eine neue Weseite basierend auf Wordpress aufgesetzt. Diese wurde sehr einfach gehalten und sticht durch die Fullsize-Slideshow von Bildern eigener Schiffe hervor. So vermittelt sie dem Betrachter das Gefühl, mitten drin auf einem der beeindruckenden Schlepper der Reederei zu sein.

Relaunch FlexCard.de

  • Geschrieben am: 18.11.2012
  • von: admin

Auf http://www.flexcard.de wurde die Unternehmenswebseite und das Bestellsystem für Visitenkarten für Privatkunden gerelauncht. Hierbei wurde das Frontend mit Hilfe von Twitter Bootstrap auf responsive Design umgestellt und viele neue Features implementiert. So wurde jeder Bereich der Webseite auf Usability gestestet und optimiert. Besonderers wurde auf die einfache Bedienbarkeit des Bestellprozesses Wert gelegt. Visitenkarten können mit Hilfe eigener oder vorliegender Vorlagen gestaltet und bestellt werden. Dieser für ungeübte Benutzer relativ komplizierte Prozess sollte so einfach wie möglich abgebildet werden. Der Kunde hat zudem noch während der Bestellung die Möglichkeit, direktes Feedback von der Produktion der Visitenkarten zu bekommen, um ein optimales Ergebnis zu erhalten.

Responsive Webdesign

  • Geschrieben am: 07.09.2012
  • von: admin

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, die für den Webdesigner immer wieder neue Herausforderungen darstellen. Zum Einen werden die Auflösungen der Desktop Monitore immer größer, sodass wir in einigen Fällen schon mit einer Content-Breite von 1280px arbeiten. Andererseits nimmt aber auch die Internetnutzung auf mobilen Endgeräten sowie die Vielfalt der Bildschirmauflösungen zu. Alleine bei mobilen Endgeräten reicht die Bandbreite möglicher Bildschirmauflösungen von 240 x 320 Pixel bis 1024 x 600 (oder 768) Pixel. Es liegt also auf der Hand, dass eine Website auf einem 1920 x 1080 Pixel Monitor anders aussehen wird, als auf einem älteren 240 x 320 Pixel Endgerät oder einem iPad. Responsive Webdesign versucht nun, Ordnung in das Konvolut aus Geräten und Bildschirmauflösungen zu bringen, ohne eine Website dabei auf bestimmte Geräte zu optimieren. So könnten hochauflösende Desktop Monitore beispielsweise mit einem 4-spaltigen Content-Layout bedient werden, während der Content für mobile Endgeräte in 1- oder 2-spaltige Layouts verpackt wird. Idealerweise wird damit eine Website für möglichst viele Endgeräte zugänglich gemacht und vermittelt das Gefühl einer nativen Applikation, ohne eigens auf ein spezifisches Endgerät optimiert zu sein und ohne für jedes Endgerät eine spezifische Webseite bauen zu müssen. So basiert Responsive Webdesign auf fluid Grids und flexiblen Layouts. Das Layout passt sich an die verfügbare Bildschirmauflösung unterschiedlicher Devices (PC, Tablet-PC, Smartphone) an, positioniert den Content dementsprechend und skaliert Texte, Bilder, Slider und Videos mit. Das Webdesign reagiert also auf die Gegebenheiten des Endgeräts und liefert ein dementsprechend angepasstes Layout aus.


Abb.1 : responsive Webdesign dargestellt auf relevanten Endgeräten

Was ist Responsive Design denn jetzt?
"Responsive Webdesign bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau, insbesondere die Strukturierung der einzelnen Elemente wie z. B. Navigationen und Texte, von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt. Technische Basis sind neuste Webstandards wie HTML5 und CSS3."

Was steckt technisch dahinter?
Möglich wurde das Thema erst durch die Implementierung und Unterstützung von CSS3 Media Queries. Mit Hilfe von Media Queries können Parameter wie zum Beispiel die Auflösung des Endgeräts oder dessen Orientierung bestimmt. Auf Basis dieser Informationen kann dem Endgerät spezifischer CSS-Code ausgeliefert werden, der ein Layout erzeugt, das auf die Gegebenheiten abgestimmt ist. Hier mal ein Beispiel für das Abb. 1 entsprechende CSS-Skript:

/* Landscape phones and down */

@media (max-width: 320px) { ... }

/* Landscape phone to portrait tablet */

@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 1024px) { ... }

/* Large desktop */

@media (min-width: 1200px) { ... }

 

Was muss man bei der Umsetzung beachten?

Der entscheidende Faktor für gut umgesetztes Responsive Webdesign mittels Media Queries ist vor allem die Wiedererkennbarkeit und Konsistenz des Designs. Es ist sinnvoll, dass aufgrund der unterschiedlichen Bildschirmgrößen das Layout und die Anordnung des Contents, von Auflösung zu Auflösung anders dargestellt werden muss. Elemente wie zum Beispiel Logos und Farbwelten sollten aber möglichst konsistent bleiben. Idealerweise findet sich der User im Desktop Interface genauso zurecht, wie in den mobilen Versionen, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen. Wo sind denn noch Unterschiede? Anders als bei Desktop Interfaces gibt es bei mobilen und portablen Versionen einer Website keinen Maus-Cursor, keine Hover-States und auch keine Dropdown-Submenüs. Was bedeutet das für das Interface Design? Navigationselemente, sollten sehr gut als solche erkennbar sein und auch wirklich als Schaltflächen verstanden werden. Wichtig ist hier, dass die Textgröße hinauf skaliert wird, die Größe der Schaltfläche großzügig bemessen ist und dem gesamten Element genug Platz gegeben wird. Schließlich navigiert man nicht mit der Maus, sondern zumeist mit dem Finger und man will das Betrachten einer Website nicht als Geschicklichkeits-Übung erleben. Textlinks sollten sich klar vom Text unterscheiden. Der Erfolg einer Website steht und fällt oftmals mit dem Navigationskonzept und –design. Dies gilt natürlich auch für den Responsive Webdesign Ansatz. Allerdings werden wir hier vor zusätzliche Herausforderungen gestellt, denn auf mobilen und portablen Endgeräten ist das Userverhalten nunmal anders, als am Desktop. Wie können Navigationen vom Desktop Interfaces auf mobile Interfaces übertragen werden? Wie werden Elemente der Hauptnavigation angeordnet, wie geht man mit Navigationselementen auf 2. oder 3.Ebene um? Wie bildet man Dropdown-Navigationen ab? Fragen, die gut überlegt sein müssen und nicht selten ausgeklügelte Lösungen erfordern. Wie aufwändig ist die Umsetzung? Responsive Webdesign bietet zahlreiche Vorteile und Möglichkeiten vor allem in Hinblick auf die wachsende mobile Internetnutzung. Mit einem Webdesign, das responsive reagiert, müssen User, die mobil surfen nicht mehr abgefangen und auf eigene Domains umgeleitet werden. Fakt ist aber auch, dass es zusätzlichen Aufwand bedeutet, eine Website responsive zu gestalten. Der Zusatzaufwand zieht sich durch alle Bereiche und Stadien der Entstehung einer Website. Konzeptionell muss angedacht werden, wie Desktop und mobile Versionen aussehen und funktionieren werden. Mockups werden erstellt; davon abgeleitet wird ein Design entwickelt, das wie oben beschrieben, unterschiedlichen Anforderungen standhalten muss. Im nächsten Schritt findet das CSS-Coding und HTML-Templating statt. Auch hier muss mit zusätzlichem CSS-Coding Aufwand gerechnet werden. Schlussendlich muss das Design natürlich in möglichst vielen Geräten und Bildschirmauflösungen getestet werden. Eine Website lässt sich also nicht im Spaziergang responsive machen. Zu Beginn eines Projekts sollte daher gut abgewogen werden, ob der Responsive Webdesign Ansatz für dieses spezifische Projekt Sinn macht und die richtige Kosten-Nutzen-Lösung darstellt.


Abb. 2: ein konkretes Beispiel für die unterschiedliche Darstellung auf unterschiedlichen Endgeräten

 

Bild-Quellen: adido, designmodo

Text-Quellen: Wikipedia, Twitter Bootstrap, Juergen Liechtenecker

 

Steigerung der Conversion-Rate bei Webshops

  • Geschrieben am: 30.08.2011
  • von: admin

Ca. die Hälfte aller Online-Shopper finden in Onlineshops das gewünschte Produkt über die Produktsuche. Die Kunden wissen, was sie kaufen wollen und suchen gezielt danach. Von Google und Amazon hat der Kunde unter anderem gelernt, wie seine Suche erfolgreich ist, wie er mit einer Vorschlagssuche umzugehen hat, dass für ihn relevante Produkte im vorderen Bereich der Trefferlisten anzufinden sind und erwartet dieses Verhalten in jedem Onlineshop. Die Kunden wollen ein Produkt finden und dieses kaufen. Bleiben sie erfolglos bei der Suche nach einem bestimmten Artikel, verlassen sie frustriert den Shop. Damit genau das nicht passiert, gibt es verschiedene Maßnahmen und Optimierungsmöglichkeiten, die Suche innerhalb eines Onlineshops aus Kundensicht so effektiv wie möglich zu gestalten. Jeder Shop ist anders, jedes Sortiment hat seine speziellen Eigenheiten, jede Zielgruppe verhält sich anders. Von daher muss auch die Suche -neben einigen Standards- je Shop individuell gestaltet und auf Effektivität überprüft werden. So bieten wir Shopbetreibern die Möglichkeit, ihren Shop auf genau diese Punkte zu untersuchen und mit ihm zusammen in einem Workshop das Optimierungspotential herauszufinden, welches die Conversion-Rate um einige Prozentpunkte erhöhen kann. In so einem Workshop wird anhand einer Liste von zu überprüfenden Features herausgefunden, an welchen Stellen Potential steckt. Daraufhin werden einzelne Arbeitspakete geschnürt, die dann sukzessive abgearbeitet werden. Teilweise bringen kleine und wenig aufwändige Änderungen schon spürbaren Erfolg. Betrachtet werden unter anderem:

  • die Positionierung und das Layout des Suchfeldes
  • der Einsatz und die Gestaltung von Vorschlagslisten (Suggestions)
  • die Suchqualität im Bezug auf Fehlertoleranz
  • der Einsatz von Synonymlisten und Thesaurus
  • die Gestaltung einer dynamischen Navigation mit Suchfiltern
  • die Optimierung der Trefferlisten
  • der effektive Einsatz von Analyse- und Reportingtools

Die Workshops dauern in der Regel 3-4 Stunden und liefern schnell erste Ansätze zur Optimierung. Bisher wurden sie bei mehreren Mandanten des Otto-Konzerns durchgeführt. Der Erfolg der daraus resultierenden Maßnahmen kann bereits gemessen werden. Gern erörtern wir auch bei Ihnen die Möglichkeiten zur Optimierung der Suche in einem Workshop. Ein Termin für einen Such-Workshop ist schnell gefunden und die ersten Optimierungsmaßnahmen schnell entdeckt.

Support für Refashion.de

  • Geschrieben am: 23.03.2011
  • von: admin

Im Projekt "Refashion.de" einer Tochter der OTTOgroup unterstützten wir die Group Technology Partner bei der Realisierung des Online-Shops. Refashion.de basiert auf der OSecom-Plattform der GTP, die auf MySQL5, Spring, Hibernate und Freemarker aufsetzt. Der Shop richtet sich an Frauen von 20-29 und zeichnet sich durch seine innovative Social-Media Anbindung an Facebook aus. Unser Aufgabenbereich umfasste die Themen Suche, Anbindung an Smatch.com und andere Schnittstellen. Pressemitteilung: http://www.internetworld.de/Nachrichten/E-Commerce/Handel/Otto-positioniert-neuen-Modeshop-refashion-Social-Shopping-fuer-junge-Frauen

Pages