It’s fun to chuck stones into still waters and watch the ripples move. It’s actually quite relaxing, especially if you’re out in the woods and you’re surrounded by quiet. I don’t really know why I find it so mesmerizing and calming, but you can’t buy that kind of tranquility from The Sharper Image or Brookstone. Of course, it’s not really practical to build a pond in your office either so sometimes you gotta just make do.

Spoiler alert – I’m gonna go off on a tangent… 

For me, if there’s no gizmo from The Sharper Image available and I’m stuck indoors trying to locate my center yet again, I’ll cue up some calm simply by listening to The Grateful Dead play Ripple. Or even watch a video by Playing for Change on YouTube of that same song. That’s an amazing piece. But out and out, my favorite versions are with Garcia singing the lead. If you haven’t ever heard the song, well, maybe it’s worth a listen. The first few times you hear it, you may think the lyrics are nonsensical, but it’ll eventually make sense. Maybe.

A ripple or a cascade?

So why are we here today? Ah. Now I remember. To talk about ripples in a completely different environment as we engage in web design and development.

First, let’s consider a scenario where our website has been touched by a couple three people, some of whom were developers and others who might have jumped in trying to make something better without really understanding how the framework was built. And they may well have accomplished their mission, unwittingly setting the stage for chaos later.

Let’s say that initially, as with most sites, ours was designed to take advantage of the ripple effect by using cascading style sheets (CSS). By definition, that sets the stage where ripples work for us. We’ve set styles and added classes and code that allow us to edit our CSS and make quick changes site-wide. So if we decide to change the link color from blue to green, one simple change and we’re done. That’s how it’s supposed to work and that’s a ripple we all love.

But after making that change as we dutifully check each page, we also notice that the link text on our green buttons has disappeared, blending in with the background, having gone green with every other link. And this is really nobody’s fault because the person who originally coded the site wasn’t aware that the links were gonna change to the green of the buttons one day. So a few quick edits to the CSS and we change the button text to white and all is well again.

Too many chefs

As we continue to check things, we notice that not every link has changed. No ripple. Hmmm. Seems somebody added some inline styling on the link itself that is overriding our changes in the CSS document. They clearly weren’t aware that there was a plan in place, or they didn’t take the time to see if there was. They just added their stuff as quickly as they could and went to lunch Timmy. Then someone else down the line copied that and pasted it in a half dozen places. Couple three too many had their fingers in this pie. This may take a bit.

Okay. After we’ve straightened that out by removing the inline stuff and adding our classes, if anyone ever has to change those links again, it’ll be much easier. What’s next? You want to remove the subtle shadows on the images on the site? All 49 of them? Let’s take a look at the CSS. Huh. Nothing there. Looks like all the shadows were added to each image using the built in “add a shadow” feature of the content management system. Super. Now we have to touch each image individually. That’s why it might be a good idea to add styling for the elements that recur throughout the site to the CSS from the start. That way, if we ever decide to get rid of them or make modifications, we need only change things in one central location.

It all comes back to communication

At this point, you may be reading this and scratching your head. That’s understandable. I’m that way with spreadsheets. It’s not necessarily important to wrap your head around the mechanics of all this. It’s just important to understand that sometimes there are reasons changes take a lot longer than expected. And the ripple effect – or the absence thereof – is one of those reasons. And I’ll fall back to a couple of my favorite positions now – plan ahead and if several people are working on your project, make sure they communicate and everyone understands the game plan.

A final note, just for grins and giggles – when I set out to write this piece, I was gonna rail on about the negative aspects of the ripple effect and what can happen when someone decides to make changes to your site and there are unintended consequences, but clearly I went in the opposite direction.