Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬
workshop for the past couple days. Even from home, the learning never stops. Breaking It Down, Breaking It UpThe interviews showed that attendees didn’t want to spend long stretches in front of a screen. So we decided to split our workshops into shorter, manageable chunks and span them across a longer period of time. And rather than packing a few workshop days into a single week, we felt it would be better to space things out a bit more, across weeks, not days.Attendees would have enough time and space to take in all the content, do the homework between sessions at their own pace, and have ample opportunity to ask questions in a friendly, comfortable setting.In the end, we split workshops into sessions of two and a half hours each, held over a few weeks (for instance, running on Thursday/Friday, Thursday/Friday, Thursday, three weeks in a row). Each two-and-a-half-hour chunk would include a focused session of a couple of hours, followed by a 30-minute Q&A.What’s The Right Tooling?We wanted to find a way to design a friendly, accessible experience for everyone. We’ve tried pretty much every single video conferencing tool out there, and Zoom turned out to be the only solution that was fully accessible, supporting keyboard navigation and subtitles out of the box. Of course, we were aware of the security issues Zoom experienced at the time, and we tried out a new release that promised to have patched the holes.The shared live experience was an important attribute. We wanted attendees to feel connected during the entire workshop and sessions in between as well. Since a workshop could span weeks, we set up a Slack channel (yep, another one) for everyone to join before the first session. Attendees can introduce themselves, share sketches and resources, and contact one another and the workshop coach.For every workshop and conference, we set up a collaborative Google Doc for everyone to take notes, together. (Large preview)For every workshop we create a collaborative Google Doc where everyone can find updated links, video URLs, slides, and resources — and also take notes together or ask questions between sessions.To get the ball rolling, we prepared the SmashingConf website, announced two workshops — Rachel’s on CSS, mine on interface design patterns — and sent out a mailing. Both workshops sold out in no time.What’s The Right Pricing?We’ve all come to feel that online content should be affordable, cheap, or free. So much material is just out there online, so that paywalls and high prices have become very off-putting. We didn’t want to make our workshops expensive, but we didn’t want to undervalue the time, effort, and hard work put into preparing and running them.We wanted to be fair: an accessible price and 50 / 50 split with the workshop coach. It made sense, really. The content that coaches have to prepare is exactly the same for an online setting as it is in-person. Attendees are offered the same amount of content, get all the resources of the workshop, and also have dedicated Q&A time after every session. In fact, there are more opportunities for everyone to learn at their own pace and raise their own problems and questions over a series of sessions.We adopted the same pricing we use for in-person workshops. For five sessions of two and a half hours, the cost was $350 for an early-bird ticket, and $450 for a regular ticket. We validated the pricing in usability interviews and went with it. In hindsight, it worked remarkably well.You Need A TeamWe decided early on to have a team member available at all times during the workshop, providing support for latecomers, keeping tabs on progress, and ensuring participants are aware of what’s going on. This is vital, just as with an in-person workshop, as the teacher should be able to concentrate on teaching, not administration.So just before and during every session, there is either Beth or Amanda or Jan helping out with all kinds of technical issues — from missing URLs to frozen cameras to audio problems and support inquiries.Top row (left to right): Amanda, Charis and Jarijn, Rachel. Bottom row (left to right): Phil, Vitaly, TobiOnline, Everything Is Just A Little Bit SlowerNow, in a shared physical space it’s much easier to follow and ask questions, but this kind of interaction can be slower in a virtual space. People need time to settle, or may be experiencing technical issues. And our workshops are accessible everywhere in the world: English isn’t everyone’s first language. Group exercises need to allow for time to shift between tools and windows. Rather than speaking up, some people prefer asking questions via an online chat. The convenience of chat led us to expect more questions than we might receive in person.In general, with group exercises to deal with, an online workshop runs about 10–15% slower than an in-person event, and dedicated time for Q&A means everyone gets to have questions answered.Fast Access To Video RecordingsAs most of us are working from home, our responsibilities and commitments might make it difficult for attendees to devote their full attention to each session as it’s happened. We have put time and resources into getting those video recordings out to attendees as quickly as possible — ideally within a few hours after the workshop session has ended.We know that attendees really need quick access to videos, and indeed being able to watch later, or re-watch a session was one of the important features that showed up in user interviews.What’s The Right Timing?Our largest audience is based in North America; another large share is in Europe. We had to find a way to make online workshops viable to both East and West Coasts in the US, as well as Europe. After yet another round of user interviews, we settled on 6 PM Berlin time, which is noon NYC time and 9 AM San Francisco time.The majority of workshops run to these times. Based on demand, however, we will run some workshops in the morning in Europe which is more friendly to those in Asia-Pacific too.Running Group Exercises OnlineOnce we had an idea of how we’d run online workshops, we started looking closely at how to improve the collaborative parts of the experience. For technical workshops, it was quite straightforward: as a workshop instructor is explaining concepts and coding live, attendees follow along individually, raising questions if they encounter any issues.Things get a bit more complicated once a group of attendees is supposed to solve design challenges together. For our design workshop, we wanted to break all attendees into teams of three to four, and create a space for each team to work on each exercise collaboratively. There are plenty of tools for collaborative sketching and designing, but what’s the best way to run a collaborative exercise for a group of 90 people?We didn’t want everyone to have to set up a new (free or commercial) account, and we wanted to facilitate a shared experience for everyone, irrespective of their level of experience, to contribute their ideas without having to overcome a steep learning curve. We tried a number of wonderful tools, but one that works well is Miro.In one of the first sessions, Joe Leech used Miro to create a digital space comprising a central area for his guidelines and notes, and “tables” arranged around him.We’ve been building on this idea. As you can see above, we’ve arranged tables clockwise around the central area. Each table has three of four seats for attendees to take — including a personal area for sketches and notes. When we start a workshop, we ask every attendee to join a shared Miro board (no registration is required) and “take a seat” at one of the tables by adding their name to the top-right corner of their card.There were plenty of other creative ideas for getting people involved. Some teachers used a shared Trello board for all notes and resources. Some teachers used CodePen. This great collection of critters was brought to life from the students in the SVG Animation workshop run by Cassie Evans — with so many fun and creative varieties to choose from!Was It All Worth It?Absolutely. It was essential to transition to an alternative, sustainable model, and we were happy to be able to connect with our audience as well. One of the most rewarding outcomes is that by running workshops online, we are able to reach people who wouldn’t be able to attend a workshop otherwise.It was wonderful to see people laughing, connecting, learning, and sharing together. It really felt like we were helping one another get through these weird times together, with a truly global experience that’s difficult to achieve any other way.It was absolutely incredible to see how authentic and collaborative an online workshop experience could be. There is literally no distance between attendees and speakers. We are all in the same boat, in front of our computers, in familiar environments, using tools we use for work every day. It feels natural to speak up, ask questions, and have casual conversations via chat or talking.The feedback from attendees reflected this. In many ways, it wasn’t different from the feedback that we receive for in-person workshops — which shouldn’t be surprising. In the end, it’s the same content that is delivered in a different setting with different timing.What’s Next?We’ve run around 20 workshops so far, with plenty more scheduled for the next months. Certainly, we’ll keep running online workshops in this format and at the same frequency even when we can run in-person events again. Our online workshops have opened opportunities we hadn’t considered.Personally, I fell in love with them, especially seeing how diverse, international, and authentic they have been. And frankly, I truly can’t wait to run the next one already. (cm, og, ra, il)Explore more on, and .Fonts by Latinotype.✎ Write for usContact usAbout us (Impressum)Privacy policyMembership loginDelivery timesAdvertise
The interviews showed that attendees didn’t want to spend long stretches in front of a screen. So we decided to split our workshops into shorter, manageable chunks and span them across a longer period of time. And rather than packing a few workshop days into a single week, we felt it would be better to space things out a bit more, across weeks, not days.
In the end, we split workshops into sessions of two and a half hours each, held over a few weeks (for instance, running on Thursday/Friday, Thursday/Friday, Thursday, three weeks in a row). Each two-and-a-half-hour chunk would include a focused session of a couple of hours, followed by a 30-minute Q&A.
We wanted to find a way to design a friendly, accessible experience for everyone. We’ve tried pretty much every single video conferencing tool out there, and Zoom turned out to be the only solution that was fully accessible, supporting keyboard navigation and subtitles out of the box. Of course, we were aware of the security issues Zoom experienced at the time, and we tried out a new release that promised to have patched the holes.
The shared live experience was an important attribute. We wanted attendees to feel connected during the entire workshop and sessions in between as well. Since a workshop could span weeks, we set up a Slack channel (yep, another one) for everyone to join before the first session. Attendees can introduce themselves, share sketches and resources, and contact one another and the workshop coach.
For every workshop we create a collaborative Google Doc where everyone can find updated links, video URLs, slides, and resources — and also take notes together or ask questions between sessions.
We wanted to be fair: an accessible price and 50 / 50 split with the workshop coach. It made sense, really. The content that coaches have to prepare is exactly the same for an online setting as it is in-person. Attendees are offered the same amount of content, get all the resources of the workshop, and also have dedicated Q&A time after every session. In fact, there are more opportunities for everyone to learn at their own pace and raise their own problems and questions over a series of sessions.
Now, in a shared physical space it’s much easier to follow and ask questions, but this kind of interaction can be slower in a virtual space. People need time to settle, or may be experiencing technical issues. And our workshops are accessible everywhere in the world: English isn’t everyone’s first language. Group exercises need to allow for time to shift between tools and windows. Rather than speaking up, some people prefer asking questions via an online chat. The convenience of chat led us to expect more questions than we might receive in person.
In general, with group exercises to deal with, an online workshop runs about 10–15% slower than an in-person event, and dedicated time for Q&A means everyone gets to have questions answered.
We know that attendees really need quick access to videos, and indeed being able to watch later, or re-watch a session was one of the important features that showed up in user interviews.
Our largest audience is based in North America; another large share is in Europe. We had to find a way to make online workshops viable to both East and West Coasts in the US, as well as Europe. After yet another round of user interviews, we settled on 6 PM Berlin time, which is noon NYC time and 9 AM San Francisco time.
Once we had an idea of how we’d run online workshops, we started looking closely at how to improve the collaborative parts of the experience. For technical workshops, it was quite straightforward: as a workshop instructor is explaining concepts and coding live, attendees follow along individually, raising questions if they encounter any issues.
Things get a bit more complicated once a group of attendees is supposed to solve design challenges together. For our design workshop, we wanted to break all attendees into teams of three to four, and create a space for each team to work on each exercise collaboratively. There are plenty of tools for collaborative sketching and designing, but what’s the best way to run a collaborative exercise for a group of 90 people?
We didn’t want everyone to have to set up a new (free or commercial) account, and we wanted to facilitate a shared experience for everyone, irrespective of their level of experience, to contribute their ideas without having to overcome a steep learning curve. We tried a number of wonderful tools, but one that works well is Miro.
In one of the first sessions, Joe Leech used Miro to create a digital space comprising a central area for his guidelines and notes, and “tables” arranged around him.
We’ve been building on this idea. As you can see above, we’ve arranged tables clockwise around the central area. Each table has three of four seats for attendees to take — including a personal area for sketches and notes. When we start a workshop, we ask every attendee to join a shared Miro board (no registration is required) and “take a seat” at one of the tables by adding their name to the top-right corner of their card.
There were plenty of other creative ideas for getting people involved. Some teachers used a shared Trello board for all notes and resources. Some teachers used CodePen. This great collection of critters was brought to life from the students in the SVG Animation workshop run by Cassie Evans — with so many fun and creative varieties to choose from!
Absolutely. It was essential to transition to an alternative, sustainable model, and we were happy to be able to connect with our audience as well. One of the most rewarding outcomes is that by running workshops online, we are able to reach people who wouldn’t be able to attend a workshop otherwise.
It was absolutely incredible to see how authentic and collaborative an online workshop experience could be. There is literally no distance between attendees and speakers. We are all in the same boat, in front of our computers, in familiar environments, using tools we use for work every day. It feels natural to speak up, ask questions, and have casual conversations via chat or talking.
Fonts by Latinotype.