#042: Responsive-izing the Top Treehouse Ad

(Updated on )

The ad we have in place is great for large/desktop size screens, but it starts to fail pretty quickly on smaller screens.

We have some breakpoints already in use in this design, but where this design starts to break doesn’t match up with those existing breakpoints. No problem, we can easily make one-off breakpoints just for this.

We make some choices about what can be hidden in the ad when we have less available room. We start by removing the tree graphic and going with just some text. We even use some spans in the text to re-use words in sentences we already have (hide some words, leave others). At the smallest size we bring just the tree back alone.

This particular design will likely change, and then change again and again. That’s the nature of advertising: keeping the people paying for the ad happy while keeping your design integrity.