Planning a website

The work of constructing a website demands an exhaustive planning (or a basic planning and a good program to handle all the site), to create the contents and structure them well as of web pages, and to build everything, uploading the pages to the web server. Later, it will be necessary to introduce some changes and updates, extending the website and other maintenance tasks. All of these steps should be as easy as possible.

>Preliminary work

The preliminary step is to plan the contents and the structure of the website in detail. Here one often works better with pencil and paper; the ideas must be written down as they come. First we will discard some ideas and keep others. We must think a lot about the structure of the website, so that the changes that we are going to introduce later don’t mean unnecessary complications. In order to begin with the design of the pages one of the best materials is grid paper, to have an exact idea of the proportions and the composition. We can look for inspiration and ideas seeing our usual sources of inspirations: magazines, books, other websites. See different alternatives for navigation structure, colour schemes, font treatment...

We must prepare a list with the sections and to think a logical order to structure them. Diverse models of navigation exist; linear, in network, tree, linear... This last model, linear, isn’t generally flexible enough (since it makes it more difficult to move from one part of the Web to another), except in the case of a site with narrative content.

Production

Once we have decided the base structure, we must create or introduce the content. In order to prepare the text and the images, we can use the habitual programs. We can write the text with the habitual word processor or any text editor, and later to copy and paste it in the editor you use to create the web pages; you can also write directly within this application.

The graphics must be prepared in a program capable to export the images in the suitable formats, GIF, PNG or JPEG. We will have special care of the resulting file sizes and their resolution. The images can be originally created in the computer, or processed from a photography or a scanned drawing. For those designers who are a bit challenged with creating graphics, there are tons of available icons and other ready-made images to use as (clipart), either downloaded from the web or from a CD-ROM.

As soon as we have all the necessary assets —graphics and texts— we can move to the HTML publisher / web page editor and we’ll design and produce every page. We must always remember the structure of the complete site, to introduce the necessary connections from one sections to others, according to the criteria that we have discussed in the previous page. It’s a good idea to have a printout of the site map near at hand, or pasted in your studio somewhere near you, while you’re producing this project. It’s important to verify the correct operation of the links, to check the file size and quality of the images, validate the code (or at least get rid of critical errors), watch the results in different browsers and in different screen resolutions...

If you don’t want the modifications and updates of the website to become a nightmare, it’s necessary to take advantage of functions as the templates which you have in some programs (modifying a single template, all the pages based on it are updated automatically), CSS style sheets to quickly format whole sets of pages, and other benefits of the editing applications. Modern website publishing applications incorporate very ingenious utilities, as we comment in the corresponding section. And if you can use a powerful CMS, you’ll have the most reliable and comfortable way to maintain your web, but often at the price of losing some of the flexibility of individually designed pages.

Publicar la web.

Until we place the files in the server, our website will exist only in our computer. We must, then, transfer all the necessary files, and with the same structure that we have created in our disc. This means with the same folders and subfolders, names and extensions...

FTP programs (from File Transfer Protocol) are simple programs that do the job of transfering the files from your computer to remote server, through the Internet. This is the usual way to upload the files to the server that hosts them. These programs usually work with two windows or panels: on the left the directories and folders of our PC and on the right side the same, but in the server (see the accompanying image.) We pass files from a computer to another simply selecting them and pressing the arrow icon in the direction in which they must be transferred (to or from the server.) In most programs you can even do the transfers by dragging and dropping. It will be necessary that we are authorized to carry out these transferences (you’ll have your secret combination of user name or ID and password, provided by the your Internet service provider or ISP). Of course, other operations of deleting files, renaming, moving... are easy to perform with any FTP utility. You can ftp files even with your browser, but there are a number of free or unexpensive FTP clients that will offer more options. Some of the most recommendable include CuteFTP, Filezilla, WS-FTP, LeechFTP and SmartFTP, but there are dozens more.

Most web publishing programs already have their own utility to transfer files, so you won’t probably need a separate FTP program if you don’t want it. If you are still beginning with website building and publishing, perhaps this option will be easier for you, because visual edition tools offer a wizard to publish your site in the net.

Esta imagen muestra una organización típica de las carpetas en un servidor, como réplica de la que hemos creado en nuestro propio sistema. Una vez transferidos los ficheros de la web, debemos comprobar el buen funcionamiento online de la web y asegurarnos de que no falta ningún fichero necesario y que la estructura de carpetas es la correcta. Cuando introducimos cambios en las páginas, por ejemplo, sustituimos un gráfico por otro, debemos asegurarnos que el nuevo gráfico tiene el mismo nombre, tamaño y formato que el que reemplaza. Si no es así, será necesario también actualizar la página en la que se encuentra. Para cambios globales en el estilo de las páginas, como hemos comentado, la forma más cómoda y extremadamente útil es emplear las hojas de estilo en cascada (CSS.) This image shows a typical organization of the folders in a server, mirroring the one in our own system. Once transferred the files, they are “live” in the net, and we must verify the good online operation of the website and make sure that it doesn’t lack any necessary file and that the folder structure correct. When we introduce changes in the pages, for example, when we replace a graphic, we must make sure that the new graphic has the same name, size and format that the one that it replaces. If not, it will be necessary to update the page where it’s linked as well. For global changes in the style of the pages, since we have commented, the most comfortable and extremely powerful way is to use cascading style sheets (CSS).

To learn more...

There are many good online resources to learn more about web design. Take a look at some of the following links, for a start:

La The Style Guide(formerly from Yale University), is the online version of one very popular textbook. Imprescindible.
La Sun Systems style guide, a document detailing every kind of ideas to develop well-structured and functional websites.
The Zen of Web Sites, another web with lots of interesting advice.
La The Style Guide from the Library of Congress of the United States.