Web design with CSS-based grid systems

If you are a whiz with CSS and CSS-based grid systems then go ahead and make your own design. But for the rest of us, it’s far easier to take an existing free design and modify it.

What is a CSS-based grid system?

When you look at a website you might see this:

But in the CSS all that positioning is done using columns of cells. So in the CSS it looks more like this:

If we remove the website completely and just look at the 12 column grid, it looks like this:

For mere mortals this is way too complicated. So for us, we simply take an existing design that the customer likes and which is suitable to the type of company and the amount of content – and we customize it.

What’s the catch to using a free template design? You have to link back to the company which provides the template.

This is an example of a free template design

which I then modified to suit the client’s needs.

Take note of some key web design tips:

  1. Keep the contact details always visible
  2. Use the feature area to create a mood, in this case a relaxing mood.
  3. Put the extra information down the side
  4. Use a grid approach to display the most important product visually

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s