How To Design for the Web in 2019

The web moves fast; keep up!

Casper Beyer
Jun 5, 2019 · 5 min read
Image for post
Image for post
Photo by Joshua Aragon on Unsplash.

I wrote about how to design for the modern web way back in 2018, but the web moves forward quickly, so those guidelines are already obsolete and outdated as more modern conventions have become mainstream.

Let's break down and go through the most important design principles of designing for the modern web in 2019.

Let Users Know You Have a Mobile Application

This remains the most important principle, and it’s not without reason. Well-paid focus groups have shown that the very first thing a user wants to do when visiting your web site in their web browser is to install a mobile application.

The best way to achieve this is to show a modal dialog that prompts them to install it.

Image for post
Image for post

As an optional step, you may add a button or hyperlink to close said dialog, but it’s important to use some cryptic text, preferably worded to shame the user into compliance.

Tip: If you don’t have an actual mobile application, you can just get an intern to package your website in a WebView with security disabled and ship that!

Implement a Do Not Track Policy

Many modern browsers these days support an HTTP header called DNT, which stands for Do Not Track. This header is meant to signal that a user does not want to be tracked, and unfortunately, this is enabled by default in some browsers like Brave (An open-source ad-blocking browser made by the creator of JavaScript, Brendan Eich).

However, don’t worry, as all is not lost! We’ve found that most users will remove this header when prompted. To handle this, we recommend serving a guide on how to disable it when the header is present.

Image for post
Image for post

Tip: Don’t serve the prompt to disable DNT on the guide that shows the users how to disable DNT as the conversion rate ends up being rather poor.

Implementing a Cookie Policy

Cookie consent is confusing. While it’s not required in most cases with reasonable cookie use, it’s better to prompt the user for consent so we can track everything without fear of repercussions.

Image for post
Image for post

Tip: Don’t serve pages without cookies enabled even when we don’t need them, as it means we can track less personal information, thus we have less user information to sell.

Blocking Ad Blockers

Ad blockers are everywhere and can really hurt your margins, so the obvious precaution is to block ad blockers.

Image for post
Image for post

Chrome is moving to block ad blockers, so if the user is using a browser like Brave, we’ll be able to just claim the user’s browser isn’t modern enough.

Image for post
Image for post

Tip: Don’t tell anyone about Brave, the open-source Chromium-based browser with built-in ad-blocking.

Blocking Non-U.S. Countries and Devices

Between Cupcake nations, GDPR, link taxes, and the Huwaei ban, which we haven’t been able to figure out at all, the best approach is just to block them all to avoid any and all liability.

Image for post
Image for post

Maximizing Your Layout

The days of 800-pixel-wide layouts are gone. Modern displays tend to be widescreen, so make sure to take advantage of the entire width in the layout.

Image for post
Image for post

Tip: Research has shown that modal dialogs that cannot be closed perform better.

Use Notifications

Modern browsers support notifications, so enabling them is a must, but as a fallback, also automatically subscribe the user to a newsletter, SMS notifications, and/or email notifications.

Image for post
Image for post

Tip: Use these notifications to tell users when you have a new version of the mobile application available.

Prompt the User

Sometimes users forget they can sign up. Be sure to prompt them regularly and feature a prominent signup link or button.

Image for post
Image for post

Tip: Also prompt the user when they’re about to leave the website or their mouse cursor leaves the website.

Allow the User to Opt Out

It’s very important that we are user-friendly and aren’t intrusive, which means we have to let users opt out of our constant prompts and modal dialogs.

The best practice here is to put the opt-out settings in a place where the user will easily spot them—typically this is inside one of the “account preferences” pages.

Image for post
Image for post

Use JavaScript

It’s a known fact: All websites require JavaScript.

You might think, “Oh it’s only plain text and a couple of modals.” But in the future? By then, it’ll be many, many more modals, and I’ll promise you right now. When that happens, you’ll regret not making your website an isomorphic application using the latest framework running on a serverless cloud.

Image for post
Image for post

Tip: Don’t render this page with JavaScript.

Don’t know anything about web development at all? Don’t worry you can just attend a bootcamp!

Already a web developer? get the C programming language book here, get out while you still can, there is still time for you!

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store