Lynn Fisher on how she started a CSS movement called SingleDiv
In 1994, a young Norwegian developer named Håkon Wium invented CSS to solve the problem of not having a way to stylize things on the web. That was 26 years ago!
Since then, CSS has had a wild rollercoaster ride with inventive creators manipulating websites to push the boundary of design and art. In 2014, Lynn Fisher took things to a different level. She started an art movement to push herself to be creative with one single div. That sparked many designers and developers all around the world to roll up their sleeves and take the chalenge. I got to ask Lynn about the origin of the CSS challenge.
Single Div has become an ongoing gallery of web art defined by constraint. What was the genesis and the inspiration behind it?
In 2013 I attended CSSConf and saw Lea Verou give her talk on the The Humble Border Radius. It sparked a lot for me in thinking about CSS differently and showing me how much room there was for creativity.
When I got back home, I started working on a passion project called WhyAZ with my team at meltmedia. We wanted the site to have some technical complexity that might interest other developers, so I decided to do all the illustrations in CSS. At the time, I limited those illustrations to two HTML elements each. This felt reasonable because the markup felt similar to other icon systems I’d used previously. It was a super fun and challenging project.
Using this constraint of limited markup reminded me a lot of exercises I was assigned during art school. We were often asked to create with limited tools, like painting with only primary colors or without using black. While difficult, it forced us to think creatively and to appreciate and stretch our existing tools. I found that translated to CSS really well.
So I started A Single Div as a way to continue to push myself and learn and stretch what I could do with the medium. And even after many years, I’m still learning and discovering new ways of doing things.
The tradition of a single div is now 6 years old. What has been your favorite memory of people who have taken part and produced art for the site?
Can’t believe it’s been that long! All of the art on a.singlediv.com is my work and it doesn’t currently take contributions. I would have loved to make it a community project, but I knew it would make it harder for me to maintain in the long run.
But! I’ve seen a lot of really amazing artists and developers creating their own single div artwork on personal sites and on CodePen. It warms my heart seeing so much cool CSS creativity. I wrote a Mozilla Hacks article many moons ago and it’s amazing that folks are still discovering it now and it helps them jump into trying CSS art for the first time.
In your CSSDay talk, you walk through how a piece is made with an image reference. It was fascinating to watch. Do you think the future of web tools will allow more control of CSS? Webflow feels like one step closer.
It sure seems like it, but design tools moving closer to the code has been a challenge my entire career. Early on, I was convinced designers needed to write CSS and then later I was convinced we needed a tool that would allow designers to work within a GUI, but it could spit out developer-quality CSS. And now I’m kind of on the fence about it all.
It’s a technical problem but it also boils down to communication, expectations, and process. The very cool thing about newer design tools is the emphasis on collaboration, feedback, and iteration. That to me feels like such an important improvement. And if the artifact created by the design tool is something that goes into production, that’s also very cool.
What was your personal journey of finding frontend design and development?
I distinctly remember a friend of mine showing me GeoCities as a teenager. I was like, “I can make websites?” It was a revelatory moment for sure.
I dabbled with HTML and CSS on GeoCities, making fansites for local bands I liked. Then I moved onto LiveJournal where I started using Photoshop to create avatars and graphics and really leveled up making custom CSS layouts. And then I graduated to MySpace profiles.
It was mostly a hobby for me while I attended art school, but after graduating I realized it could be a full-time job (which wasn’t always true for traditional art). I was hired as an “HTML Web Builder” by a local company, where I was able to learn a lot really fast from some really smart developers who I still collaborate with today.
A couple years in, I was able to “switch” to designer (things were still really separate back then), but the company was really cool with me continuing to do both and they encouraged me to influence new processes and roles that connected design and development.
I absolutely love the quirky and super interesting projects you work on. How do you come up with ideas for these projects?
Thank you! The ideas usually present themselves as things I can’t stop thinking about. Maybe an idea pops up repeatedly so it sticks in my mind or I go to search an idea but I can’t find a good resource for it. My projects tend to arise from me saying, “I wish this site existed so I can go look at it.”
My projects usually include some research or data collection so I can learn something new. They represent patterns I notice and love and want to have record of (like airport codes, the food on The Good Place or David’s sweaters from Schitt’s Creek). I joke that my projects are all glorified fan sites, but they really are! Love letters to the things I enjoy and want to share with others.
