Kategorien
Design Freebies, Tools und Templates Icons & Fonts Webdesign

Fontastisch: So findest du kostenlose und hochwertige Schriften

Die richtige Schrift für eine Gestaltung beziehungsweise ein Projekt zu finden, ist nicht immer einfach – trotz der Vielzahl kostenloser Schriften, die im Internet kursieren. Denn häufig ist die Qualität der Schriften, sowohl ästhetisch als auch bezüglich des Zeichensatzes und der OpenType-Features, eher bescheiden. Aber es gibt eine Reihe hochwertiger, gut ausgebauter, ästhetisch ansprechender und zudem kostenloser Schriften im Internet – und das jenseits von Google Fonts.

Ungewöhnliche Schriften bei Behance

Das Kreativnetzwerk Behance ist nicht nur eine gute Anlaufstelle, um sich inspirieren zu lassen. Viele Schriftdesigner nutzen Behance nicht bloß, um ihre Schriften zu präsentieren. Ganz häufig werden diese auch kostenlos zum Herunterladen angeboten.

Wer dort einfach mal nach Schriften sucht, wird schnell feststellen, dass Behance eine reichhaltige Vielfalt an Schriften hat. Da dort allerdings auch viele Entwürfe präsentiert sind, die es als „echte“ Schrift gar nicht gibt, muss man gegebenenfalls etwas mehr Zeit in die Suche investieren.

Kostenlose Schriften
„Mosk“

Dafür findest du dort aber auch viele unverbrauchte Schriften wie beispielsweise die „Mosk“, eine schicke serifenlose Schrift in neun Schnitten, die unter anderem auch deutsche Umlaute und Eszett enthält. Wer doch lieber etwas mit Serifen sucht, findet vielleicht Gefallen an der „Butler“, die eher an klassizistische Schriften erinnert. Sie gibt es in 14 Schnitten, darunter sieben Schablonenschnitte.

Kostenlose Schriften
„Butler“

Da Behance kein Schriftenportal ist, ist die Suche nicht sehr komfortabel. Anzahl der Schnitte und der Umfang des Zeichensatzes variieren sehr. Hier musst du also etwas Geduld mitbringen. Aber es lohnt sich.

So viel zahlen, wie man will, bei Lost Type

Lost Type gehört zu den eher kleinen Schrift-Foundrys. Daher sind die Schriften, die dort vertrieben werden, meist weniger bekannt. Wer also Wert legt auf unverbrauchte Typografie, wird dort fündig. Neben zahlreichen Schriften, die für Fließtexte geeignet sind wie die „Mission Gothic“, gibt es interessante Schriften für plakative Überschriften wie die Versalschrift „Liberator“.

Mission Gothic
„Mission Gothic“

Das Besondere an Lost Type ist, dass dort jeder einfach so viel bezahlt, wie er möchte – zumindest für den persönlichen Gebrauch. Nur wer eine Schrift kommerziell nutzen will, muss auch zwingend bezahlen. Alle anderen zahlen einen beliebigen Betrag – gegebenenfalls sogar gar nichts.

Liberator
„Liberator“

Nicht einmal eine Registrierung ist nötig. Gibst du schlicht eine Null ins Bezahlfeld ein, wird die Schrift ohne Umwege heruntergeladen.

Kostenlose Schriften bei MyFonts

MyFonts gehört zu den größten Anbietern von Schriften und hat zahlreiche Foundrys im Repertoire. Dazu zählen viele kleine und relativ unbekannte Foundrys, aber auch so große wie FontFont.

Miso
„Miso“

Zwar zahlst du bei MyFonts in der Regel, um Schriften zu erwerben. Es gibt aber eine Vielzahl von Schriftfamilien, die du teilweise kostenlos bekommst. So gibt es vier der sechs Schnitte der runden Grotestschrift „Miso“ für lau.

Auch in der beliebten „Museo“-Familie gibt es vereinzelt Schnitte, die kostenlos sind. So sind zwei der zehn Schnitte der „Museo Sans“ kostenlos erhältlich. Im Übrigen sind nicht nur die Desktopschriften kostenlos, sondern auch die Webfonts.

Museo Sans
„Museo Sans“

Du musst lediglich ein Konto bei MyFonts besitzen und den normalen Kaufprozess durchlaufen: Also Schriften in den Warenkorb legen und „bezahlen“. Hast du ausschließlich kostenlose Schriften im Warenkorb, bezahlst du natürlich nichts. Die Schriften werden dennoch wie alle anderen Einkäufe in deiner Bestellhistorie aufgelistet.

Alles kostenlos bei Font Squirrel

Zu guter Letzt darf natürlich auch Font Squirrel nicht fehlen. Dort findest du eine Vielzahl an Schriften für unterschiedliche Einsatzzwecke – und alle kostenlos. Viele Schriften, die dort angeboten werden, findest du auch bei Google Fonts. Der Unterschied ist der, dass du die Schriften bei Font Squirrel selbst hosten kannst.

Open Sans und Losbter
„Open Sans“ und „Losbter“

Mit dem eigenen Webfont-Generator erstellst du dir zudem die Webfonts aus den dort angebotenen Schriften selbst.

Zum Angebot von Font Squirrel gehören eher bekannte Schriften wie beispielsweise die „Open Sans“ oder die allseits beliebte „Lobster“.

(dpe)

Kategorien
HTML/CSS Webdesign

HTML5.1: Der neue Standard kurz vor der Fertigstellung

Als HTML5 im Jahr 2014 zum offiziellen Standard wurde, war ein Meilenstein moderner Webentwicklung erreicht. Bessere Semantik und eine leichtere Bedienung – vor allem auf mobilen Geräten – waren zentrale Ansätze von HTML5. Knapp zwei Jahre später steht mit HTML5.1 der Nachfolger kurz vor der Fertigstellung. Dabei wird vieles von dem, was in HTML5.1 neu ist, bereits eingesetzt und von den meisten Browsern unterstützt.

html5

„<picture>“-Element und „srcset“-Attribut

Lange wurde darüber diskutiert, ob und wie man im responsiven Webdesign unterschiedliche Bilder für verschiedene Auflösungen bereitstellen kann. Als Ergebnis wurde das „<picture>“-Element eingeführt, welches die Auszeichnung verschiedener Bilder über je ein eigenes „<source>“-Element ermöglicht.

Auch die Frage, wie man Bilder für hochauflösende Displays und Monitore auszeichnen soll, hat das W3C beantwortet und das „srcset“-Attribut eingeführt. Sowohl das „<picture>“-Element als auch das „srcset“-Attribut sollen Bestandteil des neuen Standards HTML5.1 werden.

Bereits jetzt werden beide Auszeichnungsarten von vielen Webentwicklern eingesetzt. Da für beide Fälle einfache Fallback-Möglichkeiten vorgesehen sind, gab es keinen Grund, das neue Element beziehungsweise das neue Attribut bereits frühzeitig einzusetzen. Mittlerweile haben alle großen Browser „<picture>“ und „srcset“ implementiert, auch wenn sie bislang noch kein offizieller Bestandteil von HTML5 sind.

„month“ und „week“ als neue Formulareingaben

Auch in Sachen Formularen gibt es Neues. Wurden mit HTML5 bereits neue Typen für das „<input>“-Element eingeführt – zum Beispiel „email“, „url“ und „date“ für die Eingabe von E-Mail- und Internetadressen sowie Datumsangaben –, gibt es nun zwei weitere Eingabearten.

html51_input
Neue Typen für Formulareingaben: „month“ und „week“

Bei den bisherigen Datumsangaben für „<input>“ ließen sich nur Tage und Uhrzeiten auswählen. Mit „month“ hast du nun die Möglichkeit, einen Monat auswählen zu lassen. Die Auswahl eines konkreten Tages ist dabei nicht möglich. Ähnlich funktioniert auch der neue Typ „week“. Hierbei hast du die Möglichkeit, eine Kalenderwoche auszuwählen.

„<keygen>“, „<menu>“ und „<dialog>“ auf der Abschussliste

Mit HTML5.1 sind nicht nur neue Elemente und Attribute hinzugekommen. Möglich ist auch, dass es das ein oder andere Element zukünftig nicht mehr geben wird. So sind beispielsweise die Elemente „<keygen>“, „<menu>“ und „<dialog>“ mit dem Verweis „at-risk“ versehen. Dies bedeutet, dass diese Elemente möglicherweise nicht Teil von HTML5.1 sein werden.

Während „<keygen>“ zur Erzeugung von Schlüsselpaaren gedacht ist, ist das „<menu>“-Element dazu geeignet, zusätzliche Einträge ins Kontextmenü zu platzieren. Das „<dialog>“-Element wiederum stellt einen Inhalt als Modalfenster zentriert über den restlichen Inhalt einer Seite dar.

Ob diese drei Elemente den neuen Standard tatsächlich verlassen müssen, steht derzeit nicht fest. Aber sie dürften ohnehin nur selten im Einsatz sein.

Fertigstellung im September

Derzeit ist HTML5.1 ein sogenannter Empfehlungskandidat. Damit ist die Arbeit daran weitestgehend abgeschlossen. Änderungen sind nicht mehr zu erwarten. Im September soll HTMl5.1 ganz offiziell verabschiedet werden und HTML5 „ablösen“.

Da die meisten Browser die Neuerungen in HTML5.1 bereits jetzt unterstützen, spricht nichts dagegen, die neuen Elemente und Attribute bereits einzusetzen – was viele vermutlich ohnehin schon machen.

Was die „at-risk“-Kandidaten betrifft, so muss man sagen, dass diese ohnehin noch nicht von allen Browsern unterstützt werden. So wird das „<menu>“-Element nur von Firefox und das „<dialog>“-Element nur von Chrome und Opera unterstützt.

Im Übrigen wird in Kürze ein erster Entwurf zu HTML5.2 veröffentlicht. Dort sind bereits neue Features angekündigt. Es bleibt also spannend in Sachen HTML5.

Kategorien
Design HTML/CSS Webdesign

CSS statt SVG: Formen erstellen, animieren und morphen

Wenn es um komplexe Formen und Animationen geht, ist SVG häufig das Format der Wahl – das ja auch nicht zu Unrecht. Doch dank neuer CSS3-Eigenschaften erstellst du Formen jenseits von Rechteck und Kreis sogar ganz ohne SVG und animierst diese zudem noch.

Komplexe Formen mit „clip-path“

Die CSS3-Eigenschaft „clip-path“ ermöglicht es, Elemente auf (fast) beliebige Formen zu beschneiden. Dazu stehen dir die geometrischen Grundformen „inset()“ für ein Rechteck, „ellipse()“ und „circle()“ für Ellipse und Kreis sowie für mehreckige Formen „polygon()“ zur Verfügung.

Wenn es darum geht, aus einem Bild oder einem HTML-Element nur einen einfachen rechteckigen oder runden Ausschnitt darzustellen, sind „inset()“, „ellipse()“ und „circle()“ gute Möglichkeiten. Interessant ist aber vor allem die „polygon()“-Funktion, mit der beliebige mehreckige Formen erstellt werden können.

div {
  clip-path: polygon(50% 0%, 65.5% 32.9%, 100% 38.2%, 75% 63.8%, 80.9% 100%, 50% 82.9%, 19.1% 100%, 25% 63.8%, 0% 38.2%, 34.5% 32.9%);
  width: 300px;
  height: 300px;
}

Bei der Verwendung von „polygon()“ werden beliebig viele Koordinatenpaare definiert, die per Komma voneinander getrennt sind. Erlaubt sind nicht nur absolute Werte, sondern auch prozentuale Angaben. Das hat den Vorteil, dass du die Breite und Höhe durch die CSS-Eigenschaften „width“ und „height“ definierst.

Bei der im Beispiel definierten Form handelt es sich um einen Stern. Da die Koordinaten relativ definiert sind, ist es ein Leichtes, die Breite und Höhe der Form zu verändern.

Form animieren per „transition“

Dank der „transition“-Eigenschaft oder der „animation“-Eigenschaft in Kombination mit der „@keyframes“-Regel hast du auch die Möglichkeit, zwischen zwei per „clip-path“ definierten Formen einen animierten Übergang zu erzeugen.

svg_clip-path_animation

Dazu definierst du beispielsweise per „:hover“ eine Pseudoklasse und gibst die Zielform des Polygons an. Wichtig hierbei ist, dass die Anzahl der Koordinaten sowohl in der Quell- als auch in der Zielform identisch sind.

div:hover {
  clip-path: polygon(50% 0%, 80.9% 7.2%, 97.5% 33.7%, 100% 64.6%, 79.4% 88.1%, 50% 100%, 20.6% 88.1%, 0% 64.6%, 2.5% 33.7%, 19.1% 7.2%);
}

Sobald ein Koordinatenpaar zu viel oder zu wenig vorhanden ist, funktioniert der animierte Übergang nicht mehr. Stattdessen wechseln die beiden Formen ohne Animation.

Formen in Illustrator anlegen

Gerade bei so komplexen Formen ist es schwierig, die Koordinaten selbst festzulegen. Da ist es einfacher und hilfreicher, die Form einfach in Illustrator oder einem anderen Zeichenprogramm, welches den SVG-Export beherrscht, zu zeichnen. Willst du die Form später als relative Prozentangaben in der „polygon()“-Funktion angeben, sollte die Form eine Breite oder Höhe von 100 Pixel haben.

Anschließend exportierst du die Zeichnung als SVG und extrahierst die Koordinaten. Achte darauf, dass du auch tatsächlich ein Polygon angelegt hast. Die Form darf keine Bézierkurven enthalten. Im SVG-Quelltext sollte ein „<polygon>“-Element angelegt sein.

svg_clip-path_illustrator

Während die CSS-Funktion „polygon()“ die Koordinatenpaare per Komma trennt und die einzelnen Werte der Paare per Leerzeichen, ist es beim SVG-Format genau anders herum. Du musst also Komma und Leerzeichen austauschen und den Werten jeweils ein Prozentzeichen zuweisen.

<polygon points="50,0 65.5,32.9 100,38.2 75,63.8 80.9,100 50,82.9 19.1,100 25,63.8 0,38.2 34.5,32.9 "/>

Das Beispiel zeigt, die wie Koordinaten im SVG-Quelltext dargestellt sind.

Vor- und Nachteile von CSS-Formen per „clip-path“

Sowohl die CSS-Variante per „clip-path“ als auch die SVG-Möglichkeiten zur Erstellung komplexer Formen haben ihre Vor- und Nachteile. Nachdem Chrome angekündigt hat, dass es SVG-Animationen per SMIL nicht mehr untestützt, sind Formenmorphing per SVG nur noch per JavaScript möglich.

Die Kombination aus CSS-Eigenschaft „clip-path“ zusammen mit der „transition“-Eigenschaft ermöglichen solche animierten Formenübergänge ganz ohne JavaScript.

Ein Nachteil von „clip-path“ ist, dass nur Polygone möglich sind, aber keine Pfade einschließlich Bézierkurven. Hier hat SVG die Nase vorn, da das „<path>“-Element auch mit Bögen, Aussparungen und Kombination mehrerer Formen kein Problem hat.

Beispiel auf Codepen

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design HTML/CSS Responsive Design Webdesign

Cloudinary: So optimierst du die Ladezeit deiner Bilder

Alle sprechen vom schnellen Internet. Aber es ist nicht nur Sache der Internet-Provider und Mobilfunkbetreiber, für ein schnelles Netz zu sorgen. Als Webentwickler trägst du mindestens in gleichem Maße dazu bei, indem du deine Website so effizient entwickelst, dass unnötig zu ladender Ballast gar nicht erst entsteht. Gerade bei der Bereitstellung von Bildern kannst du dafür sorgen, dass diese so platzsparend sind, dass sie möglichst schnell geladen werden. Und die Bildverwaltung und -optimierung von Cloudinary hilft dir dabei, Bilder so effizient zu erstellen und bereitzustellen, dass diese nochmal deutlich schneller geladen werden.

wordpress-website-speed

Das richtige Bildformat und die optimale Kompression

Die erste Entscheidung, die ein schnelles Laden deiner Bilder beeinflusst, ist die Auswahl des richtigen Bildformates. Neben JPEG, PNG und GIF gibt es noch weitere Formate wie WebP und JPEG-XR. Während WebP allerdings nur von Chrome unterstützt wird, wird JPEG-XR nur im Internet Explorer und Edge dargestellt. Grundsätzlich lässt sich sagen, dass für großformatige und fotografische Bilder das JPEG-Format gut geeignet ist, während eher kleinformatige und grafische Bilder besser als PNG oder GIF erstellt werden sollten, die zudem noch die Möglichkeit der Transparenz mit sich bringen.

cloudinary_format-qualitaet
Schnelle Auswahl des richtigen Bildformates

Mit Cloudinary steht dir eine komfortable Bildverwaltung zur Verfügung, mit der du im Handumdrehen deine hochgeladenen Bilder in beliebige andere Formate umwandelst. Auch die Qualität der Bilder stellst du über einen Schieberegler ein und siehst direkt eine Vorschau. Gerade bei JPEGs hast du einen großen Spielraum und entscheidest je nach Motiv, wie hoch die Qualität beziehungsweise Kompression sein muss, um ein optimales Verhältnis von Bildqualität und Dateigröße zu erlangen.

Passgenaue Größe festlegen

Ebenfalls wichtig und in Zeiten responsiver Weblayouts nicht einfach, ist die Bereitstellung von Bildern in exakt der Größe, in der sie im Browser dargestellt werden. In der Desktopansicht werden Bilder in der Regel deutlich größer dargestellt als auf Mobilgeräten. Statt dieselbe Bilddatei zu verwenden und diese auf Mobilgeräten per CSS kleiner darzustellen, solltest du für unterschiedliche Auflösungen auch jeweils passgenaue Dateien anlegen.

cloudinary_breite
Einfaches Skalieren per URL

Dank des „<picture>“-Elementes und des „srcset“-Attributes gibt dir HTML5 die Möglichkeit, auf unterschiedliche Layouts beziehungsweise Display- oder Fenstergrößen einzugehen und individuelle Dateien auszugeben. Auch hier unterstützt dich Cloudinary und skaliert dir im Handumdrehen Bilder in beliebigen Auflösungen. So sorgst du auf deiner Website dafür, dass unnötig große Bilddateien vermieden werden.

Pixeldichte berücksichtigen

Dank hochauflösender Monitore und Displays musst du als Webentwickler mittlerweile nicht nur für unterschiedliche Weblayouts Bilder bereitstellen, sondern auch für hochauflösende Displays beziehungsweise Monitore. Hier gilt es, Bilder mit mindestens doppelter Pixeldichte bereitzustellen. So erreichst du, dass deine Websites auch auf Retina-Displays gestochen scharf aussehen.

Auch hier gilt, dass hochauflösende Bilder nur dort geladen werden sollten, wo sie erforderlich sind. Bei „einfachen“ Displays sollten auch normal aufgelöste Dateien geladen werden, um unnötige Ladezeit zu vermeiden.

cloudinary_pixeldichte
Doppelte Pixeldichte per „dpr_2.0“ über die URL definieren

Die Kombination aus responsivem Weblayout und unterschiedlichen Pixeldichten ergibt häufig eine recht große Menge unterschiedlicher Bilddateien, die du bereitstellen musst, um alle Darstellungsfälle abdecken zu können. Dank Cloudinary berücksichtigst du ohne weiteres die Vielzahl unterschiedlicher Bilddateien, ohne den Überblick zu verlieren oder manuell Bilder in unzähligen Formaten ausgeben zu müssen.

Bilder richtig cachen

Mit den richtigen Caching-Einstellungen verhinderst du, dass einmal geladene Bilder erneut geladen werden. So sollte über den Header „Cache-Control“ ein möglichst langer Zeitraum eingestellt werden, für den eine Bilddatei im Browser zwischengespeichert werden soll. Cloudinary gibt hier einen Wert vor, der in etwa 30 Tage entspricht.

Cache-Control: public, max-age=2591907

Das heißt, erst nach 30 Tagen wird der Browser eine heruntergeladene Datei erneut anfordern. Falls sich die Bilddatei innerhalb des Caching-Zeitraums ändert, solltest du sicherstellen, dass der Browser dies mitbekommt. Dazu gibt es das sogenannte „ETag“. Über dieses Header-Feld wird ein Hash-Wert übertragen, der sich ändert, sobald sich die Datei auf dem Server ändert. Da das „ETag“ immer abgefragt wird – auch innerhalb des Caching-Zeitraums –, erkennt der Browser durch einen veränderten Hash-Wert, dass sich die Datei auf dem Server geändert hat und lädst diese trotz Caching-Headers herunter.

ETag: "07c35c9716cf1702b22cda61526a0c5a"

Cloudinary erstellt für jede Ressource einen „ETag“, so dass es ein optimales Zusammenspiel mit „Cache-Control“ gibt, um unnötige Downloads zu vermeiden.

cloudinary_caching
„Cache-Control“ und „ETag“-Header

Nutze Sprites und vermeide zu viele Requests

Nicht nur die Größe der Bilder, auch die Anzahl der zu ladenden Dateien bremst die Geschwindigkeit einer Website. Denn jede einzelne Datei, beziehungsweise jeder Request, nimmt Zeit in Anspruch und verlängert das Laden einer Seite. Daher solltest du gerade bei der Verwendung vieler kleiner Bilder diese in einer einzigen Bilddatei unterbringen.

So platzierst du beispielsweise alle auf einer Seite verwendeten Logos in einer PNG-Datei und erstellst einen sogenannten CSS-Sprite. Hierbei wird per CSS nur jeweils ein Ausschnitt aus der Bilddatei dargestellt. Dazu musst du natürlich wissen, an welcher Position innerhalb des Bildes die jeweiligen Logos platziert sind. So werden alle Icons mit einem Request geladen und einfach mehrfach als Ausschnitt dargestellt. Je mehr einzelne Dateien du damit einsparst, desto deutlicher wird der Geschwindigkeitsgewinn auf deiner Website zu spüren sein.

cloudinary_sprites
Schnelle Erstellung von Sprites

Mit Cloudinary erstellst du CSS-Sprites spielend einfach. Lade einfach alle Logos beziehungsweise Bilddateien hoch, die du zu einem Sprite kombinieren willst und weise ihnen jeweils einen identischen Tag – zum Beispiel „logo“ – zu. Anschließend rufst du einfach die URL „http://res.cloudinary.com/demo/image/sprite/logo.png“ auf. Als Dateiname wird einfach der gemeinsam vergebene Tag genommen und als Dateiendung das von dir gewünschte Bildformat.

Cloudinary erstellt automatisch eine Bilddatei, in der alle hochgeladenen Dateien mit demselben Tag platziert sind.

Über die URL „http://res.cloudinary.com/demo/image/sprite/logo.css“ erhältst du die passende CSS-Datei, in der für alle Logos eine Klasse angelegt wurde, die den entsprechenden Bildausschnitt darstellt. Einfacher erstellst du CSS-Sprites nicht, zumal der Austausch und die Ergänzung zusätzlicher Bilddateien ebenfalls einfach und kompliziert ist.

Nutze ein Content-Delivery-Network

Neben der Bildoptimierung und -komprimierung, dem richtigen Caching und dem Verhindern zu vieler Requests gibt es noch einen weiteren kritischen Punkt, der zu langen Ladezeiten führen kann: der Server. Gewöhnliche Provider haben oftmals nur einen Serverstandort und sind nicht darauf ausgelegt, große Datenmengen schnell auszuliefern. Content-Delivery-Networks hingegen unterhalten eine Vielzahl an Servern und sind an strategisch wichtige Internet-Knoten angebunden.

Sie liefern daher vor allem große Datenmengen deutlich schneller aus – und das weltweit. Auch hier hast du mit Cloudinary einen großen Vorteil. Denn alle auf Cloudinary gehosteten Dateien werden über das weltweite Content-Delivery-Network von Akamai ausgeliefert. Damit wird sichergestellt, dass deine Bilder überall schnell übertragen werden.

Fazit

cloudinary
Bilder-Cloud-Dienst Cloudinary

Wer schnell sein will, muss also für mehr als kleine Dateigrößen sorgen. Es gibt gleich mehrere Stellschrauben, an denen du für eine optimale Geschwindigkeit drehen musst. Mit Cloudinary hast du jedoch einen Dienst an deiner Seite, der dir viel Arbeit abnimmt und für optimale Ergebnisse sorgt. Und wer mit 75.000 Bildern, 2 Gigabyte Webspace und 5 Gigabyte monatlichen Traffic auskommt, nutzt Cloudinary sogar kostenlos.

Der Artikel ist ein Sponsored Post von Cloudinary.

(dpe)

Kategorien
Design Icons & Fonts Webdesign

Online-Webfont-Generatoren: Welche gibt es und was können sie?

Webfonts sind mittlerweile ein fester Bestandteil im Webdesign. Neben zahlreichen kommerziellen Schriften gibt es dank Google Fonts auch viele Schriften, die du kostenlos in deine Webprojekte einbinden kannst. Wer grundsätzlich lieber selber hostet, findet im Internet einige Online-Webfont-Generatoren, die Desktopschriften in Webfonts umwandeln.

Webschriften optimieren

Umfangreicher Webfont-Generator von FontSquirrel

FontSquirrel gehört sicher zu den bekanntesten Anbietern kostenloser Schriften. Eine Vielzahl der bei Google Fonts angebotenen Webfonts findest du dort als Desktopschrift. Mit dem eigenen Webfont-Generator von FontSquirrel erstellst du im Handumdrehen Webfonts in allen gängigen Formaten. Auch das noch recht neue WOFF2-Format ist mit dabei.

fontsquirrel_webfont-generator
Webfont-Generator mit vielen Einstellungsmöglichkeiten

Dazu lädst du einfach TrueType- oder OpenType-Schriften hoch – auch direkt mehrere, zum Beispiel eine komplette Schriftfamilie. Beim Generieren der Webfonts entscheidest du zwischen „Basic“, „Optimal“ und „Expert“.

Während bei „Basic“ alles bleibt, wie es ist – zum Beispiel das Hinting und Kerning –, werden bei „Optimal“ von FontSquirrel einige Anpassungen vorgenommen, die für eine möglichst optimale schnelle Darstellung sorgen. Mit der „Expert“-Einstellung entscheidest du ganz individuell, wie der Webfont generiert werden soll.

So gibt es ein spezielles für das Web optimierte FontSquirrel-Hinting, welches anstelle des existierenden Hintings oder einen automatischen Hintings verwendet werden kann. Auch das Rendering der Schriften beeinflusst du, indem du beispielsweise Kerninginformationen entfernst oder die GASP-Tabelle bearbeiten lässt. Über die GASP-Tabelle wird entschieden, wie Schriften auf monochromen Bildschirmen dargestellt wird.

fontsquirrel_webfont-generator_subsetting
Individuelles Subsetting

Wer sich mit Hinting und Kerning nicht auskennt, sollte die Standardeinstellungen von FontSquirrel verwenden. Interessant für alle ist jedoch die Möglichkeit, das Subsetting der Schrift anzupassen. Darüber entscheidest du, welche Zeichensätze in den Webfont aufgenommen werden sollen. So bindest du beliebige sprachspezifische Zeichen ein. Ist deine Website beispielsweise zweisprachig – deutsch und französisch – bindest du zusätzlich die im Deutschen und Französischen verwendeten Sonderzeichen wie Umlaute, Eszett und Vokale mit Zirkumflex, Grave und Akut ein.

Verwendest du lediglich Groß- oder Kleinbuchstaben, kannst du über das Subsetting auch ausschließlich die gebrauchten Buchstabenarten einbetten. Wer es ganz individuell braucht, berücksichtigt einzelne Zeichen oder Unicode-Bereiche. Auf diese Weise baust du dir einen Webfont zusammen, der nur die tatsächlich gebrauchten Zeichen beinhaltet und somit sehr platzsparend ist.

Wenn du soweit alles eingestellt hast, wird ein Webfont-Kit erstellt und heruntergeladen. Bei Bedarf werden deine Einstellungen in einer Textdatei gespeichert, so dass du weitere Schriften mit genau diesen Einstellungen erstellst.

Fontie mit einfacher Oberfläche und Unicode-Subsetting

Der Webfont-Generator Fontie funktioniert ganz ähnlich wie der von FontSquirrel. Du lädst eine Desktop-Schrift hoch und wählst Subsetting, Hinting und Ausgabeformate aus. Beim Subsetting wählst du zwischen einfachen und erweiterten Optionen. Bei den einfachen Optionen fügst du lateinische, griechische, kyrillische und arabische Buchstaben sowie OpenType-Features hinzu, während du bei den erweiterten Optionen die jeweiligen Unicode-Unterbereiche auswählst.

fontie_webfont-generator
Übersichtlicher Webfont-Generator

Beim Hinting stehen dir verschiedene Methoden zur Auswahl. Neben Windows GDI, DirectWrite und Grayscale hast du die Möglichkeit, das bestehende Hinting der Schrift beizubehalten oder das Hinting gänzlich zu entfernen.

Beim Ausgabeformat stehen dir die gängigen Formate zur Auswahl mit Ausnahme des noch recht neuen WOFF2.

Schnelles Generieren mit Transfonter

Ebenfalls einfach zu bedienen ist Transfonter. Du lädst eine oder mehrere Schriften hoch und wählst auf Wunsch Autohinting sowie ein Subsetting aus. Beim Subsetting steht dir allerdings nur jeweils ein Alphabet zur Verfügung – unter anderem Lateinisch, Griechisch und Kyrillisch. Eine Kombination mehrerer Alphabete ist nicht möglich. Dafür ergänzt du aber einzelne Zeichen zu deinem Webfont.

transfonter_webfont-generator
Einfach zu bedienender Webfont-Generator

Interessant ist die Vorschau auf deinen Webfont, den Transfonter dir erstellt. So prüfst du noch vor dem Download, wie die generierte Schrift im Browser aussieht. Unterstützt werden im Übrigen alle gängigen Formate einschließlich WOFF2.

Auch bei diesem Generator kannst du die Einstellungen speichern. Anders als bei FontSquirrel werden die Einstellungen jedoch im Browser gespeichert.

Fazit

Jeder der drei Generatoren hat seine Vor- und Nachteile. Wer sich auskennt und möglichst individuell anpassen möchte, ist bei FontSquirrel gut aufgehoben. Für alle anderen sind Fontie und Transfonter gute Alternativen.

In jedem Fall gilt, dass natürlich nur jene Schriften in Webfonts konvertiert werden dürfen, bei denen die jeweilige Lizenz das erlaubt. Kommerzielle Anbieter wie MyFonts und FontFont verfügen in der Regel über eigene Generatoren, die auch nur für dort erworbene Schriften zur Verfügung stehen.

(dpe)

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung Webdesign

Mit Adobe Animate und Snap.SVG animierte SVGs erstellen

Mit Animate CC hat auch Adobe das Ende von Flash eingeläutet. Zwar unterstützt das umbenannte Animationsprogramm nach wie vor Flash, aber der Schwerpunkt liegt auf HTML5 und WebGL. So entscheidest du vor jedem neuen Projekt, ob du eine Animation per HTML5-Canvas oder per WebGL erstellen möchtest. Animierte SVGs waren mit Animate CC bislang allerdings nicht möglich. Die Erweiterung „Snap.SVG Animator“ erweitert den Funktionsumfang von Animate CC genau um diese Möglichkeit.

snapsvg_framework
Das Framework Snap.SVG

Snap.SVG sorgt für vektorbasierte SVG-Animationen

Das Besondere an Flash war immer, dass es vektorbasierte Grafiken und Animationen in den Browser brachte. Das war in Zeiten vor SVG nicht möglich. Abgesehen von Schriften kamen nur pixelbasierte Formate wie JPEG und GIF zum Einsatz. Mit der Einführung von HTML5 wurde auch das XML-basierte SVG-Format beliebter, welches ähnlich wie Flash vektorbasiert und animierbar ist.

Damit hat das SVG-Format einen entscheidenden Vorteil zu HTML5-Canvas, welches Animationen nur pixelbasiert ermöglicht. Gerade beim Heranzoomen wird der Nachteil dieses Formates zu SVG deutlich. Da Animate CC grundsätzlich vektorbasiert ist, bietet es sich freilich an, vektorbasierte Ausgabeformate bereitzustellen.

Da SVG-Animationen jenseits der CSS3-Eigenschaften „transition“ und „animation“ per JavaScript realisiert werden, gibt es zahlreiche Frameworks, die dich dabei unterstützen, komplexe animierte SVGs zu erstellen. Eines der bekanntesten Frameworks ist Snap.SVG. Dieses stellt dir zahlreiche Methoden zur Verfügung, mit denen du Formen erstellst und diese auf unterschiedliche Art und Weise animierst.

Dabei erlaubt dir Snap.SVG eben auch interaktive Animationen, die per Klick oder Tap ausgelöst werden. Wer einen Blick in die Dokumentation von Snap.SVG wirft, stellt schnell fest, wie umfangreich das Framework ist. Mit der Animate-Erweiterung „Snap.SVG Animator“ wird die einfache Handhabung von Adobe Animate CC mit der komplexen Vielfalt von Snap.SVG kombiniert.

Kostenlose Erweiterung installieren und loslegen

Zunächst einmal musst du die kostenlos verfügbare Erweiterung „Snap.SVG Animator“ installieren. Du findest diese auf der Website der Adobe Add-ons. Die Erweiterung ist sowohl für die Windows- als auch für die Mac-Version von Adobe Animate CC verfügbar. Du installierst die Erweiterung entweder manuell oder direkt über die Creative Cloud.

snapsvg_assons
Erweiterung für Animate CC

Sobald „Snap.SVG Animator“ installiert ist, findest du in Animate CC den neuen Dokumenttyp „SnapSVGAnimator“. Du wählst also nicht nur zwischen HTML5, WebGL und ActionScript aus, sondern erhältst nun auch die Möglichkeit, ein SVG-Dokument anzulegen. Wie bei den anderen Dokumenttypen ist ein nachträglicher Wechsel nicht möglich.

snapsvg_dokumenttyp
Neuer Dokumenttyp in Animate CC nach Installation der Erweiterung

Du musst dich also zu Beginn eines neuen Projektes entscheiden, in welchem Format du entwickeln und gestalten möchtest. Anschließend arbeitest du ganz wie gewohnt mit Animate CC. Das heißt, du legst Formen an, konvertierst sie in Symbole und erstellst Animationen.

Aktionen erstellen per JavaScript

Dabei besteht die Möglichkeit, mit „Snap.SVG Animator“ interaktive SVG-Animationen zu erstellen. Während dir bei HTML-Canvas und WebGL Codefragmente zur Verfügung stehen, die du relativ einfach in dein Aktionen-Fenster ziehst, gibt es solche Fragmente beim Typ „SnapSVGAnimator“ nicht. Allerdings steht eine übersichtliche API mit den wichtigsten Methoden bereit.

So definierst du eine Klick-Aktion für eine Symbolinstanz sehr einfach.

this.beispiel.click(function() {
  this.beispiel.play();
});

Im Beispiel wird beim Klick auf die Instanz „beispiel“ diese abgespielt.

SVG-Dokument veröffentlichen

Das Veröffentlichen deines SVG-Dokumentes ist ebenfalls einfach und unkompliziert. Du gibst eine Ausgabedatei an und hast die Möglichkeit, über die erweiterten Einstellungen die Komprimierung der auszugebenen Dateien zu beeinflussen.

Die Ausgabe enthält neben einer HTML- und einer JSON-Datei zwei JavaScript-Dateien. Diese beinhalten das Snap.SVG-Framework, sodass alle notwendigen Dateien von Animate CC beziehungsweise der Erweiterung generiert werden und zur Verfügung stehen.

(dpe)

Kategorien
Design Webdesign

Webschriften optimieren: So gehts ganz einfach

Webschriften sind zweifelsohne eine große Bereicherung für das Webdesign und mittlerweile nicht mehr wegzudenken. Schließlich haben sie die Einheitstypografie mit Verdana und ihren Zeitgenossen beendet. Da Webschriften im Gegensatz zu Systemschriften jedoch heruntergeladen werden müssen, stellen sie natürlich eine zusätzliche Ressource dar, die für zusätzlichen Datentransfer sorgt. Mit den folgenden Tipps wirst du deine Webschriften optimieren und so dafür sorgen, dass sie schneller geladen werden.

Webschriften optimieren

Zeichensatz der Schrift beschränken

Gut ausgebaute Schriften besitzen schon mal mehrere hundert Zeichen. Darin enthalten sind dann etwa sprachspezifische Buchstaben wie deutsche Umlaute und das Eszett – aber auch solche anderer Sprachen. Falls du auf deiner Website ohnehin nur Texte in deutscher Sprache veröffentlichst, solltest du dich auf einen Zeichensatz konzentrieren, der auf alle nicht benötigten Buchstaben verzichtet.

Nutzt du eine Schrift nur in Versalien – zum Beispiel für Überschriften – solltest du Kleinbuchstaben aus dem Zeichensatz streichen. So kommst du zu möglichst kleinen Dateigrößen. Denn gerade im mobilen Internet solltest du auf möglichst kleine Dateigrößen achten.

fontsquirrel_webfont-generator
Webfont-Generator von Fontsquirrel

Die meisten Anbieter von Webschriften wie beispielsweise MyFonts bieten einen Webfont-Generator an, mit dem du den Zeichensatz selbst bestimmen kannst. Darin legst du dann beispielsweise fest, welche Sprachen unterstützt werden sollen. Einen frei zugänglichen Webfont-Generator gibt es zudem auf Fontsquirrel. Dort lädst du eine Desktopschrift hoch und generierst die passenden Webschriften in allen gängigen Formaten.

Auch wenn nach wie vor eine Reihe unterschiedlicher Webformate wie EOT und TTF im Einsatz sind, so hat sich das WOFF-Format doch mittlerweile als Standard durchgesetzt. Mit WOFF2 gibt es dazu bereits ein Nachfolgeformat, welches deutlich kleinere Schriftdateien hervorbringt. Du solltest also neben WOFF auch WOFF2 berücksichtigen. Die Browser, die das neue Format bereits unterstützen, können so kleinere Dateien herunterladen.

Webfont-Generatoren wie der von Fontsquirrel unterstützen dieses Format bereits.

Zeichensatz per CSS beschränken

Moderne Browser unterstützen noch eine weitere Möglichkeit, den Zeichensatz einer Schriftdatei einzuschränken – nämlich die CSS-Eigenschaft „unicode-range“. Hiermit definierst du einzelne Zeichen oder Zeichenbereiche einer Schrift. Der Browser lädt dann nur jene Zeichen der Schrift herunter, die innerhalb des vorgegebenen Unicode-Bereiches liegen.

unicode-range: U+0025-00FF;
unicode-range: U+4??;
unicode-range: U+0025-00FF, U+4??;

Im ersten Beispiel wird ein Unicode-Bereich definiert, der die Codepunkte „U+0025“ bis „U+00FF“ beinhaltet. Im zweiten Beispiel wird eine Wildcard gesetzt. Es werden also alle Zeichen berücksichtigt, deren Codepunkte mit „U+4“ beginnen. Im letzten Beispiel werden die ersten beiden Bereiche miteinander kombiniert.

unicode-range_beispiel
Verwendung der „Lobster“ für den Unicode-Bereich „U+0026“ (kaufmännisches Und)

Leider unterstützen noch nicht alle Browser diese Eigenschaft. Der Internet Explorer und Edge stellen im Browser zwar nur jene Zeichen dar, die im angegebenen Unicode-Bereich liegen, laden aber dennoch den kompletten Zeichensatz herunter.

Schriften komprimieren und cachen

Zuguter letzt besteht serverseitig noch die Möglichkeit, eine Schrift zu komprimieren. Per „.htaccess“ sorgt du beispielsweise dafür, die Schriftdateien per Deflate zu schrumpfen, bevor sie an den Browser geschickt werden. So reduzierst du die Dateigröße während der Übertragung, was die zu übertragene Datenmenge wieder etwas schmälert.

Außerdem solltest du per „.htaccess“ dafür sorgen, dass deine Schriftdateien im Browser zwischengespeichert werden. In der Regel treten ja keine Veränderungen bei Schriftdateien auf, sodass ein durchaus großzügig angelegter Zeitraum für das Caching eingerichtet werden kann.

AddType font/woff .woff
ExpiresByType font/woff "access plus 1 year"
AddOutputFilterByType DEFLATE font/woff

Im Beispiel wird per „ExpiresByType“ dafür gesorgt, dass die Schrift ein Jahr lang im Cache verbleibt und per „AddOutputFilterByType“ wird zusätzlich die Deflate-Komprimierung angewendet.

(dpe)

Kategorien
Design UI/UX

Mockplus: Schnell und einfach Mockups für Desktop- und Mobilgeräte erstellen

Komplexe Benutzeroberflächen für Websites oder Anwendungen müssen gut durchdacht und intuitiv bedienbar sein. Bevor es an die eigentliche Gestaltung geht, ist es üblich, das Aussehen und die Bedienung per Mockups festzulegen. Mit Mockplus erstellst du interaktive Mockups mit wenigen Klicks und testet diese auch auf Mobilgeräten.

mockplus

Mockplus für Windows und Apple herunterladen

Auch wenn der Trend ja weg von klassischen Anwendungen hin zu Webanwendungen geht, ist Mockplus als klassische Applikation für Windows- und Apple-Systeme erhältlich. Hast du Mockplus installiert und dich kostenlos registriert, startest du mit deinem ersten Projekt. Dazu wählst du zunächst aus, welche Art von Mockup du erstellen möchtest. Zur Auswahl stehen dir Smartphones, Tablets und Desktopgeräte sowie Websites und Whiteboards. Je nach Auswahl erhältst du eine entsprechend angepasste Arbeitsfläche.

mockplus_neu
Neues Projekt anlegen

Als Nächstes entscheidest du dich für einen Stil für dein Mockup. Während der Wireframe-Stil auf geometrisch reduzierte Formen setzt, kommt der Sketch-Stil mit einer eher handgezeichneten Optik daher. Du kannst jederzeit zwischen den beiden Stilen wechseln.

mockplus_stil
Auswahl zwischen Wireframe- und Sketch-Stil

Klassische Inhalts- und Bedienelemente platzieren

Ist deine Arbeitsfläche soweit vorbereitet, kannst du anfangen, dein Mockup zu konzipieren und gestalten. Mockplus stellt dir dazu eine Vielzahl verschiedener Komponenten zur Verfügung, die du ganz bequem mit der Maus auf deine Arbeitsfläche ziehst. So gibt es klassische Buttons, Text- und Bildelemente sowie Formularfelder, die du frei platzierst und skalierst.

Darüber hinaus sind in sechs Kategorien weitere Komponenten vorhanden, die gängige Bedienoberflächen und Inhalte simulieren. So gibt es zum Beispiel Popup-Menüs, Hinweisfenster, Scrollbars, Tabs und auch Bilderkarussels. Jede Komponente hat ihre eigenen Eigenschaften. So gibst du Texte ein oder importierst Bilder, wie es beim Bilderkarussel möglich ist.

mockplus_oberflaeche
Platzierte Komponenten im Sketch-Stil auf der Zeichenföäche

Textfelder werden im Übrigen mit Blindtext ausgestattet, sodass du auch ohne eigene Texteingabe arbeiten kannst, wenn ein eigener Text nicht notwendig oder einfach noch nicht fertig ist.

Insgesamt stehen dir an die 200 Komponenten zur Verfügung. Es gibt kaum etwas, wofür Mockplus nicht eine Komponente vorgesehen hat.

In der Vorschau kannst du dann nicht nur das Aussehen deines Mockups prüfen, sondern auch die Bedienung. So sind die Menüs und andere interaktive Elemente wie das Bilderkarussel oder Tabs bedienbar.

Interaktionen festlegen

Damit deine Benutzeroberfläche auch im Mockup funktioniert, gibt es die Möglichkeit, Schaltflächen und andere Elemente mit Interaktionen zu belegen. Mit „OnClick“, „OnLongClick“ und „OnLoad“ stehen dir drei Ereignisse zur Verfügung, die eine Interaktion auslösen.

mockplus_interaktion
Einfache Interaktionen anlegen

Neben der Auswahl der Interaktion musst du noch ein Ziel angeben. Hierbei handelt es sich um eine interaktive Komponente auf der Zeichenfläche, die per Interaktion eingeblendet oder per Animation verändert wird. So besteht die Möglichkeit, eine Komponente aus dem nicht sichtbaren Bereich der Seite hineinzubewegen, zu vergrößern oder zu drehen.

Das Ziel für deine Interaktion wählst du entweder aus einer Liste aller auf der Seite platzierten Elemente aus oder verknüpfst es einfach per Drag-&-Drop. Fährst du mit der Maus über eine Schaltfläche mit einer Interaktion, wird das verknüpfte Element hervorgehoben, sodass du nicht den Überblick darüber verlierst, welche Schaltflächen mit welchen Komponenten interagieren.

Je nach Auswahl stehen dir verschiedene Eigenschaften zur Verfügung, mit denen du die Form der Animation beeinflusst. So legst du beispielsweise die Geschwindigkeit fest, mit der die Animation laufen soll.

Dank der Interaktionen öffnest du beispielsweise per Klick auf eine Schaltfläche ein Menü oder eine Sidebar.

Seiten anlegen und verlinken

Selten beschränkt sich eine Website oder Anwendungen auf eine Seite. Meist sind unterschiedliche Bereiche auf mehrere Seiten unterteilt. Auch mit Mockplus legst du für ein Projekt beliebig viele Seiten an und füllst sie mit Inhalt.

Ähnlich wie bei den Interaktion erstellst du Verlinkungen zu anderen Seiten und legst auf Wunsch einen animierten Übergang zu der Seite fest. So wählst du aus verschiedenen Slide-Animationen aus, welche die ausgewählte Seite aus einer Richtung ins Display animieren. Auch eine Fade-Animation ist möglich.

mockplus_seite
Seiten verlinken und animierte Übergänge festlegen

Für jede Seite kannst du im Übrigen einen eigenen Seitenstil festlegen. So weist du eine Hintergrundfarbe zu sowie eine Schriftart und -größe. Schriftart und -größe werden auf alle Elemente, die auf der jeweiligen Seite platziert sind, angewendet. So änderst du also im Handumdrehen das Aussehen der gesamten Seite, ohne die Komponenten einzeln bearbeiten zu müssen.

Auf Wunsch wirkt sich die Stilanpassung auch auf alle anderen Seiten deines Mockups aus.

400 Icons für Benutzeroberflächen

Es gibt kaum eine Benutzeroberfläche, die nicht ohne den Einsatz von aussagekräftigen Icons auskommt. Auch hier hat Mockplus vorgesorgt und bietet dir 400 Icons an, die du einfach in deine Projekte einbinden kannst.

mockplus_icons
Aus 400 Icons auswählen – im Wireframe- und Sketch-Stil vorhanden

So gibt es Emoticons, einfache geometrische Formen, Pfeile sowie Bearbeitungssymbole unter anderem zum Kopieren, Ausschneiden, Bearbeiten und Löschen. Icons setzt du ähnlich ein wie Schaltflächen. Du kannst also auch ihnen eine Interaktion zuweisen.

Nutzt du Mockplus in der kostenlosen Variante, stehen dir allerdings nicht alle Icons zur Verfügung.

Vorschau und Test auf Mobilgeräten

Vom Bearbeitungsmodus wechselst du jederzeit ganz bequem in die Vorschau. In dieser testest du deine Interaktionen und Links zu anderen Seiten. Erstellst du ein Mockup für ein Mobilgerät, erscheint ein Apple- oder Androidgerät zur Veranschaulichung um dein Mockup. So erhältst du einen guten Eindruck, wie dein Mockup tatsächlich auf dem entsprechenden Gerät aussieht.

Für die richtige Smartphone- oder Tableterfahrung gibt dir Mockplus zudem die Möglichkeit, dein Mockup auch auf einem realen Mobilgerät zu testen. Dazu musst du dir die Android- oder iOS-App von Mockplus auf einem entsprechenden Smartphone oder Tablet installieren.

Während du die iOS-App im Apple Store erhältst, wird dir die Android-App als Download angeboten. Du musst diese also manuell auf deinem Mobilgerät installieren.

mockplus_vorschau
Bedienbare Vorschau deines Mockups

In der Desktopanwendung wählst du nun die Vorschau für Mobilgerät aus und erhältst einen QR-Code, den du mit der Android- oder iOS-App einscannst. Anschließend erscheint dein Mockup-Projekt auf deinem Smartphone oder Tablet.

Cloud-Anbindung in der Pro-Version

Neben der kostenlosen Version gibt es Mockplus auch in einer kostenpflichtigen Variante. Diese ermöglicht es dir, Projekte in einer Cloud zu speichern, so dass du jederzeit Zugriff auf diese hast.

Außerdem stehen dir weitere Icons sowie eine Export- und Druckfunktion zur Verfügung. Die Pro-Version mit all diesen Features kostet 20 US-Dollar im Monat, 79 US-Dollar im Halbjahr oder 119 US-Dollar im Jahr.

Fazit

Mockplus besticht durch seine einfache Bedienung. Dank vieler vorgefertigter Komponenten baust du dir ohne Programmierkenntnisse schnell ein Mockup zusammen. Interaktionen und Animationen fügst du ebenso schnell hinzu und testest diese in einer Vorschau.

Die Anbindung an Mobilgeräte funktioniert mit der eigenen iOS- und Android-App ebenso schnell und unkompliziert. Gerade bei der Mockup-Erstellung geht es darum, schnelle Ergebnisse zu finden, die sich sehr schnell testen und im Zweifel wieder verwerfen lassen. Mockplus ermöglicht dir mit seinen zahlreichen Features genau das.

Es eignet sich sowohl für App-Entwickler als auch auf Webdesigner und -entwickler, die komplexe, aber einfach zu bedienende Benutzeroberflächen gestalten wollen.

(dpe)

Kategorien
HTML/CSS Webdesign

Alles paletti: Ist deine Website valide, barrierefrei, sicher und schnell?

Webentwicklung wird zunehmend komplexer. Neben korrekter Auszeichnung von HTML und CSS gibt es zahlreiche weitere Faktoren, die zwar nicht zwingend das korrekte Aussehen einer Website beeinflussen, aber dennoch auf den Erfolg einer Website Einfluss haben. Dazu gehört eine barrierefreie Darstellung der Inhalte, sowie eine schnelle Erreichbarkeit. Das alles selbst im Blick zu haben, ist schwierig. Daher gibt es zahlreiche Tools, die dir dabei helfen, zu dem Werturteil „Alles paletti“ zu gelangen.

Alles paletti

Klassische Validatoren für HTML und CSS

Als allererstes solltest du natürlich sicherstellen, dass dein HTML- und CSS-Quelltext richtig ausgezeichnet ist. Das W3C bietet hier einen Validator an, der deinen HTML-Quelltext auf Fehler durchsucht und Warnungen sowie Verbesserungsvorschläge ausgibt. Neben Einhaltung der Syntax gibt es weitere Faktoren, die bei HTML beziehungsweise HTML5 eingehalten werden sollten.

validator_w3c_html
W3C-Validator für HTML

Gerade bei HTML5 spielt die Semantik eine große Rolle. Du solltest also darauf achten, dass deine Website sich an die semantischen Regeln von HTML5 hält. Dazu gehört etwa, dass Überschriften richtig gesetzt werden. So sollte jedes „<article>“-Element immer eine Überschrift beinhalten. Mehrere „<h1>“-Überschriften sollten vermieden werden. Der W3C-Validator macht dich auf diese Dinge aufmerksam.

Auch für CSS gibt es einen entsprechenden Validator, der dich auf Auszeichnungsfehler hinweist. Leider interpretiert dieser Vendor-Prefixe als Fehler, weshalb ein tatsächlich valider CSS-Quelltext praktisch wenig sinnvoll ist.

Barrierefreiheit prüfen

Zunehmend wichtiger wird der Aspekt der Barrierefreiheit bei der Webentwicklung. Dies stellt Webdesigner und -entwickler vor große Herausforderungen. Denn für Menschen mit Sehbehinderungen muss eine Website besondere Merkmale erfüllen, damit diese mit Screenreadern erfasst werden kann. Dazu gehört, dass Inhalte, die mit dem Auge einfach erfasst werden können, so ausgezeichnet sind, dass Screenreader etwa Navigationselemente und Randbereiche einer Website gut interpretieren können.

validator_codesniffer
Der HTML_CodeSniffer zeigt, wie es um die Barrierefreiheit deiner Website steht

Der HTML_CodeSniffer hilft dir dabei, kritische Elemente in deinem Quelltext zu finden und gibt dir Hinweise, inwiefern diese nicht barrierefrei sind. Dabei berücksichtigt das Tool mehrere Standards, die ein unterschiedliches Maß an Barrierefreiheit vorsehen.

Sichere Websites bevorzugt

Auch der Sicherheitsaspekt wird in der Webentwicklung immer wichtiger. So hat Google bereits damit angefangen, Websites, die per SSL verschlüsselt sind, in Suchergebnissen besser zu bewerten. Gerade wenn persönliche Daten übertragen werden – vor allem bei sozialen Netzwerken und Online-Shops ist das der Fall – solltest du sicherstellen, dass diese verschlüsselt werden.

validator_ssl-report
Der SSL-Report verrät, wie sicher deine Website ist

Mit dem SSL-Report von Qualys SSL Labs bekommst du einen schnellen Überblick, ob deine Website per SSL verschlüsselt ist und welche weiteren Faktoren ein mögliches Sicherheitsrisiko sein können.

Die Website securityheaders.io gibt dir Auskunft darüber, welche sogenannten Security-Headers gesetzt sind. Gerade in Kombination mit HTTPS können hier zusätzliche Sicherheitsschranken gesetzt werden, die zum Beispiel dafür sorgen, dass eine sichere Verbindung zu einer Domain auch beibehalten wird und nicht versehentlich zu einer unsicheren Verbindung gewechselt wird. Securityheaders.io haben wir schon ausführlicher vorgestellt.

Schnelligkeit ebenfalls wichtig

Trotz Breitbandausbau solltest du immer darauf achten, ob deine Website auch schnell geladen wird. Gerade beim mobilen Internet ist es dank geringerer Bandbreiten und gedeckelter Datenvolumina wichtig, die zu übertragenden Daten gering zu halten.

Die Google PageSpeed Insights helfen dir dabei, herauszufinden, wo es Optimierungsmöglichkeiten bezüglich der Ladezeiten bei deiner Website gibt. So weist dich der Dienst etwa darauf hin, ob die Dateigröße von Bildern durch bessere Komprimierung reduziert werden kann und ob deine JavaScript- und CSS-Dateien das Rendering der Seite blockieren.

validator_gtmetrix
GTmetrix gibt ausführliche Informationen zur Geschwindigkeit deiner Website

Eine Alternative zu Googles Dienst ist GTmetrix. Er funktioniert ganz ähnlich und gibt dir als prozentualen Wert an, wie schnell deine Website ist und wie viel Optimierungspotenzial vorhanden ist. Dabei werden über 25 Parameter geprüft, die relevant für die Geschwindigkeit sind und bei Bedarf optimiert werden können.

Mobiltauglichkeit testen

Zuguterletzt – wo wir schon beim mobilen Internet waren – spielt natürlich auch die Frage eine Rolle, wie gut eine Website auf Mobilgeräten funktioniert. Auch hier hat Google ein spezielles Tool, welches dich darüber informiert, ob deine Website „mobile friendly“ ist. Der Test auf Optimierung für Mobilgeräte gibt kurz und knapp wieder, ob es Optimierungsbedarf gibt.

Ist das Weblayout responsiv? Sind Links und Buttons groß genug und haben sie einen ausreichend großen Abstand zueinander? Ist die Schrift gut lesbar? All diese Faktoren werden bei dem Test berücksichtigt.

validator_mobiready
mobiReady zeigt, wie „mobile friendly“ deine Website ist

Auch die Seite mobiReady testet deine Website auf Mobilfreundlichkeit. Dabei wird diese auf einem Desktop sowie drei Smartphones simuliert. Als Ergebnis erhältst du einen Score, der deine Website mit den 1.000 weltweit größten Websites vergleicht. Außerdem erhältst du auch hier eine Reihe von Hinweisen, woran es hakt und wo du etwas verbessern kannst.

Fazit: Alles paletti!

Wer alles richtig machen will, hat bei der Gestaltung und Umsetzung viel Arbeit vor sich. Alle Tests zu bestehen, dürfte schwierig bis unmöglich sein – gerade bei gestalterisch aufwändigen und inhaltlich komplexen Websites. Aber die hier vorgestellten Dienste sind ein guter Anhaltspunkt, um Schwachstellen festzustellen und zumindest grobe Fehler auszumerzen, beziehungsweise zu vermeiden.

(dpe)

Kategorien
Design Icons & Fonts

Aktuelle Trends in der Typografie

Was ist typografisch gerade gefragt? Extensis – Anbieter von Anwendungslösungen zur Schriftverwaltung – hat sich in einer Umfrage einmal in der Kreativszene umgehört und ist zu interessanten Ergebnissen gekommen. Die kompletten Ergebnisse der Umfrage, bei der knapp 2.000 Kreative aus verschiedenen Branchen befragt wurden, gibt es kostenlos als PDF-Datei zum Herunterladen.

extensis_trend-typografie

Schriften nach wie vor für den Druck eingesetzt

Die Teilnehmer der Umfrage hat Jim Kidwell, der sie für Extensis erstellt hat, über die Kundendatenbank des Unternehmens eingeladen. Schließlich sind sie es, die täglich mit Schrift und Typografie umgehen. Da überrascht es auch wenig, dass etwa 40 Prozent der Teilnehmer aus dem Grafikdesign kommen, gefolgt von Druck, Werbung und Publishing.

Interessant ist, dass über 90 Prozent der Befragten Schriften für den Druck nutzen, etwa 80 Prozent für die Gestaltung von Logos und Zweidrittel zur Einbettung in PDF-Dateien. Die Nutzung von Schriften auf Websites liegt bei nur etwa 55 Prozent – und das, obwohl Webfonts seit einigen Jahren von allen Browsern unterstützt werden und das Angebot an kostenlosen und -pflichtigen Webschriften ja durchaus groß ist.

extensis_trend-typografie_branche

Ob der Grund im weit verbreiteten Abomodell liegt, welches vor allem bei kommerziellen Schriften üblich ist, bleibt offen.

Serifenbetonte Schriften sehr beliebt, Serifenlose in Zukunft gern gesehen

Aber welche Schriften sind den Grafikdesignern und Werbern denn gerade angesagt? Hier sind es vor allem serifenbetonte Schriften, die bei über 90 Prozent der Befragten derzeit sehr beliebt sind. Das entspricht ja durchaus dem Trend, den man im Grafik- und Webdesign feststellen kann. Dort, wo Design besonders trendig sein soll, werden häufig serifenbetonte Schriften eingesetzt.

extensis_trend-typografie_trends

Besonder schlecht kommen Jugendstilschriften weg sowie Schriften, die mit doppelten beziehungsweise zusätzlichen Strichen versehen wurden. Hier ist es wohl vor allem die fehlende Lesbarkeit solcher Schriften, die zu einer eher negativen Bewertung führte.

extensis_trend-typografie_kreide

Da jeder Trend einmal ausläuft, hat Kidwell auch gefragt, welche Schriften denn derzeit überstrapaziert werden. Ganz vorne dabei sind Schriften im „Chalkboard“-Stil – also Schriften, die Kreide an einer Tafel simulieren.

Und wenn es darum geht, welche Schriften die Kreativszene in Zukunft gerne öfter sehen möchte, dann sind serifenlose Schriften ganz vorne dabei – also das Kontrastprogramm zu den derzeit noch sehr beliebten serifenbetonten Schriften.

Typografie: eine sehr emotionale Angelegenheit

Bei der Umfrage hatten die Teilnehmer nicht nur die Möglichkeit, per Multiple Choice zu antworten. Sie konnten auch ihre ganz eigenen Gedanken zu den vorgestellten Schriftstilen kundtun. Eine Auswahl dieser Gedanken beziehungsweise Kommentare hat Kidwell ebenfalls veröffentlicht.

Zu jeder der 14 Schriften, die stellvertretend für einen Stil in der Umfrage herhalten mussten, hat Kidwell zehn Meinungen der Teilnehmer veröffentlicht. Darunter sind sehr interessante Ansichten, warum jemand eine Schrift besonders mag oder auch nicht leiden kann. Hier wird vor allem deutlich, dass Typografie gerade unter Designern eine hoch emotionale Angelegenheit ist.

Ein Teilnehmer lässt sich bei „Chalkboard“-Schriften gar dazu hinreißen, „… bitte zerstören Sie all diese Schriften.“ zu kommentieren. So leidenschaftlich dürften viele Kreative mit Schriften umgehen – vor allem, wenn es um Schriften geht, die einem besonders unbeliebt sind.

Schriften vor allem bei den Großen erwerben

Ein ebenfalls sehr interessanter Abschnitt in der Umfrage befasst sich damit, wo und wie die Teilnehmer ihre Schriften erwerben. Hier wird deutlich, dass es vor allem drei große Anbieter sind, die hier die Nase vorn haben. MyFonts, Fonts.com und Adobe sind hier mit riesigem Abstand die beliebtesten Anbieter. Wenn man berücksichtigt, dass MyFonts und Fonts.com beide zum Monotype-Konzern gehören, teilen sich letztendlich zu Großunternehmen den Schriftenmarkt unter sich auf.

extensis_trend-typografie_quellen

Kleinere Anbieter haben hier nur sehr geringe Anteile, die meist unter fünf Prozent liegen.

Die meisten lizenzieren übrigens komplette Familie – und zwar dann, wenn sie gebraucht werden. Eher selten werden ganze Bibliotheken lizenziert oder ausschließlich Open-Source-Schriften verwendet. Wie man die Tatsache bewerten soll, dass etwa 6 Prozent der Befragten keine Schriften lizenzieren, bleibt offen.

Fazit

Auf insgesamt 31 Seiten gibt es weitere interessante Ergebnisse zu Schriften und wie sie derzeit genutzt werden. Auch die Frage, welcher Schriftgestalter unter den Teilnehmern ganz weit vorne steht, wird beantwortet. Zu haben sind die Ergebnisse der Umfrage auf der Website von Extensis (in deutscher Übersetzung). Um die Datei herunterladen zu können, musst du lediglich deine E-Mail-Adresse angeben.

(dpe)

Kategorien
Editoren HTML/CSS Responsive Design Webdesign

Blisk: Der Browser für Entwickler

Alle modernen Browser sind mittlerweile mit umfangreichen Entwicklerwerkzeugen ausgestattet. Diese helfen dir unter anderem dabei, HTML und CSS zu überprüfen, sowie JavaScript zu debuggen. Auch hast du mit ihnen die Möglichkeit, dein Weblayout für unterschiedliche Auflösungen ausgeben zu lassen. Die Entwicklerwerkzeuge machen die Arbeit für Webdesigner und -entwickler sehr viel einfacher. Doch es geht noch ein Stückchen komfortabler und schneller: Mit Blisk gibt es nun einen Browser, der ganz speziell für Entwickler konzipiert wurde.

blisk

Mobilgeräte immer im Blick

Hast du Blisk heruntergeladen und installiert, dürfte dich der Browser zunächst an Google Chrome erinnern. Das ist nicht verwunderlich. Denn Blisk basiert auf Chromium, dem Quelltext von Chrome, der unter einen freien Lizenz allen zur Verfügung gestellt wird.

Der größte Unterschied zu Chrome und anderen Browser wird erkennbar, wenn du eine Website aufrufst. Denn Blisk stellt eine Website immer doppelt dar. Während in der rechten Bildhälfte die Seite als klassische Desktopansicht aufgerufen wird, erhältst du auf der linken Hälfte eine Mobilansicht.

blisk_browser
Zweigeteiltes Fenster für Mobil- und Desktopansicht

Dabei wählst du aus einer Reihe gängiger Smartphones und Tablets aus. So wechselst du beispielsweise sehr einfach vom iPhone 6 zum Galaxy S3 und siehst, wie deine Website auf beiden Geräten dargestellt wird. Dabei wird die Website innerhalb eines Mockups des jeweiligen Gerätes angezeigt, um ein möglichst realistisches Erscheinungsbild zu bekommen.

Die Darstellung auf den Mobilgeräten steuerst du zudem im Touch-Modus, bei dem eine Bedienung per Taps und Gesten simuliert wird. Zwar unterstützt auch Chrome diese Möglichkeit, aber nicht so schön aufbereitet.

Synchrones Scrollen

Damit du das Aussehen deiner Website optimal auf der Desktop- und Mobilansicht gegenüberstellen kannst, wird deine Website auf beiden Ansichten parallel gescrollt. So ersparst du es dir, jeweils auf beiden Ansichten zu einer bestimmten Position einer Seite zu gelangen.

blisk_browser_menueleiste
Menüleiste, um spezielle Funktionen ein- und ausschalten zu können

Wer das synchrone Scrollen nicht mag, kann es über die Einstellungen auch ganz einfach ausschalten. In der Menüleiste gibt es einen speziellen Button, der dich direkt zum Setup mit den Einstellungen bringt, in denen du diese Funktion ein- und ausschaltest.

Auto-Refresh für veränderte Inhalte

Eine weitere sehr praktische Funktion von Blisk ist das Auto-Refresh. Dieses sorgt dafür, dass der Browser eine Website immer dann neu lädt, wenn sich beispielsweise der HTML- oder CSS-Quelltext der Seite verändert hat.

Hierzu musst du für eine Domain einen sogenannten Watcher einrichten. Dazu gibst du zu einer Domain das Stammverzeichnis mit den lokalen Dateien deiner Website an. Außerdem legst du Dateiendungen fest, auf die reagiert werden soll. HTML-, CSS- und JavaScript-Dateien sind hier standardmäßig angegeben.

blisk_browser_setup
Das Setup für das Auto-Refresh

Immer wenn sich eine dieser Dateien im lokalen Verzeichnis ändert, lädt Blisk automatisch die Website der angegebenen Domain neu. Wer einen eigenen lokalen Server betreibt oder Dateien seiner Webprojekte automatisch vom lokalen Dateisystem auf einen Server speichert, wird sicher Freude mit dieser Funktion haben und sich so mehr als einmal das manuelle Neuladen ersparen.

Weitere Features geplant

Da Blisk noch neu ist, stehen noch nicht alle Funktionen zur Verfügung. So gibt es einige Features, die erst noch implementiert werden müssen. Dazu zählt die Möglichkeit, Screenshots von Websites zu erstellen, sowie eine Video-Capture-Funktion.

Ebenfalls noch in Arbeit ist ein Analytics-Feature, welches die geräteübergreifende Kompatibilität und Perfomance einer Website messen soll.

Klassische Entwicklerwerkzeuge

Natürlich stehen dir in Blisk auch die klassischen Entwicklerwerkzeuge zur Verfügung, wie du sie von Google Chrome kennst. So kannst du in Blisk Elemente überprüfen und hast Zugriff auf Cookies und die Storages deiner Website.

Auch wenn Blisk derzeit noch nicht mit allen Features aufwartet, ist der Browser bereits jetzt eine für Entwickler interessante Alternative zu Chrome. Er macht vieles einfacher, schneller und anschaulicher. Blisk ist zudem kostenlos und wird, wenn er hält, was er verspricht, noch einige interessante Features hinzubekommen.

Derzeit gibt es Blisk allerdings nur für Windows. Apple und Linux sollen jedoch folgen.

(dpe)

Kategorien
Design Essentials Freebies, Tools und Templates Icons & Fonts UI/UX

Schriften kombinieren leicht gemacht (kostenloses E-Book)

Spätestens mit der Einführung der Webfonts steht auch Webdesignern die ganze Vielfalt der Typografie für ihre Projekte zur Verfügung. Richtige Schriften kombinieren fällt jedoch nicht allen leicht. Das kostenlose E-Book „Combining Typefaces“ hilft dir, passende und zueinander passende Schriften zu finden. Also, welche Schriften passen zu meinem Weblayout und welche Schriften harmonisieren gut miteinander? Das E-Book beantwortet diese und weitere Fragen auf über 60 Seiten.

Schriften kombinieren

Einführung in Grundlagen der Typografie

Alle, die sich zunächst einmal ein Grundlagenwissen anlesen wollen, finden im ersten Kapital von „Combining Typefaces“ viele allgemeine Informationen rund um Schrift und Typografie. So gibt das Kapitel einen Überblick über die Anatomie der Buchstaben, erklärt also unter anderem, was es mit Oberlängen, Unterlängen und Serifen auf sich hat. Wer diese Begrifflichkeiten bereits kennt, kann sich hier mit den englischen Bezeichnungen vertraut machen. Denn das E-Book ist in englischer Sprache verfasst.

Schriften kombinieren
Anatomie der Buchstaben

Überall dort, wo es sehr spezifisch wird, verweist das Buch auf Websites und Fachbücher, mit denen du dein Wissen weiter vertiefst. Auch die Klassifikation von Schriften – also die stilistische und historische Einordnung von Schriften – wird nur oberflächlich behandelt. Aber auch hier gibt es Verweise zu weiterer Literatur.

Schriften auswählen und kombinieren

In den übrigen Kapiteln geht es dann ums eigentliche Thema. Nach welchen Kriterien sollte man eine oder mehrere Schriftarten aussuchen? Was soll mit der Typografie erreicht werden? Es gibt viele Faktoren, die bei der Auswahl einer Schrift eine wichtige Rolle spielen. Da ist zum einen die Lesbarkeit. Aber Schrift kann auch so ausgewählt und angewendet werden, dass sie in erster Linie die Aufmerksamkeit der Lesers erregt.

Der eigentliche Schwerpunkt des Buches – nämlich die Kombination von Schriften – wird sehr ausführlich bearbeitet. Letztendlich ist die Kombination passender und harmonisch wirkender Schriften nicht immer einfach. Wer auf der sicheren Seite sein will, bleibt innerhalb einer Schriftfamilie und kombiniert zum Beispiel eine serifenlose Schrift mit einer Serifenschrift aus derselben Familie.

Das E-Book gibt aber auch viele nützliche Tipps, wie man außerhalb einer Schriftfamilie geeignete Schriften findet, die zueinander passen. So ist es beispielsweise hilfreich, sich zunächst für eine „Ankerschrift“ zu entscheiden – also eine Basisschrift, die du für Fließtexte verwendest und mit der somit der Großteil deiner Texte gesetzt ist.

Schriften kombinieren
Vergleich von Schriften

Zu dieser Ankerschrift solltest du dann eine passende Schrift auswählen, die beispielsweise für Überschriften in Frage kommt. Hier stellt „Combining Typefaces“ einige Kriterien vor, auf die du bei der Auswahl achten solltest. So hilft es zum Beispiel, die Proportionen der Schriften miteinander zu vergleichen. Vergleiche das Verhältnis der Großbuchstaben zu den Kleinbuchstaben, sowie die Buchstabenweite. Auf diese Weise findest du Schriften mit ähnlichen Proportionen, die somit gut mit deiner Ankerschrift harmonieren.

Schriften kombinieren: Gelungene Beispiele

Im letzten Kapitel werden noch einige gelungene Beispiele für gute Kombinationen von Schriften im Webdesign vorgestellt. Anhand konkreter Situationen wird erläutert, warum die Schriften zueinander passen und was sie auszeichnet beziehungsweise besonders macht.

Schriften kombinieren
Beispiel für kombinierte Schriften auf einer Website

Dabei gibt es zu allen vorgestellten Schriften Verweise zu den jeweiligen Foundrys. Auf diese Weise findest du womöglich noch die oder andere neue Schrift zur Inspiration und eventuell ja auch einen Schriftenanbieter, den du bislang noch nicht kanntest.

Insgesamt ist „Combining Typefaces“ ein umfangreiches und für typografische Anfänger sowie Fortgeschrittene interessantes und hilfreiches Buch. Wer des Englischen mächtig ist und einen fundierten Einstieg ins Thema Typografie und Kombinieren von Schriften sucht, wird hier sicher fündig.

Das gut 60 Seiten lange und zehn Megabyte große E-Book steht kostenlos als PDF-Datei bei Adobes Schriftendienst Typekit zum Download bereit.

(dpe)

Kategorien
Design E-Business HTML/CSS SEO & Online-Marketing UI/UX

Foundation for Emails 2: responsiv, einfach, universell

Während man in modernen Browsern mittlerweile ohne größere Probleme HTML5 und CSS3 einsetzen und davon ausgehen kann, dass Chrome, Firefox und Internet Explorer beziehungsweise Edge alles so anzeigen, wie man es erwartet, sieht das bei E-Mail-Programmen und -Diensten ganz anders aus. Denn jedes Programm hat seine ganz eigenen Vorstellungen davon, wie es HTML und CSS darstellt. Doch mit „Foundation for Emails 2“ bekommst du ein umfangreiches Framework, welches komplexe HTML-E-Mails ermöglicht, die in den meisten Programmen und Webmail-Oberflächen funktionieren.

foundation-for-email

Starter-Kit mit elf Vorlagen

„Foundation“ ist ein beliebtes Framework für responsive Weblayouts, welches nun auch in einer aktuellen Version für responsive HTML-E-Mails erschienen ist. „Foundation for Emails 2“ gibt es in einer CSS- und in einer SASS-Version. Hast du das Starter-Kit heruntergeladen, findest du elf verschiedene Vorlagen für HTML-E-Mails.

foundation-for-email_vorlagen
Vorschau auf die elf E-Mail-Vorlagen

Darunter findest du relativ einfach gehaltene Vorlagen sowie mehrspaltige Vorlagen für verschiedene Zwecke. So gibt es zwei spezielle Newsletter-Vorlagen mit großer Header-Grafik und wahlweise ein- oder zweispaltigem Text. Darüber hinaus findest du Vorlagen für häufige Anlässe wie Bestellbestätigungen und klassische Passwort-vergessen-Mails, in denen üblicherweise ein Link zum Zurücksetzen des Passwortes verschickt wird.

foundation-for-email_newsletter
Zwei Vorlagen für Newsletter

Alle Templates besitzen eine externe CSS-Datei, in der alle Styles hinterlegt sind. Das Layout der Vorlagen ist absichtlich schlicht gehalten, so dass ein schlanker und übersichtlicher CSS-Quelltext vorhanden ist, der den eigenen Vorstellungen leicht angepasst werden kann.

Einfaches Tabellenlayout

Viele E-Mail-Programme und Webmail-Oberflächen verstehen leider nicht viel von moderner Webentwicklung. Und während es bei den Browsern eine recht übersichtliche Auswahl gibt, ist die Vielfalt der E-Mail-Programme und -Dienste so groß, dass man sich auf einen sehr kleinen gemeinsamen Nenner einigen muss.

foundation-for-email_order-password
Vorlagen für Bestellungen und vergessenes Passwort

Dieser besteht darin, dass HTML-E-Mails wie in den guten alten Zeiten vor CSS und ganz weit vor HTML5 als Tabellen ausgezeichnet werden. Dabei wird das Layout nicht komplett in einer Tabelle ausgezeichnet. Vielmehr kommen ineinander verschachtelte Tabellen zum Einsatz, die mit verschiedenen Klassen versehen werden.

Die oberste Tabelle erhält die Klasse „body“. Sie definiert den eigentlichen Bereich der E-Mail. Es folgen Tabellen mit der Klasse „container“, die einen Abschnitt innerhalb der Mail darstellen. Für mehrspaltige Tabellen fügst innerhalb einer Container-Tabelle eine weitere Tabelle mit der Klasse „row“ ein. In dieser kannst du dann Spalten mit unterschiedlicher Breite definieren.

12-er Raster für responsive Darstellung

Da „Foundation“ auf einem 12-spaltigen Raster basiert, hast du die Möglichkeit, deine Spalten entsprechend flexibel zu unterteilen. So sind zwei-, drei-, vier- und sechsspaltige Layouts problemlos möglich. Dank unterschiedlicher Klassen für große und kleine Fenster- beziehungsweise Displaygrößen entscheidest du sehr einfach, wie die Spalten bei kleinen und großen Auflösungen darzustellen sind.

Für ein dreispaltiges Layout vergibst du dann zum Beispiel bei großen Auflösungen die Klasse „large-4“ an deine Tabellenzellen. Sollen diese bei kleinen Auflösungen einspaltig dargestellt werden, vergibst du zusätzlich die Klasse „small-12“.

Vordefinierte Buttons, Farben und Schriften

Um die Arbeit mit „Foundation for Emails 2“ zu vereinfachen, stehen dir viele vordefinierte Komponenten zur Verfügung. So fügst du beispielsweise ohne großen Aufwand eigene Buttons in deine E-Mail ein. Neben primären und sekundären Buttons gibt es spezielle Buttons, um Warnungen und erfolgreiche Aktionen kenntlich zu machen.

foundation-for-email_buttons
Verschiedene vordefinierte Buttons

Auch für Überschriften, Fließtexte und Links gibt es entsprechende CSS-Vorgaben, die du natürlich anpassen und überschreiben kannst. Zur Ausrichtung von Texten und Bildern stellt die „Foundation for Email“ Klassen zur Verfügung, die es dir ermöglichen, Text links- oder rechtsbündig beziehungsweise zentriert auszurichten und Bilder links oder rechts mit Text umfließen zu lassen.

Inline-Styles erstellen

Neben der Notwendigkeit, das Layout einer HTML-E-Mail als Tabelle auszuzeichnen, gibt es eine weitere Besonderheit zu beachten. Viele E-Mail-Programme interpretieren Stylesheets nur, wenn sie inline – also per „style“-Attribut direkt im HTML-Element – definiert sind.

Da die Inline-Auszeichnung aufwendig ist und nachträgliche Änderungen gerade bei langen Mails sehr mühsam sind, stellt „Foundation“ dir einen „Web-Inliner“ zur Verfügung. Hierbei kopierst du sowohl deinen HTML- als auch deinen CSS-Quelltext in je ein Textfeld. Per Klick erstellt dir der „Web-Inliner“ einen HTML-Quelltext, bei dem alle im externen Stylesheet definierten Eigenschaften als Inline-Styles in den HTML-Quelltext übernommen wurden.

foundation-for-email_inliner
Web-Inliner erstellt HTML-Quelltext mit Inline-Styles

Außerdem werden bei dem ausgegebenen Quelltext alle Zeilenumbrüche und Leerzeichen entfernt, sodass trotz Inline-Styles ein möglichst schlanker Quelltext entsteht. Diesen Quelltext kannst du nun als HTML-E-Mail versenden.

Lediglich die Media-Queries-Regeln werden in einem eigenen „<style>“-Element definiert, da sich diese nicht per „style“-Attribut inline auszeichnen lassen. Allerdings wird das „<style>“-Element nicht wie üblich im HTML-Kopf, sondern im Body platziert, denn einige E-Mail-Programme entfernen alle Stylesheets-Blöcke aus dem HTML-Kopf.

Breite Kompatibilität mit gängigen E-Mail-Programmen und Webdiensten

Foundation for Emails 2“ läuft in vielen E-Mail-Programmen – und das nicht nur in aktuellen Versionen. So unterstützt das Framework zum Beispiel Microsoft Outlook in den Versionen 2000 bis 2016. Apple Mail wird in den Versionen 7 und 8 unterstützt. Auch die mobilen Standard-E-Mail-Anwendungen von Android 4.4 und iPhone 5 und 6, sowie iPad werden unterstützt – dazu die Gmail-App für Android.

Da viele ihre E-Mails über Webmail-Oberflächen öffnen, werden diese für die Dienste Gmail, Office 365, Outlook.com und Yahoo! Mail unterstützt – jeweils für Chrome, Firefox und den Internet Explorer.

Insgesamt ist „Foundation for Emails 2“ sehr einfach in der Handhabung, dabei äußerst flexibel und individuell anpassbar. Die große Kompatibilität mit zahlreichen E-Mail-Anwendungen macht es zu einem gelungenen Framework für HTML-E-Mails.

(dpe)

Kategorien
Design E-Business Technik UI/UX

Kollaboration: Design-Diskussionen direkt im Browser führen

Statt Entwürfe und fertige Layouts vor Ort beim Kunden zu präsentieren, wird immer häufiger der Weg über das Internet genutzt. Wurden Layouts früher gern per E-Mail verschickt, gibt es mittlerweile zahlreiche Tools, die das Präsentieren und Einholen von Feedback, Kollaboration ganz allgemein, vereinfachen. Neben rein grafischen Layouts und Mockups gibt es auch Dienste, die Screenshots von Websites erstellen oder direkt das Kommentieren an realen Websites erlauben. Wir zeigen dir heute vier verschiedene Werkzeuge, mit denen du auf unterschiedliche Art und Weise zum Ziel gelangst.

Kollaboration: Design-Diskussionen direkt im Browser führen

„Live Capture“ von InVision: Screenshots per Erweiterung anfertigen

Die Prototyping-Plattform InVision stellt mit „Live Capture“ eine Erweiterung für Chrome zur Verfügung, mit der du spielend einfach Screenshots von Websites anfertigst, die du verteilen und kommentieren lassen kannst.

invision-live-capture_erweiterung
Screenshot einer Website per Erweiterung erstellen

„Live Capture“ nimmt dazu nicht nur vom sichtbaren Bereich einer Seite einen Screenshot, sondern von der kompletten Seite – und das jeweils in der aktuell im Browser dargestellten Auflösung. Anschließend steht dir der Screenshot in InVision zur Verfügung und du kannst ihn teilen, um ihn in einem Team oder bei Kunden präsentieren zu können.

invision-live-capture_kommentar
Screenshot mit Kommentar versehen

„Live Capture“ erlaubt dir, einen Link zu generieren und diesen zu verschicken. Anschließend können alle, die über diesen Link verfügen und sich kostenlos bei InVision registriert haben, im Screenshot Kommentare hinterlassen. Diese werden dazu einfach an einer beliebigen Stelle im Screenshot platziert.

invision-live-capture_live
Per „LiveShare“ gemeinsam im Screenshot zeichnen

Neben der einfachen Kommentarfunktion gibt es noch die Möglichkeit des „LiveShare“. Hierbei arbeiten mehrere Benutzer gleichzeitig an einem Entwurf und kommentieren und diskutieren ihn gemeinsam. Dazu kannst du beispielsweise mit einem Stift im Layout frei zeichnen und Texte hinzufügen.

Für Mac-User gibt es ein „LiveShare“-Plug-in für Photoshop. Hiermit teilst du deine Arbeitsfläche in Photoshop mit anderen Nutzern.

Die Nutzung von InVision und somit von „Live Capture“ ist für bis zu drei Projekte kostenlos. Mehr Projekte sind für 13 bis 89 US-Dollar im Monat möglich.

Diigo: Feedback für Live-Websites einholen

Wer statt Screenshots lieber an einer „lebenden“ Website arbeitet, sollte sich Diigo einmal ansehen. Dieses Tool erlaubt es dir, direkt an einer Website Kommentare zu hinterlassen – ohne dass zuvor ein Screenshot erstellt wird. Dazu muss ebenfalls eine Browser-Erweiterung installiert werden, die es – zumindest derzeit – nur für Chrome gibt.

diigeo_erweiterung
Per Erweiterung Screenshot und Kommentare erstellen

Nach der Installation erstellst du über diese Erweiterung an einer beliebigen Stelle einer Website einen Kommentar. Hierzu wählst du auf der Website einen Punkt aus, an dem der Kommentar als Notiz hinterlegt werden soll. Alternativ kannst du einen Text auf einer Website markieren und dazu einen Kommentar hinterlassen.

Wie es sich für ein Tool dieser Art gehört, gibt es die Möglichkeit, andere Benutzer einzuladen. So kannst du Projekte für Gruppen freigeben, denen du beliebige Teilnehmer hinzufügst. Alle Teilnehmer einer Gruppe können kommentieren und andere Kommentare einsehen und darauf reagieren.

diigo_kommentar
Kommentare frei auf der Website platzieren und farblich unterscheidbar machen

Natürlich sind die Kommentare nicht öffentlich, sondern nur für bestimmte Teilnehmer sichtbar. Normale Besucher der Website sehen diese nicht.

Einen Nachteil hat das Kommentieren an einer Live-Website. Die Kommentare werden absolut platziert. Bei responsiv gestalteten Websites verschieben sich je nach Auflösung jedoch die Elemente einer Seite. Die Kommentare sind aber immer absolut positioniert und stehen daher häufig nur bei einer bestimmten Auflösung an der richtigen Stelle.

Neben einem kostenfreien Plan gibt es mehrere kostenpflichtige Pläne zwischen 7 und 59 Dollar im Jahr. Die kostenpflichtigen Pläne verzichten auf Werbung und haben zusätzliche Funktionen wie das Durchsuchen der hinterlegten Kommentare.

Marqueed: Umfangreiches Teilen und Kommentieren von Layouts

Marqueed ist nicht spezialisiert auf Websites, sondern erlaubt das Teilen und Kommentieren beliebiger grafischer Layouts. Hierbei lädst du Mockups in gängigen Dateiformaten hoch. Unterstützt werden unter anderem PDF- sowie Photoshop-Dateien. Diese werden nach dem Hochladen in „einfache“ Grafiken umgewandelt. Bei PDF-Dateien werden mehrseitige Dokumente unterstützt. Die einzelnen Seiten sind dabei als einzelne Grafiken dargestellt.

marqueed_hochladen
Layouts in gängigen Formaten hochladen oder Screenhot per URL erstellen lassen

Marqueed kann ebenso genutzt werden, um Websites zu kommentieren. Dazu wird einfach eine URL angegeben, aus der der Dienst automatisch einen Screenshot erstellt. Dieser kann dann wie andere hochgeladene Dateien behandelt werden. Außerdem erlaubt das Tool den Zugriff auf Dateien in deiner Dropbox.


Kommentare erstellen

Maqrueed läuft allerdings nur in zwei Browsern – im Chrome und im Safari. Mit anderen Browsern kannst du den Dienst nicht nutzen.

Bounce: Hochladen und Kommentieren ohne Registrierung

Ganz ähnlich wie Marqueed funktioniert der Dienst Bounce. Auch dieses Tool erlaubt dir, Grafiken hochzuladen oder Screenshots von Seiten zu erstellen. Beim Kommentieren wählst du nicht einen bestimmten Punkt aus, sondern markierst einen rechteckigen Bereich, welchen du mit einem Kommentar versiehst.

bounce_screenshot
Screenshot einer beliebigen Website erstellen

Innerhalb dieser Bereiche kannst du neben einfachem Text Rechtecke, Kreise und Pfeile platzieren.

Im Gegensatz zu den anderen hier vorgestellten Diensten funktioniert Bounce ganz ohne Registrierung. Ohne Anmeldung lädst du Dateien hoch und erstellst Screenshots. Über einen generierten Link teilst du ein Layout mit anderen. Dabei kann jeder Teilnehmer ganz einfach einen Namen angeben, mit dem er sich „ausweist“.

bounce_kommentar
Kommentarbereich definieren und mit Text und grafischen Eleneten füllen

Die Nutzung von Bounce ist kostenlos.

Fazit

Alle vorgestellten Dienste haben ihre Vor- und Nachteile. Die einen funktionieren nur mit Erweiterung oder in bestimmten Browsern. Andere setzen ihren Fokus auf automatisch generierte Screenshots oder auf das Hochladen von Layouts.

Eines haben alle Tools gemeinsam: Sie vereinfachen das Präsentieren und Kommentieren beziehungsweise Diskutieren von Entwürfen in Teams beziehungsweise Gruppen.

(dpe)

Kategorien
Design Icons & Fonts

Vergleich: Schriften-Abos (nicht nur) fürs Web

Bei digitalen Inhalten und Anwendungen werden Abomodelle immer beliebter. Ob Musik, Software oder Schriften: Statt einmal kaufen, beziehungsweise lizenzieren, werden Angebote quasi als eine Art monatliche Flatrate bereitgestellt. Bei Webschriften haben Anbieter von Anfang an auf ein solches Abomodell gesetzt – vor allem, damit Schriftdateien nicht auf fremden Servern landen. Mittlerweile weiten immer mehr Schriftanbieter ihr Abomodell auch auf klassische Desktopschriften aus. Für wen lohnen sich solche Abodienste? Und wo liegen die Unterschiede der Angebote?

Vergleich: Schriften-Abos (nicht nur) fürs Web

Der erste seiner Art: Typekit

Typekit gehört zu den ersten und größten seiner Art. Von Anfang an als Abodienst gedacht, beschränkte man sich zunächst auf Webschriften. Erst mit der Übernahme von Typekit durch Adobe und die Verzahnung mit der Creative Cloud wurden auch Desktop-Schriften ein Teil des Angebotes von Typekit.

ss
Typekit

Als Abonnent der Creative Cloud hast du automatisch Zugriff auf den Portfolio-Plan von Typekit, der normalerweise 49,99 US-Dollar im Jahr kostet. Darin enthalten sind knapp 2.500 Desktop-Schriften sowie über 5.000 Webschriften. Die Installation von Desktop-Schriften erfolgt nicht wie gewöhnlich, sondern über die Creative-Cloud-Anwendung. Schließlich sollen die Schriften nur so lange zur Verfügung stehen, wie ein Abonnement vorhanden ist.

Allerdings stehen die installierten Schriften nicht nur in Adobe-Anwendungen zur Verfügung, sondern auch in allen anderen Programmen – zum Beispiel Office-Anwendungen. Im Portfolio-Plan synchronisierst du bis zu 100 Schriften gleichzeitig.

Bei den Webschriften ist die Sache etwas komplizierter. So legst du für jede Domain ein sogenanntes Kit an. Diesem Kit fügst du alle Schriften hinzu, die du auf der Domain nutzen willst. Anschließend bindest du ein JavaScript ein und verwendest die Schrift ganz normal über die Stylesheets einer Schrift.

Der größte seiner Art: Monotype

Monotype gehört zu den größten Schriftenanbietern überhaupt. So zählt zu dem Unternehmen auch das Portal MyFonts, das Desktop- sowie Web-Schriften anbietet. Im Gegensatz zu Typekit werden sowohl klassische Schriften als auch Webfonts nicht nur als Abo angeboten. Alle Webschriften von MyFonts erhältst du als Dateien, um diese selber hosten zu können.

abovergleich_myfonts
MyFonts

Während Desktop-Schriften in der Regel nach Anzahl der Installationen auf verschiedenen Rechnern lizenziert werden, erfolgt die Lizenzierung von Webfonts meist nach geschätzten Seitenaufrufen einer Website.

Bei einigen Foundries verpflichtest du dich daher, die Seitenaufrufe automatisiert an MyFonts zu übermitteln. So wird nachgehalten, ob die vereinbarten Pageviews eingehalten werden. Viele Foundries verzichten allerdings auf diese Kontrolle.

Neben MyFonts betreibt Monotype das Portal fonts.com speziell für Webschriften. Im Basis-Plan erhältst du für 60 US-Dollar im Jahr Zugriff auf 3.000 Schriften, also etwa 500 mehr als bei Typekit. Dafür kostet der Dienst etwa 10 Dollar mehr. Du kannst den Dienst allerdings nur für zwei Webprojekte nutzen.

Wer als Webdesigner für seine Kunden die Webfonts verwaltet, sollte den Standard-Plan für 120 US-Dollar im Jahr nutzen. Hier sind dann wie bei Typekit beliebig viele Webprojekte möglich. Dafür erhält man Zugriff auf über 40.000 Schriften. Die Einbindung der Schriften ist nicht mehr auf JavaScript angewiesen. Alternativ kannst du die Schriften selbst hosten.

abovergleich_monotype-library-subscription
Einige Schriften der „Monotype Library Subscription“

Mit der „Monotype Library Subscription“ gibt es seit neustem auch für Desktop-Schriften ein Abo-Angebot. Für 119,99 Euro im Jahr gibt es bis zu 9.000 Schriften aus 2.200 Familien für den Deskop. Wie bei Typekit erfolgt die Installation der Schriften nicht direkt, sondern über eine Anwendung. Im Falle von Monotype ist das SkyFonts.

Zum Angebot des Abos gehören moderne Klassiker wie die „DIN Next“, „Avenir Nex“, „Neue Helvetica“, „Univers“ und „Gill Sans“. Der Dienst ist im Vergleich zu Typekit recht teuer. Aber wer auf diese Klassiker nicht verzichten möchte, ist mit der „Monotype Library Subscription“ gut bedient. Denn bei Typekit suchst du diese Schriften vergeblich.

Schriften-Abos: Welcher Dienst lohnt sich für wen?

Neben Typekit und den anderen vorgestellten Diensten gibt es natürlich noch eine ganze Reihe anderer Anbieter. Aber aufgrund des immer größer werdenden Marktes soll es an dieser Stelle beim Vergleich zwischen den beiden großen Anbietern bleiben. Denn bei den genannten Diensten besteht nicht die Gefahr, dass einer von beiden in absehbarer Zeit eingestellt wird. Dies war beispielsweise bei dem von Extensis betriebenen Dienst WebINK der Fall.

Grundsätzlich lässt sich sagen, dass Typekit sich für alle anbietet, die eine große Auswahl an Schriften wünschen, aber auf Klassiker verzichten können. Außerdem ist Typekit als Teil der Creative Cloud bei vielen Web- und Grafikdesignern vermutlich eh gesetzt.

Die „Monotype Library Subscription“ bietet sich für alle an, die Zugriff auf viele moderne und auch ältere Schriftklassiker haben wollen. In vielen Fällen sind gerade sehr häufig genutzte Schriften bei Typekit nicht vorhanden, so dass diese entweder doch einzeln lizenziert werden müssen oder eben per „Monotype Library Subscription“ hinzugefügt werden können.

Häufig dürfte das Lizenzieren einzelner Schriften günstiger sein als das Vorhalten eines großen Angebotes per Abo. Daher sollte man sich gut überlegen, ob man bis zu 120 Euro im Jahr für ein Abo zahlen möchte, wenn man für 20 bis 60 Euro pro Schrift diese dauerhaft zur Verfügung stehen hat. Außerdem verschwinden nach Kündigung des Abos alle Schriften wieder vom Rechner.

(dpe)

Kategorien
CMS Design Webdesign

Surreal CMS macht Websites flott

Content-Management-Systeme sind aus der modernen Webentwicklung nicht mehr wegzudenken. Dabei sind Installation und Konfiguration je nach System mal mehr, mal weniger umfangreich und zeitintensiv. Gerade bei kleinen Projekten steht der Aufwand häufig in keinem Verhältnis zum Nutzen, weshalb dann am Ende doch eine statische Website entsteht. Mit Surreal CMS fügst du jeder statischen Website nachträglich (fast) alle Funktionen eines Content-Management-Systems hinzu – ohne großen Aufwand, dafür einfach zu bedienen.

surreal-cms

Per FTP zum CMS-Glück

Das Prinzip von Surreal CMS ist denkbar einfach: Nachdem du dich bei dem Dienst angemeldet hast, fügst du eine bestehende statische Website hinzu, indem du die FTP-Daten eingibst und das Verzeichnis auswählst, in dem die Dateien für die Website liegen.

surreal-cms_connection
Eingabe der FTP-Zugangsdaten

Neben dem normalen FTP-Protokoll werden auch SFTP und FTPS unterstützt. Zusätzlich ist auch der Zugriff auf Amazon S3 möglich. Das ist nützlich für alle, die Websites über Amazons Cloud-Speicher hosten. Anschließend hast du über Surreal CMS Zugriff auf alle Dateien. Über eine Liste wählst du aus, welche der HTML-Dokumente du bearbeitbar machen möchtest.

Editierbare Bereiche definieren

Um zu verhindern, dass sämtliche Inhalte eines HTML-Dokumentes verändert werden können, musst du editierbare Bereiche festlegen. Dazu wird allen Elementen, die editierbar sein sollen, die Klasse „editable“ hinzugefügt. Im Rich-Text-Editor von Surreal CMS hast du anschließend die Möglichkeit, diese Bereiche zu bearbeiten. Machst du ein Container-Element wie „<article>“ editierbar, fügst du beispielsweise Überschriften, Listen und Fließtexte sowie Bilder hinzu.

surreal-cms_site
Verwaltung deiner Website in Surreal CMS

Du kannst aber auch Blockelemente wie „<h1>“ oder „<p>“ editierbar machen. In diesem Fall kannst du lediglich den Inhalt dieser Elemente bearbeiten, aber keine zusätzlichen Blockelemente hinzufügen.

In jedem Fall wird die Formatierung der Inhalte aus deiner Website übernommen. Überschriften und andere Inhalte werden also im Editor so angezeigt, wie sie auch auf der Website dargestellt werden.

Mit der zusätzlichen Klasse „uneditable“ definierst du innerhalb eines editierbaren Bereiches jene Elemente, die nicht bearbeitbar sein sollen. Außerdem hast du mit der Klasse „editable-text“ die Möglichkeit, das Bearbeiten von Inhalten auf reinen Text zu beschränken. Statt des Rich-Text-Editors wird dir dann ein einfaches Eingabefeld dargestellt.

Inhalte bearbeiten, Medien hinzufügen

Wie bereits erwähnt, steht ein umfangreicher Rich-Text-Editor, mit dem du Texte ähnlich wie in anderen Content-Management-Systemen bearbeitest, zur Verfügung. Es werden Überschriften, Listen, Tabellen sowie Fett- und Kursiv-Formatierungen unterstützt.

surreal-cms_rte
Rich-Text-Editor

Natürlich kannst du auch Links und Bilder hinzufügen. Surreal CMS stellt eine Dateiverwaltung zur Verfügung, über die du Bilder, Dokumente und andere Medien wie Videos hochlädst und in Seiten einbindest. Dabei kannst du Standardordner festlegen, in denen zum Beispiel automatisch alle Bilder abgelegt werden.

Um Bilder in eine Seite einzubinden, kannst du du diese frei skalieren. Surreal CMS wird dann entsprechend skalierte Dateien anlegen. Über die Klasse „editable-gallery“ definierst du einen Bereich für eine Bildergalerie. Hier fügst du beliebig viele Bilder hinzu, die per Klick ein Bild in der Großansicht öffnen. Mit zusätzlichen Data-Attributen legst du die Größe für die Thumbnails fest.

surreal-cms_image
Einfaches Hochladen und Einbinden von Bildern

Das Ganze funktioniert auch in Kombination mit populären JavaScript-Galerien wie Lightbox oder Fancybox.

Auch HTML5-Videos werden unterstützt. Hierbei wählst du bis zu zwei verschiedene Formate sowie ein Vorschaubild aus. Um die Auszeichnung des entsprechendes Quelltextes kümmert sich Surreal CMS.

Templates erstellen

Wie es sich für ein ordentliches Content-Management-System gehört, ermöglicht Surreal CMS nicht nur das Bearbeiten von bestehenden Seiten, sondern auch das Anlegen neuer Seiten. Um bestehende Layouts auf neue Seiten zu übernehmen, kannst du Templates erstellen.

surreal-cms_templates
Template-Erstellung

Hierbei handelt es sich um einfache HTML-Dokumente, in denen das Layout der Seite mit editierbaren Bereichen definiert sind. Du kannst mehrere Templates hinterlegen und bei jeder neuen Seite aus einer Liste der vorhandenen Templates eines auswählen.

Werden Templates nachträglich verändert, wirkt sich diese Veränderung jedoch nicht auf Seiten aus, in denen diese Templates bereits angewendet wurden. Denn Surreal CMS generiert aus dem Template ein statisches HTML-Dokument, welches anschließend losgelöst vom Template existiert.

Dateien inkludieren

Anders als andere Content-Management-Systeme erstellt Surreal CMS kein automatisches Menü. Aber wenn dein Server beziehungsweise Provider PHP unterstützt, kannst du feste Inhalte wie Navigation, Header und Footer per PHP oder SSI einbinden.

Falls deine HTML-Dateien durch den PHP-Parser laufen – per „.htaccess“ einstellbar –, bindest du per „include()“ ganz einfach PHP-Dateien ein. Das vereinfacht die Handhabung von Templates, da du in diesen nur die PHP-Inkludierungen definieren musst und das Design auf allen Seiten immer identisch ist – auch bei späterer Veränderung der inkludierten Dateien.

Benutzer- und Rechteverwaltung

So einfach wie das Bearbeiten von Inhalten ist das Anlegen von Benutzern und die Vergabe von Rechten. Um einen Nutzer anzulegen, vergibst du einen Namen und hinterlegst eine E-Mail-Adresse. Anschließend wählst du eine Website aus und legst fest, auf welche Seiten der Nutzer Zugriff bekommen soll.

surreal-cms_user
Benutzer- und Rechteverwaltung

Zusätzlich kannst du für jeden Nutzer individuell festlegen, welche Rechte er bekommen soll. So wählst du aus einer Liste, ob ein Benutzer Seiten anlegen, bearbeiten und löschen darf und ob Seiten von ihm veröffentlicht werden sollen.

Auch das Hochladen von Dateien und Einfügen von eigenem Quelltext kannst du erlauben beziehungsweise verbieten. Wenn du einen Benutzer angelegt und alle Rechte vergeben hast, schickt Surreal CMS ihm automatisch eine Willkommens-Mail mit seinen Zugangsdaten.

Den Inhalt der Willkommens-Mail legst du über eine Vorlage selbst fest. So kannst du beispielsweise deinen Kunden eine individuelle E-Mail mit den Zugangsdaten zukommen lassen.

surreal-cms_revisions
Einfaches Wiederherstellen dank Revisionen

Serverseitig werden von Surreal CMS Revisionen von veränderten Inhalten angelegt. Auf diese Weise stellst du ursprüngliche Inhalte schnell wieder her.

Eigenes Branding und Kosten

Surreal CMS ist vor allem für alle Webdesigner und -entwickler gedacht, die ihren Kunden ein einfaches CMS anbieten wollen. Daher kannst du das Aussehen des Backends auch individualisieren. So ersetzt du auf Wunsch das Logo durch dein eigenes und passt auch die Farbe des Backends an. Sogar eine eigene Hilfe-URL kannst du hinterlegen.

surreal-cms_branding
Individuelle Branding möglich

Da Surreal CMS über die Domain „edit-content.com“ läuft, deutet dann nichts mehr darauf hin, dass hier ein Fremdsystem verwendet wird. Hier kannst du also im Sinne der Kundenbindung alles auf dich beziehungsweise dein Unternehmen zuschneiden.

Um Surreal CMS zu testen, gibt es einen zweiwöchigen Trial-Zugang. Anschließend zahlst du 10 US-Dollar im Monat für bis zu fünf Websites, die du verwalten kannst. Insgesamt gibt es sieben Tarife. Für 100 Dollar im Monat sind dann beliebig viele Webprojekte möglich.

Fazit

Surreal CMS verbindet die Vorteile klassischer Content-Management-Systeme mit denen von statischen Websites. Gestalterisch und technisch hast du sämtliche Freiheiten. Du bist nicht an irgendwelche Einschränkungen gebunden, die das ein oder andere CMS mit sich bringt und musst dich ebenfalls nicht mit der Template-Erstellung in WordPress oder der Typoscript-Konfiguration von TYPO3 herumplagen.

Aber die beiden größten Vorteile von Surreal CMS sind zum einen, dass du im Handumdrehen einer statischen Website ein Content-Management-System unterbaust. Gerade bei bestehende Seiten, die beispielsweise auf Kundenwunsch bearbeitbar gemacht werden sollen, geht das schnell und unkompliziert.

Der zweite Vorteil besteht darin, dass die Website auch ohne Surreal CMS läuft. Entscheidest du dich irgendwann, auf Surreal CMS zu verzichten, läuft deine Website nach wir vor weiter. Bei anderen Content-Management-System oder etwa Homepage-Baukästen funktioniert das nicht.

Apropos Homepage-Baukasten: Surreal CMS richtet sich nicht an den ambitionierten Laien, der kein Budget für die Fremdvergabe seines Website-Designs hat. Surreal CMS ist klar an Designer gerichtet, die die Seiten ihrer Kunden teilweise dynamisieren wollen oder müssen.

(dpe)