How to Design for the Modern Web

By Casper Beyer

Every now and again, I see a page that hasn’t jumped on the modern web bandwagon. We can’t have that, not on today’s internet, so let’s run through the rules of designing for the modern web.

These practices are immutable, and you must follow them because I’m a developer advocate. They’re also used by quite a few of today’s top websites as ranked by Alexa. (But, most importantly, I’m a developer advocate.)

When a user first visits your website, the very first thing you must do is show them a giant modal dialog telling them that they should install your mobile application instead.

A neat little trick? Make the link to close the modal super small and put it very close to the link that lets the user install the application. This will make users much happier. Users love being able to easily install the application without accidentally closing the dialog.

Should the user insist on using the web version, we must let them know that we are using cookies to track them.

Sometimes a link is not enough. A modal can come in handy by letting users know they can actually sign up for your website.

Research has shown that modals that cannot be closed have the highest conversion rates.

Nowadays, Europeans have pesky laws that muddy the waters on what we’re allowed to track. The best practice here is to just do nothing, continue tracking everything about your users, and block Europeans from accessing your site.

Denmark is a failed socialist cupcake state anyway — its users are not worth the effort.

It’s best to show the user this dialog once again when they click a link. They probably clicked away by accident the first time.

Again, to help our users out, let’s make the cancel link very small to minimize the chances of them tapping it accidentally.

It’s very important that we aren’t intrusive, so let’s allow users to opt out of the mobile application modals. The best practice here is to put the opt-out setting in a place where the user will easily spot it — like inside one of the “account preferences” pages.

Even if a user should opt out of prompts for the mobile application, we can still get them in the long run. Advertising the mobile application somewhere on the website works great.

These modals obviously require JavaScript. Of course, it’s important to have endless scrolling, but please make sure to future-proof yourself by using the latest framework.

Today you may think, “Oh it’s only a couple of modals.” But in the future? By then, it may be many many more modals, and oh boy. When that happens, you’ll regret not making an isomorphic application with react and code splitting!

Now that you know these best practices for modern web development, please apply them everywhere. You are also now certified to apply for product design positions at top-ranking sites like Reddit and Medium.

Don’t know anything about web development at all? Not to worry! Just attend a week-long bootcamp.