Boilerplates nennen sich die einzelnen Textbausteine, die eine stets gleichlautende Textpassage darstellen. Sie kommen beispielsweise am Ende einer Pressemitteilung vor, allerdings werden sie abseits dessen auch als HTML5-Element verwendet. Dort bietet es gerade für neue Projekte eine große Fülle an Codeschnipseln, die das Erstellen der Homepage vereinfachen und in der CSS.htaccess-Datei verwendet werden.
Immerhin zwei Jahre Entwicklung hat das Template Boilerplate hinter sich und wurde von Paul Irish erstellt, dessen Ziel es war, möglichst viele Best-Practice-Lösungen einzelner Web-Entwickler in einem einzigen Paket zusammenzufassen. Boilerplate lohnt sich insofern, da die heutigen Anforderungen an Websites immer höher liegen: so sollen sie unter anderem performant sein, Barrierefreiheit bieten, browserübergreifend funktionieren und möglichst auch noch auf dem Smartphone dargestellt werden können. Das Boilerplate stellt in dieser Hinsicht eine sinnvolle Basis dar und bietet ein Template, welches all dies und noch mehr gewährleisten kann. Boilerplate kommt in zwei Versionen daher: eine davon ist dokumentiert und enthält Verweise auf zusätzliche Informationen, die andere ist hingegen für den echten Einsatz gedacht.
Abgesehen von Boilerplate gibt es außerdem noch eine ganze Reihe weiterer nützlicher Tools, die bei der Website-Erstellung hilfreich sein können. Unter anderem bieten sich dafür bereits kleine Apps auf dem Smartphone an, aber auch Frameworks sowie besondere Entwicklertools für den Browser können eine sinnvolle Ergänzung bei der täglichen Arbeit sein. Ebenso gibt es passende Tools, die bei der Texterstellung helfen oder einfach als Hilfe zum Einstieg in die Thematik dienen.
Mehr wissen
Was Navigationsgeräte schon lange können, können nun auch die Browser. SpeechSynthesis aus der Web-Speech-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich deine Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen.
Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem Erfinder dazu, seine Philosophie unter einprägsamem Namen verbreiten zu können. Dennoch lohnt es, sich mit den Inhalten auseinander zu setzen.
Bootstrap ist nicht umsonst so populär. Aber, wenn du denkst, es gibt nichts besseres, schau dir mal Propeller an.
Dieser Tage entstand eine hitzige Debatte, als Chris Coyier von CSS Tricks sich erlaubte, darauf hinzuweisen, dass die Zielerreichung (das What) wichtiger ist als das Tool, mit dem das Web-Angebot realisiert wurde (das How). Natürlich hat er Recht.
Das Abarbeiten von Checklisten hilft nachgewiesenermaßen dabei, die Qualität dessen zu verbessern, für das die jeweilige Checkliste entworfen wurde. Die Front-End Checklist von David Dias widmet sich dem Thema Webentwicklung und lässt keine Aspekte vermissen.
UI-Kits gibt es viele, auch kostenlose. Shards von Designrevision ragt dennoch aus der Masse, weil es nicht nur kostenlos, sondern auch ausgesprochen ansehnlich und modern ist.
Freelancer, die ihr Geld mit Kundenprojekten verdienen, haben wenig Zeit für brandneue Technologien. Mit Hologram kannst du einen Blick auf WebVR werfen, ohne dabei ganze Monatseinkommen zu verlieren.
Mit Mavo kannst du Web-Apps erstellen, die Daten speichern und verarbeiten, ohne dass du dazu programmieren können müsstest. Mavo ist eine Erweiterung zu HTML und sehr einfach zu erlernen.
Ohne Boilerplates und Frameworks ist die Entwicklertätigkeit nur noch schwer vorstellbar. Mittlerweile haben wir uns doch alle an den Einsatz dieser mehr oder weniger schlanken Projektbeschleuniger gewöhnt. Das Problem ist nur, die Übersicht zu behalten.
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.
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.
Erstellt von: divtable
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
Hammer bringt Gesten-Support und minimiert die Klickverzögerung.
Erstellt von: freie Kontributoren
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
Diese Animations-Engine ist nicht nur zu schicken, sondern auch zu schnellen Resultaten zu gebrauchen. Fallbacks bringt sie überdies mit.
Erstellt von: thednp
Lizenz: MIT-Lizenz, also kostenlos verwendbar.
Bless CSS bringt Lösungen für den schlechtesten Browser der Welt. Du weißt schon, welchen ich meine.
Erstellt von: Paul Young
Lizenz: mitgelieferte Lizenz beachten
Die Patterns Library liefert eine Sammlung fertiger Interaktions-Patterns, die du mittels CSS-Klassen und HTML-Attribute an den Start bringst.
Erstellt von: patternslib
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
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.
Erstellt von: ben-eb
Lizenz: kostenlos verwendbar unter MIT-Lizenz
Egjs bietet ein Bündel an interaktiven UI-Elementen mit schönen Effekten.
Erstellt von: Naver Corp
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
Mit den GLSL-Transitions zauberst du fantastische Bildeffekte.
Erstellt von: Glslio
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
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.
Erstellt von: Elior Shalev Tabeka
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
Bootstrap 4 ist kurz vor da. Dieses Cheat-Sheet hilft dir beim Einstieg.
Erstellt von: Bootstrap Creative
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
Libraries.io ist ein neues Projekt für Webdesigner und Entwickler. Es hilft dir dabei, Bibliotheken, Module und Frameworks aus dem Open-Source-Ozean zu fischen.
Ein paar benannte Textfelder und ein deutlicher Call-to-Action am Ende – genau so sieht ein gewöhnliches Kontaktformular aus. Na ja, das kann ja kein Problem sein. Macht man mit links. Freu dich nicht zu früh, es gibt einige Stolperfallen. Soll dein Feedback-Formular responsiv, angetrieben durch Bootstrap oder komplett benutzerdefiniert sein? Du wirst auf jeden Fall mit CSS-Styles, JavaScript-Bibliotheken und modernen HTML-Funktionen rumspielen, um das perfekte Formular zu erstellen.
Glücklicherweise gibt es eine Reihe von guten und verlässlichen vordefinierten Lösungen im Internet, die dir einen Teil der Arbeit abnehmen oder zumindest einen perfekten Start bereiten können. So sparst du viel Zeit. Heute haben wir 20 Codepens versammelt, die klare, elegante und problemlose Kontaktformulare enthalten. Einige von ihnen können und müssen schnell oder auch umfangreich angepasst werden, während andere mit ihren speziellen Layouts oder begleitenden Effekten ihren Platz in deinen Projekten auch ohne größere Änderungen finden können.
Schön dezentes, DSGVO konformes kostenloses Formular
Erstellt von: Michael Knothe, kontaktformular.com
Erstellt von: Mary Lou
Erstellt von: Lentie Ward
Erstellt von: Nikhil Krishnan
Erstellt von: nick haskell
Erstellt von: Mark Murray
Erstellt von: Craig Wheeler
Erstellt von: Danny Beton
Erstellt von: David Fitas
Erstellt von: Zach Saucier
Erstellt von: Iulian Savin
Erstellt von: Greg Sweet
Erstellt von: Trevor L.J.M. McIntire
Erstellt von: CrocoDillon
Erstellt von: Matheus Marsiglio
Erstellt von: And Studio
Erstellt von: Tim Robert-Fitzgerald
Erstellt von: Greg Sweet
Erstellt von: Daryll Doyle
Erstellt von: Peter Kullmann
Erstellt von: Geert-Jan Hendriks
Mit Animate CC hat auch Adobe das Ende von Flash eingeläutet. Zwar unterstützt das umbenannte Animationsprogramm nach wie vor Flash, aber der Schwerpunkt liegt auf HTML5 und WebGL. So entscheidest du vor jedem neuen Projekt, ob du eine Animation per HTML5-Canvas oder per WebGL erstellen möchtest. Animierte SVGs waren mit Animate CC bislang allerdings nicht möglich. Die Erweiterung „Snap.SVG Animator“ erweitert den Funktionsumfang von Animate CC genau um diese Möglichkeit.
Das Framework Snap.SVG
Das Besondere an Flash war immer, dass es vektorbasierte Grafiken und Animationen in den Browser brachte. Das war in Zeiten vor SVG nicht möglich. Abgesehen von Schriften kamen nur pixelbasierte Formate wie JPEG und GIF zum Einsatz. Mit der Einführung von HTML5 wurde auch das XML-basierte SVG-Format beliebter, welches ähnlich wie Flash vektorbasiert und animierbar ist.
Damit hat das SVG-Format einen entscheidenden Vorteil zu HTML5-Canvas, welches Animationen nur pixelbasiert ermöglicht. Gerade beim Heranzoomen wird der Nachteil dieses Formates zu SVG deutlich. Da Animate CC grundsätzlich vektorbasiert ist, bietet es sich freilich an, vektorbasierte Ausgabeformate bereitzustellen.
Da SVG-Animationen jenseits der CSS3-Eigenschaften „transition“ und „animation“ per JavaScript realisiert werden, gibt es zahlreiche Frameworks, die dich dabei unterstützen, komplexe animierte SVGs zu erstellen. Eines der bekanntesten Frameworks ist Snap.SVG. Dieses stellt dir zahlreiche Methoden zur Verfügung, mit denen du Formen erstellst und diese auf unterschiedliche Art und Weise animierst.
Dabei erlaubt dir Snap.SVG eben auch interaktive Animationen, die per Klick oder Tap ausgelöst werden. Wer einen Blick in die Dokumentation von Snap.SVG wirft, stellt schnell fest, wie umfangreich das Framework ist. Mit der Animate-Erweiterung „Snap.SVG Animator“ wird die einfache Handhabung von Adobe Animate CC mit der komplexen Vielfalt von Snap.SVG kombiniert.
Zunächst einmal musst du die kostenlos verfügbare Erweiterung „Snap.SVG Animator“ installieren. Du findest diese auf der Website der Adobe Add-ons. Die Erweiterung ist sowohl für die Windows- als auch für die Mac-Version von Adobe Animate CC verfügbar. Du installierst die Erweiterung entweder manuell oder direkt über die Creative Cloud.
Erweiterung für Animate CC
Sobald „Snap.SVG Animator“ installiert ist, findest du in Animate CC den neuen Dokumenttyp „SnapSVGAnimator“. Du wählst also nicht nur zwischen HTML5, WebGL und ActionScript aus, sondern erhältst nun auch die Möglichkeit, ein SVG-Dokument anzulegen. Wie bei den anderen Dokumenttypen ist ein nachträglicher Wechsel nicht möglich.
Neuer Dokumenttyp in Animate CC nach Installation der Erweiterung
Du musst dich also zu Beginn eines neuen Projektes entscheiden, in welchem Format du entwickeln und gestalten möchtest. Anschließend arbeitest du ganz wie gewohnt mit Animate CC. Das heißt, du legst Formen an, konvertierst sie in Symbole und erstellst Animationen.
Dabei besteht die Möglichkeit, mit „Snap.SVG Animator“ interaktive SVG-Animationen zu erstellen. Während dir bei HTML-Canvas und WebGL Codefragmente zur Verfügung stehen, die du relativ einfach in dein Aktionen-Fenster ziehst, gibt es solche Fragmente beim Typ „SnapSVGAnimator“ nicht. Allerdings steht eine übersichtliche API mit den wichtigsten Methoden bereit.
So definierst du eine Klick-Aktion für eine Symbolinstanz sehr einfach.
this.beispiel.click(function() {
this.beispiel.play();
});
Im Beispiel wird beim Klick auf die Instanz „beispiel“ diese abgespielt.
Das Veröffentlichen deines SVG-Dokumentes ist ebenfalls einfach und unkompliziert. Du gibst eine Ausgabedatei an und hast die Möglichkeit, über die erweiterten Einstellungen die Komprimierung der auszugebenen Dateien zu beeinflussen.
Die Ausgabe enthält neben einer HTML- und einer JSON-Datei zwei JavaScript-Dateien. Diese beinhalten das Snap.SVG-Framework, sodass alle notwendigen Dateien von Animate CC beziehungsweise der Erweiterung generiert werden und zur Verfügung stehen.
(dpe)
Heute möchte ich dir Codester vorstellen. Codester ist ein brandneuer Marktplatz für Entwickler und Designer. Hier kannst du Code Schnipsel, Skripte, Themes, Plugins und vieles mehr kaufen, um dein nächstes großes oder kleines Projekt aufzupolieren. Fertige Komponenten zu benutzen, spart Zeit und Zeit ist – wie wir alle wissen – Geld. Also nimm dir fünf Minuten und lies den folgenden Artikel.
Skript-Verzeichnisse waren eine große Sache Ende der Neunziger und noch zu Beginn des neuen Jahrtausends. Ich kann mich noch gut an das bekannteste von ihnen, HotScripts.com, erinnern. HotScripts war die Lösung für jede Aufgabe, dieirgendwas mit Programmierung zu tun hatte. Später wurde HotScripts dann von einem bekannten Websiteaufkäufer aufgekauft. Danach passierte leider nicht mehr viel. Und auch, wenn sie heute noch existieren, befinden sie sich seitdem in einem Stillstand. Besuch die Seite besser nicht, wenn du sie noch von früher kennst. Das würde nur deine nostalgischen Erinnerungen an vergangene Tage zerstören.
Ich bin im letzten Jahrzehnt keinem ähnlichen Service begegnet. Obwohl es keinen Mangel an Marktplätzen für Designer gibt, müssen Entwickler sich mit einer anderen Wahrheit auseinandersetzen. Aber: im Sommer diesen Jahres hat eine kleine Gruppe motivierter Entwickler eine Lösung für dieses Problem ersonnen. Willkommen, Codester.com, ein schnell wachsender, würdiger Nachfolger des vorher erwähnten Dinosauriers.
Codester spricht sowohl Designer als auch Entwickler an. Dabei haben jedoch alle angebotenen Elemente, zumindest zur Zeit, einen entwicklungsorientierten Touch. Nehmen wir die Grafikabteilung als Beispiel. Hier stellt Codester Benutzeroberflächen, Spiele-Code und Mockups neben Icons und Logos zur Verfügung. Das ist keine Spielzeugkiste für selbstverliebte Designer. Hier will keiner eine freundliche Bestätigung seines guten Geschmacks erheischen. Hier geht es darum, Arbeit zu erledigen. Dass Codester im Moment nicht allzu viele Dinge im Angebot hat, solltest du nicht als allzu großen Nachteil empfinden. Sie haben immerhin gerade erst angefangen.
Wenn du dir die Hände wirklich schmutzig machen möchtest, wühl dich durch die Skript & Code-Abteilung, in der du Lösungen in PHP, JavaScript, Ruby, Python, Java, C, C++, C# und VB.Net finden wirst. Aktuell hat zwar nur die PHP-Kategorie eine nennenswerte Sammlung an Skripten anzubieten, aber die Leute hinter Codester arbeiten aktiv daran, das Portfolio schnell zu erweitern.
Wenn du ein App-Entwickler bist, solltest du den Bereich Mobile Apps besuchen, wo du vielleicht genau den einen Code-Schnipsel für iOS, Android, Unity, Corona oder Titanium findest, nach dem du die letzten fünf Nächte gesucht hast.
Heutzutage sind zwar einzelne Skripte immer noch nützlich und gefragt, aber die größere Nachfrage kommt von Entwicklern aus der CMS-Branche. Es ist sicherlich möglich, jedes gegebene Skript so zu verändern, dass es mit jedem CMS funktioniert. Das kann ich für WordPress fast uneingeschränkt bestätigen. Allerdings ist es effizienter, sich direkt für ein Skript-Modul, Plugin, Erweiterung, oder wie auch immer die Namenskonventionen deines CMS sein mögen, zu entscheiden und es in dem Umfeld, für das es gemacht wurde, zu benutzen.
Codester ist derselben Meinung und bietet eine Vielfalt an Plugins für WordPress, Joomla, Drupal, Magento, Prestashop, osCommerce, X-Cart und Opencart an. Themes, auch wenn sie sich mehr auf das Design beziehen, kombinieren Form und Funktion, um letztendlich die gewünschte Nutzererfahrung zu erreichen. Daher ist es konsequent, dass Codester einen separaten Abschnitt mit Themes, verfügbar für WordPress, Magento, Joomla, Drupal, Prestashop, Opencart, Muse, Tumblr und Ghost unterhält. Arbeitest du ganz ohne CMS, ist vielleicht die Sammlung von HTML-Templates am gleichen Ort interessant.
Codester ist auf Wachstum ausgerichtet und direkt so gebaut worden, dass es auch mit großen Beständen virtuos umgehen kann. Zurzeit kannst du einfach durch die Hauptabschnitte und Kategorien browsen. Darunter ist keine einzige, die man nicht innerhalb von ein paar Minuten durchscrollen kann. Sollte das Wachstum aber mit konstantem Tempo voranschreiten, wird sich das in wenigen Monaten deutlich verändert haben. Das Team hat vorgesorgt und den Service so strukturiert, dass es auch dann noch leicht sein wird, das benötigte Werkzeug zu finden, wenn es tausende Skripte, Themes oder was auch immer zu filtern gibt.
Der offensichtlichste Weg, eine Lösung auf Codester zu suchen, ist es, die obere Suchleiste auf der Startseite zu verwenden. Gib deinen Suchbegriff ein und schau, was Codester dazu findet. Das ist nicht sehr effizient, sobald du bereits in der Lage bist, deine Parameter etwas einzuschränken, was bei einem typischen Entwicklungsprojekt höchstwahrscheinlich der Fall sein wird. Codester arbeitet nicht mit zusätzlichen Tags, um bestimmte zusammengehörende Inhalte zu gruppieren – zumindest nicht von der Suchleiste aus.
Daher ist der empfehlenswertere Weg an die Inhalte zu komme,n das Browsen durch die Kategorien. Sobald du eine beliebige Kategorie auswählst, wird dir ihr Inhalt in einer Rasterübersicht präsentiert. Von diesem Raster aus, kannst du die Detailseite eines jeden Elementes öffnen, um zu weiteren INformationen zu gelangen. Die wichtigsten Informationen findest du aber bereits direkt im Übersichtsgrid. Dort kannst du den Preis, ein Vorschaubild, eine kurze Beschreibung und die Zielplattform sehen. Videos und Live-Previews sind auch über das Raster zugänglich. Also kannst du deine Wahl schnell auf ein oder zwei Angebote einschränken, die dich wirklich interessieren.
Mit einem Klick auf die Vorschau des Elements öffnet sich die Detail-Seite. Diese erfüllt das, was ihr Name verspricht. Hier findest du sämtliche wichtigen Information zum Produkt. Die Beschreibungen sind ausführlich, Screenshots gibt es wie Sand am Meer. Hier befindet sich auch eine Box mit zusätzlichen Tags, die das jeweilige Tool zusätzich kategorisieren. Ein Klick auf einen der Tags, öffnet ein weiteres Grid, das alle Produkte aus Codesters Portfolio zeigt, denen dasselbe Tag zugeordnet wurde.
Die Detail-Seite ist in vier Segmente eingeteilt, bei denen die Übersicht die Standardansicht nach dem Öffnen der Seite ist. Es gibt Tabs für Bewertungen, Support und FAQ. Der Support-Tab bietet eine direkte Support-Möglichkeit, ähnlich eines Kommentarbereiches in einem CMS. Jeder mit einem Account kann Fragen stellen, während nur tatsächliche Käufer eines Produktes Bewertungen zu diesem Produkt veröffentlichen können. Ein FAQ-Bereich beantwortet schon mal die häufigsten Fragen, um den Support-Bereich zu entlasten.
Share-Buttons erlauben es dir, Codester-Inhalte auf Facebook, Twitter, Google+, Pinterest, LinkedIn oder per E-Mail zu teilen. Ein Partnerprogramm ist jedem zugänglich und bietet 10 Prozent Kommission für jeden Käufer, der auf deine Empfehlung hin gekauft hat.
Die Kosten der einzelnen Elemente variieren stark, die Lizensen aber nicht. Zur Wahl steht jeweils die reguläre und die erweiterte Lizenz. Die (günstigere) reguläre Lizenz erlaubt, das gekaufte Produkt in einem deiner Projekte, ob privat, kommerziell oder für einen Kunden, zu verwenden. Die erweiterte Lizenz bietet dasselbe, mit der Ausnahme, dass das Produkt bei dieser Lizenz für eine unbegrenzte Anzahl von Projekten benutzt werden kann. Du darfst lediglich die Produkte nicht als solche verkaufen, aber das sollte ohnehin selbstverständlich sein.
Wie man es von einem Marktplatz erwartet, bietet Codester keine eigenen Produkte an, sondern arbeitet als eine Art Mittelsmann für talentierte Entwickler und Designer, die daran interessiert sind, ihre Skripte, Plugins, Themes, Quellcodes an die Welt zu verkaufen. Hier mitzumachen ist ganz einfach.
Codester hat sehr wenige, dabei sehr gerechte Bedingungen für Verkäufer. Verkäufer verdienen 70 Prozent von jedem Kauf. Es gibt keine Mindestanzahl an Verkäufen, ebenso keine Mindestmenge an aufgelaufenen Beträgen, bevor man eine Auszahlung anfordern kann, nichts. Die Bezahlung erfolgt über PayPal oder Wire am Ende jeden Monats. Es gibt keine zusätzlichen Gebühren oder andere Haken und Ösen.
Mir gefällt das Projekt. Codester ist eine gut gestaltete, sorgfältig geschriebene Marktplatzumgebung mit Fokus auf Entwickler und das ist eine gute Sache an sich. Codester braucht viel mehr Beteiligung durch die Community, sei es durch mehr Angebote in den verschiedenen Kategorien oder mehr Interaktion mit den bereits existierenden Angeboten. Hier kommst du ins Spiel. Schau dir Codester an und mach dir ein eigenes Bild. Unterstütz es, wenn es dir gefällt.
„Wer suchet, der findet.“ In Kenntnis der intelligenten, nahezu allumfassenden Suchmaschine Google ist es ziemlich schwer, dieses Zitat zu bestreiten. Wenn die Zeit allerdings gegen dich spielt, wirst du um effiziente Wege, den Prozess etwas zu verkürzen, kämpfen. In diesem Fall sind Verzeichnisse, Sammlungen und Artikel mit einem schnellen Zugang zu einer Masse von hilfreichen Links und Ressourcen, die dich schnell mit den benötigten Elementen versorgen, sehr willkommen. So baust du dir einen Werkzeugkasten auf, der immer weiter gefüllt werden kann. Der folgende Artikel könnte ein Teil dieses Kastens sein.
Wenn du auf der Suche nach ein paar gutaussehenden, professionell angefertigten Bootstrap-Schablonen bist, die entweder als Startpunkt für eine weitere Umwandlung zu einem CMS-Theme, oder schnell individualisiert und angepasst als eine simple, dennoch funktionelle Webseite benutzt werden können, dann ist unsere Liste sicherlich hilfreich. Heute haben wir 15 Ressourcen mit kostenlosen Bootstrap-Themes zusammengestellt.
Features: Bootstrap-Themes, Starter-Themes, zugängliche Vorlagen
Features: Bootstrap-Themes, WordPress-Themes
Features: Webseiten-Vorlagen, Verwaltungsthemes
Features: zugängliche Vorlagen
Features: Startseiten, Portfolio-Vorlagen
Features: Startseiten, Portfolios
Features: Verwaltungs- und Firmenschablonen, WordPress-Themes, Joomla-Vorlagen
Features: viele verschiedene lebhafte Themes
Features: Einseiter, Startseiten, Portfolio-Vorlagen
Features: Portfolios, Themes, Codeschnipsel
Features: Vorlagen für Multipage-Websites, Portfolios
Features: verschiedene Bootstrap-Vorlagen
Features: enorm viele verschiedene Bootstrap-Themes und HTML-Vorlagen
Features: zugängliche Bootstrap-Themes
Features: kostenlose und erstklassige Bootstrap-Vorlagen und WordPress-Themes
Wenn ihr noch andere zuverlässige Ressourcen kennt, die Entwicklerkollegen helfen können, teilt sie mit uns im Kommentarbereich.
(dpe)
Schon der erste Satz auf der Website des Anbieters Ink verrät uns, was hier das Ziel ist: „Erstellen Sie schnell ansprechende Responsive-HTML-Mails, die auf jedem Gerät und in jeder Software arbeiten. Selbst in Outlook.“ Mit diesem Augenzwinker-Hinweis auf Microsofts Problemkind (in Bezug auf die Darstellung von HTML-E-Mails) soll eines gleich klar werden: mit uns habt ihr diese Probleme nicht. Wir haben uns das Angebot daraufhin einmal angeschaut.
HTML-E-Mails sind leider immer noch eine Welt für sich. Da gibt es eigene Gesetze und Regeln, Techniken und Tricks, und trotzdem gibt es dann immer noch mindestens einen Kandidaten, der die E-Mail nicht korrekt anzeigen mag. Oft ist das ausgerechnet der Client, der beim Kunden zum Einsatz kommt. Die Cross-Browser-Ärgernisse vergangener Jahre erscheinen dagegen wie das kleinere Übel (man stelle sich einmal vor, für 50 verschiedene Internet Explorer optimieren zu müssen). Hinzu kommt die mobile Nutzung mit der Anforderung, die E-Mails auch noch responsive zu gestalten.
Ink möchte diese Probleme lösen. Dazu bietet es uns (wie Bootstrap, Foundation und andere Frameworks für die Webseiten-Gestaltung) ein Gerüst an, welches mit eigenen Inhalten, Farben und einem Logo individualisiert werden kann. Dank einigen vorhandenen Vorgaben können wir sicher gehen, am Ende eine HTML-E-Mail zu erhalten, die unkompliziert funktioniert. Wenige HTML-Kenntnisse reichen dazu aus.
Wer zuvor die schon vorhandenen E-Mail-Templates im Browser als Vorschau sehen möchte, besucht die entsprechende Templates Built-Seite, wobei die jeweiligen Umsetzungen als Screenshots in zahlreichen Versionen präsentiert werden, getrennt nach Desktop-, mobilen und Web-basierten Anwendungen. Generell sollte der erste eigene Test in Outlook erfolgen. Denn das ist auf jeden Fall der schwierigste Gegner. Nach dem Hinzufügen eigener Styles wird natürlich weiter getestet, wobei der Anbieter dazu eine Empfehlung für den kostenpflichtigen Dienst Litmus ausspricht.
Ink ist Open Source, bringt eine ausführliche Dokumentation mit und bietet einige durchaus nennenswerte Features. So hat es ein eigenes Gridsystem, CSS-Klassen zur Sichtbarkeit (um gezielt zu bestimmen, in welchen Klienten, welche HTML-Elemente angezeigt werden), sowie Buttons, die reagieren, falls ein E-Mail-Empfänger Bilder standardmäßig deaktiviert hat. Ergänzend ist das Ink-Inliner-Tool gedacht, um hinzugefügte Styles schnell so umzusetzen, dass auch wirklich die größte Anzahl an Klienten bedient werden kann. Eine gute Basis also, um sicher zu einem HTML-Newsletter zu kommen, der wie gewünscht ankommt.
(dpe)