Posts Tagged ‘Web design’

Well, since I plan to develop a social web application (Squirrel2), I need web pages to be designed, right? This is the problem. I have implemented a fair number of web pages in the past, but all they were designed by other folks. Yes, I understand quite well HTML, CSS and JavaScript. But still, this is by far not enough to consider myself a real web designer. In addition I don’t have any artistic skills. So there is no chance I can design a good looking web page.

The most obvious solution would be to order the web development to a professional web designer. But this is not allowed by conditions of my one year challenge

Here I show you how I have solved the problem.

To start with we need a web page we like and which is similar to what we envisage ourselves for our website. Keep in mind, we can’t just save and use a page we like! Web pages, pictures, scripts etc are subject to copyright and could not be used without owner’s permission.

Luckily for us, there is a number of websites where one can find web templates that can be used free of charge thanks to their authors. I have used this one. It contains great variety of web templates, so there is good chance you can find something similar to what you are looking for. I have chosen this template, courtesy of Free CSS Templates (web design) and Mark James (icons). The template comes with Creative Commons Attributions 2.5 license and as authors wrote “…you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)”. In a sense of copyright, this is exactly what I’m looking for.

Before you choose your template, you need to know that layouts of all web pages fall into four categories:

  • Fixed-width layouts
  • Liquid layouts
  • Fixed-width/liquid mixed layouts
  • Em-driven layouts

Here is explanation what each layout type is about with examples, if you are interested. For purpose of this post you just need to remember that fixed-width layouts are the easiest to work with among listed above and if you have a level of skills in web design similar to mine, I strongly recommend you to choose a template with fixed-width layout. The template which I have chosen has three-column fixed width layout.

Here is how the template I have chosen looks like:

As I mentioned, it has three column layout. I want two column layout, so we have to remove third column (“Add space” one) and adjust width of remaining ones. Also we need to change the site logo, remove “Free CSS Templates” text on top (not at the bottom!) and do several lesser tweaks.

If you are “kinda old school guy”, you can do all this using just a text editor and a browser. But I will be using couple other tools. First one is ScreenRuler. It looks like a real rooler and measures distances on a screen in pixels:

I will be using the one which comes with Ubuntu (a version of Linux which runs on my laptop) and can be installed via Synaptic Package Manager.

In addition I will be using Firebug plug-in to Firefox browser. This is a very powerful tool for web design. I will be mostly using two its inspection features:

  • If you point a mouse at a particular HTML element in Firebug window, it highlights an area rendered by the element on Firefox screen
  • It shows what element of CSS stylesheet has defined a particular CSS property of the HTML element

Of course, it has much more functions that are worth learning; but this is outside of the post scope.

First we need to download the template, unzip it to a hard drive and open the page in Firefox. Next we are going to remove the third column.

To do this we need to find a div tag which contains the column. This is easy to do with Firebug. Just press F12 and it will open Firebug window at the bottom of the screen:

Now you see HTML code at the left side of Firebug window. You can navigate through it. Each time you put cursor at any HTML tag, Firebug highlights corresponding area withing HTML page.

This way we can find that the Ad Space column is rendered by div element with id=”abs”. Open index.html file in a text editor and comment out the div tag:

Save the file and reload the page in Firefox. The third column has gone:

But now the left column is too narrow. We need to increase its width which is defined by CSS stylesheet. Let’s find which CSS element is responsible for this. Using the same approach that previously we find that the column is rendered by div element with id=“content”. As soon as we highlight it, Firebug shows what CSS element defines its properties:

As we can see, the div width is defined in line #217 of a file named default.css and it is 430 pixels at the moment.

Now let’s use ScreenRuler to measure a space available for left column. The ruler shows that we can make it up to 650 pixels wide maximum. But we want to have a certain space between columns (gutter), right? So let’s open default.css in the text editor and change the width to 620 pixels. Save the file and reload the page in Firefox. Here we go:

Now let’s remove “Free CSS Templates” text at the top of the page. This time we are going to use a text search in the text editor where we have index.html open. It appears to be a link. Let’s comment it out as well.

I don’t have a logo for the application, so let’s replace temporarily “Mr.Techie” with “Squirrel2” (the name of the project). We’ll put there a real name later. To do this I again use text search in the editor etc.

I don’t need the electrical bulb picture (the one next to logo) on my page, but I will keep it for now as a placeholder so that to replace it with something else more relevant to my application later.

Now let’s reload the page in Firefox so that to see how it looks:

Not bad. But the search field (technically – search form) length looks out of proportion. It should be the same as width of the right column. Let’s fix this. Firebug shows that the width is defined at line #134 of CSS file and it is equal to 200 pixels:

#search {
      float: right;
      width: 240px;
      height: 28px;
      background: #FFFFFF url(images/img02.gif) no-repeat;

ScreenRuler shows that width of the right column is 250 pixels, so let’s change the width of the search form to 250 pixels and reload the page.

Well, the result is not entirely satisfactory – the form width remains the same (200 pixels), it just moved a bit to the left. This is because the actual image we see as the search form is defined by img02.gif picture which is 200 pixels wide. To solve the problem we need the same picture but wider. Visually it would look better though if we had an image a bit narrower than the column (230 pixels wide) centered with regard of the right column. We will make the form 240 pixels wide (by editing CSS as above) and the image itself 230 pixels wide.

I’m using GIMP image editor and here are instructions on how to scale images with GIMP. After editing the image and the CSS file the page looks like this:

That’s all for now. We’ll continue in one of the next posts.


Read Full Post »