Squarespace ist einer der führenden Anbieter im Markt für Homepage-Baukästen. Profis halten zwar von diesen Systemen oft nicht so viel – das Unternehmen selbst sieht jedoch seine Zielgruppe keinesfalls nur bei den Einsteigern, sondern durchaus auch bei Designern, Entwicklern und Agenturen. Aufbauend auf ihrer soliden Erfahrung von über zehn Jahren im Online-Geschäft ist Squarespace jetzt ein großer Wurf gelungen: Squarespace 7 präsentiert eine völlig neue Benutzeroberfläche, kombiniert mit einem vielseitigen Content Management System. Ohne Übertreibung kann man wohl sagen, dass im Bereich der Online-Seitengestaltung sich daran zukünftig alle anderen messen lassen müssen.

Homepage-Baukästen: Von der Ersatzbank aufs Spielfeld

Unzählige Bytes sind durch die Datenströme geflossen auf dem weiten Weg der Homepage-Baukästen, angefangen bei Geocities und NetObject Fusions mit ihren eingeschränkten Funktionen, bis zu den standard-konformen und stabilen Webseiten-Editoren von heute. HTML, CSS und JavaScript haben am Ende Flash und andere proprietäre Technologien weggefegt. Und schließlich wurde uns durch den Siegeszug des mobilen Internet der Übergang zu einer Standard-Konformität um fünf bis zehn Jahre früher beschert als gedacht.

Website Builder, Homepage-Baukästen oder Online-Webdesign-Software – wie auch immer Sie es nennen, all diese Lösungen sind heute mit ähnlich vielen Funktionen ausgestattet wie ein lokal installiertes Programm. Mehr noch, betrachtet man sie als SaaS-Lösungen (Software as a Service), kommen sie sogar weit flexibler daher, sind leichter auf dem neuesten Stand zu halten und auch mit Drittanbietern kommen sie besser zurecht als es eine lokale Software je könnte.

Squarespace 7: Bearbeiten Sie Ihre Seite direkt im Frontend

Wer mit zeitgemäßen Online Design-Lösungen arbeitet, bekommt in jedem Fall WYSIWIG. Natürlich ist das kein neues Konzept, aber ein WYSIWIG aus den Anfangsjahren ist eben meilenweit von den heutigen Tools entfernt. Squarespace 7 geht da sogar noch einen Schritt weiter, indem es die Bearbeitung einer Seite direkt vom Frontend erlaubt. Dieses Feature ist auch bei einem der besseren Website-Builder heute durchaus kein Standard.

Wer sich durch das Frontend klickt, bekommt flexible Funktionsleisten für die Gestaltung angezeigt

Eine Werkzeugleiste mal genauer betrachtet

Mit Squarespace 7 surfen Sie einfach zu Ihrer Webseite und bearbeiten diese fast im Vorbeigehen oder ändern Schreibfehler, sobald sie in Ihr Blickfeld gelangen. Eigentlich so ähnlich wie MS Word, nur eben für Webseiten statt für Dokumente. Und meiner Meinung nach die intuitivste Art, um Seiten zu bearbeiten. Die Bearbeitung im Frontend ist dabei nicht auf Textänderungen oder ähnlich einfach gelagerte Fälle beschränkt. Selbst Produkte eines Online-Shops können direkt geändert werden. Zweifellos ist dieses Feature die aufsehenerregendste Neuerung innerhalb des Squarespace Tools, das ja ohnehin mit allerhand Funktionen ausgestattet ist.

Device View im Einsatz: Der direkte Blick auf das Gerät

Wenn Sie an „responsive designs“ interessiert sind – und falls nicht, sollten Sie diesen Standpunkt dringend überdenken – dann dürfte Ihnen die neue Geräteansicht gefallen. Verändern Sie einfach Ihr Browser-Fenster, dann sehen Sie wie Ihre Webseite auf anderen Geräten angezeigt wird.

Squarespace 7: Einfache Erzeugung von One-Page-Designs

One-Page-Designs gehören schon seit einiger Zeit zu den Lieblingen der Gestalter. Kein Wunder, schließlich kann eine einzige schön gebaute und gut geschriebene Seite die perfekte Plattform für ein Portfolio, eine Dienstleistung, eine App oder eine Marke sein. Squarespace 7 hat das verstanden und stellt das nagelneue Cover Pages bereit.

Eine gut gebaute Cover Page ;)

So einfach lassen sich Design und Inhalt bei dieser Cover Page verändern

Okay, Cover Pages erfindet jetzt nicht gleich das One-Page-Konzept völlig neu. Gleichwohl wird deutlich, dass diese Templates eben genau als One-Pager optimiert wurden. Und so ist es erfrischend zu sehen, wie schnell man damit tolle Ergebnisse erzielen kann. Sie brauchen nur ein paar Parameter anzupassen, ein paar Bilder hoch zu laden – und gut ist. Ich bin sicher, dass Designer dieses Feature mögen werden, und sei es nur um hin und wieder eine „Coming Soon“ Ansage zu machen.

Cover Pages sind die perfekte Lösung für viele Zwecke. Aber insbesondere alle Arten von künstlerischen Portfolios, sei es Musik, Audio, Video oder Grafik, werden damit großartig aussehen. Ganz gleich ob Medien- oder Markenpräsentation: Die vorhandenen Templates decken in jedem Fall ein weites Anwendungsspektrum ab.

Squarespace 7: Einbindung von Getty Images und Google Apps

Die perfekten Bilder für die eigene Website zu finden, ist oftmals nervenaufreibend und die Lizenzierung dann teuer. Und nicht nur das, allein schon die rechtlich einwandfreie Nutzung von Bildern erfordert oftmals ein juristisches Staatsexamen. Squarespace hat nun ein Mittel gefunden, dieser Herausforderung aus dem Weg zu gehen und macht es leicht, Bilder von Drittanbietern auf der Seite einzubinden.

Getty Images ist komplett integriert

Dank einer Kooperation mit Getty Images bezahlen Sie über Squarespace gerade mal 10 USD pro Bild, wenn Sie es in Ihrem Design nutzen wollen. Die Suche und die Einbindung der Bilder erfolgt dabei direkt in der Squarespace-Oberfläche. Bei einem Bestand von über 40 Millionen Bildern könnten Sie ja bei Getty Images durchaus Bilder finden, die Ihnen gefallen – egal für welches Projekt. Preisunterschiede gibt es nicht, alle Squarespace-Nutzer bezahlen jeweils 10 USD für ein Bild. Die einzige Einschränkung: Die Lizenz gilt nur für die Online-Nutzung. Erweiterte Lizenzen können allerdings direkt im System erworben werden.

Ist Ihre Webseite das Epizentrum Ihrer digitalen Welt? Dann ist es sicher sinnvoll, sie mit Google Apps for Work zu verbinden. Mit Squarespace geht das – und kostet pro Nutzer noch mal fünf Dollar.

Mit Mobile Squarespace kommen Sie in Fahrt – buchstäblich

Nutzer von Squarespace 7 können den Blog ihrer Website auch von unterwegs aktualisieren, Mitteilungen senden oder die Kennzahlen der Seite abrufen. Das Tool Portfolio ermöglicht es zudem, alle Galerien der Seite auf das iPhone zu übertragen und dort zu speichern. Als professioneller Fotograf hat man so zum Beispiel immer seine Arbeitsbeispiele griffbereit, auch ohne Internetzugang.

Mobile Funktionen für alle digitalen Nomaden

Alle mobilen Features sind schon jetzt für das iPhone erhältlich. Blogs und Notes gibt es nun auch für Android Nutzer.

Squarespace und die Entwickler-Plattform

Ja, natürlich gibt es auch bei Squarespace jede Menge Hochzeits-Templates. Damit haben vor allem die vielen Einsteiger ihren Spaß. Und auch für diese Endnutzer könnte ich eine klare Empfehlung aussprechen: Probiert Squarespace aus, der Funktionsumfang ist umwerfend bei gleichzeitiger leichter Bedienbarkeit.

Mit seiner dedizierten Developer Platform richtet sich Squarespace aber ganz klar auch an professionelle Agenturen. Die Developer Platform macht einige Technologien sichtbar, die dem Normalverbraucher verborgen bleiben (die ihn aber in der Regel auch nicht interessieren), und gibt Entwicklern damit eine größere Kontrolle über Features und Funktionen. So erhalten sie vollen Zugang zu HTML, CSS und JavaScript, einschließlich einer JSON API um die Inhalte des CMS auszugeben.

Volle Kontrolle über den Quellcode

Mithilfe der Developer Platform können auch eine Reihe von Diensten von Drittanbietern genutzt werden. Dazu gehören Schwergewichte wie MailChimp, Dropbox, Google Drive, Disqus oder Soundcloud. Mit dem Site Manager können Sie zudem die Inhalte Ihrer Kunden komfortabel von einem Punkt aus verwalten.

Dazu kommt die Infrastruktur von Squarespace, die an sich schon mal ein großes Plus darstellt. Statt sich auf Ihren dedizierten Server verlassen zu müssen, können Sie weltweit verteilte Server Cluster und ein robustes CDN nutzen. Der Support für Ihre Kunden wird auch durch Squarespace geleistet. So können Sie das machen, was Ihnen eh am besten liegt: das Gestalten von tollen Designs.

Squarespace 7: Neue Designs und eine tolle Webseite

Ich gebe es zu: Ich bin der visuelle Typ. Ein großartiges Design wird mich immer begeistern. Und ja, die 14 neuen Themes, die Squarespace anlässlich ihrer neuen Version spendierte, sehen meiner Meinung nach fantastisch aus.

Eines der vielen neuen schönen Designs

Nicht unerwähnt lassen will ich hier die Squarespace 7 Webseite. Die Präsentation für die neue Oberfläche von Squarespace ist ein echtes Parallax-Meisterwerk. Hier bewegen sich nicht einfach ein paar Dinge auf dem Bildschirm schneller, während der Rest des Designs still steht. Nein, das ist ein visuelles Feuerwerk. Dinge wechseln flüssig ihren Zustand, aus einer Webseite wird herausgezoomt und dann sieht man ein Gerät, das diese Seite anzeigt. Aus sich bewegenden Elementen entstehen vollwertige Videos. Das fesselt und zieht einen geradezu rein. Und glauben Sie mir, bei aller Leidenschaft für gutes Design, so aufgeregt reagiere ich nicht allzu oft. Aber bei dieser Website musste ich einfach mal Begeisterung zeigen. Sorry. Auch wenn Sie das Konzept Online Website-Design grundsätzlich ablehnen – gönnen Sie sich einen Blick auf die Squarespace-Seite. Nur so zur Inspiration.

Einen guten ersten Eindruck von Squarespace 7 bietet dieser einminütige Clip:

Zum Schluss noch ein Wort zu den Preisen: Diese liegen unverändert bei acht bis 24 USD pro Monat. Sowohl das Professional Abo für 16 USD/Monat als auch das Business-Abo für 24 USD/Monat enthalten den Zugriff auf die beschriebene Developer Platform. Egal, welches Abo für Sie interessant sein sollte, angesichts der Fülle an Funktionen lohnt sich jedwedes Modell.

Wenn Sie sofort loslegen wollen, hier geht´s los. Für die kostenlose 2-Wochen-Testperiode brauchen Sie im Übrigen keinerlei Zahlungsinformationen anzugeben. No risk, 100% fun…

Squarespace: Fortsetzung folgt

Im nächsten Artikel gibt es eine geballte Ladung Praxiserfahrung zum Thema: Wie gestalte und pflege ich eine Webseite mit Squarespace. Also ich bin überzeugt, und Sie?

Immer wieder schraubt Google an seinem Suchalgorithmus, um bessere Ergebnisse liefern zu können. So spielen eine Reihe von Faktoren wie Schlüsselwörter, Linkaufbau und Ladegeschwindigkeit eine entscheidende Rolle dabei, wie stark eine Website von Google bei den Suchergebnissen berücksichtigt wird. Ab dem 21. April, also ab dem heutigen Tage, kommt ein weitere Ranking-Faktor dazu: die Mobilfreundlichkeit einer Seite. Was bedeutet das für Seitenbetreiber und was bedeutet „mobile-friendly“ aus Sicht von Google?

Wachsende Bedeutung des mobilen Internets

Der Grund für den neuen Ranking-Faktor dürfte niemanden überraschen. Immer häufiger suchen wir das Internet mit Smartphones und Tablets auf. Das gilt natürlich ebenso für die Google-Suche. Daher ist es nachvollziehbar, dass die Suchmaschine auf Mobilgeräten vor allem solche Ergebnisse präsentieren möchte, die für das Gerät entsprechend optimiert dargestellt werden können.

Diese Website ist „mobile-friendly“

Bereits seit einiger Zeit weist Google in seinen mobilen Suchergebnissen darauf hin, welche Website für Mobilgeräte optimiert ist. Dabei wird jedoch nicht unterschieden, ob eine Website eine eigenständige Mobilversion anbietet oder per responsivem Design für Mobilgeräte optimiert ist. Stellt eine Webpräsenz eine eigene Mobilversion bereit, wird Google in der mobilen Version nur diese in den Suchergebnissen darstellen. Die Desktopversion der Website wird in diesem Fall nicht berücksichtigt.

Ergebnis der mobilen Google-Suche mit dem Hinweis „Für Mobilgeräte“

Die Desktopversion der Google-Suche bleibt vom „mobile-friendly“-Faktor übrigens unberührt. Und Tablets werden von Google in der Regel nicht als Mobilgerät eingestuft, sodass hierbei in den Suchergebnissen die „normalen“ Websites gelistet sind.

Mobilfreundlichkeit der eigenen Website testen

Google hat einige Kriterien festgelegt, die erfüllt sein müssen, damit aus Sicht des Suchmaschinenriesen von einer mobilfreundlichen Website gesprochen werden kann. So muss der Text der Website ohne Zoomen lesbar sein. Die Breite der Seite darf nicht breiter als der Viewport sein. Inhalte dürfen also nicht erst durch horizontales Scrollen zu erreichen sein. Außerdem muss der Abstand zwischen Links so groß sein, dass jeder Link problemlos anwählbar ist – ohne dass die Gefahr besteht, ungewollt einen anderen Link aufzurufen.

Fast von selbst versteht es sich, dass auf Techniken wie Flash verzichtet wird. Ohnehin wird Flash auf Smartphones und Tablets häufig nicht unterstützt. Bei den mobilen Suchergebnissen gibt Google bei Seiten, die Flash verwenden, einen Hinweis, dass diese Seite auf dem Gerät möglicherweise nicht funktioniert. Nicht auszuschließen ist, dass Google zukünftig auch bei anderen nicht erfüllten „mobile-friendly“-Kriterien einen ähnlichen Hinweis einblendet.

Nicht erfolgreicher Test auf Mobilfreundlichkeit

Um zu sehen, ob die eigene Website all diese Kriterien erfüllt, stellt Google ein eigenes Tool zur Verfügung. Bei diesem „Test auf Optimierung für Mobilgeräte“ gibt man einfach eine URL ein, folgend analysiert Google die Seite. Im Idealfall gibt Google grünes Licht und signalisiert, dass die entsprechende Seite für Mobilgeräte geeignet ist. Andernfalls informiert das Tool über jene Faktoren, welche die Seite nicht erfüllt.

Zusätzlich verweist Google auf Seiten, die einem dabei helfen sollen, die Website für Mobilgeräte zu optimieren. Unter anderem gibt die Suchmaschine bei nicht selbst entwickelten Websites Ratschläge, was man bei der Zusammenarbeit mit einem Entwickler bezüglich mobilfreundlicher Websites beachten sollte.

Google mitteilen, wie die mobile Website bereitgestellt wird

Wenn man eine Website nicht per responsivem Layout aufbaut, sollte man Google mitteilen, wie die mobile Website bereitgestellt wird, damit Google diese Mobilversion bei den Suchergebnissen berücksichtigen kann. Neben einem responsiven Aufbau gibt es zwei weitere gängige Praktiken, eine Mobilversion für eine Website zu realisieren.

Zum einen kann man zwei losgelöste Versionen einer Website bereitstellen, die per unterschiedlicher URL aufgerufen werden – zum Beispiel „www.example.com“ für die Desktop- und „m.example.com“ für die Mobilversion. Hierbei sollte man Google mitteilen, dass die URLs für Desktop- und Mobilversion in Relation zueinander stehen. Dazu wird auf der Desktopseite bis zu einer bestimmten Viewport-Breite auf die Mobilversion verwiesen.

<link rel="alternate" media="only screen and (max-width: 320px)" href="http://m.example.com/" >

Das Beispiel verweist bei Displaybreiten von bis zu 320 Pixel auf die mobile URL. Auf der Mobilseite wird hingegen signalisiert, dass der Inhalt dieser Seite identisch ist mit dem Inhalt der entsprechenden Desktop-Seite.

<link rel="canonical" href="http://www.example.com/" >

Dank dieser beiden „<link>“-Elemente erreicht man, dass Google zum einen auf die jeweilige Mobilseite verweist, wenn der Viewport nicht größer als 320 Pixel ist. Zum anderen wird verhindert, dass Google die Mobilseite als doppelten Content einstuft.

Als drittes gibt es noch die Möglichkeit, je nach User-Agent einen für Desktop- oder Mobilgeräte optimierten Quelltext auszugeben (von Google „dynamische Bereitstellung“ genannt). Dabei ist eine Website auf allen Geräten unter derselben URL erreichbar. Nur der ausgegebene Quelltext unterscheidet sich. Da der Googlebot sich in der Regel als Desktopgerät ausgibt, muss man der Suchmaschine mitteilen, eine Website auch als Mobilgerät zu crawlen. Hierzu sendet man den Vary-HTTP-Header mit dem Wert „User-Agent“ mit.

Vary: User-Agent

Diese Angabe bringt Google dazu, den Inhalt einer Seite unterschiedlich zu crawlen. So wird dann ebenfalls der für Mobilgeräte optimierte Quelltext ausgelesen. Laut Google wird keine der drei Möglichkeiten – responsives Webdesign, dynamische Bereitstellung oder unterschiedliche URLs – bevorzugt, solange Google die Inhalte entsprechend crawlen kann.

Geschwindigkeit spielt eine Rolle

Zunehmend spielt die Geschwindigkeit, mit der eine Website geladen wird, eine wichtige Rolle. Denn gerade im mobilen Internet stehen hohe Bandbreiten nicht immer zur Verfügung. Außerdem sind die mobilen Datentarife häufig begrenzt, so dass es im Interesse der Nutzer ist, möglichst geringen Datentransfer zu erzeugen.

So gibt beziehungsweise gab Google bei einigen wenigen Anwendern in den Suchergebnissen einen Warnhinweis bei Website aus, die sehr langsam geladen werden. Über ein rot hinterlegtes „Slow“ wird diese Warnung dargestellt. Bislang erschien dieser Hinweis nur bei sehr wenigen Nutzern der mobilen Suche. Daher steht nicht fest, ob Google diese Warnungen tatsächlich dauerhaft in die Suche integrieren wird.

Fest steht aber, dass die Geschwindigkeit eine große Rolle spielt und Google in der mobilen Suche höhere Anforderungen an die Geschwindigkeit stellt, als in der Standard-Suche. Da ist es gut, dass Google zum Testen der Geschwindigkeit ein Tool zur Verfügung stellt: die Google PageSpeed Insights.

Google PageSpeed Insights mit vergebenen Punkten

Die Google PageSpeed Insights testen wie schnell eine Website geladen wird. Google vergibt bis zu 100 Punkte und listet auf, an welchen Stellen die Website langsam ist. Zu große beziehungsweise unzureichend komprimierte Bilder oder JavaScript, welches das Laden von Inhalten blockiert beziehungsweise verzögert, können zum Beispiel Gründe sein. Neben der Geschwindigkeit bewerten die PageSpeed Insights das Nutzerverhalten.

Auch hierfür werden bis zu 100 Punkte vergeben. Wer zu  kleine Schrift verwendet und Plug-ins einsetzt, kommt hier nicht gut bei weg. Die Punkte der PageSpeed Insights werden getrennt für Mobil- und Desktopgeräte vergeben. In der Regel erreicht man die 100 Punkte für Desktopgeräte leichter, da etwa die Geschwindigkeit keine so große Rolle spielt wie beim mobilen Internet.

Nutzer von Googles Webmaster-Tools

Wer die Webmaster-Tools von Google einsetzt, wird dort übrigens darüber informiert, ob die dort gelisteten Websites für Mobilgeräte optimiert sind. Hierzu gibt es unter „Suchanfragen“ den eigenen Punkt „Benutzerfreundlichkeit auf Mobilgeräten“. Dort erhält man einen Überblick über die Fehler und die Anzahl der Seiten, die davon betroffen sind.

Benutzerfreundlichkeit für Mobilgeräte bei Googles Webmaster-Tools

Fazit und Links zum Beitrag

Nicht erst seit dem „mobile-friendly“-Faktor von Google sollten Websites für Mobilgeräte optimiert werden. Aber der neue Ranking-Faktor ist ein weiterer wichtiger Grund, warum Websites heutzutage für Smartphones und Tablets optimal dargestellt sein müssen – im Idealfall per responsivem Layout.

• Googles Test auf Optimierung für Mobilgeräte
• Googles PageSpeed Insights
• Googles Webmaster-Tools

(dpe)

Designer begeistern sich für eine Menge Dinge, was sie aber am meisten lieben, ist die Freiheit ihre eigenen Ideen zu Designs werden zu lassen und das Ganze dann auch frei nach ihrem Gusto umzusetzen. Daher sind Homepage-Baukästen im professionellen Webdesign in der Regel keine Option. Da, wo es spannend wird, stoßen diese oft an Grenzen, auch wenn die Angebote über die Jahre tatsächlich besser geworden sind. Wenn Sie eher zu den klassischen Designern gehören oder mit Sublime, Coda und ähnlichen Werkzeugen arbeiten, haben Sie sicher oft ein CMS-Feature schmerzlich vermisst. Bevor Sie sich entscheiden Ihr Design auf ein ausgewachsenes CMS aufzupfropfen – schauen Sie sich mal 900dpi an – einen originellen, neuartigen Service von einem kleinen, passionierten Team aus den Vereinigten Staaten.

Versuch und Irrtum: Was wir alles überstanden haben

Früher war alles ziemlich einfach. Wir haben uns einfach in Nick Bradburys HomeSite vertieft und losgelegt mit dem Programmieren. Dann kamen Dreamweaver und GoLive um die Ecke und wir programmierten fröhlich weiter. Für ein kurzes Intermezzo warf später NetObjects Fusion seine Schatten über die Welt des Webdesigns – was mir übrigens immer noch Alpträume beschert. Bei diesem Tool wurde die Webseite innerhalb ihres eigenen Editors gebaut. Wenn die Seite dann live gehen sollte, spuckte NetObjects Fusion den gesamten Quellcode für die ganze Seite mit einem Mal aus. Und der konnte einem Angst machen.

Inzwischen haben wir all die teilweise haarsträubenden Konzepte hinter uns gelassen. Doch einige der Probleme sind geblieben. Zwar hat der Siegeszug des mobilen Internet die Etablierung von Webstandards stärker voran gebracht, als wir uns je erhofft hatten. Wer zum Beispiel hätte sich vorstellen können, dass HTML5 es tatsächlich zur Verabschiedung schafft? Doch so kam es.

Aber obwohl wir grandiose Tools zur Verfügung haben, die kaum Wünsche übrig lassen, von minimalistischen Text-Editoren bis hin zu tollen WYSIWYG-Umgebungen – eine Aufgabe blieb ungelöst. Was tun, wenn der Kunde seine Website partout selbst pflegen will? Was machen wir, wenn ein CMS nötig ist?

Fragen Kunden nach einer CMS Funktionalität, ist die typische Antwort in der Regel: „Klar, wir setzen ein WordPress/Drupal/Joomla/Typo3/wasauchimmer” auf. Nicht nur, dass eine solche Lösung weitgehende Kenntnisse in HTML5 erfordert. Auf einmal gilt es auch, Dinge wie Hooks oder syntaktische Feinheiten im Code zu beachten und sich in ein vorgegebenes Korsett zu fügen. Ich bin schon Content Management Systemen begegnet, bei denen ich nicht auf den ersten Blick sehen konnte, wo ich denn bitte mein Design einbauen kann. Als Folge dessen gingen die meisten Designer dazu über, sich eine Menge Entwicklerwissen anzueignen und sich auf ein System als Komplettlösung zu spezialisieren (meistens war das WordPress). Und wer darauf keine Lust hat?

Wer sich diesem Trend verschließen will, für den gibt es immer noch professionelle Website-Builder, welche die Erstellung von Online-Präsenzen ermöglichen. Die besseren bieten eine durchaus zufriedenstellende Anpassungsfähigkeit beim Design und CMS Funktionen können einfach im Editor-Fenster eingebaut werden. Mir fallen da ein paar Systeme mit sehr brauchbaren CMS Features ein – gleichzeitig weiß ich, dass auch diese schnell an ihre Grenzen kommen.

Zunächst einmal erfordert jede dieser Lösungen eine gewisse Einarbeitungszeit. Erfahrung in HTML5 allein reicht da nicht aus. Gleichzeitig muss man Kompromisse akzeptieren. Vor allem, dass es nicht möglich ist eine Arbeitskopie der Site lokal zu speichern, ist ein echter Nachteil. Ich finde es einfach besser, mein HTML, CSS und JavaScript in Projektordnern auf meinem Rechner zu haben. Ich will Dateien gern direkt austauschen können, ohne auf Drittlösungen anderer angewiesen zu sein. Ich will in der Lage sein, das ganze Projekt einfach zu einem anderen Host hochladen zu können. Das alles sind Gründe, warum ich mich für diese Programme nicht so recht erwärmen kann, auch wenn es ohne Frage gute Konzepte gibt.

Ich jedenfalls brauche eine andere Lösung. Und so geht es vielen anderen Designern, die ich kenne. Wir wollen die ganzen Funktionen von WordPress, oder welches CMS Ihnen spontan dazu einfällt, einfach nicht im Detail erlernen. Wir wollen bei unserer Design-Arbeit nicht alles auf eine CMS-Karte setzen müssen und uns mit einer Spezialisierung von diesem System abhängig machen.

Wir brauchen etwas anderes, etwas wie 900dpi.

900dpi: CMS für einfach jede Website

900dpi hat einen anderen Weg gewählt. Mit 900dpi setzen Sie ihr Webdesign so um, wie Sie es gewohnt sind. Sie wählen Ihren bevorzugten Editor, Ihre Arbeitsumgebung. Sie gestalten mit Photoshop, Sketch, Pixelmator oder Fireworks, programmieren mit Sublime, Coda oder Dreamweaver, arbeiten mit MacOS, Windows oder Linux – alles ist möglich. Speichern Sie Ihre Projekte lokal ab, so wie Sie es seit vielen Jahren machen. Dann verbinden Sie Ihr Projekt mit 900dpi, auch das ist nicht schwer.

Der Grund: 900dpi nutzt entweder eine SFTP-Verbindung oder Dropbox, um die Projektdaten zu synchronisieren. Letzteres ist zweifellos komfortabler. 900dpi erstellt dann selbstständig einen Ordner im App-Ordner Ihrer Dropbox, dort wird synchronisiert. Und ja, das System kann ausschließlich auf diesen Ordner zugreifen. Sie brauchen sich also keine Sorgen machen, dass die sehr speziellen Partyfotos vom Wochenende demnächst im Internet die Runde machen. Vor der ersten Nutzung war ich durchaus skeptisch, aber nach dem einfachen Setup war ich schnell überzeugt.

Sobald die Dropbox verbunden ist, können Sie im Dashboard Ihres 900dpi-Kontos beginnen, Webseiten zu gestalten. Der Account selbst ist schnell eingerichtet, nur wenige persönliche Daten sind nötig, Zahlungsinformationen werden überhaupt nicht abgefragt. Ein Projekt aufzusetzen ist leicht. 900dpi erstellt in der Dropbox einen Ordner mit dem von Ihnen gewählten Projektnamen und legt eine Beispieldatei sowie eine Ordnerstruktur an. Ihre Website ist im Übrigen unter einer Subdomain von 900dpi.com sofort funktionsfähig.

Die Bearbeitung einer Website mit 900dpi ist sehr einfach

Klicken Sie im Dashboard „Edit Website“ um den Edit Modus aufzurufen.

Standardmäßig sehen Sie dann das:

Innerhalb der blau umrahmten Flächen sind die CMS-Funktionen aktiv. Nach dem Klicken auf ein Foto öffnet sich ein Fenster, in dem Bilder ausgewählt und hochgeladen werden können. Falls eine Bildgröße nicht dem vorhandenen Platz entspricht, kann danach der Bildausschnitt gewählt werden. Größe und Seitenverhältnis werden dabei vom Designer bestimmt, nicht von 900dpi. Das Klicken auf einen Text öffnet ein Editor-Fenster mit den üblichen Formatierungsoptionen.

Ich habe alle Bilder ausgetauscht und Teile des Textes. Einige Bereiche konnte ich nicht verändern – das war vom Designer aber vorher auch genau so festgelegt worden. Der Grund dafür ist klar: schließlich ist das kein Editor für Webdesigner, sondern für die Kunden der Designer. Und diese sollten natürlich nicht in der Lage sein, einfach jedes Detail der Website selbstständig zu verändern.

Noch sind die blauen Rahmen sichtbar. Sie verschwinden, sobald Sie das Häkchen bei „Edit Mode“ entfernen. So präsentiert sich die Seite dann dem Publikum:

Die Seite ist vollständig responsiv. Der Kunde kann sie in jeder Gestaltungsphase reibungslos bearbeiten.

Einfach ist auch das Schreiben eines Blogs. Hat der Designer die Blog-Funktion freigeschaltet, einfach „New Blog Post“ in der oberen Navigation klicken. Es erscheint ein mehr oder weniger selbst erklärendes Fenster, in dem Sie Titel und Inhalt des Postings einfügen und Kategorien festlegen können. Anschließend nicht vergessen, den Status auf „Published“ zu setzen oder – nun ja…

Content-Redakteure können über das Dashboard eingeladen werden. Hilfe kann man immer gut gebrauchen. Tja, und das war es eigentlich auch schon. Meinen Sie nicht auch, dass diese Funktionen alles abdecken, was man für die meisten Kundenprojekte braucht?

Und welchen Aufwand müssen Designer nun aufbringen, um ein solches Ergebnis zu erzielen?

900dpi für Designer: Eine einfache Klasse und eine Handvoll Datenattribute

Der Aufwand für Sie, den Designer, ist…praktisch Null. Klingt komisch, ist aber so. Fügen Sie einfach allen Elementen, die Ihrer Meinung nach vom Kunden bearbeiten werden können, die Klasse (.class) 900-edit hinzu. Das war´s. 900dpi erledigt den Rest.

Mit der wachsenden Funktionsvielfalt von 900dpi wurden außerdem zusätzliche Datenattribute eingeführt. Aber diese kann man in weniger als zehn Minuten verstehen – und erlernen. Kennt jemand ein anderes CMS, das Designer ähnlich schnell beherrschen?

Ihrem herkömmlich gebauten Projekt eine Klasse hinzuzufügen, sollte kein Problem sein. Möglicherweise ist es sogar sinnvoll, Ihren bereits bestehenden Projekten die CMS-Funktionalität nachträglich mitzugeben – so könnten Sie zusätzliche Einnahmen mit bereits vorhandenen Kunden erzielen. Alles, was Sie dafür tun müssen ist, das Projekt in die Dropbox zu laden und, wie gehabt, die Klasse dort hinzuzufügen, wo der Kunde Änderungen vornehmen kann.

900dpi ermöglicht außerdem eine einfache Formularverarbeitung, die Verkleinerung von JS, CSS und Bildern sowie Server Side Includes (SSIs). Eine anpassungsfähige und stimmige Navigation ist so kinderleicht. Zudem kann man das Dashboard auch als White-Label-Lösung nutzen. Kunden sehen dann nicht 900dpi, sondern Ihre eigene Marke. Beachten Sie jedoch, dass einige der hier vorgestellten Funktionen sozusagen zur „Sonderausstattung“ gehören und nicht in jedem Abo-Modell verfügbar sind.

900dpi einfach mal ausprobieren

Keine Server konfigurieren, keine Datenbanken erstellen, keine Skripts installieren, kein Durcheinander bei den Lese- und Schreibrechten, keine .htaccess Fehler – nada, nothing, nichts von alledem. Eine CMS-basierte Webseite ist hier einfach nur ein Design-Job, Entwickler oder Administratoren haben Pause.

Und am allerbesten – Sie brauchen mir gar nicht zu glauben. Testen Sie es einfach selbst. Das geht ganz schnell: in zwei Minuten vom Registrieren bis zur Online-Version der ersten Webseite mit Beispieldateien. Das Einstellen eines Ihrer bereits bestehenden Projekte und das Hinzufügen der relevanten Klassen an den gewünschten Stellen? Fünf, okay, sagen wir zehn Minuten.

In diesen zehn Minuten bekommen Sie einen recht guten Eindruck davon, wie 900dpi Sie unterstützen kann. Keine Zeit dafür? Dann schauen Sie doch dieses Ein-Minuten-Video:

900dpi ist kostenlos solange es Ihnen reicht, Ihre Webseiten unter der genannten Subdomain laufen zu haben. Für den professionellen Einsatz werden Sie dagegen sicher Ihre Domains mit 900dpi verbinden wollen. Auch das geht leicht und der Vorgang ist auf ihrer „Documentation“ Seite gut beschrieben. In diesem Fall schließen Sie einfach eines der Abo-Modelle ab und passen dann ein paar DNS-Einträge an.

Falls Sie nicht nur eine größere Zahl von Kunden versorgen wollen und sich für die Komplettlösung entscheiden (einschließlich White Label, mehrerer Entwickler-Konten und der Reseller-Möglichkeit), dann ist der Agency Plan das Richtige – zum monatlichen Preis von 80 USD. Die letzten beiden Features sind derzeit noch in der Ankündigungsphase.

Wer auf die White-Label-Lösung verzichten kann, dem reicht ganz sicher das Freelancer Abo für 30 USD/Monat. Es gibt auch noch das Portfolio Abo für 5 USD/Monat, welches meiner Meinung nach jedoch nicht empfehlenswert ist. Bei diesem Modell kann nur eine Webseite erstellt werden, CMS oder Blog Features fehlen ganz.

Sowohl das Freelancer als auch das Agency Abo erlauben eine unbegrenzte Anzahl von Webseiten. Und das wird Ihnen möglicherweise entgegenkommen – wenn Sie merken, wie gern Sie mit dem System arbeiten. Die Preise relativieren sich dann auch recht schnell, je mehr Projekte man damit umsetzt. Letztlich spart man mit 900dpi jede Menge anderer Kosten und das Ganze amortisiert sich in kurzer Zeit.

Gibt es irgendwelche Schattenseiten? Mir sind keine aufgefallen. Die Projektdateien werden lokal gespeichert. Sie gehen nicht verloren. Das Design ist voll funktionsfähig, schon bevor Sie das Projekt mit 900dpi verbinden. Auch da geht nichts verloren. Sollte also 900dpi dereinst mal seine Arbeit einstellen, können Sie Ihre Projekte zu jedem beliebigen Host-Anbieter hochladen – mindestens 99% der Seite bleibt heil und unversehrt.

Meine Projektdateien gehören mir

Probieren Sie es mal aus und schreiben Sie gern Ihre Meinung unten in die Kommentarbox. Ich bin wirklich daran interessiert.

Erinnern Sie sich noch an die Zeit, als die ersten Smartphone-Apps auf den Markt kamen? Die iPhone-3G-Werbung wollte uns damals einreden, dass es für nahezu alles eine App gäbe. Das mag zu jener Zeit vielleicht ein bisschen übertrieben gewesen sein; heute aber würde dem wohl kaum einer mehr widersprechen. Und das liegt vor allem auch an der steigenden Popularität hybrider Apps in den letzten Jahren. Da immer mehr Unternehmen auf den App-Zug aufspringen, um ihren Kunden einen noch schnelleren und bequemeren Service zu bieten, sind App-Entwickler immer gefragter. Der einzige Haken an der Sache sind die für kleine Unternehmen extrem hohen Kosten für die Entwicklung nativer Apps sowie die Code-Weiterentwicklung für andere Systeme. Das Problem für die Entwickler besteht darin, dass das Erlernen des nativen Codes und die Bereitstellung von Updates für jede Sprache extrem aufwendig sind.

Aus diesem Grund schwenken immer mehr Unternehmen und Entwickler auf Hybrid-App-Entwicklung um. Hybride Apps nutzen Webcode wie z. B. HTML, CSS usw., sind aber in einer nativen App eingebettet und nutzen eine spezielle Plattform, sodass die App trotzdem Zugriff auf einige native Funktionen hat. Oder wie Adam Bradley in seinem Mozilla-Artikel schrieb: “In seiner einfachsten Form ist eine Hybrid-App nichts weiter als ein Internetbrowser ohne URL-Zeile und Zurück-Button.”

Die Vorteile einer Hybrid-App:

• Keine besonderen Fähigkeiten oder Kenntnisse nötig; Ihre vorhandenen Kenntnisse über Webentwicklung reichen völlig aus.
• Ein Code für alle Plattformen.
• Ein responsives Design für alle Geräte.
• Zugriff auf einige native Funktionen des Geräts.
• Funktioniert sowohl auf mobilen Geräten als auch auf dem PC.

Es liegt auf der Hand, dass diese Vorteile sowohl die Kosten für Kleinunternehmen als auch das Kopfschmerzpotential für Entwickler um einiges mindern können. Ich weiß sehr wohl, dass Hybrid nicht für jede App geeignet ist. Beispielsweise ist der Zugriff auf native Funktionen beschränkt und es kann durchaus schwierig sein, sie wie eine App aussehen zu lassen und auszuführen. Damit riskiert man wiederum, dass die App nicht im Apple Store aufgenommen wird. Außerdem funktionieren Hybrid-Apps manchmal nicht richtig, wenn sie zu aufgeblasen sind wie z. B. bei einem 3-D-Spiel.

Songhop-App – erstellt mit dem Ionic Framework.

Wenn Sie jedoch eine App erstellen möchten, die hybridtauglich ist, lesen Sie weiter. Im Folgenden finden Sie eine Auswahl der besten Tools und Hilfsmittel, die Ihrer App das Aussehen und die Funktionen einer nativen App geben. Wir stellen Ihnen nützliche Framework SDKs, Entwicklungsumgebungen, Tutorials, Richtlinien und vieles mehr für die Entwicklung hybrider Apps vor.

Richtlinien für Designstandards

Bevor Sie mit der Erstellung der App beginnen, müssen Sie sich erst mal mit den jeweiligen Designstandards eines jeden Systems vertraut machen. Im Folgenden finden Sie die Richtlinien für die App-Entwicklung für iOS, Android und Windows.

• iOS Developer Library
• Android Design
• Windows Design – inklusive Templates!

Systemschriften für Hybrid-App-Entwicklung

Androids Standard-Schriftart Roboto

Verwenden Sie Systemschriften, um Ihrer App ein nativeres Feeling zu geben, denn ihre Nutzer werden die Schriftart erkennen. Glücklicherweise ist es mithilfe von Schriftartenstapel relativ einfach Systemschriften in Hybrid-Apps zu verwenden. Nutzen Sie für die Hybrid-App-Entwicklung die folgenden Anleitungen und Schriftarten:

• iOS Fonts
• Android Fonts
• Windows Phone Fonts

Entwicklungsumgebungen und SDKs

Wenn Sie Ihre Hybrid-App nur aus einfachen Bausteinen erstellen möchten, können Sie eine der folgenden Entwicklungsumgebungen nutzen. Beachten Sie, dass Sie trotzdem für jedes System (Android, iOS usw.) eine SDK-Plattform benötigen. Einige dieser Entwicklungsumgebungen haben bereits ein SDK, für andere wiederum benötigen Sie das SDK eines Drittanbieters.

Die Verwendung eines SDK-Frameworks für die Erstellung Ihrer App erspart Ihnen viel Zeit und Aufwand. Ein Framework erleichtert Ihnen die Erstellung einer nativ-ähnlichen Hybrid-App, da sie nicht bei null anfangen müssen.

Apache Cordova

Apache Cordova ist eine Open-Source-Sammlung von Geräte-APIs, die den Zugriff auf native Funktionen erlauben. Zusammen mit einem Framework wie einem der unten genannten können Sie eine Hybrid-App mit HTML, CSS und Javascript erstellen. Dementsprechend kann die App mit wenig bis gar keiner Codeanpassung plattformübergreifend verwendet werden. Cordova bietet auch viele Plugins für den Zugriff auf native Gerätefunktionen.

Beachten Sie, dass Sie zuerst die Cordova-Kommandozeile (CLI) herunterladen müssen, bevor Sie mit der App-Entwicklung für eine Systemplattform mit einem der unten genannten SDKs beginnen. Es bleibt Ihnen überlassen, ob Sie den Großteil der App in Cordova oder dem SDK erstellen.

PhoneGap

PhoneGap ist ein sehr beliebtes Open-Source-SDK für die Entwicklung hybrider Apps, die auf Cordova als CLI setzt. Mit diesem Framework können Sie für jede Systemplattform plattformübergreifende Apps mit HTML, CSS und Javascript erstellen. Das Adobe PhoneGap Build sammelt Ihre Apps in der Cloud, sodass Sie den Code für mehrere Plattformen wiederverwenden können. Es hat sogar eine Entwickler-App, mit der Sie Änderungen am Code direkt auf dem Smartphone nachverfolgen können.

Apps, die mit PhoneGap erstellt wurden.

Ionic Framework

Auch das Ionic Framework ist ein sehr beliebtes Open-Source-Framework für mobile Hybrid-Apps. Es hat eine Bibliothek mit Gesten, Tools und Komponenten für HTML, CSS und Javascript, die allesamt für die mobile Nutzung optimiert sind. Ionic wurde mit SASS erstellt und ist eigentlich für AngularJS optimiert, sodass Sie ganz einfach eine interaktive App mit dynamischer Ansicht erstellen können. Den fertigen Code können Sie dann mit Cordova nutzen.

Onsen UI Framework

Dieses Open-Source-UI-Framework basiert auf Javascript und CSS und lässt Ihre mit PhoneGap/Cordova erstellte Hybrid-App wie eine native App aussehen. Das bedeutet weniger Kopfzerbrechen für Sie. Dieses Framework ist mit jQuery und AngularJS kompatibel, hat einen eingebauten Theme-Roller, setzt auf Font Awesome, bietet fließende Bildschirmübergänge und bald auch ein Gui-Tool für Drag-and-drop.

AngularJS

Da ich dieses nützliche Toolset nun schon ein paar Mal erwähnt habe, schauen wir es uns jetzt mal etwas genauer an. Es ist mit anderen Bibliotheken kompatibel und vollständig erweiterbar, sodass Sie mit Ihrer App – über die statischen HTML-Funktionen hinaus – einen Schritt weitergehen können. Mit AngularJS sind Sie nicht auf HTML-Funktionen limitiert und können extrem schnelle dynamische Ansichten erstellen.

Appcelerator Titanium

Die Open-Source-Entwicklungsumgebung Appcelerator Titanium bietet alles, was Sie für die Erstellung plattformübergreifender nativer Apps, Hybrid-Apps und Web-Apps mit einem Javascript SDK benötigen. Titanium beinhaltet Studio – eine auf Eclipse basierende IDE, ein MVC Framework (Alloy) und Cloud-Dienste.

Apps, die mit Appcelerator erstellt wurden.

Xamarin

Wenn Sie C#-Kenntnisse haben, könnte dies die richtige App-Plattform für Sie sein. Mit einer Codebasis in C# erstellen Sie native Apps für iOS, Android, Windows und Mac. Bei der IDE können Sie zwischen Xamarin Studio (Windows/Mac) und Visual Studio wählen. Testen können Sie Ihre App mit C# oder Ruby. Außerdem bietet das Tool detaillierte Fehlerreports zur Überwachung der App-Performance und noch eine Menge anderer Features.

Sencha Touch

Sencha Touch erlaubt Entwicklern Hybrid-Apps mit HTML5 und Themes für verschiedene Mobilgeräte zu erstellen. Mit Sencha erstellte Apps haben durch den Zugriff auf native Funktionen eine schnellere Performance als Web-Apps, sehen aus wie native Apps und verhalten sich auch entsprechend. Außerdem können Sie auch ohne Mac eine App für iOS erstellen. Sencha bietet über 300 Icons, MVC-Support, viele UI-Elemente, Datenbindungen, Datenpakete und vieles mehr.

Trigger.io

Trigger.io wirbt damit, die einfachste Lösung für die Entwicklung mobiler Apps zu sein. Mit Trigger.io schreiben Sie HTML5-Code mit der Javascript API und haben Zugriff auf Handyfunktionen wie die Kamera und die Contacts API. Die Cloud erledigt dann den Rest für iPhone, iPad und Android. Ebenso erlaubt das Tool Webgeschwindigkeits-Updates, benutzerdefinierte Module, Hooks und vieles mehr zu nutzen. Für die Entwicklung können Sie Ihre bevorzugte IDE oder einen beliebigen Texteditor verwenden und die App mit Triggers Toolkit GUI oder Kommandozeilen-Tools zusammenbauen und testen.

Anleitungen für den App-Vertrieb

Google Play Store

Mit der Veröffentlichung der App beginnt bei vielen das große Zittern, da es zig Gründe gibt, weshalb sie abgelehnt werden könnte. Wenn das Ihr erstes Mal ist, sollten Sie nicht allzu hohe Erwartungen haben – die Wahrscheinlichkeit, dass es mehr als einen Versuch braucht, ist recht hoch. Damit einer reibungslosen Veröffentlichung nichts im Weg steht, sollten Sie sich die jeweiligen Anleitungen für den App-Vertrieb durchlesen:

• Apple App Distribution App
• Android Google Play Guide und Android Launch Checklist
• Windows Phone Distribution

Tutorials und Artikel

Auch wenn man bei der Entwicklung hybrider Apps auf bereits vorhandene Kenntnisse der Webprogrammierung zurückgreifen kann, gibt es doch noch viel zu lernen. Am besten klappt das, wenn man einfach mit dem Lesen beginnt – und was bietet sich da mehr an als die Anleitungen der oben genannten Frameworks? Weitere hervorragende Möglichkeiten zur schnellen Aneignung von Wissen über die Hybrid-App-Entwicklung sind Tutorials oder Einführungen wie diese:

• Hybrid Mobile Apps: Providing a Native Experience with Web Technologies
• Creating hybrid mobile versions of the application using Apache Cordova
• Performance & UX Consideration for Successful PhoneGap Apps
• Create a Simple Hybrid App with AngularJS, Ionic, and Cordova
• An Introduction to Xamarin
• PhoneGap from Scratch
• How to Prototype Web and Mobile Apps in 30 Minutes
• Mobile Frameworks Comparison Chart (zur Auswahl eines Frameworks basierend auf Plattformen)

Mit welchem Tool entwickeln Sie Ihre hybriden Apps?

(dpe)

“WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen” – So titelte Dr. Web vor genau einem Monat und stellte Ihnen eine Software vor, die nicht nur auf den ersten Blick an das gute alte Flash erinnert. Anders als der Urzeit-Bolide aus dem Hause Adobe, arbeitet der WebAnimator Plus dabei nicht mit proprietären Formaten, sondern basiert vollständig auf HTML5 und CSS3. Der Hersteller Incomedia freute sich über das gute Abschneiden seines Produkts in unserem Test und stellte uns nun zehn Lizenzen des WebAnimator Plus zur Verlosung zur Verfügung. Die Teilnahme ist – wie immer – einfach. Machen Sie mit!

Kollege Denis Potschien, seit zehn Jahren Webentwickler und Autor des einschlägigen Fachbuches Pure HTML5 und CSS3, zog folgendes Fazit zur Animationssoftware:

Der WebAnimator Plus ist eine umfangreiche Anwendung zum Erstellen komplexer und individueller Animationen. Der Funktionsumfang der Anwendung erlaubt es, komplette Webprojekte zu realisieren – ähnlich wie es mit Adobes Flash möglich ist. Anders als Flash setzt WebAnimator ganz auf HTML5 und CSS3, sowie auf JavaScript. Das sorgt dafür, dass Projekte auch auf mobilen Geräten laufen – und das ganz ohne Plug-ins.

Wenn Sie sich für die ausführliche Vorstellung der Funktionalitäten interessieren, versäumen Sie nicht, diesen Artikel zu lesen.

Das Executive Summary liest sich schneller:

WebAnimator Plus läuft auf Windows-Systemen, ist für 89,99 Euro erhältlich und kann vorab für zwei Wochen getestet werden. Hier bekommen Sie die Testversion. Es gibt eine ausführliche Dokumentation sowie ein deutschsprachiges Forum zum Austausch mit anderen Anwendern. Eine Seitenbau-Software, landläufig Homepage-Baukasten genannt, bietet Incomedia unter dem Namen WebSite X5 Professional 11 ebenfalls an.

10 x WebAnimator Plus: so einfach ist die Teilnahme

Genug der Vorrede, lassen Sie uns zu den Teilnahmeregeln für die Verlosung kommen. Diese sind, unsere regelmäßigen Leser wissen es, stets sehr einfach. Sie hinterlassen lediglich einen Kommentar unter diesem Beitrag. Darin teilen Sie uns kurz und knackig mit, warum Sie Interesse an dem Produkt haben. Die Teilnahme ist ab sofort möglich und endet am Mittwoch, den 20. Mai 2015 um 18:00 Uhr.

Die Gewinner werden aus allen eingegangenen Kommentaren ermittelt. Damit wir Sie im Gewinnfalle erreichen können, stellen Sie bitte sicher, dass Sie eine gültige E-Mail-Adresse zum Kommentieren verwenden. E-Mail-Adressen werden nur zur Benachrichtigung der Gewinner und zu keinem anderen Zweck verwendet.

Bleibt mir nur zu wünschen: Viel Glück!

Dass mit dem SVG-Format in Kombination mit JavaScript anspruchsvolle und schicke Animationen möglich sind, beweisen die vielen Frameworks, die solche Animationen realisieren. Vivus reiht sich ein in diese Liste. Statt mit umwerfenden 3D-Effekten zu punkten, geht Vivus einen anderen Weg: Das Framework sorgt dafür, dass mehr oder weniger einfache Strichgrafiken per Animation gezeichnet werden. Dank einiger Einstellungsmöglichkeiten wird so aus einer ziemlich simplen Grafik ein sehr ansehnlicher Effekt.

Voraussetzung für eine animierte Strichgrafik

Damit aus einer statischen SVG-Grafik mit Vivus eine Animation wird, müssen die zu animierenden Formen eine sichtbare Kontur besitzen. Denn Vivus animiert nur die Kontur eines SVG-Elementes. Daher sollte eine Form immer ohne Füllung vorliegen. Dazu genügt es, den Formen die Eigenschaft “fill: none” hinzuzufügen.

Technisch erfolgt die Animation per Stylesheet. Dazu werden die CSS-Eigenschaften „stroke-dasharray“ und „stroke-dashoffset“ verwendet. Die beiden Eigenschaften dienen eigentlich dazu, gestrichelte Linien darzustellen. Die Werte für die beiden Eigenschaften beschreiben die Länge eines Strichs sowie den Abstand zwischen den Strichen. Vivus nutzt diese Eigenschaften, um einer Form eine gestrichelte Linie zuzuweisen, bei der der Abstand („stroke-dashoffset“) per „animation“-Eigenschaft von 1000 auf 0 reduziert wird. Der Wert für „stroke-dasharray“ wird dabei so gewählt, dass die gestrichelte Linie der Form nur einen Strich aufweist.

Da sich die beiden genannten CSS-Eigenschaften nur auf „<path>“-Elemente anwenden lassen, muss neben der Datei „vivus.js“, welche für die eigentliche Animation zuständig ist, auch die Datei „pathformer.js“ im HTML-Dokument eingebunden werden. Pathfinder sorgt dafür, dass alle SVG-Formen von Vivus automatisch in ein „<path>“-Element umgewandelt werden.

SVG-Grafik per Vivus animieren

Für eine Animation muss zunächst eine SVG-Grafik in einem HTML-Dokument verfügbar gemacht werden. Damit es später per Vivus animiert werden kann, defineiren wir auch eine ID, über die die Grafik später ansprechbar ist.

1
2
3
4

<svg id="strichgrafik">
  <path stroke="blue" stroke-width="2" fill="none" d="…" />
  <rect stroke="blue" stroke-width="2" fill="none" x="0" y="0" width="100" height="200" />
</svg>

Im Beispiel werden ein „<path>“-Element sowie ein Rechteck per SVG definiert. Anschließend wird per JavaScript der Grafik die Vivus-Animation hinzugefügt.

1

new Vivus("strichgrafik", {type: "delayed", duration: 500}, callback);

Dies geschieht, indem wir ein neues „Vivus()“-Objekt erstellen. Erwartet werden mindestens zwei Parameter. Der erste ist die ID der SVG-Grafik. Es folgt ein Literalobjekt mit verschiedenen Einstellungen für die Animation. Optional kann noch eine Callback-Funktion angegeben werden, die nach Beendigung der Animation ausgeführt wird.

Per „type“ geben wir die Art der Animation an. Der Wert „delayed“ sorgt dafür, dass die Animation die in „duration“ angegebene Dauer lang ist. Dabei werden alle Formen mit einem kleinen zeitlichen Versatz gleichzeitig gezeichnet. Der Wert für „duration“ ist dabei nicht in Sekunden oder Millisekunden angegeben, sondern in Frames. Mit dem Typ „async“ startet die Animation alle Formen ohne zeitlichen Versatz.

Neben „delayed“ und „async“ gibt es noch den Wert „oneByOne“. Dieser sorgt dafür, dass alle Formen nacheinander gezeichnet werden – im Beispiel also erst der Pfad und anschließend das Rechteck. Der Wert für „duration“ gilt hier für jede zu zeichnende Form.

Eine SVG-Grafik unterschiedlich animiert

Die Formen werden in der Reihenfolge animiert, wie sie in der SVG-Grafik angelegt sind.

Individuelle Animation mit einem „Szenario“

Als letztes gibt es noch den Typ „scenario“. Hierbei hat man die Möglichkeit, die Animation für jede einzelne Form einer SVG-Grafik individuell anzugeben.

1

new Vivus("strichgrafik", {type: "scenario", duration: 500}, callback);

Für die einzelnen Formen der SVG-Grafik lassen sich nun per Data-Attribut ein Startpunkt („data-start“) sowie eine Dauer („data-duration“) für die Animation definieren.

1
2
3
4

<svg id="strichgrafik">
  <path data-start="500" data-duration="750" stroke="blue" stroke-width="2" fill="none" d="…" />
  <rect data-start="0" data-duration="1500" stroke="blue" stroke-width="2" fill="none" x="0" y="0" width="100" height="200" />
</svg>

Im Beispiel startet die Animation für den Pfad bei 500 Frames und dauert 750 Frames. Das Data-Attribut „data-duration“ überschreibt hierbei die im JavaScript angegebene Dauer.

Eine Alternative für „scenario“ ist „scenario-sync“.

1

new Vivus("strichgrafik", {type: "scenario-sync", duration: 500}, callback);

Bei dieser Form wird kein absoluter Startwert angegeben, sondern ein Delay. Dieser Delay beschreibt die Zeit, die zwischen dem Ende der vorherigen Animation und dem Start einer neuen Animation vergehen soll.

1
2
3
4

<svg id="strichgrafik">
  <path data-delay="0" data-duration="750" stroke="blue" stroke-width="2" fill="none" d="…" />
  <rect data-delay="250" data-duration="1500" stroke="blue" stroke-width="2" fill="none" x="0" y="0" width="100" height="200" />
</svg>

Im Beispiel beginnt die Animation des Pfades sofort. Das Rechteck wird 250 Frames nach Ende der Pfadanimation animiert. Gerade bei vielen zu animierenden Formen kann es einfacher sein, mit diesem Typ zu arbeiten.

Animationsstart definieren

Normalerweise startet die Animation der SVG-Grafik automatisch. Da eine Grafik mitunter erst durch Scrollen sichtbar wird, gibt es die Möglichkeit, die Animation erst dann zu starten, wenn sich die Grafik im Viewport des Browsers befindet. Dazu wird der Eigenschaft „start“ der Wert „inViewport“ hinzugefügt.

1

new Vivus("strichgrafik", {type: "scenario", duration: 500, start: "inViewport"}, callback);

Mit dem Wert „manual“ ist es zudem möglich, ein automatisches Starten der Animation ganz zu unterbinden. Das ist nützlich, wenn die Animation per Buttonklick gestartet werden soll. Um die Animation manuell steuern zu können, ist es wichtig, dass der „Vivus()“-Aufruf einer Variablen zugeordnet wird.

1

var grafik = new Vivus("strichgrafik", {type: "delayed", duration: 100, start: "manual"});

Anschließend kann man die Steuerfunktion für die Animation einem Button zuordnen.

1
2
3

document.getElementById("button").addEventListener("click", function() {
  grafik.play();
}, false);

Im Beispiel wird per „play()“ die Animation per Klick auf einen Button gestartet. Die Animationsgeschwindigkeit kann der Methode „play()“ optional hinzugefügt werden. Werte zwischen 0 und 1 spielen die Animation langsam ab, Werte darüber schnell. Ein negativer Wert sorgt dafür, dass die Animation rückwärts läuft.

Neben der „play()“-Methode gibt es „stop()“ zum Anhalten der Animation und “reset()”, um zum Startpunkt der Animation zurückzukehren.

Browsersupport

Vivus läuft auf allen gängigen Browsern. Wie so oft macht der Internet Explorer einige Probleme. So ist es notwendig, beim Internet Explorer die Pfade bei jedem Animationsframe neu zu zeichnen. Das sorgt natürlich für einen höheren Ressourcenverbrauch, wird aber auch nur beim Internet Explorer so gemacht. Außerdem lässt sich dieses ständige Rendern per „forceRender“ ausschalten – mit dem Risiko, dass es in Microsofts Browser nicht mehr richtig läuft.

Vivus kommt ohne weitere Bibliotheken wie beispielsweise jQuery aus und wird unter der MIT-Lizenz abgegeben. Das Framework kann also kostenlos für eigene Projekte eingesetzt werden.

Link zum Beitrag

• Vivus

(dpe)

Webdesigner sind immer auf der Suche nach neuen Helferlein, die ihnen das Leben erleichtern. Dabei ist es zunächst einmal egal, um was es sich handelt. Ob es ein Online-Tool ist oder ob es sich um neue Ressourcen handelt, gebrauchen kann man fast alles irgendwann. Wir haben uns daher einmal im Netz umgesehen und neue, wirklich frische Tools aus diesem Monat für Sie ausgesucht. Dabei herausgekommen ist eine gute Mischung von Tools zum Testen von Code, ein neuer HTML-Editor und vieles mehr, von dem wir annehmen, dass es Ihnen gefallen wird.

1. Visual Studio Code

Microsoft öffnet sich immer weiter und produziert einen neuen und plattformübergreifenden Code-Editor. Der Editor versteht sich nicht als umfassende Entwicklungsumgebung, sondern als kleiner, aber feiner Code-Editor für alle modernen Web- und Cloud-Anwendungen. Der Editor wird für Windows, Linux und Mac OS X angeboten und soll mit Apps wie SublimeText 2 konkurrieren können, sobald die fertige Version angeboten wird. Der Editor befindet sich noch in einer “Preview”-Phase.

2. Colour Shades Generator

Der Colour Shades Generator zeigt Ihnen die optimalen Schatten-Farben für die Arbeit mit CSS-Shadows an, nachdem Sie einen Farbcode eingegeben haben. Um eine der dargestellten Farben zu kopieren, müssen Sie nur darauf klicken.

3. CSS Dig

Diese praktische Chrome Extension bietet eine alternative Möglichkeit, Ihr CSS zu analysieren und Korrekturen und Verbesserungen vorzunehmen. Alle Eigenschaften werden mit ihren Selektoren angezeigt. So findet man unter Umständen doch noch Verbesserungspotential in einer CSS-Datei.

4. Think with Paper

Paper ist eine Zeichen-App für das iPad, mit dem Sie Diagramme mit geraden Linien, Formen und Objekte aller Art erstellen können. Freihändig sind Kreise und Dreiecke möglich, die sich jederzeit ändern lassen. Das Tool ist sehr gut dafür geeignet, um Ideen zu erfassen oder Mockups zu erstellen. Die App ist kostenlos erhältlich. Wir haben das Tool bereits in einer frühen Version ausführlicher vorgestellt.

5. HTML Arrows

HTML Arrows bietet entgegen dem Namen nicht nur die Pfeilsymbole für die Nutzung im HTML-Quellcode an, sondern eine ganze Menge anderer, nützlicher Symbole ebenfalls. Diese Website sollte jeder Webdesigner und Webentwickler in seine Lesezeichen aufnehmen. Alle gebräuchlichen HTML-Zeichen sind komplett mit Code enthalten.

6. TouchDevelop

TouchDevelop ist ein weiteres Tool aus Microsofts sich öffnendem Portfolio. TouchDevelop ermöglicht sowohl Anfängern als auch erfahrenen Programmierern, Apps mit ihrem Handy, Tablet oder einer Desktop-Umgebung zu schaffen. Man kann aus drei Schwierigkeitsstufen vom Anfänger bis hin zum Profi auswählen. Die Drag-and-Drop-Oberfläche des Tools ermöglicht eine einfache Gestaltung einer App. Entwickelt wurde das Tool, um Menschen das Programmieren näher zu bringen und Ihnen einen leichten Einstieg in die App-Programmierung zu bieten. Je nach Wissensstand ersetzen Sie nach und nach die Nutzung des Drag-and-Drop-Editors durch das Einbringen eigenen Codes. Wie Visual Studio-Code ist TochDevelop ein plattformübergreifendes Angebot, das auf Android, iOS, Windows Phone, Windows, Linux und Mac verfügbar ist.

7. ES Feature Tests

ES Feature Tests ermöglicht Ihnen, faktengestützt den besten Code an jeden Browser auszuliefern. Natives ECMAScript 6 geht an kompatible Browser, ein Fallback existiert. Hier finden Sie eine Kompatibilitätsübersicht. Das Tool bietet Funktionstests für jeden Browser.

8. Vorlon.js

Debuggen und testen Sie Ihr JavaScript mit diesem Tool auf Basis von node.js und socket.io. Sie können sich remote auf bis zu 50 Geräte simultan schalten und Ihren Code ausführen, um Performance zu testen und Fehler zu beheben. Vorlon.js ist ein Weg zum Debuggen Ihres Codes auf annähernd jeder Plattform. Vorlon.js ist Open-Source und kostenlos. Plugins zur Erweiterung der Funktionalität sind ebenfalls erhältlich. Auch dieses Tool entstammt dem Microsoft-Kosmos.

9. Ionic

Ionic befand sich bereits einige Zeit im Beta-Stadium, ging jedoch in diesem Monat offiziell mit der endgültigen Version 1.0.0 ‘uranium-unicorn’ online. Ionic ist eine Open-Source-Bibliothek mit mobil-optimierten HTML, CSS und JS Komponenten, Gesten und Tools für die Erstellung von interaktiven Apps. Entwickelt wurde Ionic mit Sass. Es ist optimiert für Angular.js.

10. RightFont

Sollten Sie extrem viele Fonts auf Ihrem Mac haben, könnte diese App für Mac OS X für Sie sinnvoll sein. RightFont ermöglicht Ihnen die Kontrolle über alle Schriftarten auf Ihrem Mac. Die App gibt Ihnen den Zugriff direkt von der Menü-Bar aus und integriert die Schriftarten in Photoshop und Sketch 3. Die Fonts können nach unterschiedlichen Kriterien organisiert werden, etwa nach Serif oder Sans-Serif, Google oder Typekit, Breite, Font-Gewicht und vielem mehr.

Links zum Beitrag

• Visual Studio Code
• Colour Shades Generator
• CSS Dig
• Think with Paper
• HTML Arrows
• TouchDevelop
• ES Feature Tests
• Vorlon.js
• Ionic
• RightFont

(dpe)

Einer unserer Leser machte uns auf den Pinegrow Web Editor aufmerksam, einen visuellen Web-Editor zur Entwicklung von HTML-Websites. Das klang gut und war somit für uns Grund genug, dem Editor wenigstens eine Kurzvorstellung zu widmen. Pinegrow arbeitet mit den bekannten Frameworks Bootstrap, Foundation, AngularJS und anderen zusammen. Wenn Sie mit HTML-Seiten, Templates oder mit den Frameworks Bootstrap oder Foundation arbeiten, sollten Sie sich diesen Editor unbedingt anschauen, denn das Besondere an ihm ist, dass es keinerlei Code-Ansicht auf den ersten Blick gibt, sondern die komplette Entwicklung eines HTML-Templates nur noch über den visuellen Editor geschehen soll.

Pinegrow – Eine Einführung

Pinegrow wurde speziell für die Zusammenarbeit mit den großen und beliebten HTML-Frameworks Twitter Bootstrap und Foundation entworfen, arbeitet jedoch auch mit AngularJS und anderen Frameworks zusammen. Der Editor ist für Mac OS X, Windows und Linux (32 und 64 Bit) erhältlich und kostet €49 für die persönliche Lizenz, die dann auf bis zu drei Geräten installiert werden darf. Eine Business-Lizenz ist ebenfalls zu haben, hierfür müssen dann €79 pro Gerät aufgewendet werden. Ein Jahr Updates sind im Preis enthalten. Studenten oder Lehrkräfte bekommen den Editor zu einem reduzierten Preis von €25.

Pinegrow fügt Ihrem Projekt keinerlei eigenen Code hinzu und man muss auch keine besonderen Frameworks laden und im Anschluss auf den Server spielen. Der Editor dient nur dem Öffnen, Bearbeiten und Abspeichern Ihrer HTML-Dateien.

Test-Lizenz

Eine Test-Lizenz für 7 Tage ist erhältlich, man muss also die Katze nicht im Sack kaufen, sondern kann ausgiebig testen, ob man mit dem visuellen Editor zurecht kommt. Beim ersten Aufruf der Software bekommt man ein Fenster zu sehen, in dem man unter Eingabe einer E-Mail-Adresse den Test-Key anfordern kann. Die einzige Einschränkung, mit der man in der Testversion leben muss, ist, dass man kein HTML oder CSS abspeichern kann.

Um den Code dennoch abspeichern zu können, gibt es einen Trick: unter “Page => Edit Code” kann man sich den Code anzeigen lassen, ihn kopieren und dann manuell außerhalb von Pinegrow abspeichern.

Das Video: Eine Einführung in Pinegrow

Erste Schritte mit Pinegrow

Nachdem die Software geladen und installiert ist, empfiehlt es sich, dass Kelvin Pine Test-Projekt herunter zu laden und sich damit in den visuellen Web-Editor einzuarbeiten. Am besten legt man den entkomprimierten Ordner auf dem Desktop ab und beginnt mit dem Hinzufügen per Drag und Drop der blank.html Datei in den Editor. Nachdem dies geschehen ist, wird der Plugin-Manager aufgerufen (siehe Markierung im Screenshot) und der kelvin-pine Ordner nach dem Plugin für das Test-Projekt durchsucht. Die korrekte Datei befindet sich im Unterordner “Pinegrow” und heisst KelvinPinegrowPlugin.js. Siehe Screenshots.

Nachdem das Plugin hinzugefügt ist, muss es noch aktiviert werden.

Ist dies einmal geschehen, kann nun die Webseite mittels Drag-und-Drop-Elementen von der linken Seite aus gefüllt werden.

Sollten Sie sich noch etwas unsicher fühlen, wie man die einzelnen Elemente aufteilt und hinzufügt, dann können Sie auch eine bereits gefüllte Seite aus dem Projekt-Ordner laden und bearbeiten. Schliessen Sie dazu die blank.html und fügen Sie die index.html in das Bearbeitungsfenster ein, indem Sie die Datei einfach nur in das Fenster ziehen. Nun sehen Sie eine komplett fertiggestellte HTML-Seite, die Sie nach Herzenslust bearbeiten können.

Video: Die Arbeit mit dem Kelvin Pine Projekt

Das bietet Ihnen Pinegrow

Der Pinegrow-Editor verspricht ein schnelles Layouting mit seinen Funktionen für das Hinzufügen, Editieren, Bewegen, Klonen und Löschen von HTML-Elementen. Alles, was in Pinegrow bearbeitet wird, ist live. Es existiert keinerlei Vorschau-Modus, das Editieren und Testen der Webseite geschieht in Echtzeit. Das funktioniert auch, wenn Sie dynamische JavaScript-Elemente nutzen. Einige Funktionen im Detail:

Linke Sidebar – die Bearbeitungsfenster

Die Sidebar bietet 4 verschiedene Reiter zur Bearbeitung der Elemente. Im Standard-Reiter “Lib” können Sie Elemente der zu bearbeitenden HTML-Seite hinzufügen. “Prob” sorgt für die Anpassung des gerade ausgewählten Elements. Im Reiter “CSS” beeinflussen Sie das CSS der Seite und unter “Vars” finden Sie die Einstellungen zu den einzelnen Farben.

Direkte Änderungen der Elemente

Über das “Actions”-Menü, welches nach dem Markieren eines Elements erscheint, lassen sich weitere Einstellungen tätigen, wie zum Beispiel die direkte Code-Bearbeitung, die Anzeige der CSS-Regeln, die Änderung des Textes und ähnliches.

Über “Edit Code” bekommt man direkt ein Eingabefenster für die schnelle Änderung eines HTML-Elements angezeigt.

Über die Funktion “Test Klicks” kann man auf die schnelle die korrekte Verlinkung der Navigation austesten.

Die einzelnen Features des Pinegrow Web-Editors

Pinegrow bietet Ihnen eine einige Features, die Sie Webseiten völlig anders – vielleicht sogar schneller – entwickeln lassen, als es bisher der Fall war. Im Folgenden eine Aufzählung aller Funktionen des visuellen Web-Editors Pinegrow. Zu jedem Feature gibt es auf der Website zu Pinegrow ein erklärendes Gif, dass die angesprochenen Funktionen noch einmal visuell erklärt. Leider laufen diese Gifs nicht hier auf Dr. Web, weil dazu zusätzliches JavaScript nötig wäre, ansonsten hätten wir die Gifs verlinkt.

Framework-Unterstützung

Pinegrow bietet volle Unterstützung für Bootstrap und Foundation. Ziehen Sie Komponenten in das Bearbeitungsfenster und passen Sie sie an eigene Bedürfnisse an. Pinegrow stellt automatisch Attribute, fügt Klassen hinzu oder passt den HTML- und CSS-Code der Komponente an. AngularJS, 960 Grid und einfaches HTML werden ebenfalls unterstützt.

Die Bearbeitung multipler Seiten

Sie können mehrere Seiten zur gleichen Zeit bearbeiten, dass bietet sich besonders für responsive Projekte an. Seiten können dupliziert und gespiegelt werden, alle Änderungen in der Quell-Seite werden sofort in die gespiegelte Seite übernommen. Verschiedene Zoom-Stufen und Ansichten für mobile Geräte können eingestellt werden.

Pinegrow und der Code

Die Software versteckt den Quellcode nicht vor Ihnen, Sie können ihn jederzeit einsehen. Möglich ist auch das Entwickeln von Webseiten mit gleichzeitiger Code- und visueller Ansicht. Egal, wo Sie Änderungen tätigen, die Auswirkungen sind sofort ersichtlich. Das könnte Pinegrow zu einem guten Werkzeug für das Erlernen von HTML und CSS machen.

 Der CSS-Editor

Das CSS kann entweder visuell bearbeitet werden oder über die Codeansicht direkt. Fügen Sie Klassen, IDs und Variablen hinzu, um Themes leicht anzupassen. Nutzen Sie den integrierten Stylesheet-Manager zum Klonen, Hinzufügen und Entfernen von Stylesheets. Alle Änderungen, die Sie eingegeben haben, sind sofort auf allen Seiten zu sehen, welche dieses Stylesheet nutzen.

Gestalten Sie Ihre Webseiten responsiv

Responsive Webseiten zu gestalten, verspricht mit dem Media Query Hilfs-Tool recht einfach zu sein. Mittels benutzerdefinierten Breakpoints oder dem automatischen Auslesen der Stylesheets werden Ihre Websites responsiv. Um den Erfolg sofort nachvollziehen zu können, nutzen Sie die Einstellung für multiple Ausgabegrößen. So können Sie die normale Ansicht editieren und sehen sofort live, wie sich Ihre Änderungen auf die (zum Beispiel) Smartphone-Ansicht auswirkt.

Bearbeitung beliebiger Seiten aus dem Netz

Jede Seite, die bereits live im Web ist, kann im Editor geöffnet und bearbeitet werden. Das verschafft Ihnen den großen Vorteil, nötige Anpassungen an Ihrer Live-Website auf dem heimischen Desktop ganz in Ruhe erledigen zu können, um die Änderungen dann komplett einmal auf den Server zu laden, nachdem Sie alle Neuerungen durchgeführt haben. Fügen Sie einfach die URL zu der betreffenden Webseite, die Sie geändert wissen möchten, ein und verändern Sie die Seite. Sie können das Layout ändern, die Texte und Bilder anpassen, CSS-Regeln modifizieren und so weiter. Das modifizierte HTML und CSS kann dann auf dem Computer gespeichert und in die Live-Website integriert werden.

Benutzerdefinierte Elemente zur Baustein-Bibliothek hinzufügen

Sie können jedes Element, was Sie einmal geschrieben haben, zur Bibliothek für Bauteile hinzufügen, um dann zu einem späteren Zeitpunkt leicht darauf zugreifen zu können. Die Komponenten-Bibliothek wird als Pinegrow JavaScript-Plugin gesichert, so können Sie leicht darauf zugreifen, um etwas zu ändern, oder den Baustein mit anderen Menschen zu teilen und ihn zu verwalten.

Pinegrow zusammen mit Ihrem favorisierten Code-Editor nutzen

Laut Aussage von Pinegrow passt der Editor genau in Ihren Arbeitsablauf. Verwenden Sie ihn zusammen mit Ihrem Lieblings-Editor (mit Smart-Auto-Refresh), Quellcode-Verwaltungssystem, Paketmanager und Implementierungs-Tools. Leider ist nicht angegeben, mit welchen Code-Editoren Pinegrow gut zusammenarbeitet. Ein Austesten dieser Funktion benötigt jedoch nur wenige Minuten. Ein kurzer Test mit dem Brackets-Editor war erfolgreich.

Einige Video Tutorials zum Pinegrow Web Editor

Pinegrow ist hervorragend dokumentiert, nicht nur durch eine Online-Dokumentation, sondern auch durch etliche, sehr informative Videos. Das darf man – ohne in Jubelschreie auszubrechen – getrost als vorbildlich ansehen.

Ein Website-Layout erstellen

Eine Website mit CSS und dem Pinegrow Web Editor stylen

Multiple Seiten gleichzeitig bearbeiten

Inhalt und Code editieren

Bootstrap-Komponenten nutzen und bearbeiten

CSS Variablen und Funktionen nutzen 

Live-Webseiten aus dem Internet bearbeiten

Fazit

Der Pinegrow Web Editor bietet einen völlig neuen und interessanten Weg zum Erstellen und Editieren von HTML-Websites. Wer oft neue Designs entwerfen muss, kann von dem Editor mit Sicherheit profitieren, denn nach einem kurzen Test kann ich behaupten, dass die Entwicklung neuer Designs sehr viel Spaß macht und mit etwas Einarbeitungszeit bestimmt auch schneller als bisher geht. Schade nur, dass der Editor bis jetzt nicht für die Entwicklung von WordPress-Themes geeignet ist, aber ein entsprechendes Plugin kann von jedermann geschrieben und angeboten werden. Abschliessend bleibt mir die Empfehlung, sich den Pinegrow Web Editor einmal genauer anzusehen und für die bereits beschriebenen 7 Tage eingehend zu testen.

Links zum Beitrag

• Pinegrow Homepage und Download (EN)
• Die Lizenz-Modelle von Pinegrow
• Dokumentation: Ein Layout mit Pinegrow entwerfen (EN)
• Pinegrow Support-Seiten (EN)
• Dokumentation: Das Kelvin Pine Bootstrap Theme (EN)
• Die umfassende Dokumentation zu Pinegrow (EN)
• Das FAQ zu Pinegrow (EN)
• Die Hintergrundstory zu Pinegrow (EN)
• Der Twitter-Account zu Pinegrow (für Produkt-Updates)
• Der Youtube Channel von Matjaž Trontelj, dem Entwickler von Pinegrow. Der Channel bietet die neuesten Video-Tutorials zu Pinegrow

(dpe)

Dank der zahlreich zur Verfügung stehenden CSS-Selektoren kann man per Stylesheets auf fast jedes einzelne HTML-Element innerhalb eines Dokumentes zugreifen. Und dank des Pseudoelementes ::first-line hat man sogar innerhalb eines Textes die Möglichkeit, CSS-Eigenschaften nur auf die erste Zeile anzuwenden – unabhängig davon, ob die Zeile automatisch umgebrochen oder durch manuellen Zeilenumbruch herbeigeführt wird. Da es neben ::first-line aber keine weiteren Selektoren gibt, um auf die zweite, dritte oder letzte Zeile eines Textes zuzugreifen, kann man sich diese noch fehlenden CSS-Selektoren mit der JavaScript-Bibliothek Lining.js nachrüsten.

.line[last] statt ::last-line

Analog zu den Selektoren ::last-child und ::nth-child(), mit denen auf das letzte oder ein anderes beliebige Kindelement zugegriffen werden kann, stellt Lining.js ein ähnliches Verhalten für Textzeilen zur Verfügung. Statt der nicht vorhandenen Selektoren ::last-line und ::nth-line(n) werden die Zeilen über die Klassen .line[last] und .line[index="n"] angesprochen.

Ist die JavaScript-Datei im Dokument eingebunden, müssen zunächst die Textelemente, auf die Lining.js angewendet werden soll, mit dem Data-Attribut data-lining ausgezeichnet werden. Einen Wert benötigt das Attribut nicht.

1
2
3

<p data-lining>
  Lorem ipsum …
</p>

Anschließend können über diese Klassen einzelne Zeilen innerhalb eines Textes individuell per CSS ausgezeichnet werden.

1
2
3
4
5
6
7

p .line[last] {
  color: red;
}
 
p .line[index="2"] {
 font-weight: bold;
}

.line[last] und .line[index="2"] auf einen Text angewendet

Im Beispiel wird die jeweils letzte Zeile eines <p>-Elementes rot gefärbt, während die jeweils zweite Zeile fett dargestellt wird. Obwohl es das Pseudoelement ::first-line gibt, existiert mit .line[first] auch eine Variante für Lining.js. Hier bleibt Ihnen freigestellt, für welche Variante Sie sich entscheiden.

Auch für die Pseudoelemente ::nth-of-type() und ::nth-last-of-type() gibt es mit .line:nth-of-type() und .line:nth-last-of-type() entsprechende Möglichkeiten für Textzeilen.

1
2
3

p .line:nth-of-type(2n) {
  color: green;
}

Alternative Zeilen mit .line:nth-of-type(2n)

Im Beispiel wird dank .line:nth-of-type(2n) jede zweite Zeile eines Textes grün angezeigt. Mit dem Selektor .line:nth-last-of-type(2n) erhält man ebenfalls Zugriff auf jede zweite Zeile. Die Zählung beginnt jedoch mit der letzten Zeile statt mit der ersten.

Als letztes gibt es noch den einfachen Selektor .line. Mit diesem kann man CSS-Eigenschaften auf jede Zeile eines Textes anwenden. Dieser Selektor ist dann interessant, wenn man beispielsweise nach jeder Zeile eine Linie zeichnen möchte.

1
2
3

p .line {
  border-bottom: 1px solid blue;
}

Linie unterhalb jeder Zeile mit .line

Das Beispiel sorgt dafür, dass nach jeder Zeile eine blaue Linie dargestellt wird. Ohne Lining.js hätte man nur Zugriff auf das <p>-Element als Ganzes und könnte nur den Absatz mit einer Linie versehen.

Standardaussehen definieren

Da nicht jeder Browser Lining.js unterstützt, gibt es zusätzlich die Möglichkeit, das Standardaussehen von Texten unterschiedlich zu definieren. So kann das Aussehen bei Unterstützung von Lining.js anders aussehen als bei Nicht-Unterstützung.

1
2
3
4
5
6
7

p {
  font-style: italic;
}
 
.nolining p {
  font-style: normal;
}

Im Beispiel werden zunächst alle <p>-Elemente mit kursiver Schrift ausgezeichnet. Über die Klasse nolining wird dann ein abgewandeltes Aussehen definiert, falls der Browser Lining.js nicht unterstützt.

Lining.js und responsives Layout

Die Zeilen eines Textes werden per Lining.js beim Laden der Seite einmalig festgelegt. Verschieben sich die Zeilen, weil das Browserfenster breiter oder schmaler gemacht wird, bleibt die ursprüngliche Zeileneinteilung und das damit verbundene Aussehen beibehalten. Will man jedoch, dass die Zeilen bei veränderter Größe des Fensters neu eingeteilt werden, muss den jeweiligen Texten das zusätzliche Data-Attribut data-auto-resize zugewiesen werden.

1
2
3

<p data-lining data-autoresize>
  Lorem ipsum …
</p>

Ändert man dann das Browserfenster, sorgt Lining.js dafür, dass die veränderte Zeileneinteilung bei den Pseudoelementen – zum Beispiel .line[index="3"] – berücksichtigt wird.

Lining.js nur auf bestimmte Zeilen anwenden

Technisch funktioniert Lining.js so, dass jede Zeile eines Textes mit dem Element <text-line> umschlossen wird. Diese Umwandlung kann gerade bei langen Texten durchaus ein Weilchen dauern. Will man Lining.js gar nicht auf den gesamten Text anwenden, kann man die Umwandlung in einzelne Zeilen auf einen bestimmten Textbereich begrenzen. Mit den Data-Attributen data-from und data-to geben wir einen Bereich an, der in einzelne Zeilen umgewandelt werden soll.

1
2
3

<p data-lining data-from="5">
  Lorem ipsum …
</p>

Im Beispiel werden nur die fünfte und alle folgenden Zeilen des Absatzes berücksichtigt. Entsprechend lassen sich die Selektoren auch nur auf diesen Bereich anwenden.

Animierte Effekte zum Ein- und Ausblenden

Neben der eigentlichen Möglichkeit, auf einzelne Textzeilen zuzugreifen, gibt es eine ergänzende JavaScript-Bibliothek, mit der wir animierte Effekte auf die Zeilen anwenden. So lassen sich Texte Zeile für Zeile auf unterschiedliche Weise ein- und ausblenden. Die Datei lining.effects.js muss dafür mit eingebunden werden. Anschließend stehen einem die Ein- und Ausblendeffekte zur Verfügung. Sie werden über das Data-Attribut data-effect angesprochen.

1
2
3

<p data-lining data-effect="rolling">
  Lorem ipsum …
</p>

Einblendeffekt rolling

Im Beispiel wenden wir den Effekt rolling auf einen Text an. Dabei werden die einzelnen Zeilen von der ersten Zeile beginnend nach unten geklappt. Insgesamt stehen sieben verschiedene Einblendeffekte zur Verfügung – vom einfachen Fade-in und Slide-in bis hin zum komplexen metroRotateIn, bei dem die Zeilen per 3D-Drehung und Fade-in eingeblendet werden.

Fazit

Lining.js ist ein sehr gut durchdachtes und umfangreiches Werkzeug, das eine individuelle Gestaltung von Texten beziehungsweisen dessen Zeilen ermöglicht. Die schicken Animationseffekte runden den Funktionsumfang der Bibliothek gut ab. Zusätzlich zur Auszeichnung per Data-Attribute ist auch eine ausschließliche Konfiguration per JavaScript möglich.

Lining.js läuft in allen gängigen Versionen von Chrome, Safari und Opera. Kleiner Wermutstropfen: Der Internet Explorer wird derzeit gar nicht unterstützt. Die Bibliothek steht wie viele dieser Art unter der MIT-Lizenz kostenlos zur Verfügung.

Dank einer guten Dokumentation und einigen Beispielen ist der Einstieg in Lining.js einfach.

(dpe)

Webdesigner und Entwickler sind stets auf der Suche nach Tools, die ihnen die Arbeit erleichtern oder angenehmer gestalten. Neue Ressourcen für die Entwicklung von Websites mit HTML5 und CSS3 werden dabei natürlich immer gerne gesehen. Immer mehr Designer und Entwickler setzen bei Ihrer täglichen Arbeit gezielt auf HTML5 und CSS3, was man nicht oft genug empfehlen kann. Heute haben wir eine Liste mit neuen und nützlichen Ressourcen für Sie erstellt, die sich genau diesem Thema widmet.

Tools für Webdesign und Webentwicklung

HTML5 macht das Webdesign einfacher und funktionsreicher in vielen Belangen. Es kann Ihnen dabei helfen, Apps und Websites mit mehr Funktionalität und Performance auszustatten und faszinierende Desktop-Anwendungen zu kreieren. Die von uns vorgestellten HTML5-, CSS3- und auch JavaScript-Tools sollen Ihnen bei einer schnellen und zügigen Entwicklung hilfreich sein und das (Arbeits-) Leben einfacher machen.

Login Box Concept

Das Login Box Concept ist eine ansprechende Design-Studie, die online auf eigene Bedürfnisse und Farbgebungen angepasst werden kann. In einem Live-Editor kann man direkt den Code bearbeiten und sofort das Ergebnis des neuen Codes sehen. Alle nötigen Dateien stehen zum Download bereit.

Demo und Download

Circular Fly-Out Navigation Menu

Eine recht interessante Menügestaltung liefert dieses mit Sass und CSS3 Transitions, Transformations und Animations erstellte Tool. In der einen oder anderen Anwendung dürfte sich das Menü mit Sicherheit wiederfinden. Minimalistische Websites und mobile Anwendungen könnten ein Anwendungsbereich sein.

Demo und Download

3D Folding Panel

Das 3D Folding Panel bietet nicht nur einen ansprechenden Effekt, sondern auch ein nützliches Bedienkonzept. Erstellt wurde es mit CSS3 Transformations und jQuery. Quadrate liegen nebeneinander und können beispielsweise als Artikelvorschau dienen. Klickt man auf eines der Quadrate, faltet sich der mittlere Bereich auseinander und zeigt den Content. Das 3D Folding Panel ist voll responsiv und bietet auch auf einem Smartphone seine Vorteile. Websites mit diesem Konzept sind sehr gut vorstellbar.

Demo und Download

Motion Blur Effect with SVG

Das Tool stellt eine Bewegungsunschärfe mit Wirkung auf HTML-Elemente vor. Die Effekte werden mit JavaScript und einem SVG Blur Filter erreicht. INsgesamt ist das ein sehr schönes Beispiel für Anwendungsbereiche und Umsetzung.

Demo und Download

Fixed Background Effect

Fixed Background Effect ist ein einfaches Beispiel, wie sich die CSS-Eigenschaft “background-attachment” sinnvoll und ansprechend nutzen lässt, um einen fixen Hintergrund zu realisieren. Eine nützliche Sache, die wir mit Sicherheit auch öfter in der “freien Wildbahn” sehen werden.

Demo und Download

Pure CSS Questionnaire Concept

Um die interessanten Effekte zu sehen, muss man mit dem Mauszeiger die einzelnen Elemente berühren. Es zeigt sich eine sehr flüssig laufende Animation des blauen Balkens, gleichzeitig wechselt der Hintergrund des Notebook-Bildschirms. Findige Entwickler werden hierfür sicherlich sinnvolle Anwendungsbereiche finden. Die gezeigten Effekte sind mit reinem CSS3 realisiert worden.

Demo und Download

Elevator.js

Elevator.js ist witzig und nervig zugleich. Zuerst einmal muss man bei dieser Demo nach ganz unten scrollen und dort dann auf den “nach Oben”-Button klicken. Der relativ langsam animierte Scroll-Effekt wird von Musik begleitet und endet oben mit einem “Schreibmaschinen-Pling”. Ansprechend und einzigartig ist der Effekt schon und mit anderen Scroll-to-Top Scripts auch nicht zu vergleichen.

Demo und Download

Hero Slider via CodyHouse

Die Hero-Slideshow ermöglicht Ihnen relativ einfach, vollflächige Hintergrund-Slideshows zu erstellen. Die Slideshow kann nicht nur vollflächige Hintergrundbilder darstellen, sondern auch Videos und einzelne Elemente ansprechend integrieren.

Diese Eigenschaften dürften diese Slideshow zu einem Favoriten für die Entwicklung von Websites mit Hero-Bereichen machen.

Demo und Download

Fullscreen Slideshow by Nikolay Talanov

Die Fullscreen-Slideshow kann “nur” Bilder vollflächig darstellen und diese automatisch mit ansprechenden Effekten wechseln. Wer eine reine Bild-Slideshow mit Animationen und automatischem Start sucht, sollte sich diese Slideshow einmal näher ansehen.

Demo und Download

FSVS – Full Screen Vertical Slider

Der Full Screen Vertical Slider ist ein simpler, vollflächiger und vertikal funktionierender Slider, der ausschließlich mit CSS3 Transitions entwickelt wurde. Ein Fallback für Browser, die CSS3 Transitions nicht unterstützen, wurde ebenfalls bedacht und mit etwas jQuery umgesetzt. Bedienen lässt sich der Slider nicht nur über die Punkt-Navigation auf der rechten Seite, sondern auch mit den Pfeiltasten auf der Tastatur, dem Mausrad, normalem Scrollen mittels Trackpad und Touch-Gesten. Das macht den Slider universell einsetzbar, auch im Bezug auf Mobile-First-Anwendungen.

Demo und Download

Simple Responsive Charts – CHARTIST.JS

Chartist.js wurde von einer Gemeinschaft entwickelt, die enttäuscht über andere auf dem Markt befindliche Bibliotheken war. Es existieren unzählige weitere Chart-Bibliotheken, doch keine hatte alle Funktionen, die sich die Gemeinschaft wünschte. Also entwickelten sie Chartist.js, um eine Chart-Anwendung zu haben, bei der man nicht mehr nachbessern muss. Die mit Chartist erstellten, ansprechend animierten Visualisierungen sind voll responsiv und daher auch auf mobilen Geräten gut zu verwenden. Die Chart-Bibliothek bietet dem Entwickler sehr viele Möglichkeiten zur Darstellung von Daten. Des Weiteren kann der Entwickler zwischen etlichen Animations-Möglichkeiten wählen.

Demo und Download

Interactive Drag and Drop Coloring Concept

Unser letzter Kandidat ist kein wirklich nützliches Tool, dafür aber ein sehr gut umgesetztes Experiment. Jeder Bereich der Website kann per Drag und Drop aus der Farbpalette links eigens eingefärbt werden, was auch sehr gut funktioniert. Ein Anwendungsbereich im realen Arbeitsleben könnte zum Beispiel das Testen von verschiedenen Farb-Kombinationen im Zuge der Entwicklung einer Website sein.

Demo und Download

Fazit

Diese Liste zeigt sehr interessante Ansätze und gibt dem Entwickler einige sofort nutzbare Tools an die Hand, mit denen man unmittelbar gute Ergebnisse erzielen kann. Selbst das von uns verlinkte Experiment kann – kreativ eingesetzt – nützliche Dienste im Arbeitsalltag leisten. Kurzum, mit der überwiegenden Anzahl der vorgestellten Tools lassen sich in Null-Komma-Nichts ansprechende Websites erstellen.

Links zum Beitrag

• Interactive Drag and Drop Coloring Concept
• Login Box Concept
• Circular Fly-Out Navigation Menu
• 3D Folding Panel
• Motion Blur Effect with SVG
• Fixed Background Effect
• Pure CSS Questionnaire Concept
• Elevator.js
• Hero Slider via CodyHouse
• Fullscreen Slideshow by Nikolay Talanov
• FSVS – Full Screen Vertical Slider
• Simple Responsive Charts – CHARTIST.JS

(dpe)

Mitte letzten Jahres stellte Google sein neues Designkonzept „Material Design“ vor. Es löst das bisher eingesetzte „Flat Design“ ab und wird in allen Produkten des Unternehmens eingesetzt – von Googles Websites über Chrome bis zum Betriebssystem Android. Mit dem Framework MUI lässt sich das „Material Design“ per HTML, CSS und JavaScript auch auf Webprojekte anwenden. Dabei wird das Designkonzept von der Farbgebung und Typografie über das Aussehen von Menüs und Buttons bis zu animierten Übergängen sehr detailliert übertragen.

Das Besondere an Googles „Material Design“

Im Gegensatz zum derzeit sehr beliebten „Flat Design“ wagt Google mit seinem „Material Design“ den Schritt Richtung Dreidimensionalität. Zwar ist das neue Design immer noch sehr flach, bekommt aber eine räumliche Tiefe. Diese zeichnet sich durch dezente Schlagschatten aus, die hinter den Flächen und Icons erscheinen. Je nach Abstand der einzelnen Objekte erscheinen die Schlagschatten mal mehr mal weniger ausgeprägt.

Das „Material Design“ wird von Google sehr ausführlich auf einer eigenen Website vorgestellt. Dort ist genau geregelt, wie es auszusehen hat und angewendet werden soll. Farben sind definiert, das Aussehen und die Schattierung von Icons sind vorgegeben und Animationen für Button-Klicks, Dropdown-Menüs und andere Übergänge sind festgelegt.

Gerade Entwickler von Apps für Androidgeräte sind angehalten, das neue „Material Design“ anzuwenden. Wer es in Webprojekten einsetzen möchte oder Hybrid-Apps für Android entwickelt und diese per HTML, CSS und JavaScript umsetzt, kann mit dem MUI-Framework Googles Designkonzept anwenden.

Was kann MUI?

MUI besteht aus einer Stylesheet- und einer JavaScript-Datei. Alle Designelemente sind in CSS umgesetzt und lassen sich per Klassen auf HTML-Elemente anwenden. Bestimmtes Verhalten von Buttons, Menüs und Formularen wird mit JavaScript abgebildet. Da MUI auf HTML5 und CSS3 setzt, ist es nur für moderne Browser geeignet. Der Internet Explorer kommt ab Version 10 mit MUI zurecht.

Formular im MUI-Stil

Googles Schrift „Roboto“ ist zwar fester Bestandteil des „Material Designs“, muss bei MUI jedoch separat eingebunden werden. Die Dokumentation empfiehlt hier die Einbindung der Schrift über Googles Webfont-Dienst. Auch Iconfonts sind nicht Bestandteil des MUI-Frameworks. Diese müssen ebenfalls zusätzlich eingebunden werden. MUI verweist hier vor allem auf den Iconfont „Awesome“.

Schriftformatierungen

Innerhalb der Stylesheet-Datei des MUI-Frameworks sind für nahezu alle Darstellungsformen entsprechende Klassen hinterlegt. So lassen sich Überschriften, Texte, Listen, Tabellen, Bilder, Formulare, sowie Buttons und Dropdown-Menüs im „Material Design“ darstellen.

Mit MUI loslegen

Sind Stylesheet- und JavaScript-Datei eingebunden, kann es losgehen. Zunächst einmal muss man sich für ein festes oder fluides Layout entscheiden. Beim festen Layout wird die Seite je nach Viewport in drei festen Breiten dargestellt. Bei der kleinsten Darstellung ist die Seite 768 Pixel breit. Es folgen 962 Pixel und 1170 Pixel Breite. Beim fluiden Layout passt sich die Seite immer der Breite des Viewports an. In jedem Fall wird rechts und links ein Abstand von 15 Pixel dargestellt.

<div class="mui-container">
  …
</div>

Im Beispiel wird per „mui-container“ ein Layout mit festen Breiten angelegt. Per „mui-container-fluid“ stellt man auf das fluide Layout um. Für die Darstellung der Inhalte innerhalb des Layouts steht ein Rastersystem zur Verfügung, welches dem von Bootstrap gleicht. Innerhalb eines 12-Spalten-Rasters lassen sich Inhalte sehr flexibel anordnen.

<div class="mui-row">
  <div class="mui-col-md-8">…</div>
  <div class="mui-col-md-4">…</div>
</div>

Per „mui-row“ wird eine Zeile innerhalb des Rasters definiert. „mui-col-md-8“ definiert eine Spalte, die sich über acht Spalten des Rasters erstreckt, während „mui-col-md-4“ einen Bereich festlegt, der sich über vier Spalten erstreckt. Je nach Breite des Viewports werden die Spalten neben- oder untereinander angeordnet.

MUI-Rastersystem

Hat man das grundlegende Raster definiert, lassen sich die verschiedenen Inhalte im „Material Design“ gestalten. Überschriften sowie die „<strong>“- und „<em>“-Elemente werden immer in den Vorgaben für das „Material Design“ gestaltet, ohne dass Klassen übergeben werden müssen. Listen und Tabellen sind hingegen mit einer entsprechenden Klasse auszuzeichnen, da es hierbei unterschiedliche Darstellungsmöglichkeiten gibt.

Bei Tabellen lassen sich Zeilen entweder mit oder Rahmen darstellen.

<table class="mui-table mui-table-bordered">
  …
</table>

Während die Klasse „mui-table“ eine einfache Tabelle ohne Rahmen zeichnet, sorgt die ergänzende Klasse „mui-table-bordered“ für einen Rahmen um jede Zeile. Die Kopfzeile wird in beiden Fällen mit einer Linie von den restlichen Zeilen optisch getrennt.

Unterschiedliche Darstellung einer Tabelle: links ohne Rahmen für Körperzeilen, rechts mit Rahmen

Dropdown-Menüs und Buttons mit Effekten

Das „Material Design“ sieht vor, dass sich bei Buttons beim Klick oder Berühren eine Art Glanzeffekt von der Position der Berührung über die gesamte Fläche des Buttons ausbreitet. Auch diese Besonderheit wird vom MUI-Framework berücksichtigt. Bei den Buttons wird zudem unterschieden zwischen einfachen und primären Buttons, sowie solchen, die auf eine Gefahr aufmerksam machen sollen. Während einfache Buttons weiß und primäre Buttons blau sind, sind die „Gefahr-Buttons“ rot. Für deaktivierte Buttons gibt es farblich abgeschwächte Darstellungsformen.

Buttons und Dropdown-Menüs im MUI-Stil

<button class="mui-btn mui-btn-primary">Klick mich!</button>

Im Beispiel wird ein primärer Button ausgezeichnet. Dropdown-Menüs sehen den Buttons sehr ähnlich. Ein Pfeil signalisiert jedoch, dass es sich hierbei um einen Button mit aufklappbarem Menü handelt.

<div class="mui-dropdown">
  <button class="mui-btn mui-btn-primary" data-toggle="dropdown">Dropdown<span class="mui-caret"></span></button>
  <ul class="mui-dropdown-menu">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    …
  </ul>
</div>

Der Quelltext für ein Dropdown-Menü ist zweigeteilt. Innerhalb eines „<div>“-Containers ist ein Button-Element ausgezeichnet, über welches das Menü aufgeklappt wird. Die einzelnen Menüpunkte sind innerhalb einer „<ul>“-Liste platziert.

Farben per SASS verwenden

Zum „Material Design“ gehört eine sehr detaillierte Farbwelt bestehend aus 20 Primärfarben. Diese sind in unterschiedliche Schattierungen unterteilt. In der Dokumentation von MUI sind alle Farben und ihre Schattierungen samt Hexadezimalwerten aufgelistet. Wer mit SASS arbeitet, kann die Farben jedoch auch über die Funktion „mui-color()“ anwenden.

Die MUI-Farben Rot und Pink mit ihren Schattierungen

Hierzu wird der Farbname sowie der numerische Wert für die Schattierung angegeben.

background-color: mui-color("pink", 200);

Während der Wert 500 den Normalwert für die Farbe definiert, stellen Werte darunter die Farbe heller dar, indem der Weißanteil verstärkt wird. Bei Werten darüber wird der Schwarzanteil erhöht, so dass die Farbe dunkler wird.

Spezielles Framework für HTML-Mails

Eine Besonderheit an MUI ist ein zusätzliches für HTML-Mails optimiertes Framework. Wer schon einmal einen Newsletter gestaltet hat, weiß, wie nervenaufreibend die Gestaltung einer HTML-Mail sein kann. Da man nur sehr eingeschränkt moderne Technik verwendet kann, muss man auf Einiges – zum Beispiel CSS3-Eigenschaften – verzichten.

Das Mail-Framework ist in gängigen Anwendungen – sowohl Desktop- als auch Webanwendungen – getestet worden und läuft daher unter anderem in verschiedenen Outlook-Versionen, Gmail und Apple Mail.

Auf die bereits erwähnten Button-Effekte wird dabei ebenso verzichtet wie auf die Auszeichnung per „<button>“-Element. Stattdessen kommen viele „<div>“-Elemente zum Einsatz. Dafür kann man sich dann aber ziemlich sicher sein, dass es in vielen E-Mail-Programmen ordentlich aussieht.

Fazit

Das MUI-Framework macht einen sehr ordentlichen Eindruck. Es gibt eine ausführliche Dokumentation mit vielen aussagekräftigen Beispielen. Wer Googles „Material Design“ mag, wird mit MUI seine Freude haben. Das Framework ist kostenlos erhältlich und kann ohne Einschränkungen verwendet werden.

Was mir beim MUI-Framework jedoch fehlt, ist die Möglichkeit, die im „Material Design“ gängige Off-Canvas-Navigation nachzubilden. In Googles Designkonzept wird dies – wie eigentlich alles – ebenfalls sehr ausführlich beschrieben. Schön wäre es, wenn diese Möglichkeit ins MUI-Framework übernommen worden wäre. Aber vielleicht kommt das noch. Schließlich ist MUI erst in der Version 0.0.5 erschienen. Da scheint also noch Einiges zu passieren.

(dpe)

Dank Media Queries lässt sich eine Website unter anderem für verschiedene Auflösungen und Geräteorientierungen gestalten. So ist es möglich, für nahezu alle Geräte ein optimales Aussehen bereitzustellen. Eine Sache konnte bislang jedoch nicht berücksichtigt werden, nämlich das Zeigegerät beziehungsweise der Pointer. Zwar darf man sich bei kleinen Auflösungen relativ sicher sein, dass es sich um ein Smartphone mit entsprechender Gestensteuerung handelt; zwischen gestengesteuerten Tablets und mausgesteuerten Desktoprechnern zu unterscheiden, war mit den gängigen Media-Query-Methoden jedoch nicht möglich. Dabei ist die Unterscheidung zwischen Gestensteuerung und Maus nicht unwichtig. Per Maus kann wesentlich genauer gesteuert werden als per Finger. So sind einfache Textlinks am Desktoprechner kein Problem, während man auf Smartphones und Tablets teils etwas Geschick benötigt, um einen solchen Link zu treffen. Dank des neuen Pointer-Media-Querys aus der Spezifikation Media Queries Level 4 kann man nun das Design einer Website speziell für das verwendete Zeigegerät anpassen.

Pointer erkennt Genauigkeit der Eingabe

Statt das Zeigegerät eines Gerätes konkret zu erkennen – zum Beispiel Maus oder Gestensteuerung per Touchdisplay – unterscheidet das Pointer-Media-Query die Genauigkeit der Eingabe. So gibt es den Wert „fine“, der für ein hohes Maß an Genauigkeit steht. Gemeint ist damit vor allem die Maus. Aber auch Geräte mit Touchpads und Eingabestiften werden den Wert „fine“ ausgeben.

Der mittlere Wert „coarse“ definiert eine grobe Genauigkeit, was vor allem bei der Steuerung per Fingergesten zutrifft. Das ist bei den meisten Smartphones und Tablets der Fall, aber auch bei einigen Konsolen wie der Wii. Diese werden per Spielecontroler gesteuert, die ebenfalls keine hohe Genauigkeit aufweisen. Als letztes gibt es noch den Wert „none“; in diesem Fall existiert kein Zeigegerät. Das Gerät wird also ausschließlich per Tastatur bedient.

Anwendung des „pointer“-Features

Innerhalb eines Stylesheets wird das „pointer“-Feature über die „@media“-Regel angegeben. Darin lassen sich dann beliebige CSS-Eigenschaften definieren, die beim Zutreffen des angegebenen Pointers angewendet werden.

@media (pointer: coarse) {
  input {
    padding 10px;
    font-size: 20px;
  }
}

Im Beispiel zeichnen wir per „@media“-Regel ein Abschnitt für Geräte mit grobem Zeigegerät aus. Darin definieren wir Eigenschaften für das „<input>“-Element. Diese sorgen dafür, dass alle Eingabefelder auf Smartphones und Tablets mit größerer Schrift und einem größeren Innenabstand versehen werden. So sind diese Eingabefelder per Fingergeste leichter zu erreichen.

Verschiedene Pointer können wir auch in einer Regel zusammenfassen. So ist es möglich, CSS-Eigenschaften für Geräte mit grober und hoher Genauigkeit zu definieren.

@media (pointer: coarse) and (pointer: fine) {
  …
}

Im Beispiel schließen wir alle Geräte aus, die ohne Eingabezeiger auskommen – also beispielsweise solche, die ausschließlich per Tastatur bedient werden.

„any-pointer“ und Geräte mit mehreren Zeigegeräten

Nicht jedes Gerät hat ausschließlich einen Pointer. Viele Tablets und Smartphones haben Eingabestifte und viele Desktoprechner und Notebooks besitzen mittlerweile Touchdisplays. Dadurch wird es schwierig, das „richtige“ Layout für eine Website auszugeben. Da man letztendlich nicht weiß, wie der jeweilige Nutzer die Website bedient, muss man sich zwangsläufig für eine Variante entscheiden.

Dank des „any-pointer“-Features ist es zumindest möglich, herauszufinden, ob unter den gegebenenfalls verschiedenen Zeigegeräten ein bestimmtes vorhanden ist. „any-pointer“ kennt dieselben drei Werte, die auch „pointer“ kennt.

@media (any-pointer: coarse) {
  …
}

Die „@media“-Regel im Beispiel wird also dann ausgeführt, wenn der Rechner mindestens ein Zeigegerät mit grober Genauigkeit unterstützt. Während „any-pointer“ erkennt, ob eines der Pointer eine gewisse Genauigkeit besitzt, erkennt „pointer“ immer nur für den primären Zeiger die Genauigkeit. Welcher das ist, hängt vom Gerät ab.

Auch wenn „pointer“ und „any-pointer“ vom Prinzip her nicht geeignet sind, auf bestimmte Geräte zu schließen, kann vor allem in Kombination mit der Displaybreite sehr gut erkannt werden, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. Es wird zukünftig also noch genauer möglich sein, eine Website für bestimmte Geräte zu optimieren.

Browsersupport

Derzeit wird das „pointer“-Feature nur von Chrome ab Version 38 unterstützt. Das „any-pointer“-Feature wird sogar nur von Nightly-Builds des Chrome-Browsers unterstützt. Andere Browser können mit dem Pointer-Media-Query im Moment noch gar nichts anfangen.

Man sollte also in jedem Fall ein allgemein gültiges Layout jenseits des „pointer“-Features platzieren und innerhalb dieses Media-Query nur etwaige Layoutanpassungen vornehmen. So kann man sicher sein, dass der Browser zumindest das Grundlayout anzeigt.

(dpe)

Menschen mit Behinderungen sind überdurchschnittlich oft im Internet unterwegs und dabei manchmal auf spezielle Aufbereitungen der Webangebote angewiesen. Diese Aufbereitung geht über die übliche Darstellung am Bildschirm hinaus. Menschen mit einer Einschränkung des Sehvermögens lassen sich Websites oftmals mittels Screenreader vorlesen oder auch in Braille-Schrift ausgeben. Doch Barrierefreiheit meint auch die plattformunabhängige Darstellung auf allen möglichen Geräten, und nicht nur auf einem normalen PC-Bildschirm. Somit sind (gut gemachte) responsive Websites bereits als barrierearm zu betrachten, denn sie funktionieren auf jedem Ausgabegerät.

Die Zugänglichkeitsrichtlinien des W3C

Das von Tim Berners Lee geführte World Wide Web Consortium (W3C) hat sich im Bereich “Barrierefreies Webdesign” sehr verdient gemacht und bringt seit einiger Zeit die Web Content Accessibility Guidelines heraus, nach denen sich Designer und Entwickler richten können, um eine zugängliche Website zu entwickeln. Die Guidelines sind sowohl für Profis als auch für Amateur-Entwickler relativ einfach zu beachten. Wir werfen einen Blick darauf, wie Sie alle Menschen bei der Entwicklung einer Website berücksichtigen können.

Erweiterte Zugänglichkeit

Viele eingeschränkte Nutzer greifen auf unterstützende Technologien wie Screenreader zurück. Diese verwenden eine Reihe innovativer Technologien, um eine gesprochene Version einer Website auszugeben – oder auch Brailleschrift, je nach Gusto des Nutzers. Screenreader arbeiten sich entgegen den “normalen” Nutzern linear durch den Inhalt – oder besser gesagt – durch den Quelltext einer Website. Mit wenigen kleinen Schritten in der Entwicklung einer Website erreichen wir bereits sehr viel für die Nutzung mit Screenreadern. Zum Beispiel sollten stets die richtigen Titel-Tags verwendet werden. Eine <h1> sollte nur für die Überschrift einer Seite Verwendung finden. Man sollte ebenfalls darauf achten, keine Ebenen zu überspringen, also nicht von einer <h1> direkt zu einer <h4> wechseln. Ein Screenreader könnte ansonsten durcheinander kommen, weil angenommen wird, dass Inhalte fehlen. Also sollte man stets die Titel-Tags korrekt einsetzen, eine <h2> folgt auf eine <h1>, danach setzt man eine <h3>, und so weiter…

Wichtig ist der richtige Alt-Text für Bilder. Dieser Text sollte immer beschreiben, was sich auf dem Bild befindet, oder wofür es steht. Ohne einen korrekten Alt-Text kann ein Screenreader ein Foto nicht interpretieren. Aus dem gleichen Grund sind Links immer logisch zu beschriften. Zumindest sollte ein Link einen beschreibenden Titel besitzen. Falls Ihre Website Formulare enthält, sorgen Sie für eine klare und eindeutige Namensgebung. Diese hier bis jetzt angesprochenen Dinge gehören jedoch zu einem qualitativ guten Webdesign und werden daher (hoffentlich) ohnehin so umgesetzt.

Die Website der Aktion Mensch ist ein hervorragendes Beispiel für eine barrierefreie Website.

 Gute Kontraste

Das zurzeit aktuelle minimalistische Design kommt Menschen mit eingeschränktem Sehvermögen sehr entgegen, denn es bietet dem Betrachter gute Kontraste und ist daher sehr gut lesbar. Viele Menschen mit Seheinschränkungen kämpfen mit vielen Farben, daher sind gute Kontraste immer viel wert. Schwarze Texte auf einem weißen Hintergrund sind für jeden Menschen gut lesbar.

Doch auch farbige Seiten können einen hohen Kontrast aufweisen und sehr gut funktionieren. Ein gutes Beispiel für eine farbige, barrierefreie Website mit hohem Kontrast ist die Website des SOS-Kinderdorfs.

Ob Ihre Website Probleme mit zu schwachen Kontrasten hat, können Sie ganz leicht mit einem Online-Tool feststellen. Check my Colours prüft Ihre Website genau und gibt auch die fehlerhaften Stellen aus.

Kräftige Farben und einfache, intuitive Navigationen

Nicht nur seheingeschränkte Menschen sollen mit einem barrierearmen Webdesign bedacht werden, sondern auch Leser mit kognitiven Schwächen, denen das Lesen Ihrer Website schwer fallen könnte.

Die Verwendung von satten, kontrastierenden Farben mit einer klaren, einfachen Navigation kommt auch diesen Menschen sehr entgegen. Das Lingonberry-Theme von Anders Norén ist ein gutes Beispiel hierfür. Grundsätzlich sollte man sich in den Navigations-Menüs mit der Kombination von Text und Icons zurückhalten, denn das könnte zu Problemen für potentielle Leser mit Sehschwächen führen.

Die Verwendung von Icons

Die Verwendung von recht großen Icons kann eine Website durchaus deutlich aufwerten und ein Vorteil für alle Benutzer sein. Die Symbole könnten hierbei eine Art von zusätzlicher Navigation übernehmen. Für diesen Einsatzbereich gibt es eine klare wissenschaftliche Grundlage, doch die Logik dahinter dürfte klar sein. Die meisten Betriebssysteme nutzen heute Icons zur Unterstützung in navigationstechnischen Aufgaben. Papierkörbe, Order-Symbole und vieles mehr begegnen uns täglich im Umgang mit unserem MAC oder PC.

Für Menschen mit bestimmten Einschränkungen kann es der einzige Weg sein, sich innerhalb einer Website sicher bewegen zu können. Mittels Icon-Fonts wie zum Beispiel Font Awesome oder den neuen Fonticons lassen sich solche unterstützenden Navigationen gut realisieren. Hier ein Beispiel für eine unterstützende Navigation mit Icons:

Die Freiheit der Wahl

Es ist durchaus verständlich, dass wir unsere Nutzer direkt in die von uns ersonnene Web-Erfahrung katapultieren möchten. Doch das ist nicht immer das, was ein Leser auch wirklich will. Diejenigen unter den Nutzern, die mit bestimmten Einschränkungen leben müssen, können schnell verwirrt von automatisch anlaufenden Slidern, Videos oder Audio-Dateien sein. Daher wäre es vorteilhaft, wenn die Designer ihren Usern die Wahl lassen, ob sie die angebotenen Medien starten möchten. Slider können so eingestellt werden, dass sie die Inhalte nur manuell wechseln.

Eingebettete Videos von YouTube oder Vimeo können so integriert werden, dass sie nicht sofort abspielen, wenn eine Seite fertig aufgebaut wurde.

Barrierefreiheit ist auch ein Thema in den Nicht-HTML-Komponenten Ihrer Seiten. Bei Office-Dateien oder PDFs können Sie bereits im Vorfeld prüfen, ob nicht eine HTML-Seite für den Inhalt geeigneter wäre. Nicht immer muss ein separates Dokument besser sein, als eine eigene Seite innerhalb der Website.

Eine inhaltsreiche und vorbildliche Website ist die Homepage der BBC Great Britain. Die Website ist zugänglich, klar und mit guten Kontrasten versehen. Videos, Musik, interaktive Inhalte und Symbole sind so verwendet, dass alle Elemente zugänglich sind.

Fazit

Das Erstellen einer zugänglichen Website muss nicht immer einen großen Mehraufwand von Zeit und Geld bedeuten. Wenn wir uns an die Webstandards halten, haben wir bereits einiges an Zugänglichkeit automatisch implementiert. Einfache und klare Inhalte, gute Kontraste und Medien, die nur manuell anlaufen, sind erste Schritte zur Barrierefreiheit. Wenn Sie eine Website entwickeln, ist es empfehlenswert, an alle Besuchergruppen zu denken. Natürlich kann ein solcher Artikel wie dieser hier das umfassende Thema der Barrierefreiheit immer nur knapp anreißen, wer von Ihnen mehr darüber erfahren möchte, darf gerne einen Blick in die von mir verlinkten Quellen werfen.

Links zum Beitrag

• Wikipedia – Barrierefreies Internet
• Einfach für Alle – Das Angebot der Aktion Mensch für ein barrierefreies Internet
• W3C – Web Content Accessibility Guidelines (WCAG) 2.0
• W3C – Web Accessibility Initiative
• W3C – Web Standards
• Deutsche Homepage – The Web Standards Project
• Die barrierefreie Webseite – Grundlagen
• Linkliste Barrierefreiheit – Fachhochschule Köln
• Check my Colours – Online Tool zum Checken der Farbkontraste
• Optimising web site designs for people with learning disabilities (PDF)
• Font Awesome – Icon Font
• Fonticons – Icon Font

(dpe)

Heute haben wir gute Nachrichten für alle Seitenbastler ohne Agenturbudget. Incomedia öffnet für unsere Leserinnen und Leser sieben Tage lang die Paywall und verschenkt den Homepage-Baukasten WebSite X5 Home 11. Für den Download ist keinerlei Gegenleistung erforderlich. Klicken Sie einfach weiter unten im Artikel auf den Download-Link und laden den Installer auf Ihre lokale Festplatte.

WebSite X5 Home 11: Knappe 20 Euro gespart mit Potential für weitere Ersparnis

Vor einigen Wochen hat sich Kollege Denis Potschien mit zwei Produkten aus dem Hause Incomedia näher beschäftigt und einen ausführlichen Beitrag dazu geschrieben. Das daraus entstandene Interesse ist in der italienischen Zentrale des Unternehmens nicht unbemerkt geblieben, weshalb man sich heute gerne bei der Dr. Web-Leserschaft bedanken möchte.

Den Homepage-Baukasten WebSite X5 gibt es in unterschiedlichen Ausbaustufen von Free über Home und Compact bis hin zu Evolution. Alle vier Versionen richten sich an den Endverbraucher, der seine eigene Website möglichst günstig, aber dennoch ansprechend selber realisieren möchte. Die Designprofis unter unseren Lesern werden daher heute nicht auf ihre Kosten kommen. Alle Seitenbetreiber, die auf Dr. Web nach Tipps für die Eigenbau-Homepage suchen, allerdings dafür umso mehr. Nicht unerwähnt bleiben sollte der Vollständigkeit halber noch WebSite X5 Professional. Dabei handelt es sich um die leistungsstärkste Version der Pagebuilder-Familie. Ihr Fokus liegt mehr auf dem Geschäftsanwender.

Exklusiv bei Dr. Web gibt es ab heute bis zum kommenden Montag, 13. Juli 2015, 24:00 Uhr die Software WebSite X5 Home 11 zum kostenfreien Download. Die verschiedenen Versionen des Pagebuilders WebSite X5 unterscheiden sich vornehmlich hinsichtlich ihres Leistungsumfangs. So ist die Home-Version etwa auf 25 Seiten pro Projekt limitiert und bietet “nur” 250 Vorlagen, während die Evolution-Version pro Projekt bis zu 10.000 Seiten verwalten kann und 1.500 Vorlagen und einige fortgeschrittene Funktionen mehr bietet.

Der kleine Seitenbetreiber kann aber auf jeden Fall erst einmal für lau mit der Home-Variante einsteigen und in fünf einfachen Schritten seine Webpräsenz ersinnen. Anstatt rund 20 Euro zu berappen, zahlen Sie nichts.

Wollen Sie mehr und kommen mit dem WebSite X5 gut zurecht, werden Sie sich möglicherweise darüber freuen, dass Incomedia ebenfalls exklusiv für unsere Leserinnen und Leser einen Rabatt in Höhe von 40% gewährt, wenn sie sich nach dem Download und der Aktivierung der Home-Version für den Erwerb der Evolution-Version entscheiden. Damit kostet selbige statt 69,99 nur noch 41,99 Euro.

Wenn Sie nun selber testen möchten, wie einfach der 5-Schritte-Publikationsprozess von WebSite X5 wirklich ist, dann klicken Sie den folgenden Link:

Exklusiv bei Dr. Web: Kostenloser Download des WebSite X5 Home 11

Beachten Sie bitte, dass der Download nur für sieben Tage kostenlos ist. Natürlich dürfen Sie das Programm auch nach Ablauf der sieben tage weiter nutzen, nur kostenlos downloaden können Sie es danach nicht mehr. Speichern Sie das Installationsprogramm also sicherheitshalber irgendwo ab.

Ein letzter wichtiger Hinweis: WebSite X5 läuft nur unter Windows.

So sieht der fünfschrittige Erstellungsprozess Ihrer Website mit WebSite X5 Home 11 im Bild aus

Die Gestaltung benutzerfreundlicher und ansprechender Formulare ist nicht immer einfach. Pflichtfelder sollten gut erkennbar und Fehlermeldungen auffällig sein. Dazu kommt, dass Felder wie Radio-Buttons und Checkboxen nur auf Umwegen mit gänzlich eigenem Aussehen versehen werden können. Wie man Kontaktformulare raffiniert, übersichtlich und sehr individuell gestalten kann, zeigt das CSS Contact Form von CodyHouse.

Formular mit dezenten Animationen und SVG-Icons

Das Design des Kontaktformulars besticht durch große Eingabefelder, die gerade auf mobilen Geräten ein einfaches Auswählen und Ausfüllen ermöglichen. Nichts erinnert bei diesem Formular an das Standardaussehen von HTML-Formularen. Auch die Radio-Buttons und Checkboxen sind individuell gestaltet. Der Klick auf einen Button wird zudem durch eine dezente Animation quittiert.

Die <label>-Elemente der Eingabefelder werden wie Platzhalter innerhalb des jeweiligen Eingabefeldes positioniert.

Sobald man anfängt, ein Eingabefeld mit Inhalt zu füllen, wandert der jeweilige Label-Text per Animation aus dem Eingabefeld und wird darüber dargestellt. Diese Art von Labels wird als Floating Labels bezeichnet. Über einen Klassennamen lassen sich Formulare mit und ohne diese Floating Labels auszeichnen.

<form class="cd-form floating-labels">
  …
</form>

Das Beispiel zeigt, wie das <form>-Element ausgezeichnet sein muss. Die Klasse cd-form ist obligativ, floating-labels ist optional. Ohne die zweite Bezeichnung werden die Labels einfach oberhalb des jeweiligen Eingabefeldes platziert.

Demo-Formular

Außerdem sind die exemplarischen Eingabefelder mit jeweils einem passenden Icon im SVG-Format versehen. So sind Eingaben für E-Mail-Adresse, Name und Unternehmen auch ohne Textbezeichnung erkennbar. Die verwendeten Icons stammen aus der Nuclo-Bibliothek, einem Satz kostenpflichtiger Icons. Diese lassen sich aber auch einfach gegen andere Icons austauschen.

Einfache HTML-Auszeichnung, anpassbare Stylesheets

Die HTML-Auszeichnung des Formulars ist einfach. Neben den verschiedenen Eingabe-Elementen – <input>, <textarea> und <select> – stellt CSS Contact Form auch für die Elemente <label>, <fieldset> und <legend> entsprechende CSS-Eigenschaften zur Verfügung. Über Klassennamen werden die Elemente im Stile des Frameworks dargestellt.

Dabei entscheidet man beispielsweise, ob man Formular-Elemente mit oder ohne Icon darstellen möchte.

<div class="icon">
  <label class="cd-label" for="cd-name">Name</label>
  <input class="user" type="text" name="cd-name" id="cd-name" required>
</div>

Das Beispiel zeigt ein Eingabe-Element samt Label. Anhand der Klassen wird das Aussehen per CSS gesteuert. Elemente, die das required-Attribut besitzen, werden per CSS so dargestellt, dass in der rechten oberen Ecke per Hintergrundgrafik ein roter Punkt dargestellt wird.

Die Stylesheet-Datei, die mitgeliefert wird, ist in drei Bereiche unterteilt. Im ersten Bereich ist das Grundlayout festgelegt – also Farben, Abstände, Schriften, Aussehen für Pflichtfelder sowie für fehlerhaft ausgefüllte Felder. Im zweiten Bereich sind die Icons definiert. Hier werden SVG-Grafiken jeweils als Hintergrundgrafik verwendet und positioniert.

Der letzte Bereich ist zuständig für die Floating Labels. Dort sind also die Animationen für die Labels hinterlegt, die beim Ausfüllen eines Eingabefeldes aus dem Feld hinaus bewegt und darüber platziert werden.

Floating Labels: Label wandert bei der Eingabe aus dem Feld und wird in kleinerer Schriftgröße darüber platziert

jQuery und Modernizr zur Unterstützung

Für die Floating Labels ist etwas JavaScript notwendig. Eine kleine Funktion sorgt dafür, dass diese bei der Eingabe von Text ausgelöst werden. Da diese Funktion jQuery voraussetzt, muss die Bibliothek ebenfalls eingebunden werden.

Im Download-Paket, das alle notwendigen CSS- und JavaScript-Dateien beinhaltet, ist auch Modernizr vorhanden. Zusammen mit einer exemplarischen HTML-Datei mit Demo-Formular hat man ein erstes Formular, das man prima als Ausgangsbasis für ein eigenes Formular nutzen kann.

Neben einer einfachen Stylesheet-Datei ist auch eine SASS-Datei im Paket enthalten. Wer CSS also lieber per SASS auszeichnet, findet im Paket eine entsprechende Datei zur Bearbeitung.

Fazit

Das CSS Contact Form von CodyHouse stellt eine gute Basis für eigene schicke und zeitgemäße Formulare bereit. Die HTML- und CSS-Auszeichnung ist übersichtlich und gut kommentiert. JavaScript wird sehr zurückhaltend eingesetzt. Das Formular sieht gut aus, ist aber dennoch einfach gehalten. So kann man es mit einigen Anpassungen gut in eigene Projekte übernehmen.

CodyHouse erlaubt die Verwendung der Quelldateien für eigene Projekte – auch für kommerzielle. Allerdings ist es nicht erlaubt, den Quelltext anderweitig zu vertreiben – auch nicht in veränderter Form.

Die per CSS Contact Form ausgezeichneten Formulare laufen in allen modernen Browsern, einschließlich Internet Explorer ab Version 9.

(dpe)

Dass eine Website auch auf mobilen Geräten funktionieren und vernünftig aussehen muss, ist mittlerweile zu einer Selbstverständlichkeit und jüngst sogar zu einem Ranking-Faktor geworden. Dank Media Queries ist es zum Glück relativ einfach, per CSS das Aussehen für unterschiedliche Displaygrößen und -orientierungen zu definieren. Die JavaScript-Methode „matchMedia()“ ermöglicht es zudem, Media Queries auch in JavaScript einzusetzen. Somit stehen uns alle Möglichkeiten moderner Frontend-Programmierung offen.

Der Vorteil von „matchMedia()“

Bisher gelang es unter JavaScript nur bedingt, auf Browser- beziehungsweise Geräteeigenschaften zu reagieren. Zwar gibt es die Möglichkeit, die Browser- sowie die Bildschirmauflösung abzufragen – so einfach und bequem wie mit Media Queries bei Stylesheets ist es allerdings nicht. Vor allem muss man mit unterschiedlichen Begrifflichkeiten arbeiten, was die Entwicklung responsiver Websites mit CSS in Kombination mit JavaScript erschwert.

1
2
3

if (window.innerWidth >= 320 && window.innerWidth > window.innerHeight) {
  …
}

Im obigen Beispiel wird über eine Bedingung geprüft, ob die Fensterbreite größer gleich 320 Pixel ist und das Fenster in Landscape-Orientierung dargestellt wird. Für die letzte Bedingung wird einfach geprüft, ob das Fenster breiter als hoch ist. Mit der Methode „matchMedia()“ lässt sich diese Abfrage mit einer Media-Queries-Angabe darstellen, die so auch in einem Stylesheet vorkommen kann.

1
2
3

if (window.matchMedia("(min-width: 320px) and (orientation: landscape)").matches) {
  …
}

Hier wird der Methode einfach per Media Queries übergeben, welche Bedingungen erfüllt sein müssen. Wichtig ist, dass die Methode mit dem Attribut „matches“ abgeschlossen wird. Es wird „true“ zurückgeben, wenn die Media-Queries-Angabe vom Browser erfüllt wird.

Vor allem im Zusammenspiel mit Stylesheets ist es eine Erleichterung, Media Queries sowohl per CSS als auch per JavaScript einsetzen zu können. Außerdem stehen alle Bedingungen zur Verfügung, die auch per CSS berücksichtigt werden können. Neben der Auflösung und der Orientierung lässt sich beispielsweise die Pixeldichte des Gerätes („device-pixel-ratio“) berücksichtigen.

Über das Attribut „media“ ist es zudem möglich, die Media-Queries-Angabe der Methode auszulesen.

1

console.log(window.matchMedia("(min-width: 320px) and (orientation: landscape)").media);

Das Beispiel schreibt also den in „matchMedia()“ hinterlegten Wert in die Browserkonsole.

Per Event und „matchMedia()“ auf Änderungen reagieren

In den seltensten Fällen sind die beim Seitenaufruf berücksichtigten Media Queries statisch. Bei Desktopgeräten kann sich die Auflösung des Browserfensters, bei Mobilgeräten kann sich die Geräteorientierung ändern. Daher sollte man Änderungen an Browser und Gerät per Event überwachen.

Die Änderung der Browsergröße könnte man noch mit dem Event-Handler „resize“ abfangen. Andere Geräte- und Browsereigenschaften können jedoch nicht mit den gängigen Event-Handlern in den Griff bekommen werden.

Zwar gibt es keinen Event-Handler speziell für Media Queries; dennoch gibt es die Möglichkeit, Änderungen der per Media Queries angegebenen Bedingungen zu überwachen.

Zunächst müssen zwei Variablen definiert werden. Die eine Variable (im Beispiel „mq“) enthält die „matchMedia()“-Methode mit den zu überwachenenden Media-Queries-Angaben.

Die zweite Variable (im Beispiel „mq_ereignis“) enthält eine Funktion, welche prüft, ob die Media-Queries-Angaben erfüllt sind oder nicht.

Dazu wird per „matches“ abgefragt, ob die in der Variablen „mq“ hinterlegten Angaben zutreffen.

1

var mq = window.matchMedia("(min-width: 320px)");

1
2
3
4
5
6
7

var mq_ereignis = function(mq) {
  if (mq.matches){ 
    // Fensterbreite ist mindestens 320 Pixel breit
  } else {
    // Fensterbreite ist kleiner als 320 Pixel
  }
}

Anschließend wird der Funktion, welche in der Variablen „mq_ereignis“ hinterlegt ist, noch die Variable „mq“ übergeben. Im letzten Schritt wird der Variablen „mq“ noch per „addListener()“ die Funktion in „mq_ereignis“ zugewiesen.

1
2

mq_ereignis(mq);
mq.addListener(mq_ereignis);

Das gesamte Script sollte im HTML-Head untergebracht sein. Anschließend reagiert die Seite dynamisch auf Änderungen, welche die Media-Queries-Angaben betreffen, die per „matchMedia()“ definiert wurden.

Browsersupport und Polyfill

Die Methode „matchMedia()“ wird von allen gängigen Browsern unterstützt. Der Internet Explorer unterstützt die Methode ab Version 10. Für ältere Browser gibt es ein Polyfill, welches die Funktionalität nachbildet.

(dpe)

Zwar sollte im Web immer alles ganz schnell gehen. Aber gerade komplexe Webanwendungen brauchen schon mal ihre Zeit, bis alle Inhalte geladen sind. Mit statischen Grafiken oder kleinen Animationen wird dann gerne mal darauf aufmerksam gemacht, dass noch Daten geladen werden. In den Zeiten von CSS3 müssen solche Lade-Animationen längst nicht mehr mit animierten GIFs realisiert werden. loaders.css stellt eine Reihe von Animationen zur Verfügung, die allesamt per CSS3 gestaltet und animiert sind.

Bis heute sind insgesamt 142 HTML-Elemente vom W3C standardisiert worden, mit Ausnahme derer, die sich noch in der Phase der Standardisierung befinden und natürlich denen, die man als überholt kennzeichnet. Das bedeutet, dass man durchaus einige Elemente nicht kennt und daher nicht benutzt, obwohl sie vielleicht sehr nützlich sein könnten. In diesem Beitrag stellen wir Ihnen daher einige wenig genutzte Elemente vor, die Ihnen jedoch viel Arbeit bei der Entwicklung neuer Websites und Anwendungen abnehmen und somit hilfreich sein könnten. Auch im Sinne der Webstandards ist es wichtig, für gewisse Aufgaben auch dasjenige Markup zu verwenden, das für diese Aufgabe an sich vorgesehen ist.

Die Gestaltung einer für Mobilgeräte optimierten Website ist mitunter eine große Herausforderung. Der wenige Platz, der auf mobilen Geräte zur Verfügung steht, macht es nicht immer einfach, alle relevanten Inhalte unterzubringen. Gerade Navigationen stellen häufig ein Problem dar, da sie oft viel Platz einnehmen. Daher verschwinden Navigationen oft außerhalb des sichtbaren Bereichs einer Website und werden über eine Schaltfläche eingeblendet. Solche Off-Canvas-Navigationen sind beliebt, praktisch und werden vor allem in mobilen Apps gerne eingesetzt. Mit Slideout.js lässt sich eine Off-Canvas-Navigation einfach in ein eigenes Webprojekt integrieren – inklusive Gestensteuerung, was vor allem auf Mobilgeräten der Usability entgegenkommt.

Bei einer umfangreich gestalteten Website verliert man schon einmal den Überblick über die Stylesheets. Neben allgemeinen CSS-Angaben für das Grundlayout der Website sind häufig auch ganz spezielle Stylesheets für besondere Inhalte vorhanden. Die Website CSS Stats gibt einen umfassenden Überblick über die hinterlegten Stylesheets eines Webprojektes und verrät in nackten Zahlen und übersichtlichen Auflistungen, was alles definiert wurde.