Skip to main content

videocall.guide

• Tagged Portfolio, Performance, Production, and Livestream

Since the start of the pandemic, I’ve been involved in producing lots of live streamed events. These involve the guests joining a video call with me, I mix the video and audio, and broadcast it to a platform like Facebook Live.

Nowadays, people are mostly used to video calls, but there’s still some little things you can do to help you look your best. I’ve found that supplying some pointers can be a helpful reminder for people and prevent some types of issues arising.

Back when we first made the switch to online, I made a one-page PDF to help people perfect their setup before an event. The PDF wasn’t ideal though — more attachments to handle, harder to update, and so on.

Once it was obvious I’d be doing a lot of events, I created videocall.guide.

videocall.guide is a super simple, single-serving website intended to be an easy, accessible way for participants to improve their appearance on screen. There’s one page with 6 handy tips. Feel free to share it with your cast if you’re producing events at the moment, I hope it’s helpful.

How it’s built

This was very much a learning opportunity to find out about new things I can apply to my other websites. I wanted to get a bit more experience with SVGs and spend time trying to improve the site performance.

First up, getting a super low request count. The site’s based on Bootstrap, but I’ve slimmed it down to only the lines I need, and inlined the CSS in the <head>. The icons are all SVGs, so they have a super small file size and scale to any display size, and are also inlined in the document. The icons were originally PNGs, so it was a bit of a task to get them changed into SVGs. I found a variety of online tools, most of which seemed to be exactly the same thing on different domains, and used one of those. There’s quite a spectrum of quality in those services. Since then, I’ve got a copy of Affinity Designer (it was on sale!), so in future that’d probably be my first port of call for this sort of thing. The resultant images were put through the wonderful ImageOptim to further trim the size down.

To load the main page, you only need two requests: one for the HTML and one for the bookshelf image at the top. Your browser may choose to make some extra requests for favicons, but it certainly doesn’t need to. The site has an aggressive caching policy, and is cached on Cloudflare’s edge, which means it can be served super fast. The whole site weighs about 120 KB. I could improve this further by minifying the code. To be honest, I’m not sure why I haven’t done that yet. I’ll probably get around to it soon.

Within the bounds of Bootstrap’s desire for <div>s everywhere, I’ve used semantic HTML elements like <header>, <article>, <section>, and <footer>.

Something I looked at was using the WebP image format for the bookshelf header image. I’ve not done that for now since the image is a CSS background, and that means I can’t offer up multiple formats in the markup. At the time I was working on the site, I didn’t feel WebP had wide enough browser support to make it the only option, so I’ve stuck with a JPEG for now. It’s sized rather small though, since it’s very washed out to keep the text legible and doesn’t need to be high quality.

One thing I’d like to do is add some structured data to the site — I’ve been looking into it recently, and it’d actually make a lot of sense for this page. Microdata can be used to mark up the HTML as a HowTo, which might help with SEO and general machine-readability.


Next post: Serverless Static Site Search

Previous post: Content Security Policies and Content Delivery Networks