Webdesign

Design

Adobe: Flash ist tot, es lebe Animate CC

11. Februar 2016
von
Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Design

Performance steigern: SVG-Icons als Sprite sparen Requests

9. Februar 2016
von
Performance steigern: SVG-Icons als Sprite sparen Requests

Sprites sind eine beliebte Möglichkeit, mehrere Icons innerhalb einer Grafikdatei unterzubringen und immer nur einen Ausschnitt dieser Grafik per CSS auszugeben. Der Vorteil einer solchen Lösung ist, dass mehrere Requests vermieden werden. Statt einzelne Icon-Dateien zu laden, muss nur eine Datei aufgerufen werden. Auch Iconfonts haben den Vorteil, dass nur eine Datei für alle Icons geladen werden muss. Wenn du auf SVG-Icons setzt, kannst du in diesem Format ein Sprite erstellen, dessen Umgang in der Praxis sogar deutlich einfacher ist als klassische Icon-Sprites.

Design

SVG-Filter: So wendest du sie auf HTML-Elemente an

4. Februar 2016
von
SVG-Filter: So wendest du sie auf HTML-Elemente an

Mit der Hilfe von CSS3 fügst du einem Element unter anderem Unschärfe, Schlagschatten, Helligkeit und Kontrast  hinzu. Insgesamt zehn solcher Filter stehen dir zur Verfügung. Auch das SVG-Format kennt Filtereffekte. Teils überschneiden sich die Möglichkeiten, so etwa bei der Unschärfe. Aber das SVG-Format kennt eine Reihe zusätzlicher Filter, die mit CSS3 allein nicht zu realisieren sind. Ohne großen Aufwand fügst du aber beliebige SVG-Filter einem HTML-Element hinzu.

Design

Die schönsten Layer-Fonts und wie man sie im Webdesign verwendet

1. Februar 2016
von
Layer-Fonts im Webdesign

Dass eine Schrift auch mal mehrfarbig gesetzt sein kann, ist keine Erfindung der digitalen Typografie. Bereits im 19. Jahrhundert gab es Schriften, die in zwei oder mehr Schnitte aufgeteilt waren, sodass man sie mehrfarbig übereinander drucken konnte. Mit dem OpenType-Format gibt es solche sogenannten Layer-Fonts auch für den digitalen Einsatz. Gerade für 3D- und Schatteneffekte sind mittlerweile zahlreiche Schriften auf dem Markt, welche eine mehrfarbige Darstellung ermöglichen. Und dank der Webschriften kannst du solche mehrfarbigen Texte sogar im Webdesign verwenden.

Inspiration

Design: 46 coole Blog-Header zu deiner Inspiration

29. Januar 2016
von
Design: 46 coole Blog-Header zu deiner Inspiration

Viele Menschen vertreten die Meinung, dass es nicht so wichtig sei, welches Design der eigene Blog hat. Man besorgt sich ein kostenloses Theme, installiert es und fertig. Denn schließlich geht es ja um den Inhalt – Content is King. Das höchste der Gefühle ist noch ein eigenes Logo. Doch ganz so einfach sollten wir es uns nicht machen. Denn das Design eines Blogs ist nicht unwichtig. Es geht um den Wiedererkennungseffekt, um eine eigene Identität. Jeder halbwegs professionell geführte Blog sollte daher ein individuelles, unverwechselbares Design besitzen.

Design

Sicher surfen: Chrome-Entwicklertools mit neuem Security-Panel

26. Januar 2016
von
Sicher surfen: Chrome-Entwicklertools mit neuem Security-Panel

Sicheres Surfen ist ein Thema, mit dem sich auch Webentwickler zu beschäftigen haben. Gerade im Umgang mit persönlichen Nutzerdaten ist es wichtig, dass diese verschlüsselt übertragen werden. Doch die Umsetzung sicherer Übertragungen mittels HTTPS ist nicht immer einfach. Gerade bei komplexen Webprojekten werden häufig viele externe Quellen eingebunden, die eine Verbindung nicht durchgängig sicher machen. Das neue Security-Panel der Chrome-Entwicklertools unterstützt dich bei der Umsetzung sicherer Übertragungswege für dein Webprojekt.

JavaScript & jQuery

A-Frame macht virtuelle Realitäten lebendig

23. Januar 2016
von
A-Frame macht virtuelle Realitäten lebendig

Virtuelle Realität spielt eine immer größere Rolle im World Wide Web. JavaScript und moderne Browser machen es mittlerweile grundsätzlich möglich, dreidimensionale Welten zu erschaffen, in denen man sich bewegen kann. Mit dem JavaScript-Framework A-Frame baust du dir auf der Grundlage einer eigenen Auszeichnungssprache schnell solche virtuelle Realitäten.

JavaScript & jQuery

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

21. Januar 2016
von
fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Gerade bei kleinen Webprojekten sind One-Pager sehr beliebt. Anspruchsvoll und großzügig gestaltet, sorgen sie oft für maximale Aufmerksamkeit. Mit dem jQuery-Plugin fullPage.js erstellst du auf einfache Weise „mehrseitige“ One-Pager. Das Plugin sorgt dafür, dass einzelne Bereiche eines HTML-Dokumentes seitenfüllend dargestellt und per Navigation oder auch per Scrolling animiert gewechselt werden.

Bilder & Vektorgrafiken bearbeiten

Satyr.io stellt Dummies zum Testen von Websites bereit

19. Januar 2016
von
satyr

Bevor eine Website an die Öffentlichkeit geht, sollte man sie testen. Gerade bei responsivem Layout ist es wichtig, abzuklären, ob Bilder bei verschiedenen Browserauflösungen beziehungsweise auf Mobilgeräten richtig dargestellt werden. Wird die richtige Datei ausgegeben? Wie verhält sich das Laden von Bildern bei langsamer Internetverbindung? Satyr.io ist ein Dienst, der Dummy-Bilder erstellt, mit denen du deine Webprojekte in dieser Hinsicht einmal prüfen kannst.

HTML/CSS

Firefox Developer Edition: Der Browser für Entwickler

18. Januar 2016
von
Firefox Developer Edition: Der Browser für Entwickler

Mittlerweile stellt jeder Browser Entwicklerwerkzeuge zur Verfügung, mit denen du Webprojekte ausgiebig auf Gestaltung und Funktionalität prüfen kannst. Standardmäßig gehören das Debugging von JavaScript und das Inspizieren des Quelltextes dazu. Mozilla hat mit dem Firefox Developer Edition einen eigenen Browser entwickelt, der sich ganz besonders an Webentwickler richtet und ihnen mit speziellen Tools hilft, eine Website ausgiebig zu prüfen. Dazu gehört nun auch das ausgiebige Testen von CSS3-Animationen und -Transitions.

Design

Wix 2016: Neuer Editor, Musik-Store und mehr

14. Januar 2016
von
Wix 2016: Neuer Editor, Musik-Store und mehr

Mit Wix ist seit Jahren ein Homepage-Baukasten auf dem Markt, der das Erstellen ansprechender und zeitgemäßer Websites vereinfachen und professionalisieren will. Zahlreiche Vorlagen und umfangreiche Bearbeitungsmöglichkeiten zeichnen Wix aus. Da sich Trends und Techniken gerade bei Webdesign und -entwicklung schnell ändern, hat Wix soeben einen rundum erneuerten Editor mit neuen Features herausgebracht. So unterstützt Wix nun auch den Trend, Videos als Hintergrund einzusetzen, sowie das nach wie vor sehr beliebte Parallax-Scrolling.

Design

Simbla 2016: Responsive Websites für jedermann

13. Januar 2016
von
Simbla 2016

Dank zahlreicher Baukästen und Website-Builder ist es möglich, sich im Handumdrehen – und ohne Kenntnisse in HTML, CSS und JavaScript – eine eigene Website zusammenzustellen. Oftmals mangelt es diesen Websites an gestalterischer, aber auch technischer Qualität. Simbla ist ein Website-Builder, der sich sowohl an Profis richtet, die selbst per HTML auszeichnen können, als auch an Laien, die einfach per Drag-and-Drop eine Website bauen möchten. Die mit Simbla erstellten Websites sind darüber hinaus vollständig responsiv und somit für die Darstellung auf Mobilgeräten wie Tablets und Smartphones geeignet.