Kategorien
Design Programmierung Webdesign

Ganz frisch: Die neuesten Tools für Designer und Entwickler

Klasse Tools und Onlinedienste erleichtern die Arbeit von Designern und Entwicklern ungemein. Viele Arbeitsabläufe können einfacher und effektiver gestaltet werden. Diese kleine Sammlung regt die Kreativität an und bietet Lösungen für so manches Problem.

Neue Tools für Designer und Entwickler

Hier also meine Liste der neuesten und interessantesten Tools, die ich für dich gefunden habe:

1 – Authentiq

Authentiq
Moderner Benutzerzugang mit Mehr-Faktor-Authentifizierung.

Authentiq bietet eine Multi-Faktor-Authentifizierung, die keinerlei Passwörter für das Login auf Websites benötigt. AuthentiqConnect ermöglicht es deinen Benutzern zu entscheiden, wann sie ihre Sicherheit erhöhen, ob sie einen zweiten Faktor verwenden wollen oder passwortlos unterwegs sind. Der Dienst ist kompatibel mit OAuth 2.0 und OpenID Connect. Bis 500 aktive User ist der Dienst kostenlos nutzbar.

[Gruener-Button url=“https://www.authentiq.com/“ text=“Website besuchen »“]

2 – Better Font Finder

Better Font Finder

Dieses interessante Tool ermöglicht dir ähnlich aussehende Google Fonts zu gruppieren und mit Hilfe verschiedener Filter den für dein Projekt optimalen Font zu finden. Durch die Gruppierung der Fonts mit ähnlichen Merkmalen wirst du sehr viel schneller zum gewünschten Ergebnis gelangen können.

[Gruener-Button url=“https://jmattthew.github.io/better-font-finder/better-font-finder.html“ text=“Website besuchen »“]

3 – Vectr

Vectr

Mit Vectr kannst du ganz einfach und intuitiv Vectorgrafiken erstellen. Du kannst es entweder online nutzen, oder auf deinem Rechner installieren. Du bekommst die App für Mac, Windows, Linux und Chromebook. Vectr ist kostenlos zu nutzen. Auch an ein WordPress-Plugin wurde gedacht.

[Gruener-Button url=“https://vectr.com/“ text=“Website besuchen »“]

Vectr – Embedded Graphics Editor
Vectr – Embedded Graphics Editor
Entwickler: Germán Lena
Preis: Kostenlos

4 – Data Gif Maker

Data Gif Maker

Googles neues Projekt ermöglicht es dir, ein einfaches Gif zu erstellen, das zwei Elemente vergleicht. Du musst nur ein einfaches Formular ausfüllen, Datenpunkte hinzufügen und ein Farbschema auswählen. Du bekommst ein visuelles Datenelement zum Einbetten in Websites.

[Gruener-Button url=“https://datagifmaker.withgoogle.com/edit“ text=“Website besuchen »“]

5 – Colorion Gradient Buttons

Gradient-Buttons

Falls du die normalen Flatbuttons nicht mehr sehen kannst, bekommst du hier eine schicke Alternative mit Gradient-Effekt in allen denkbaren Farben.

[Gruener-Button url=“http://gradientbuttons.colorion.co/“ text=“Website besuchen »“]

6 – Buttercup

Buttercup

Buttercup ist ein freier Open-Source-Passwort-Manager für Mac, Windows und Linux. Ein Browser Add-on für Firefox ist ebenfalls erhältlich.

[Gruener-Button url=“https://buttercup.pw/“ text=“Website besuchen »“]

7 – Word Counter

Word Counter

Word Counter berechnet die Anzahl der Zeichen, Wörter oder Absätze in Echtzeit. Gib einfach einen Text in die Box ein oder kopiere Texte von anderen Seiten in die Box. Du bekommst die Statistiken sofort in Echtzeit zu sehen.

Das Tool kann ebenfalls die benötigte Zeichenlänge für die Sozialen Netzwerke wie Twitter und Facebook ausgeben. Auch möglich ist die Anzeige der korrekten Zeichenlänge für die Google Meta-Beschreibung.

[Gruener-Button url=“https://wordcounter.io/“ text=“Website besuchen »“]

8 – Trendy CSS Text Shadows

CSS Text-Shadows

Immer mehr Webprojekte verabschieden sich vom Flat-Design und möchten coolere Effekte einsetzen. Da bieten sich die wirklich interessanten Texteffekte von Mixfont geradezu an. Das CSS eines jeden Effekts kann kostenlos heruntergeladen werden.

[Gruener-Button url=“https://www.mixfont.com/shadows“ text=“Website besuchen »“]

9 – docsify

docsify

docsify ist ein smartes kleines Tool, dass eine Dokumentations-Website für Github-Projekte erstellen kann. Es lädt deine Markdowndateien, löst sie auf und zeigt sie als Website an.

[Gruener-Button url=“https://docsify.js.org/#/“ text=“Website besuchen »“]

10 – Free Minimalistic Phone Mockups

Free Minimalistic Phone Mockup

Das kostenlose Free Minimalistic Phone Mockup umfasst Sketch- und Photoshop-Dateien und kommt mit einer sehr hohen Auflösung von 6962 x 4350 Pixel daher. Die Hintergrund- und Telefonfarben lassen sich anpassen.

[Gruener-Button url=“https://lstore.graphics/freebies/minimalistic_phone/?utm_source=pr“ text=“Website besuchen »“]

11 – Emojify

Emojify

Emojify ist ein Link Shortener der etwas anderen Art. Falls du keine Lust mehr auf die Standard URLs verspüren solltest, dann kannst du deine gekürzten Links auch mit schicken Emojis anzeigen lassen.

[Gruener-Button url=“http://emojify.tk/“ text=“Website besuchen »“]

12 – Omg-img

omg-img

Du kannst jedes der angebotenen Icons direkt in deinen HTML-Code schreiben und das Tool findet dann das richtige Icon und passt die Farben und Größen an. Die kostenlose Nutzung erfordert einen Backlink. Du kannst das Tool entweder online nutzen oder dir die App für Mac oder Windows downloaden.

[Gruener-Button url=“http://img.icons8.com/“ text=“Website besuchen »“]

Fazit

Die vorgestellten Tools und Dienste sollten für viele Designer und Entwickler interessant sein. Einige Tools bieten einen erheblichen Mehrwert an, ich denke da an Authentic, Better Font Finder und Vectr. Ich werde mir einiges genauer ansehen.

Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
Webdesign

Taffy: Schmales CSS-Framework auf der Basis von CSS Flexbox

Die Syntax der CSS Flexbox ist nicht eben so eingängig wie Micky Krauses Song über zehn nackte Friseusen. Wer nicht tagtäglich damit umgeht, wünscht sich für den Bedarfsfall was einfacheres. Das kleine CSS-Framework Taffy ist dieses Einfachere.

Kategorien
Design HTML/CSS Webdesign

Tool-Tipp: Farbverläufe mit CSS für Hintergründe und Buttons

Farbverläufe machen das bisweilen trist wirkende Flat Design interessanter. Es ist daher stets nützlich, ein paar entsprechende Optionen zur Hand zu haben.

Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
Design Webdesign

Besser platzieren und transformieren dank verschachtelter SVGs

Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert.

So werden Formen in SVG-Grafiken platziert

Was die Positionierung von SVG-Elementen wie „<rect>“ oder „<circle>“ betrifft, gibt es schon bezüglich der Syntax einen großen Unterschied zu HTML. Denn während HTML-Elemente per CSS-Eigenschaften „left“ und „top“ platziert werden, lassen sich SVG-Elemente nur per „x“- und „y“-Attribute (bei Kreisen sind es die „cx“- und „cy“-Attribute) platzieren.

Während Farben und Konturen wie bei HTML per CSS gestaltet werden können, ist eine Positionierung per CSS im SVG-Format gar nicht möglich.

Der zweite Unterschied ist der, dass SVG-Formen grundsätzlich absolut innerhalb eines „<svg>“-Elementes platziert werden. Auch wenn es mit dem „<g>“-Element eine Möglichkeit gibt, Elemente zu gruppieren, so lässt sich dem „<g>“-Element selbst keine Position zuweisen.

Gerade bei komplexen Grafiken stellt dies schon mal ein Problem dar. Denn will man die Position einer Figur ändern, die möglicherweise aus dutzenden Einzelementen besteht, müssen die „x“- und „y“-Attribute sowie die anderen positionsbestimmenden Attribute wie „cx“, „cy“ und „d“ beim „<path>“-Element verändert werden.

Bei statischen Grafiken ist das Problem noch relativ einfach lösbar, indem man die Grafik in einem Zeichenprogramm wie Illustrator öffnet. Dort kannst du dann alles anpassen und wieder als SVG-Datei speichern.

Bei dynamischen Veränderungen, die zum Beispiel per JavaScript oder PHP berechnet werden, muss jedes einzelne neu zu platzierende Element einer Figur verändert werden. Und gerade beim „<path>“-Element mit seinem komplexen „d“-Attribut ist das durchaus eine Herausforderung.

SVGs verschachteln und doch relativ platzieren

Es gibt aber einen Weg, wie man SVG-Formen doch relativ innerhalb einer SVG-Grafik platzieren kann. So erlaubt das SVG-Format nämlich das Verschachteln von SVG-Grafiken.

Innerhalb eines „<svg>“-Elementes darf nämlich ein weiteres „<svg>“-Element liegen. Zwar können die verschachtelten „<svg>“-Elemente selbst auch nur absolut platziert werden. Aber innerhalb einer Verschachtelung ist die absolute Platzierung auf das jeweilige Eltern-„<svg>“-Element begrenzt.

<svg width="750" height="500" style="background: gray">
  <svg x="200" y="200">
    <circle cx="50" cy="50" r="50" style="fill: red" />
  </svg>
  <circle cx="50" cy="50" r="50" style="fill: yellow" />
</svg>

Im Beispiel wird innerhalb und außerhalb einer verschachtelten SVG-Grafik ein Kreis gezeichnet. Die Kreise sind so platziert, dass sie jeweils an der linken oberen Ecke stehen. Da das verschachtelte „<svg>“-Element 200 Pixel vom linken und oberen Rand entfernt ist, wird der rote Kreis auch entsprechend 200 Pixel von beiden Rändern entfernt platziert.

Änderst du die „x“- und „y“-Attribute des zweiten „<svg>“-Elementes, wird auch die Platzierung aller darin enthaltenden Formen verändert.

Anders als das „<g>“-Element zum Gruppieren hast du mit verschachtelten „<svg>“-Elementen also die Möglichkeit, die Position mehrerer Formen gleichzeitig zu verändern.

Elemente transformieren

Die CSS-Eigenschaft „transform“ skaliert und dreht nicht nur HTML-Elemente, sondern auch SVG-Formen. Allerdings wird „transform“ im SVG-Kontext anders interpretiert als bei HTML.

Vor allem beim Drehen, also der „rotate()“-Funktion, macht sich das bemerkbar. Denn von HTML kennt man es, dass „rotate()“ dafür sorgt, dass Elemente sich um den eigenen Mittelpunkt drehen.

Im SVG-Format werden Elemente jedoch immer um die linke, obere Ecke der SVG-Zeichenfläche gedreht. Das macht es natürlich schwierig, Drehungen zu realisieren. Will man beispielsweise einen Text hochkant stellen, reicht es nicht, diesen um 90 Grad zu drehen. Auch die „x“- und „y“-Attribute müssen angepasst werden.

Denn ein Element, welches 200 Pixel von links und oben platziert und um 90 Grad gegen den Uhrzeigersinn gedreht wird, verschwindet gegebenenfalls nach oben aus der Zeichenfläche.

Allerdings kannst du dir auch hier verschachtelte SVG-Elemente zur Hilfe nehmen. Zwar erreichst du es nicht, dass Elemente sich um den eigenen Mittelpunkt drehen. Aber wenn du die zu drehenden Elemente links oben des verschachtelten „<svg>“-Elementes platzierst, ist die Anpassung der Position relativ einfach.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100">
    <rect x="0" y="0" width="142" height="142" style="fill: yellow" />
    <rect x="50" y="-50" width="100" height="100" style="fill: black; transform: rotate(45deg)" />
  </svg>
</svg>

Im Beispiel werden innerhalb eines verschachtelten „<svg>“-Elementes zwei Rechtecke platziert. Während das erste ohne „transform“-Eigenschaft auskommt, wird das zweite Element dank dieser Eigenschaft und der „rotate()“-Funktion um 45 Grad gedreht.

Damit das zweite Rechteck dennoch mit der linken und oberen Position des ersten Rechtecks beginnt, müssen die „x“- und „y“-Attribute geändert werden. Ohne die Anpassung würde das zweite Rechteck um die linke obere Ecke des verschachtelten „<svg>“-Elementes nach links gedreht und zur Hälfte aus der Zeichenfläche herausragen.

Erschwerend kommt hinzu, dass die Positionierung abhängig ist von der Rotation. Denn das Koordinatensystem der gedrehten Form wird ebenfalls gedreht. Der Wert für „x“ basiert also nicht mehr auf der Horizontalen, sondern auf einer um 45 Grad gedrehten Achse.

Weiterer Vorteil verschachtelter SVGs

Es gibt noch einen weiteren Vorteil – oder zumindest etwas, was man beachten sollte. Über ein „<svg>“-Element lassen sich per CSS auch Farbe und Kontur zuweisen. Ist den Formen innerhalb dieser Zeichenfläche selbst keine Farbe oder Kontur zugewiesen, übernehmen sie alle das Aussehen des SVG-Elternelementes.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100" style="fill: yellow; stroke: red">
    <rect x="0" y="0" width="142" height="142" />
    <rect x="100" y="-50" width="100" height="100" style="transform: rotate(45deg)" />
 </svg>
</svg>

So ist es also auch unkompliziert möglich, allen Elementen eines SVG-Zeichenfläche ein einheitliches Aussehen zu verpassen.

Kategorien
Design Design-News E-Business Freelance Technik Webdesign

Automatisierung: Machen künftig Roboter den Job des Webdesigners?

Da hatten wir gerade kollektiv aufgeatmet und festgestellt, dass Webdesigner nicht aussterben werden, schon kommt eine andere Art von Bedrohung auf den Plan. Was passiert, wenn Siri den Satz „Hey Siri, bau mir eine Website” tatsächlich versteht und sinnvoll umsetzt?

Kategorien
JavaScript & jQuery Programmierung Webdesign

Framework jQuery: die Vorteile und Nachteile

Frameworks wie jQuery gehören zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Das Framework ermöglicht es, schnell und unkompliziert auf HTML-Elemente zuzugreifen und diese zu manipulieren oder per CSS zu gestalten. Ich selbst bin kein großer Freund von solchen Frameworks und versuche, sie – wo immer es geht – zu vermeiden. Das funktioniert nicht immer, ist aber häufig problemlos machbar.

jQuery und Co. und der große Ballast

Gerade jQuery hat sich in den letzten Jahren zu einer Art Schweizer Taschenmesser für JavaScript entwickelt. Das Frameworks bietet unzählige Methoden, Eigenschaften und Ereignisse, von denen die Meisten wohl nur ein Bruchteil benötigen.

Auch wenn jQuery in der aktuellen komprimierten Fassung auf gerade einmal 85 Kilobyte kommt, bliebe ein Großteil des Frameworks in meinen Projekten ungenutzt. Man kann es kleinlich nennen, dass mir 85 Kilobyte solch Kopfzerbrechen bereiten. Aber als Webentwickler ist mir ein schlanker Code, der nur das beinhaltet, was auch tatsächlich gebraucht wird, wichtig.

Jetzt ist jQuery mittlerweile zu einer Art Standard in der Webentwicklung geworden. Daher sind viele andere Frameworks mittlerweile als Plugins für jQuery entwickelt. Will ich diese nutzen, muss ich auch jQuery nutzen. Hier zeigt sich im besonderen Maße, was solche Frameworks für Nachteile mit sich bringen.

Denn letztlich benötige ich jQuery dann nur, um das Plugin nutzen zu können. Da sind mir 85 Kilobyte dann in der Tat zu viel.

Doppelt gemoppelt: Was jQuery kann, kann JavaScript oft auch

Mit der Einführung von HTML5 hat auch JavaScript einen großen Sprung gemacht. Viele Funktionen, die bislang nur per jQuery möglich waren, sind nun auch ebenso einfach als native JavaScript-Methoden vorhanden.

Das gilt zum Beispiel für das Hinzufügen und Entfernen von JavaScript-Klassen. Mit der „classList“-API kannst du dies ähnlich wie in jQuery realisieren.

Eine der wichtigsten Funktionen in jQuery ist die Möglichkeit, per „$()“ auf beliebige Elemente zuzugreifen – und zwar in Anlehnung an CSS-Selektoren. Selbst dieses Alleinstellungsmerkmal von jQuery ist mittlerweile mit der Methode „querySelector()“ in JavaScript aufgegriffen worden.

document.querySelector("ol li").classList.add("new");

Im Beispiel wird allen „<li>“-Elementen, die Kinder eines „<ol>“-Elementes sind, die Klasse „new“ zugewiesen. In jQuery ist ein entsprechender Aufruf kaum kürzer – vor allem aber nicht weniger kompliziert.

$("ol li").addClass("new");

In vielen Fällen benötige ich jQuery also gar nicht, sondern kann mit JavaScript auf ähnlich einfachem Wege arbeiten.

Performance vs. Einfachheit

jQuery und seine weniger bekannten Freunde machen es einem in vielen Fällen sehr viel einfacher, mit JavaScript zu arbeiten. Aber nicht immer ist der einfach Weg auch der Beste – gerade wenn es um die Performance geht.

Denn sowohl die jQuery-Methode „$()“ als auch die JavaScript-Methode „querySelector()“ schneiden in Sachen Performance schlechter ab als die Methoden „getElementsByTagName()“ oder „getElementsByID()“. Denn bei „$()“ und „querySelector()“ wird zunächst der komplette DOM-Baum eines Dokumentes nach entsprechenden zutreffenden Elementen durchsucht.

Die beiden Methoden „getElementsByTagName()“ oder „getElementsByID()“ kommen deutlich schneller ans Ziel. Natürlich sind die letztgenannten Methoden für Entwickler zuweilen mit mehr Aufwand verbunden. Auch hier mag der geringe Unterschied bei der Performance vernachlässigbar sein. Man sollte sich dessen jedoch bewusst sein.

Vorteil: einheitliche Browser-Kompatibilität

Jetzt will ich natürlich auch nicht so tun, als sei jQuery durch und durch überflüssig. Denn es hat ja seinen Grund, warum es immer noch sehr erfolgreich und beliebt ist. Ein Vorteil ist natürlich die einfache Anwendung.

Darüber hinaus haben solche Frameworks natürlich den Vorteil, dass sie eine breite Browser-Kompatibilität mit sich bringen. Während ich bei nativen Methoden immer schauen muss, welcher Browser ab welcher Version sie unterstützt, macht jQuery mir das einfacher.

Denn für jede jQuery-Version weiß ich, welche Browser und Versionen unterstützt werden. Gerade wer für ältere Versionen des Internet Explorers entwickelt, hat mit jQuery in der aktuellen Version die Sicherheit, dass dieser ab Version 9 unterstützt wird.

Und wer ältere Browser noch unterstützen möchte, kann auf ältere Versionen von jQuery zurückgreifen. Das erleichtert die Entwicklung von Websites, da man schon im Vorfeld weiß, welche Browser denn mit an Bord sind.

Frameworks fürs Spezielle

Jetzt bin ich also jemand, der – wenn immer es möglich und sinnvoll ist – auf Frameworks verzichtet. Möglich ist es eigentlich immer. Denn grundsätzlich kann man ja alles selbst in JavaScript programmieren. Nur sinnvoll ist es natürlich nicht immer.

Es gibt natürlich Situationen, in denen der Aufwand, eine komplexe JavaScript-Programmierung selbst zu entwickeln, in keiner Relation zum Ergebnis steht. Wer mit JavaScript zum Beispiel 3D-Animationen erstellen möchte, kann sich natürlich selbst sein eigenes 3D-Framework bauen.

Hier ist es hingegen mehr als sinnvoll, auf ein stabiles und möglichst leichtes Framework zurückzugreifen. In solchen Fällen ist es mir aber immer wichtig, dass dieses Framework nicht auf andere Frameworks wie jQuery aufbaut, sondern unabhängig verwendet werden kann.

Fazit

Natürlich ist die Frage, ob man auf Frameworks setzt oder nicht, durchaus eine ideologische. Denn der Gewinn an Schnelligkeit ist in vielen Fällen marginal. Aber man sollte als Entwickler nicht aus bloßer Bequemlichkeit auf jQuery und Co. zurückgreifen.

Denn natives JavaScript kann häufig all das, was jQuery kann, selbst auch abdecken. Gerade wer für zeitgemäße Browser entwickelt und die Abwärtskompatibilität eh in Grenzen hält, kommt gut ohne dieses Framework aus.

Kategorien
Webdesign

Präsentieren: Klassisch vor Ort beim Kunden oder per Web?

Früher war klar: Präsentationen finden vor Ort beim Kunden oder in den eigenen Büroräumen statt. Während meines Studiums habe ich noch gelernt, wie man ausgedruckte Entwürfe hochwertig auf Pappen klebt, um sie während der Präsentation zeigen zu können. Selbst Weblayouts wurden ausgedruckt und auf diese Weise präsentiert. Die Art und Weise, wie man heutzutage präsentiert beziehungsweise präsentieren kann, hat sich geändert. Mittlerweile kann eine Präsentation dank des Internets auch räumlich und zeitlich getrennt vom Kunden stattfinden.

Präsentation vor Ort: Aufwändig und zeitintensiv

Ein Weblayout auf einer klassischen Präsentationspappe vorzustellen, wird heute kaum einer mehr machen. Ein Beamer und eine Leinwand müssen schon her, um eine Website vor Kunden – oft sind es ja mehr als nur eine Person –, vorzustellen.

Eine solche Präsentation ist natürlich mit einem gewissen Aufwand verbunden. Es muss ein Termin gefunden werden, an dem alle Teilnehmer können. Technik muss vorbereitet werden und letztendlich nimmt die Präsentation selbst ja auch Zeit in Anspruch.

Da ist es natürlich verlockend, eine Präsentation einfach als PDF-Datei oder mittels Link zum Website-Prototypen per E-Mail zu verschicken. So kann der Kunde in aller Ruhe den Entwurf anschauen und sich etwaige Kommentare beziehungsweise Erläuterungen zum Entwurf durchlesen.

Vor allem jene, die sich nicht als große Redner und Überzeuger sehen, mögen diese Form der Präsentation bevorzugen. Und das nicht nur, weil es zeitsparend ist und möglicherweise weniger Aufwand bedeutet. Man umgeht damit auch die vermeintliche Gefahr, eine schlechte „Perfomance“ abzugeben.

Den direkten Kontakt nicht unterschätzen

Doch eine Präsentation per Internet – sei es eine E-Mail mit PDF-Anhang oder einfach mit einem Link – birgt große Risiken. Während man als Gestalter oder Entwickler auf die Rückmeldung des Kunden wartet, hat man keinerlei Einfluss darauf, wie der Entwurf aufgenommen wird.

Auf Kritik und offene Fragen kann nicht direkt reagiert werden. Häufig wird ein Entwurf an Kollegen weitergegeben mit der Bitte, seine Eindrücke dazu zu schildern. Nicht selten werden sogar Familienmitglieder und Freunde „beauftragt“, sich den Entwurf anzuschauen. Am Ende haben sich möglicherweise ein Dutzend Personen Gedanken zu einem Entwurf gemacht. In vielen Fällen fällt das Fazit dann eher negativ aus.

Denn während Designer und Entwickler im Sinne von Usabilty, der Zielgruppe und anderen objektiven Gesichtspunkten gestalten, entscheiden Kunden – und alle anderen, die den Entwurf gesehen haben – nach persönlichen „gefällt mir“ oder „gefällt mir nicht“-Kriterien.

Präsentierst du hingegen vor Ort, kannst du direkt auf Kritik und Fragen eingehen. Unklarheiten werden schnell aus dem Weg geräumt oder entstehen erst gar nicht. Auch auf Änderungsvorschläge kannst du direkt reagieren.

Gerade Änderungs- und Verbesserungsvorschläge seitens des Kunden sind häufig von heikler Natur. Nicht jeder Vorschlag ist im Sinne des Kunden. Während des direkten Gesprächs lässt sich ein solcher Vorschlag einfacher ablehnen und entsprechend begründen.

Auch Präsentationsmuffel sollten vor Ort präsentieren

Auch wenn es einfach erscheint auf eine Vor-Ort-Präsentation zu verzichten, sollten auch Präsentationsmuffel hier in den scheinbar sauren Apfel beißen. Denn auch mit den besten Ideen muss man oftmals erst Leute überzeugen. Und dies geht am Besten persönlich und direkt. Dazu musst du kein rhetorischer Profi sein. Wer von seiner Arbeit überzeugt ist, wird das auch beim Kunden zeigen können.

Karten mit Stichpunkten oder eine kleine Powerpoint-Präsentation helfen dabei, während eines Vortrags den roten Faden nicht zu verlieren.

Wann eine Präsentation per E-Mail sinnvoll ist

Auch wenn eine Präsentation vor Ort in vielen Fällen mehr als sinnvoll und wichtig ist, so gibt es natürlich auch immer zahlreiche Anlässe, wo nichts gegen eine Präsentation per E-Mail spricht. Ist die Gestaltung und Umsetzung bereits ausgiebig besprochen oder sogar festgelegt, ist die Gefahr gering, dass es grundsätzliche Kritik gibt, auf die man reagieren müsste.

Hier spricht nichts dagegen, Zwischenstände oder auch ein fertiges Projekt mehr oder weniger unkommentiert, an den Kunden zu schicken. Auch bei kleinen Projekten, bei denen der Aufwand einer Vor-Ort-Präsentation nicht in einem angemessenen Verhältnis zum Budget steht, spricht nicht grundsätzlich etwas dagegen.

In jedem Fall sollte man bei einer E-Mail-Präsentation nachhaken, ob es Fragen oder Unklarheiten gibt, um schnell darauf reagieren zu können.

Kombination aus Präsentation vor Ort und per Internet

Gerade bei großen Projekten ist es häufig mit einer Präsentation nicht getan. Zwischen der Vorstellung von Layout und Konzept und der abschließenden Präsentation des fertigen Projektes ist es sinnvoll, auch Zwischenschritte vorzustellen und sich die Freigabe einzuholen.

Hier ist es nicht erforderlich, jedes Mal eine Präsentation vor Ort zu veranstalten. Für die Klärung vieler Einzelheiten, die gerade bei großen Projekten anstehen, bietet es sich an, auf Tools zurückzugreifen, die dir den Workflow bei solchen Projekten erleichtern.

Webanwendungen wie „Live Capture“ von InVision und Diigo ermöglichen es dir, Entwürfe hochzuladen und Feedback einzuholen. Dabei ist es möglich, innerhalb der Entwürfe zu zeichnen und Kommentare direkt im Entwurf abzusetzen.

Selbst in größeren Teams lassen sich Detailfragen klären und etwaige Design- und Konzeptfehler ausfindig machen. Und das geht dank dieser Tools sehr viel schneller und unkomplizierter , als wenn du per E-Mail oder Telefon versuchst, all diese Aspekte zu klären.

Fazit

Grundsätzlich gilt, dass eine persönlichen Präsentation nur in wenigen Ausnahmefällen eine Präsentation per E-Mail ersetzen kann. Vielmehr sollten digitale Formen der Präsentation beziehungsweise der Zusammenarbeit ergänzend hinzugezogen werden, um ein Projekt zu seinem erfolgreichen Ende zu führen.

Kategorien
Webdesign

Gewinne ein Premium-Theme für PrestaShop, Joomla oder WordPress von TemplateMonster

Wir alle mögen es, Geschenke und Aufmerksamkeiten zu bestimmten Gelegenheiten zu bekommen. Wie wäre es, wenn wir einfach auf einen besonderen Anlass verzichten?

Kategorien
Webdesign

Hochauflösende Inhalte von YouTube – Der einfache Download

Der schnelle YouTube Download: die Video-Plattform hat sich, anfangs mit wackeligen, privaten Videos bestückt, zu einer ganzen Medienwelt entwickelt – mit eigenen Stars und ganzen „Fernsehsendern“. Auf der technischen Seiten haben wir die Entwicklung von 240p zu 1080p mitgemacht und uns über die feinere Auflösung gefreut. Und auch der 4K-Trend wird unterstützt, etwa mit 2160p bei YouTube. Gute Inhalte in perfekter Qualität? Da kommt der Wunsch auf, sich diese zu sichern. Einen schnellen Download bietet uns der 4K Video Downloader an.

Praktische Funktionen

Dein Ziel ist es, die Videos von YouTube in sehr hoher Qualität so leicht wie möglich auf deinen Computer zu bekommen? So sicherst du dir deine liebsten Filme und bleibst unabhängig vom Internet und der Gefahr dass Videos aus verschiedensten Gründen von der Plattform entfernt werden.

Dazu kopierst du einfach den Videolink aus dem Browser und klickst in der Software auf Link einfügen. Fertig! So entstehen Videos in HD 1080p, HD 720p oder eben 4K-Qualität. Sehr praktisch, um diese auf dem HD-Fernseher oder iPad ganz ohne Suchen oder Hoffen, dass die WLAN-Verbindung mitspielt, anzusehen.

Das Interface des Downloaders

Besonders ist dabei, dass auch komplette Playlisten und Kanäle von YouTube auf Wunsch herunter geladen werden können. Ergänzend können auch innerhalb der Software Kanäle abonniert werden. Erscheint ein neues Video des Kanalbetreibers, so erfolgt sofort und ganz automatisiert der YouTube Download.

Feine Extras

Selbst 360° Videos werden unterstützt. Wie gewohnt kannst du auch nach dem Download durch Ziehen mit der Maus den Blickwinkel des Videos anpassen. Eingebettete YouTube-Videos auf einer Homepage werden erkannt und ebenso zum Download angeboten. Auch hier reicht der Link als Kopie, der in der Software eingefügt wird. Neben 360° werden auch Videos im 3D-Format unterstützt.

YouTube Download

Gut zu wissen

Formate, in denen gespeichert werden kann, sind MP4, MKV, M4A, MP3, FLV und 3G. Auch .m3u-Dateien für Wiedergabelisten sind möglich. Wer die Untertitel benötigt nutzt den entsprechenden Untertitel-Downloader. Dieser legt eine .srt-Datei oder eingebettete Untertitel direkt in den Videos an.

Sollen die gewählten Einstellungen auf alle Downloads anwendbar gemacht werden, so aktiviere den „Intelligenten Modus“. Lade so Videos nicht nur von YouTube, sondern auch Vimeo, SoundCloud, Flickr, Facebook und DailyMotion herunter.

Neben dem YouTube Download: Musik als MP3

Wer sich weniger für die Videos, mehr aber für die Musik interessiert, kann diese auch mit dem vorgestellten Programm extrahieren. Als Alternative wird mit 4K YouTube to MP3 eine darauf spezialisierte Software angeboten. Ob von YouTube, Vimeo oder Facebook: die Audio-Spur wird erkannt und als MP3, M4A oder OGG separiert. Auch SoundCloud, Flickr und DailyMotion könnten da Quellen sein.

YouTube Download

Material von Instagram

4K Stogram ist noch der Profi für Instagram. Das Herunterladen oder die Sicherung der Instagram-Fotos oder Videos, selbst von privaten Konten, wird damit zum Kinderspiel. Ob Fotos aus mehreren Konten gleichzeitig oder der automatische Download der neuesten Fotos deines Lieblingsfotografen: alles sehr leicht möglich.

Übrigens: Alle Programme laufen auf PC, Mac und auch Linux, sind komplett gratis und bringen keine störende Toolbar, keine Adware und keine Malware mit.

Die 5 besten YouTube-Kanäle für Webdesigner

Damit sich die Installation des 4K Video Downloader auch gleich lohnt, haben wir fünf herausragende YouTube-Kanäle recherchiert, die deine Fähigkeiten als Designer garantiert steigern werden.

01 The Futur

Mit The Futur hat Chris Do einen sehr hochwertigen YouTube-Channel gegründet, der oft auch live aus dem Leben einer Agentur berichtet. Hier geht es um Branding, UX Design, Pricing, Logo Design und Stylescapes.

02 Roberto Blake

Roberto berichtet immer Montags über Grafikdesign, Design Education, Logo Design und Web Design. An den anderen Tagen der Woche spendiert er uns Tutorials und Reviews.

03 CharliMarieTV

Charli ist eine Web- und Grafikdesignerin aus Neuseeland (auch wenn sie gerade in London lebt). Bei ihr geht es um Pixel Perfect Icons, Design Portfolios, Layouts und Inspiration.

04 Unleashed Design

Wer zurecht anmerkt, dass bisher nur englisch-sprachige Inhalte vorgestellt wurden, wird sich über den Kanal Unleashed Design von Johannes Schiel freuen. Themen sind JavaScript, Webdesign Trends und Prinzipien sowie Responsive Design.

05 1stWebDesigner

1stWebDesigner hat zwar schon länger nicht mehr gepostet, doch das Archiv bietet so einige zeitlose Perlen an. So geht es etwa um das eigene Web Design Portfolio, um Tricks, um aus der Masse an Webdesigner herauszustechen, oder auch um die Preisgestaltung.

Fazit

Der 4K Video Downloader ist einer dieser kleinen Helfer die den Alltag doch sehr erleichtern: wie oft hat man sich gewünscht, mal eben schnell ein Video als YouTube Download zu sichern oder die coole Musik eines anderen Videos abzuspeichern. Klar ist das auch online möglich, direkt im Browser, und so gibt es eine einfache Version der Software auch als Web-App. Mehr Funktionen, Auswahlmöglichkeiten und Automatismen bietet aber die Software an. Schnell installiert empfehlen wir den Test für den YouTube-Fan, der regelmäßig Inhalte für sich speichern und damit sichern möchte.

Kategorien
Webdesign

Deine Meinung: das neue Design des Smashing Magazines

Unsere großen Freiburger Magazinbrüder vom Smashing Magazine unterziehen ihr in der internationalen Webworkerwelt beliebtes Magazin einer Generalüberholung. Vor einigen Tagen schaltete das Relaunch-Team die Beta-Version frei und präsentierte das Ergebnis von 18 Monaten harter Arbeit. Wie immer wenn es um Design geht sind die Geschmäcker verschieden. Die Nutzererfahrung unterscheidet sich jedenfalls grundlegend von der aktuellen Designinkarnation. Das Leserecho war überwiegend positiv. Einige bemängelten, dass die Rotlastigkeit zu Lasten der Lesbarkeit geht. Was denkt ihr, verehrte Leser des Dr. Web-Magazins?

Deine Meinung: das neue Design des Smashing Magazines

Rot ist die alles dominierende Seitenfarbe

Deine Meinung: das neue Design des Smashing Magazines

Die Herausgeber hatten schon immer ein Faible für Katzen. Ganze 56 Comic-Katzen räkeln sich zwischen den Seiten.

Deine Meinung: das neue Design des Smashing Magazines

Ein großes Bild des Autors leitet den Artikel ein.

Wie gefällt dir das neue Design?

http://polldaddy.com/poll/9708578/

Kategorien
Webdesign

Die 100 besten Ressourcen für Webentwickler – Plugins, Tools und Lösungen

Einer der einfachsten Wege, deiner Website tolle Funktionen hinzuzufügen, ist, ein gutes Plugin zu finden und zu verwenden.

Kategorien
Webdesign

10 richtig coole und schicke Magazin-Themes für dein WordPress

Magazin-Themes werden immer beliebter. Sie sehen schick aus und bieten viel Information direkt auf der Startseite. Da sie sich nicht nur für News-Websites eignen, sondern auch immer mehr für Blogs eingesetzt werden, habe ich dir heute zehn richtig schicke und coole Magazin-Themes für dein WordPress herausgesucht, damit du deine Leser mit einem neuen Anstrich überraschen kannst.

10 richtig coole und schicke Magazin-Themes für WordPress

Diese Themes wirst du wahrscheinlich noch nicht kennen

Ich habe es mir nicht leicht gemacht, da ich dich mit Themes überraschen möchte, die du wahrscheinlich nicht kennst. Themes von noch wenig bekannten Entwicklern, die wirklich gute Arbeit leisten. Die Themes sehen wirklich so wunderschön aus, dass sie es wert sind, einmal genauer vorgestellt zu werden.

Lite- und Pro-Varianten der Magazin Themes

Die meisten Themes bekommst du heute auch als kostenlose Version über das offizielle Theme-Verzeichnis von WordPress. Vielfach reichen bereits die Funktionen der kostenlosen Lite-Varianten der Themes. Und wenn du wirklich die volle Funktionsvielfalt der Pro-Variante benötigen solltest, dann ist das auch nicht schlimm, denn die Preise für professionelle Themes sind in den letzten Jahren etwas gesunken.

Sollten von den vorgestellten Themes auch Pro-Varianten erhältlich sein, liste ich dir auch den Preis und den Link zum vollwertigen Theme auf.

1 – Metro Magazine von Rara Theme

Metro Magazine

Download von WordPress | Demo | Pro-Variante: 59 USD

2 – Magazine Plus von WEN Themes

Magazine Plus

Download von WordPress | Demo | Pro-Variante: 49 USD

3 – Clean Magazine von Catch Themes

Clean Magazine

Download von WordPress | Demo

4 – MagCast von Theme Horse

MagCast Magazine

Download von WordPress | Demo

5 – Smart Magazine von Qaiser

Smart Magazine

Download von WordPress | Demo

6 – Numinous von Rara Themes

Numinous Theme

Download von WordPress | Demo | Pro-Variante: 59 USD

7 – Simple Perle von Nudge

Simple Perle

Download von WordPress | Demo | Pro-Variante: 49 USD

8 – Monograph von Ilovewpcom

Monograph Theme

Download von WordPress | Demo

9 – Synapse von Rohit Tripathi

Synapse Theme

Download von WordPress | Demo | Pro-Variante: 45 USD

10 – NewsAnchor von Athemes

NewsAnchor Theme

Download von WordPress | Demo | Pro-Variante: 39 USD

Extra: Das MH Magazine Theme von MH Themes

In keiner Liste der coolsten Magazine Themes darf das Schwergewicht der Magazin-Themes fehlen. Das MH Magazine ist mit Sicherheit eines der besten und wandelbarsten Themes überhaupt. Du bekommst sehr viele Funktionen und Widgets mit diesem Theme mitgeliefert, sodass du keinerlei Probleme haben wirst, es genau auf deine Bedürfnisse anzupassen.

Natürlich kannst du auch das MH Magazine Theme ausgiebig in der kostenlosen Lite-Variante testen. Die ganze Magie allerdings wird dir nur die Pro-Variante nahebringen. Zudem bekommst du deutschen Support für das Theme.

MH Magazine von MH Themes

MH Magazine Theme

Download von WordPress | Demo | Pro-Variante: 55 Euro

Weitere kostenlose Themes und neue Themes:

Fazit

Unbekannte Entwickler produzieren wunderschöne Themes, die für mich zum Teil wesentlich ansprechender wirken, als die bekannten Themes von – zum Beispiel – SKT Themes. Mir persönlich gefällt das Metro Theme am besten. Durch sein klares Design hebt es sich wohltuend aus der Masse hervor.

Kategorien
Rechtliches Webdesign

Auch ohne vertragliche Regelung: Hoster müssen Backups erstellen

Häufig hosten Webkreative Seiten, die sie im Auftrag von Kunden erstellt haben, auf ihren Servern, meistens aus einer Gefälligkeit heraus und ohne sich darüber Gedanken zu machen. Es ist ja auch unproblematisch, denkt man. Bei meiner Website ist das genauso, sie liegt auf dem Server meines Cousins, und da liegt sie ganz gut. Natürlich ist Blut dicker als Wasser, und wenn etwas Unvorhergesehenes passiert, weil Backups nicht vorgenommen worden sind, werde ich ganz bestimmt nicht auf die Idee kommen, meinen Cousin in Anspruch zu nehmen. Das könnte ich aber.

Auch ohne vertragliche Regelung: Hoster müssen Backups erstellen

Denn auch ohne konkrete vertragliche Vereinbarung besteht volle Haftung, sagt das Landgericht Duisburg in einem Urteil, das zwar schon etwas zurückliegt, aber erst jetzt Fahrt aufgenommen hat (Urteil vom 25.07.2014, Az. 22 O 102/12). Webhosting-Dienste sind hiernach auch ohne ausdrückliche Regelung verpflichtet, Backups von Websites ihrer Kunden zu erstellen. Andernfalls haftet der Hoster bei Servercrashs auf Schadensersatz.

In dem konkreten Fall war ein Dienstleister für Webhosting auf Zahlung von Schadensersatz verklagt worden, weil die Website der Klägerin aufgrund eines Servercrashs nicht mehr wiederhergestellt werden konnte. Der Dienstleister war hingegen der Ansicht, dass in dem Vertrag keine Pflicht zum Ausdruck komme, Backups der Website zu erstellen. Das Landgericht Duisburg folgte der Klägerin und gab der Klage statt. Der Webhoster habe durch den Hostingvertrag eine Erhaltungs- und Obhutspflicht für die Website übernommen, und diese umfasse auch Backups der Website. Weil dies nicht beachtet worden sei, liege ein schuldhafter Verstoß gegen die Datensicherungspflicht vor.

Interessant in diesem Zusammenhang ist auch die Tatsache, dass das Gericht den Schadensersatz der nach Höhe nach reduzierte und von den ursprünglich geforderten 8.500,00 Euro nur einen Betrag von rund 1.300,00 Euro zusprach. Die Lebenszeit einer Website betrage nämlich acht Jahre, so das Landgericht Duisburg. Weil die Website zum Zeitpunkt des Crashs bereits sechs Jahre alt war, sei ein Abzug „neu für alt“ angemessen. Eine darüber hinausgehende Kompensation lehnte das Landgericht ab.

Überträgt man die Erwägungen des Gerichts auf einfache mündliche Absprachen wie sie mein Cousin und ich etwa haben, ändert sich übrigens nichts, selbst wenn es sich dabei nur um eine bloße Gefälligkeit handelt. Die herrschende Meinung fragt in diesem Zusammenhang nämlich, welche Art von Vertrag vorliegen würde, wenn die Parteien vollen Rechtsbindungswillen gehabt hätten. Ist das Gefälligkeitsverhältnis auftragsähnlich, wird von dem normalen Haftungsmaßstab ausgegangen. Anders sieht das nur dann aus, wenn die Gefälligkeit als verwahrungsähnlich einzuordnen wäre, was jedoch beim Hosting nicht der Fall ist.

Kategorien
Icons & Fonts Webdesign

So findest du die perfekte Schrift für dein Web-Projekt

Das Lesen von längeren Texten auf einem beleuchteten Monitor ist zum Alltag geworden. Web-Fonts haben sich etabliert und immer mehr Inhalte werden auf Tablets oder mobilen Endgeräten angeboten um dort gelesen zu werden. Damit wachsen die Ansprüche an Schriften, was deren Darstellungsqualität auf verschiedenen Displays betrifft. Dennoch wurden die meisten Schriften, die heute im Einsatz sind, nicht für digitales Umfeld gestaltet. Häufig werden Schriftentwürfe aus vor-digitalen Zeiten mit technischen Hilfsmitteln – wie z.B. Hinting – für die Verwendung am Bildschirm optimiert. Doch Bildschirm-Optimierung muss früher beginnen!

So findest du die perfekte Schrift für dein Web-Projekt

Ich habe hier für euch einige Charakteristika zusammengetragen, die die Lesbarkeit am Bildschirm verbessern. Wenn ihr nach einer gut gemachten Schrift für Lesetexte am Bildschirm sucht, achtet auf diese Merkmale:

Offene Punzen, großzügige Laufweite (Schriften vlnr.: Tuna, Garamond, Arial and Fira)

So findest du die perfekte Schrift für dein Web-Projekt

Punzen (engl., counters), nicht druckende Innenflächen der Buchstaben, laufen bei kleinen Schriftgrößen schnell zu und bilden dunkle Stellen im Grauwert der Schrift, die den Blick des Lesers fesseln und den Lesefluss behindern. Um die nichtdruckenden Weißflächen deutlich sichtbar zu halten und auch bei kleinen Textgrößen einen gut sichtbaren Lichteinfall zu ermöglichen sind offene Formen (engl., open aperture) und eine große x-Höhe im Verhältnis zur Oberlänge (engl., ascenders) hilfreich.

Großzügige Laufweite und breite Buchstaben

Achtet auf die Buchstabenabstände! Eng gesetzte, schmal laufende Schriften eignen sich für Überschriften und hohe Schriftgrößen, aber im Fließtext brauchen Schriften mehr Platz. Die einzelnen Zeichen müssen breiter gestaltet werden, damit der Weißraum innerhalb einer Glyphe groß genug ist. Großzügige Buchstabenabstände verhindern Kollisionen zwischen den Zeichen und deutliche Wortabstände vereinfachen das Bilden von Wortgruppierungen beim schnellen Lesen.

Individuelle Buchstabenformen (Schriften vlnr.: Tuna, Garamond, Arial and Fira)

So findest du die perfekte Schrift für dein Web-Projekt

Individuelle Buchstabenformen sind vielleicht das wichtigste Kriterium von allen! Wenn die Zeichen zu ähnlich sind, muss ein Wort mehrmals gelesen werden. Wenn das Wortbild nicht klar genug ist, nimmt das Lesen daher mehr Zeit in Anspruch, vor allem wenn es schwierige Kandidaten wie „I“ und „l“ oder „B“ und „8“ enthält. Daher muss das Design eine gewisse Formenvielfalt in den Glyphen haben ohne die Harmonie im gesamten Zeichensatz zu beeinträchtigen.

Klarheit

Zu viele Details verwaschen das Aussehen in Fließtextgrößen; sie stören die Grundform der Buchstaben, die zur schnellen Identifizierung wichtig ist – Klarheit verbessert das Wortbild.

Haarlinien gehen leicht verloren (Serifen-Schriften vonu.: Tuna, Garamond and Bodoni)

So findest du die perfekte Schrift für dein Web-Projekt

Geringer Kontrast und robuste Serifen

Ein gängiges Problem von Serifenschriften am Bildschirm sind dünne Linien. Haarlinien gehen bei schlechten Druckbedingungen oder Beleuchtung von hinten leicht verloren, die Buchstaben scheinen aufzubrechen und in Einzelsegmente zu zerfallen. Robusten Serifen und ein geringer Strichstärkenkontrast lösen dieses Problem. Die meisten Serifenlosen besitzen sowieso einen geringen Strichstärkenkontrast, aber auch Serifen-Schriften lassen sich so gestalten.

An das Rechteck angenäherte Kreisbögen

Die meisten Schriften, die im Druck unter schlechten Bedingungen funktionieren, machen auch eine gute Figur am Bildschirm, doch einige Kriterien sind speziell für den Bildschirm von Bedeutung und haben direkt oder indirekt mit der Abbildung auf dem Pixelraster zu tun. Je »kantiger« eine Kurve, desto besser passt sie auf das Pixelraster. Kreisbögen sollten daher so weit wie möglich an die Rechteckform angenähert werden – was zusätzlich zu einer größeren Punze führt.

Manuelle Hinting-Informationen des Buchstaben (Schriftart Tuna)

So findest du die perfekte Schrift für dein Web-Projekt

Schriften basieren auf Vektoren, müssen auf dem Bildschirm aber als Pixel dargestellt werden. Normalerweise (ohne Hints) macht der Computer diese Umrechnung automatisch ohne dass der Gestalter darauf Einfluss hat. Beim Hinting werden in der Schrift Information abgelegt die dem Computer sagen, wie die Schrift im Pixel-Raster darstellt werden soll. Mit der TrueType-Technologie lassen sich diese Instruktionen sogar einzeln für jede Pixelgröße definieren (Delta Hints).

Gerade bei kleinen Schriftgrößen und geringen Auflösungen kann damit die Lesbarkeit enorm verbessert werden. Es lohnt sich, diesen aufwändigen Prozess manuell zu erledigen und sich nicht auf das automatische Hinting der Schriftgestaltungs-Software zu verlassen.

Gerade wenn die Vektoren auf ein kleines Pixelraster umgerechnet werden müssen, ist es hilfreich, wenn horizontale und vertikale Elemente die gleiche Strichstärke haben. Weil das bei dem meisten serifenlosen Schriften der Fall ist, hält sich hartnäckig das Gerücht, dass Serifenschriften für den Bildschirm weniger geeignet sind. Doch auch viele Serifenschriften haben eine betonte horizontale Achse mit massiven waagerechten Elementen und eignen sich ebenso für den Bildschirm.

Falls du herausfinden willst, wie Alex Rütten und ich den traditionellen Breitbandfeder-Schreibstil genutzt haben, um die Lesbarkeit ihrer neuen Schrift „Tuna“ am Bildschirm zu verbessern, oder einfach nur den Webfont testen willst, schau Dir diese Microsite an: Tuna Typeface.