After finishing the refresh of my website I found myself with a crisp empty sidebar. No problem, I’ll find something useful to put in there over time, or then I’ll just leave it empty. But wait—why don’t I throw an AppSumo badge there? After all, I find some of their products interesting and Noah and Neville make the best videos ever, their energy is infectious.

Hold on. That looks crap!

A few clicks and a copy-paste later I’ve got my sumo stamped badge in the sidebar. Imagine my dissapointment at the crappy treatment of the logo/border at the bottom. Looks really substandard on a coloured background.

Never mind, I jumped up and ran outside to switch on the Sumo Signal—think Bat signal just with a fat sumo rather than a bat— but quickly realised I don’t have one, it was also wet and cold so I went back inside. Instead I settled for a support email. I got a nice enough response a day later saying thanks and we’ll forward it on to our designer. Of course, I hardly think they’d consider this a high priority item, if indeed they want to do anything about it anyway. Here we are two months later at some point in the future and the same problem still persists, so I’ve got my answer there.

No problem

Fixing a little thing like that seemed simple enough so I got stuck in taking the badge apart.

Ignoring the nasty usage of tables I found the root cause of the problem is a background image. Simply changing that image to have the AppSumo logo inside the border rather than over it would solve the problem.

Why stop there?

Indeed, why stop when I could easily fix a few other annoyances while I was at it. Firstly: usage of tables.

I can see why they’ve gone with tables, it’s the quickest, most cross browser consistent method to use especially when you’re trying to vertically align some text in a container. However, with a little effort I think you can probably get some good browser coverage using proper HTML and CSS.

If code is your thing then check out this little Codepen demo which shows the HTML and CSS I used. It would seem you can make the badge without the use of tables, sure we end up using display:table and dislpay:table-cell to get the alignment sorted so one might argue why bother. But, this is all about laying the groundwork for…

Make it fatter where allowed

Now I’ve got that in a nice managable chunk of code it’s time to bring it bang up to date and cutting edge by making it a little more responsive. Obviously 125×125 is some industry standard advert size, but I’ve got more room to play with and nothing to put next to it so I’d really like it to fill out the entire column. Whilst I could make it go from it current state to something bigger, I’ve skipped that step mainly because I’m lazy, and built a reimagined fluid Appsumo badge.

Apart from an extra img tag, the code is identical so it would be easy with the help of media queries to style it starting in its current state and then changing to this new one at predetermined size. Again, if you’re interested in the how, here is the code example on Codepen.

Advanced Options

Of course, not all of this will be to everybodies taste, some Sumo-lings probably don’t like chilli on their Tacos. I’d say let’s package this all up in an advance configuration tab—bound to appeal to the geekiest of Sumo-lings. Offer up the current standard first, albeit with the new background image, and then in the advance tab allow people to customise their badge including selecting the responsive ad and perhaps a couple of colour versions to work on varying background colours.

Validation

Fat Sumo and Chief Sumo are both big fans of validating a business idea. I see no reason why this couldn’t be validated as well, a quick straw poll perhaps?

All I’m validating here is the original problem, the lines cutting through the logo rather than acting as a border.

I threw a quick survey together, which you can see here, feel free to add you two penneth/cents. I tweeted the world with a lazy web request:

Hey #lazyweb, help me out and answer me one quick question: www.surveymonkey.com/s/QKLDVSV  A simple A or B. Your time much appreciated.

— Ben Goodyear (@bengoodyear) April 18, 2012

A stunning 9 people responded to the survey, and the results are 44.4% for the current and 55.6% . In conclusion, 44.4% of the people who took the survey have bad taste :).

Or, being more scientific about this our Fat Sumo Nev, sums up a view I might have overlooked:

@bengoodyear Could barely tell differences. I try to focus more on the message than the small aesthetic details!

— Neville Medhora (@nevmed) April 18, 2012

Most people looking at this, as much as I hoped they wouldn’t, are focusing more on the actual content than subtle differences between the layouts. Of course, this is what you’d want if you were the advertiser: people reading your message.

However, the right to advertise is granted by someone who will probably look beyond just the message. I designed this website, I’m very conscious of everything I put in it. Does it fit the design I am trying to maintain?

In this case—no.

It doesn’t matter what the message is, if I don’t want it on my website then nobody will get to read it.

Final thoughts

I’m sure most people couldn’t really care less about this, and as it has taken almost a year for me to finish this post I guess I don’t really either! Good for them (and me), they are probably focusing on more important things! But hey, details like this bother me. It was fun, I fixed the problem, improved on the orignal and then took it above and beyond. I feel much better now.

Alas, I’ll not be using an AppSumo badge until it changes or I switch to a white background!