Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2015-04-22T08:33:50Z t3n Redaktion http://t3n.de/tag/webdesign So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 3) http://t3n.de/news/schoen-webdesign-ui-schmankerl-teil3-606139/ 2015-04-22T08:33:50Z
Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort …

Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort inspirierende UX/UI-Schmankerl, von denen ihr euch was abschauen könnt. Kennt ihr das auch? Einige Websites fühlen sich irgendwie besser an als andere – hier ein Autocomplete und dort wird ein Klick gespart. In unserer neuen Serie zeigen wir euch geniale Lösungen für gängige UI-Probleme, die ihr so noch nicht gesehen habt. Denn: Gutes UI-Design sieht man nicht.

Unsere liebsten UI-Schmankerl

Bildschirmfoto 2015-04-21 um 16.13.54

Dropbox wartet beim Registrierungsprozess solange, bis die Animation bereits vollständig geladen wurde. Erst danach wird der CTA aktiviert – somit wird sichergestellt, dass der Nutzer wenigstens die Chance hatte, die Grundfunktion von Dropbox zu verstehen.

Bildschirmfoto 2015-04-21 um 16.17.34

Ein weiters Schmankerl, dass Dropbox liefert ist, dass eine Information im Hilfebereich angezeigt wird, die darauf hinweist wie gelöschte Dateien wiederhergestellt werden können. Diese Information erscheint aber nur dann, wenn ihr davor größere Datenmengen aus euerer Dropbox gelöscht habt.

Screen Shot 2015-01-30 at 3.36.44 PM

Wenn sich in eurem Slack-Channel Mitarbeiter aus verschiedenen Zeitzonen befinden und ihr versucht über @channel alle gleichzeitig zu kontaktieren, dann blendet Slack einen Hinweis ein, der euch auf eventuell schlafende Kollegen aufmerksam macht.

Bildschirmfoto_2015-04-21_um_16_36_08

Evernote ändert die Datumsformatierung eurer Notizen – abhängig davon, wie breit das anzuzeigende Fenster wirklich ist. Eine elegantere Lösung, als nur das Datum zu beschneiden. Auf voller Breite wird sogar die Uhrzeit der gespeicherten Notiz angezeigt.

Bildschirmfoto 2015-04-21 um 16.51.04

Auch Evernotes WebClipper hat ein Schmankerl zu bieten. Nutzt ihr das Browser-Plugin häufiger, dann empiehlt euch der Clipper, ganz automatisch, das passendste Notizbuch für aufgenommene Clips. Ein Feature, das ich selbst täglich zu schätzen weiß, weil es mir ein Dropdown-Menü und dann das Tippen nach dem richtigen Notizbuch spart.

Bildschirmfoto 2015-04-21 um 16.53.57

Shopify errät euren Standort anhand der IP-Adresse. Praktisches Feature bei der Registierung eines Shops. Darüber hinaus, steht diese Funktion auch Kunden eines Shops zur Verfügung, nämlich beim Checkout-Prozess.

Bildschirmfoto 2015-04-22 um 09.35.07

Der Sharing-Dienst Buffer will bei einer Beschwerde nicht wissen, um welche Art es sich handelt, sondern wie hoch dein Frustrationslevel ist. Spitze für das Anwendererlebnis, eine Herausforderung für den Support.

Wenn euch diese UI-Schmankerl gefallen haben: Hier geht es zurück zum zweiten Teil.

Wo habt ihr euch das letzte mal gedacht: „Hm, so hätte ich das auch lösen können.“? Oder welche Finesse habt ihr entdeckt?

]]>
Mario Janschitz
CSS- und HTML5-Templates: 6 Quellen für dein nächstes Webprojekt http://t3n.de/news/css-html5-templates-quellen-605578/ 2015-04-20T08:45:56Z
Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt …

Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt werden. Einige Template-Seiten bieten zudem Support für einen schmalen Taler an.

1. Templated

Bildschirmfoto 2015-04-17 um 13.42.41
(Screenshot: templated.co)

Auf Templated findet ihr über 800 kostenlose CSS- und HTML5-Templates, die unter einer Creative-Commons-Lizenz veröffentlicht wurden. Die können auch für kommerzielle Zwecke genutzt werden, sofern sichtbar Credits angegeben sind.

Zur Website

2. Pixelarity

HTML5 CSS Templates 9
(Sreenshot: pixelarity.com)

Über 50 moderne Templates findet ihr bei Pixelarity. Die Templates sind mit und gebaut und laufen unter einer Creative-Commons-Lizenz. Pixelarity kostet 19 Euro für drei Monate und bietet unbegrenzten Zugriff auf 58 Templates inklusive Support. Die Templates können auch nach Ende der Laufzeit weiterverwendet werden – nur der Support endet dann.

Zur Website

3. html5up

HTML5 CSS Templates 8
(Screenshot: html5up.net)

Html5up bietet 29 kostenlose Templates direkt zum Download. Sie laufen ebenfalls unter der Creative-Commons-Lizenz.

Zur Website

4. Themeforest

HTML5 CSS Templates
(Screenshot: themeforest.net)

Die Templates auf Themeforest sind zwar nicht kostenlos, dafür ist die Auswahl enorm. Mehr als 6.000 HTML5-Themes findet ihr hier. Über die Sidebar könnt ihr die Suche unkompliziert eingrenzen. Die Preise starten bei fünf Euro.

Zur Website

5. OS Templates

HTML5 CSS Templates 2
(Screenshot: os-templates.com)

Bei OS-Templates findest du eine Vielzahl von kostenlosen Templates für Unternehmen, Online-Shops oder Blogs. Vor allem findest du hier aber auch über hundert HTML-Basic-Templates. Die Richtlinien für die Credits bei der Nutzung von kostenlosen Templates findets du hier.

Zur Website

6. w3layouts

HTML5 CSS Templates 4
(Sreenshot: w3layouts.com)

Die Templates bei w3layouts.com sind in mehr als 30 Kategorien unterteilt und kostenlos. Mit einer Spende ab zehn Dollar kannst du jedoch Backlinks zu w3layouts.com ausschalten. Die Lizenzbedingungen findest du hier.

Zur Website

Viele weitere Template-Quellen findest du auf unserer Themen-Seite „Templates“.

]]>
Melanie Petersen
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 Typografie im Responsive Webdesign 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 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
Spaß mit Scrum: Startup veröffentlicht quelloffenes Kartenspiel http://t3n.de/news/scrum-planungspoker-karten-projektmanagement-602314/ 2015-03-26T09:51:52Z
Planungspoker ist ein beliebtes Mittel zur Aufwandsschätzung. Jetzt hat ein Startup ein sehr schickes Scrum-Kartendeck für diesen Zweck erstellt und unter der Creative-Commons-Lizenz veröffentlicht.

Planungspoker ist ein beliebtes Mittel zur Aufwandsschätzung. Jetzt hat ein ein sehr schickes Scrum-Kartendeck für diesen Zweck erstellt und unter der Creative-Commons-Lizenz veröffentlicht.

Scrum: Planungspoker zur Aufwandsschätzung

Beim Planungspoker (auch Scrum-Poker genannt) geht es darum, den Aufwand für ein geplantes Feature zu schätzen. Wie der Name bereits andeutet, bedient ihr euch dabei eines speziellen Kartendecks. Darauf befinden sich Zahlenwerte. Je höher der Wert, desto höher der geschätzte Aufwand. Ziel ist es, dass alle Teammitglieder eine Schätzung abgeben. Nach Abklärung genereller Fragen zu der geplanten Funktion muss jedes Teammitglied eine Karte mit seiner Schätzung verdeckt vor sich ablegen. Anschließend sollten die Karten möglichst zeitgleich aufgedeckt werden.

Die Idee dahinter: Durch das zeitgleiche Aufdecken soll niemand durch den Schätzwert eines Kollegen beeinflusst werden, um so eine möglichst realistische Schätzung abzugeben. Kann ein Teammitglied den Aufwand partout nicht einschätzen, kann er oder sie auch eine Fragezeichenkarte ablegen. Außerdem gibt es im Regelfall auch eine Karte, auf der sich eine Kaffeetasse befindet. Sie zeigt an, dass jemand eine Pause braucht. Nach dem Aufdecken können die Teammitglieder ihre Schätzungen untereinander diskutieren.

Scrum: So hübsch kann Planungspoker aussehen. (Foto: Redbooth)
Scrum: So hübsch kann Planungspoker aussehen. (Foto: Redbooth)

Projektmanagement mit Scrum: Startup veröffentlicht schickes Planungspoker-Kartendeck

Es gibt verschiedene Hersteller, die spezielle Kartendecks für diesen Einsatzzweck herstellen. Die meisten davon sind zwar funktional, letztlich aber nicht sonderlich hübsch. Das kalifornische Startup Redbooth schien mit dem Design der verfügbaren Kartendecks ebenfalls nicht zufrieden und hat daher ein eigenes Planungspoker-Kartenspiel entworfen. Damit auch andere Unternehmen etwas von den schicken Karten haben, hat Redbooth die Karten unter der Creative-Commons-Lizenz CC BY 3.0 veröffentlicht.

Wer möchte, kann sich die Scrum-Poker-Karten von GitHub herunterladen. Die Karten stehen dort wahlweise im PNG- oder im SVG-Format zum Download bereit. Ihr könnt sie also entweder selbst Ausdrucken oder bei bedarf eine Druckerei dafür engagieren. Letzteres ist vermutlich sinnvoller, wenn ihr möglichst hochwertige Karten haben wollt. Das ist zwar kostspieliger, als ein normales Kartenspiel oder eine entsprechende App einzusetzen, dafür habt ihr bei eurem nächsten Planungsmeeting aber auch deutlich hübschere Karten zur Verfügung.

Wer sich mit der agilen Methode zum Projektmanagement überhaupt nicht auskennt, sollte einen Blick auf unsere Scrum-Einführung werfen.

via news.ycombinator.com

]]>
Kim Rixecker
t3n sucht freie Autoren (m/w) für das Ressort Design http://t3n.de/news/t3n-sucht-freie-autoren-design-602117/ 2015-03-25T14:45:37Z
Du willst auf freier Basis schreiben, hast einen guten Stil und (Web)Design gehört zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie Autoren zur …

Du willst auf freier Basis schreiben, hast einen guten Stil und (Web)Design gehört zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie Autoren zur Unterstützung unseres Design-Ressort.

Du bist Spezialist für (Web)Design und Usability? Die gängigen Tools und neuesten Trends kennst du aus dem Effeff? Über Farbenlehre weißt du genauso gut Bescheid wie über Homepage-Baukästen oder CMS? Vielleicht hast du ja Lust, für t3n.de zur Feder zu greifen!

Uns faszinieren neue Technologien, das Web und digitale Geschäftsmodelle. Darüber schreiben wir im t3n Magazin und auf t3n.de. Mit viel Liebe zum Detail. Ab sofort suchen wir Autoren oder Autorinnen auf freier Basis für unser Ressort Design.

Als freier Autor oder freie Autorin verfasst du regelmäßig Beiträge für t3n.de und bringst eigene Themenvorschläge ein. Regelmäßig heißt: Du kommst täglich dazu, für uns News, Trendstücke oder nutzwertige Tipps und Tricks zu verfassen.

Wir freuen uns auf deine Bewerbung, wenn ...

  • ... du erste journalistische Erfahrungen und eine gute Schreibe hast.
  • ... du langfristig und auf regelmäßiger Basis für uns schreiben willst.

Bei Interesse freuen wir uns auf deine Bewerbung unter jobs@yeebase.com. Dein Ansprechpartner ist Florian Blaschke.

]]>
t3n Redaktion
Der beste Monitor für Webdesign? So findest du ihn http://t3n.de/news/beste-monitor-fuer-webdesign-601869/ 2015-03-25T07:13:14Z
Der beste Monitor für Webdesign – gibt es den überhaupt? Unser Ratgeber zeigt, worauf ihr beim Kauf achten solltet.

Der beste Monitor für – gibt es den überhaupt? Unser Ratgeber zeigt, worauf ihr beim Kauf achten solltet.

Grafikdesigner, Gamer, Webdesigner oder „ganz normaler“ Nutzer: Die Anforderungen an einen Monitor sind ganz unterschiedlich. Während die einen großen Wert auf schnelle Reaktionszeiten legen, kommt es den anderen eher auf das Aussehen des Screens oder die Auflösung an. Selbst für Webdesigner dürfte es schwer werden, ein einheitliches Anforderungsprofil an eines der für sie wohl wichtigsten Arbeitsgeräte zu definieren.

Die Anforderungen an einen Monitor sind von Webdesigner zu Webdesigner unterschiedlich. (Foto: flickr / Sebastiaan ter Burg)
Die Anforderungen an einen Monitor sind von Webdesigner zu Webdesigner unterschiedlich. (Foto: flickr / Sebastiaan ter Burg)

Allgemeingültigkeit hat nur der Ratschlag, nicht in den nächsten Elektronikgroßmarkt zu wandern und den günstigsten Monitor mitzunehmen. Macht man sich als Webdesigner auf die Suche nach dem für einen selbst am besten geeigneten Monitor, kann es hilfreich sein, sich die folgenden Fragen zu stellen.

Der beste Monitor für Webdesign?

Der beste Monitor für Webdesign bietet freilich eine möglichst hohe Auflösung und punktet auch sonst in allen relevanten Performance-Bereichen. Und dass die neueste Display-Technik verbaut ist, versteht sich ja wohl von selbst. Ein besonders für Webdesign geeigneter Monitor ist farbecht und bietet umfassende Möglichkeiten zur Kalibrierung. Je größer der Screen, desto besser. Außerdem zeichnet sich ein vorzüglicher Monitor durch viele Zusatzfeatures aus und kostet so viel wie ein Kleinwagen der gehobenen Mittelklasse.

Ist das wirklich so?! In den seltensten Fällen dürfte die oben genannte Kombination an Eigenschaften wirklich den perfekten Monitor für Webdesigner beschreiben. Doch was zählt dann?

Welches Panel eignet sich?

Bei Monitoren kommen unterschiedliche Technologien zum Einsatz. Die meisten modernen Displays fallen in eine von vier Kategorien: TN (Twisted Nematic), VA ( Vertical Alignment), IPS (In-Plane-Switching) und PLS (Plane-Line-Switching).

Bei den meisten Displays handelt es sich heute um Twisted-Nematic-Panels. Diese Monitore sind preisgünstig und verfügen über gute Reaktionszeiten. Dafür sind sie nicht sonderlich genau und neigen zu Verzerrungen. Damit eignen sich TN-Monitore in der Regel nur bedingt für professionelle Webdesigner. Etwas besser bei der Farbqualität, dem Blickwinkel und den weiteren Aspekten schneiden VA-Panels ab. Entsprechend sind diese Displays auch teurer als Twisted-Nematic-Panels.

Designer, die großen Wert auf Farbqualität und vom Blickwinkel unabhängige korrekte Darstellung legen, sollten sich Bildschirme mit IPS- oder PLS-Panel ansehen. IPS-Panels sind zwar recht kostspielig, aber dennoch oft erste Wahl für Designer. Noch ein wenig teurer, dafür aber in der Regel mit noch mehr Features ausgestattet, sind PLS-Bildschirme.

Spielt die Größe eine Rolle?

(Foto: Apple)
Der beste Monitor für Webdesign: Die richtige Größe ist nicht nur eine Preisfrage. (Foto: Apple)

Größer ist immer besser? Lassen sich doch mit zunehmender Bildschirmdiagonale mehr Details eines Designs erkennen? Eine solche Antwort greift zu kurz, denn es kommt in erster Linie auch auf die Art der Projekte an, die ein Webdesigner in der Regel in der Pipeline hat. Bei der Frage nach der richtigen Display-Größe spielen allerdings auch Aspekte wie beispielsweise die Schreibtischgröße eine nicht unerhebliche Rolle.

Kaufwillige Designer sollten irgendwo bei 27 Zoll anfangen und dann entscheiden, ob es eine Nummer kleiner oder größer sein soll. In den meisten Fällen reichen 27 Zoll aber aus. Diese Monitorgröße ist darüber hinaus nicht nur so dimensioniert, dass sie auf den meisten Schreibtischen Platz findet, sondern sie reißt in der Regel auch kein riesiges Loch in das Budget.

So viele Pixel wie möglich?

Ähnlich wie bei der Größe hört man auch bei der Auflösung häufig ein „Mehr ist besser!“. Mehr Pixel wirken sich in größerem Detailreichtum aus. Mittlerweile nennen viele Nutzer ein Gerät ihr Eigen, das eine deutlich höhere Auflösung als der herkömmliche HD-Fernseher bietet. Wer Designs erstellt, die beispielsweise auf einem Retina-Display oder anderen Screens, die Pixel im Überfluss bieten, betrachtet werden, sollte auch über ein entsprechendes Arbeitsgerät in Form eines hochauflösenden Monitors verfügen.

Wie hoch die Auflösung genau sein muss, kann nur jeder Webdesigner für sich selbst beantworten. Ultra-HD-Displays bieten 3.840 x 2.160 Pixel, während das typische Full-HD-Panel auf 1.920 x 1.080 Pixel kommt. Irgendwo dazwischen liegt Wide-Quad-HD mit 2.560 x 1.140 Pixeln.

Matt oder „glossy“?

Wer schon mal ein Design auf einem matten Display mit dem selben Design auf einem „glossy“ Screen verglichen hat, weiß, dass sich unter Umständen ein erschreckender Unterschied offenbart. Der mag zwar durch eine Kalibrierung als Makulatur erscheinen, aber das sollte man in jedem Fall im Hinterkopf behalten, wenn man sich für die eine oder andere Art Monitor entscheidet.

Viel wichtiger sind bei dieser Frage aber ohnehin ergonomische Überlegungen, denn ein nicht matter Screen sollte wirklich nur dann zum Einsatz kommen, wenn der Arbeitsplatz recht dunkel ist, beziehungsweise wenn kein direktes Licht auf den Monitor fällt. Die Reflektionen auf einem glossy Display können nicht nur Webdesigner wahnsinnig machen.

Sind Farbskala und Kalibrierung nur was für Print und Fotos?

Grafikdesigner, die vornehmlich mit Printprodukten zu tun haben, und Fotografen legen naturgemäß großen Wert darauf, dass Graustufen und Farben auf dem Monitor möglichst exakt so aussehen wie in gedrucktem Zustand. Außerdem muss der Monitor für diese Berufsgruppen in der Regel ein möglichst großes Farbspektrum bieten. Sollte dir das als Webdesigner ebenfalls Kopfzerbrechen bereiten? Jein. Zumindest aber solltest du diese Aspekte nicht völlig außer Acht lassen.

Das t3n Magazin: Wir setzten auch in Zukunft auf die gedruckte Version unseres Magazins.
Wer wie unsere Grafiker auch mit Printrpodukten zu tun hat, sollte beim Monitorkauf noch genauer hinsehen. (Foto: t3n)

Nicht ganz so wichtig ist die Farbskala – auch wenn viele Designer dem Spektrum der darstellbaren Farben übermäßige Bedeutung beimessen. Wer in erster Linie mit Webdesign und nicht mit Print beschäftigt ist, kann diesen Aspekt getrost vernachlässigen. Immerhin spielt es keine Rolle, wie grandios viele unterschiedliche Farben euer Monitor darstellen kann. Viel wichtiger ist, was die Monitore der Nutzer anzeigen. Und das ist in der Regel nicht das Adobe-RGB-Spektrum und schon gar nicht der Wide-Gamut-RGB-Farbraum. Die meisten handelsüblichen Monitore sind auf sRGB ausgerichtet – das sollte entsprechend auch die Mindestvoraussetzung für euren Monitor sein.

Bei der korrekten Darstellung von anzeigbaren Graustufen und Farben sollten auch Webdesigner weniger Kompromisse eingehen. Wer Wert auf höhere Farbqualität legt, sollte nach Monitoren mit einer hohen LUT-Nummer (LookUp-Table) suchen. Wer auch mit Printprodukten in Berührung kommt und besonderen Wert auf die Farbqualität legt, sollte sich die teuren AH-IPS-Panels (Advanced-High-Performance-In-Plane Switching) ansehen und darauf achten, dass der entsprechende Screen über einen hohen LUT-Wert verfügten (beispielsweise 14-bit).

Ob ihr euch für einen Monitor mit eingebauter Kalibrierung oder eine externe Dritthersteller-Lösung (Hardware oder Software) entscheidet, ist in erster Linie eine Preisfrage. In jedem Fall solltet ihr auch über die Qualität eurer Grafikkarte nachdenken. Derartige Überlegungen würden den Umfang dieses Artikels allerdings sprengen.

Welche Anschlüsse und Zusatzfeatures?

Zusatzfeatures kosten extra. So einfach ist das. Daher sollte man sich nicht nur als Webdesigner überlegen, ob man Extras wie eine schnelle Reaktionszeit, einen TV-Tuner, eine eingebaute Webcam oder Touchscreen-Funktionalität braucht. Ein Feature, auf das ihr nicht verzichten solltet, ist die Farbkalibrierung – entweder fest verbaut oder vom Dritthersteller als externe Lösung.

Wer mehrere Monitore in Serie schalten will, sollte auch auf die Anschlussmöglichkeiten achten. (Foto: flickr / Travis Isaacs)
Wer mehrere Monitore in Serie schalten will, sollte auch auf die Anschlussmöglichkeiten achten. (Foto: flickr / Travis Isaacs)

Viel wichtiger als die Zusatzfeatures sind die Anschlüsse des neuen Monitors. Wollt ihr mehrere Displays gleichzeitig verwenden und in Serie schalten, werdet ihr ein Display mit DisplayPort 1.2 oder Thunderbolt-Ein- und -Ausgang brauchen. Im Idealfall solltet ihr euch für einen Monitor mit HDMI, Dual-Link-DVI-Ports und DisplayPort 1.2 entscheiden. Wer ein Auge auf einen Ultra-HD-Monitor geworfen hat, muss den Anschlüssen seiner Grafikkarte zusätzlich erhöhte Aufmerksamkeit schenken. Will man beispielsweise die maximale Auflösung bei 60 Hertz fahren, sollte die Grafikkarte MST (Multistream-Transfer) beherrschen und mindestens über zwei HDMI-Ports oder einen DisplayPort-1.2.-Eingang verfügen.

Was darf der beste Monitor für Webdesign kosten?

Egal mit welchem Budget ihr plant: Der für euch beste Monitor wird kein Schnäppchen sein. Das trifft umso mehr zu, als ihr euch als Webdesigner in einem professionellen Bereich bewegt.

Ein geeignetes WQHD-Display mit 27 Zoll kostet derzeit zwischen 700 und 1.200 Euro. Man kann allerdings auch locker weit über 3.000 Euro für einen Monitor hinblättern – sofern es denn mehr als 27 Zoll sein sollen und man sich für ein Ultra-HD-Display entscheidet.

Ergonomie und Fazit

Ergonomie ist wichtig, denn immerhin wird man viele Stunden vor dem neuen Monitor verbringen. Ein höhenverstellbares und dreh- sowie neigbares Display macht sich schnell bezahlt. Gerne darf der Screen auch in das Hochformat rotieren können. Eventuell vorhandene USB-Ports sollten sich entweder an der Front oder der Seite befinden. Nur dann sind sie leicht zugänglich.

Das Billig-Display aus dem Elektronikgroßmarkt ist definitiv keine Option für professionelle Webdesigner. Wer es ernst meint, sucht sich einen Monitor mit ausreichend dimensionierter Performance, einer annehmbar hohen Auflösung bei ausreichenden Dimensionen inklusive modernen Anschlüssen und einer Kalibrierung aus. Bei der Kaufentscheidung solltet ihr euch primär folgende Fragen stellen: Wie arbeitet ihr in der Regel? Welche Art von Projekten fallen regelmäßig an? Auf welche Features könnt ihr bei einem Monitor auf keinen Fall verzichten? Wie viel könnt und wollt ihr ausgeben?

Und welche Tipps habt ihr noch für Designer, die auf der Suche nach einem richtig guten Monitor sind?

]]>
Sébastien Bonset
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
Die 10 beliebtesten Artikel der Woche: IT-Gehälter 2015, Erfolg auf Facebook, Cheat-Sheets für Webdesigner http://t3n.de/news/10-beliebtesten-artikel-woche-64-598036/ 2015-03-07T10:01:42Z
Auch an diesem Samstag wollen wir euch die beliebtesten Artikel der vergangenen Woche nicht vorenthalten. Dieses Mal mit dabei: erfolgreiche Kleinunternehmer auf Facebook, IT-Gehälter 2015 und eine …

Auch an diesem Samstag wollen wir euch die beliebtesten Artikel der vergangenen Woche nicht vorenthalten. Dieses Mal mit dabei: erfolgreiche Kleinunternehmer auf Facebook, IT-Gehälter 2015 und eine Infografik, mit deren Hilfe ihr endlich zum Morgenmensch werden könnt.

1. IT-Gehälter 2015: Was Entwickler, Designer und ihre Kollegen dieses Jahr verdienen

Eine aktuelle gibt einen Ausblick auf die Gehaltsentwicklung im IT-Bereich. Danach plant rund ein Viertel der befragten Unternehmen, den eigenen IT-Mitarbeiter dieses Jahr eine Gehaltserhöhung zu geben.

Unser Artikel: IT-Gehälter 2015: Was Entwickler, Designer und ihre Kollegen dieses Jahr verdienen

2. Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick

Webdesigner und eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten sowie unterschiedliche Programmiersprachen und im Kopf zu behalten. Jede Menge Cheat-Sheets erleichtern die Arbeit ungemein. Wir haben im ersten Teil unserer Übersicht einige der hilfreichsten Exemplare für Webdesigner gesammelt.

Unser Artikel: Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick

3. Boreout im Job? 5 Anzeichen, dass du mehr gefordert werden solltest

Das Geld kommt jeden Monat pünktlich aufs Konto, die Arbeitszeiten sind annehmbar, die Kollegen ganz nett – aber dein Job langweilt dich? Dann solltest du jetzt weiterlesen. Vielleicht droht der Boreout.

Unser Artikel: Boreout im Job? 5 Anzeichen, dass du mehr gefordert werden solltest

4. Facebook für Kleinunternehmer: Wie ein Friseursalon sich eine 6.000-Fangemeinde aufgebaut hat

für Kleinunternehmer? Ohne viel Geld im Rücken wird das nichts, heißt es oft. Doch ein Friseursalon aus Reutlingen beweist das Gegenteil – mit einem kleinen Budget und ganz viel Authentizität.

Unser Artikel: Facebook für Kleinunternehmer: Wie ein Friseursalon sich eine 6.000-Fangemeinde aufgebaut hat

5. Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview]

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?



Unser Artikel: Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview]

6. Qi: Neue IKEA-Möbel laden Geräte ohne Kabel

IKEA hat eine neue Möbelserie vorgestellt, mit deren Hilfe sich Smartphones oder Tablets künftig ohne Kabel laden lassen sollen. Dafür kommt die „Qi“-Ladefunktion zum Einsatz.

Unser Artikel: Qi: Neue IKEA-Möbel laden Geräte ohne Kabel

7. Neuer Algorithmus: Google sucht nur noch die Wahrheit

Verschwörungstheorien haben derzeit Hochkonjunktur. Bei Google könnte man allerdings bald lange danach suchen müssen, denn der Suchmaschinenriese will Qualität und Fakten bei der Listung der Suchergebnisse den Vorzug geben.

Unser Artikel: Neuer Algorithmus: Google sucht nur noch die Wahrheit

8. Endlich schick: Das ist das neue Samsung Galaxy S6 aus Alu und Glas

Samsung hat wie jedes Jahr sein neues Flaggschiff, in diesem Fall das Galaxy S6 vorgestellt. Abgesehen von technischen Neuerungen haben die Koreaner vor allem beim Design aufgeholt. Das neue Gerät beendet endlich die Ära des Plastik-Smartphones.

Unser Artikel: Endlich schick: Das ist das neue Samsung Galaxy S6 aus Alu und Glas

9. Der frühe Vogel: So wirst auch du zum Morgenmensch [Infografik]

Morgenmuffel haben es nicht nur schwerer im Beruf, zufolge sind sie auch tendenziell unglücklicher und weniger produktiv. Eine zeigt euch jetzt, wie ihr Schlaf- und Aufstehgewohnheiten ändert, um ein echter Morgenmensch zu werden.

Unser Artikel: Der frühe Vogel: So wirst auch du zum Morgenmensch [Infografik]

10. Getty: Hollywood-Star Vince Vaughn posiert für schrecklich geniale Stockfotos

Um eine neue Hollywood-Komödie zu promoten, posiert Schauspieler Vince Vaughn gemeinsam mit seinen Co-Stars für eine Reihe von Stockfotos. Die sind jetzt über Gettys iStock-Plattform verfügbar und können mit gewissen Einschränkungen kostenlos genutzt werden.

Unser Artikel: Getty: Hollywood-Star Vince Vaughn posiert für schrecklich geniale Stockfotos

]]>
Lea Weitekamp