Web design best practices you did not know!

I collated some tiny but very important tricks I learned while working on multiple projects. These are basically CSS and HTML tricks to help fine tune your web design skills and make you stand apart from the rest. So without wasting any more time, you should start reading.

“noopener noreferrer” relation in an anchor link

We use target="_blank" for a hyperlink which we want to open in a new window. Normally this is used to redirect a user to an external website hosted on a different domain (or same domain). Seems easy and valid but this has a big security issue if exposed.

Doing so could cause a potential exploit that allows the new webpage (opened via target="_blank" or window.open()) to control the original parent page – which could result in phishing or similar attacks.

A simple solution is to add a “noopener noreferrer” relation to the anchor tag.
rel="noopener noreferrer"

< a href="http://external-website.com/home" target="_blank" rel="nooopener noreferrer">External website< /a>

Learn more about this by searching on google or visiting this website.

Prevent a non-targeted anchor link to scroll to the top of a website.

While prototyping or designing the website for presentation, we often leave the anchor links blank or put a “#” symbol. The problem with this is that if we accidentally click on the link, we jump to the top of the page.

Try adding “#!” instead. This makes the browser think that it has to jump to an element with an ID but in reality, there is no such ID as ‘!’. So the page view stays there itself.

< a href="#!">Read more</ a>

Have a ‘title’ attribute on truncated labels

It is a good practice to have a long label show ellipses (those 3 dots…) at the end of it. This is usually done to prevent a wrap of the text or avoid shooting it outside the viewport in a small width device. It normally looks like this.

The chicken crossed the road because she…

We can achieve this by a very simple CSS rule.

.text-truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

However, there is a tiny usability problem here. You see, you would never know what actually is written in that long label unless you don’t inspect that element using your browser’s dev tool (very few tech savvy here).

As a best practice, always add a ‘title’ attribute wherever it is permitted.
title="Add the same text as that of the label"

This would result in a tooltip when you hover over the label. Come on, give it a try. Hover over the sentence below.

The chicken crossed the road because she…

Now you can see it, don’t you? :)

text-decoration-skip: ink;

This is actually a very small usability upgrade, particularly for Chrome users. You might be aware that it should be a rule of the thumb that every link that navigates to a different page should always be an anchor tag. The underline makes it prominent and identifiable.

However, the underline overlaps with the descender of characters such as p, q, y. The descender is the bottom trail of those characters which overflows below the baseline.


Notice the underline overlapping with the letter ‘p’

text-decoration-skip: ink; comes to a rescue. Add this to the hyperlink and you’ll see a visual separation between the descender and the underline. Notice the gap on both side of ‘p’


This is especially helpful to improve the accessibility of a website. It’s always a good practice to add this however currently, text-decoration-skip is only supported by Webkit browsers such as Chrome. You can see the compatibility on caniuse.com.

Note: Recent Chrome (v64) update has this feature as a part of the native styling for anchor tags. So this usability tweak has lost its meaning. However, now you actually know, don’t you?


8 point grid system – my favourite

This is indeed my most favourite rule which I always use while designing for web or mobile. It’s quite simple.

Always use dimensions in multiples of 8 viz. 8, 16, 24, 32 and so on. Of course, you should know the table of 8 ;)

Bigger picture:

Whichever UI element it is – button’s padding, margins, space between two containers, icon’s dimension, heights, everything. Always use a unit which is a multiple of 8.

The reason is that the majority of popular screen sizes are divisible by 8 which makes for an easy fit. Also, it has been adopted by major responsive frameworks such as Bootstrap. Learn more about the 8-point grid system.

Another general rule which I follow is resetting the padding and margin and creating custom classes for them. Apply them wherever you need. This gives us complete control over the alignments. You can create your own classes such as below.

.margin-1 {
    margin: 8px !important

.margin-t-1 {
    margin-top: 8px !important

.margin-b-2 {
    margin-bottom: 16px !important

.padding-lr-3 {
    margin-left: 24px !important;
    margin-right: 24px !important

Such is the nomenclature I use for my classes. Notice that I use the digit 1, 2, 3 to define the times 8 would be multiplied with.

Meaning padding-lr-3 will add a left and right padding of 24px (8×3=24). !important overrides all the other rules. be careful to use it wisely.

Stay tuned for more…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s