Netz

Die Flexbox-Leseliste: Techniken und Tools

Flexbox gibt uns eine neue Art der Kontrolle über unsere [Layouts](https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/) und macht die Codierung zu schwierigen Herausforderungen oder unmöglich mit CSS allein einfach und intuitiv zu lösen. Es bietet uns die Möglichkeit, **Grids zu erstellen, die flexibel sind** und sich [dynamischer Inhalte] bewusst sind (https://www.smashingmagazine.com/2016/02/design-mock-ups-need-dynamic-content- tools-plugins/), und geben uns so die Freiheit, uns auf den Erstellungsprozess zu konzentrieren, anstatt uns den Weg zu einem Layout zu hacken. Wir haben **Tipps, Tricks und Tools** zusammengestellt, die Ihnen helfen, bereits heute das Beste aus Flexbox herauszuholen, um Ihnen einen Vorsprung in Flexbox zu verschaffen und Ihnen Ideen zu geben, wie Sie es verwenden können, um häufige Codierungsherausforderungen zu meistern. Die Liste ist keineswegs vollständig, enthält jedoch die Ressourcen, die wir als hilfreich und nützlich empfanden.

Inhaltsmodellierung mit Jekyll

Es ist nicht gerade ein neues Thema, aber in letzter Zeit hatte ich Grund, die Fähigkeit der Inhaltsmodellierung in der Arbeit meines Teams erneut zu untersuchen. Unsere Erfahrung hat einen Punkt erreicht, an dem die Grenzen unserer Praxis klar zu werden beginnen. Unser häufigstes Problem ist, dass **Menschen dazu neigen, sich selbst und ihre mentalen Modelle an eine gewählte Plattform** und ihre Konventionen zu binden. Anstatt den Leuten beizubringen, wie man Inhalte modelliert, bringen wir ihnen am Ende bei, wie man Inhalte in Drupal modelliert oder wie man Inhalte in WordPress modelliert. Aber ich würde es vorziehen, wenn wir es mit einem Fokus auf die besten Interessen der Nutzer angehen, **unabhängig davon, auf welcher Plattform** die besagten Inhalte landen werden.

Effizienter Responsive-Design-Prozess

„Jede dieser Optionen bietet ein Design für drei einzigartige Layouts: Startseite, Listenseite, Detailseite.“ Alles klar. Jetzt haben wir bis zu neun statische Designdateien. Das gerät etwas aus dem Ruder.

Ein Leitfaden für Anfänger zum Erstellen einer WordPress-Website

Eine Schritt-für-Schritt-Anleitung für neue WordPress-Benutzer, um WordPress von Anfang bis Ende zum Laufen zu bringen.

Die Kunst des Abfangens: Über „Möchten Sie an einer Umfrage teilnehmen?“ hinausgehen

Maxwell ist Forscher bei einer Designfirma, die an einer mobilen Zahlungs-App arbeitet. Er möchte mehr darüber erfahren, wie Benutzer derzeit mit Point-of-Sale-Terminals interagieren. Maxwell kontaktiert ein lokales Lebensmittelgeschäft, um Zeiten zu koordinieren, um **Kunden beim Auschecken zu beobachten**. Anschließend bittet er jeden fünften Kunden, der zur Kasse geht, an einer kurzen Umfrage teilzunehmen. Maxwell beteiligt sich an _Intercepts_ als Teil seiner Rekrutierung von Forschungsteilnehmern.

Effektives, browserübergreifendes Testen mit minimalem Aufwand

Cross-Browser-Tests sind zeitaufwändig und mühsam. Das wiederum macht es teuer und anfällig für menschliches Versagen … also wollen wir natürlich so wenig wie möglich tun. Das ist keine Aussage, für die wir uns schämen sollten. **Entwickler sind von Natur aus faul**: sich an das DRY-Prinzip halten, Skripte schreiben, um Dinge zu automatisieren, die wir sonst von Hand erledigen müssten, Bibliotheken von Drittanbietern nutzen – faul zu sein macht uns zu guten Entwicklern. Der traditionelle Ansatz für Cross-Browser-Tests passt nicht gut zu diesen Idealen. Entweder Sie unternehmen einen halbherzigen Versuch des manuellen Testens oder Sie verwenden viel Mühe darauf, es „richtig“ zu tun: Testen Sie in allen wichtigen Browsern, die von Ihrem Publikum verwendet werden, und wechseln Sie nach und nach zu älteren oder obskureren Browsern, um Sie zu sagen hab sie getestet.

Content Wireframes für Responsive Design erstellen

Als ich zwischen 2011 und 2012 meinen Kurs in Responsive Webdesign leitete, stolperte ich immer wieder über den Prozess des Wireframing. Meine Studenten tendierten dazu, sich auf das Wireframe als Endspiel im Planungsprozess zu konzentrieren. Sie haben nicht verstanden, dass sich Responsive Design darauf konzentriert, wie Benutzer auf die Inhalte zugreifen.

Vorbereitung auf HTTP2: Ein Leitfaden für Webdesigner und -entwickler

Ein detaillierter Blick auf die Grundlagen von HTTP/2, wie sie für Webdesigner und Entwickler gelten. Wir werden uns die Hauptmerkmale des neuen Protokolls, die Browser- und Serverkompatibilität ansehen und die Dinge erläutern, über die Sie möglicherweise nachdenken müssen, wenn wir eine zunehmende Akzeptanz von HTTP/2 sehen.

Alles, was Sie über die beschleunigten mobilen Seiten von Google wissen müssen

Im Mai 2015 stellte Facebook seine neue In-App-Publishing-Plattform [Instant Articles](https://instantarticles.fb.com/) vor. Einen Monat später erklärte Apple, dass das alte [Kiosk](https://en.wikipedia.org/wiki/Newsstand_(Anwendung))-Erlebnis (im Wesentlichen ein schicker Ordner voller Nachrichten-Apps) in iOS 9 durch eine Marke ersetzt würde neue Nachrichtenaggregations- und Discovery-Plattform namens [Apple News](https://www.apple.com/news/). Vier Monate später war Google an der Reihe, seinen eigenen, etwas verspäteten, aber nicht weniger ehrgeizigen Plan zur Revolutionierung des mobilen Nachrichtenkonsums mit einer webbasierten Open-Source-Lösung namens [Accelerated Mobile Pages](https://www.ampproject. org/) oder AMP. In nur wenigen Monaten haben wir gesehen, wie die relative Ruhe des mobilen digitalen Publizierens in einen weiteren umfassenden Plattformkrieg ausgebrochen ist, als Facebook, Apple und jetzt Google sowohl um die Loyalität der Herausgeber als auch um die Aufmerksamkeit der Leser konkurrier

Kostenlose Schriftarten mit Persönlichkeit

Typografie kann den Unterschied machen. Wenn Ihr Projekt jedoch mit einem **sehr begrenzten Budget** auskommen muss und Sie sich auf kostenlose Schriftarten verlassen müssen, sind gute nicht leicht zu finden. Glücklicherweise sind wir in letzter Zeit über einige echte Juwelen gestolpert.