A complete graphic design, illustration, web design and typography course.

Articles in this section:

Our recommended reference books:

Graphic-based layout

In other articles in this series we have already talked about the basics of web page creation, using both text editors and graphics software. We have also shared some good ideas and tips. Here you’ll find a new selection of general howtos to edit web pages, this time considering a graphic-based layout process.

A complete graphic development

There’s a tendency to develop graphic, visual concepts for a website, and some finished websites are produced in a significant part within a single program, starting with some basic mockups and ending with the final product, completely built. Recent versions of programs such as Photoshop, Fireworks or Xara let the designer create graphic navigation elements, including mouseover effects, drop-down navigation bars, image maps and other visually appealing elements of the website interface. Those programs not only take care of optimizing all the necessary graphics, but also create the necessary code for your HTML page.

Usually, the designer starts with a full-screen prototype with a graphics program, although in a preliminary stage frequently he will develop paper sketches and elaborate ideas more freely with some creativity method and the traditional artist and designer supplies. In a graphics application, the rules and guides are very useful tools (the units must be set in pixels to have a faithful view of the design scale). Using rules and guides you can place and move around elements of the design with precision. Most users today surf the net with screen resolutions of 1024 x 768 pixels or higher. If our screen allows working comfortably at an even higher resolution, the display will be able to show at the same time the complete web page graphical development and the palettes, notes and rest of the workspace we’re currently using.

Initially it’s preferable to work in a full-colour, RGB workspace (remember what the different colour modes are reading back our article about digital colour.) If it’s necessary we will reduce the number of colours of the different parts of the images when whe slice them and proceed to their optimization.

Image slicing and stitching

Once the prototype of the web page is ready, we must make some decisions:

Which parts will contain normal, editable text, and which parts may include “graphic ” text?
Must we include javascript or CSS-based mouseovers or some other kind of behaviour?
Is it possible to convert some part of the model to a background in a layer or a table cell? With this kind of decision we often save on the final page size.

In order to recreate the structure of the page so that the browser program displays it correctly, it is possible to be choose:

an image map with the complete image that we have created, either like JPEG or like GIF (or PNG). This is often a little flexible option, and probably the file size would be quite big (unless it can be solved with few colours and that it contains big flat, homogenous areas, in the case of a GIF or PNG.) Anyway, this option can be advisable in some projects. There are updates to the traditional image map technique, based on CSS, which are more accessible and meaningful for non-graphic browsers and users with impaired sight or movement (all of this is discussed in the image maps article.)
To cut the prototype in pieces that will be separately optimized; some pieces will not be saved as graphics; they can be table cells or DIV layers instead, or even some parts can be displayed by an image or colour background.

Apparently, the second option is more complicated. If we want to create a replica in HTML of whatever we have prepared like a prototype in the graphics program, it will be necessary in the first place to take extra care with a series of guidelines to slice the image accurately, avoiding blank pixels or overlaps. There’s an option to facilitate this operation —activating “attach to rules” and “snap to guides” in the program.

The manual way of developing this layout involves some selection and optimization. Once we’ve prepared the guides, we simply select the pieces with the tool for rectangular selections, and we copy the selection. We open a new window for the selection (some programs automatically assign the size of the present selection to the new file; if it is not the case, just make a quick note of the size at the moment of selecting fragments). Then, this partial image is optimized and saved with a descriptive name. The process is repeated for each of the parts of the image that we need to keep like images: the parts that we can get away with an empty cell or layer can be ignored for the moment.

Finally it is necessary to place everything in its place using tables or (preferably) DIV layers. We can use our usual HTML or Web editor.

All this process can be simplified a lot using a program that is able to divide the image and to reconstruct it in form of HTML tables. Some utilities of this type exist in the freeware category, which you will find in program directories like Download.com or Nonags.com. On the other hand, it’s also possible to make this rather time-consuming process automatically with professional programs for graphical edition of websites: Fireworks, Xara, ImageReady (included with Photoshop 6 or later), and these applications offer a comprehensive control, easiness of use and many batch processing options. This means saving time on boring tasks and have more time to really concentrate in the creative process.

Finally you must make a decision to generate the layout with tables or layers. Until recently, this dilemma was almost out of the question. The only realistic way to arrive at most users was to generate Web pages based on regular or nested tables. Nevertheless, with the arrival of browsers that really support well the standards of HTML 4 and CSS, and especially XHTML with CSS-2, with DIV layers, it’s already viable to consider this alternative, with many advantages, in special that the resulting code is much cleaner, more flexible and with possibilities of dynamic behaviours (DHTML).

Global changes in images

In web projects it is often necessary to obtain images in a constant size, with a resolution of colours and different formats, trimmed in a certain way, etc. for example, to prepare pages with thumbnais. This work can be rather heavy if it is carried out with many images. It would be preferable to automate the process, using functions of batch editing, offered by some programs. These operations can be done by macros, scripts or actions, but some applications have an option integrated in the menu (batch processing). In order to carry out the changes, it is enough to choose the folder or the files and to specify the type of changes to make.

We should investigate the options of our program regarding these batch operations, since they can automate and perform with extreme facility certain tasks that otherwise would be time-consuming and boring. Thus, a macro can be prepared, for example, to generate miniatures with a side lenght of 100 px. with all the graphs in a folder, at a mouse click! To try these options you can even do it with a freeware application like the excellent Irfanview, a robust, fast and feature-full image viewer and editor.

But it may be necessary not just to introduce some changes in the graphical contents. There will also be texts that need to be updated more or less frequently, such as news headlines or summaries, links that have moved... these changes can be an authentic nightmare. And yes, I know — you have surely found quite a few things that should be updated in this very website. What we were saying.

Each web edition program has its own strategies to update the changes in the text, the links... more or less efficiently and easily. Many programs allow to solve part of these problems of updating and maintaining a website with their systems of templates and libraries. Another interesting idea is to use Java applets, Javascripts, PHP scripts or Flash movies, inserted in a specific position of the page, to display an independent text file that contains, for example, the last news about the website, some RSS syndication headlines list. The most powerful and carefree way of mantaining a site, though, is using some CMS (Content Management System), a solution for automated site building from templates. This is the most frequent approach in today’s websites with frequently updated contents. For example, blogs, like our own Typephases Journal, managed with Blogger.

Resizing images

Operations such as slicing images, symmetry transformations (vertically or horizontally) are very common in the development of projects. Luckily, these operations are usually complication-free and can be often performed with a single click, with no loss of quality in the new graphic.

Nevertheless, the change of size in a bitmap graphic, like a GIF or JPG has its peculiarities, derived from the same nature of these formats. In general, given the fixed resolution of a bitmap, the change of size implies to stretch the original information to the new dimensions and this implies a certain loss of quality. An image in 24 bit-colour, like a JPEG, can benefit from a smoother scaling process, blurring a bit the contours to disguise the effects of the change of size. The images with a limited number of colors (256 or less, like the GIF) only can be changed in their size with a grosser system and it gives aliased, scaled contours: the typical image of a computer graphic with jagged edges. Some programs differentiate these two options as resample in the first case and resize in the second. Unless you deal with perfectly flat images with straight or 45 degree edges, a situation in which you can get away with a resizing, you should choose the first (resampling).

In order to scale a GIF (or any other graphic with a limited number of colours) with this smoother process the suitable procedure is:

turn the colour mode to 24 bits (or RGB colour mode; see more about colour modes elsewhere in this site);
Apply a change of size with “resample”;
Decrease again the colour depth and resave the image (GIF, PNG).

However, it isn’t always necessary to upgrade to full RGB colour. For small graphics with simple shapes with square or 45º edges you can get away with a simpler resizing process. In case of doubt you can try both alternatives and undo if you’re not satisfied.

Another situation when it is necessary to decide which process of scaling is better is when you import an EPS file or some other vectorial format lke Adobe Illustrator in a bitmap editing program such as Photoshop. In this case, there shouldn’t be any problem of quality loss, because the starting point is a vector format which can be enlarged at will; however, there is the alternative of importing with aliased or antialiased (smoothed) edges. Generally speaking, for printed applications it may be preferable to use a crisper, aliased import (as long as you place a rasterised version of the vector with resolution enough for the print device you’re going to use), while for screen-based work the aliased import option is better.

The most obvious way to avoid resizing worries is to prepare the original graphics in a vectorial drawing program and later export rasterised versions of all the necessary images. Of course, this is possible for logotypes, texts and more or less simple images, but it will not work out for photography-based imagery.

When you are preparing a great amount of pages with graphics that share an identical structure, it is very advisable to use some automatic generation component. For example, Netobjects Fusion has a component that automatically tracks the graphics in a folder, and prepares Web pages with miniatures of all of them, buttons to link successive pages, etc. The fantastic image viewer Irfanview also makes something similar; indeed most graphic file managers will do it nowadays. The tedious work that you can spare this way is very considerable.

Control of colour through the production workflow

In the process of production for the Web you must keep consistency in the use of the color through the changes of formats and edition programs. This isn’t a marginal question, since the graphic for the Web are based mostly on a format that supports only a limited range of colours: the GIF and the PNG-8 formats. If an image includes a maximum of 256 colours, all those that are outside this palette will have to be simulated with one or another colour of those already indexed in the file. Graphics programs have different ways of dealing with this limitation: to block certain colours of the original graphic to ensure they will stay in the GIF or PNG-8 file, create patterns grids o diffusion dots to simulate the colours not included in the file.

There is a risk of slowing down a project, because of of colour conversion problems when reducing the original version to an indexed, limited format. Therefore, an thorough control of which colours are being used and specified in the different phases from production, both for graphics and programming, is necessary. Let us remember the different systems in that the colours in the computer programs can be specified (see our article about colour, in the Graphic design section). In some programs you will probably need to specify colours in hexadecimal notation. It used to be compulsory to use hexadecimal notation for colours specified in HTML, but style sheets again offer more flexibility and you can use RGB decimal values or named colours as well.

Some programs have this capacity and there is no problem changing from one notation to the other; if it isn’t the case with the program you use, you can convert decimal to hexadecimal very easily with the system calculator.

Picking colours

Most graphic edition programs incorporate utilities destined to pick samples of colour, often not only limited to the program area itself, but even from any other open window or any part of your workspace. If our program does not have that capacity a simple possibility exists: screen capture the area which contains the colour you want to sample, and from this one you can “read” the colour used. More comfortable and faster is to use an “colour eyedropper” application. Most of these are tiny programs that reside unobstrusively on the system tray until you need them, wasting very little system resources. Launch the utility to grab colours on any part of the workspace, get them in different notations (decimal, hex), even save them in palettes or generate variations or harmonies. There is a number of these programs, like Eyedropper, Nadger, ColorCop, ColorPic and many more. There is also a handy Firefox extension called Colorzilla.

Layout using tables.

Often, the tables are associated to rigid and little elegant designs, in special if we think of a table with statistical data, with its cells separated by lines and so on. In fact, the tables were the basic layout tool for many years in the design of web pages. Today we have better alternatives (CSS-based layout), but you can still see many websites built with this now obsolete system. Where they are the tables, if they are not seen? Frequently, tables are present albeit little apparent, since they usually are rendered with no surrounding lines. Some elegant designs have been produced through the years with this simple device, some of them using white space elegantly.

Somehow, the design with tables limits the possibilities of the designer, but at the same time it is beneficial to have a grid to which you can adapt the design: this facilitates the consistency and the harmony of the different sections and pages.

The design of pages Web has been dominated for quite a few years by table-based layout —the only realistic approach to a visually rich design which would be rendered with no major problems in all browsers. A more logical and better structured page architecture based on style sheets was ruled out by the deficient support by the most popular browsers. Today most users have CSS-enabled browsers and a more standards-based approach is recommended: you should separate content and structure. Content is marked up with HTML tags, while all the presentational stuff corresponds to the style sheets (more powerful and flexible for this role).

In table-based layouts some (today) unnecesary tricks were very common and you must be aware of them, because you might find them in legacy web pages you need to edit. For example the use of 1-pixel transparent GIF images as spacers to push content to a specific position in the table-based layout. You can do it simply with the MARGIN and PADDING properties of your style sheet; and what’s more important, you only need to do it once, in your style rule. With spacer elements, you would need to include the invisible image each time you wanted to create some specific white space, adding complexity and nonsense to your markup. Complex nested tables are also a very common artifact found on websites created with most WYSIWYG page design software. These nested tables were even used to create a table with a simulated thin line border. Editing this code manually can be a nightmare and sometimes it’s better to avoid dealing with it entirely: just copy and paste the text (not the code) and the images to a fresh and clean page and remove all presentational stuff.

These tricks, luckily, are already unnecessary (and they even can be humorous.) A standards-based, CSS-styled design (even if you use simple tables for the page layout) is more bandwidth-effective, usable by all visitors and compatible with all browsers, past or future.

“Layers” in CSS

With the adoption of the standard of cascading style sheets (CSS) by today’s most popular browsers, these are able to represent Web pages with much more flexible designs that those that initially allowed. Layers (instances of DIV tags) allow an absolute control of the dimensions and position of the elements of the page, if necessary. A layer is a container, image, etc. that is placed in a certain position. Layers can be overlaid and, by means of scripting, they can become movable (dragable with the mouse, or moving with a specified animation effect.) The use of layers, evidently, makes possible a very precise control of the graphic design of the Web pages.

With a good program (like those we comment in our articles on Web design), we can create sophisticated and precise designs. Even a pixel-precise design is possible. These programs, such as Fusion, Dreamweaver or GoLive, include an option of grids and guides to help you place the elements with the highest degree of control. For example, with Fusion (which works more like a Desktop publishing program rather than a web design application) the elements of the layout are handled with a very intuitive set of tools; you can distribute and align elements easily and with absoulte control.

Frames

A design based on frames uses separate HTML documents as containers with Web pages which can be shown independently in a window of the navigator. There are many examples of pages with frames, but it is a system that most of designers prefer to avoid, since it has more disadvantages than advantages, especially usability and maintenance issues. The advantage that usually is mentioned is being easy to update the links in a section: it is enough to change a page, the one that contains the links. However, the list of disadvantages would be long, but, for example, a system of frames usually has a fixed navigation bar in a small frame, whereas the bigger one contains the pages to which each link leads to. Nevertheless, if a visitor arrives directly at one of those pages, and it does not contain the navigation elements, he will be visiting an “orphaned” page.

Internal frames (iframes) are an effective way to incorporate variable content in a single screen, without the trouble of using scripts. One of the most frequent uses is the one to display an announcement, independent of the rest of the content of the page. This way, the advertiser can update the space which he has been allocated and the webmaster doesn’t have to worry about it.

More creatively, iframes can be used to display independent Web pages (even residing in different servants) in one single screen. This way, for example, we can have a part in which we decide to show the last news on a certain subject, presented by the x Website. Our task will finish when defining the frame for X, to which the URL of that site corresponds. Whenever the people in charge of X update their content, this one appears to the day in its own frame.

Organising designs with dynamic HTML

Layers have an enormous advantage at the time of solving certain types of layout. What would be very complex with the traditional system of nested tables can be arranged with elegantly simple solutions with CSS. In addition, it is possible to take advantage of the space in three-dimensional form (to overlay layers partially, to make them visible only in certain events...)

An interesting idea for the use of layers is to prepare an interface that takes advantage of in addition the associated dynamic behaviours (DHTML). Thus, we can design a windows-like interface, with a series of freely movable containers, or systems of pull-down menus that not only save space, but also have a familiar operation mode. To place much more information of the initially visible one in a same page has the advantage of which it is possible to display it immediately, once the page has been completely downloaded, in an interactive form, without overwhelming the visitor with a huge amount of initial information.

Organising the design with Java, Flash and other add-ons

The use of Flash, Java and other technologies can make web pages something still more attractive and with surprising functionalities. However, its use must be weighed and you should consider that a part of your potential audience could not manage to access those contents by an inadequate configuration of its browser or sytem of because of some kind of impairment.

Java applets can add extended functions to our Web, but he is not advisable that they have an essential role in the initial pages. The problems of configuration with users are common and therefore he is advisable to prepare a site that offers most of contents and resources without Java, and to place the applet in specific pages. It is not bad idea to warn that the correct operation of these pages depends on the correct configuration of the navigator, and give some basic advice about how to set up the system and, if necessary, how to download and install the necessary plugins.

Flash is also something fabulous, but only for certain kinds of design. Its indiscriminate and inadequate use is one of the worse faults of many websites. Today it is easy to create spectacular animations in titles which rotate, they move in and out, they explode and they are reconstructed again... but what’s the point of these cheap tricks? What does it add to your message? It is easy to create (or to use ready-made) three-dimensional animations, titles, or to apply hyperrealistic textures. In the end, all these rings and bells are a precise indicator that the “designer” has little taste and he’s offering only amateurish nonsense.

Even so, many many pages, including some corporate website projects made with huge budgets calls your attention because of boring, unimaginative endless Flash movies in their splash screen —little more than an irritating obstacle to access the content. Downloading large animations which add nothing to the user’s experience or information contribute very little to the success of a website, both in designer and user terms.

Like all the things, Flash must be used with taste, and when it can solve situations that hardly can be approached with other resources. Wanto to read some clues about when you could use Flash with a small practical workshop?