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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
David
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
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.

David
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

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