Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 7)

Am Zahn der Zeit mit t3n. (Screenshot: © awesomephant – Fotolia.com)

HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der siebte Teil.

Tagtäglich stolpern wir über atemberaubende Tutorials. Leider verschwinden sie zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

Das Template für deine iOS-8-Apps

Bildschirmfoto 2015-03-06 um 14.40.23

Hier findet ihr ein umfangreiches iOS8-App-Template. Wenn ihr Photoshop nutzt und Icons für iPhone, iPad oder die Apple Watch herstellt, dann ist dieses Template das richtige für euch.

HTML5-Boilerplate in neuer Version

Bildschirmfoto 2015-03-06 um 14.40.05

„Das populärste Frontend-Framework des Webs“, die HTML5-Boilerplate, ist in der fünften Version erschienen. Lasst euch also nicht die kleinen Optimierungen entgehen.

Generalist oder Spezialist? A List Apart geht darauf ein

Bildschirmfoto 2015-03-06 um 14.42.56

Ein Erfahrungsbericht von Garin Evans zur Frage: Generalist versus Spezialist und wie man mit seinem restlichen Potenzialen umgehen kann. Absolut lesenswert.

SVG-Icons, die sich gewaschen haben

Bildschirmfoto 2015-03-06 um 14.45.30

Inspiriert von Sara Soueidans Text liefert Transformicons Animationen für Icons und Symbole – realisiert mit SVG und CSS. Gerade für mobile Interfaces sind transformierbare Icons sehr hilfreich.

iOS-Animationen mit Swift

Bildschirmfoto 2015-03-06 um 14.49.13

Spring ist eine Swift-Bibliothek, die euch das Erstellen von iOS-Animationen erleichtert. Einen Blick wert, denn Spring ist auch für Einsteiger geeignet.

Datedropper: Der Name ist Programm

Bildschirmfoto 2015-03-06 um 14.51.53

Gute Date-Picker gibt es nicht wie Sand am Meer. Mit Datedropper könnte sich das ändern. Seht euch dieses Plugin an, es zahlt sich aus.

I am the fold

Bildschirmfoto 2015-03-06 um 14.54.33 1

„I am the fold“ ist ein interressantes Projekt, das zeigen soll, wie tückisch responsive Design sein kann. Ein Beweis, dass es sich nicht lohnt, auf Basis des Viewports zu entwickeln?

BEM? SMACSS? RSCSS!

Bildschirmfoto 2015-03-06 um 14.57.42

Ein interessantes Konzept für skalierbare CSS-Strukturen hat Rico Cruz auf GitHub veröffentlicht. Ihr könnt euch auch daran beteiligen. Ein Muss für Frontend-Designer.

UI-Kit: NumberOne

Bildschirmfoto 2015-03-06 um 15.19.02

NumberOne wiegt ganze 15 Megabyte und ist ein speziell für Sport-Websites konzipiertes UI-Kit. Die Design-Elemente sind als Vektoren in der PSD-Datei gespeichert und sind für den Retina-Einsatz geeignet.

Vertrauen ist gut, Kontrolle ist besser

Bildschirmfoto 2015-03-06 um 15.20.49

Mit is.js könnt ihr unter anderem Regular Expressions, Typen und Zeitangaben überprüfen. Das Skript setzt keine Abhängigkeiten voraus und ist über npm und Bower verfügbar.

Wenn euch diese Liste gefallen hat, findet ihr hier den sechsten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
David

Imagiär weil die Seite ja zeigt, dass es DEN FOLD nicht gibt.
Wende das Konzept an, dann bleibt eben die wichtige Frage
"Welcher Fold ist gemeint?"

Als Ergänzung zu der Studie von 2006(!) könnte dieser Artikel hilfreich sein.

http://www.hugeinc.com/ideas/perspective/everybody-scrolls

Antworten
Mario Janschitz

Und was genau hat das jetzt mit deinem ersten Post, nämlich:
„Zu I am the fold:
'das zeigen soll, wie tückisch responsive Design sein kann'
vs.
'An experiment to show how designing for The Fold can be treacherous.'
“ zu tun? Ich kann ja die Viewportgröße meiner Nutzer abfragen -- von daher gibt es „den Fold“ schon. Oder gab es mal eine pixelgenaue Festlegung von der ich nichts weiß? Ich glaube nicht.

Bin gespannt.

Antworten
David

Zu I am the fold:
"das zeigen soll, wie tückisch responsive Design sein kann"

vs.

"An experiment to show how designing for The Fold can be treacherous."

Merkt Ihr selbst, oder?

Antworten
https://hipp.design

Ist mir auch aufgefallen... tzzz.
Da ist ein kleiner, aber feiner Unterschied, ob Responsive Design tückisch ist oder das Designen mit dem "Fold".

Antworten
Mario Janschitz

Ne, merken wir nicht.

Willst du damit sagen, dass die Berücksichtigung der Viewport-Größe bei der Darstellung von Content, gerade wenn man mobile Geräte mit Landscape- und Portrait-Modi betrachtet, nicht unter responsive Webdesign fällt?

Antworten
David

Nee, das Experiment soll zeigen, dass der "Fold" ein imaginärer Begriff ist. Mit Responsive hat es nur nebenbei etwas zu tun.

Es geht hier auch nur im die "Höhe" des Viewports.

Das ist grade für Designer wichtig, die Ihr Design präsentieren und immer wieder mit dem Kundenwusch "alles Wichtige muss above the fold sichtbar sein" zu hören bekommen.

Mario Janschitz

„imaginärer Begriff“ ... soso. „Above the Fold“ ist ein Design-Konzept – aber sei es drum.

Vielmehr geht es darum, dass die Nielsen Norman Group ein Paper verfasst hat, das besagt, dass man immer noch „Above-the-Fold“, also den initialen Viewport, entwickeln soll.

„I am the Fold“ sieht das anders und versucht seinen Standpunkt zu beweisen bzw. darzustellen wie schwierig das sein kann. Was aber nichts daran ändert, dass sich responsive Design an die unterschiedlichen Folds anpassen kann. Deswegen habe ich auch eine Frage formuliert.

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.