Wir bringen Ihnen das Beste aus der Zerschlagung

Nun, ich schätze, wir sind uns alle einig, dass dieses Jahr etwas ganz Besonderes war. Wir alle wurden auf die eine oder andere Weise herausgefordert, und die neue Normalität ist nicht ganz die alte Normalität. Dennoch bleibt die vorrangige Betonung auf der Sicherheit und dem Wohlergehen aller, sowie der Bedeutung des Austauschs von Gedanken und Gefühlen zum kreativen Wohlbefinden innerhalb der Gemeinschaft.

Leider sind die Auswirkungen von COVID-19 weltweit immer noch so weitreichend, dass das Smashing-Team in diesem Jahr große Änderungen an unseren Plänen vornehmen musste. Wie Rachel Andrew, Chefredakteurin des Smashing Magazine, es schön ausdrückt:

„Die Pandemie hat das Leben vieler Menschen unvorhersehbar und beängstigend gemacht. Bei Smashing mussten wir sehr schnell neue Wege finden, um großartige Inhalte bereitzustellen – auf eine Weise, die das Geschäft, aber auch unsere Referenten und Workshop-Leiter unterstützt. Der Enthusiasmus der Community, die Unterstützungsbotschaften und die Bereitschaft, diese neuen Formate auszuprobieren, haben uns ermutigt.“

In diesem Sinne haben wir uns entschieden, alle Termine für 2020 online zu stellen. Wir hoffen, euch dort zu sehen!

Wir sind in der Lage, all diese wunderbaren Dinge aufgrund Ihrer Unterstützung zu tun, und wir wissen das wirklich und aufrichtig zu schätzen.

Interaktive Workshops, die Ihnen helfen, Ihre Fähigkeiten zu verbessern

Mit Online-Workshops möchten wir Ihnen die gleiche Erfahrung und den gleichen Zugang zu Experten wie in einem persönlichen Workshop bieten, ohne Ihren Schreibtisch verlassen zu müssen. So können Sie in Ihrem eigenen Tempo und zu Ihrer eigenen Zeit lernen und dabei interaktiven Übungen folgen.

Wir haben unser Bestes getan, um Ihnen eine Mischung aus Design- und Frontend-bezogenen Workshops anzubieten:

Lehnen Sie sich zurück, entspannen Sie sich und schalten Sie ein!

Der Smashing-Podcast ist der perfekte Weg, um ein bisschen Smashing auf dem morgendlichen Weg zur Arbeit, beim Training im Fitnessstudio oder beim Abwaschen mitzunehmen. Alle zwei Wochen spricht Drew McLellan mit Design- und Entwicklungsexperten über ihre Arbeit im Web. Sie können in Ihrer Lieblings-App abonnieren, um neue Folgen zu erhalten, sobald sie fertig sind.

Gibt es ein Thema, über das Sie gerne mehr hören und erfahren möchten? Oder möchten Sie oder jemand, den Sie kennen, über ein Web- und Designthema sprechen, das Ihnen am Herzen liegt? Wir würden uns freuen, von Ihnen zu hören! Zögern Sie nicht, uns auf Twitter zu kontaktieren, und wir werden unser Bestes tun, um uns so schnell wie möglich bei Ihnen zu melden.

Unsere neuste Ergänzung zu The Smashing Bookshelf

Wir haben die ersten Exemplare von Click! How to Encourage Clicks Without Shady Tricks vor ein paar Wochen, und wenn Sie ein Exemplar des Buches vorbestellt haben, müssen Sie eine persönliche Nachricht vom Autor selbst, Paul Boag, erhalten haben. Es hat Spaß gemacht, die Reaktionen zu verfolgen, die in den sozialen Medien auftauchten – Ari Stiles hat in ihrem letzten Beitrag einige Tweets geteilt.

Klicken! kommt zu einer Zeit, in der viele von uns einen kreativen „Anstupser“ brauchen. Das Buch inspiriert uns dazu, anders über unsere Routinen beim Erstellen von Online-Sites und -Diensten nachzudenken – was funktioniert und was nicht. Sie können zum Inhaltsverzeichnis springen oder, wenn Sie erst einmal einen Blick darauf werfen möchten, gleich einen kostenlosen PDF-Auszug herunterladen (17,3 MB). Fröhliches Lesen!

Trendthemen im Smashing Magazine

Wie Sie vielleicht bereits wissen, möchten wir jeden Tag einen neuen Artikel veröffentlichen, der sich verschiedenen aktuellen Themen der Webbranche widmet. Hier sind einige, die unseren Lesern am besten gefallen und weiter empfohlen haben:

• „CSS-Nachrichten Juli 2020“, Rachel Andrew
• „Eine Einführung in die Kontext-API von React“, Yusuff Faruq
• „Wie man Daten zwischen Komponenten in Vue.js übergibt“, Matt Maribojoc
• „Das Einstellen von Höhe und Breite von Bildern ist wieder wichtig“, Barry Pollard
• „Unterschiede zwischen statisch generierten Sites und serverseitig gerenderten Apps“, Timi Omoyeni

Die besten Tipps aus unserem Newsletter

Wir sind ehrlich: Jede zweite Woche kämpfen wir damit, die Ausgaben des Smashing-Newsletters auf einer moderaten Länge zu halten – es gibt einfach so viele talentierte Leute da draußen, die an brillanten Projekten arbeiten! Hut ab vor allen Beteiligten!

Interessiert an Sponsoring? Schauen Sie sich gerne unsere Partnerschaftsoptionen an und wenden Sie sich jederzeit an das Team – es wird sich sicher umgehend bei Ihnen melden.

PS Ein riesiges Dankeschön an Cosima Mielke für das Schreiben und Vorbereiten dieser Beiträge!

Kostenlose Schriftarten mit Persönlichkeit

Typografie ist ein starkes Kommunikationsmittel, eine Möglichkeit, Ideen auszudrücken, und ein Auslöser für Kreativität. Basierend auf diesem Verständnis erstellt die in Argentinien ansässige Type Foundry Rostype Schriftarten, die für jeden kostenlos in persönlichen und kommerziellen Projekten verwendet werden können.

Derzeit sind 15 Schriftarten verfügbar, und jede davon glänzt mit einer einzigartigen Persönlichkeit. Einige wurden mit besonderem Augenmerk auf Lesbarkeit entworfen, andere sind die perfekten Display-Schriften, die hervorstechen, einige sind retro-inspiriert, andere eher futuristisch und dynamisch. Es gibt sogar eine Schriftart, die von der Sperrung des Coronavirus inspiriert ist. Eine Fundgrube, wenn Sie nach einer etwas markanteren Schrift suchen.

Die Entstehung einer Schrift

Es ist immer aufschlussreich, hinter die Kulissen zu blicken, wie andere Designteams arbeiten und denken. Chris Bettig, Design Director bei YouTube, teilt jetzt eine interessante Fallstudie darüber, wie er und sein Team YouTube Sans erstellt haben, eine maßgeschneiderte Schriftart, die gleichzeitig als Markenbotschafter fungiert.

Bevor die neue Schrift auftauchte, verwendete YouTube den ikonischen Play-Button und eine modifizierte Version von Alternate Gothic für die Wortmarke. Wie Chris Bettig erklärt, gab es jedoch keine klare typografische Anleitung. YouTube Sans wurde entwickelt, um mit der gesamten Produktpalette von YouTube zu funktionieren und die Weltanschauung der Plattform sowie die Community der YouTuber, die sie nutzen, widerzuspiegeln. YouTube Sans hat dies geändert. Weitere Einblicke in die Entstehung der Schrift und die Herausforderungen, denen sich das Designteam dabei gegenübersah, finden Sie in der Fallstudie.

Umgang mit Inkonsistenzen bei der Darstellung von Browserschriften

Wir alle kennen diese Momente, in denen uns ein Fehler buchstäblich nervt, aber wir scheinen nicht herauszufinden, wie wir ihn lösen sollen. Stephanie Stimac ist kürzlich auf ein solches Problem gestoßen: Als sie ihre persönliche Website in Safari öffnete, bemerkte sie, wie drastisch der Titel ihrer Seite im Vergleich zu anderen Browsern anders dargestellt wurde. Es wirkte viel kühner als erwartet.

Um den Grund für diese Rendering-Inkonsistenzen zu finden, begann Stephanie, Unterschiede zwischen dem User-Agent-Stylesheet und den berechneten CSS-Eigenschaften zu analysieren, und fand sich bald weit unten im Kaninchenbau wieder, als sie das verwirrende Verhalten mit Chrome, Firefox und Edge verglich. Es gibt keine einfache Antwort auf die Frage, welcher Browser das Styling tatsächlich richtig handhabt, aber nach einer Reihe von Tests fand Stephanie heraus, wie sie verhindern kann, dass der Browser entscheidet, wie Schriftstärken fett gedruckt werden: Sie müssen die Schriftstärke explizit mit definieren Zahlenwerte. Ein kleines Detail, das einen großen Unterschied macht.

Kontinuierliche Leistungsmessung leicht gemacht

Beim Start einer Website ist es üblich, Leistungstests durchzuführen, um sicherzustellen, dass die Website schnell ist und Best Practices folgt. Aber wie halten wir es schnell, wenn jeden Tag Bereitstellungen stattfinden? Speedlify ist Zach Leathermans Antwort auf diese Frage.

Speedlify ist eine statische Website, die als Open-Source-Repository veröffentlicht wird und Lighthouse und Axe verwendet, um die Leistung kontinuierlich zu messen und die Leistungsstatistiken zu veröffentlichen – höchstens einmal pro Stunde und automatisch einmal am Tag. Sie können es manuell lokal auf Ihrem Computer ausführen und die Daten in Ihr Repo einchecken, oder, wenn Sie Netlify verwenden, kann es vollständig eigenständig ausgeführt werden. Eine großartige Möglichkeit, die Leistung immer im Blick zu behalten.

Die Anatomie einer Push-Benachrichtigung

Push-Benachrichtigungen wurden erstmals 2009 auf iOS eingeführt, Web-Push folgte fünf Jahre später. Heute werden sie von vielen Plattformen und Browsern unterstützt – von iOS und Android bis Amazon Echo, Windows, Chrome, Safari, Firefox, Edge und mehr. Jede dieser Plattformen ist jedoch etwas anders, was es für Designer kompliziert macht, sich darüber Gedanken zu machen, was genau in eine Push-Benachrichtigung gehört.

Eine nützliche Erinnerung kommt von Lee Munroe. Er fasste zusammen, wie viele Textzeilen Sie auf welcher Plattform benötigen, Anforderungen an Bilder, ob es Zeichenbeschränkungen gibt und andere Details, die schwer zu merken sind. Die Übersicht ist auch praktisch, um zu beurteilen, wie Ihre Benachrichtigung auf Betriebssystemen aussehen wird, auf die Sie keinen Zugriff haben. Einer für die Lesezeichen.

Keyframe-Animationen live bearbeiten

Wenn Sie Animationen erstellen, ist es immer hilfreich, die Animation in Aktion zu sehen, während Sie sie optimieren. Leider bedeutet das auch viel Hin- und Herwechseln zwischen Ihrem Texteditor und dem Browser. Mitch Samuels war es leid, das zu tun, also baute er ein Tool, um Zeit zu sparen: Keyframes.app.

Mit dem Tool können Sie eine CSS-Keyframe-Animation mit einem visuellen Zeitleisten-Editor erstellen. Sie können Schritte zu einer Zeitachse hinzufügen, die einfache Benutzeroberfläche verwenden, um die CSS-Eigenschaften anzupassen, die Ihr Zielelement bei jedem Schritt haben soll, und die animierte Vorschau wird live aktualisiert. Wenn Sie mit dem Ergebnis zufrieden sind, können Sie das CSS kopieren und sofort in Ihrem Projekt verwenden. Keyframe.app ist auch als Chrome-Erweiterung verfügbar. Eine echte Zeitersparnis.

Bestimmung des besten Build-Tools für Ihr Projekt

Build-Tools zielen darauf ab, das Leben von Entwicklern zu erleichtern, indem sie Arbeitsabläufe rationalisieren und Best Practices kodifizieren. Die Auswahl des richtigen Build-Tools für ein Projekt kann jedoch eine Herausforderung sein. Um Ihnen dabei zu helfen, eine fundiertere Entscheidung zu treffen, haben Leute vom Google Chrome Developer Relations Team Tooling.Report entwickelt.

Basierend auf einer Reihe von Tests zur Bewertung, wie gut ein Build-Tool Best Practices einhält, gibt Tooling.Report Ihnen einen Überblick über verschiedene Bundler und die von ihnen unterstützten Funktionen. Es ist nicht nur ein schneller Weg, um das beste Tool für ein Projekt zu bestimmen, sondern auch eine Referenz für die Integration von Best Practices in bestehende Codebasen – mit dem langfristigen Ziel, alle Build-Tools und damit die Gesundheit des Webs zu verbessern.

Ein flaches Bild in ein gefaltetes Poster verwandeln

Einige Codierungsexperimente lassen selbst die erfahrensten Entwickler staunen. Und selbst wenn Sie es nicht jeden Tag verwenden, ist es immer wieder inspirierend zu sehen, wie andere Entwickler über den Tellerrand schauen und erkunden, was mit Webtechnologien möglich ist. Der gefaltete Postereffekt, den Lynn Fisher mit reinem CSS erstellt hat, ist ein solches Experiment.

Mit ein wenig CSS lässt Lynn Ihr durchschnittliches Bild wie ein gefaltetes Poster aussehen. Mit horizontal und vertikal über das Bild laufenden Papierfalten und einem Hintergrundschatten, der dem Poster einen 3D-Effekt verleiht. Ein cooles kleines Projekt, das schön zeigt, was mit CSS erreicht werden kann.

Ein Gleichgewicht zwischen nativen und benutzerdefinierten ausgewählten Elementen finden

Wie baut man ein gestyltes Select-Element, das nicht nur außen, sondern auch innen gestylt ist? In ihrem Artikel „Striking a Balance Between Native and Custom Select Elements“ teilt Sandrina Pereira ihren Versuch, eine gut aussehende, zugängliche Auswahl zu erstellen, die von so vielen nativen Funktionen wie möglich profitiert.

Die Idee ist, die Auswahl „hybrid“ zu machen, was bedeutet, dass sie sowohl eine native <select> als auch eine gestylte alternative Auswahl in einem Designmuster ist. Benutzer von Hilfstechnologien erhalten ein natives <select> -Element, aber wenn eine Maus verwendet wird, stützt sich der Ansatz auf eine gestylte Version, die so gestaltet ist, dass sie als select-Element fungiert. Klug!

Hybride Positionierung mit CSS-Variablen und max()

Manche Ideen erfordern, dass Sie über den Tellerrand hinausschauen und neue Wege gehen, um sie umzusetzen. Stellen Sie sich dieses Beispiel vor: Sie möchten eine Seitennavigation auf der Seite haben, direkt unter der Kopfzeile, wenn sie ganz nach oben gescrollt wird. Es soll mit der Seite scrollen, wenn die Kopfzeile nicht sichtbar ist, und für den Rest des Scrollens oben bleiben. Genau das wollte Lea Verou in einem aktuellen Projekt erreichen.

Man könnte sagen, das ist ein Fall von position: sticky , aber es gibt einen feiner abgestimmten Ansatz, um die Arbeit zu erledigen, wie Lea zeigt. Ohne JavaScript. Ihre Lösung basiert auf CSS-Variablen und der neuen max() Funktion, mit der Sie Min/Max-Einschränkungen auf CSS-Eigenschaften anwenden können. Ein Fallback hilft in Browsern, die max() noch nicht unterstützen. Klug!

Geschichten von der dunklen Seite des Webs

Hacker, Datenschutzverletzungen, Aktivitäten von Schattenregierungen, Cyberkriminalität, Hacktivismus – auf der dunklen Seite des Internets ist viel los. Aber wer sind die Menschen hinter diesen Aktivitäten? Und was ist ihre „Mission“? Jack Rhysider hat den Geschichten, die sich in den verborgenen Teilen des Netzwerks abspielen, einen Podcast gewidmet: Darknet Diaries.

Egal, ob es sich um die Geschichte eines Spielers handelt, der einen Fehler in einem Video-Poker-Automaten findet, mit dem er übermäßig viel Geld gewinnen kann, die Geschichte eines Penetrationstesters, der in Gebäude einbricht, oder die Geschichte eines Nationalstaats, der sich in ein Unternehmen innerhalb einer anderen Nation hackt, die Darknet Diaries steckt voller packender Einblicke in eine geheime Welt. Der Podcast hält sich an journalistische Standards durch Faktenprüfung und ethische Beschaffung von Informationen, und obwohl all dies großartige Unterhaltung ist, zielt er auch darauf ab, die Kultur rund um Cybersicherheit zu erklären, um die Zuhörer zu reaktionsschnelleren, informierteren Bürgern ihres digitalen Lebens zu machen. Unbedingt einschalten.

Nützliche Frontend- und UX-Bits, die einmal pro Woche geliefert werden.

Mit Tools, die Ihnen helfen, Ihre Arbeit besser zu erledigen. Melden Sie sich an und erhalten Sie Vitalys Smart Interface Design-Checklisten im PDF -Format per E-Mail.

Ihre (zerstörerische) E-Mail

Auf Front-End & UX. Vertrauen von 190.000 Menschen.