Image for post
Image for post

The Polish Checklist for Web Developers

Dan Schlosser
Mar 28, 2016 · 6 min read

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.

Image for post
Image for post

I. Use Color to Extend Your Brand

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

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;
}
Image for post
Image for post
Image for post
Image for post
Left: The default blue text selection on www.spotify.com. Right: Yellow selection color on worldaftercapital.org.

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.

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

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.

Image for post
Image for post
Image for post
Image for post
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.

Image for post
Image for post

II. Rewarding Interaction

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

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:

Image for post
Image for post
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);
}
Image for post
Image for post
Left: Unaltered -webkit-tap-highlight-color on https://minimill.co. Right: The same site with a transparent highlight color.

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;
Image for post
Image for post
Three buttons with different hover states and no transitions.
Image for post
Image for post
The same buttons with “transition: 0.3s ease all;”.

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!

Image for post
Image for post

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:

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!

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:

Image for post
Image for post
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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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