Blog

Web design in the old days

In the old days (well, 1997 until about 2000) we used to design websites in a thing called a table. This is a bit like an Excel set of cells. So all websites used this for the basis of the design but it was inflexible.

The page sizes were restricted – it didn’t really matter back then as we all had small monitors that had a screen size of about 760px (pixels) wide.

Any colours added to the website design were done on a page by page basis, so if the client decided they wanted to change the colour of the text this had to be done for each block of text. And then if the client decided they preferred it as it was, we had to change it all back again!

CSS (for those interested, it stands for Cascading Style Sheet) was the golden ticket and still is. With the use of CSS, the style of the page (colours, fonts, border widths and colours, background colours and so on) can be changed in one place.

The stylesheet is a central page of code that controls the whole web site, so one change affects everything in one go.

CSS has been developed over the years and now offers lots of different styles that we can make use of.

Examples of CSS in web design

A great example is the corner radius. There was a time when curved corners were ‘trendy’ in web design to get away from boring right-angle corners.

There was no way to do this with CSS and so we had to prepare little bits of graphics to form the corners. Easy enough – until the client wanted a different colour or perhaps a different angle.

CSS overcame that by having this code added to its library – border-radius – there’s even a great tool to calculate the css border code – and used together with the background property, we can use this:

.content {
border-radius: 10px;
background: green;
}

So you can see that an easy change can affect the design in all places where the curve effect is used.

There are lots of useful CSS rules going on in the background. Here are some more examples:

Gradient backgrounds

.diagonal-box {
background-image: linear-gradient(45deg, #654ea3, #eaafc8);
}

Heck, we can even fade text (h1, the heading in this case) from white:

@keyframes fadeOut {
from {
opacity: 1; /*controls the initial state*/
}

to {
opacity: 0; /*the new state, after the delay below*/
}

}

h1 {
animation: fadeOut 2s ease; /*the effect and how long it takes*/
}

And there’s more – we can create shapes, animations, text effects and styles that work on a mobile but not on a desktop.

But that’s for next time … and there’s more tips here.