Kategorien
Design Responsive Design Webdesign

Simbla: Responsive Websites für jedermann

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

simbla-landingpage

Mit Template oder leerer Seite starten

Hat man sich kostenlos beim Simbla Website-Builder angemeldet, kann direkt die erste Website dort angelegt werden. Wer nicht selbst gestalten möchte, kann eines der vielen kostenlosen Templates verwenden. Die Templates sind mit exemplarischen Inhalten ausgestattet und haben eine Live-Demo, so dass man vorab einen guten Eindruck von Aussehen und Funktionalität hat.

Sie richten sich meist an bestimmte Branchen. So gibt es Templates für Anwälte und Architekten, aber auch welche für eher private Websites. Dank einer übersichtlichen Kategorisierung findet man schnell eine geeignete Vorlage.

simbla_gallery
Galerie mit Templates

Wer lieber ohne Templates arbeitet, kann auch einfach mit einer komplett leeren Website starten.

Masterseiten definieren und Seiten anlegen

Egal, ob man mit Template oder einer leeren Seite beginnt: Alle Inhalte der Website sind modular konzipiert. Es gibt Header- und Footer-Elemente, in der beispielsweise Logo und Navigation sowie Links zu sozialen Netzwerken untergebracht sind.

simbla_master
Masterseite anlegen mit festen Elementen

Natürlich können in einem Website-Projekt auch mehrere Seiten angelegt werden. Diese können im Header- oder Footer-Bereich einer Navigation hinzugefügt werden. Alle Seiten lassen sich individuell gestalten und mit Inhalt füllen. Es besteht zudem die Möglichkeit, sogenannte Masterseiten anzulegen. Dort werden dann feste Bereiche definiert, die auf allen Seiten identisch sein sollen. Dank einer Masterseite ist gewährleistet, dass alle Seiten diese festen Bestandteile beinhalten.

simbla_style
Aussehen eines Elementes festlegen

Jedes Element kann sehr individuell bearbeitet werden. So können Farben und Hintergründe, Rahmenfarbe und -stärke, angerundete Ecken und Abstände nach eigenen Vorstellungen definiert werden – und zwar alles über eine grafische Benutzeroberfläche. Es ist also nicht notwendig, selbst per HTML oder CSS etwas auszeichnen zu können.

Inhalte per Text- und Bildbearbeitung hinzufügen

simbla_content
Auswahl eines Inhaltselementes

Hat man eine Seite soweit angelegt, können beliebige Inhalte hinzugefügt werden. Es gibt mehrere Vorlagen, um Texte und Bilder in verschiedenen Anordnungen und Größen in eine Seite einzubinden. So gibt es mehrspaltige Inhalte mit Bildern und Text, sowie klassische Galerien und einfache Bild-Text-Kombinationen.

simbla_image
Integrierte Bildbearbeitung

Mit der integrierten Bildbearbeitung werden Bilder beschnitten und vergrößert beziehungsweise verkleinert. Bildmaterial steht einem über eine eigene Mediengalerie zur Verfügung. Natürlich man kann auch eigene Dateien hochladen oder auf externe Bilder verweisen.

simbla_text
Integrierte Textbearbeitung

Texte werden direkt im Website-Builder eingegeben. Dank einer integrierten Textverarbeitung stehen einem gängige Formatierungsmöglichkeiten zur Verfügung. Schriftart und -größe sowie -farbe lassen sich ebenso definieren wie die Textausrichtung. Auch Aufzählungen, Einrückungen und Textlinks sind möglich.

Pro-Modus für mehr Möglichkeiten

Standardmäßig wird Simbla im sogenannten Easy-Modus ausgeführt, der die gestalterische und inhaltliche Bearbeitung ausschließlich über eine grafische Bedienoberfläche ermöglicht. Im Pro-Modus stehen einem weitere Funktionen für eine weitergehende Bearbeitung zur Verfügung.

So können beispielsweise die einzelnen Elemente eines Bereiches – Container, Reihen und Zeilen – individuell bearbeitet werden.

simbla_pro
Darstellung im Pro-Modus

Außerdem gibt es im Pro-Modus ein spezielles HTML-Element. Dieses erlaubt es, eigenen HTML-Quelltext in die Seite einzubinden. Alles, was Simbla als fertiges Inhaltselement nicht anbietet, kann auf diese Weise selbst ausgezeichnet werden.

Zudem besteht die Möglichkeit, individuelle Stylesheets und eigenes JavaScript einzubinden. Ein eigener Media-Queries-Editor macht es einfach, individuelles CSS für bestimmte Auflösungen auszugeben.

Responsive Vorschau

Das Besondere an Simbla ist – wie bereits erwähnt – das responsive Design aller Websites. Es gibt eine Preview-Seite, welche die Website wahlweise als Desktop-, Tablet- oder Smartphone-Version ausgibt. Bilder werden im responsiven Layout entsprechen verkleinert dargestellt. Das Menü wird per Burger-Icon eingeblendet und in Spalten angeordnete Inhalte werden untereinander dargestellt.

Beim Anlegen und Gestalten einer Website mit Simbla muss man sich selbst keinerlei Gedanken über die Darstellung auf Mobilgeräten machen. Gerade Laien und semi-professionellen Webdesignern dürfte dieser Ansatz sehr entgegen kommen.

Kostenloser Plan und kostenpflichtige Pläne

Eine einfache Website, die wenig Speicherplatz benötigt, kann kostenlos angelegt werden. Wer allerdings mehr als 300 Megabyte Speicherplatz und Bandbreite benötigt, muss auf einen der kostenpflichtigen Pläne umsteigen. Diese kosten zwischen 72 und 288 Euro im Jahr und verfügen über mehr Speicherplatz und Bandbreite.

Außerdem hat man bei den kostenpflichtigen Plänen die Möglichkeit, die Website über eine eigene Domain zu erreichen. Ansonsten muss man sich damit begnügen, dass die Website unter „sites.simbla.com/NameDerWebsite“ aufzufinden ist.

Zukunft, Fazit und Link zum Beitrag

Simbla hat für die Zukunft weitere Features angekündigt. So soll es in den nächsten Wochen neue Inhaltselemente und Templates geben. Gegen Jahresende soll es zudem die Möglichkeit geben, ein eigenes Blog mit Simbla zu betreiben.

Aber bereits jetzt ist Simbla ein interessanter Website-Builder, der vor allem aufgrund seiner Flexibilität und der einfachen Bedienung beeindruckt.

(dpe)

Kategorien
Boilerplates & andere Tools HTML/CSS Responsive Design

INK: So erstellt ihr responsive E-Mail-Newsletter, die einfach funktionieren

Schon der erste Satz auf der Website des Anbieters Ink verrät uns, was hier das Ziel ist: „Erstellen Sie schnell ansprechende Responsive-HTML-Mails, die auf jedem Gerät und in jeder Software arbeiten. Selbst in Outlook.“ Mit diesem Augenzwinker-Hinweis auf Microsofts Problemkind (in Bezug auf die Darstellung von HTML-E-Mails) soll eines gleich klar werden: mit uns habt ihr diese Probleme nicht. Wir haben uns das Angebot daraufhin einmal angeschaut.

ink-newsletter-teaser_DE

HTML-E-Mails sind leider immer noch eine Welt für sich. Da gibt es eigene Gesetze und Regeln, Techniken und Tricks, und trotzdem gibt es dann immer noch mindestens einen Kandidaten, der die E-Mail nicht korrekt anzeigen mag. Oft ist das ausgerechnet der Client, der beim Kunden zum Einsatz kommt. Die Cross-Browser-Ärgernisse vergangener Jahre erscheinen dagegen wie das kleinere Übel (man stelle sich einmal vor, für 50 verschiedene Internet Explorer optimieren zu müssen). Hinzu kommt die mobile Nutzung mit der Anforderung, die E-Mails auch noch responsive zu gestalten.

ink2

Ink möchte diese Probleme lösen. Dazu bietet es uns (wie Bootstrap, Foundation und andere Frameworks für die Webseiten-Gestaltung) ein Gerüst an, welches mit eigenen Inhalten, Farben und einem Logo individualisiert werden kann. Dank einigen vorhandenen Vorgaben können wir sicher gehen, am Ende eine HTML-E-Mail zu erhalten, die unkompliziert funktioniert. Wenige HTML-Kenntnisse reichen dazu aus.

Wer zuvor die schon vorhandenen E-Mail-Templates im Browser als Vorschau sehen möchte, besucht die entsprechende Templates Built-Seite, wobei die jeweiligen Umsetzungen als Screenshots in zahlreichen Versionen präsentiert werden, getrennt nach Desktop-, mobilen und Web-basierten Anwendungen. Generell sollte der erste eigene Test in Outlook erfolgen. Denn das ist auf jeden Fall der schwierigste Gegner. Nach dem Hinzufügen eigener Styles wird natürlich weiter getestet, wobei der Anbieter dazu eine Empfehlung für den kostenpflichtigen Dienst Litmus ausspricht.

ink3

Ink ist Open Source, bringt eine ausführliche Dokumentation mit und bietet einige durchaus nennenswerte Features. So hat es ein eigenes Gridsystem, CSS-Klassen zur Sichtbarkeit (um gezielt zu bestimmen, in welchen Klienten, welche HTML-Elemente angezeigt werden), sowie Buttons, die reagieren, falls ein E-Mail-Empfänger Bilder standardmäßig deaktiviert hat. Ergänzend ist das Ink-Inliner-Tool gedacht, um hinzugefügte Styles schnell so umzusetzen, dass auch wirklich die größte Anzahl an Klienten bedient werden kann. Eine gute Basis also, um sicher zu einem HTML-Newsletter zu kommen, der wie gewünscht ankommt.

(dpe)

Kategorien
HTML/CSS JavaScript & jQuery Responsive Design

matchMedia() – Media Queries mit JavaScript

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.

matchMedia()

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.

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.

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.

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.

var mq = window.matchMedia("(min-width: 320px)");
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.

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)

Kategorien
Design HTML/CSS Responsive Design UI/UX Webdesign

Ein Design für Alle: Fünf Richtlinien für barrierearme Websites

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.

barrierearmeswebdesign-teaser_DE

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.
Aktion-Mensch

 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.

Dr. Web

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.

SOS-Kinderdorf

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.

Lingonberry-Theme-Anders-Noren

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:

Beispiel für unterstützende Icon-Navigation

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.

BBC Great Britain

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

(dpe)

Kategorien
Design HTML/CSS Responsive Design Webdesign

Media Queries Level 4: Pointer optimiert Websites für Zeigegeräte

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.

pointermediaquery-teaser_DE

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)

Kategorien
Design Essentials Freebies, Tools und Templates HTML/CSS JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

12 nützliche HTML5, CSS3 und JavaScript Tools für Webdesigner und Entwickler

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.

html5css3-12tools-teaser_DE

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

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

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

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.

3D-Folding-Panel-Aktion

Demo und Download

Motion Blur Effect with SVG

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

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

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

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

Hero Slideshow

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.

Hero-Slideshow-tech

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

Fullscreen-slideshow

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

Full-Screen-Vertical-Scroller

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

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.

Chartist-Beispiel

Demo und Download

Interactive Drag and Drop Coloring Concept

Interactive-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

(dpe)

Kategorien
Design Editoren HTML/CSS Responsive Design Webdesign

Kurzvorstellung: Der Pinegrow Web-Editor will das Design beschleunigen

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-Web-Editor

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-lizenzen

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.

Pinegrow - Restriktion der Testlizenz umgehen und Code trotzdem abspeichern können

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.

pinegrow-blank.html

plugin-suchen

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

plugin-aktivieren

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

pinegrow-elemente-hinzu

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.

Pinegrow mit geöffneter index.html Datei aus dem Kelvin Pine Ordner

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.

Die Bearbeitungsreiter der linken Sidebar

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.

direkte-aenderungen-der-elemente

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

schnelle-quelltext-aenderung

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

test-klick-funktion

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

(dpe)

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

Zehn frische Tools für Webdesigner und Entwickler (Ausgabe Mai 2015)

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.

tools-webdesigner-teaser_DE

1. Visual Studio Code

MS-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

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

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

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-Symbols-Entities-and-Codes

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

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

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

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 Framework

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

RightFont-for-Mac App

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

(dpe)

Kategorien
Apps Boilerplates & andere Tools Design Editoren HTML/CSS Programmierung Responsive Design UI/UX Webdesign

Hybrid-Apps entwickeln leicht gemacht: Top-Tools und Hilfsmittel

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.

hybridapps-teaser

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.

03-hybrid-app-development-tools
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.

Systemschriften für Hybrid-App-Entwicklung

02-hybrid-app-development-tools
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:

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.

04-hybrid-app-development-tools
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.

05-hybrid-app-development-tools
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

06-hybrid-app-development-tools
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:

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:

Mit welchem Tool entwickeln Sie Ihre hybriden Apps?

(dpe)

Kategorien
Design HTML/CSS Responsive Design

900dpi: Das CMS für jede Website – schnell wie nie

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.

900dpi-teaser

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.

900dpi-dropbox-access-ownfolder

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.

900dpi-editwebsite

Standardmäßig sehen Sie dann das:

900dpi-editwebsite-initialview

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.

900dpi-editimage
900dpi-edittext

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.

900dpi-alteredwebsite-edit

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:

900dpi-alteredwebsite-NOedit

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

900dpi-alteredwebsite-responsive

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…

900dpi-addblogpost

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.

900dpi-addtheclass

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.

900dpi-pricing

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.

900dpi-dropboxcontents
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.

Kategorien
HTML/CSS Responsive Design SEO & Online-Marketing

Was bedeutet Googles neuer Ranking-Faktor mobile-friendly?

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?

Ranking-Faktor mobile-friendly

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.

mobile-friendly_tool1
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.

mobile-friendly_mobile-suche
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.

mobile-friendly_tool2
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.

mobile-friendly_pagespeed
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.

mobile-friendly_webmaster-tools
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.

(dpe)

Kategorien
Editoren HTML/CSS Responsive Design Webdesign

Homepagebaukasten Squarespace 7: Revolution mit Ansage

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.

squarespace7-teaser

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.

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

squarespace7-onpageediting-closeup
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.

squarespace7-deviceview
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.

squarespace7-coverpages-whole
Eine gut gebaute Cover Page ;)

squarespace7-coverpages-detail
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.

squarespace7-gettyimages-integration
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.

squarespace7-mobileapps
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.

squarespace7-developerplatform
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.

squarespace7-newdesigns
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?

Kategorien
Design JavaScript & jQuery Responsive Design Webdesign

Flickity: Schicke Galerien auf allen Geräten – responsiv und mit Gestensteuerung

Es gibt zahlreiche Lösungen, um Galerien per JavaScript zu realisieren. Mal überzeugt die Bedienung nicht, mal ist der Funktionsumfang eher bescheiden. „Flickity“ hingegen ist ein zeitgemäßes JavaScript-Framework für Galerien, welches nicht nur am Desktop funktioniert, sondern auch für Mobilgeräte bestens geeignet ist. Die Galerie ist responsiv und lässt sich sowohl per Maus als auch per Gesten bedienen – bei Bedarf auch per Tastatur. Dank CSS3 kann man sich zudem schnell und animiert durch die Galerie bewegen.

flickity-teaser

Fix eingebunden und konfiguriert

Wer sich nicht erst durch die Dokumentation lesen will, kann „Flickity“ ohne zusätzliche Konfiguration schnell ins eigene Projekt einbinden. Neben einer JavaScript-Datei für die Funktionalität muss eine Stylesheet-Datei für das Aussehen und die animierten Übergänge im HTML-Kopf eingebunden werden. Anschließend lässt sich per HTML die eigentliche Galerie auszeichnen.

Dazu wird ein Container-Element bestimmt, welches alle Galerie-Elemente umschließt. Dieses erhält die Klassen „gallery“ und „js-flickity“. Dabei kann es sich um ein „<div>“-Element oder ein beliebiges anderes Blockelement handeln – zum Beispiel auch „<figure>“. Die einzelnen Galerie-Elemente erhalten die Klasse „gallery-cell“. Auch hierbei kann es sich um ein „<div>“-Element handeln, welches beispielsweise Bilder oder andere Inhalte umschließt. Es kann aber auch direkt ein „<img>“-Element verwendet werden. Hier ist man sehr flexibel bei der Wahl der Elemente.

<figure class="gallery js-flickity">
  <img src="1.jpg" class="gallery-cell" />
  <img src="2.jpg" class="gallery-cell" />
  <img src="3.jpg" class="gallery-cell" />
  …
</figure>

Im Beispiel werden ein „<figure>“-Element als Container und drei „<img>“-Elemente als Inhalte für die Galerie definiert. Mehr ist schon gar nicht zu tun, um mit „Flickity“ eine responsive Galerie zu erstellen. Per JavaScript werden verschiedene Buttons ergänzt. Zum einen gibt es zwei Pfeil-Buttons, um jeweils ein Bild vor- und zurückspringen zu können. Außerdem gibt es die Möglichkeit, jedes einzelne Bild der Galerie direkt anzusteuern – per Punkte-Navigation am unteren Rand. Darüber hinaus kann man sich per Drag-Funktion der Maus durch die Galerie bewegen. Auf Mobilgeräten ist die Steuerung per Geste möglich.

flickity_galerie_zentriert
Standardaussehen der Galerie, bei dem das ausgewählte Bild zentriert dargestellt wird

Die Pfeil-Buttons werden per „<button>“-Element ausgzeichnet, die Punkte-Navigation als Liste per „<ul>“- und „<li>“-Elemente. Die Pfeile der Buttons sind als SVG-Grafiken hinterlegt. Die einzelnen Menüelemente der Punkte-Navigation sind direkt per CSS gestaltet.

Das Stylesheet sorgt dafür, dass der Wechsel der Bilder per Animation erfolgt. Wird der Galerie keine feste Breite zugewiesen, nimmt sie immer die Breite des Elternelementes ein. Die Größe der einzelnen Bilder wird dabei nicht verändert. Je nach Breite sind Galerie-Elemente neben dem jeweils aktiven Element im Anschnitt sichtbar.

Verändert man die Breite des Browserfensters passt sich die Galerie automatisch der neuen Breite an. Auf Mobilgeräten wird somit auch bei veränderter Bildschirmorientierung die Galerie angepasst.

Auch wenn Bilder ein klassischer Anwendungsfall für eine Galerie sind, ist „Flickity“ nicht auf Bilder reduziert. Wie bereits erwähnt, lassen sich beliebige Elemente per „gallery-cell“ als Galerie-Element auszeichnen. Darin können sich beliebige Inhalte wie Texte und Text-Bild-Kombinationen befinden.

Dank zahlreicher Einstellungen sehr flexibel

„Flickity“ hat zahlreiche Einstellungsmöglichkeiten und kann daher sehr individuell angepasst werden. Die einzelnen Konfigurationsparameter werden dabei über das Data-Attribut „data-flickity-options“ direkt im Container-Element der Galerie definiert. Dabei werden diese als JSON-Objekt übergeben. So lassen sich beispielsweise die beiden Menüs – Vor- und Zurück-Buttons sowie die Punkte-Navigation – ausschalten.

<figure class="gallery js-flickity" data-flickity-options='{"prevNextButtons": false, "pageDots": false}'>
  …
</figure>

Da innerhalb des JSON-Objektes die Parameter zwingend in doppelten Anführungszeichen stehen müssen, muss das JSON-Objekt selbst in einfachen Anführungszeichen dem Data-Attribut zugewiesen werden.

Im Beispiel werden per „prevNextButtons“ und „pageDots“ alle Menü-Elemente entfernt. Eine Navigation ist dann nur noch per Maus beziehungsweise Geste möglich.

Auch das Aussehen der Galerie-Elemente lässt sich beeinflussen. So kann die Ausrichtung der einzelnen Elemente definiert werden. Per „cellAlign“ ist es möglich, ein Galerie-Element links- oder rechtsbündig sowie zentriert darzustellen.

<figure class="gallery js-flickity" data-flickity-options='{"cellAlign": "left"}'>
  …
</figure>

flickity_galerie_links
Galerie, bei dem das ausgewählte Bild linksbündig dargestellt wird

Über den Parameter „contain“ ist es möglich, die Galerie-Elemente so darzustellen, dass immer die gesamte Galeriebreite ausgefüllt wird. Das erste Galerie-Element würde dann immer am linken Rand, das letzte am rechten Rand dargestellt. Es entsteht also kein leerer Bereich.

<figure class="gallery js-flickity" data-flickity-options='{"contain": true}'>
  …
</figure>

flickity_galerie_contain
Zwei Galerien mit linksbündiger Darstellung: links mit gesetztem „contain“-Parameter, rechts ohne

Hervorzuheben ist darüber hinaus noch die Möglichkeit, freies Scrollen zu erlauben. Hierbei wird per „freeScroll“ dafür gesorgt, dass das jeweils aktive Bild beim Loslassen nicht automatisch in die definierte Ausrichtung gebracht wird. Außerdem kann man per „wrapAround“ ein Endlos-Scrolling zu realisieren. Hierbei wird nach dem letzten Galerie-Element wieder das erste platziert und vor dem ersten das letzte.

<figure class="gallery js-flickity" data-flickity-options='{"freeScroll": true, "wrapAround": true}'>
  …
</figure>

Mit dem „autoPlay“-Parameter sorgt man für einen automatischen Wechsel der einzelnen Bilder der Galerie. Angegeben wird eine Dauer für die Anzeige pro Bild. Die Auto-Play-Funktion wird deaktiviert, sobald die Galerie manuell bedient wird.

<figure class="gallery js-flickity" data-flickity-options='{"autoPlay": 1500}'>
  …
</figure>

Im Beispiel erfolgt ein automatischer Bildwechsel all eineinhalb Sekunden.

Wer mehrere Galerien verwendet und diese zentral einstellen möchte, kann dies tun. Hierzu ist es allerdings notwendig, jQuery oder Vanilla JS eingebunden zu haben.

$(".gallery").flickity({
  cellAlign: "right",
  contain: true
});

Im Beispiel werden Einstellungen für alle Galerien mit der Klasse „gallery“ vorgenommen.

Die hier vorgestellten Parameter stellen nur einen Teil der Möglichkeiten vor, mit denen „Flickity“ konfiguriert werden kann. Wer es noch individueller mag, kann sich anhand der „Flickity“-API beispielsweise eine individuelle Navigation bauen oder dynamisch Elemente der Galerie hinzufügen und sie daraus löschen. Über die API stehen auch eine Reihe von Events zur Verfügung, mit denen auf Interaktionen mit der Galerie reagiert werden.

Fazit und Nutzung

„Flickity“ ist ein sehr durchdachtes Galerie-Framework. Die Galerien erinnern von der Bedienung sehr an das, was man von nativen Apps für Mobilgeräte gewohnt ist. Daher ist die Bedienung sehr intuitiv. Dass es zunehmend wichtig geworden ist, auch auf Mobilgeräten entsprechend bequem und anspruchsvoll Bilder und Ähnliches zu präsentieren, dürfte nicht hervorgehoben werden müssen. „Flickity“ erfüllt all dies.

Die Konfiguration von „Flickity“ ist zudem spielend einfach. Die einzelnen Parameter werden mit Beispielen in der Dokumentation gut vorgestellt. Außerdem gibt es für jedes Beispiel einen bearbeitbaren Quelltext auf CodePen, wo man die jeweilige Einstellung direkt selbst ausprobieren und verändern kann.

„Flickity“ läuft auf allen modernen Browsern. Der Internet Explorer ist ab Version 8 dabei, Android-Browser ab Version 2.3 und iOS-Browser ab Version 5.

Allerdings ist die Nutzung von „Flickity“ nur für Open-Source-Projekte kostenlos. Alle anderen müssen für eine Einzellizenz 25 Dollar bezahlen. Die Lizenz gilt jedoch pro Entwickler und nicht pro Website. Das heißt, man kann das Framework in mehreren Projekten einsetzen. Es gibt auch eine Lizenz für bis zu acht Entwickler für 110 Dollar sowie eine für beliebig viele Entwickler, die dann für 290 Dollar zu haben ist.

Link zum Beitrag

(dpe)

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung Responsive Design Webdesign

Voll im Trend: 9 Material Design Frameworks für moderne Webseiten

Google hat mit seinem für Android entwickelten Material Design einen der größten Design-Trends der letzten Zeit angestoßen. Nach langer Zeit sieht Android endlich gut aus. Viele meinen, dass das Design mittlerweile mit iOS gut mithalten kann. Doch nicht nur mobile Apps werden heute in Material Design umgesetzt, auch immer mehr Webseiten nutzen das neue Design. Um das Design gut und ansprechend umsetzen zu können, kann man sich entweder selbst an der Umsetzung versuchen, oder man nutzt eines der angebotenen Material Design Frameworks, wovon immer mehr auf den Markt kommen. Daher stellen wir Ihnen heute eine Auswahl von Frameworks vor, damit Sie Ihre nächste Webseite im neuen, schicken Material Design verwirklichen können.

material-design-frameworks-teaser

Was ist Material Design?

Material Design ist in erster Linie eine Design-Vorgabe von Google für die Entwicklung von Smartphone- und Tablet-Apps auf Basis von Android. Material Design wurde zuerst auf der Google I/O 2014 vorgestellt, ist aber ebenfalls angedacht für Googles Chrome OS und das Web insgesamt. Googles Vorschlag konzentriert sich dabei auf eine klare und einfache Design-Sprache und die Verwendung von zum Teil kräftigen Farben und einer eigenen Typografie. Der Hintergrund der Material Design Richtlinien ist hierbei, eine einheitliche Nutzererfahrung auf allen Plattformen zu schaffen.

Sehr gut ist, dass Google detaillierte Richtlinien und Informationen zur Verfügung stellt in Bezug auf Design, Interaktionen und fundamentale Dinge wie Animationen, Farben, Typografie, Struktur und wesentliche Muster.

Ein Beispiel zeigt die perfekte Umsetzung als Android-App:

material-design-example-app

Google stellt ebenfalls ein gutes Einführungsvideo zur Verfügung:

Material Design:  Webdesign-Frameworks

Heutzutage gibt es einige wirklich gute Frameworks zur Entwicklung von Webseiten im Material Design. Acht der neun vorgestellten Frameworks sind Drittanbieter-Frameworks, wurden also nicht von Google entwickelt, was ihrer Effektivität und dem gut umgesetzten Design keinen Abbruch tut.

1. Materialize

Materialize

Materialize ist ein modernes Front-End Design CSS-Framework basierend auf dem Material Design. Es bietet Ihnen die Option, neben CSS  auch SCSS zu nutzen. JavaScript und Material Design Icons sind ebenso vorhanden, wie der im Original Material Design verwendete Roboto Font. Grids, Formulare, Buttons, Navigationen und die neuen Cards sind ebenfalls dabei. Wer an diesem Framework mitarbeiten möchte, kann dies auf Github tun. Es wird ein Starter-Template angeboten, eine Demo des Starter-Themes finden Sie hier.

2. Material UI

Material-UI

Material UI ist ein CSS-Design-Framework für die Erstellung von Webseiten im Material Design. Unterstützt werden Komponenten wie Buttons, Dialoge, Dropdown-Menüs, Icons, Formular-Elemente und vieles mehr. Auch Material UI ist auf Github zu finden.

3. Paper Bootswatch for Bootstrap

Paper Material Theme for Bootswatch

Das Paper-Theme ist eines der Themes für das Boostrap-Framework. Es bringt alle Komponenten mit, die auch Bootstrap bietet, allerdings im Material Design. Bootswatch bietet zusätzlich zu dem Paper Theme auch noch einige andere, wirklich schicke Themes an.

4. Bootstrap Material

Material-Design-for-Bootstrap

Genau wie Paper ist auch das Bootstrap Material ein Theme für das Bootstrap-Framework. Bootstrap Material bringt daher alle Komponenten mit, die das Bootstrap-Framework bietet. Zusätzlich jedoch kommt noch die Unterstützung für die 740 Original Material Design Icons aus der Google Material Design Icons Bibliothek dazu.

5. Leaf BETA

leaf-beta-material-design-framework

Das Leaf CSS-Framework ist von Kim Korte entwickelt worden. Es befindet sich zur Zeit noch in der Beta-Phase, daher ist noch nicht jedes Element enthalten oder optimal gestaltet. Doch es bringt bereits eine umfassende Liste von Komponenten mit sich. Buttons, Slider, Cards, Menüs, Tabs und vieles mehr kommt mit diesem liebevoll gestalteten Framework auf die heimische Entwicklungsplattform. Die verwendeten Icons stammen nicht aus der Google Bibliothek, sondern von Icomoon, was der Funktionalität allerdings keinen Abbruch tut. Als CSS Pre-Processor wird übrigens Stylus verwendet. Auch das Leaf Material Design Framework ist auf GitHub vertreten.

6. MUI CSS Framework

MUI Material Design CSS Framework

Das MUI-Framework ist ein leichtgewichtiges HTML und CSS Framework zum Erstellen von Websites nach den Google Material Design Richtlinien. MUI wurde entwickelt, um schnell, handlich und klein, sowie wirklich entwicklerfreundlich zu sein. Es enthält nur die grundlegenden Komponenten, die Sie zur Entwicklung einer Website nach Googles Design-Richtlinien benötigen. Es gibt keinerlei externe Abhängigkeiten, so dass ein mit diesem Framework entwickeltes Projekt nicht unnötig aufgebläht wird. MUI ist ebenfalls auf GitHub vertreten und offen für weitere Entwickler, die an dem Projekt mitarbeiten möchten.

7. Polymer Project

Polymer Material Design Framework

Googles Polymer Projekt hat es sich zur Aufgabe gemacht, koponentenbasierte Entwicklungsprozesse in das Internet zu bringen. Es ist kein reines HTML/CSS Framework für die Webentwicklung, sondern kann ebenso zur Entwicklung von mobilen Apps genutzt werden. Polymer befindet sich noch im Status eines sogenannten „Developer Preview“, also im einem frühen Stadium der Entwicklung, doch die meisten Komponenten sind bereits jetzt sehr ausgereift. Alle modernen Browser (IE 10+, Chrome, Safari, Firefox) zeigen die Designs und Komponenten von Polymer korrekt an. Polymer stellt umfangreiche Dokumentationen, Kurzanleitungen und Videos zum Einstieg zur Verfügung.

8. LumX

LumX Material Design Framework

nt1m Material Framework

Das nt1m/Material Design Framework ist ein einfaches, responsives CSS-Framework, das es Ihnen erlaubt, Material Design in Ihrem nächsten Web-Projekt einzusetzen. Es lässt sich via Github herunterladen. Mitwirkung am Projekt ist gewünscht.

Fazit

Neun Material Design Frameworks habe ich bei der Recherche für diesen Artikel für Sie gefunden. Nun liegt die Qual der Wahl bei Ihnen, welchem der vorgestellten Frameworks Sie Ihr Vertrauen schenken möchten. Die Auswahl ist groß genug. Ich werde auf jeden Fall Materialize und die beiden Bootstrap-Erweiterungen ausprobieren und wünsche Ihnen auf jeden Fall viel Spaß beim Experimentieren mit dem Material Design.

Links zum Beitrag

(dpe)

Kategorien
JavaScript & jQuery Responsive Design Webdesign

HTML5: Screen-Orientation-API – Bildschirm drehen mit JavaScript

Über Media Queries kann man das Aussehen einer Website abhängig machen von der Bildschirmorientierung eines Smartphones oder Tablets. Doch gelegentlich kann es vorkommen, dass eine Website nur für eine ganz bestimmte Orientierung vorgesehen ist – Portrait oder Landscape. Bei nativen Apps lässt sich für diesen Fall ein Format vorgeben. Dann wird die App unabhängig von der tatsächlichen Ausrichtung des Gerätes ausschließlich in dem Vorgabemodus dargestellt. Mit der Screen-Orientation-API aus HTML5 gibt es nun auch für JavaScript eine Möglichkeit, die Bildschirmorientierung eines HTML-Dokuments vorzugeben.

screenorientationapiteaser

Bildschirmorientierung für ein Dokument festlegen

Zugriff auf die Bildschirmorientierung hat man über die Eigenschaft „screen.orientation“ und die Methode „lock()“, über welche eine bestimmte Ausrichtung vorgegeben werden kann. Der Standardwert für die Methode ist „any“. Damit wird es dem Gerät erlaubt, jede Orientierung, eben gemäß der physikalische Ausrichtung des Mobilgerätes, anzunehmen. Daneben gibt es den Wert „natural“, der dafür sorgt, dass die Website in der für das Gerät natürlichen Orientierung dargestellt wird. Welche das ist, hängt vom jeweiligen Gerät ab. Bei Smartphones dürfte es in der Regel der Portrait-Modus sein, bei Tablets meist die Landscape-Ausrichtung.

screen.orientation.lock("natural");

Im Beispiel wird die natürliche Orientierung des Gerätes vorgegeben.

Jetzt erlaubt es die Screen-Orientation-API natürlich auch, eine ganz bestimmte Orientierung vorzugeben. Insgesamt stehen vier Werte zur Verfügung, mit denen alle Möglichkeiten der Ausrichtung eines Mobilgerätes abgedeckt sind. So gibt es die Werte „portrait-primary“ und „portrait-secondary“ sowie „landscape-primary“ und „landscape-secondary“.


Alle vier Orientierungen: „portrait-primary“, „portrait-secondary“, „landscape-primary“, „landscape-secondary“

Der Wert „portrait-primary“ ist bei Smartphones in der Regel identisch mit dem Wert „natural“ und entspricht der Standardorientierung. Bei „portrait-secondary“ wird der Portrait-Modus um 180 Grad gedreht. Die Website steht quasi auf dem Kopf, wenn man das Gerät in der normalen Ausrichtung hält.

screen.orientation.lock("portrait-primary");

Bei „landscape-primary“ und „landscape-secondary“ verhält es sich ähnlich. Beide Ausrichtungen unterscheiden sich dadurch, dass bei der „secondary“-Variante die Ausrichtung um 180 Grad gedreht wird.

Man kann auch auf den „primary“- und „secondary“-Zusatz verzichten und nur „portrait“ beziehungsweise „landscape“ als Schlüsselwörter verwenden. Dann wird es dem Gerät erlaubt, jeweils beide Varianten der Orientierung darzustellen.

Um die vorgegebene Orientierung aufzuheben und wieder alle Orientierungen freizugeben, genügt der Aufruf der Methode „unlock()“.

screen.orientation.unlock();

Nur im Vollbildmodus möglich

Das Vorgeben der Orientierung per „screen.orientation“ unterliegt zwei Bedingungen. Zum einen funktioniert das „Einrasten“ per „lock()“ nur, wenn der Browser per „requestFullscreen()“ in den Vollbildmodus geschaltet wurde. Damit zusammen hängt die zweite Bedingung: Da der Vollbildmodus nicht automatisch, sondern nur per Nutzeraufforderung gestartet werden kann, gilt das logischerweise auch für die Screen-Orientation-API.

Daher sollte man den Aufruf beider Methoden mit einem „click“-Event verbinden.

document.getElementById("button").addEventListener("click", function() {
  document.documentElement.requestFullScreen();
  screen.orientation.lock("portrait-primary");

 }, false);

Wichtig ist, dass wie im Beispiel zuerst der Vollbildmodus gestartet wird, bevor die „lock()“-Methode angewendet wird. Wird der Vollbildmodus beendet, wird auch die „eingerastete“ Orientierung wieder freigegeben.

Die vorgegebene Orientierung beendet man zusammen mit dem Vollbildmodus auch dann, wenn ein neues Dokument im Browser geöffnet wird – zum Beispiel per Aufruf eines Links. Die Screen-Orientation-API ist also immer nur für das aktuelle HTML-Dokument gültig.

Orientierung auslesen

Nicht immer will man die Orientierung vordefinieren. Manchmal will man einfach wissen, wie ein Smartphone oder Tablet ausgerichtet ist. Dafür bietet die Screen-Orientation-API die Möglichkeit, die Orientierung einfach auszulesen. Mit der Eigenschaft „type“ wird einer der vier Schlüsselwörter für die Orientierung wiedergegeben.

alert(screen.orientation.type);

Neben „type“ existiert die Eigenschaft „angle“, welche die Orientierung nicht als Schlüsselwort, sondern als Winkel ausgibt.

alert(screen.orientation.angle);

Ein Winkel von 0 Grad entspricht immer der natürlichen Ausrichtung – bei Smartphones also meist „portrait-primary“. 90 Grad stehen für „landscape-primary“, 180 Grad für „portrait-secondary“ und 270 Grad für „landscape-secondary“. Je nach Gerät können die Winkelangaben für andere Schlüsselwörter stehen.

Um die aktuelle Orientierung abzufragen, ist es nicht notwendig, dass der Browser im Vollbildmodus ausgeführt wird.

Per „change“-Event ist zudem möglich, auf eine Änderung der Bildschirmorientierung zu reagieren. Dazu wird der „orientation“-Eigenschaft einfach die Methode „addEventListener()“ sowie eine Funktion hinzugefügt.

screen.orientation.addEventListener("change", function(e) {
  alert(screen.orientation.type + " " + screen.orientation.angle);
}, false);

Im Beispiel wird bei jedem Wechsel der Orientierung ein Alert ausgegeben, der die aktuelle Orientierung als Schlüsselwort sowie als Winkel wiedergibt.

Browsersupport

Die Screen-Orientation-API wird von Chrome ab Version 38 und Opera ab Version 25 ohne Vendorpräfixe unterstützt. Logischerweise funktioniert die API nur auf Mobilgeräten. Um herauszufinden, ob ein Browser die API unterstützt, genügt eine einfache „if“-Abfrage.

if ("orientation" in screen) {
  …
}

So lässt sich für Browser, welche die API nicht unterstützen, gegebenenfalls ein Hinweis einblenden, dass das Gerät manuell in eine bestimmte Orientierung gebracht werden soll. Außerdem wird bei Desktopbrowsern, welche die API nicht unterstützen, keine Fehlermeldung ausgegeben, wenn die API innerhalb dieser Abfrage erfolgt.

Die Screen-Orientation-API ist noch relativ neu. In früheren Entwicklungsphasen der API wurden teils abweichende Bezeichnungen für die Methoden verwendet. So gab es „lockOrientation()“ statt „lock()“ und „unlockOrientation()“ statt „unlock()“. Die alte Schreibweise sollte man für Chrome und Opera nicht mehr verwenden.

Diese alte Schreibweise wird derzeit allerdings noch vom Internet Explorer ab Version 11 und Firefox ab Version 33 unterstützt – allerdings unter Verwendung entsprechender Präfixe – also „ms“ für den Internet Explorer und „moz“ für den Firefox.

screen.msLockOrientation.lock("portrait-primary");
screen.mozLockOrientation.lock("portrait-primary");

Auch das Event zum Feststellen eines Orientierungswechsels unterscheidet sich von der aktuellen Schreibweise der API. Statt „change“ muss hier „orientationchange“ mit entsprechenden Präfixen verwendet werden.

Um alle Browser abzudecken, bleibt einem derzeit nichts anderes übrig, als beide Schreibweisen zu verwenden und bei der alten Schreibweise auf Vendorpräfixe zu achten.

Noch etwas zur grundsätzlichen Verwendung der Screen-Orientation-API: Da sie nur in Kombination mit der Fullscreen-API läuft, sollte sie nicht eingesetzt werden, um damit etwa Webseiten zu gestalten. Vielmehr ist sie geeignet, um beispielsweise in Browserspielen oder anderen Apps, bei denen der Vollbildmodus zwingend nützlich ist, Anwendung zu finden.

(dpe)

Kategorien
Apps Boilerplates & andere Tools Design Programmierung Responsive Design

Origami: Freies Design-Prototyping für iOS, Android und das Web

Prototyping ist eine wichtige Sache im Entwicklungsprozess einer App. Animationen und Verlinkung aller Ebenen müssen stimmen und ausprobiert werden, bevor der eigentliche Entwicklungsprozess abgewickelt werden kann und die fertige App letztlich in den App-Store hochgeladen wird. Mit Origami ist ein von Facebook entwickeltes Design-Framework am Start, welches das Prototyping von iPhone- und iPad-Apps erleichtern möchte. Origami legt dabei besonderen Wert auf die Integration von Interaktionen und Animationen.

origami-teaser

[Image of iMac by Placeit]

Was ist Origami

Origami ist ein kostenloses Tool für die Gestaltung moderner Benutzerschnittstellen. Es wurde für die schnelle Erstellung von Design-Prototypen mit Animationen und Interaktionen entwickelt, die dann auf dem iPhone oder dem iPad ausgeführt werden können. Die Export-Funktion erlaubt es, den generierten Code zu exportieren und dem Entwickler als Snippet zur Verfügung zu stellen. Origami ist ein Open-Source Animations-Framework, welches Sie die benötigten Animationen der Benutzeroberfläche leichter und zielführender erstellen lassen soll. Das Framework ist eine Entwicklung von Facebook, erblickte erstmalig am 20. Dezember 2013 das Licht und wurde bis heute stetig weiter entwickelt.

Wichtig zu wissen ist, dass Origami nur mit dem Quartz Composer eingesetzt werden kann, also ausschließlich für Mac OS X zur Verfügung steht. Zudem muss man als Apple Developer registriert sein, um es nutzen zu können. Auch wenn Origami letztlich Code für iOS, Android und das Web exportieren kann, ist das Framework nur für Apple-Verwender nutzbar. Will man seine Prototypen ausprobieren, so ist das komfortabel nur mit iOS möglich, denn ausschließlich für diese Plattform steht eine dedizierte App namens Origami Live for iOS zum kostenlosen Download über den iTunes App Store bereit.

origami framework

Gehen wir nun gemeinsam durch einige Funktionen und schauen, was Origami für Sie leisten kann. Weil es immer besser ist, sich anzuschauen, was ein Tool kann, anstatt es nur zu lesen, habe ich am Ende des Beitrags einige Videos zu Origami verlinkt.

Die Homepage: Origami – Design Prototyping Tool

Gestensteuerung

origami-gesten

Origami bietet nach eigenen Angaben die fortschrittlichsten und am einfachsten zu benutzenden Gesten-Bauteile. Es unterstützt Scroll-, Swipe- und Tap-Gesten. Alle Komponenten sollen hierbei sehr leicht zu nutzen und zu integrieren sein.

Die Scroll-Komponente unterstützt freies Scrollen, seitenweises Scrollen oder „Wheel of Fortune“-Scrolling und bietet fortgeschrittene Funktionen zur Erstellung eines Scroll-Bereichs einer App. Der Swipe-Bereich macht es möglich, dass der derzeitige Bildschirm sich mittels Animation nach unten bewegt, um einen neuen Bildschirm; zum Beispiel für Einstellungen; freizugeben. Die dritte Komponente sorgt für „Taps“. Taps meint das Tippen auf den Bildschirm und die damit verbundenen Aktionen. Sie können relativ einfach festlegen, was mit einem Tipp auf den Bildschirm passiert, welche Funktion ein doppelter Tipp auf dem Bildschirm auslöst und was bei einem längeren Pressen eines Fingers auf dem Bildschirm passieren soll.

Die Code-Export Funktion

Origami beherrscht den Code-Export der von Ihnen erstellten Design-Komponenten mit nur einem Klick. Der Code Ihrer erstellten Animationen kann daher einfach als Snippet exportiert werden, damit die Coder sie per Copy und Paste in das Projekt übernehmen können. Origami will hierbei für denselben „Look and Feel“ auf allen Plattformen sorgen, das heisst, dass sich die fertige App auf allen Plattformen gleich anfühlen und auch aussehen soll.

Export Code Funktion von Origami

Exportiert werden kann der Code für iOS, Android und das Web. Damit Sie sich über die Qualität des exportierten Codes klar werden können, existiert jeweils ein beispielhafter Code.

Codebeispiele für:  iOS .m | Android .java | Web .js

Sketch und Origami

Origami arbeitet sehr gut mit dem neuen und immer beliebter werden Werkzeug Sketch zusammen, was das Prototyping noch weiter vereinfacht.

Mit Origami können Sie Links zwischen den einzelnen Ebenen im Prototypen und einer Sketch-Datei erstellen. Sobald die einzelnen Ebenen verlinkt sind, reicht eine einfache Tastaturkombination aus, um den Prototypen ohne Unterbrechung zu aktualisieren. Falls Sie ein Photoshop oder Affintity Photo Nutzer sind, so wird es Sie freuen zu hören, dass die Origami-Ebenen auch mit PSD-Dateien verknüpft werden können.

Sketch und Origami: Ein kurzes Video-Tutorial

Dieses kleine Video-Tutorial zeigt Ihnen, wie Sie Ihre Sketch-Datei mit Ihrem Origami-Prototypen verbinden. Nach kurzem Setup sind Sie in der Lage, alle Ebenen mit nur einer Tastaturkombination zu aktualisieren.

Prototyping für Desktop-Anwendungen

website-prototyping-mit-origami

Mit Origami lassen sich nicht nur Prototypen für iPhone- und iPad-Anwendungen erstellen, sondern auch Websites und Web-Anwendungen. Es können Features wie Text-Input, benutzerdefinierte Cursors, FaceTime Kamera und OS X Drag und Drop genutzt und entwickelt werden, die dann jeweils in einem in der Größe anpassbaren Browser-Frame kontrolliert werden können. So ist es Ihnen möglich, responsive Anwendungen für das Web als Prototyp zu erstellen.

Aus Beispielen lernen

Downloadbare Beispiele von Origami Code

Viele andere Design-Frameworks für das App-Prototyping sind ebenfalls hervorragend dokumentiert. Origami jedoch bietet Ihnen nicht nur eine Dokumentation zum Erlernen an, sondern auch noch vier Beispiele von Interaktionen und sieben Beispiele von Interfaces. Diese 11 Beispiele können jeweils als QTZ-Datei heruntergeladen und in das Projekt importiert werden. So können Sie genau sehen, was für eine bestimmte Animation oder einen bestimmten Bereich Ihres Prototyps vonnöten ist. Unter Umständen fällt Ihnen auf diese Art und Weise der Einstieg und das Erlernen des Prototypings mit dem Origami-Framework leichter.

Die Download-Seite mit den Origami Code-Beispielen

Die Origami Tutorials

Diese Videos führen Sie Schritt für Schritt durch die Erstellung von Prototypen mit dem Origami-Design-Framework. Zu jedem Video kann der Beispiel-Code heruntergeladen werden.

Eine Einführung in Origami

Dieses Video vermittelt Ihnen alles, was Sie zum Einstieg in das Prototyping mit Origami benötigen. Am Ende des Videos ist eine Interaktion erstellt worden, mit der Sie mit einem Fingertipp ein Foto heran- und herauszoomen können.

Download des Beispielcodes

Eine faltbare Navigationsleiste erstellen

Es wird eine Interaktion erstellt, bei der sich während des Scrollens die Navigationsleiste ansprechend zusammenfaltet und wieder entfaltet. Sie lernen, wie man eine Ebene scrollbar macht und auf Basis der Scroll-Position animiert.

Beispielcode für die Erstellung einer faltbaren Navigation

Eine Swipe-Away Navigation erstellen

In diesem Video geht es um die Erstellung einer sogenannten „Swipe-Away“ Navigation. Mit einem Fingertipp auf ein Element im Feed gleitet von rechts eine vollständige Ansicht des einzelnen Elements herein und kann mit einem Wisch nach rechts wieder aus dem Sichtbereich befördert werden. Besonders News-Apps arbeiten gerne mit diesem Effekt. Sie lernen in diesem Video, wie man Ebenen wischbar macht.

Beispielcode für die Erstellung einer „Swipe-Away“ Navigation

Einen neuen Beitrag erstellen

In diesem Video wird der Prototyp komplettiert. Mit dem „Plus-Button“ soll sich ein neuer Bereich öffnen, mit dem ein neuer Post dem Feed hinzugefügt werden kann. Sie lernen den Umgang mit dem „Wireless-Patch“ und wie man eine konditionelle Logik aufbaut. Auch die Erstellung einer mehrstufigen Animation wird im Video behandelt.

Beispielcode für die Erstellung eines neuen Beitrags

Fazit

Origami ist ein sehr gut dokumentiertes Open-Source-Framework zur Erstellung von Design-Prototypen. Dem Einsteiger in die Materie wird gleich mehrfach unter die Arme gegriffen – mit Code-Beispielen, guten Video-Tutorials und einer umfassenden Dokumentation. Wenn das noch nicht ausreicht, empfiehlt sich ein Beitritt zur entsprechenden Facebook-Community. Die Community kann man dann für Feature-Vorschläge oder Support-Anfragen nutzen.

Links zum Beitrag

(dpe)