The Totally Not Sarcastic at All Guide to How to Design for the Web in 2019

Oh hello there, fellow web designer! Sit down, grab a cup of $10 hipster coffee, and prepare to have your mind blown by this cutting-edge guide to building modern, user-friendly websites that are in no way annoying. I‘m a full-stack developer with years of experience (read: I used a JS framework once), so you know I‘m legit.

Shove Your App Down Their Throats

Let‘s start with the most important aspect of any good website: getting users to install your mobile app. I know what you‘re thinking – "But I don‘t have an app!" Well bucko, you better get one! Here‘s a dirty secret: 93% of users visiting your site from a mobile browser are just too embarrassed to admit they really want your app instead.

The best way to help them save face is an aggressive full-screen modal as soon as the page loads:

For bonus points, make that close button as tiny and hard to find as possible. If you don‘t actually have an app, no worries! Just cram your mobile site into a webview, disable those pesky security features, and slap it up on the App Store. It‘s like printing money!

No-App Modal Pro Tips

Use phrases like "WAIT!!!" and "DON‘T GO!" for maximum guilt-tripping
Have it pop up multiple times per session – the 10th time‘s the charm!
Prevent the user from accessing the site AT ALL until they install (or at least click the tiny "no thanks" link)

"Do Not Track?" More Like "Do Not Worry About It!"

Some goody two-shoes browsers have started enabling this so-called "Do Not Track" setting by default. I know, the audacity! Does the user really think they know what‘s best for their privacy? Puh-lease.

With a measly 17% of browsers enabling DNT by default, it barely even counts as a setting. When a user has DNT turned on, what they‘re really saying is "tee hee, catch me if you can!"

Here‘s how you deal with these jokers:

if (doNotTrack) {
  document.body.innerHTML = `

    <p>I‘ll wait...</p>
    <img src="I‘ll-wait-meme.jpg">
  `;
}

Problem solved! They‘ll turn that off quicker than you can say "privacy schmivacy".

Cookie Consent is For Suckers

Look, don‘t get me started on these cookie notification thingamajigs. It‘s just a fad! User doesn‘t want to be pestered about what type of data-collecting treats you leave on their computer. They LOVE cookies!

While technically you only need consent for non-essential cookies, what‘s the fun in that? Better just to cover your bases and pester them as soon as they land on your site:

<div id="cookieWall" class="modal">
  <h2>This site uses cookies!</h2>
  <p>Yum yum, cookies so tasty, me want to eat them all up!</p>
  <button id="acceptBtn">OM NOM NOM COOKIES!</button>
  <a href="/sad-cookie-free-existence">No thanks, I hate fun</a>
</div>

And if they have the nerve to decline? Forget ‘em! They don‘t deserve to experience the glory of your site anyway.

Adios, Ad Blockers!

I know you‘re probably shaking in your boots thinking about all those meanie ad-blocking extensions. But never fear, the benevolent Google is here! They‘re kicking those ad-blocking baddies to the curb…well, at least in Chrome.

With Chrome‘s market share of over 60%, all you have to do is show those ad-block users who‘s boss:

if (isUsingAdBlocker()) {
  document.body.innerHTML = `

    <p>It looks like you‘re using a crusty old browser. Upgrade to Chrome for the best ad viewing experience!</p>
    <img src="angry-website.jpg">
  `;
}

Bam! They‘ll come crawling back, ready to be dazzled by all the blinking display ads their heart desires. Oh, and just for good measure, don‘t even think about mentioning that dumb "Brave" browser with its built-in ad shield. Bunch of hippy-dippy nonsense!

Geo-Blocking: IP Address Discrimination at its Finest

You know what really grinds my gears? All these dang country-specific regulations. GDPR, privacy laws, the "Great Firewall"…it‘s enough to make a developer‘s head spin!

Do you know how much work it would take to comply with all that malarkey? Too much, that‘s how much! Luckily, there‘s an easy solution: just block any request coming from a non-‘Murican IP address!

fetch(‘https://ipapi.co/json/‘)
  .then(response => response.json())
  .then(data => {
    const userCountry = data.country_code;

    if (userCountry !== ‘US‘) {
      document.body.innerHTML = `

        <img src="crying-eagle.jpg" alt="Crying bald eagle">
      `;
    }
  });

It‘s not discrimination if it‘s based on IP address! Plus, everyone knows the USA is the center of the universe and the only country that really matters online.

Max Out That Screen Real Estate

Gone are the days of measly 800-pixel-wide layouts. We‘re living in the era of BIG, BOLD, EDGE-TO-EDGE DESIGN! With screen sizes ballooning up to an average of over 1300 pixels wide, you‘d be a fool not to take advantage of all that primo screen real estate.

Sure, it might cause some horizontal scrolling issues on smaller screens, but that‘s a sacrifice I‘m willing to make. If the user‘s eyes get a little workout scanning your massive layout, all the better!

Full-Width Layout Tips

Use a trendy CSS grid framework like Bootstrap or Foundation
Cram as much content, images, and ads as possible into that glorious expanse
If elements start overlapping, just slap some z-index: 9999 on there and call it a day

The Modal-pocalypse

In the wise words of everyone‘s favorite ogre, Shrek, "Modals are love, modals are life." There‘s nothing users enjoy more than a good, obtrusive modal dialog. Newsletter signups, app download prompts, ads, GDPR notices, paywalls…everything is better in a modal!

But here‘s the secret to truly effective modals: make those suckers STICKY! Once a modal graces the screen with its presence, it should NOT leave until the user surrenders and gives you their email, credit card number, and first born child.

Some elitist designers will tell you modals are annoying and intrusive. Poppycock! Just take a look at these totally-legit-and-not-at-all-made-up statistics:

Modal Type	Conversion Rate
Newsletter Signup	8543%
App Download Prompt	23894%
Full-Screen Ad	5820%
GDPR Notice	1337%
Paywall	31415%

The numbers don‘t lie! If those conversion rates don‘t convince you to slather your site with modals, then I don‘t know what will.

Notifications: Spam ‘Em If You Got ‘Em

But why stop at modals? Thanks to the glorious Web Notifications API, you can now pester users even when they don‘t have your site open! It‘s like the digital equivalent of a 3am telemarketer call.

First, trick the user into enabling notifications with some vague prompt like "Enable notifications for exclusive offers and cat GIFs!" It‘s the only way they‘ll get the FOMO-inducing content they so desperately crave.

Notification.requestPermission().then(permission => {
  if (permission === ‘granted‘) {
    setInterval(() => {
      new Notification(‘Download our App! 🙏👍😻‘);
    }, 1000);
  }
});

But don‘t stop there! Web notifications are only supported in Chrome and Firefox, so you need a fallback for the pleebs using other browsers. Sign them up for an email newsletter without their consent, send them SMS updates in the middle of the night, carrier pigeon, smoke signals, whatever it takes!

Remember: if you‘re not spamming the user on at least 5 different channels, you‘re doing it wrong. Gotta boost that engagement!

The Art of the Exit Pop-up

Picture this: a user has seen everything your site has to offer. They‘ve read your content, admired your gorgeous full-width layout, and closed out approximately 26 modal dialogs. But then…the unthinkable happens. Their cursor starts drifting towards the address bar. They‘re trying to leave!

Never fear, the trusty exit pop-up is here! Use some shady JavaScript to detect when the user‘s mouse leaves the page body:

document.addEventListener(‘mouseout‘, event => {
  if (!event.toElement && !event.relatedTarget) {
    document.body.innerHTML = `
      <div class="modal">

        <p>Sign up for our newsletter or we‘ll be forced to sell your data to hackers on the dark web!</p>
        <img src="cute-puppy.jpg">
        <button>OK, FINE, WHATEVER</button>
      </div>
    `;
  }
});

Hit them with the guilt trip of the century! Pull out all the stops: adorable puppy photos, threats of leaking their data, maybe even a fake countdown timer. Anything to make them second-guess their decision to leave your wonderful walled garden.

Hide the Opt-Out

Let‘s address the elephant in the room: this is all just a tad sketchy. But it‘s fine, we can still maintain a veneer of ethics by giving the user a way to opt out!

The trick is to make the opt-out process as convoluted and difficult to find as possible. Bury those preference toggles deep within the account settings labyrinth. Make the user click through 27 different submenus and enter their password six times to even glimpse the opt-out button.

And if they do manage to find it and turn everything off? Just "forget" to save their preferences and reset everything a week later. It‘s the perfect crime!

JavaScript ALL the Things!

Now, I know what you‘re thinking. "This all seems like a lot of work for a simple site with just a couple static pages". Oh, my sweet summer child. You‘re not thinking like a real web developer!

Sure, your little blog or portfolio site might be dead simple now, but what about when you pivot to becoming a full-scale social network? Or decide to cram in a dozen new features? You‘ve gotta be prepared for SCALE!

That‘s why you should build literally everything as an over-engineered single page app from the get-go. Doesn‘t matter if it‘s complete overkill. Slap a frontend framework like React or Angular on there, grab yourself a trendy backend like Node.js, and shove all that content in a NoSQL database. The more convoluted the tech stack, the better!

A Fond Farewell

Well folks, there you have it. The 10 commandments for building a truly sublime (and totally not annoying) user experience for the web. If this peek behind the curtain didn‘t make you question your faith in the web development industry, then congratulations! You‘re officially jaded enough to make it in this biz.

But if all this talk of modals, pop-ups, and notification spam made you die a little inside, then maybe it‘s time to consider a career change. I hear plumbing is pretty fulfilling (and surprisingly lucrative). In fact, I‘ve got a copy of "Intro to Pipes and Valves" you can borrow to get started. Call me!

And with that, I bid you adieu. Now if you‘ll excuse me, I have to get back to coding a Flutter app that serves up phone call ads using machine learning and the blockchain. The future of the web awaits!