Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2015-06-11T07:22:33Z t3n Redaktion http://t3n.de/tag/responsive-webdesign So geht Mobile-Design heute: Typografie, Blur-Effekte und die Anforderungen von Wearables http://t3n.de/magazin/mobile-design-238281/ 2015-06-11T07:22:33Z
Die digitale Welt ist mobil. Der klassische Desktop verliert zumindest im Consumer-Bereich zunehmend an Relevanz. Immer mehr Menschen ziehen mobile Geräte vor. Neue Trends für Mobile- und …

Die digitale Welt ist mobil. Der klassische Desktop verliert zumindest im Consumer-Bereich zunehmend an Relevanz. Immer mehr Menschen ziehen mobile Geräte vor. Neue Trends für Mobile- und Responsive-Design tragen dem Rechnung. Ein Trend-Bericht mit Best Practices.

Eine der ersten Reaktionen von Designern und Entwicklern auf die steigende Relevanz mobiler Webnutzung war die Entwicklung responsiver Webdesigns. Sie sorgen dafür, dass sich die Nutzeroberfläche von Websites und Apps an die unterschiedlichen Bildschirmgrößen anpasst. Während anfangs noch Adaptive Designs mit drei Varianten (Breakpoints) für Desktop, Tablet und Handy ausreichten, setzen moderne Websites und Apps heute zunehmend ein fließendes (fluides) Responsive Webdesign voraus, um alle aktuellen und auch zukünftige Monitorgrößen bedienen zu können.

Auch das 2013 populär gewordene Flat Design kommt mobilen Anwendungen zugute. Es setzt – wie der Name schon sagt – auf zweidimensionale, kontrastreiche, aber detailarme und somit fingerfreundlich vereinfachte Gestaltungselemente und sieht fantastisch aus, wenn es gut und durchdacht ist. Gleiches gilt für den Off-Canvas-Flyout: Er ist eine Erfindung, der die responsive Gestaltung verbessern soll. Da hierbei die Navigation erst beim Tap des Users im sichtbaren Display-Bereich erscheint, verdoppelt es die Fläche für die Darstellung der eigentlichen Seiteninhalte.

Derlei Mobile Designelemente sind mittlerweile fast schon Standard und finden auch zunehmend im Web-Design für große Screens Anwendung – beispielsweise bei Uber. Doch mittlerweile gibt es eine Reihe neuer Entwicklungen, die Web-Designer und -Entwickler in ihr mobiles Repertoire aufnehmen sollten: Von schlichter Typografie über großzügige Bilder und Videos bis hin zur Berücksichtigung von Contextual Awareness und App-Designs für Wearables.

Das Foto-Netzwerk Utravisual verbindet gutes, visuelles Design mit technischer Raffinesse: Die über die Bilder gelegten Texte lassen sich mit einem Fingertipp ausblenden. (Screenshot: ultravisual.com)
Das Foto-Netzwerk Utravisual verbindet gutes, visuelles Design mit technischer Raffinesse: Die über die Bilder gelegten Texte lassen sich mit einem Fingertipp ausblenden. (Screenshot: ultravisual.com)

Anspruchsvolle Typografie

Gute Typografie ist ein wesentlicher Bestandteil guten Designs. Dabei war eine ausgefallene Typografie lange dem Print-Bereich vorbehalten. Doch heute haben auch Webdesigner eine riesige Auswahl an Schriftarten für ihre Webprojekte. Im Mobile-Design zeichnet sich gute Typografie allerdings meistens durch eine gewisse Schlichtheit aus.

Das mobile Video-Netzwerk Vine punktet auf seiner Startseite mit einem im Hintergrund ablaufenden, weichgezeichnete Video. (Screenshot: vine.co)
Das mobile Video-Netzwerk Vine punktet auf seiner Startseite mit einem im Hintergrund ablaufenden, weichgezeichnete Video. (Screenshot: vine.co)

Eine gute Typografie zeichnet sich nicht nur durch die Lesbarkeit eines Textes aus, sondern ist ein fester und unverkennbarer Bestandteil der Designsprache: Schlechte Typografie signalisiert Unprofessionalität, die sich auf das gesamte Produkt übertragen lässt.

Ein gutes Beispiel liefert das Foto-Netzwerk Ultravisual. Die Site kombiniert große Bilder mit Typografie und erzielt so einen Magazin-Look, bei dem sowohl die Motive als auch die Texte gleichermaßen ins Auge fallen. Mit einem Tap kann der Nutzer die über das Bild gelegte Typografie ausblenden. Die transluzente Navigations-Leiste lässt das nächste Bild mit einem Blur-Effekt durchschimmern. Es entsteht ein angenehmer Effekt, der gleichzeitig die Orientierung in der App unterstützt.

Große Bilder und Videos: Fast besser als auf großen Screens

Der Mensch ist ein visuelles Wesen und mobile Geräte bieten uns die perfekte Spielwiese dafür: Ein Smartphone-Display verfügt nämlich über eine weitaus höhere Pixeldichte als jeder andere Bildschirm, und hat eine gleichmäßigere Ausleuchtung und bessere Farbwiedergabe als mancher High-End-Fernseher. Mit großen (Bewegt-)Bildern können mobile Apps und Websites erstaunliche Wirkungen erzielen – und mit Unterstützung der besseren High-End Mobile-Displays zum Teil ihre Desktop-Versionen trotz kleinerer Bildschirme in den Schatten stellen.

So setzt zum Beispiel Expedia auf dem Begrüßungsbildschirm seiner mobilen iOS-App auf große Bilder, um beliebte Hotels und Resieziele anzubieten. Das soziale Netzwerk Vine begrüßt in der mobilen Applikation gar mit einem weichgezeichneten Hintergrundvideo. Innerhalb des Netzwerks nehmen die kurzen Video-Clips – die so genannten Vines – ebenfalls den maximal verfügbaren Monitorplatz ein.

Orientierung durch Blur-Effekte

So schön große Bilder sind – sie nehmen viel Platz auf einem meist doch kleinen Display ein. Um dennoch Platz für Text – auch im direkt sichtbaren Bereich – zu schaffen, greifen viele Designer zum so genannten Blur-Effekt, der seinen Ursprung nach Ansicht etlicher Designer in der Design-Umstellung von iOS 7 hat. Allerdings hat selbst Windows Vista schon auf einen ähnlichen Effekt in kleineren Bereichen der Fenster gesetzt.

Die iOS-App des Hotels Tonight zeigt, wie der Blur-Effekt funktioniert: Die Bilder sind verschwommen, sobald sich der Text darüberlegt. Dieser ist dann gut lesbar, dennoch bleibt der Bezug zum Bildinhalt bestehen. (Screenshot: Hotel-Tonight-App)
Die iOS-App des Hotels Tonight zeigt, wie der Blur-Effekt funktioniert: Die Bilder sind verschwommen, sobald sich der Text darüberlegt. Dieser ist dann gut lesbar, dennoch bleibt der Bezug zum Bildinhalt bestehen. (Screenshot: Hotel-Tonight-App)

Der Blur-Effekt besteht aus einer transluzenten Textfläche, die über weichgezeichneten Bildern liegt. Das sorgt für eine gute Lesbarkeit bei einer angenehmen Gesamtoptik. Wer den Blur-Effekt clever einsetzt, kann beispielsweise Navigation-Overlays realisieren, die sich auf das vorhergehende Element beziehen.

Ein Beispiel dafür ist der Einsatz des Blur-Effekts in Apples iOS. Untergeordnete Inhalte scheinen unter den Bedienelementen durch und erleichtern dem Nutzer so die Orientierung. Auch die iOS-App des Hotels Tonight zeigt, wie das aussehen kann: Untermenüs legen sich hier als Overlay über die Bilder, die dabei mit einem Blur versehen werden.

Gesten, Gesten, Gesten: Experience per Finger und Geste

Designer und Entwickler müssen schon lange über das klassische Point-And-Click-Muster hinausdenken. Denn auch wenn es auf den ersten Blick so scheint, als sei ein Tap ein Klick, so sind bei mobilen Geräten weitaus mehr Interaktionen möglich. Taps, Swipes, Pinches oder längeres Drücken eines Elements sind nur einige Beispiele für Gesten, mit denen mobile Nutzer Websites und Applikationen bedienen. Designer sollten all diese Interaktionen nutzten, um die Bedienung ihrer Interfaces zu vereinfachen.

Ein gutes Beispiel dafür sind die Apps von Twitter und YouTube. Berührt man ein Tweet oder Video längere Zeit, so fährt ein kontext-sensitives Menü aus. YouTube-Videos lassen sich zudem mit einem Swipe minimieren, um nach weiteren Inhalten zu suchen. Das Interface kann dadurch auf Buttons oder Reiter verzichten und erreicht eine aufgeräumte Gesamtwirkung und eine einfachere Nutzung.

YouTube besticht bei seiner mobilen App mit durchdachter Navigation: Per Swipe kann der Nutzer hier beispielsweise Videos minimieren, um nach weiteren Inhalten zu suchen. (Screenshot: Youtube-App)
YouTube besticht bei seiner mobilen App mit durchdachter Navigation: Per Swipe kann der Nutzer hier beispielsweise Videos minimieren, um nach weiteren Inhalten zu suchen. (Screenshot: Youtube-App)

]]>
Ilja Zaglov
Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text http://t3n.de/news/typografie-responsive-webdesign-3-603722/ 2015-04-04T08:00:36Z
Im vorigen Teil dieser Artikelserie über Typografie im Responsive Webdesign haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen.

Im vorigen Teil dieser Artikelserie über im haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen. Heute stellen wir uns der letzten Herausforderung, der zunehmenden Komplexität mobiler Geräte gerecht zu werden. Dazu betrachten wir bewährte Methoden, wie zum Beispiel die Verwendung von em- und rem-Angaben bei der Zuweisung von Media Queries für den Body-Text anstelle von Pixelwerten.

Sprungmarken:

  1. Mit em und Media Queries
  2. Mit rem und Media Queries
  3. Mit CSS Viewport-Einheiten
  4. Mit Hilfe eines jQuery-Plugins
  5. Mit Hilfe von Elementabfragen

Reaktionsfähiger Body-Text

Wenn es darum geht, den Body-Text reaktionsfähig zu gestalten, gibt es einige wichtige Hinweise zu beachten: Du solltest daran denken, dass sich nicht nur die Textgröße ändert, um mit einer idealen Zeichenanzahl in ihren Container zu passen und dabei gut lesbar zu belieben. Es ist auch notwendig, flexible Zeilenabstände einzuhalten, sodass deine Wörter auf hochauflösenden Bildschirmen stets gut skaliert und die Schriftgröße vom Anwender einfach geändert werden kann. Um diese Punkte zielführend umzusetzen, definiere proportionale und relative Größeneinheiten für die Schriftgröße und Zeilenhöhe.

1. Mit em und Media Queries

Ethan Marcotte, der Mann hinter der “Responsive Webdesign”-Idee, erklärt in einem ausgezeichneten Artikel, warum em für das Definieren der Schriftgröße besser geeignet ist, als Pixelangaben. Bevor ich auf die Vorteile von em eingehe, möchte ich dir zeigen, warum der Einsatz von Pixelangaben für die Textgrößenzuweisung nicht die optimale Lösung ist.

Pixel bieten zwar ein hohes Maß an Kontrolle über Schriftgrößen, haben aber einen bekannten Nachteil: Die Schriftgröße skaliert nicht, sobald du diese im Internet Explorer änderst. Es gibt keine Möglichkeit für Anwender, die Schriftgröße auf deiner Webseite zu erhöhen, wenn du Pixelangaben verwendest. Zwar unterstützen viele Desktop-Browser, darunter neuere Versionen des IE, eine Form des Seiten-Zooms, nur leider vergrößert der das gesamte Design, einschließlich der Schrift. Mit em als Schriftgrößenzuweisung befreien wir uns dagegen von diesem Problem.

1.1 Die flexible Schriftgröße

Ich empfehle, Prozentangaben zu verwenden, um die Schriftgröße im body einzustellen. Proportional zu diesem Wert definierst du dann die Schriftgrößen für den Inhalt. Die Zuweisung deiner body-Schriftgröße in Prozent bietet dir schließlich eine flexible Grundlage, auf der du mit relativen Einheiten wie em beliebige Anpassungen der Textgröße vornehmen kannst. Die Einstellung der body-Schriftgröße von 100% setzt die Textgröße auf den Standardwert des Browsers, welcher in der Regel 16px ist.

Eine Vielzahl von Webdesignern neigt dazu, einen body-Ausgangswert von 62.5% einzusetzen. Dieser Wert entspricht 10px Schriftgröße im body, was es einfacher macht, andere Schriftgrößen im Bezug zum Ausgangswert zu definieren. Von nun an ist es einfach in Pixel zu denken, wobei die Werte stets in em angegeben werden ( 1em sind 10 Pixel, 1.6em sind 16 Pixel).

Lesetipps: Wenn du mehr über die 62.5%-Technik wissen möchtest, empfehle ich einen Artikel von Richard Rutter. Rutter hat noch einen weiteren Artikel geschrieben, in dem er empfiehlt, 100% als Grundwert zu definieren, da dieser eine bessere Cross-Browser-Kompatibilität gewährleistet.

Somit können wir durch em und Media Queries responsive Schriften umsetzen. Das einfachste Beispiel würde wie folgt aussehen:

body {
font-size:100%; /* Flexibler Ausgangswert */
}
p {
font-size: 1.25em; /* 1.25em im Verhältnis zu eines 16px body-Ausgangswertes ergibt 20px Schriftgröße */
}
Um die Schriftgröße für kleinere Bildschirme mit Media Queries zu ändern, genügt es fortan, die body-Schriftgröße anzupassen. Auf diese Weise verändert sich die Textgröße der gesamten Seite proportional zum body-Schriftwert. Dazu brauchst du lediglich eine Zeile im CSS anzupassen:
@media screen and (max-width: 40em) {
body {
font-size:90%;
}
}
@media screen and (max-width: 30em) {
body {
font-size:80%;
}
}
Damit es uns gelingt, reaktionsfähige Schriftgrößen umzusetzen, erzeugen wir nur noch proportionalen Zeilenabstand für unsere body-Inhalte.

1.2 Der proportionale Zeilenabstand

Genauso wie wir sicherstellen müssen, dass sich unsere Textgröße beim Ausgeben verschiedender Bildgrößen verändert, müssen wir darauf achten, dass sich der Raum zwischen den Zeilen in der Größe verändert und proportional an die Schriftgröße anpasst. Zeilenabstände lassen sich ebenso in em definieren. Verwendete man Pixelangaben für den Zeilenabstand und der Leser will in die Webseite hineinzoomen, vergrößert sich die Schriftgröße. Der Abstand zwischen den Zeilen hingegen würde sich an den Pixelangaben orientieren – dein Text könnte dadurch unleserlich wirken.

Indem wir den Zeilenabstand relativen Einheiten zuweisen, gewährleisten wir, dass er entsprechend der Schriftgröße eine optimale Lesbarkeit ermöglicht. Ein geeigneter Wert für einen gut lesbaren Zeilenabstand ist 1.4em für den Haupttext und 1.2em für Überschriften. Je nachdem, welche Schriftart du verwendest, können die Werte leicht variieren. Um also proportionale Zeilenabstände zu vergeben, nutzen wir folgenden CSS-Code:

body {
font-size: 100%; /* Flexibler Ausgangswert */
}
p {
font-size: 1.25em;
line-height: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
}

Einen noch besseren und flexibleren Weg, um die Zeilenabstände proportional einzustellen, bevorzugt Eric Meyer, indem er die Zeilenabstände ohne Einheit definiert.

2. Mit rem und Media Queries

rem ist, genau wie em, eine relative CSS Einheit (w3.org/TR/css3-values/#rem-unit). Ihren Unterschied zeigt das “r”; es steht für “root em”. Die Schriftgröße richtet sich mit rem relativ zur Schriftgröße des Root-Elements, also dem html anstelle des body aus.

Anstelle des body-Elements setzt du bei rem die Schriftgröße auf 100% des html-Elements. Dann kannst du die Schriftgrößen deines Textes über Media Queries anpassen, indem du den Wert über das html-Element änderst, ähnlich wie wir es bereits mit em beim body-Element gemacht haben. Aber, wenn rem und em nun so ähnlich sind, warum sollten wir dann rem nutzen? Was für einen Vorteil hat rem gegenüber em? Das Tolle beim Einsatz von rem ist, dass es die Schriftgröße des gesamten Inhaltes im Zusammenhang des Root-Elements definiert, nicht im Zusammenhang des Containers. Beispielsweise können schlicht verschachtelte Listen mit em ziemlich chaotisch und CSS-lastig werden.

Szenario: Nehmen wir mal an, du entscheidest dich, die Listenelemente mit font-size: 1.1em zu definieren. Hat die Liste nun verschachtelte Listen, werden die Child-Listen kaskadieren und die Schriften “wachsen”. Vermutlich möchtest du das nicht. Du kannst es mit li li { font-size: 1em; } fixen, jedoch fängt es hier an, unschön zu werden. Das ist der Punkt, an dem rem ins Spiel kommt. Einen Nachteil hat der Einsatz von rem dennoch – es bietet eine beschränkte Browser-Unterstützung (IE 9+).

Lesetipp: Chris Coyier schreibt in seinem Blogartikel, warum er den Einsatz von em bevorzugt.

Obwohl die Browser-Unterstützung für rem sich allmählich durchsetzt, solltest du dennoch einen Pixel-Fallback für ältere Browser anbieten. Falls du einen Präprozessor wie Sass verwendest, kannst du auf Mixins zurückgreifen, die alle Fallback-Berechnungen für dich vornehmen. Es gibt mehrere Mixins für rem, aus denen du deine bevorzugte Methode wählen kannst.

3. Mit CSS Viewport-Einheiten

Der body-Text wird auch durch CSS Viewport-Einheiten reaktionsfähig. Im vorherigen Artikel begründe ich deren Verwendung und erkläre die Umsetzung. CSS Viewport-Einheiten zu verwenden hat einen offensichtlichen Vorteil gegenüber den vorigen Methoden, bei denen em und rem für 100% flüssigen Text genutzt wurden. Um die Schriftgröße zu definieren, muss nicht mehr auf eine Reihe von Media-Abfragen zurückgegriffen werden – die Größenänderungen werden auf Grundlage der Containergröße vorgenommen, egal wie und wann die Breite sich ändert. Ein Beispiel für die Verwendung von Viewport-Einheiten zur Erstellung von flüssigem Text siehst du im nächsten Abschnitt.

4. Mit Hilfe eines jQuery-Plugins

Zeilen, die zu lang oder zu kurz sind, führen zu einem schlechten Leseerlebnis. Um das auszuschließen, definieren wir eine Wortanzahl pro Zeile, die stets gut lesbar ist. Dies verdeutlichen dir zwei Beispiele:

  1. Wenn die Textzeilen zu lang sind, ist das Auge des Besuchers sehr damit beschäftigt, auf den Schwerpunkt des Textes zu fokussieren. Gerade bei größeren Textblöcken ist es schwierig, das Lesen in der korrekten Zeile fortzuführen. Ermögliche es dem Leser ein Gefühl dafür zu bekommen, wo die Zeile beginnt und wo sie endet.
  2. Sind Zeilen hingegen zu kurz, werden diese nicht vollständig gelesen, weil der Fokus des Lesers vorzeitig zum Anfang der nächsten Zeile gelenkt und der Leserhythmus unterbrochen wird.

Eine ideale Zeilenlänge erlaubt Lesern, den Text bis zum Ende einer Zeile und den Anfang der Nächsten Zeile auf natürliche und einfache Weise zu erfassen. Die optimale Zeilenlänge für den Textkörper beträgt etwa 50 bis 60 Zeichen, inklusive Leerzeichen. Einige sagen, dass sogar 75 bis 80 Zeichen pro Zeile akzeptabel sind. Wenn sich die Schriftgröße auf verschiedene Geräte einstellt, sollten wir bedenken, dass größere Schriften auf kleinen Bildschirmen ziemlich kurze Zeilen erzeugen. Kleinere Schriften auf großen Monitoren führen dagegen zu einer Länge, die die empfohlene Anzahl der Wörter für optimale Lesbarkeit übersteigt. Also riskieren wir in beiden Szenarien eine schlechte Lesbarkeit und damit eine schlechte Benutzererfahrung. Daher ist es am besten, einen Weg zu finden, die Schriftgröße auf kleinen Bildschirmen zu verringern und auf größeren Formaten zu erhöhen. In Folge dessen wird die Zeichenanzahl pro Zeile zugunsten der Lesbarkeit auf großen Bildschirmen ab- und auf kleinen zunehmen.

Wenn wir die Zeichenlänge pro Zeile durch Schriftgrößenänderungen automatisch (ohne manuelle Änderungen) in den Media Queries in Kombination mit relativen Zeilenabständen zuweisen (also 100% flüssigen body-Text), haben wir gute Bedingungen für eine großartige Lesererfahrung geschaffen. CSS Viewport-Einheiten können uns also dabei helfen, Texte so zu gestalten, dass sie sich jedem Bildschirm optimal anpassen. Ein Problem jedoch bleibt: Je kleiner der Bildschirm wird, desto kleiner wird auch die Schriftgröße und am Ende könnte die Schrift auf sehr kleinen Displays unleserlich wirken. Umgekehrt würde die Schrift bei immer größeren Monitoren immer größer werden. Es gibt also nur eine Möglichkeit, eine minimale oder maximale Grenze für die Schriftgröße zu setzen, nämlich die Verwendung von Media-Queries.

Lass uns uns einen Blick auf ein visuelles Beispiel werfen, das unter Verwendung von CSS Viewport-Einheiten flüssige Texte erstellt:

Responsiver body-Text mit CSS Viewport-Einheiten. (Bild: pixeltuner.de)
Responsiver body-Text mit CSS Viewport-Einheiten. (Bild: pixeltuner.de)

Wie du siehst, wird die Schrift immer kleiner, je kleiner der Bildschirm beziehungsweise das Browserfenster skaliert wird. Sobald eine Bildschirmgröße von 480px Breite erreicht ist, wirst du sehen, dass die Schrift kaum lesbar ist. Wir benötigen also einige Medien-Anfragen, um die Schriftgröße auf kleinen Bildschirmen anzupassen.

Folgende CSS-Anweisungen habe ich erstellt und kommentiert, sodass du sehen kannst, dass die Schrift immer weiter an Größe abnimmt, bis sie unleserlich wird. Befreie die auskommentierten Media-Queries, wenn du die Schrift auf kleineren Bildschirmen für eine bessere Lesbarkeit anpassen möchtest:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-color: #3498db;
color:white;
font-family: 'Open Sans', sans-serif;
padding:50px 30px;
font-size:100%;
}
p {
font-size:2.5vw;
}
/* Befreie die auskommentierten Media-Queries, wenn du die Schrift auf kleineren Bildschirmen für eine bessere Lesbarkeit anpassen möchtest.*/
/*
@media screen and (max-width:600px) {
p {
font-size: 3vw;
}
}
@media screen and (max-width:480px) {
p {
font-size: 4vw;
}
}
*/
Zu guter Letzt lösen wir noch das Problem der Browser-Unterstützung, um wirklich flüssige Texte in allen Browsern zu erreichen.

4.1 FlowType.JS Plugin

FlowType.JS ist ein Plugin, das flüssige Textgestaltung unterstützt. Das erreicht es mittels Anpassung der Schriftgröße und Zeilenhöhe, welche sich auf die Breite eines bestimmten Elements beziehen, wie bei den Viewport-Einheiten.

FlowTypeJS hat jedoch ein paar Vorteile gegenüber der Verwendung von CSS Viewport-Einheiten:

  • Cross-Browser-Unterstützung
  • Optionen zum Festlegen minimaler und maximaler Schriftgrößen.
Responsiver Body Text mit FlowType.JS Plugin (Screenshot: simplefocus.com)
Responsiver Body Text mit FlowType.JS Plugin (Screenshot: simplefocus.com)

Die Verwendung von FlowType.JS ist unkompliziert:

  • Verlinke innerhalb deiner Webseite zum Plugin und füge einige Standardschriftstile für Nutzer ein, die JavaScript nicht aktiviert haben.
  • Sprich nun das Plugin an, für jedes Text-Element, das du durch das FlowType.JS-Plugin flüssig gestalten möchtest.
  • Über die verfügbaren Plugin-Optionen kannst du zum Schluss noch Einstellungen vornehmen.
FlowType.JS Anleitung: Eine ausführliche sowie leicht nachvollziehbare Anleitung kannst du auf der Homepage des Plugins nachlesen.

Anstelle der Verwendung von Viewport-Einheiten bezieht sich folgendes Beispiel auf den Einsatz des FlowType-Plugins, worin Spezifikationen für die maximale und minimale Schriftgröße vorgenommen wurden.

Responsiver body-Text mit FlowType.JS-Plugin (Demo-URL) (Bild: puxeltuner.de)
Responsiver body-Text mit FlowType.JS-Plugin (Demo-URL) (Bild: puxeltuner.de)

Du siehst also, wie einfach es ist, den body-Text flüssig zu gestalten, ohne sich um weitere extra Regeln für Media-Queries kümmern zu müssen.

5. Mit Hilfe von Elementabfragen (Element Queries)

Elementabfragen ähneln Medienabfragen: Wenn eine Bedingung erfüllt ist, wird ein wenig CSS angewendet. Anstelle von bildschirmbasierten Abfragen, werden hierbei elementbezogene Abfragen zugewiesen (wie beispielsweise min-width, max-width, min-height und max-height). Das Problem dabei ist, dass Elementabfragen noch gar nicht in CSS existieren.

Elementabfragen:

Das Konzept der Elementabfragen wird in einem Artikel von Ian Storm Taylor genauer beschrieben.

Eine Element-Abfrage würde etwa wie folgt aussehen:

.main-nav (max-width: 30em) {
font-size: 0.75em;
}

Element-Abfragen sind sehr nützlich, da sie uns erlauben, reaktionsfähige CSS-Stile für Elemente zu vergeben, unabhängig von der Umgebung oder dem Layout, in dem diese Elemente untergebracht sind. Durch das Definieren von modularen Stilen für Elemente können wir diese überall wiederverwenden, sodass du einfach in der Lage bist, das Layout anzupassen, in dem die Elemente verwendet werden.

Angenommen, du hast eine Navigation und möchtest, dass sie sich unabhängig vom Header reaktionsfähig verhält: Anstatt die Stile entsprechend der Breite ihres aktuellen Containers zu definieren, könntest du die Stile so zuweisen, dass sich die Abfragen auf die Breite der Navigation selbst beziehen. Somit brauchst du keine Rücksicht mehr auf margins, paddings oder andere Container-Eigenschaften zu nehmen, die du in der Regel bei der Festlegung von Breakpoints für deine Inhalte nimmst. Je nachdem wie sich die Breite der Navigation verändert, kannst du deren Stile definieren, um sie flexibel und reaktionsfähig zu gestalten.

Lass uns konkreter werden: Unabhängig davon, wo die Navigation positioniert wird (ob im Kopfbereich oder innerhalb der schmalen Sidebar), möchtest du nun, dass die Menüpunkte nebeneinander stehen und eine Schriftgröße von 1em erhalten, sobald die Navigation breit genug ist, um die nebeneinander gereihten Menüpunkte darstellen zu können (zum Beispiel, wenn die Navigation breiter oder gleich 400px ist). Soabald sie schmaler als 400px ist, sollen sich die Menüpunkte stapeln und die Schriftgröße auf 1.2em erhöhen. Du siehst also, dass diese Methode der vorigen ähnelt, bei der em und rem mit Media-Abfragen genutzt wurden. Wobei diese Methode jedoch Media Queries durch Element Abfragen ersetzt.

Fazit

Zukunftsorientierte Designer sehen eine Tendenz dazu, dass das reaktionsfähige Web aus 99,9 Prozent Typografie bestehen wird. Um der zunehmenden Komplexität mobiler Geräte gerecht zu werden, liegt unser Fokus auf einfachen, meist auf Schrift ausgerichteten, Layouts. Diese werden schließlich zuerst wahrgenommen und gelesen. Darum ist reaktionsfähige Typografie heutzutage einer der wichtigsten Aspekte beim Responsive Webdesign.

]]>
Jonathan Torke
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines http://t3n.de/news/typografie-responsive-webdesign-2-603627/ 2015-04-03T08:00:50Z
Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger …

Im ersten Teil dieser Artikelserie über im ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger Typografie hinsichtlich der Zugänglichkeit behandelt habe, möchte ich nun verschiedene Möglichkeiten erkunden, wie du flüssige und reaktionsfähige Überschriften für deine Website umsetzen kannst.

Im Grunde gibt es drei Möglichkeiten, um responsive Headlines für deine Website zu erzeugen:

  1. Mit einem jQuery-Plugin
  2. Durch CSS Viewport-Einheiten
  3. Durch Verwendung von Media Queries

1. Mit einem jQuery-Plugin

Es gibt drei ziemlich gute Plugins, mit denen du Überschriften reaktionsfähig gestalten kannst: FitText, BigText und slabText. Diese drei Plugins machen es möglich, reaktionsfähige Überschriften zu erstellen, die sich an die Breite ihres übergeordneten Elements anpassen. Zwei von ihnen möchte ich heir kurz vorstellen.

1.1 slabText

Das slabText-Plugin von Brian McAllister möchte ich wegen seiner Vorteile kurz  hervorheben. Das Plugin teilt die Überschriften in Zeilen, bevor es die Größe der Zeilen verändert, um den verfügbaren Raum zu füllen. Dabei wird die ideale Anzahl von Zeichen pro Zeile errechnet, woraus wiederum die verfügbare Pixelbreite der Schriftgröße berechnet wird. Das Skript verwendet anschließend die ideale Zeichenanzahl, während die Überschrift in Wortgruppen aufgeteilt wird, die dann in separaten Zeilen angezeigt werden.

Reaktionsfähige Überschrift mit slabText Plugin (Bild: pixeltuner.de)
Reaktionsfähige Überschrift mit slabText Plugin (Bild: pixeltuner.de)

Die Einbindung von slabText ist ziemlich einfach. Dabei musst du das Plugin lediglich in deine Seite einfügen, einige auf der Demo-Seite empfohlene CSS-Anpassungen vornehmen und das Plugin zum Schluss über den Head-Bereich deiner Webseite ansprechen.

Hier ist eine Demo, die das slabText Plugin verwendet. Über die oberen Tabs kannst du einen Blick auf den Quell-Code werfen. Der Code ist sehr einfach und selbsterklärend. Betrachte außerdem die Demo in Vollmodus und verändere mal die Größe deines Browserfensters. Du wirst sehen, wie die Textgröße an die Größe des Bildschirms angepasst werden. Und voila! Du hast nun eine responsive Headline, die auf verschiedenen Geräten großartig aussieht.

1.2 BigText

Das BigText Plugin von Zach Leatherman ist ebenso unkompliziert zu nutzen. Dieses Plugin nimmt ein einzelnes Element und verändert den Text innerhalb des untergeordneten divs, um die Breite des Elternelements anzupassen.

Das Markup würde wie folgt aussehen:

<div id="bigtext" style="width: 300px;">
<div>BigText</div>
<div>…</div>
<div>…</div>
<div>…</div>
</div>

Nun brauchst Du nur noch das Plugin in Deine Seite einzubinden und das Elternelement anzusprechen, das den Headline-Text beinhaltet. Die Größe des Headline-Textes wird sich nun verändern, um sich an jede Breite anzupassen:

$('#bigtext').bigtext();

Das Plugin passt die Textgröße auf der Basis der Elementbreite automatisch an, unabhängig der anfänglichen Schriftgröße.

2. Verwendung von CSS Viewport-Einheiten

Eine Ähnliche Wirkung (wie die soeben vorgestellten Plugins) kann auch mit CSS Viewport-Einheiten erreicht werden: vw, vh, vmax, und vmin.

Mit diesen Viewport-Einheiten kannst du sicherstellen, dass dein Text sich immer an die Breite des zugehörigen Containers orientiert. Die Schrift ändert sich im relativen Verhältnis zu diesem Container, dem Viewport (die Größe des Browserfensters). Wenn sich die Größe des Browserfensters ändert, ändert sich auch die Schriftgröße. Das klingt ganz nach den beiden vorigen Plugins, nicht wahr? Der Unterschied dazu ist, dass wir denselben Effekt auch ohne jQuery-Plugins erreichen können, und zwar nur mit Hilfe von CSS.

Leider sind die Ergebnisse von Viewport-Einheiten etwas weniger flexibel als die der Plugins (denn sie passen die Überschriften automatisch an die Breite ihrer Container an), bei der Verwendung von Viewport-Einheiten müsstest du die Änderungen manuell einstellen.

Die Viewport-Prozentlängen sind im Verhältnis zur Größe des ursprünglichen Blocks. Wenn die Höhe oder Breite des Blocks geändert werden, werden sie also entsprechend skaliert.

Lass uns nun zu einem Beispiel kommen, das CSS Viewport-Einheiten verwendet, um die Größe der Überschrift zu ändern. Ähnlich wie bei der vorherigen Demo, kannst du den Code der eingebetteten Demo überprüfen. Stelle beim Betrachten der Demo lediglich sicher, dass dein Browser Viewport-Einheiten unterstützt.

Hier nun das Beispiel, welches eine reaktionsfähige Überschrift Mit CSS Viewport-Einheiten umsetzt:

Reaktionsfähige Überschrift mit CSS Viewport-Einheiten (Bild: pixeltuner.de)
Reaktionsfähige Überschrift mit CSS Viewport-Einheiten (Bild: pixeltuner.de)

 

Du kannst sehen, dass einige Zeilen in der Überschrift sich nicht erweitern, um in die Breite des Containers zu passen. Hierbei ist nämlich kein Algorithmus vorhanden, der die Buchstaben verbreitert und eine Berechnung vornimmt, um die ideale Anzahl von Buchstaben in jede Zeile unterzubringen, bevor die Überschrift in Zeilen unterteilt wird, wie es beim slabText Plugin der vorherigen Demo der Fall gewesen ist.

Mehr über CSS Viewport-Einheiten Falls du mehr über CSS Viewport-Einheiten nachlesen möchtest, empfehle ich dir folgende Artikel:

3. Verwendung von Media Queries

Die letzte und bekannteste Art und Weise, Responsive Headlines zu erstellen, ist durch den Einsatz von Media Queries. Mit unterschiedlichen Formatdefinitionen in CSS wird die Schriftgröße auf unterschiedlichen Bildschirmgrößen zugewiesen. Das Ergebnis dieser Textgrößenänderung ist jedoch nicht so flüssig wie bei den vorherigen Techniken.

Angenommen, du hast eine Formatdefinition für das h1-Element, also für die Überschrift 1. Ordnung, vorgenommen. Dann kannst du mit Hilfe von Medienabfragen (Media Queries) unterschiedliche Formatierungen der Überschrift für verschiedene Bildschirmgrößen zuweisen, wie folgendes Beispiel zeigt:

body {
font-size: 100%; /* Mit einer flexiblen Grunddefinition beginnen. */
}
h1 {
font-size: 2.5em;
}
@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
h1 {
font-size:1.5em;
}
}
@media screen and (max-width: 30em) {
h1 {
font-size:1.2em;
}
}

Fortsetzung

Im nächsten Teil „Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text“ stellen wir uns der letzten Herausforderung, um der zunehmenden Komplexität mobiler Geräte gerecht zu werden. Dazu betrachten wir Fünf Lösungen, um den Body-Text reaktionsfähig zu gestalten. Darunter em- und rem-Angaben anstelle von Pixelwerten und der Einsatz von jQuery-Plugins.

via pixeltuner.de

]]>
Jonathan Torke
Typografie im Responsive Webdesign – Teil 1: So wählt ihr die richtige Schrift http://t3n.de/news/typografie-responsive-webdesign-1-603572/ 2015-04-02T13:46:56Z
Bei einem gelungenen und stimmigen Webdesign sind die Typografie und die allgemeine Schriftgestaltung wichtig. Daher unterstützt diese Artikelserie dich bei der Auswahl der richtigen Schriftart …

Bei einem gelungenen und stimmigen sind die und die allgemeine Schriftgestaltung wichtig. Daher unterstützt diese Artikelserie dich bei der Auswahl der richtigen für dein Webprojekt und zeigt ferner, worauf es beim Einsatz reaktionsfähiger Typografie ankommt. Du erfährst zudem, wie sich die Unterstützung von Webfonts in modernen Browsern nutzen lässt, um Schriftarten nach Wahl für die Auszeichnung von Text zu verwenden. Im ersten Artikel dieser Serie geht es konkret um die Auswahl und Einbindung der richtigen Schrift.

Die Auswahl der richtigen Schrift

Einer der wichtigsten Aspekte beim reaktionsfähigen Webdesign ist reaktionsfähige Typografie. Wenn es um reaktionsfähige Typografie geht, gibt es etwas mehr zu tun als den Container des Textes in seiner Größe zu verändern. Von der Auswahl der Schriftart und Farbe und dem Umsetzen lesbarer Schriftgrößen über Zeilenabstände bis zur Zeilenlänge auf unterschiedlichen Ausgabeformaten – Es gibt mehrere Möglichkeiten, flüssige und reaktionsfähige Texte für deine Website umzusetzen.

Text zugänglich machen

Bevor wir mit den Techniken beginnen, um Texte für unterschiedliche Bildschirmgrößen anzupassen, müssen wir sicherstellen, dass dein Text mit ausreichendem Farbkontrast und einer leicht lesbaren Schrift schnell erfasst und fließend gelesen werden kann. Hierbei gibt es drei Punkte zu beachten, um sicherzustellen, dass dein Text leicht zugänglich und gut lesbar ist:

1. Wähle eine lesbare Schriftart

Wenn du eine Schriftart für deine Website wählst, ist es wichtig, darauf zu achten, eine gut lesbare Schrift für den Hauptinhalt zu wählen. Nicht alle Arten von Schriften eignen sich für den Haupttext. Einige Schriftarten, wie künstlerische Schreibschriften können eine gute Wahl für den Einsatz bei Überschriften sein. Wenn es um die Hauptinhalte geht, solltest du allerdings sicherstellen, stets eine Schriftart zu wählen, die sehr leicht zu lesen ist.

Es gibt eine Menge Schriftarten zur Auswahl. Dienste wie Google Webfonts und Typekit bieten eine große Auswahl von Schriften an. Durch die benutzerfreundliche Umsetzung dieser Dienste, wird dir bei der Entscheidung zur richtigen Schriftart außerdem rasch geholfen.

Darüber hinaus erlaubt dir die CSS3-@font-face-Regel, individuelle Schriften in deine Webseiten einzubinden; mittlerweile mit sehr guter Cross-Browser-Unterstützung und Fallback-Schriften für ältere Browser. Aufgrund der Vielfalt der von den Browsern unterstützten Formate, solltest du mindestens drei Schriftdateien bei der @font-face-Regel berücksichtigen, um die Cross-Browser-Kompatibilität sicherzustellen: EOT, WOFF und Truetype.

@font-face {
font-family: 'antonioregular';
src: url('antonio-regular-webfont.eot?') format('eot'),
url('antonio-regular-webfont.woff') format('woff'),
url('antonio-regular-webfont.ttf') format('truetype');
}

Nachdem du deine eigene Schrift nun deklariert hast, kannst du diese verwenden, so wie du es bereits mit anderen Schriften tust. Dabei solltest du eine Fallback-Schrift für Browser definieren, die deine über die @font-face-Regel definierte Schrift nicht lesen können.

font-family: 'antonioregular', 'Droid Sans', Arial, sans-serif; /* Du kannst mehrere Fall-Back-Schriften hinzufügen */

Beachte, nicht zu viele unterschiedliche Schriftarten für deine Webseiten zu verwenden. Dies kann sich negativ und außerdem verwirrend auf den Leser auswirken, insbesondere für diejenigen mit Leseschwäche oder einem Aufmerksamkeitsdefizit.

Tipps für Schriftkombinationen Joshua Johnson zeigt in einem Artikel auf designshack.net eine Auflistung und Tipps, welche Google Fonts miteinander gut kombinierenDouglas Bonneville behandelt auf Smashing Magazine bewährte Praktiken für Schriftkombinationen.

2. Schriftfarbe in Hinblick auf Barrierefreiheit

Inhalte einer Webseite sind in erster Linie dazu da, um gelesen zu werden. Kontrastarme Schriftfarben können meistens nur sehr mühsam gelesen werden. Vermeide daher große Kompromisse bei der Lesbarkeit deiner Texte. Dies ist nicht nur ein Design-Tipp – das ist eine Notwendigkeit, wenn du Inhalte für das Internet erstellst.

Kontrast zwischen Text und Hintergrund

Bei einem Experiment wurde auf verschiedenen Webseiten eine Untersuchung auf Lesbarkeit durchgeführt. Dieses zeigt die Bedeutung eines ausreichenden Kontrastes zwischen Text und Hintergrund. Ein weiteres Experiment bestätigt, dass die Lesezeit geringer ist, wenn ein hoher Kontrast zwischen dem Text und dem Hintergrund besteht. Mehr Wissenswertes hierzu auf contrastrebellion.com.

Texte sind also viel leichter zu lesen, wenn ein ausreichender Kontrast zwischen dem Text und dem Hintergrund besteht. Um den Kontrastgrad deines Designs zu messen, gibt es mehrere Tools. Contrast-A ist eines dieser Tools, mit dem du geeignete Farbkombinationen finden kannst, unter Beachtung der vom W3C formulierten Richtlinien für die Zugänglichkeit von Webinhalten.

Verschiedene Lichtverhältnisse

Um die Bedeutung der Lesbarkeit von Schrift und Zugänglichkeit zu betonen und auch die Tatsache zu unterstreichen, dass es beim um mehr als nur die Anpassung von Layout an unterschiedliche Bildschirmformaten geht, möchte ich noch kurz darauf hinweisen, dass das W3C ein neues Media Query-Konzept im Media Queries Module Level 4 eingeführt hat. Es handelst sich hierbei um das „Environment Media“ Feature, konkret um die „light-level“ Media Funktion.

Dieses Lichthelligkeits-Feature wird verwendet, um es Designern zu ermöglichen, Stile des Dokuments in Abhängigkeit zum Umgebungslicht des Gerätes anzupassen. Auf diese Weise wird maximale Lesbarkeit von Webinhalten bei mobilen Geräten gewährleistet. Das Gerät des Benutzers muss lediglich mit einem Lichtsensor ausgestattet sein, um diese neue Funktion auszulösen.

Grundsätzlich ermöglicht dir die Medienabfrage für Lichthelligkeit, CSS-Stile innerhalb der @media-Regel einzubinden, so wie du es normalerweise bei bereits bekannten Medienanfragen tust, wenn du neue Stile abhängig von der Bildschirmgröße definierst. In diesem Fall würdest du allerdings neue Stile basierend auf dem Wert des Gerätesensors definieren. Folgende Werte können genutzt werden, um die Leuchtkraft der Umgebung zu bestimmen: dim, normal, washed.

Um den Hintergrund und die Schriftfarbe in verschiedenen Lichtverhältnissen zu verändern, würde der CSS-Code wie folgt aussehen:

@media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
@media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
@media (luminosity: washed) {
body {
background: #ffffff;
}
}

Lass uns jedoch nicht zu sehr ins Detail dieser Medienabfrage für Lichtverhältnisse gehen, schließlich ist es noch ein Entwurf und wird nicht von jedem Browser unterstützt. Ich wollte dir einfach mal zeigen, dass es bei der Gestaltung von reaktionsfähigem Webdesign um mehr geht, als Texte innerhalb ihrer zugewiesenen Layout-Positionen geräteübergreifend anzupassen. Natürlich ist die „light-level“-Medienabfrage in ihrer Funktion nicht nur auf die Anpassung von Schriftfarben in Bezug des Umgebungslichtes beschränkt. Jedoch wird dies wahrscheinlich der offensichtlichste Anwendungsfall für diese Abfrage sein.

Lese-Tipp: Wenn du mehr über die „light-level“-Medienabfrage erfahren möchtest, empfehle ich dir einen Artikel von Jordan Moore.

3. Verwende echten Text statt Text als Grafik

Text kann durch die Sprachsynthesizer in Screenreadern in Schall umgewandelt werden. Text kann auch durch Bildschirmvergrößerung oder Vergrößerungssoftware vergrößert werden – ohne Qualitätsverlust. Dies sind die beiden Hauptgründe, warum die Bereitstellung von Inhalten im Textformat für die Zugänglichkeit so wichtig ist. Obwohl es möglich ist, einen alternativen Text für Grafiken bereitzustellen, ist es nicht möglich, Text in den meisten Grafiken ohne Qualitätsverlust zu vergrößern. Eine Ausnahme: Die Grafik ist vektorbasiert, wie zum Beispiel skalierbare Vektorgrafiken (SVG) oder Flash.

Das ist jedoch eine andere Baustelle potenzieller Probleme bezüglich der Zugänglichkeit von Webinhalten. Wenn du ein reaktionsfähiges Webdesign erstellst, das verschiedenen Geräten und Nutzern gerecht werden soll, solltest du außerdem benachteiligte Nutzer berücksichtigen und sicherstellen, dass sie auf deine Webinhalte ebenfalls leicht zugreifen können.

Fortsetzung

Nachdem wir nun die wichtigsten Punkte von reaktionsfähiger Typografie hinsichtlich der Zugänglichkeit abgedeckt haben, möchte ich mit dir im zweiten Artikel dieser Serie verschiedene Möglichkeiten erkunden, wie du flüssige und Responsive Headlines für deine Website erzeugen kannst.

]]>
Jonathan Torke
Mobile Menüs für den Desktop: Wie Responsive Design die Navigation beeinflusst http://t3n.de/magazin/mobile-menues-fuer-den-desktop-237266/ 2015-03-12T09:49:57Z
Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die Entwicklung von gut nutzbaren Websites. Mit dem Einzug von Responsive Webdesign erblickten viele …

Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die von gut nutzbaren Websites. Mit dem Einzug von erblickten viele neue Navigationsmuster das Licht der Welt und lösten alte Grundsätze und Standards für die Gestaltung ab. Diese Entwicklung beschränkt sich nicht nur auf , sondern findet sich auch zunehmend auf dem Desktop wieder. Ein Blick auf Navigations-Patterns im mobilen Zeitalter und ihren Einfluss auf Desktop-Websites.

Mit dem Einzug von Mobile und Responsive Webdesign wurden Webworker vor neue Herausforderungen bezüglich der Gestaltung ihrer Websites gestellt. Die Navigation blieb davon nicht unberührt. Daraus resultierten einige spannende Ansätze für die Gestaltung mobiler Navigationen, die wir uns im Folgenden genauer anschauen.

Dropdown mit OS-Picker – Weil einfach einfach einfach ist

Ein Dropdown-Menü in der Kopfzeile einer mobilen Site bietet ausreichend Platz, um Seiten oder Kategorien unterzubringen. Hierbei greift man in der Regel auf ein Select-Element zurück. Der Vorteil bei dieser Methode ist, dass kein Styling für den Inhalt des Dropdowns vorgenommen werden muss, da bei der Auswahl das Betriebssystem die Ausgabe des Dropdowns steuert. Auch kommt diese Lösung mit minimalem JavaScript aus. Viele Einträge können die Auswahl aber schnell unübersichtlich und frustrierend machen.

Toggled Navigation – Der Klassiker

Die Toggled Navigation ist die wohl am meisten verwendete Navigationsart auf mobilen Webseiten. Dafür wird meistens eine Leiste im oberen Bereich der Websites positioniert. Diese ist mit einem Button-Element ausgestattet, das bei Betätigung die Navigation ausfahren lässt. Hierbei wird anders als bei klassischen Dropdown-Menüs keine neue Ebene über den eigentlichen Inhalt gelegt, sondern die komplette Webseite um die Länge der Navigation verlängert. Das Bootstrap-Framework beispielsweise hält eine solche Navigationslösung parat.

Multi-Toggle – Für komplexe Menüstrukturen

Das Multi-Toggle-Menü ist oberflächlich betrachtet eine Ansammlung von verschachtelten Akkordeons. Der Benutzer tippt auf die Hauptkategorie und öffnet so die enthaltenen Unterkategorien. Mit Multi-Toggle Menüs können höchst komplexe Navigationen auf kleinstem Raum untergebracht werden. Durch die Kategorisierung können Benutzer schneller ans Ziel kommen. Sobald ausreichend Nutzfläche für die Darstellung der Webseite zur Verfügung steht, kann dieses Pattern zum klassischen Multi-Level-Dropdown-Menü ausgebaut werden. Technisch gesehen sind unbeschränkt viele Ebenen möglich. So kann allerdings schnell eine unüberschaubare Navigationsstruktur entstehen, die statt zum Surfen einzuladen eher frustrierend wirkt.

Slide Navigation – Schick aber aufwendig

Navigationselemente müssen nicht zwingend untereinander angeordnet sein. Kategorien können auf mehrere Ebenen aufgesplittet und durch zusätzliche Bedienelemente oder einen Swipe durchgeblättert werden, um so Unterpunkte der Navigation darstellen zu können. Dieses Pattern bietet eine gewisse Übersichtlichkeit bei einer weiterhin hohen Detailtiefe, ist technisch jedoch etwas aufwändiger umzusetzen.

Mobile Menues für den Desktop 1
Diesel weckt auf dem Desktop die Neugier mit weichgezeichneten Hintergrundbildern, die sich erst beim Mouse-Over zu erkennen geben. Solche Effekte lassen sich leider nicht auf Mobilgeräten wiedergeben, da hier die Maus fehlt. (Screenshot: diesel.com)

Ein minimalistisches Beispiel hierfür liefert Apple mit seinem kürzlich eingeführten Navigations-Balken, der bei kleineren Screens nicht komplett sichtbar ist, aber mit einem Swipe bewegt werden kann. Eine Slide-Navigation muss sich dabei nicht nur auf einen kleinen Balken beschränken und könnte die volle Bildschirmgröße einnehmen, um Inhalte besser in Szene zu setzen.

Mega Dropdown – Schick aber Platzeinnehmend

Das Mega-Dropdown ist eine aufbereitete Abwandlung der Toggled-Navigation, bei der neben einfachen Textlinks auch mit Icons, Bildern oder einer Kombination aus beidem gearbeitet werden kann. Durch die Größe der einzelnen Elemente lassen sich zwar weniger Links auf der sichtbaren Fläche unterbringen als bei einer einfachen Toggled-Navigation, die optische Verbesserung kann diesen Nachteil aber durchaus ausgleichen.

Off-Canvas Flyout – Viel Platz bei einfacher Orientierung

Beim Off-Canvas-Pattern wird die Navigation außerhalb des sichtbaren Bereichs des Displays untergebracht und durch einen Tap auf einen entsprechenden Button ausgefahren. Dabei schiebt sich die Navigation entweder über den eigentlichen Content oder verschiebt diesen bis an den Rand des Bildschirms, sodass die Orientierung in der Webseite weiterhin möglich ist.

Das Off-Canvas-Flyout stellt Designern viel Raum zur Platzierung von Elementen zur Verfügung und bietet so große Gestaltungsfreiheit.

]]>
Ilja Zaglov
Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview] http://t3n.de/news/responsive-webdesign-potenzial-lobacher-597408/ 2015-03-05T12:45:19Z
Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und …

Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und stellen die Darstellungstechniken von Websites vor komplett neue Herausforderungen. Die Zeiten, in denen Websites mit statischen Inhalten für eine fixe Anzeige optimiert wurden, sind längst vorbei. Die Lösung: Responsive Webdesign. Doch was verbirgt sich genau hinter dem viel gebrauchten Hype-Wort der letzten Jahre? Reine Technik oder doch eher ein Prozess?

Patrick Lobacher, Geschäftsführer der +Pluswerk AG
Patrick Lobacher, Geschäftsführer der +Pluswerk AG

Patrick Lobacher dürfte genau darauf Antworten haben. Der Geschäftsführer der +Pluswerk AG, einem der führenden Agenturnetzwerke Deutschlands, ist Autor zahlreicher Fachbücher zu dem Thema und erfahren im Management von Responsive-Webdesign-Projekten. anders und sehr hat den Experten um eine Einschätzung des Themas gebeten.

Redaktion: Vielen Dank, dass du dir Zeit für ein Gespräch genommen hast. Responsive Webdesign – ein geradezu schillernder Begriff. Was ist die Grundidee dahinter?

Patrick Lobacher: Die Grundidee dahinter ist, dass eine Website in allen möglichen Zugangsgeräten (Desktop, Tablet, Mobile, ...) eine hochwertige Benutzererfahrung (User Experience) bietet – heute und in der Zukunft. Dazu muss sich die Website dem Gerät und der Umgebung, in der das Gerät verwendet wird, anpassen. Das wird als „responsive“ bezeichnet. Dabei wird unter dem Begriff deutlich mehr verstanden als die klassische Definition von Ethan Marcotte aus dem Jahr 2010.

Redaktion: Warum sollten Unternehmen heutzutage auf Responsive Webdesign setzen?

Patrick Lobacher: Einerseits ist nur so sichergestellt, dass ein Webangebot auf allen Zugangsgeräten optimal angesehen und genutzt werden kann. Andererseits sorgt ein Vorgehen gemäß Responsive Design für einen besseren Content, bessere Usability und letztlich auch bessere Performance (sofern die Umsetzung gut gemacht ist). Die Conversion steigert sich erheblich und auch Google honoriert Responsive-Webdesign-Auftritte mit einem höheren Ranking.

Redaktion: Was hat es mit dem Content-First-Prinzip auf sich?

Patrick Lobacher: Um einen Webauftritt optimal für alle Zugangsgeräte zu konzipieren, wird man schnell feststellen, dass man sinnvollerweise beim Kleinstmöglichen anfängt und sich dann langsam auf immer größere Geräte steigert. Dabei kann man – je nach Gerät und Geräteklasse – die Funktionalitäten und natürlich auch den Content selbst anreichern.

Man nennt dieses Vorgehen Progressive Enhancement. Geht man so vor, heißt der Startpunkt auch Mobile First. Hier hat man wenig Platz, daher muss dem Content ein besonderes Augenmerk zuteil werden. Somit konzentriert man sich am Anfang eines Responsive-Webdesign-Prozesses immer auf Content First – also auf den Inhalt der kleinstmöglichen Geräteklasse.

Responsive Webdesign: Eine Mischung aus Strategie und Technik. (Screenshot: andersundsehr.com)
Responsive Webdesign: Eine Mischung aus Strategie und Technik. (Screenshot: andersundsehr.com)

Redaktion: Kann man Responsive Webdesign nicht auch später noch nachrüsten?

Patrick Lobacher: Nein, dies ist aus diversen Gründen nicht möglich, beziehungsweise auch nicht sinnvoll. Natürlich kann man eine Website optimieren, sodass diese auf Tablets und Smartphones sichtbar und bedienbar ist – das würde ich persönlich aber nicht als „responsive“ bezeichnen, sondern eben nur als „optimiert“.

So ist klassischer Content eben auf die Betrachtung auf einem Desktop angelegt – sowohl von der Informationstiefe als auch von der Informationsmenge her. Menüs (und andere Navigationselemente) werden meist inflationär verwendet, da „ja genug Platz ist“. Will man zudem die Performance optimal gestalten, muss auch der Quellcode schon initial mit dem Fokus darauf erstellt werden.

Redaktion: Wie verändert sich der Workflow durch Responsive Webdesign?

Patrick Lobacher: Der Workflow muss sich grundsätzlich vom linearen Vorgehen zu einem iterativen, inkrementellen ändern. Früher hat man zuerst ein Design entwickelt und dies mit dem Kunden abgestimmt. Dann hat der Frontend-Entwickler dieses in HTML/CSS umgesetzt und getestet. Nach der Integration in ein CMS hat der Kunde begonnen, den Content einzupflegen.

Das funktioniert aufgrund der Gerätevielfalt und der sich daraus ergebenden Freiheitsgrade nicht mehr. Der Responsive-Design-Workflow enthält daher folgende Schritte: Content-Strategie, Content-Wireframe, Content-Erstellung, Content-Testing, Atomic Design, Linear Design, Prototyping, Device-Testing. Dieser Workflow wird in kleinen Iterationen gegangen und anschließend für die nächsten Elemente erneut durchlaufen, bis das Ergebnis zufriedenstellend ist.

Workflow Responsive Webdesign (Screenshot: andersundsehr.com)
Workflow Responsive Webdesign (Screenshot: andersundsehr.com)

Redaktion: Welche technischen Mittel stehen aktuell zur Verfügung?

Patrick Lobacher: Grundsätzlich gibt es zahlreiche Hilfsmittel, um den Prozess bestmöglich zu begleiten. Angefangen von Tools zum Wireframing (wie Axure, Balsamiq), über Formate zur Content-Erstellung (wie Markdown, AsciiDoc, ...) und Tools zur automatischen Umwandlung in HTML (Pandoc, Jekyll, Dexy, ...) gibt es Hilfsmittel zur Erstellung des Atomic Designs (Patternlab) und zum Testen. Weiterhin existieren vorgefertigte Frameworks, um ein Basis-Grid hinter Responsive Webdesign zu erstellen (Singularity, Foundation, Bootstrap, ...) und auch Anbieter wie Adobe haben die Zeichen der Zeit erkannt und mit Edge Reflow ein leistungsfähiges Tool für den Bereich Responsive Webdesign auf den Markt gebracht.

Redaktion: Ist Photoshop nicht mehr zeitgemäß für Responsive-Webdesign-Projekte?

Patrick Lobacher: Photoshop und ähnliche Tools haben einen entscheidenden Nachteil: Sie erstellen statische Layouts in einem Medium, welches nicht zur Betrachtung im Web vorgesehen ist. Früher war zumindest das Zielformat und das Format des Layouts nahezu identisch – so wurde lange Zeit auf 960 Pixel Breite gestaltet.

Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen – hierfür kann man nicht mehr ernsthaft designen. Zumal auch der Content selbst den Unterschied machen kann – beispielsweise hat eine reale Überschrift verschiedene Längen, sie ist vielleicht sogar zweizeilig, wenn das Display nur klein genug ist.

„Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen.“

 Dann muss entschieden werden, was mit dem Design genau an dieser Stelle passieren soll.

Das alles ist durch statisches Design längst nicht mehr abbildbar. Daher geht man hier – aus Sicht des Designs – einen anderen Weg: Man erstellt ein atomares Design – also zuerst einzelne Elemente, Farben, Schriften und Grundelemente. Diese werden dann sofort im Zielformat – also HTML/CSS/JavaScript umgesetzt und getestet. Erst in diesem Zustand – auch Prototyping genannt – wird das Layout langsam immer kompletter und es funktioniert vor allem. Form follows function ist hier wichtiger denn je.

Redaktion: Welche Testverfahren gibt es und wie werden sie praktisch umgesetzt?

Patrick Lobacher: Grundsätzlich sollte man auf richtigen Geräten testen, da diese oft Bugs besitzen, die man nicht simulieren kann. Da das aber meist sehr aufwändig ist, kann man Tools wie Adobe Edge Inspect verwenden, das es ermöglicht, dass die Website oder die Interaktion auf der Website automatisch an alle angeschlossenen Geräte gesendet wird. Somit hat man eine Vielzahl von Geräten im Überblick.

Ein weiteres Verfahren sind automatisierte Frontend-Tests über zum Beispiel Selenium – hier werden bestimmte User-Journeys (z.B. Menü ausklappen und Seite anwählen, Button klicken, Formular ausfüllen, ...) vordefiniert und dann bei jeder Veränderung des Quellcodes der Website automatisiert getestet. Sobald in einem der Geräte und/oder Browser eine Fehlermeldung aufgetreten ist, wird diese sofort gemeldet. Solche Testverfahren sind natürlich auch im laufenden Betrieb einer Website oder eines Webshops sinnvoll.

Redaktion: Welche Auswirkung haben Responsive-Webdesign-Projekte auf die Gestaltung von Vertragsmodellen?

Patrick Lobacher: Die Vertragsgrundlage muss sich natürlich auch ändern, da in klassischen Verträgen oft als Referenz entweder ein Pflichtenheft und/oder ein Photoshop-Design herangezogen wird, um das „Werk“ (Werksvertrag) ordentlich zu spezifizieren.

„Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden.“

Das kann im Responsive Webdesign natürlich nicht gemacht werden. Man muss also ein Vertragswerk finden, das einerseits den iterativen/inkrementellen Weg abbilden kann und andererseits für beide Vertragspartner ein minimales Risiko festschreibt. Man verwendet hierfür den sogenannten agilen Festpreisvertrag und passt diesen entsprechend dem Projekt an.

Redaktion: Wie viele Breakpoints sind sinnvoll?

Patrick Lobacher: Diese Frage kann man pauschal nicht seriös beantworten. Breakpoints werden immer dann sinnvoll, wenn man größere Änderungen am Layout vornehmen will – man also Content-Choreography durchführen will. Und dies ist immer dann sinnvoll, wenn es der Content verlangt. Der Content bestimmt also die Breakpoints und nichts anderes. Meist wird aber bei der Content-Anordnung auf bewährte Pattern (z.B. Drei-Spalter, Zwei-Spalter) zurückgegriffen.

Daher kann man vage postulieren, dass es sehr wahrscheinlich zu mindestens zwei Breakpoints kommen wird, um große Screens, mittlere und kleine, voneinander zu unterscheiden. Es ist aber auch gut möglich, dass man nur mit einem Breakpoint auskommt oder sogar eine Trennung in Major- und Minor-Breakpoints vornimmt. Am Major-Breakpoint finden dann größere Veränderungen statt und am Minor-Breakpoint eventuell nur kleinere. In der Praxis betrachtet man den Content (der ja zuerst erstellt wird) auf einer kleinen Breite und vergrößert solange die Breite, bis man das Gefühl hat, dass man nun einen Breakpoint benötigt.

Redaktion: Wie ist abschließend gesehen deine Einschätzung: Responsive Webdesign nur ein Hype oder die Zukunft des Web?

Patrick Lobacher: Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden – ähnlich wie Web 2.0 vor ein paar Jahren. Der Prozess und die Technik werden aber die Basis des zukünftigen Webs ausmachen. Die Gerätevielfalt nimmt zu und auch die möglichen Zugangspunkte zum Web. Hier bildet Responsive Design die Basis für eine höchstmögliche User Experience. Zurzeit werden bereits „neue“ Begriffe, wie „adaptive Webdesign“ als Weiterentwicklung von Responsive Webdesign gehandelt – dies drückt aber lediglich aus, dass natürlich auch Responsive Webdesign allumfassend gesehen werden sollte.

Redaktion: Wir danken dir für das Gespräch!

Wer noch mehr Informationen und Hintergründe zum Responsive Webdesign sucht, sollte sich dieses Video anschauen.

via www.andersundsehr.com

]]>
anders und sehr
HTML5 Days 2015: Sechs Workshops von Responsive Webdesign bis asynchrones JavaScript [Sponsored Post] http://t3n.de/news/html5-days-2015-sechs-workshops-590325/ 2015-01-29T09:30:20Z
Anzeige Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten …
Anzeige

Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten deutschsprachigen HTML5-Experten. Im Interview erzählt Christian Wetz was für ihn die spannendsten Entwicklungen im Bereich HTML5 und JavaScript sind.Jens Grochtdreis, Peter Kröner, Thorsten Rinne, Sebastian Springer und Christian Wenz leiten die Workshops. Zusammen mit den parallel laufenden JavaScript Days und AngularJS Days können Teilnehmer aus insgesamt 24 Workshops auswählen.

Themen der HTML5 Days sind Responsive Webdesign, Modulare Webentwicklung mit SAAS, asynchrones JavaScript, Modernisierung von Legacy Applikationen auf HTML5 sowie Kommunikations-APIs von JavaScript und HTML5. Alle Infos finden Interessenten auf www.html5-days.de.

Christian Wenz auf den HTML5 Days 2105

wenz_christian_html5-days-2015-(2)Christian Wenz ist Berater, Trainer und Autor zu Webthemen. Er ist Autor und Koautor von über 100 Büchern (unter anderem "JavaScript: Das umfassende Handbuch"), in zehn Sprachen übersetzt, ASP.NET MVP und ASPInsiders-Mitglied sowie Inhaber verschiedener Microsoft-Zertifizierungen. Er unterstützt seit vielen Jahren Mittelständler und Groβkonzerne in den Bereichen Web-Performance, Web-Security und mobiles Web.

Thomas Wießeckel: Christian, die Kommunikation mit JavaScript war in der Vergangenheit arg eingeschränkt - seit HTML5 sich immer weiter verbreitet, gibt es jedoch Licht am Ende des Tunnels. Was hat sich in den letzten Jahren getan?

Christian Wenz: Eine ganze Menge. JavaScript wurde ja bekannterweise in sehr kurzer Zeit erstellt und so ist es verwunderlich, dass es überhaupt ein Sicherheitskonzept gibt. Für heutige Webanwendungen ist dieses Modell allerdings immer wieder ein Hindernis. Glücklicherweise gibt es alte und neue Workarounds. In Sachen Kommunikation gab es in JavaScript lange Zeit wenig – und das, was es gab, war kaum bekannt. Mit der Einführung von XMLHttpRequest hat sich hier etwas getan, in Verbindung mit den Sicherheitseinschränkungen konnte man viel machen, aber eben nicht alles. Neue Protokolle und Standards und auch performantere Kommunikationsmöglichkeiten sind Aspekte, die viele Web-Applikationen bereichern können. Darum geht es auch bei den HTML5 Days.

Thomas Wießeckel: Einige der von dir genannten Features sind nicht neu - und dennoch nicht sonderlich verbreitet. Woher kommt das deiner Meinung nach?

Wenz: Die am häufigsten eingesetzte Kommunikationstechnologie ist wohl XMLHttpRequest und die reicht in vielen Fällen auch aus. Außerdem gibt es immer mehr Frameworks, die selber zwischen Client und Server die beste Kommunikationstechnologie aushandeln, so dass man nicht mehr notwendigerweise einen Einblick braucht, was im Hintergrund passiert. Das finde ich schade und auch bedenklich, erklärt aber auch, wieso einige der Lösungen einen geringeren Bekanntheitsgrad haben. Das will ich im Workshop auf den HTML5 Days ändern.

Thomas Wießeckel: Nun gibt es für viele Probleme entweder die "richtige" aber mächtige Lösung - und einige Workarounds, zum Beispiel die Nutzung von Local Storage als Kommunikationsmöglichkeit über Tabs hinweg. Welche weiteren spannenden Beispiele kennst du noch?

Wenz: Die Messaging-API von JavaScript ist meiner Meinung nach eines der am meisten unterschätzten Features der Sprache – auch wenn die Schnittstelle selber auch für Webworker Pate stand. Die Verwendung von Web-Storage ist auch ein gutes Mittel für Datenaustausch und -persistenz, weil Cookies für Single-Page-Applications meist nicht der optimale Weg sind.

Thomas Wießeckel: Wie schätzt du diesen Forscherdrang der Entwickler ein - ist das der Schub, den die Browserhersteller benötigen, um alle (offenen) Features endlich umzusetzen?

Wenz: Das ist ein typisches Henne-Ei-Problem. Unterstützt man offene Features zu einem frühen Zeitpunkt, mag das gut fürs Ego sein, aber schlecht für die Browserunterstützung der Anwendung. Andersherum haben Browserhersteller möglicherweise weniger Motivation, Features zu implementieren, die bei der Konkurrenz nur wenig Anwender finden. Ich denke dass heutzutage vieles Framework-getrieben ist – bei aktuellen Browsern wird auf die neuesten Features gesetzt, für ältere Systeme gibt es Polyfills. Das entbindet Entwickler nicht von der Pflicht, sich mit den dahinter liegenden Techniken zu beschäftigen, aber es verbreitert die Zielgruppe der Anwendung.

Thomas Wießeckel: Welches der bestehenden und vielleicht noch kommenden APIs findest du am spannendsten?

Wenz: Spannend finde ich WebRTC, aber bis das wirklich überall funktioniert, wird das noch ein wenig dauern. Ansonsten stelle ich bei Kunden immer wieder fest, dass ein Framework, das standardmäßig WebSockets verwendet und als Fallback-Lösung XMLHttpRequest implementiert, in vielen Anwendungsfällen der beste Ansatz ist.

Thomas Wießeckel: Auf den HTML5 Days hältst du einen Workshop zu den Kommunikations-APIs von JavaScript und HTML5. Was erwartet die Teilnehmer darin?

Wenz: Im Wesentlichen die Themen, die wir bei den vorherigen Fragen schon diskutiert hatten. Der Fokus liegt ein wenig stärker auf den „Unsung Heroes“. Beispielsweise geht es auch um WebSockets, aber nicht als Hauptthema. Dafür diskutieren wir verschiedene Ansätze, die Same-Origin-Policy der Browser zu umgehen, von alten Ansätzen wie JSONP bis hin zu neueren Standards wie CORS. Auch Exoten wie etwa Server-Sent-Events kommen vor, aber prinzipiell ist natürlich alles mit unzureichendem Browser-Support für die Praxis nur wenig relevant.

Erfahre mehr über die HTML5 Days 2015

]]>
t3n Redaktion
Umfangreiches Webdesign-Tool statt einfacher Baukasten: Mit rukzuk baust du Responsive-Websites ohne Coding [Sponsored Post] http://t3n.de/news/responsive-webdesign-rukzuk-582303/ 2014-12-04T09:30:25Z
Anzeige Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie Webdesigner, Freelancer, Agenturen und Unternehmen. Durch ein eigenes CMS und eine große Bandbreite an …
Anzeige

Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie , Freelancer, Agenturen und Unternehmen. Durch ein eigenes und eine große Bandbreite an Features kann man mit rukzuk ganz und gar codeless auch professionelle Webseiten gestalten.

Während die meisten Homepage-Baukästen vor allem auf simple Bedienbarkeit und überschaubare Funktionen setzen – zum Beispiel für Blogger – braucht es im professionellen Bereich schon ein sehr viel umfangreicheres Repertoire an Möglichkeiten. Für diese Zwecke hat ein junges Entwickler-Team aus Konstanz ein Webdesign-Tool auf den Markt gebracht, das in Umfang, Funktionalität, Flexibilität, Individualität und Erweiterbarkeit genau für diesen Zweck konzipiert ist. Mit rukzuk lässt sich so auch eine aufwendige Unternehmensseite ohne Code-Kenntnisse gestalten, verwalten und publizieren.

responsive webdesign 1

Maßgeschneidert und individuell

Das Besondere an der neuen Lösung ist die Kombination aus innovativem Design-Editor und einem neu entwickelten CMS. Der Design-Editor ist dabei das Herzstück: Ähnlich zu Photoshop gibt es hier viele Werkzeuge und Einstellungsmöglichkeiten. Ist man mit der Bedienung von rukzuk vertraut, kann man Websites sehr schnell und ohne Programmierkenntnisse entwickeln. Websites werden visuell im Browser gestaltet, Schriftrendering, Abstände und Funktionen wie Slider oder Animationen können dabei direkt im Editor getestet werden.

Der klassische Transformationsschritt von einer PSD-Datei in HTML/CSS/JS entfällt ganz – das spart Zeit und Geld.

Visual Responsive-Webdesign

Mit rukzuk werden zudem „echte“ Responsive-Websites erstellt. Die Website wird nicht nur, wie bei vielen klassischen Homepage-Baukästen, automatisch in eine mobile Version übersetzt. Mittels definierbarer Breakpoints wird das Verhalten der Website für jede beliebige Auflösung individuell angepasst.

resposive webdesign 2

Mit sogenannten Modulen wird per Drag & Drop ein Layout angelegt, das die Grundlage für die Seiten einer Website bildet. Derzeit stehen über 50 Module und Styles zu Verfügung. Vom Grid, das meistens als Grundlage eines Layouts dient, bis hin zur dynamischen Navigation, Slider, Lightbox, iFrame, dynamische Listen, SVG-Grafiken und vielen weiteren. Jedes Modul kann wiederum mit Styles pixelgenau gestaltet werden, hier stehen zum Beispiel Rahmen, Schatten, Animationen, Hintergründe, Google Fonts zur Verfügung. Es gibt Module für jeden erdenklichen Designwunsch und es kommen stetig neue hinzu. Derzeit arbeitet das Team unter anderem an einem Shop-Modul und einem Parallax-Modul.

Auch selbst entwickelte Module und Styles lassen sich in rukzuk integrieren. Die API-Dokumentation und Beispielmodule hat das Team auf developers.rukzuk.com und GitHub veröffentlicht.

Integriertes Content Management & Webhosting

Neben dem Design-Editor ist das selbst entwickelte CMS ein Kernbestandteil des Tools. Hier geht es vor allem darum, Websites effizient zu entwickeln und zu verwalten und dem Kunden eine einfache Pflege der Seiteninhalte zu ermöglichen. Dafür können vom Designer Bearbeitungsrechte für jedes einzelne Element einer Seite vergeben werden.

Der Vorteil für den Kunden: der Webdesigner gestaltet mit Modulen und Styles individuelle „Page Blocks“, welche CMS-Bausteine darstellen, die der Kunde auf seinen Seiten einfügen und bearbeiten kann. So wird sichergestellt, dass die Inhaltsseiten immer gestaltungskonform bleiben.

resposive webdesign 3

Mit wenigen Klicks kann die Website auf den rukzuk-Servern kostenlos veröffentlicht werden. Wer möchte, kann seine komplette Website aber auch herunterladen oder per FTP/SFTP-Upload auf externen Servern hosten. Diesen Service findet man in der Form bei keinem anderen Anbieter. Auch die Verbindung zur eignen Domain ist kein Problem.

SaaS Lösung mit individuellen Paketen

Rukzuk ist eine SaaS Lösung und wird im Abo-Modell angeboten. Zur Auswahl stehen verschiedene Pakete, vom Einzelpaket bis zur Agenturlösung mit 50 und mehr Websites. Man kann rukzuk völlig kostenlos testen. Erst wenn man Websites veröffentlichen möchte, muss man sich für ein kostenpflichtiges Paket entscheiden.

Ab dem Freelancer-Paket ist auch ein Transfer der Website direkt zum Kunden und auf dessen Rechnung möglich.

Das Tool kann kostenlos ohne zeitliche Beschränkung getestet werden.

Jetzt kostenlos testen

]]>
t3n Redaktion
Die 10 beliebtesten Artikel der Woche: Visitenkarten-Vorlagen, PayPal deaktiviert SSL 3.0 und Basics des Responsive Webdesign http://t3n.de/news/10-beliebtesten-artikel-woche-54-580448/ 2014-11-22T09:00:19Z
In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

1. Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Unser Artikel: Die Basics des Responsive Webdesign in 9 schicken GIFs

2. 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

Visitenkarten haben auch und vielleicht gerade im Zeitalter der Sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch in diesem Artikel vorstellen.

Unser Artikel: 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

3. Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

Nicht nur Google-Nutzer hinterlassen einige Daten im Netz – um die soll es hier aber gehen: Wir kuratieren sechs Links, die euren digitalen Fußabdruck aufzeigen.

Unser Artikel: Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

4. Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

Mit einer Kladde, die aus analogen Papierskizzen digitale Vektorgrafiken macht, will der italienische Notizbuchanbieter Moleskine die Designer-Herzen höher schlagen lassen. Was sie kann, was sie kostet und ob's sie noch rechtzeitig vor Weihnachten gibt, erfahrt im Artikel.

Unser Artikel: Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

5. PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

PayPal im Einsatz? Dann sind vielleicht Updates nötig, um den Dienst auch nach dem 3. Dezember anbieten zu können. Definitiv betroffen sind Oxid, xt:Commerce und Prestashop. Alle Information und die notwendigen Maßnahmen in der Übersicht.

Unser Artikel: PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

6. Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

Die Macher von Startup Edition – einem wöchentlichen Newsletter mit hilfreichen Artikeln für Gründer – haben ein kostenloses E-Book veröffentlicht. Mit dem Buch wollen sie eine umfangreiche Wissenssammlung für die Startup-Szene abliefern.

Unser Artikel: Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

7. Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

Trennung nach zehn Jahren: Anstatt die Partnerschaft mit dem Suchmaschinenriesen zu verlängern, schließt der Browser-Anbieter in den USA einen Fünf-Jahresvertrag mit Yahoo ab. In anderen Ländern bleibt Google noch erhalten.

Unser Artikel: Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

8. Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

Google zeigt ab sofort in den Suchergebnissen an, ob eine Website für mobile Nutzer optimiert ist. In Zukunft könnte die „Mobile Friendliness“ sogar zum Ranking-Faktor avancieren.

Unser Artikel: Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

9. Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

Was kommt nach dem Smartphone? Diese Frage hat Nokia auf dem Slush-Festival in Helsinki beantwortet und das neueste Produkt des finnischen Konzerns präsentiert.

Unser Artikel: Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

10. Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

Seit Steve Jobs verstorben ist, fragen sich viele Menschen, wer aus dem großen Schatten des iBoss heraustritt und zur symbolischen Führungsfigur des Silicon Valleys wird. Unser US-Korrespondent Andreas Weck hat da einen klaren Favoriten: Elon Musk.

Unser Artikel: Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Die Basics des Responsive Webdesign in 9 schicken GIFs http://t3n.de/news/basics-responsive-webdesign-9-578560/ 2014-11-15T07:50:06Z
Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Wir zeigen euch die wichtigsten Prinzipien des – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Responsive Webdesign: Früher war alles leichter

Früher war alles einfacher: Webdesigner konnten sich an festen Größen und Standards orientieren und ihre Projekte entweder auf die Desktop-Ansicht oder das mobile Internet ausrichten. Diese Zeit ist vorbei – wer möchte, dass Nutzer egal an welchem Ort und egal, welches Endgerät sie nutzen, sorgenfrei die eigenen Inhalte konsumieren können, muss sich mit Responsive Webdesign auseinandersetzen. Und das ist manchmal gar nicht so einfach.

Sandijs Ruluks von Froont. (Bild: Twitter)
Sandijs Ruluks von Froont. (Bild: Twitter)

Sandijs Ruluks kennt das: Der Grafikdesigner aus Riga bezeichnet sich selbst als „Designer, der aus der Print-Welt in die Welt des Webs gekommen ist.“ Auch er hat sich die neuen Denk- und Gestaltungsmuster zunächst hart erarbeiten müssen. Zusammen mit Freunden hat er vor Kurzem Froont gegründet, eine Design-Plattform, auf der Webdesigner direkt im Browser arbeiten und mit anderen Designern kollaborieren können. Auf dem Froont-Blog findet sich auch das gemeinsam verfasste „Open Web Design Manifesto“.

Für alle, die ebenfalls manchmal Schwierigkeiten damit haben, das Responsive-Design-Konzept zu verstehen, hat Ruluks neun GIFs erstellt, die die wesentlichen Prinzipien einfach und schnell veranschaulichen. Freundlicherweise hat er sie uns zur Verfügung gestellt.

1. „Responsive Webdesign“ versus „Adaptive Webdesign“

Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. „Die beiden Ansätze ergänzen sich, daher gibt es hier kein ‚richtig oder falsch‘“, schreibt Ruluks. Die Unterschiede verdeutlicht das erste GIF:

 

responsive_webdesign_adaptive_webdesign

2. Der Flow

Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.

 

04_flow-vs-static-2

 

3. Relative Einheiten

Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an, wie das nächste GIF zeigt:

 

 

responsive_webdesign_prinzip_relative_einheiten

4. Breakpoints

Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. „Aber nutzt Breakpoints mit Umsicht“, warnt Ruluks, „wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen“.

 

03_with-breakpoints-vs-without-breakpoints-1

 

5. Maximal- und Mindestwerte

Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.

 

07_max-width-vx-no-max-width-1

 

6. Verschachtelte Objekte

Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen. Das folgende GIF veranschaulicht das Container-Prinzip:

 

05_nested-vs-not-nested-1

 

7. „Mobile First“ und „Desktop First“

Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? „Technisch gesehen gibt es keine großen Unterschiede. Leg los und schau, welcher Ansatz besser für dich funktioniert“, so Ruluks.

 

08_desktop-first-vs-mobile-first-3

8. Webfonts und Systemschriften

Die Wahl der eingebetteten Schriften kann einen Einfluss auf die Ladezeiten der Webseite haben. Während es Webfonts zwar in viel mehr Varianten gibt und sie eine Seite sehr schön individualisieren können, werden die in den Betriebssystemen der Nutzer vorinstallierten „System Fonts“, so Ruluks, „schnell wie der Blitz“ angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.

 

06_system-fonts-vs-webfonts-1

 

9. Bitmaps und Vektoren

Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle Browser unterstützen SVG-Formate. „Wählt also mit Bedacht“, so das Resümee von Sandijs Ruluks.

 

09_vectors-vs-images-1

Hier geht's zum Original-Beitrag „Nine Basic Principles of Responsive Webdesign“ von Sandijs Ruluk auf dem Froont-Blog. Hilfreich für euch ist vielleicht auch unsere Artikelreihe zum Einstieg in flexible Projekte mit Responsive Webdesign.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp