Thursday the 16th of May was the beginning of another Frontend United. That name may suggest a radical politically themed group of activists; however, it is nothing of the kind. The only thing extreme about it arguably may be the experimental CSS some hosts present.
Frontend United is a conference of three days in Utrecht (The Netherlands) for developers and designers. One day before the 2-day conference, there are workshops. During the conference topics like page speed improvement, new techniques such as CSS layout, but also in Interaction Design.
I attended a workshop by Vitaly Friedman from Smashing Mag. Or Smashing Vitaly as I incorrectly call him. If you don’t know Smashing Magazine, take it from me, it’s a big deal. This guy knows a lot about web projects (websites, apps, etc.). A lot.
The workshop I attended was called “Front-End + Interface Design Bootcamp”. For 350 euros, I would learn from Vitaly Fridman about Front-End + Interface Design.
Have you ever heard of the Navy Seals’ Hell Week? I booked this workshop with that in mind. There were workshops on CSS Grid Layout and Vue.js, which I actually should have attended. But no. I signed up for the hell week for nerdy seals.
By 9 AM, I sat in the room along with other designers/developers, which was prepped for our workshop. The internet wasn’t working, so I had to listen instead of cleaning out my downloads folder. I don’t know if I was having withdrawals from no internet, but I must say Vitaly keeps a swift pace. This must be the boot camp part, in the title. So it actually was some kind of hell-week-for-nerdy-seals, but then one full day.
I wasn’t the only one. Thank goodness. Every time Vitaly asked a question, hardly anyone dared to respond. The lack of crickets chirping made things even more awkward. It doesn’t seem that nerdy seals interact much, Vitaly.
While Vitaly swiftly moved from tip to insight during his presentation, we also were given some nifty exercises. Exercises I wasn’t up for, but they did make me think.
One of those exercises was a case, with many fonts, a lot of imagery, colors, and features. The pretend client of this case asks you to help with a redesign and also to make it responsive. How would you deal with this?
Then a gentleman in the room spoke up. He pointed out that this depends on how the site is maintained and by whom. Are there changes made every month? And who makes these changes? What type of CMS are we using? How many designers are involved? Are they going to have to change every SVG?
All valid questions, unknown gentleman! And also, why didn’t I think about these things?
The other exercises had us adapting web components to mobile versions.
Divided into groups with the people you sat with, we worked on each of these exercises by making wireframes. One of those components is the unpopular table. There’s hardly anybody that embraces the challenge of making tables responsive. Meanwhile, for 350 euros, I was doing so. Thankfully, Vitaly also had suggestions.
We had about 10 minutes to work on these cases. After we were done with our exercise, we’d hand our creation to the group in front of us. The group behind us gave us theirs.
We kept circulating and assessing designs until every group had seen every group’s outcome. In the end, you got your own wireframe back.
I’m not at my best when I am pressured into making interactive timelines, tables, and customization feature for cars responsive. My group didn’t get to see my best side. Sorry, group.
Just to get a new dynamic, I would rather have a different group for each exercise. Maybe learn and to meet new people as well. It would have compensated for the fast pace.
I did pick up a few things, though. Vitaly also shared a lot of resources from his dropbox, which I will not share. Because that’s not cool.
Would I do this again? Yes, I would love to go to a workshop. As said, I would have had more interactive, less speedy, and arguably, the amount of information was a lot.
I saw Frozen Rockets Academy has a cool one in June with Josh Clark: “UX Design for Machine Learning and AI“. I am unable to attend these because I will be on a plane. Wish I could be there!
Here’s my list of what was mentioned by Vitaly:
- Facebook has a 2G Tuesday to test their application on slow internet
- Make a plan for slow internet
- Have a performance budget
- Use Notion for namespacing. Check out Notion.so
- GZip is slow. Instead, use Brotli or Zopfli
- Use Lepton to load images faster
- Use image compression efficiently; this will help load speed performances.
- Use background images as a mask
- Take out the colours of your image and apply CSS filters to add the colours that way.
- Blur out the unneeded aspects of an image. (e-mail me if you’d like to know what I mean by this).
- Something about progressive JPEG
- WEBP doesn’t have a lot of support yet.
- Traced SVG Placeholders
- Machine Learning to help you optimize your images
- Video: Progressive loading
- AV1 is a new thing, it loads faster
- Explanations of the difference on codecs, audio, video and the container in a video file.
- Put your video on autoplay and muted.
- Fonts: Something about WOFF/WOFF2
@font-facewill only be used on pages where the assigned font is used.
- Use a fallback font
- OTF will disappear.
- UDP vs UTP
- Progressive CSS. Divide your CSS files in chunks. I did it after the workshop. No clue if it helps with performance, but this is what it looks like.
- Some stuff about inline caching, web workers and web assembly
- On average, people spend 3 hours on their phone. For me, that’s probably double.
- On average, people check their phones about 80 times a day.
- The performance budget on mobile is 30 seconds. Kind of generous, in my humble opinion.
- Thumb Driven Design. 👍
- Fingers rarely hit the target on mobile devices.
- Let’s see what Amazon or AirBnB does: “They can afford the luxury to be wrong. You have to fight for every user”.
- Sliders are cool for finances or 3D rendering toggles.
- Tables: tilt de headings on mobile.
- Email: change the font-size if the copy doesn’t fit in the alt= attribute.
- Email: it is possible to load a live twitter feed in an email newsletter.
- Email: live counter by way of CSS
- Email: Interactivity
- Bulletproof Emails
- Be skilled enough at coding newsletters, call yourself a Sr. Full-Stack E-Mail Developer. 🧐
- Wrapping up: ahhh. It will never be perfect. awwww 🥺
- Wrapping up: Vitaly is an almost-perfectionist.
- Wrapping up: if Vitaly has a problem with something, most people also have a problem with the same thing.
I hope you liked this article. Please feel free in the comment box below or send me a message if you don’t like to have your opinion out on the internet. It’s all good!