Kategorien
(Kostenlose) Services Design Essentials HTML/CSS Webdesign

CSS3: Komplexe Beschneidungspfade visuell generieren mit Clippy

Die CSS-Eigenschaft clip-path erlaubt es dir, anhand komplexer Beschneidungspfade festzulegen, dass nicht der gesamte Inhalt einer Box im Browser angezeigt wird. So sind beeindruckende Effekte möglich. Die Web-App Clippy nimmt dir das Coding ab. Du stellst deine Beschneidungspfade visuell zusammen und siehst direkt das Ergebnis.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Outdated Browser: Freies Projekt informiert deine Besucher über den Zustand ihres Browsers

Das Problem ist nicht mehr ganz so akut wie noch vor einigen Jahren. Dennoch surfen auch heutzutage noch zu viele Menschen mit einem veralteten Browser. Wenn deine Website sehr modern ausgestattet ist, werden diese Menschen keinen Spaß daran haben. Bevor sie deshalb sauer auf dich werden, weise sie doch einfach freundlich darauf hin, dass sie mit einem antiquarischen Seitenbetrachter unterwegs sind.

Entschuldige, aber dein Browser ist uralt.

Hinweisgeber wie „Outdated Browser” gab es vor einigen Jahren noch wie Sand am Meer. Aber keiner sah so gut aus, wie der, den ich dir heute vorstelle. „Outdated Browser” kommt in vielen verschiedenen Sprachen, darunter Deutsch, als Kombination aus JavaScript und CSS daher. Das Tool steht unter der MIT-Lizenz auf Github zur kostenfreien Verwendung bereit und unterliegt keinerlei Abhängigkeiten. Du kannst es also als unabhängige Lösung verwenden.

Die komprimierte Version des JavaScript wiegt gerade einmal rund 3kb. Die ebensolche Version des CSS bringt es auf 1kb. Verschiedene Sprachen werden als HTML-Dateien mitgeliefert. Diese wiegen jeweils um die 0,3kb.

Die Verwendung ist einfach. Du benötigst die minifizierte JS, sowie selbige CSS und den Ordner lang. Alle benötigten Dateien sind im Downloadarchiv enthalten. Stelle das Paket in deinem Webspace bereit und binde die Dateien entsprechend im Head (CSS) und im Body (JS) deiner Website ein. Direkt nach dem öffnenden Body setzt du dann ein Div mit der ID outdated. Hierdurch wird das JavaScript getriggert.

Das Einbinden und Aktivieren der Lösung dauert nur wenige Minuten. Die Optik könntest du anpassen, sie ist allerdings im modernen Flat Design gehalten und von daher out-of-the-box sicherlich für die meisten Fälle bereits hübsch genug.

Wird die Seite nun mit einem modernen Browser besucht, passiert nichts. Kommt ein Besucher mit einem nicht aktuellen Browser, wird er mittels eines Headers sanft darauf hingewiesen, dass es für seinen Browser eine aktuellere Version gibt. Klickt er auf diesen Hinweis, wird die folgende politisch korrekte Übersicht eingeblendet.

Wichtig zu wissen ist, dass die Lösung gezielt auf Desktop-Browser abzielt und nur dafür eingesetzt werden kann. Bevor du das kritisierst, soltest du nochmal kurz nachdenken, ob es auf mobilen Geräten überhaupt veraltete Browser gibt. Eher nicht, oder? Gut, wenn du noch mit Android 2.01 unterwegs bist vielleicht, aber dann ist das nicht eh dein vordringlichstes Problem.

Outdated auf allen Ebenen

Wer sich das JavaScript und das CSS näher ansieht, wird vermutlich die Hände über dem Kopf zusammen schlagen. Der Code macht nämlich der Bezeichnung Outdated alle Ehre. Die Erklärung ist indes einfach und nachvollziehbar. Damit „Outdated Browser” in alten Browsern funktioniert, muss es natürlich eben für diese alten Gesellen geschrieben sein. Da ist kein Platz für moderne Ansätze.

„Outdated Browser” ist eine Lösung der portugiesischen Design-Agentur Büro und steht auf Github zum Download und zur Mitwirkung zur Verfügung. Nutzer selbstgehosteter WordPress-Installationen können das Tool direkt als Plugin verwenden und sich so den Einbau erleichtern. Der Vollständigkeit halber sei erwähnt, dass es weitere vorgefertigte Module gibt, und zwar für Ruby, Drupal, Magento, Contao und Yii2.

Kategorien
Design HTML/CSS Webdesign

CSS: Hübsche Buttons mit bttn.css

Gefallen dir die aktuellen Ghost-Buttons oder jene im Material Design? Egal welches Flat-Design-Konzept du bevorzugst, das kleine Stylesheet bttn.css hat mit Sicherheit die ein oder andere Schaltfläche für dich parat.

bttn.css: 13 verschiedene Flat-Style-Schaltflächen

Buttons in reinem CSS sind das Mittel der Wahl für moderne Schaltflächen. Das Stylesheet bttn.css macht die Erstellung äußerst ansprechender Knöpfe sehr einfach. Es bedarf nur der Vergabe entsprechend vordefinierter Klassen.

Den folgenden Button

bttn.css

erzeugst du etwa mit den folgenden Klassenzuweisungen:

<button class="bttn-slant bttn-lg bttn-success">large</button>

Wesentlich einfacher wird es nicht. bttn.css kommt mit dreizehn Buttons in sechs Farben und vier Größen. Jeder Parameter wird als zusätzliche Klasse angehängt. Die Farbdefinitionen hätte der Entwickler durchaus sprechender gestalten können. Auf bttn-success für Grün kann man ja noch kommen, aber bttn-royal für Violett oder bttn-warning für Orange erfordert unnötigerweise ein Abstraktionsvermögen, dass auch nicht überall auf der Welt zu den richtigen Assoziationen führen wird. Seis drum, du musst halt die sechs Farbklassen nachlesen, wenn du sie verwenden willst.

bttn.css, geringes Dateigewicht und flexibler Einsatz

bttn.css ist komprimiert noch rund 32kb groß, in lesbarer Form wiegt es 42kb. Wenn dir das für ein paar Buttons zu viel ist, kannst du auch das CSS für jeden Button separat herunterladen. So bringen die Buttons etwa 6kb das Stück auf die Waage. In der Regel wird ein Button pro Projekt reichen, wenn du Wert auf eine konsistente Benutzerführung legst.

Sämtliche Parameter kannst du bequem zusammenklicken und dann per Zwischenablage in dein Projekt schreiben. Auf der Seite des Konfigurators findest du auch die Download-Möglichkeit für die separaten CSS-Dateien. Zusätzlich zu ihrer modernen Form bringen die Schaltflächen zeitgemäße Animationseffekte mit, die du so auch noch nicht überall findest.

bttn.css

bttn.css wird erstellt und gepflegt von Ganapati Bhat, einem Frontend-Entwickler aus dem indischen Bangalore. Das Projekt steht zur freien Verwendung unter der liberalen MIT-Lizenz auf Github zur Verfügung. Bhat veröffentlichte die initiale Version Anfang November 2016 und ist seitdem aktiv geblieben. Dadurch hat es sein Projekt geschafft, bei ProductHunt gefeatured zu werden und auf Github zu trenden.

Kategorien
HTML/CSS

Inline Critical CSS – Wie eine Bad Practice zum Geschwindigkeitsboost führen kann

Ein Ergebnis von 89 % bei Google Pagespeed Insights. Dann kann es bis zur 100 nicht mehr weit sein. Nach stundenlanger Bild- und Cacheoptimierung, Zusammenfassung von CSS- und Javascript-Dateien kommt nun der Endgegner. Was er bedeutet und wie ihr ihn besiegen könnt, erfahrt ihr in diesem Beitrag.

PageSpeed-Optimierung: Gas geben auf den letzten Metern
PageSpeed-Optimierung: Gas geben auf den letzten Metern

Eine rätselhafte Meldung bei den Pagespeed Insights

Nachdem erfolgreich alle bisherigen Meldungen abgearbeitet und eliminiert wurden, leuchtet nur noch ein Hinweis auf:

Die letzte Hürde zu 100%
Die letzte Hürde zu 100%

Unter dieser Meldung werden CSS- und Javascript-Dateien aufgelistet, die das Rendern der Seite verzögern sollen. Aber warum tun sie das?
Eine kurze Erklärung:
Nach der Anfrage des Browsers an den Server sendet dieser die Struktur der Website in einem HTML-Dokument zurück. Der Browser liest dieses von oben nach unten aus und stellt dann die Seite dar. Dabei stößt er gelegentlich auf Dateien, die nachgeladen werden müssen. Er stellt erneut eine Anfrage an den Server und ruft die entsprechenden Dateien ab. Dieser Dateiabruf kostet aber Zeit, in der die Darstellung der Seite nicht fortgeführt wird. Das Rendering wird blockiert.
Während die Lösung bei Skripten vergleichsweise einfach ist – sie können an das Ende des HTML-Dokumentes verschoben oder asynchron geladen werden- ist die Lösung für CSS-Dateien etwas aufwendiger. Werden die CSS-Dateien auch ans Ende des Dokuments verschoben, sehen wir beim Laden erst einmal die unformatierten Inhalte. Das ist optisch nicht gewollt und kann den Seitenbesucher verwirren. Was kann getan werden?

Die Lösung – Inline Critical CSS

Google schlägt hier die passende Lösung in seiner Dokumentation bereits vor. CSS-Anweisungen, welche für die saubere Darstellung der Website benötigt werden – das „kritische CSS“ – sollen inline direkt im Kopfbereich eingefügt werden. Jetzt kommt Panik auf!
„Ich habe doch gelernt, dass man Struktur und Darstellung voneinander trennen soll“. Dieser Grundsatz ist auch weiterhin korrekt. An dieser Stelle muss überlegt werden, wie wichtig es ist, Google zufriedenzustellen und noch ein paar extra Millisekunden Ladezeit herauszuholen, dafür aber Grundsätze der Webentwicklung über den Haufen zu werfen.
Geht man nun den Weg und versucht, sein CSS inline im Kopfbereich unterzubringen, stellen sich verschiedene Fragen. Wie binde ich das Inline-CSS am besten ein? Was ist eigentlich kritisch für die Darstellung meiner Website?

Welcher Teil meines Stylesheets ist „kritisch“?

In den meisten Fällen ist es nicht leicht zu filtern, was in der CSS-Datei letztendlich als kritisch anzusehen ist. Das funktioniert vielleicht noch bei kleineren Webseiten, wird aber bei größeren Internetauftritten oder sogar in Content-Management-Systemen mit einer Vielzahl an Stylesheets fast unmöglich.
Glücklicherweise gibt es verschiedene Tools, die diese Arbeit für den Programmierer abnehmen. Um einzelne Dateien zu analysieren und den kritischen Teil zu extrahieren, kann zum Beispiel der Critical Path CSS Generator von Jonas Ohlsson zum Einsatz kommen. Hier müssen die URL der betreffenden Seite und das dazugehörige CSS eingegeben werden. Der Generator analysiert das Stylesheet und gibt dann den kritischen Teil aus. Dieser wird dann noch mit einem CSS Minifier, z.B. cssminifier.com, zusammengefasst und in den -Bereich des HTML-Dokuments eingefügt.

Critical Path CSS Generator von Jonas Ohlsson
Critical Path CSS Generator von Jonas Ohlsson

Für größere Systeme können Taskrunner wie Grunt oder Gulp, in Kombination mit entsprechenden Plug-Ins, genutzt werden. Führt dieser die passende Aufgabe aus, wird bei jedem Durchlauf das gewünschte kritische CSS generiert.

In Grunt kann dafür das Plug-In Penthouse eingesetzt werden. Mit dem Paketmanager npm wird dieses heruntergeladen und integriert:
npm install grunt-penthouse –save-dev

Im Gruntfile wird das Plug-In dann geladen:

grunt.loadNpmTasks('grunt-penthouse');

und konfiguriert:

grunt.initConfig({
  penthouse: {
    extract : {
        outfile : '.tmp/out.css',
        css : './dist/css/full.css',
        url : 'http://localhost:9000',
        width : 1300,
        height : 900,
        skipErrors : false // this is the default 
    },
  },
});

Das outfile kann im Anschluss mithilfe eines CSS-Minifiers (z. B. cssmin) zusammengefasst werden.

Einbindung in den Quelltext

Der Inhalt der erstellten CSS-Datei wandert nun in ein style-Tag im Kopfbereich. Dies ist ein wichtiger Punkt, denn diese Technik berechtigt den Entwickler nicht dazu die Styles an die entsprechenden Tags selbst zu schreiben:

Inline-CSS
Inline-CSS

In einfachen, selbst geschriebenen Webseiten, mit Zugriff auf die HTML-Dateien, lässt sich dies recht einfach umsetzen. In größeren Umgebungen, wie Content-Management-Systemen, ist der richtige Ort für das Einfügen des Codes nicht gleich ersichtlich. Für die verschiedenen Systeme gibt es unterschiedliche Herangehensweisen.
In WordPress kann das populäre Modul Autoptimize verwendet werden. Es fasst CSS und Javascript zusammen und komprimiert die entstandenen Dateien. In der Konfiguration des Moduls kann dann das entsprechende Critical CSS eingefügt werden und alle anderen CSS-Dateien landen am Ende des Dokumentes.

Das WordPress Plugin Autoptimize hilft bei der PageSpeed-Optimierung.
Das WordPress Plugin Autoptimize hilft bei der PageSpeed-Optimierung.

Für das CMS Drupal in der Version 8 gibt es auch eine einfache Lösung. Hier muss nicht einmal ein zusätzliches Modul installiert werden. Innerhalb des Twig-Templates, welches die HTML-Ausgabe rendert, wird eine Zeile im Kopfbereich einfach hinzugefügt:

Damit wird die Datei „inline.css“ ausgelesen und deren Inhalt in den Seitenkopf geschrieben. Danach muss folgende Zeile in den Fußbereich verschoben werden:

css-placeholder token="{{ placeholder_token|raw }}

Dies führt dazu, dass alle CSS-Dateien im Fuß der Seite geladen werden.

Alternativen zu Inline CSS

Wem Inline CSS zu unsauber ist, kann auch auf andere Möglichkeiten zugreifen.
Eine über Javascript gesteuerte Methode ermöglicht es, CSS asynchron zu laden, wie es bei Javascript-Dateien bereits bekannt ist. Dafür kann die Bibliothek loadCSS von der Filament Group genutzt werden.
Eine weitere Option ist es CSS-Dateien parallel zu laden, indem diese von einem Content Delivery Network zur Verfügung gestellt werden. Dadurch wird eine parallele Verbindung zu einem anderen Server aufgebaut, während die eigentliche Verbindung zu Server der Website für das Rendering genutzt werden kann.

Die Zukunft von Inline CSS

Die Problematik beim Laden von Dateien beim Seitenaufbau ist, dass bei HTTP1.1 nur eine begrenzte Anzahl von Dateien in einem Roundtrip (Anfrage an Server, Antwort von Server) übertragen werden können. Dieser Roundtrip erfordert Zeit, die das Rendern der Seite bremst. Diese Problematik wird deshalb im neuen Standard HTTP2 aufgegriffen und gelöst. Alle Anfragen an den Server werden gebündelt und die Dateien in einem Paket zurückgeschickt. Dies beschleunigt die Datenübertragung entscheidend und macht die Einbindung von Inline CSS in Zukunft unnötig.

Kategorien
Boilerplates & andere Tools Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Januar 2017: 10 nützliche Tools für Webentwickler

Der Alltag hat dich fest im Griff? Routine ist natürlich nicht immer schlecht. Sie lässt sich sogar stetig optimieren. Die zehn Tools, die wir dir heute vorstellen, helfen dabei.

Mit dem richtigen Werkzeug macht sogar Spaß, was du als letztes damit assoziiert hättest, etwa das Aufbauen von Tabellen. Glaubst du nicht? Schau dir unsere zehn Entwickler-Tools an und entscheide danach selbst.

Titel: HTML Table Generator

Der HTML Table Generator baut für dich Standard-Tabellen mit div oder table Tags. Eine interaktive Preview zeigt dir, ob du auf dem richtigen Weg bist.

div-table
Erstellt von: divtable
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Hammer

Hammer bringt Gesten-Support und minimiert die Klickverzögerung.

hammer
Erstellt von: freie Kontributoren
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Kute.js

Diese Animations-Engine ist nicht nur zu schicken, sondern auch zu schnellen Resultaten zu gebrauchen. Fallbacks bringt sie überdies mit.

kute
Erstellt von: thednp
Lizenz: MIT-Lizenz, also kostenlos verwendbar.

Titel: Bless CSS

Bless CSS bringt Lösungen für den schlechtesten Browser der Welt. Du weißt schon, welchen ich meine.

bless
Erstellt von: Paul Young
Lizenz: mitgelieferte Lizenz beachten

Titel: Patterns Lib

Die Patterns Library liefert eine Sammlung fertiger Interaktions-Patterns, die du mittels CSS-Klassen und HTML-Attribute an den Start bringst.

patterns
Erstellt von: patternslib
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: CSSNano

Wenn dein Stylesheet so klein wie möglich sein soll, dann ist CSSNano für dich das richtige. Es komprimiert nicht nur, sondern entfernt auch alte Vendorprefixe und mehr.

cssnano
Erstellt von: ben-eb
Lizenz: kostenlos verwendbar unter MIT-Lizenz

Titel: Egjs

Egjs bietet ein Bündel an interaktiven UI-Elementen mit schönen Effekten.

egjs
Erstellt von: Naver Corp
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Universal Collection of Transitions

Mit den GLSL-Transitions zauberst du fantastische Bildeffekte.

glsl
Erstellt von: Glslio
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Sprite Spirit

Wenn du etwas Leben in die Bude bringen willst, dann ist dieser Service was für dich. Wirf ihm eine Handvoll Sprites zu und es baut eine komplette Animation für dich.

sprite-spirit
Erstellt von: Elior Shalev Tabeka
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Bootstrap 4 Cheat Sheet

Bootstrap 4 ist kurz vor da. Dieses Cheat-Sheet hilft dir beim Einstieg.

bootstrap4-cheat-sheet
Erstellt von: Bootstrap Creative
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Kategorien
Design HTML/CSS

Clever: 20 Bildeffekte mit CSS

CSS Blendmodes und Filter erlauben Effekte, die bis dato so nicht machbar waren. Wendest du die neuen Möglichkeiten auf Bilder an, so kannst du durch die clevere Stapelung oder Wiederholung mehrerer Eigenschaften sogar noch beeindruckendere Effekte erschaffen. Und das alles nondestruktiv.

image-effects-landing

Bennett Feely und seine Codeschnipsel

Bennett Feely aus Pittsburgh in Pennsylvania legt mit seinem Projekt Image-Effects auf Github ein Beispiel dafür vor, wie du unter kluger Verwendung von Kombinationen oder Wiederholungen verschiedener moderner CSS-Eigenschaften Effekte schaffst, für die du bisher nicht rein auf CSS gesetzt hättest.

image-effects-infrared

Zwanzig Effekte hat Bennett gebaut. Alle zeigt er auf das gleiche Ausgangsbild angewendet und mit dem vollständigen erforderlichen Code-Schnipsel in CSS und SCSS. Dabei kannst du von der Demoseite aus direkt die Snippets auskopieren oder zu Codepen wechseln, wo du mit den Einstellungen und einer Live-Preview spielen kannst.

Zusätzlich stellt Bennett alle Effekte als CSS-Bibliothek bereit, die du unproblematisch in deine Projekte einbauen kannst und die komprimiert nur 1300 Bytes auf die Waage bringt. In der unkomprimierten Variante von 12,8 Kilobyte kannst du natürlich bequemer arbeiten ;-)

image-effects-coloredpencil

Generell kannst du die Effekte out-of-the-box nutzen. Bennett empfiehlt richtigerweise jedoch, dass du einzelne Parameter nochmal anfassen solltest – je nachdem, welches Bild du darstellen willst.

Bennetts Image-Effects nutzen @supports zur Feature Detection. Wenn erkannt wird, dass ein Browser die eingestellten Eigenschaften und Werte nicht darstellen kann, wird das Bild ohne Effekte gezeigt. Mit dieser Art von Fallback wird man wohl leben können.

So einfach ist der Einsatz

Die einzelnen Effekte sind als Klassen definiert, die du entsprechend auf deine Bilder anwendest. Das geschieht am einfachsten, indem du einen Div-Container mit der jeweiligen Klasse versiehst und darin dein Bild platzierst.

Um keine seltsamen Anfangseffekte zu haben, solltest du deinem Bild die korrekten Werte für Höhe und Breite mitgeben. So stellst du sicher, dass der Browser direkt die richtige Bildgröße als Platzhalter verwendet.

Kategorien
Design HTML/CSS

Fibonacci Flexbox Composer: Komfortables Tool macht Flexbox einfach

Die schlichte Web-App Fibonacci Flexbox Composer vom Niederländer Max Steenbergen erleichtert den Einstieg in den Umgang mit CSS Flexbox ganz enorm. Im Grunde musst du nicht einmal einen Funken Ahnung davon haben.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Neue Tools: Bewegung auf der Website mit und ohne Javascript

Die beiden Animationswerkzeuge, die ich dir heute vorstellen möchte, sind keine von der 0815-Sorte. Es handelt sich nicht um Animations-Generalisten, sondern Spezialisten für kleine Anwendungsfelder. Das Javascript Granim.js erlaubt es dir, Animationen mit Farbverläufen zu kreiieren, während sich Radiobox.css ausschließlich um das Aussehen deiner Radiobuttons kümmert.

Granim.js: Einfache Verlaufsanimationen mit großer Wirkung

Granim.js ist ein frisches Javascript aus der Feder des Pariser Entwicklers Benjamin Blonde. Mit der Hilfe dieses sehr kleinen Scripts animierst du Verläufe in, auf und um alles herum, was sich in einem Canvas-Element darstellen lässt.

Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)
Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)

Die Verwendung ist einfach:


Nachdem das Javascript nur knappe 10kb auf die Waage bringt, ist der Overhead wohl zu vernachlässigen. Es rechtfertigt sich damit auch ein Einsatz kleinsten Umfangs, etwa um das eigene Seitenlogo mit einem Farbverlauf zu animieren, so wie du es auf der Demoseite zum Projekt anschauen kannst. Achte auf den Schriftzug Granim.js oben links.

Wobei dir dieses Beispiel auch gleich zeigt, dass das Javascript nicht bloß einfache Verläufe anlegen kann, sondern ebenso in der Lage ist, mit Bildmasken zu arbeiten. Verläufe lassen sich per Klick oder generell per Event anstoßen, was insbesondere diese Seite eindrücklich zeigt. Beweg die Maus einfach mal über die Ghost-Buttons und du wirst sicherlich schnell Spaß an Granim.js finden.

Das Script steht auf Github zum freien Download zur Verfügung. Es ist mit der sehr liberalen MIT-Lizenz versehen, so dass du es auch in kommerziellen Projekten, also auf Kundenwebsites, zum Einsatz bringen kannst.

Radiobox.css: Animierte Optionsauswahl

Aus dem Hause 720kb stammt eine kleine Sammlung von CSS-Animationen, die deine Radiobuttons von Langeweile befreien sollen. Insgesamt 12 Variationen stehen bereit. Der Effekt tritt jeweils in Kraft, wenn der entsprechende Radiobutton geklickt wird. Je nach Effekt fängt der Button dann an zu hüpfen, dreht sich, wird größer und so weiter.

Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)
Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)

Probier es einfach mal aus. Radiobox.css bietet auf jeden Fall interessante Effekte für eine Schaltfläche, die ansonsten eher unbeachtet bleibt. Radiobox.css kommt allein mit CSS3 aus, benötigt aber natürlich einen modernen Browser, um zu funktionieren.

Die Verwendung ist sehr einfach. Du fügst deinem Radiobutton einfach diejenige Klasse zu, die dem gewünschten Effekt entspricht, z.B.:

<input type="radio" class="radiobox-boing"/>

Radiobox.css kommt, wie das bereits vorgestellte Granim.js, unter der MIT-Lizenz ins Haus und kann dementsprechend auch kommerziell genutzt werden. Lade es über Github runter.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5 und JavaScript: So erstellst du mobile Web-Apps

Mobile Web-Apps müssen nicht immer nativ programmiert werden. Auch mit HTML5 und den damit eingeführten JavaScript-APIs entwickelst du mobile Web-Apps, die bezüglich der Funktionalität den nativ programmierten Apps in (fast) nichts nachstehen. Dazu kommt, dass native Anwendungen auch ihre Nachteile haben, die du mit HTML5 nicht hast.

mobile Web-Apps

Kein Store-Zwang, keine unterschiedlichen Plattformen

Apps sind auf Smartphones und Tablets zu einem unverzichtbaren Bestandteil geworden. Wer jedoch selbst mobile Apps anbieten möchte, wird schnell feststellen, dass dies mit einigen Hürden und nicht wenig Aufwand verbunden ist. Zunächst einmal müssen native Apps für jede Plattform – unter anderem iOS und Android – eigenständig entwickelt werden. Die sogenannten Hybrid-Apps, die auf mehreren Plattformen laufen, stellen hingegen nur eine Art Container dar, der in HTML und JavaScript programmierte Webanwendungen enthält.

Googles Play Store
Googles Play Store

Ein weiterer Nachteil nativer Apps ist, dass diese nur über den jeweiligen App-Store installiert werden können. Das führt im Play Store von Google zu einmaligen Registrierungskosten und bei Apple zu regelmäßigen Kosten. Zwar ist es auf Androidgeräten möglich, Apps auch ohne Store zu installieren. Dazu müssen jedoch in den Geräteeinstellungen explizit App-Installationen aus „unbekannten“ Quellen zugelassen werden.

Bei Webanwendungen bestehen all diese Probleme nicht. Sie werden in HTML5 und JavaScript programmiert und sind somit unabhängig von Betriebssystemen und Stores.

Geräteorientierung und Standortbestimmung

Viele Apps nutzen die speziellen Gerätefunktionen, mit denen Smartphones und Tablets ausgestattet sind. Dazu gehört das Gyroskop, welches die Drehung eines Gerätes um die eigene Achse erkennt und so beispielsweise feststellt, ob ein Gerät im Portrait- oder Landscape-Modus gehalten wird. Das geht auch mit JavaScript.

window.addEventListener("deviceorientation", function() {
 console.log(e.alpha);
 console.log(e.beta);
 console.log(e.gamma);
}, true);

Im Beispiel werden über das Ereignis „deviceorientation“ drei Winkel ausgegeben, welche die aktuelle Drehung des Gerätes darstellen.

Ebenfalls häufig verwendet ist die Standortbestimmung per GPS. Neben Navigationsanwendungen sind es vor allem Apps sozialer Netzwerke, die gerne auf den jeweiligen Standort des Nutzers zugreifen. Auch dies ist per JavaScript möglich.

navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position.coords.latitude, position.coords.longitude);
});

Im Beispiel werden per „geolocation“ die Koordinaten des Längen- und Breitengrades ausgegeben. So lässt sich die jeweilige GPS-Position ermitteln.

Offline-Speichern per Application Cache

Native Apps haben gerade auf mobilen Geräten den Vorteil, dass sie einmal heruntergeladen werden und dann auch ohne Internetverbindung zur Verfügung stehen. Aber auch dies ist kein Grund, zwingend auf eine native App zu setzen. Denn der Application Cache von HTML5 erlaubt es ebenfalls, Dateien einer Webanwendung dauerhaft auf einem Gerät zu speichern.

Dazu wird im HTML-Element eine sogenannte Manifest-Datei referenziert, über die definiert ist, welche Dateien beim erstmaligen Laden der Seite auf dem Gerät gespeichert werden sollen.

<html manifest="example.appcache">

Die Manifest-Datei enthält dann aufgelistet alle Dateien der Website, die offline verfügbar gemacht werden.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Im Beispiel werden drei Dateien heruntergeladen und anschließend immer aus dem Application Cache geladen statt aus dem Internet.

Gestensteuerung

Während auf Desktopgeräten die Maus regiert, sind es auf Smartphones und Tablets die Finger. Neben einfachen Taps, die weitestgehend den Mausklick ersetzen, sind mit den Fingern auch sogenannte Gesten möglich. Am bekanntesten dürfte die Wischgeste stein, mit der beispielsweise Menüs ein- und ausgeblendet werden oder durch eine Bildergalerie geblättert wird.

Auch diese Funktionalität lässt sich per JavaScript realisieren. Hierzu gibt es verschiedene „touch“-Ereignisse, welche ähnlich funktionieren wie die „mouse“-Ereignisse. So stehen dir „touchstart“, „touchmove“ und „touchend“ zur Verfügung, mit denen die Position eines Fingers auf dem Display wiedergegeben wird. Dabei können mit den „touch“-Ereignissen auch mehrere gleichzeitig platzierte Finger registriert werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
}, false);

Über „changedTouches“ werden alle Berührungen auf dem Display als Array gespeichert. Im Beispiel werden die Koordinaten der jeweils ersten Berührung wiedergegeben.

Kamerazugriff

Noch relativ neu ist die Möglichkeit, auf Kameras per „getUserMedia()“ zuzugreifen. Hierzu wird zunächst ein leeres „<video>“-Element mit eingeschaltetem Autoplay platziert.

<video autoplay="autoplay"></video>

Anschließend wird per „getUserMedia()“ das Kamerabild dort hinein platziert.

navigator.getUserMedia ({
  audio: true,
  video: true
}, function (stream) {
  document.getElementsByTagName("video")[0].src = window.URL.createObjectURL(stream);
}, function() {
  console.log("Fehler");
});

„getUserMedia()“ erwartet drei Parameter. Zunächst definierst du, ob Video- und Audioinhalt übertragen werden sollen. Anschließend wird eine Funktion erwartet, die den Stream verarbeitet und im Beispiel dem „<video>“-Element übergibt. Als letztes muss noch eine Callback-Funktion her, die im Falle eines Fehlers aufgerufen wird.

Derzeit muss „getUserMedia()“ noch mit Vendor-Prefix – zum Beispiel „webkitGetUserMedia()“ – ausgezeichnet werden.

Web-Apps mit dem Web-Application-Manifest auf dem Startbildschirm platzieren

Im mobilen Chrome gibt es die Funktion „Zum Startbildschirm hinzufügen“. Hierbei wird ein Lesezeichen nicht im Browser, sondern auf dem Startbildschirm platziert. Über eine Manifest-Datei hast du die Möglichkeit, einen vom Seitentitel abweichenden Namen und ein eigenes Icon definieren.

Chrome und die Funktion „Zum Startbildschirm hinzufügen“
Chrome und die Funktion „Zum Startbildschirm hinzufügen“

Dazu muss die Manifest-Datei zunächst im HTML-Kopf definiert sein.

<link rel="manifest" href="manifest.json">

Anschließend wird in dieser Datei im JSON-Format festgelegt, wie das Lesezeichen auf dem Startbildschirm dargestellt werden soll.

{
  "name": "Demo",
  "icons": [{
    "src": "icon_36x36.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": 1
  }]
}

Im Beispiel werden per „name“ die Bezeichnung des Lesezeichens und per „icons“ eine Reihe von Dateien definiert, die Icons in unterschiedlichen Auflösungen und Pixeldichten referenzieren.

Auch das Verhalten der Anwendung, wenn sie über den Startbildschirm geöffnet wird, lässt sich festlegen.

"display": "standalone",
"orientation": "portrait"

Per „display“ wird eine Website zu einer Standalone-Anwendung. Hierbei werden Adressleiste und Menü des Browser ausgeblendet und die Website im Vollbild dargestellt. Per „orientation“ kannst du Portrait- oder Landscape-Modus vorgeben.

Fazit

Dank des Web-Application-Manifestes unterscheiden sich einmal auf dem Startbildschirm abgelegte, mobile Web-Apps kaum noch von nativen Apps. Mit Hilfe der zahlreichen JavaScript-APIs ist es zudem möglich, nahezu alle Features von Smartphones und Tablets zu nutzen, die auch native Apps nutzen können.

(dpe)

Kategorien
Design HTML/CSS UI/UX Webdesign

Mobile Navigation mit Taps und Gesten statt Maus

Das mobile Internet hat in vielerlei Hinsicht die Gewohnheiten, wann, wie und wo wir das World Wide Web nutzen, stark beeinflusst. So hat sich vor allem die Art und Weise, wie wir durch Websites navigieren, verändert. War die Maus bis vor einigen Jahren maßgeblich für die Navigation verantwortlich, sind es auf Smartphones und Tablets nun Taps und Gesten mit mehr oder weniger Fingerspitzengefühl. Zeitgemäße Websites sollten daher Taps und Gesten deutlich berücksichtigen, wenn es um Benutzeroberflächen und mobile Navigation geht.

Das Problem mit dem Hover

Grundsätzlich funktioniert die Navigation auf einem Smartphone oder Tablet  ohne besonderes Augenmerk auf Taps und Gesten zu setzen. Links werden statt Klick per Tap geöffnet und das Scrollen funktioniert per Wischen über das Display. Doch schon bei Hovereffekten, die im Webdesign gängig und beliebt sind, hat man auf Mobilgeräten so seine Probleme.

Denn ein Hovereffekt – beispielsweise per CSS-Pseudoklasse „:hover“ – existiert auf Mobilgeräten schlicht nicht und wird daher wie das Aufrufen von Links per Tap ausgelöst. Versiehst du also Links mit Hovereffekten, werden Linkaufruf und Hovereffekt auf Mobilgeräten zusammen ausgeführt. Im besten Fall sieht der Besucher den Hovereffekt für kurze Zeit, bis die im Link referenzierte Seite aufgerufen wurde.

hover-navigation
Navigation per Hovereffekt auf Fotolia

Als Webentwickler kannst du natürlich grundsätzlich auf Hovereffekte verzichten, um eine einheitliche Benutzeroberfläche auf Desktop- und Mobilgeräten zu garantieren. Oder du du entscheidest dich dafür, auf Desktop- und Mobilgeräte einen unterschiedlichen Ansatz zu wählen. Ist der Hovereffekt ausschließlich schmückendes Beiwerk, solltest du ihn auf Mobilgeräten einfach weglassen.

Werden Information wie Texte über einen Hovereffekt angezeigt, solltest du auf Mobilgeräten eine Möglichkeit finden, diese so darzustellen, dass sie ohne Hovereffekt sichtbar sind.

Media Query und „pointer“

Zwar gibt es per CSS keine explizite Möglichkeit, zwischen Steuerung per Maus und Touchdisplays zu entscheiden. Aber die „pointer“-Angabe erlaubt dir die Unterscheidung zwischen hoher und begrenzter Genauigkeit beim Zeiger. Bei Geräten mit Touchdisplays gibt „pointer“ den Wert „coarse“ aus, was für eine begrenzte Genauigkeit steht. Bei anderen Geräten wird „fine“ für eine hohe Genauigkeit ausgegeben.

@media (pointer: fine) {
  a:hover p {
    display: block;
  }
}

Im Beispiel wird ein Absatz innerhalb eines Links nur dann per Hover angezeigt, wenn du mit einem Gerät unterwegs bist, welches eine hohe Genauigkeit beim Zeiger aufweist, sie also mit der Maus gesteuert wird. Auf diese Weise hast du ohne Einsatz von JavaScript die Möglichkeit, das Aussehen deiner Website je nach Bedienkonzept – Maus oder Touch – zu steuern.

Links und Buttons brauchen Raum

Neben Hovereffekten gibt es noch einen weiteren Aspekt, den du bei der Gestaltung mobiler Benutzeroberflächen berücksichtigen solltest. Das sind die Größe und Abstände von Links und Buttons.

touch-navigation
Beispiel für Menüs mit ausreichender Größe: Google+ und FontShop

Während du mit der Maus recht genau auch kleine Links und Buttons zielsicher erreichst, ist ein Tap per Finger nicht ganz so zielsicher. Daher solltest du vor allem im mobilen Layout auf ausreichend große Elemente achten. Ebenfalls wichtig ist, dass du ausreichend Platz zwischen den einzelnen Elementen lässt. So verhinderst du, dass versehentlich ein falscher Link aufgerufen oder Button ausgewählt wird.

Willst du hier zwischen Desktop- und Mobilansicht unterscheiden, kannst du ebenfalls die „pointer“-Angabe nutzen, um beispielsweise Menüs und Formulare unterschiedlich zu gestalten.

Die Gestaltung solcher Elemente von der Displaybreite eines Gerätes – wie im responsiven Weblayout üblich – abhängig zu machen, ist wenig sinnvoll. Schließlich werden auch Tablets, auf denen in der Regel des Desktoplayout dargestellt wird, per Taps und Gesten gesteuert.

Auf Gesten per JavaScript reagieren

Standardmäßig werden Links und Buttons mit einem einfachen Tap auf Mobilgeräten ausgelöst. Aber du kannst auch auf Gesten reagieren, indem du Touch-Events einsetzt. Diese sind ähnlich aufgebaut wie die bekannten Mouse-Events. So gibt es Ereignisse, die zu Beginn und Ende einer Berührung, sowie während der Bewegung auf dem Display ausgelöst werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.touches[0].pageX);
  console.log(e.touches[0].pageY);
}, false);

Im Beispiel löst das Ereignis „touchmove“ eine Funktion aus, welche die Position der Berührung im Browser – „pageX“ und „pageY“ – in die Konsole schreibt. Über „touches[]“ werden im Übrigen alle Berührungen als Array erfasst. Sind also zwei Finger gleichzeitig auf dem Display, stehen dir mit „touches[0]“ „touches[1]“ beide Bewegungen und somit deren Positionen zur Verfügung.

hammerjs_gesten

Von Hammer-JS unterstützte Gesten

Auf diese Weise regierst du auf Wischgesten sowie auf Gesten zum Drehen und zum Vergrößern. Da JavaScript keine konkreten Gesten erkennt, musst du dir diese selbst mit den Touch-Events erstellen oder setzt auf entsprechende Frameworks wie Hammer.JS, welches bekannte Gesten kennt und auf solche mit individuellen Aktionen beziehungsweise Funktion reagieren kann.

Long-Tap ist das „neue“ Hover

Mit Hammer.JS realisierst du auch sogenannte Long-Taps. Dabei bleibt der Finger für eine kurze Zeit auf dem Display. Häufig wird ein solcher Long-Tap eingesetzt, um Kontext- oder Pulldown-Menüs aufzurufen.

Long-Taps haben den Vorteil, dass sie ähnlich wie der Hover-Effekt bei der Maus zwei verschiedene Aktionen für ein Element ermöglichen. So wird auf Desktopgeräten häufig mit der Maus ein Dropdown-Menüs per Hover-Effekt ausgeklappt wird, während der Klick einzelne Menüpunkte aufruft. Per Long-Tap realisierst du auch auf Mobilgeräten die Möglichkeit, ein Dropdown-Menü aufzuklappen, ohne direkt einen Menüpunkt aufzurufen.

Der Long-Tap kann auf Mobilgeräten somit als eine Art Hover-Ersatz genutzt werden. In jedem Fall solltest du berücksichtigen, ob deine Gesten und Taps intuitiv sind und vom Benutzer entsprechend angewendet werden können.

Fazit

Es ist nicht einfach, die gewohnten Bedienkonzepte, die wir mit der Maus kennen, auf Mobilgeräte und Touchdisplays zu übertragen. Allerdings haben sich in den letzten Jahren viele Gesten etabliert – Wisch- und Pinch-Gesten zum Beispiel –, die du in die Navigation deiner Website übernehmen kannst.

Auch der Long-Tap ist als Alternative für den Hovereffekt etabliert. Nichtsdestotrotz bleibt festzuhalten, dass beide Bedienkonzepte – Maus und Touch – ihre Unterschiede haben und diese auch Berücksichtigung finden müssen.

(dpe)

Kategorien
Design Editoren HTML/CSS Webdesign

XPRS: Responsiver, modularer und umfangreicher Websitebuilder

Unter den zahlreichen Websitebuildern sticht der XPRS Editor vor allem durch sein sehr elegantes und stimmiges Design hervor. Die Benutzeroberfläche ist sehr ansprechend und einfach zu bedienen. Wer auf zeitgemäßes Design und ebenso zeitgemäße Technik setzt, wird mit XPRS sehenswerte Websites erstellen können. Dabei werden auch Features wie das eigene Blog oder der eigene Shop unterstützt.

xprs

Umfangreiche und elegante Themes

Hast du dir einen kostenlosen Account beim XPRS Editor eingerichtet, wählst du zunächst ein Theme aus. Die Themes sind in zahlreiche Kategorien einsortiert, die sich unter anderem nach Branchen richten. Hier finden Kreative ebenso ein passendes Theme wie Restaurantbetreiber und Immobilienmakler.

xprs_themes
Übersicht einiger der zahlreichen Themes

Alle Themes sind responsiv und verfügen über eine umfangreiche Vorschau. So erhältst du zu jedem Theme eine Desktop- und Mobilansicht sowie die Vorschau zu einigen exemplarischen Seiten. Du weißt also bei der Auswahl deines Themes schon ziemlich genau, wie dieses später aussieht, wenn du deine Inhalte platzierst.

xprs_themes_vorschau
Vorschau eines Themes

Hast du dich für ein Theme entschieden, beginnst du direkt damit, die Inhalte deiner neuen Website zu bearbeiten.

Seite mit Segmenten bauen

Jedes Theme ist mit einigen exemplarischen Inhalten ausgestattet. Diese kannst du nutzen, um davon ausgehend die Startseite deiner neuen Website mit Inhalt zu befüllen. Alle Elemente einer Seite sind individuell anpassbar.

xprs_segmente
Aufteilung einer Seite in Segmente

Das Besondere am XPRS Editor ist der modulare Aufbau einer Seite mit sogenannten Segmenten. Segmente stellen unterschiedliche inhaltliche Bereiche einer Seite da. Texte, Bilder, Text-Bild-Kompositionen, Formulare und Galerien sind einige der zahlreichen Segmente, die du frei auf einer Seite platzierst.

Für jedes Segment stehen dir individuelle Einstellungen zur Verfügung. Welche Einstellungen das jeweils sind, hängt vom Segmenttyp ab. Bei einer Galerie wählst du beispielsweise die Platzierung der Bilder, die Anzahl der Bilder pro Reihe sowie den Abstand der Bilder zueinander aus.

xprs_segmente_auswahl
Auswahl eines der zahlreichen Segmente

Natürlich kannst du Segmente auch innerhalb einer Seite verschieben und sie auch wieder löschen. Ebenfalls möglich ist es, Segmente zu kopieren und an anderer Stelle deiner Website wieder einzufügen.

Um das responsive Weblayout der einzelnen Segmente musst du dir keine Gedanken machen. Der Websitebuilder sorgt automatisch dafür, dass alle Inhalte auch auf Mobilgeräten ordentlich aussehen.

Effekte hinzufügen

Kaum eine zeitgemäße Website kommt mittlerweile ohne Animationseffekte aus. Modernes CSS3 und JavaScript ermöglichen interessante Effekte, die du auch im XPRS Editor nutzen kannst. So gibt es klassische Hofer-Effekte, die du zum Beispiel in deiner Galerie anwendest.

xprs_effekte
Effekte zu einem Segment hinzufügen

Aus einer Liste wählst du einen Effekt aus. Dazu gehören Vergrößerungs- und 3D-Kippeffekte. Auch ist es mittlerweile üblich, beim Scrollen einer Seite jene Elemente, die in die Seite hinein gescrollt werden, mit einem Effekt zu versehen. Auch hierfür stellt dir der Baukasten Einiges zur Verfügung.

Eigener Shop in Kooperation mit Shoprocket

So einfach du eine Galerie zu deiner Seite hinzufügst, so einfach integrierst du auch einen eigenen Shop in deine Seite. Dazu hinterlegst du einfach ein Foto sowie eine Beschreibung für dein Produkt und gibst einen Preis an.

xprs_themes_ecommerce
Shop als Segment hinzufügen

Die komplette Kaufabwicklung einschließlich Warenkorb und Bezahlung wird vom XPRS Editor beziehungsweise vom Shopsystem Shoprocket übernommen. Dazu richtet dir XPRS automatisch einen Account bei dem Shopsystem ein. Über diesen Account verfolgst du deine Bestellungen und legst beispielsweise Zahlungsmethoden fest.

xprs_shoprocket
Anbindung an Shoprocket

Derzeit werden Zahlungen per Kreditkarte und per PayPal angeboten. Eine Zahlung per Bitcoins soll noch folgen.

Blog hinzufügen

Ähnlich einfach ist das Hinzufügen eines eigenen Blogs zu deiner Seite. Dieses ist ebenfalls als Segment vorhanden und wird einfach an einer beliebigen Stelle auf deiner Website platziert.

Dieses Segment stellt verlinkte Teaser zu den einzelnen Blogbeiträgen dar. Über die Einstellungen fügst du neue Beiträge zu deinem Blog hinzu und verwaltest bestehende.

xprs_blog
Einfaches Hinzufügen eines Blogs

Blogbeiträge stellst du dir wie andere Seiten ebenfalls sehr individuell zusammen, indem du Segmente hinzufügst. So kombinierst du Texte, Bilder und andere Elemente ganz nach Belieben.

Bilder lädst du ohnehin von deinem Rechner hoch und verwaltest diese über ein Media Center. Dort stehen dir auch eine Vielzahl frei verfügbarer Bilder zur Verfügung, die du beispielsweise für Blogbeiträge nutzen kannst.

Seiten verwalten und hinzufügen

Auch wenn One-Pager für Websites nach wie vor beliebt sind, erstellst du mit dem Websitebuilder natürlich auch komplexe Websites mit mehreren Seiten. Über die Seitenverwaltung legst du Seiten an und fügst ein Menü zu deiner Website hinzu.

xprs_website
Auswahl eines Menüs für deine Website

Es gibt klassische Seitenmenüs sowie jene, die am oberen Seitenrand fixiert sind. Du kannst dich auch für ein derzeit sehr beliebtes Burger-Menü entscheiden. Insgesamt stehen dir neun verschiedene Menütypen zur Auswahl.

Vorschau und Veröffentlichung

Sind alle Seiten angelegt und mit Inhalt gefüllt, kannst du dir diese für verschiedene Geräte als Vorschau anzeigen lassen. Neben der Desktopansicht siehst du dir deine Website für Smartphones sowie Tablets an.

xprs_vorschau
Vorschau auf verschiedenen Geräten

Für die Veröffentlichung deiner Website stehen dir verschiedene Möglichkeiten zur Verfügung. Falls du keine eigene Domain hast oder nutzen möchtest, legt dir der XPRS Editor eine URL an.

Darüber hinaus kannst du deine Website auch über eine eigene Domain laufen und auch eine Domain über den XPRS Editor registrieren lassen.

SEO und eigener Header

Damit deine neue Website auch gefunden wird, gibt es einige zusätzliche SEO-Eigenschaften. So legst du fest, ob Suchmaschinen deine Website überhaupt indizieren sollen. Außerdem gibst du Titel, Beschreibung und Schlüsselwörter an.

xprs_themes_seo
SEO-Einstellungen

Falls du Google Analytics nutzen möchtest, übergibst du dort einfach deine Tracking-ID. Alles andere regelt der XPRS Editor selbst.

Damit das Teilen auf sozialen Netzwerken auch gescheit aussieht, lädst du auf Wunsch auch eine Bilddatei hoch, die bei geteilten Links auf Facebook und Co. dargestellt wird.

Bedienung per App von unterwegs

Eine weitere Besonderheit des XPRS Editors ist die eigene App, die es dir erlaubt, deine Website auch von unterwegs zu pflegen.

Gerade wer ein Blog betreibt und auch von unterwegs Beiträge schreiben und veröffentlichen möchte, hat mit der App eine einfache und bequeme Möglichkeit.

xprs_app
Website bequem per App von unterwegs verwalten

Die App steht derzeit allerdings nur für iPhone und iPad zur Verfügung und ist über den Apple Store erhältlich.

Fazit und Kosten

Für Studenten, Künstler und Non-Profits ist die Nutzung des XPRS Editors kostenlos. Die kommerzielle Nutzung kostet 7,95 US-Dollar pro Monat. Für Reseller gibt es einen gesonderten Tarif für 350 US-Dollar im Jahr. Darin enthalten sind dann auch uneingeschränkt viele Lizenzen für deine Kunden.

Die Bedienung des XPRS Editors ist denkbar einfach. Dabei gibt es zahlreiche Features, mit denen du nahezu alle Wünsche berücksichtigen und Möglichkeiten moderner Websites ausschöpfen kannst.

Dabei sind die vorhandenen Themes durchaus anspruchsvoll und bieten für Websites, die keine allzu individuelle Gestaltung erfordern, gute Ergebnisse.

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
Design HTML/CSS Webdesign

Bewährt: Wie Du das optimale Print-Stylesheet erstellst

Auch heute gibt es noch viele Menschen, die sich das Internet ausdrucken möchten. Das kann verschiedene Gründe haben. Vielleicht will ein Team den Inhalt deines Beitrags im Meeting besprechen. Oder jemand möchte deinen Artikel dort lesen, wo er gewiss keinen Internet-Empfang hat. Um diese Menschen ansprechen zu können, benötigt jede Website immer noch eine CSS-Datei für den Druck, das sogenannte Print-Stylesheet.

Bewährt: Wie Du das optimale Print-Stylesheet erstellst

Viele Menschen drucken sich auch heute noch etliche Artikel aus, um sie offline lesen zu können. Diesem Umstand solltest du Rechnung tragen, wenn du keine Leser verlieren willst. Allerdings stellen sich zwei Hürden in den Weg des Druckens.

Erstens: Kaum ein WordPress-Theme hat heute noch ein Print-Stylesheet. Die Entwickler der Themes machen sich diese Mühe nicht, obwohl ein solches Druck-CSS einfach für mich zum guten Ton des Entwickelns zählt. Zweitens: Da kein Druck-Stylesheet vorhanden ist, hat der Endverbraucher, der das Theme einsetzt, auch keinen Drucken-Button zur Verfügung.

Daher zeige ich dir in diesem Beitrag, wie du ein Print-CSS erstellst, wo es in das Theme integriert werden sollte und wie man sich einen Druck-Button erstellen kann.

Das optimale Print-Stylesheet erstellen

Erstelle zuerst eine leere CSS-Datei mit einem reinen Text- oder HTML-Editor. Benenne sie print.css. Kopiere im Anschluss folgendes hinein:

Alle CSS-Einstellungen, die du nun tätigen möchtest, kommen zwischen das öffnende und das schließende Bracket.

1 – Seitenränder und Schriftgrößen festlegen

Zuerst legen wir die Abstände der Seitenränder fest, um ein optimales Ergebnis zu erhalten.

Ich empfehle, die obere Einstellung zu verwenden und die Seitenränder auf 2 cm einzustellen. Nachdem das Geschehen ist, können die Einstellungen der Schriftgrößen vorgenommen werden. Hierbei ist zu beachten, dass der Drucker andere Einheiten für die Schriftgröße benötigt, als ein Monitor. Daher muss von Pixel, Em und Rem in Points umgerechnet werden.

  • Pixels => Points
  • 6px => 5pt
  • 7px => 5pt
  • 8px => 6pt
  • 9px => 7pt
  • 10px => 8pt
  • 11px => 8pt
  • 12px => 9pt
  • 13px => 10pt
  • 14px => 11pt
  • 15px => 11pt
  • 16px => 12pt
  • 17px => 13pt
  • 18px => 14pt
  • 19px => 14pt
  • 20px => 15pt
  • 21px => 16pt
  • 22px => 17pt
  • 23px => 17pt
  • 24px => 18pt

Eine Schriftgröße von 12pt hat sich als optimal erwiesen. Nun hast du auch noch die Wahl, welchen Font du für den Druck verwenden möchtest. Eine gute Lesbarkeit auf einem gedruckten Blatt Papier bilden Schriftarten mit Serifen, wie zum Beispiel die Georgia.

2 – Pagebreaks einsetzen – Seitenumbrüche bestimmen

Mit den drei CSS-Eigenschaften page-break-beforepage-break-after und page-break-inside kann man genau bestimmen, ob und wo eine Druckseite umgebrochen wird. Verhindert werden soll damit zum Beispiel, dass Bilder in zwei Teile umgebrochen werden.

  • page-break-before bestimmt dabei, ob und wie ein Seitenumbruch vor diesem Element stattfindet.
  • page-break-after wiederum kümmert sich um Umbrüche nach einem Element
  • page-break-inside kümmert sich um einen eventuellen Umbruch innerhalb eines Elements, zum Beispiel der Bilder und Grafiken.

Auto ist der Standard des Druck-Elements, always setzt jedes Mal einen Umbruch, avoid verbietet den Umbruch und left und right ist gedacht für Folgeseiten, die entsprechend links oder rechts formatiert werden. Geschickt für den Druck eingesetzt sähen die Regeln so aus:

3 – Der Umgang mit Links

Links sollten deutlich gekennzeichnet werden, damit sie auffallen. Da sich Links auf einem Blatt Papier nicht anklicken lassen, müssen wir die Link-Ziele visualisieren. Das machen wir mit den folgenden Notierungen:

4 – Videos und andere iframes ausblenden

Videos darzustellen auf einem ausgedruckten Papier ergibt keinen Sinn. Setzt man die iframes jedoch einfach nur auf display: none, dann bleiben hässliche Abstände übrig. Mit dem folgenden Code setzt man die Abstände zurück und blendet iframes, sowie Videos vollständig aus.

5 – Unnötige Elemente ausblenden

Viele Bereiche einer Website sollten nicht gedruckt werden. Zum ersten stellen sie keine wichtigen Informationen bereit, zum zweiten kostet der Ausdruck dieser Bereiche unnötig teure Tinte oder Toner. Daher blenden wir alle Bereiche aus, die nicht von Wert sind.

Für dich bedeutet das, dass du in den Quellcode deiner Website eintauchen darfst, damit du die Bereiche findest, die nicht gedruckt werden sollten. Folgende Dinge bieten sich an, um sie auszublenden:

Der Header, die Navigationen, die Pagination, die Sidebar, die Tags und die Kategorien, die Kommentare, die Share-Buttons und weitere Elemente. Hier ein Auszug aus dem Print-Stylesheet meiner Website Techbrain.de:

6 – Nachrichten vor und nach dem Druck-Content einfügen

Manchmal kann es sehr praktisch sein, vor und nach dem eigentlichen Druck-Inhalt Nachrichten einfügen zu können. Mit einer solchen Nachricht kannst du dich vielleicht auch bei deinem Leser bedanken, der deinen Artikel ausgedruckt hat. Oder aber du kannst eine Copyright-Nachricht einblenden. Auch hier gilt es wieder, die richtige CSS-Klasse von deinem Inhaltsbereich zu finden.

Das komplette Druck-Stylesheet

Die richtige Location: wo gehört das print.css denn hin?

Die folgenden Funktionen gehören in die functions.php des Themes oder in ein seitenspezifisches Plugin.

Die korrekte Antwort wäre eindeutig in den Header. Folgende Funktion ist die richtige, wenn ein entwickeltes Theme in das offizielle Theme-Verzeichnis aufgenommen werden soll:

Solltest du jedoch dein eigenes Theme mit einem Druck-Stylesheet versorgen wollen, dann ist die oben beschriebene Art nicht unbedingt optimal. Erstens wird das CSS auf allen Seiten geladen, nicht nur auf den einzelnen Artikeln, zweitens blockiert es den Seitenaufbau und macht deine Website ein wenig langsamer. Daher:

Jedes nicht zum Seitenaufbau im sichtbaren Bereich nötige CSS gehört in den Footer!

Zudem sollte es nur geladen werden, wenn die single.php mit den einzelnen Artikeln aufgerufen wird. Es dürfte kaum jemanden geben, der deine Startseite drucken möchte.

Daher lassen wir das Stylesheet in den Fußbereich der Website laden.

Benutzerfreundlichkeit: einen Druck-Button erstellen

Wenn du deinen Lesern ein gut gemachtes Druck-Stylesheet anbietest, dann wäre es vorteilhaft, wenn du auch einen Button zum Ausdrucken in dein Theme einbauen würdest. Die Vorgehensweise ist recht einfach, der Button kann mit CSS so designed werden, wie du es möchtest. Der Code auf meiner Website sieht so aus:

Im Theme kann dieser Button dann mit einem einfachen <?php ah_print_button();?> überall aufgerufen werden, wo er erscheinen soll.

Wenn du eine Demo des Druck-Stylesheets und des Buttons möchtest, dann schaue vorbei auf TechBrain.de. Dort findest du den Button unterhalb der Artikel und kannst dir anschauen, wie meine Druckansicht aussieht.

Der Artikel entstand als Erweiterungsidee zum Beitrag: Webseiten druckerfreundlich machen und Druckkosten sparen

(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
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)