Photoshop has long been the go-to software for creating visually stunning cover images. While these images are often trendy and eye-catching, one major limitation is that search engines can’t read text embedded within them. As a result, any important information or keywords in the text aren’t indexed or searchable.

An alternative approach is generating captions for images using CSS and HTML. However, drawing with code can be challenging. Designing visually compelling content using HTML and CSS is truly an art form.

The challenge we’ve encountered is known as “Lockup Design.” This design is highly effective when you need to fit a long title within a confined space. It’s particularly popular among YouTube cover designers. Given the character limit for titles on the platform, they often face the challenge of fitting lengthy text into that restricted space while maintaining a visually appealing layout.

However, YouTube designers don’t need to worry about indexing or responsiveness since they only work with graphics. In contrast, for web stories, lockup captions play a significant role in SEO, meaning they should ideally be translated into code.

So, the question is: are we doing that yet? The answer is: not yet. While lockup captions in graphic design are already challenging, translating them into code takes it to a whole new level. But the good news is, some web designers are already working at this level. Even better, they’re generously sharing their techniques and insights¹. Below is a screenshot of a lockup caption created by a developer.

So, to answer the question, “What are we doing?"—we’re learning. With every story, we’re getting closer to mastering the replication of lockup design through code.