Neues Jahr, neuer Anfang: Smashing Workshops & Audits

Während das neue Jahr hereinbricht und alle Vorsätze immer noch auf die Probe gestellt werden, kehren wir langsam zu unseren täglichen Projekten zurück. Dabei konzentrieren wir uns auf die neuen Ziele für 2021: Verbesserung der Zugänglichkeit, Konversion, Bindung, Bindung und natürlich der Webleistung . Wir alle haben unterschiedliche persönliche Ziele für dieses Jahr, aber eines verbindet uns alle: das Web für alle zu verbessern.

Die Zeit zwischen den Jahren ist immer eine gute Zeit, um zur Ruhe zu kommen; aber es ist auch eine wunderbare Zeit, um etwas zu recherchieren, nachzudenken, zu schreiben und vielleicht sogar unaufgefordert zu programmieren und zu entwerfen. Und fast so, als wäre es eine jährliche Tradition (das ist es tatsächlich), hat Vitaly alles, was 2021 im Frontend passiert ist, durchgelesen und alles noch einmal in der Frontend-Performance-Checkliste 2021 zusammengestellt.

Dieser Leitfaden deckt so ziemlich alles ab, was Sie brauchen, um heute schnelle Erfahrungen im Web zu erstellen – von Metriken über Tools bis hin zu Front-End-Techniken und -Strategien. Es hat sich in den letzten Jahren für viele Leser als sehr nützlich erwiesen, also wird es hoffentlich auch für Sie nützlich sein. Sie können die Checkliste (PDF, MS Word Doc und Apple Pages) auch bearbeiten und an Ihre persönlichen Bedürfnisse anpassen oder sogar für Ihre Organisation verwenden.

Lassen Sie uns jetzt ohne weiteres einen Blick darauf werfen, was das Smashing-Team in den nächsten Monaten für Sie bereithält.

Planen Sie Ihr Jahr im Voraus mit Online-Workshops

Haben Sie schon an einem unserer Workshops teilgenommen? Wir freuen uns jedes Mal, wenn wir praktische Online-Workshops mit all den wunderbaren Teilnehmern aus der ganzen Welt durchführen, die zusammenkommen, um gemeinsam zu lernen. Es hat sich als großartige Gelegenheit erwiesen, mit Menschen auf der ganzen Welt in Kontakt zu treten und Erfahrungen live auszutauschen. Dank der Live-Design- und Programmiersitzungen wurden so viele Ideen zum Leben erweckt, und es gibt auch viele Leute, die neue Freunde gefunden haben!

Es kommt noch besser: Wir haben jetzt Workshop-Bundles, aus denen Sie 3, 5 oder sogar 10 Tickets für die Workshops Ihrer Wahl auswählen können – laufende, kommende oder in der Zukunft stattfindende! Wählen Sie die Online-Workshops Ihrer Wahl – zum besten Preis und zum besten Termin – für sich, Ihr Team oder Ihre Agentur. Zu den Workshop-Bundles springen.

Wir arbeiten weiter am Programm für dieses Jahr und es gibt weitere Workshops anzukündigen. Lassen Sie uns wissen, wenn Sie eine durchführen möchten, kontaktieren Sie uns über Twitter DM und wir versprechen, unser Bestes zu tun, um dies zu ermöglichen. Melden Sie sich auch gerne hier an, wenn Sie als Erster benachrichtigt werden möchten, wenn neue Workshops erscheinen. Außerdem erhalten Sie Zugang zu Frühbuchertickets .

Neu: Smashing Online Audits auf Front-End & UX

Erst letzte Woche haben wir stillschweigend unser neues kleines Produkt eingeführt – Online-Audits – 30–60-minütige Videoüberprüfung zusammen mit einem schriftlichen Bericht unserer Ergebnisse. Es ist eine einfache und schnelle Möglichkeit, Ihre Ideen zu validieren und ein ehrliches, unvoreingenommenes Feedback (vorerst nur von Vitaly) zum Front-End und UX Ihrer Website, App oder Mock-ups zu erhalten. Plus, Richtlinien und Aktionspunkte, um es besser zu machen.

Buchen Sie ein Audit Ihrer Wahl und teilen Sie einige Details über Ihre Website, App oder Mock-ups mit, und wir werden uns in kürzester Zeit bei Ihnen melden!

Smashing Podcast: Schalten Sie ein und lassen Sie sich inspirieren

Letztes Jahr haben wir alle zwei Wochen eine neue Smashing Podcast-Episode veröffentlicht, und das Feedback war großartig ! Mit über 56.000 Downloads (knapp über tausend pro Woche, Tendenz steigend!) hatten wir 34 Gäste im Podcast mit unterschiedlichen Hintergründen und so viel zu teilen!

Wenn Sie ein Thema nicht sehen, über das Sie gerne mehr hören und erfahren möchten, zögern Sie bitte nicht, sich an Gastgeber Drew McLellan zu wenden oder jederzeit über Twitter mit uns in Kontakt zu treten – wir würden uns freuen, von Ihnen zu hören!

Seien Sie gespannt auf die nächste Folge, die am 26. Januar erscheint!

Smashing Newsletter: Die besten Tipps

Mit unserem wöchentlichen Newsletter möchten wir Ihnen nützliche, praktische Leckerbissen bringen und einige der hilfreichen Dinge teilen, an denen die Leute in der Webbranche arbeiten. Es gibt so viele talentierte Leute da draußen, die an brillanten Projekten arbeiten, und wir würden uns freuen, wenn Sie helfen könnten, das Wort zu verbreiten und ihnen die Anerkennung zu zollen, die sie verdienen!

Außerdem gibt es durch das Abonnieren keine Mailings von Drittanbietern oder versteckte Werbung, und Ihre Unterstützung hilft uns wirklich, die Rechnungen zu bezahlen. ️

Interessiert an Sponsoring? Schauen Sie sich gerne unsere Partnerschaftsoptionen an und wenden Sie sich jederzeit an das Team – es wird sich so schnell wie möglich bei Ihnen melden.

Nachfolgend finden Sie einige der beliebtesten Newsletter-Beiträge , die wir kürzlich in unserem Newsletter geteilt haben:

Kompatibilität mit lokalen Standardschriften

Standardschriftarten unterscheiden sich erheblich zwischen verschiedenen Betriebssystemen. Um eine einfache Möglichkeit zu bieten, die Standardschriftarten eines Systems nachzuschlagen, insbesondere diejenigen, die über CSS font-family verfügbar sein müssen, hat Zach Leatherman Font Family Reunion entwickelt.

Die Kompatibilitätstabelle funktioniert wie eine Can I Use for default local fonts: Sobald Sie eine font-family eingeben, wird Ihnen mitgeteilt, ob sie unterstützt wird, sowie welche fünf standardmäßigen CSS-Schlüsselwort-font-familys ( serif , sans-serif , monospace und die weniger bekannten fantasy und cursive ) werden in jedem Betriebssystem als Alias ​​verwendet. Einer für die Lesezeichen.

Verbesserung der Leistung von Google Fonts

Selbst gehostete Schriftarten gelten allgemein als die schnellste Option bei der Verwendung von Webschriftarten. Allerdings können Google Fonts auch schnell sein: Ihre Fähigkeit, die kleinstmöglichen Schriftdateien an bestimmte Benutzeragenten und Plattformen zu liefern, und ihre relativ neue Unterstützung für die font-display Parameter &display=swap sind bereits eine gute Basis. Und wie Harry Roberts zeigt, gibt es einige Dinge, die Sie tun können, um ihre Leistung noch weiter zu verbessern und viele der Probleme zu mildern, für die Google Fonts allgemein bekannt sind.

Für seinen Artikel „Die schnellsten Google-Schriftarten“ ging Harry ins Kaninchenloch, um die beste Kombination für schnelle Google-Schriftarten zu finden: asynchrones Laden von CSS, asynchrones Laden von Schriftdateien, Opt-in für FOFT, schnelles Abrufen von asynchronen CSS-Dateien und Erwärmung externe Domänen auf. All diese Techniken zusammen mögen zunächst etwas überwältigend klingen, aber Harry schließt seinen Artikel mit einem schlanken und wartbaren Snippet ab, das Ihnen hilft, das Beste aus Google Fonts herauszuholen.

Responsive E-Mails leicht gemacht

Das Codieren sauberer, reaktionsschneller E-Mails, die in allen gängigen E-Mail-Clients ein solides Erlebnis bieten, kann eine zeitaufwändige Herausforderung sein. HEML ist hier, um das zu ändern. Die Open-Source-Markup-Sprache gibt Ihnen die native Leistungsfähigkeit von HTML, ohne sich mit all den E-Mail-Eigenheiten auseinandersetzen zu müssen. Es gibt keine besonderen Regeln oder Stilparadigmen, die Sie beherrschen müssen. Wenn Sie sich also mit HTML und CSS auskennen, können Sie loslegen.

MJML basiert auf der gleichen Idee, den Prozess der Erstellung responsiver E-Mails zu vereinfachen. Die Auszeichnungssprache basiert auf einer semantischen Syntax, die den Prozess unkompliziert macht, während eine Open-Source-Engine die schwere Arbeit übernimmt und das von Ihnen geschriebene MJML in responsives HTML übersetzt. Eine Bibliothek mit Standardkomponenten spart Ihnen zusätzliche Zeit und vereinfacht Ihre E-Mail-Codebasis. Und wenn Sie Ihr eigenes erstellen möchten, kann Ihnen auch der Modular Template System Guide helfen. Vielversprechend!

Kugelsichere HTML-E-Mail-Vorlagen

Es ist keine leichte Aufgabe, eine HTML-E-Mail über mehrere E-Mail-Clients hinweg zum Laufen zu bringen. Glücklicherweise gibt es viele zuverlässige Tools, Vorlagen und Frameworks, die Ihnen die Erledigung Ihrer Arbeit erleichtern. Maizzle ist beispielsweise ein Framework, mit dem Sie schnell HTML-E-Mails mit Tailwind CSS und erweiterter, E-Mail-spezifischer Nachbearbeitung erstellen können. Es bietet auch einige vorgefertigte Projekte (Maizzle Starter), mit denen Sie sofort beginnen können.

Cerberus und HTML-E-Mail bieten kleine Sammlungen zuverlässiger, solider Muster für reaktionsschnelle HTML-E-Mails, die in mehr als 50 E-Mail-Clients, darunter Gmail, Outlook, Yahoo, AOL und vielen anderen, gut getestet wurden. Mit EmailFrame.work können Sie responsive HTML-E-Mail-Vorlagen mit vorgefertigten Rasteroptionen und Basiskomponenten erstellen, die in über 60 E-Mail-Clients unterstützt werden.

Stripo, Chamaileon, Postcards, Topol.io und Bee Free verfügen über zahlreiche kostenlose HTML-E-Mail-Vorlagen, Litmus bietet Responsive-E-Mail-Vorlagen für Newsletter, Produktaktualisierungen und Quittungen und CampaignMonitor bietet einen kostenlosen HTML-E-Mail-Vorlagen-Builder mit Drag-and-Drop-Funktionalität.

Von CSS-Verläufen bis hin zu gefälschten Daten

Stellen Sie sich vor, Sie müssten nur CSS-Dreiecksstile für Elemente und Pseudoelemente finden. Oder vielleicht verfeinern Sie die Farbpalette ein wenig, indem Sie Tönungen und Schattierungen einer bestimmten Farbe erkunden. Oder generieren Sie vielleicht einen linearen und radialen CSS-Verlauf für einen Abschnitt der Seite. Es ist nicht nötig, alles manuell zu erledigen oder zu versuchen, diese CSS-Snippets im ganzen Web zu finden. Sie können sie immer auf Omatsuri finden.

Omatsuri bedeutet Festival auf Japanisch, und die Seite ist ein nettes kleines Festival von Open-Source-Browser-Tools für den täglichen Gebrauch. Auf der Website finden Sie einen Dreiecksgenerator, einen Farbtongenerator, einen Gradientengenerator, Seitenteiler, einen SVG-Kompressor, einen SVG → JSX-Konverter , einen gefälschten Datengenerator, CSS-Cursor und Tastaturereigniscodes. Entworfen und gebaut von Vitaly Rtishchev und Vlad Shilov. Der Quellcode der Seite ist ebenfalls verfügbar.

CSS-Schattengenerator

Suchen Sie nach einem Tool, das automatisch CSS-Code für wirklich glatte, geschichtete Box-Shadows generiert? Nun, Sie werden SmoothShadow lieben. Inspiriert von einem Artikel von Tobias Ahlin Bjerrome wurde dieses raffinierte Tool entwickelt, um jedem zu helfen, den benötigten Code sofort zu generieren.

Wenn Sie es einmal ausprobiert haben, wird es schwierig sein, es nicht zu verwenden. Mit dem kleinen Tool können Sie einen geschichteten glatten Box-Schatten visuell gestalten, aber auch Alpha, Offset und Unschärfe mit individuellen Easing-Kurven optimieren. Und es kommt noch besser: Der Schöpfer des Tools, Philipp Brumm, hat SmoothShadow auch als Figma-Plugin veröffentlicht, damit Sie Ihren Workflow so optimieren können, wie Sie es sich schon immer gewünscht haben!

CSS-Variablen verstehen

CSS-Variablen sind mächtig. Sie kaskadieren normalerweise, erben, ermöglichen die Wiederverwendung von Code und sind äußerst freizügig. Aber was kann man eigentlich in eine CSS-Variable stecken, um ihr Potenzial voll auszuschöpfen? Da einige der Dinge nicht so offensichtlich sind, hat Will Boyd die Möglichkeiten in einem Blogbeitrag erkundet.

Von Einheitenwerten bis hin zu vordefinierten Schlüsselwörtern, Inhaltszeichenfolgen, Bildern und sogar ausgefallenen animierten Werten beleuchtet Wills Zusammenfassung die häufigsten Dinge, die Sie möglicherweise in Kombination mit einer CSS-Variablen verwenden möchten. Eine tolle Übersicht.

Höre nie auf zu lernen

Das Lernen hört nie auf. Und weil es oft die kleinen Einblicke, Code-Leckerbissen und Tipps sind, die sich als die nützlichsten herausstellen, hat Stefan Judis „Today I Learned“ ins Leben gerufen.

Ob es das Bewusstsein ist, dass SVG-Filter in CSS eingebettet werden können, oder wie man Browsern mitteilt, dass Ihre Website Farbschemata unterstützt, für jede Kleinigkeit, die er gelernt hat, gibt Stefan eine kurze Zusammenfassung – nicht nur in Bezug auf CSS, sondern auch in Bezug auf Barrierefreiheit, Bash, Git, GraphQL, HTML, JavaScript und vieles mehr. Samantha Mings Code-Leckerbissen sind auch eine Schatztruhe mit schnellen, aber unschätzbaren Webentwickler-Weisheiten, die Ihnen das Leben leichter machen werden.

Und das ist ein Wrap!

Wir wünschen Ihnen dieses Mal aufrichtig ein wirklich wunderbares Jahr – voller Lachen, unvergesslicher Momente und bemerkenswert umwerfender Erlebnisse. Zum einen können wir es kaum erwarten, Sie online oder persönlich zu sehen, aber eines ist sicher: Wir wissen es aufrichtig zu schätzen, dass Sie Monat für Monat großartig sind, und dafür sind wir Ihnen unendlich dankbar.

Bleib super!