The Polish Checklist for Web Developers

It’s not hard to tell a good website from a great website. You can feel it. While most designers consider proper word choice, typography, and spacing, there are some details that are often forgotten. This is a list of tweaks to consider whenever you build a website. Put together, these tips can go a long way towards making a website feel polished.

I. Use Color to Extend Your Brand

When used correctly, color can make your site more immersive and help you better communicate your brand.

Text selection styling

Read more on CSS Tricks.

One easy way to add a little extra punch to your website is setting a custom selection color, changing the stock default semi-opaque blue background when you highlight text to something more exciting. Here’s how:

::selection {
    background-color: #FFDD33;
    color: #222222;
}
::-moz-selection {
    background-color: #FFDD33;
    color: #222222;
}

Left: The default blue text selection on www.spotify.com. Right: Yellow selection color on worldaftercapital.org.

Chrome Theme Color

Read more on Google Developers.

Chrome for Android allows developers to change the color of the URL box and status bar to fit our website, by changing the theme color. It can be set to any hex value using one simple meta tag:

<meta name="theme-color" content="#000000">

For colorful or dark-themed websites in particular, changing the theme color of a site can make it more immersive.

Left: The default white URL box on www.callofduty.com. Right: A subtle black URL box on arstechnica.com.

Overscroll Color

On some web browsers, like Chrome and Safari for Mac, users can use inertial scrolling to scroll beyond the top of the page and below the bottom of the page, a behavior called overscrolling. This behavior is not a web standard, rather it is defined independently by each browser that implements it. Most browsers do now allow developers to customize this behavior at all but some do (Chrome and Safari for Mac, for example). To control the overscroll color of your page, simply set the background color of the body tag:

body {
    background-color: #3399FF;
}

Especially for simple designs, with large blocks of solid color, the correct overflow color can help emphasize the hero content on your site.

Left: The default white overscroll color on danrschlosser.github.io/substituteteacher.js/. Right: Blue overscroll on minimill.co.

Another option would be to disable overscrolling entirely using CSS or JavaScript. I wouldn’t recommend it because it can be confusing, but it isn’t a bad option.

II. Rewarding Interaction

On a web page, interaction is dialogue with your users. Here are some simple ways to make your site more conversational:

Hover, focus, active, and tap states

Read more on Google Developers.

There are many ways to interact with an element, and you may want to react to these interactions differently. Elements can be hovered over (using a mouse), focused (using the tab key on your keyboard or a screenreader), made active (when pressed), or tapped (on a touch device). You can use pseudo-class selectors to style these states:

Default, hover, focus, and active states, from Google Developers.

.btn {
  background-color: #0087F7
}
.btn:hover {
  background-color: #006DDE
}
.btn:focus {
  background-color: #0053C4
}
.btn:active {
  background-color: #0039AA
}

On devices that allow this to be overridden, there is a highlight color that appears when you tap the element. Many choose to hide it entirely:

.btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Left: Unaltered -webkit-tap-highlight-color on https://minimill.co. Right: The same site with a transparent highlight color.

Transitions

Read more on Mozilla Developer Network.

Once you have created different visual states for hover, focus, and active elements, it’s important to consider transitioning between these states. The most basic CSS transition syntax is as follows:

transition: [delay] [easing] [property];

For example, to put a subtle transition on all properties, you would include:

transition: 0.3s ease all;

Three buttons with different hover states and no transitions.

The same buttons with “transition: 0.3s ease all;”.

FastClick

Read more on FastClick.

Making your website fast and reactive on mobile devices is extremely important. One way to make every part of your site feel a little faster is to use FastClick, a JavaScript library that removes a 300ms delay between the physical touch of the screen and a click event being registered. Many touch browsers insert this delay in order to determine whether or not a touch is a tap, drag, or long press. For most of your site however, this won’t matter, and you can safely remove it.

Implementing FastClick is quick and easy:

<script src='/path/to/fastclick.js'></script>
<script>
    window.addEventListener('load', function() {
        new FastClick(document.body);
    }, false);
</script>

Edit:
On some browsers, it is also possible to remove this delay by disabling zooming using meta tags, although this behavior is new and may not be reliable.

<meta name=”viewport” content=”width=device-width, ..."> 
<!-- OR -->
<meta name=”viewport” content=”user-scalable=no, ...">

Both using FastClick and meta tags disable double-tap to zoom, which may be an accessibility concern. Another option is to use the currently not well-supported touch-action property:

.btn {
    touch-action: none;
}

Thanks to Chen Ye for this note!

III. Keeping Consistent

There’s nothing more embarrassing than having your site look different on different devices. Here are some tips to make sure your design is consistent across browsers and screen sizes:

CSS Resets

Read more on Meyerweb.

Most browsers include a set of default styles (font size, margins, input appearance, etc) that are applied to web pages that don’t override them. With a CSS reset, you can override these default styles, giving you the same base set of element styles to work from, no matter the browser.

The most popular CSS reset is Eric Meyer’s Reset CSS. It’s short and sweet, and will handle the vast majority of browser defaults.

Edit:
Another great option is to use Normalize.css, which aims to “Preserve useful browser defaults” and make them the same in all browsers, rather than unsetting all styles like CSS resets do. Read more about the difference here.

Thanks Stefano Contiero for the suggestion!

Form Styles

Read more on Google Developers.

Eric Meyer’s Reset CSS doesn’t cover everything however. There’s a wide variety of default styles that web browsers add to form inputs and buttons, which can be challenging to compensate for.

For example, it’s pretty rough when you think your form looks good and then iOS’s idiosyncratic default stylesheet messes that up:

Left: A simple form on a desktop browser. Right: The same webpage on Safari for iOS.

There are a few ways to deal with these form issues. Some developers use yet another CSS reset, like this one, or this one, or this one. Others feel that these resets are too broad, and aren’t a good idea, opting to test their website on different devices and do one-off bug fixes. Either way, the goal is the same: your forms should look the same on all devices.

Conclusion

Hope you found something new to think about for your next site! For your reference, here’s the TL;DR:

Use Color to Extend Your Brand

• Text selection styling
• Chrome theme color
• Overscroll color

Rewarding Interaction

• Hover, focus, active, and tap
• Transitions
• FastClick

Keeping Consistent

• CSS resets
• Reset form styles

Did I miss anything? Have a good resource to share? Post a response here or let me know at @danrschlosser on Twitter.