Skip to main content

For the SmashingConf newsletter:

Behavioral Design Workshop

Susan Weinschenk
Susan Weinschenk

Dataviz Accessibility Workshop

Sarah L. Fossheim
Sarah L. Fossheim

Designing Websites That Convert

Paul Boag
Paul Boag

Advanced Design Systems

Brad Frost
Brad Frost

Live UX Training — Smart Interface Design Patterns

Vitaly Friedman
Vitaly Friedman

Designing Better Products Masterclass

Stéphanie Walter
Stéphanie Walter

Design Patterns For AI Interfaces

Vitaly Friedman
Vitaly Friedman

UX Strategy in Action

Susan Weinschenk
Susan Weinschenk

Theming Design Systems

Samantha Gordashko
Samantha Gordashko

How To Measure UX and Design Impact

Vitaly Friedman
Vitaly Friedman

The New CSS Toolkit

Kevin Powell
Kevin Powell

Figma Workflow Masterclass

Christine Vallaure
Christine Vallaure

Deep Dive On Accessibility Testing

Manuel Matuzović
Manuel Matuzović

For the Smashingmagazine newsletter:

HTML for the newsletters:

How to use:

  • Open dev tools
  • Copy this entire table from this page
  • Paste the table in the newsletter
  • Add table rows to make rows of two workshos by adding </tr><tr> after every two blocks
  • Test newsletter and send out!
  • Make sure the CSS from below is in the style tag of the newsletter

This is the CSS for the event newsletter:

.workshop-row {
  width: 50% !important;
}

@media screen and (max-width:640px) { .workshop-row { display: block !important; width: 100% !important; } }

.ws { display: block; border: 1px solid #eeeeee !important; border-radius: 11px; padding: .5em .6em !important; line-height: 1.2; transition: all .2s ease-in-out !important; height: 96%; margin: 0 20px 30px 0; }

.wsduration, .wstime { margin-right: 2px; }

.ws__time { display: inline-block; font-size: 16px; }

.ws__duration { display: block; }

.ws–dev { background: linear-gradient(41deg, rgba(255, 0, 132, .2), rgba(255, 255, 255, 0)); }

.ws–dev:hover { border-color: #aa1994 !important; }

.ws–dev .ws__tag { background: #aa1994; }

.ws–dev .wsduration, .ws–dev .wstitle { color: #aa1994; }

.ws–design { background: linear-gradient(41deg, rgba(255, 0, 43, .2), rgba(255, 255, 255, 0)); }

.ws–design .ws__tag { background: #df1134; }

.ws–design .wsduration, .ws–design .wstitle { color: #df1134; }

.ws–design:hover { border-color: #df1134 !important; }

.ws–css { background: linear-gradient(41deg, rgba(0, 126, 255, .2), rgba(255, 255, 255, 0)); }

.ws–css .ws__tag { background: #0168b8; }

.ws–css:hover { border-color: #0168b8 !important; }

.ws–css .wsduration, .ws–css .wstitle { color: #0168b8; }

.ws–ux { background: linear-gradient(41deg, rgba(0, 255, 197, .25), rgba(255, 255, 255, 0)); }

.ws–ux .ws__tag { background: #148771; }

.ws–ux:hover { border-color: #148771 !important; }

.ws–ux .wsduration, .ws–ux .wstitle { color: #148771; }

.ws–free { background: linear-gradient(41deg, rgba(255, 87, 0, .2), rgba(255, 255, 255, 0)); }

.ws–free .ws__tag { background: #bd4300; }

.ws–free:hover { border-color: #f55700 !important; }

.ws–free .wsduration, .ws–free .wstitle { color: #f55700; }

.ws–workflow .wsduration, .ws–workflow .wstitle { color: #5a5ec8 }

.ws–workflow .ws__tag { background: #5a5ec8; }

.ws–workflow { background: linear-gradient(41deg, rgba(0, 8, 255, .2), rgba(255, 255, 255, 0)); }

.ws–workflow:hover { border-color: #5a5ec8 !important; }

.ws__title { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 0 0 .5em 0 !important; }

.ws__img img { border-radius: 50%; border: 5px solid #fff; width: 70px; min-width: 70px; display: inline-block; margin: 0; }

.ws__cover table { width: 100%; }

div.ws__speaker { font-size: 16px; font-weight: 700; }

div.ws__meta-data { font-size: 16px; }

.ws__tag { color: #fff; text-transform: uppercase; border-radius: 11px; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; font-weight: 700; font-style: normal; padding: 5px 7px; }

.l-workshops { margin: 10px 0 30px; }