Web- und Screendesigns effizient gestalten mit Sketch

Die Konzeption einer Website oder deren Relaunch geht einher mit der Entwicklung und Erstellung von Screendesigns. Auf Basis dieser Screendesigns leitet der Webentwickler die Templates für die Umsetzung der Website ab. Innerhalb des Responsive Webdesigns können hierzu eine Vielzahl von Screendesigns für die unterschiedlichen Viewports anfallen. Je nach Umfang und Anforderung können diese Screens für Desktop, Tablet und Smartphone sein. Dabei gilt es sowohl den Landscape- sowie Portraitmodus ebenfalls zu berücksichtigen – wobei diese lediglich die Auswertung des Seitenverhältnisses des Browserfensters darstellt und nicht die Abhängigkeit des Devices darstellt.

Responsive Webdesign benötigt viele Screens

Gerade diese Vielzahl an notwendigen Screens sind zeitintensiv zu erstellen und wurden bisher in den zeroseven design studios in Adobe Photoshop realisiert. Um bei Screendesigns, insbesondere für die mobilen Ansichten effizienter und schneller zu werden, waren wir auf der Suche nach einem Tool, um das Webdesign einfacher zu gestalten, ohne dabei Abstriche im Design und der Handhabung machen zu müssen. Adobe Photoshop bietet zahlreiche Werkzeuge sowie Effekte und ist eigentlich in der Bildbearbeitung führend, jedoch für die Anforderungen eines modernen Webdesigns nur bedingt optimal einsetzbar.

Unsere Praktikantin Amelie Chupin kam während ihres Studiums an der Hochschule für Gestaltung Schwäbisch Gmünd mit verschiedenen Tools für das UI Design in Berührung, unter anderem mit Sketch, was den Anlass bot, das Programm als Alternative zu den Adobe Programmen zu testen.

Sketch im Test bei der Erstellung von Screendesigns

Sketch ist ein vektorbasiertes Programm, dass sich auf digitale Medien spezialisiert hat. Es eignet sich daher, ebenfalls pixelbasierte Projekte zu gestalten. Hierfür kann man zwischen Vektor und Pixeldarstellung umschalten.

Sketch ähnelt dem Grundaufbau von Adobe und ist damit sehr intuitiv bedienbar. Alle Grundwerkzeuge, die es in Adobe gibt, sind auch in Sketch enthalten. Die Logik, mit verschiedenen Ebenen zu arbeiten, ist ebenfalls vorhanden. Demzufolge kann man nach einer kurzen Kennenlernphase schnelle und ansprechende Ergebnisse erzielen.Durch viele Voreinstellungen und Templates wird das Suchen nach dem richtigen Format und dem passenden Grid gespart, sodass man direkt in der richtigen Auflösung loslegen kann.

Sketch iOS UI Design Templates
Sketch iOS UI Design Templates

Voreingestellte Artboards (entsprechen den Zeichenflächen in Illustrator) umfassen unter anderem die Größen von Desktop HD, Desktop, Tablet und Mobile und lassen sich beliebig erweitern.

Artboards
Voreingestellte Artboards für die Bildschirmgrößen Desktop HD, Desktop, Tablet und Smartphone

Ein weiterer Vorteil in Sketch ist das Erstellen von Symbolen. Beispielsweise lässt sich so eine Navigation, die auf jedem Screen auftritt, einmal erstellen und beliebig oft auf unterschiedlichen Artboards einfügen. Wird die Navigation im Nachhinein verändert, reicht es, das Symbol zu ändern. Alle Symbole werden dann auf den Artboards aktualisiert. 
Es gibt außerdem schon einige iOS Symbole in Sketch, wie zum Beispiel unterschiedliche Keyboards, Status Bars, Alert Views und vieles mehr, die die Arbeitszeit verringern und es ermöglichen realistische Screens zu erstellen.

Die gängigsten Stile (Transparenz, Schatten, Füllung, Weichzeichner) werden übersichtlich rechts angezeigt, um alle Elemente schnell zu bearbeiten.

Gängigste Stile wie Transparenz, Schatten, Füllung und Weichzeichner

Des Weiteren lassen sich durch die App „Sketch Mirror“ die Artboards direkt auf dem Smartphone anzeigen und testen. Dadurch erübrigt sich, mühsames verschicken von Screens.

Sketch Mirror App

Die Artboards sind ebenfalls über den Browser abrufbar und werden wie in der App live aktualisiert.

Die Exportoptionen ermöglichen es, unterschiedliche Formate, Größen und Qualitäten in einem Arbeitsschritt zu exportieren.


Durch Plugins lässt sich Sketch noch weiter optimieren. Das Craft Plugin von Invision zum Beispiel, umfasst unterschiedliche Tools, die sowohl alleine als auch im Team Vorteile bieten. Zum einen kann man mit Craft verschiedenen Content generieren, seien es Fotos, Namen oder Daten. Sketch lässt sich dabei mit einer Stock Plattform, Dropbox oder lokalen Ordnern verbinden. Auch lässt sich der gesamte Content einer Website in die Gestaltung integrieren.
Durch Sync lassen sich Farbschemen, Textformate und Buttons konzipieren, die dann allen Designs des Teams zur Verfügung stehen.
Ein Nachteil von Sketch ist, dass bei größeren Dateien die Performance leidet und die Software nicht mehr flüssig läuft. Außerdem stellt sich einfaches Maskieren als umständlich dar.

Test-Fazit

Abschließend können wir folgendes Fazit ziehen: Sketch ist bestens für Web- und App-Design geeignet. Übersichtliche Darstellung und einfache Werkzeuge ermöglichen es, schnelle Konzepte und Screendesigns zu erstellen. Plugins erweitern das Tool um einige Funktionen und bilden so im Wesentlichen einen Mehrwert beim Generieren von Content und der Zusammenarbeit im Team. Im Bereich des Webdesigns lässt sich Photoshop vollkommen mit Sketch ersetzen, jedoch wird das Tool die umfassenden Möglichkeiten der Bildbearbeitung von Adobe Photoshop nicht erreichen.

Social Media Automation mit dem TYPO3 CMS

Wie wäre es also, wenn Social Media Engagement automatisch und direkt aus dem TYPO3 Backend zu steuern ist?

Mittlerweile besteht Einigkeit darin, dass Social Media Engagement nicht „mal eben nebenbei“ erledigt werden kann. Viele Unternehmen haben erkannt, dass es nicht ausreicht, einen technikaffinen Mitarbeiter mit der Betreuung von Facebook, Twitter & Co. zu beauftragen und diese dort intuitiv agieren zu lassen. Sie haben erkannt, dass Social Media eine Strategie voraussetzt und es wichtig zu wissen ist, welche Themen, Plattformen für das Unternehmen Relevanz haben und von wem diese diskutiert werden. Dementsprechend haben sich die Social Media Kanäle als Instrumente im Marketing-Mix etabliert, die sowohl fachliche als auch finanzielle Ressourcen benötigen.

Trotz dieser positiven Entwicklung stellt das Social Media Engagement immer noch eine zeitintensive Disziplin dar, welche die Rufe nach Tools zur Unterstützung nicht verstummen lassen.

Der Markt bietet zahlreiche Werkzeuge, jedoch keine um aus einem Contentmanagementsystem wie TYPO3 heraus zu agieren.

Zu schön um wahr zu sein?

Nicht mit unserer TYPO3 Social Media Automation Extension.

Die TYPO3 Extension der zeroseven design studios mit seinen RSS-Feeds ist die Basis für die einfache Social Media Automation.

Mit der Social Media Automation Extension werden relevante Inhalte einfach und bequem, zentral im TYPO3 Backend gepflegt. Im Anschluss hieran können diese Inhalte automatisiert über einen RSS-Feed in Social Media Kanäle wie Facebook, Twitter, XING, Instagram und Pinterest geteilt werden.

Die Steuerung direkt aus TYPO3 heraus bietet einige Vorteile, da der relevante Content bereits im TYPO3 CMS hinterlegt ist und somit doppelte Datenbestände vermieden werden können. Darüber hinaus steht eine Hashtag-Library zur Verfügung, die es ermöglicht häufig verwendete Begriffe zu definieren und eine einheitliche Schreibweise sicherzustellen. Bei Bedarf können diese Hashtags ausgewählt werden.

TYPO3 Social Media Automation Extension im Backend

Mit dieser TYPO3 Social Media Automation Extension gelingt wieder die Fokussierung auf das Wesentliche der Arbeit. Mit wenigen Klicks wird ein einfacher und flexibler Automationsworkflow realisiert, der den Social-Media-Prozess schneller sowie produktiver gestaltet. Dabei werden keine Programmierkenntnisse benötigt.

TYPO3 Social Media Automation Extension im Backend

Publikation

Inhalte können mit TYPO3 Social Media Automation Extension direkt aus dem Backend des TYPO3 CMS terminiert und gestaffelt publiziert werden. Status-Updates lassen sich damit über die Zeit verteilt veröffentlichen, um möglichst viele Empfänger aus der relevanten Zielgruppe anzusprechen.

Distribution

Ein Inhalt – zum Beispiel der Hinweis auf einen neuen Blogbeitrag – lässt sich automatisch auf mehreren Social-Media-Plattformen zeitgleich oder zeitversetzt veröffentlichen.

TYPO3 Social Media Automation Extension im Backend

TYPO3 Social Media Automation Extension im Backend

Social Media Automation für eine Vielzahl an Plattformen

Facebook und Twitter Automation

Über die RSS-Feeds der TYPO3 Social Media Automation Extension und unseren Automationsdienst lassen sich zwei mögliche Varianten der Automation auf Facebook und Twitter realisieren. In der ersten Variante werden Status-Updates mit Text, Bild und Links ermöglicht. Mit der zweiten Variante lassen sich Fotos auf der Facebook Fanpage oder Twitter direkt aus TYPO3 veröffentlichen. Welche Variante gewählt wird, steht frei und es kann zwischen ihnen gewechselt werden.

XING Automation

Durch den speziell für XING optimierten RSS-Feed der Social Media Automation Extension für das TYPO3 CMS können Mitarbeiter, diesen in ihr Profil einbinden. Mit jeder neuen Meldung teilen diese Mitarbeiter neue Nachrichten automatisch in deren XING-Netzwerk und werden damit als glaubwürdiger Markenbotschafter des Unternehmens wahrgenommen und erzielen damit eine hohe Reichweite.

Instagram und Pinterest Automation

Die TYPO3 Extension stellt Fotos mit Beschreibung und Link automatisch auf den Fotoplattformen bereit. Damit wird lediglich auf die Bilder zugegriffen, die in TYPO3 gepflegt bzw. in der Dateiliste hinterlegt sind. Das spart Zeit durch die Vermeidung von zusätzlichen Uploads auf den jeweiligen Plattformen.

Haben wir Ihr Interesse geweckt?

Perfekt! Gerne stellen wir Ihnen in einem persönlichen Termin die Extension unverbindlich und kostenlos vor.
Am besten kontaktieren Sie uns noch heute – wir freuen uns auf Sie!

Responsive und Retina-optimieriert Bilder in TYPO3

Bilder und responsive Webdesign sind nur schwer zu vereinen.
Während das Frontend in relativen Prozent-Angaben und Breakpoints arbeitet, bleiben Bilder zwangsläufig in Form von einzelnen Pixeln erhalten.

Die <picture>-Tag-Lösung hat unter Webentwicklern zwischenzeitlich eine hohe Beliebtheit gefunden und wird von vielen Browsers bereits nativ unterstützt.
Ältere Browser können über Polyfills versorgt werden.

Während aus technischer Sicht die Lösung steht, fängt für den Redakteur der Website das Problem gerade einmal an.

Anforderungen:

Ein Bild-Set für hochauflösende und Pagespeed-optimierte Darstellung von Grafiken verlangt unter Umständen folgendes:

  • Ein Bild pro Viewport für „normale“ Displays.
  • Ein Bild pro Viewport für Retina-Displays.
  • Eine Fallback-Grafik für ältere Browser.
  • Eventuell eine vergrößerte Grafik für die Lightbox-Funktion.

Für den Redakteur bedeutet dies schnell mal bis zu 14 einzelne Bilder in unterschiedlichen Größen zu erstellen, auf den Server zu laden und zu verknüpfen.

html picture-tag

Unser Tribut an alle Mobile-User mit geringer Bandbreite und Retina-Displays

Mit dem neuen fluid-basierten Content-Elemente-Rendering in der jüngsten Version von TYPO3 haben wir eine Lösung ausgearbeitet, welche es erlaubt mit nur einer Grafik die gewünschten Bild-Größen einzelner Viewports im Backend einfach auszuwählen.
Der Rest läuft nun ganz automatisch ab!

Ihre Grafik wird mit einem Klick auf allen Viewports in die optimale Größe gebracht.
Die Möglichkeit den Bildausschnitt über die Crop-Funktion zu wählen bleibt dabei selbstverständlich erhalten.

Keine Lust mehr darauf alle Fotos manuell mit Photoshop auf die richtige Größe zu bringen?
Wir auch nicht!

mask image online
Bild-Ausschnitt wählen

Solr als Alternativlösung zur TYPO3 „Indexed Search“ Extension?

Die Standard-Suchfunktion „indexed_search“ von TYPO3 reicht in den meisten Fällen für kleine bis mittelgroße Webseiten aus. Sie bietet eine Volltextsuche mit verschiedenen Konfigurationsmöglichkeiten und Funktionen. Bei Webseiten mit sehr vielen Inhalten und hohen Anforderungen an die Such-Performance stößt die „Indexed Search“-Extension allerdings schnell an ihre Grenzen. Solr als Alternativlösung zur TYPO3 „Indexed Search“ Extension? weiterlesen

TYPO3 und SEO

Grundlage in der Suchmaschinenoptimierung reichen oftmals schon aus, dass eine Website bei Google entsprechend gelistet wird. TYPO3 liefert hierbei schon wichtige Voraussetzungen für die Pflege einer Website. Grundsätzlich ist der wichtigste Faktor bei der Suchmaschinenoptimierung der Content einer Website. Wird hier der gewünschte Text oder Wortkombination nicht gelistet, ist es eigentlich unmöglich, im Rennen um das Ranking eine entscheidende Rolle zu spielen. Aber auch im Content ist Google über deren semantische Webcrawlern sehr sensibel. Die modernen Algorithmen von Google können mittlerweile schon erkennen, ob Inhalte sinngemäß sind oder nicht.
Wie funktionieren eigentlich Suchmaschinen? TYPO3 und SEO weiterlesen

RTE für Extbase-Extensions konfigurieren

Wer sich mit dem RTE in TYPO3 schon einmal genauer auseinander gesetzt hat, der weiß, dass für die interne Speicherung und Verarbeitung von Links nicht der gewöhnliche HTML-Tag <a> verwendet wird. Vielmehr arbeitet der RTE intern mit einem <link>-Tag. Auf den ersten Blick mag das seltsam erscheinen, bei näherer Betrachtung ist das jedoch logisch und konsequent. RTE für Extbase-Extensions konfigurieren weiterlesen

Felder im TYPO3-Backend gruppieren

Mit der TYPO3-Extension Extension Kickstarter lassen sich Extensions incl. der dazu gewünschten Tabellen recht einfach anlegen. Allerdings werden alle Felder nur simpel nacheinander aufgelistet und eine echte Zusammengehörigkeit ist nicht sofort zu erkennen.

Um dem Redakteur zumindest eine kleine Hilfestellung zu geben, könnte man die Feldbeschriftungen anpassen. Dadurch lässt sich zumindest auf den zweiten Blick eine Zusammengehörigkeit erkennen.

Mit ein klein wenig Kenntnis über das „Table Configuration Array“ (TCA) kann man Felder jedoch auch sinnvoll und unverkennbar gruppieren. Wie das geht wird im Folgenden vorgestellt.

Zunächst öffnen wir die vom Extension Kickstarter angelegte Datei tca.php und suchen dort die Konfiguration für die entsprechende Tabelle. Diese sieht in stark vereinfachter Darstellung in etwa so aus:

$TCA['tx_myextension_demo'] = array (
	'types' => array (
		'0' => array('showitem' => 'hidden;;1, name, x, y, isbranch')
	),
	'palettes' => array (
		'1' => array('showitem' => 'starttime, endtime')
	)
);

Im Feld [types][0] sind alle Felder in der Reihenfolge aufgelistet, wie sie im Backend-Formular zu sehen sein werden. Im Feld [palettes][1] ist die zweite Optionspalette definiert, die dem Feld hidden über den Index 1 zugeordnet ist. Genau eine solche Optionspalette wollen wir uns, in angepasster Form, zu Nutzen machen. Zu diesem Zweck verlagern wir die Felder x, y, isbranch in eine eigene Palette.

$TCA['tx_myextension_demo'] = array (
	'types' => array (
		'0' => array('showitem' => 'hidden;;1, name, --palette--;Flash-Weltkarte;worldmap')
	),
	'palettes' => array (
		'1' => array('showitem' => 'starttime, endtime'),
		'worldmap' => array('showitem' => 'x, y, isbranch')
	)
);

Dieser geben wir der Übersichtlichkeit halber keine Zahl als Index, sondern den Namen worldmap. Zusätzlich platzieren wir in der normalen Liste aller Felder ([types][0]) ein neues Feld, das ebenfalls einer kleine Erklärung bedarf: --palette--;Worldmap;worldmap. Diese Konfiguration wird durch Semikolon in drei Bereiche unterteilt:

  • Der erste Wert --palette-- bedeutet, dass das kein reguläres Eingabefeld ist, dessen definition sich ebenfalls im TCA befindet, sondern ein Spezialfeld als Platzhalter für eine Palette.
  • Der dritte Wert worldmap ist der Index für die Palette, wie er auch im Array [palettes] auftaucht.
  • Der Zweite Konfigurations-Wert ist der angezeigte Name der Palette.

Als letzten Feinschliff geben wir der Palette noch ein Attribut canNotCollapse. Das bedeutet, dass sie nicht mit der Option „Zweite Optionspalette anzeigen“ erscheint und verschwindet, sondern immer noch zu sehen ist. Zusätzlich machen wir den Namen Übersetzbar. Das geschieht, indem wir den vorher fest eingetragenen Wert Flash-Weltkarte durch einen Verweis auf die Local-Lang ersetzen. Selbstverständlich muss in der Datei locallang_db.xml dann auch der entsprechende Eintrag vorhanden sein.

$TCA['tx_myextension_demo'] = array (
	'types' => array (
		'0' => array('showitem' => 'hidden;;1, name, --palette--;LLL:EXT:myextension/locallang_db.xml:tx_myextension_demo.worldmap;worldmap')
	),
	'palettes' => array (
		'1' => array('showitem' => 'starttime, endtime'),
		'worldmap' => array('showitem' => 'x, y, isbranch', 'canNotCollapse' => 1)
	)
);

Tipp: 90% aller TYPO3 Fehler beheben

Kennen Sie das nicht? Sie ändern eine Headline oder einen Text in TYPO3 und plötzlich taucht eine Fehlermeldung auf mit der Meldung, das diese durchgeführte Änderung nicht möglich seie. Sprich Ihre Änderung wird auf dem Live-System einfach garnicht erst angezeigt.

Diesem Problem können Sie als TYPO3 User nun aber leicht entgegenwirken, indem Sie ganz einfach in der Administrationsoberfläche von TYPO3 oben auf das Blitz TYPO3 Blitzicon in der Menüleiste klicken und anschließend den Punkt “ Alle Caches löschen“ auswählen.

Mit diesem Tipp, können Sie in der Regel rund 90% aller TYPO3 Fehler beheben.

TYPO3-Tabellen nur auf der root-Ebene

In TYPO3 ist in der Regel jeder Datensatz einer konkreten Seite zugeordnet. Das hat seinen Sinn, um Ordnung zu schaffen. Allerdings kann es in einigen Fällen auch von Nachteil sein, wenn Datensätze dadurch evtl. schwerer auffindbar sind. Abhilfe kann geschaffen werden, indem eine Tabelle nur noch für die root-Ebene (pid = 0) erlaubt wird.

Das geht ganz einfach mit einem Eintrag in der TCA der entsprechenden Tabelle, z.B. in der Datei typo3conf/extTables.php

$TCA[<tablename>]['ctrl']['rootLevel'] = 1;

Es ist aber dabei zu beachten, dass nur Backend-Benutzer mit Administrator-Rechten auf der root-Ebene arbeiten dürfen.