🎉 Want a Design or Code Review? Sign up for a free video review at PeerReviews.dev »

Memorializing Prince and Print vs. The Web

A giant of the music industry passed on April 21. While I wasn’t a zealous follower of his music, I can tell you the world is a sadder place without Prince in it.

But that’s not what I’m writing about. In the social media memorializing of this titan, I came across this:

Now, I’m not one for arguing on the Internet, but I’ve been energized about web layout recently and had to respond. I fully agree that seeing that in print would have been very striking, but who says we can’t do things on the web? So, I threw together a quick CodePen and responded (Best viewed full screen here). It’s not perfect, but took literally 15 minutes. With time and a bit of finesse, I could have translated that layout in a stronger way.

See the Pen WaPo Prince Print by Bryan Robinson (@brob) on CodePen.light

There’s a perception in the print media that the web lacks the ability for any truly creative layout. That’s just not true. What IS true is that if you chain your developers and designers to “traditional” web layout, they’ll have no way to innovate.

Set them free and we can memorialize Prince like this:

See the Pen Tribute To Prince by Chris Gannon (@chrisgannon) on CodePen.light

See the Pen Purple Rain by Ed Ball (@edball) on CodePen.light

See the Pen Making it Rain (Purple) by Jason Hibbs (@jasonhibbs) on CodePen.light

My point is this. The design can follow the content in subtle or not subtle ways. We can make beautiful layout on the web. Just let your designers and developers off their leash and allow them to experiment.

You May Also Enjoy

Top 3 uses for the ::before and ::after CSS pseudo elements

It’s no secret that I'm a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though. Here are my top 3 uses for them in my every-day development process.

How To: Use CSS Grid to Mix and Match Design Patterns

In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.

Use CSS ::before and ::after for simple, spicy image overlays

Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo