From Weather to Web Design: The Experience of Creating the Death to Bullshit Site

Posted on

I have now worked for my brother for about 3 and a half weeks. After learning quite a bit about HTML, CSS, and JavaScript via Codecademy and my brother Brad Frost in about a week and a half, I walked into my first website design (minus Word Press) called deathtobullshit.com. This project definitely interested me since it relates to every single web user out there, taking simple content and adding a bunch of needless advertisements, popups, animations, clickbait, and other shenanigans to ruin the user experience.

The Experience

At first, Death to Bullshit looks like a simple site, explaining what bullshit is and the issues with displaying it on the modern web. The other area of the simple part of the site is the blog, hooked up to Tumblr and displaying many articles, quotes, and other posts discussing advertising and other design principles relating to the amount of rubbish on sites nowadays. Both of these display only the content with links to the various articles on the blog. That’s about it. Then you glance at the Turn bullshit on? link in the top right corner…

…You click on the Turn bullshit on? link…

You are first warned: “Are you sure you want to turn on the bullshit?”

You have the option of clicking OK or Cancel. If you value your sanity, you’d click Cancel. But in this case you want to dive down the rabbit hole, so you click OK

Hold onto your butts…

The site goes from the blandness of a mostly black and white site to a colorful world with style, similar to the Wizard of Oz, if the Munchkins in the Wizard of Oz were obnoxious advertisements and animations.

You are greeted with a banner advertisement at the top…that is also a carousel to make life that much better for the user. But wait...there’s the delayed popup. You better click the Like button or else you will be judged harshly.

Once you get rid of the popup you finally get to see the content…sort of. The Turn on bullshit? link has also become a bright red button that says “Turn this bullshit off” now. The background image is also an advertisement, randomized in case you need to buy a new car or visit Amazon to purchase some unnecessary item. You also get a nice fixed Feedback button fixed to the right side of the browser, in case you have so much time doing nothing that you just want to fill out a feedback form to help us out. The actual content is now styled but remains the same, however in a much smaller container. Scroll down…you won’t be disappointed…

Wait for it…ah, there it is. A nice floating popup fixed to the bottom of the browser slides in, prompting you to like us on one of the fine social networking sites. Keep scrolling down, you can’t get rid of it, but you get to see a nice banner advertisement at the bottom of the content, as well as a very helpful QR code because QR codes are the hippest form of technology.

Keep scrolling…

Not only do you get the nice banner ad at the bottom of the content, you get various clickbait that load in as you scroll down. We made sure these articles were nice and tasteful for the web user. Don’t scroll too far down or else the tastefulness of the clickbait may become a nightmare for some…

When you click over to http://blog.deathtobullshit.com/, you go back to a simple life of simple content before you decide to turn on the bullshit again. You get the same experience as the homepage when you click that oh-so-wonderful Turn on bullshit? button, but you also get more clickbait along the sides. Brad and I used the parallax effect to fly these articles up along the sides while you scroll down, in case you needed to fix your sagging skin right away.

Turn the bullshit off…now. For the sake of humanity do it now!

Thank you. You have returned to a much cleaner version and user-friendly version of the site.

What I Learned:

  • I already knew that ads, popups, carousels, floaters, feedback buttons, banner ads, and clickbait articles were annoying because I am a human. But I did learn how to make these (with a little help from Brad).
  • Creating a website is a lot more difficult than you’d think. To those of you who are web designers and developers, hats off to you.
  • Using other sites like CSS Tricks and Stack Overflow were very helpful for assistance with CSS and JavaScript. The more resources you have for learning, the better.
  • Creating a website without the help of a tool like Word Press was a lot more difficult, but it allowed us to stretch the abilities of the site as well.
  • I learned the basic procedure with creating a site, adding the content first, styling it, adding JavaScript and then going back and forth between these is the general practice.
  • Create your issues through GitHub to help your organization with these different issues.
  • Commit changes through Git-Tower more often than not. It helps organize your paper trail with the site.
  • Do not forget to cross-browser test, because Google Chrome doesn’t represent every browser, especially those with smart phones and tablets. Responsive sites are important.
  • The best way of learning is by diving into it yourself and having some help along the way. The more practice I get, the better.
  • Creating this site had its difficulty but it was fun. I now know how not to make a site essentially.