Zur Agentur | Folge uns per Twitter

0 Kommentare | 27. Mai 2015, Oliver Schmid

Neue Bezeichnungen für den Beruf Webdesigner

Das Arbeitsgebiet des Webdesigners hat sich in den letzten Jahren stark erweitert. Neben dem klassischen Desktop werden für zahlreiche neue Geräte User Interfaces entwickelt. Dazu zählen Tablets, Smartphones, Fernseher und mittlerweile auch Uhren. Entsprechend haben sich innerhalb des eigentlichen Webdesign Bereichs neue Bezeichnungen und Berufe etabliert. Treiber dieser Entwicklung waren vor allem grosse Firmen wie Apple und Google, welche für die einzelnen Teilbereiche früh spezialisierte Designer beschäftigt haben und mit ihren Applikationen auf mobilen Geräten den Begriff User Experience (UX) geprägt haben. Heute sind vor allem folgende Begriffe in Verwendung:

UX Designer

Dies umfasst den ganzen Bereich, also das ganze User Experience einer Anwendung. Es beinhaltet den Usability Bereich, User Research, UCD Analyse, Usability Testing, UI Design und Interaction Design. Wobei für die beiden letzten Begriffe meist nachfolgende Spezialisten eingesetzt werden. Der UX Designer arbeitet mir Mockup Tools, Organigrammen, FlipCharts, Bleistift usw.

Interaction Designer

In der Schweiz taucht dieser Begriff oft als Nachfolger für den klassischen Webdesigner auf. Das eigentliche Interaction Design ist dann allerdings lediglich ein sehr kleiner Teil des Aufgabengebiets. Die Hauptaufgabe besteht meist aus 90% UI Design. Gemäss Stellenbeschreibungen von Apple ist jedoch der Interaction Designer mit dem Motion Designer verwandt und arbeitet auch mit ähnlichen Tools um Prototypen zu erstellen. Er gestaltet Interaktionen, Übergänge, Animationen usw.. Ein Beispiel ist unser Prototyp für eine App. Der Interaction Designer arbeitet mit Programmen wie Pixate, Orgami, Motion usw..

UI Designer

Die meiste Zeit verbringen viele Webdesigner / Interaction Designer mit User Interface Design (UI Design). Trotzdem taucht der Begriff UI Designer bei uns relativ selten auf. Der UI Designer gestaltet die Benutzeroberfläche einer Website oder App. Er arbeitet mit Programmen wie Sketch, Photoshop oder Illustrator.

GUI oder UI? Früher wurde häufig die Abkürzung GUI verwendet, für Graphical User Interface. Während heute einfach nur von UI für User Interface gesprochen wird. Die genauen Gründe sind unklar. Möglicherweise weil UI breiter gefasst ist. Heute gehören zu einem User Interface nicht nur die grafische Darstellung, sondern auch Sound und Haptik (Apple Watch).

0 Kommentare | 19. März 2014, Oliver Schmid

Videos für Websites und Social Media

Japanese Tourist in New York Video

Kurzfilme gewinnen im Internet laufend an Bedeutung. Durch bessere Integrationsmöglichkeiten in Websites und über Social Media Kanäle verbreiten sich gute Videos schnell. Gleichzeitig ist es mit verhältnismässig kostengünstigen DSLR Kameras möglich geworden, kinoartige Qualität zu erzielen. Drohnen und Kopter haben zudem die Möglichkeiten im Bereich Luftaufnahmen erweitert.

Aus diesem Grund bietet Webgarten neu auch die Produktion von Webvideos an. Mehr dazu auf unserer neuen Website.

3 Kommentare | 22. März 2011, Oliver Schmid

Bereit für HTML5?

Das HTML5 Logo

Es ist soweit, ab sofort setzt Webgarten alle Kundenprojekte mit HTML5 um, sofern nicht explizit etwas anderes gewünscht wird.
Offiziell empfiehlt das W3C zwar noch XHTML, allerdings gibt es keinen wirklichen Grund dafür. Der W3C Validator kann bereits sehr gut mit HTML5 umgehen. Als Vertrauensbeweis habe ich die eigene Website bereits mit HTML5 umgesetzt. Ein weiterer Vertrauensbeweis erbringt niemand geringerer als Google. Hier wird HTML5 schon länger eingesetzt, was ein Blick in den Quellcode von Google beweist. Und da Google selber HTML5 verwendet dürfte das Unternehmen auch nicht abgeneigt sein, HTML5 Dokumente gut positioniert im Suchresultat anzuzeigen. Die semantische Auszeichnung könnte Google bei der Einschätzung sogar helfen.

Anwender zeitgemässer Browser sollen von neuen Funktionen profitieren, sofern diese bei alten Browsern keine Probleme verursachen.

So sieht ein HTML5 Dokument aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<h1>Ich bin supersexy HTML5 Code
<ul>
<li>Und verzichte auf unnötige Dinge
<li>Weniger ist mehr!

Die End-Tags braucht es nicht mehr und beim body kann sogar das Start-Tag weggelassen werden.

Die Vorteile von HTML5

  • Schlanker Code und schnellere Ladezeiten
  • Semantische Auszeichnung (Neue Selektoren wie: nav, head, aside, menu, article usw.)
  • Zahlreiche neue Funktionen, welche teilweise schon genutzt werden können
  • Für die Zukunft gerüstet, es braucht künftig keine Umstellung mehr da HTML5 fliessend wächst

Lesetipp zu HTML5

Das HTML5 Buch kann ich empfehlen. Es hat mir als Vorbereitung für das Redesign von Webgarten gedient und mich definitv von HTML5 überzeugt.

Nachtrag: HTML5 versus XHTML

6 Kommentare | 18. März 2011, Oliver Schmid

Speed Optimierung für Websites

Leopard

Google hat längst bestätigt, dass die Geschwindigkeit einer Webseite nun auch ein Faktor für die Platzierung einer Website im Suchergebnis ist. Zudem hat Google eine eigene Firefox Erweiterung (Google Page Speed) für Firebug herausgegeben, welche den Programmierer bei der Optimierung helfen soll. Gut möglich, dass dieser Faktor noch an Einfluss gewinnen wird. Gemäss dem Chef Technicker der Firma Blaze Software sei Google bezüglich Geschwindigkeit absolut fanatisch.
Auch wenn der Geschwindigkeitsunterschied vielleicht nicht direkt bemerkt wird, so bleibt einem eine schnelle Website unbewusst doch in besserer Erinnerung und man besucht sie gerne wieder. Technisch gesehen braucht eine optimierte Website weniger Server Ressourcen und verursacht weniger Traffic.

Meine Erfahrung mit Speed Optimierung?

Kürzlich habe ich die Website der Webagentur Webgarten (ruhig mal testen) neu erstellt. Da Design und Inhalt übernommen wurden konnte ich mich voll auf einen sauberen, zeitgemässen und speed optimierten Code konzentrieren. Danach war die Website 2x schneller beim ersten Aufruf und 20x schneller beim zweiten Aufruf (gemessen mit PageTest). Am Server wurde nichts verändert. Hier meine Tipps:

  1. Geschwindigkeit hängt nicht vom CMS ab. Wer eine wirklich schnelle Website will muss eine Cache Erweiterung verwenden. Diese produziert regelmässig ein statisches HTML File aller Seiten. Dieses wird dann beim Aufruf der Webseite angezeigt. Dadurch wird das langsame „on the fly zusammenbauen“ der Website verhindert. Die Website wird massiv schneller und benötigt weniger Rechnerleistung.
  2. Progressive Enhancement: Nutzer neuer Browser sollen von neuen Funktionen profitieren können solange diese auf alten Browsern keine funktionalen Probleme verursachen. Ich verwende HTML5, welches einige kürzere Tags zulässt.
  3. Um unnötige Requests zu vermeiden verwende nur je ein JavaScript und CSS File. Im HTML Code sollen alle Kommentare und Umbrüche entfernt werden. Zudem sollte man das CSS komprimieren.
  4. JavaScript und CSS sollten auf der Seite nur eingebunden werden, wenn diese wirklich benötigt werden. Es macht keinen Sinn, wegen eines Formulars die ganzen CSS Anweisungen auf allen Seiten zu laden. Auch ein JS Framework wie jQuery muss nur dann geladen werden, wenn es auch gebraucht wird!
  5. Optimierung mit Google Page Speed. Einfach die Seite mit dem Plugin testen und den Anweisungen folgen. Hier kann einiger Aufwand anfallen. Alle Punkte müssen am Ende grün sein!
  6. Testen mit PageTest
  7. Überwachen mit Google Webmasters Tools

Werden die Kunden für all den Aufwand bezahlen?

Bei meiner Site habe ich wohl etwa 2 Tage für Speed Optimierung eingesetzt. Bei komplexeren Projekten kann der Aufwand sogar noch wesentlich grösser werden. Insbesondere die Cache Erweiterung kann in Kombination mit anderen Erweiterungen Probleme verursachen.
Oft findet der Kunde seine eigene Website bereits schnell, denn diese ist intern längst gecached oder die Website liegt sogar auf einem Server innerhalb des eigenen Firmennetzwerk.
Soll man den Aufwand trotzdem betreiben? Ja, ich denke man sollte es dem Kunden als Option offerieren. Will er über die Website Umsatz generieren wird er wohl künftig darum nicht herumkommen. Ist die Website nur da um die Adresse nachzuschlagen benötigt er sicher keine Speed Optimierung. Was denkt ihr darüber?

Es ist wie wenn ein Formel1 Fahrer vor dem Rennen nochmals das letzte Staubkorn entfernt. Es mag überflüssig erscheinen, aber es kann am Ende zwischen Sieg und Niederlage entscheiden.

30 Kommentare | 23. September 2010, Oliver Schmid

TYPO3 versus Joomla

Vergleiche zwischen dem CMS TYPO3 und Joomla sind meist recht einseitig. Viele arbeiten nur mit einem CMS und schauen das andere nur oberflächlich an. Ich habe zahlreiche Joomla Projekte umgesetzt. Nun habe ich ein Buch über TYPO3 gelesen und ein kleineres Projekt damit umgesetzt. Hier möchte ich meine Erfahrungen wiedergeben.

Das TYPO3 Backend

CMS TYPO3 Adminbereich

Das Joomla! Backend

CMS Joomla! Adminbereich

Was das Design des Backends betrifft hat sich bei den letzten TYPO3 Updates einiges getan. Das typische „Programmierer“ Design wurde überarbeitet und die Usability verbessert. Heute macht die Oberfläche einen äusserst soliden Eindruck auf mich.
Was bei Joomla auffällt ist der fehlende Seitenbaum. Joomla trennt Artikel von der Navigation komplett was bei Anwendern zu Usability Problemen führen kann. Die Inhalte sucht man über die Tabelle nach Titelbezeichnung mittels Filter.
Die Inhalte sind bei TYPO3 in Blöcke aufgeteilt welche flexibel zugeordnet werden können und sich vom Typ unterscheiden. Diese können auch referenziert werden, so dass der gleiche Block mehrmals vorkommen kann. Joomla! kennt nur einen Artikel „Block“ pro Seite. Dafür können jeder Seite Module zugewiesen werden. Dafür muss man allerdings in den Modul Manager wechseln.

Vergleich: TYPO3 Funktionen versus Joomla Funktionen

Selbstverständlich können alle Funktionen praktisch immer durch Erweiterungen hergestellt werden. Allerdings führt dies zu zusätzlichem Aufwand. Zudem erschwert es künftige Updates. Folgende Funktionen sind in der Grundausstattung dabei:

Funktion Joomla! Typo3
Zufalls Modul Ja Nein
Umfrage Modul Ja Nein
Verschlüsselung Email Adressen (Anti-Spam) Ja Ja
Editieren über das Frontend Ja Ja
Suchfunktion Ja Ja
Cache System Ja Ja
Zeitgesteuertes Verwalten von Inhalten Jein Ja
Vorschau Entwurfsansicht (Draft) Nein Ja
Internes Backup System Nein Ja
Verwaltung mehrerer Webseiten Nein Ja
Mehrsprachiges Frontend Nein Ja
Mehrsprachiger Adminbereich pro Nutzer einstellbar Nein Ja
Differenzierte Benutzergruppen-Definition und Rechtevergabe Nein Ja
Anbinden verschiedener Datenbanken Nein Ja
Versionierung Nein Ja
Automatisch skalieren, schärfen und komprimieren von Bildern Nein Ja
Automatisch umwandeln von Bildformaten Nein Ja
Automatisch schreiben von Bildtexten Nein Ja
Inhalte in modulare Blöcke unterteilt Nein Ja
iPhone App zur Newsverwaltung Nein Ja

Bezüglich Funktionen macht TYPO3 niemand was vor. Hier ist TYPO3 unter allen Open Source CMS Lösungen der klare Leader.

Vergleich des Aufwands für die Umsetzung eines Projekts

Eine TYPO3 Installation ist aufwändiger als eine Joomla Installation. Zudem sind beim Erstellen von Templates TypoScript Kenntnisse notwendig. Das macht auch die Einarbeitung schwieriger. Der Aufwand relativiert sich dadurch, dass weniger Erweiterungen installiert werden müssen.

Verbreitung des CMS

Beide CMS gehören zu den am weitesten verbreiteten Open Source Lösungen. Allerdings wird TYPO3 von Joomla bei weitem übertroffen. Aktuell findet Google 5’890’000 Ergebnisse zum Wort TYPO3. Zum Wort Joomla sind es gar 65’500’000. Damit haben beide CMS eine gesicherte Zukunft vor sich. Der Vorsprung von Joomla! erklärt sich teilweise dadurch, dass es oft bei kleinen Websites (Vereine, Privat) zum Einsatz kommt. Interessant ist auch die Grafik von Google Trend: Joomla! versus TYPO3.
Auch bei der Anzahl der Erweiterungen hat Joomla die Nase vorn. Bei Joomla! sollen es ungefähr 5’000 sein während es bei Typo3 nur 4’696 sind. Google findet für die Suche nach Joomla Extension 8 Mio. Treffer, für die Suche nach Typo3 Extension nur 5 Mio. Treffer.

Sicherheit

Seit 2006 arbeite ich mit Joomla und habe in dieser Zeit etwa 30 Webseiten damit umgesetzt. Dabei wurde einmal eine Seite gehacked. Gemäss meinem Hoster soll dies allerdings sehr häufig vorkommen. Mit TYPO3 habe ich noch nicht genügend Erfahrung. Allerdings gehe ich davon aus, dass es wesentlich sicherer ist.

Wer arbeitet mit TYPO3 bzw. Joomla?

Mit TYPO3 arbeiten hauptsächlich grössere Webagenturen. Als klassisches Enterprise Content Management (ECMS) kommt es hauptsächlich bei Firmenwebsites zum Einsatz. Joomla hingegen wird von selbstständigen Entwicklern meist für kleinere bis mittlere Websites eingesetzt. Zudem kommt es häufig bei Vereinen und privaten Sites zum Einsatz, da mit fertigen Templates sehr einfach eine kleine Webseite erstellt werden kann.

Fazit

Beide CMS Lösungen haben ihr Vor- und Nachteile. Es gibt keinen Gewinner. Je nach Anforderung macht das eine oder andere CMS Sinn.

Es gibt kein entweder-oder sondern ein sowohl-als-auch.

Was ist eure Meinung und was habt ihr für Erfahrungen mit CMS Lösungen gemacht?

6 Kommentare | 2. August 2010, Oliver Schmid

Der Magento Online Shop

Zum Wein Online Shop

Webdesign Magento Online Shop Empfehlungen

Ausgangslage des Projektes

Die Bricker Weinimport GmbH beauftragte uns mit der Erstellung eines Online Shops für Weine. Dieser sollte über ein kleines Sortiment auserwählter Weine mit hervorragendem Preis Leistungsverhältnis verfügen.
Der Shop soll sich auch an Personen richten, welche wenig über Wein wissen. Entsprechend haben wir den Shop nach Essen und Anlässen strukturiert. Zu jedem Wein wurden die wichtigsten Informationen sorgfälltig erfasst. Hier wird nur verkauft, was der Anbieter selber degustiert hat und auch selber sehr gerne trinkt. Qualität statt Quantität ist das Motto.

Design des Online Shops

Eine Flasche Wein kauft man auch mit dem Auge. Der Wein sollte also ins Zentrum gestellt werden. Möglichst wenig andere Elemente sollten die Wirkung der Flasche stören. Darum wurde der Flasche bereits in der Voransicht sehr viel Platz eingeräumt. Da Weine vor allem auch von älteren Personen gekauft werden sollte zudem die Schrift genügend gross sein.

Weine Übersicht

Webdesign Magento Online Shop Artikel

Detailansicht der Weinflaschen

Webdesign Magento Online Shop Wein Details

Startseite

Webdesign Magento Online Shop Artikel

Magento als richtig Lösung

Die Joomla Komponente VirtueMart wäre eine mögliche Lösung gewesen. Allerdings würden wir diese eher als Ergänzung zu einer vorhandenen Joomla! Webseite einsetzen. Hier war der Online Shop das Kerngeschäft und es existierte noch keine Webseite. Es galt die bestmögliche Lösung für einen Online Shop einzusetzen. Hier machte Magento das Rennen.

Suchmaschinenoptimierung mit Magento

Zu jeder Seite, Kategorie, Artikel kann man den Titel und die Meta-Description sowie die Bezeichnung der URL eingeben. Magento erstellt einem automatisch auch die Google-Sitemap und stellt einem zudem in der Konfiguration ein Feld zur Verfügung, um Google-Analytics einzubauen.
All diese Möglichkeiten wurden voll ausgeschöpft: Die On Page Optimierung am Shop wurde bestmöglich umgesetzt. Es bleibt abzuwarten wie lange es dauert bis Google die noch junge Domain ausreichend bedient.

Technische Erfahrung mit Magento

Anders als beim Joomla! CMS ist die Grundversion des Magento Online Shops bereits mit praktisch allen möglichen Funktionen ausgestattet. Nur wenige Erweiterungen müssen installiert werden.
Man definiert zuerst ein Shop-Template. Alle Files die vom normalen Theme abweichen kopiert man ins eigene Template. Man macht Anpassungen an XML und phtml Files sowie natürlich am CSS. Mit intelligenten Attributen kann man sich die Produktseite frei konfigurieren. Hier lässt Magento keine Wünsche offen.
Ziemlich aufwändig gestaltet sich hingegen das Erstellen der E-Mail HMTL-Templates. Magento versendet Versandinformation, Bestellung, Bestellaktualisierung, Rechnung, Rechnungsaktualisierung und normale Mitteilungen. Alle mit einem eigenen Template und diese muss
man doppelt anpassen weil für Gäste und registrierte Nutzer unterschiedliche Vorlagen verwendet werden. Da Header und Footer meist gleich bleiben könnte man zumindest diese auslagern.

Zum Wein Online Shop

„Magento scheint im Moment die mit Abstand beste Lösung für einen Online Shop“

Folge uns per Twitter | Facebook Fan werden
© 2010 by Webgarten GmbH, Haldenstrasse 5, CH - 6340 Baar, Schweiz, +41 (0)41 500 07 67