Web design tips & tricks

In these pages you can found articles, tutorials, tips... that I hope can be useful for web page creators. Some of the articles were created in relation to discussions in which I took place at the WebDesign-L mailing list, a very interesting list for web designers.

Vertical align for navigation lists with multiple lines

Let's see a quick tip for aligning vertically navigation lists that use the tipical floated box approach to display the list in a row, but that have several items displayed across multiples lines.

Making web pages extend to the bottom of the browser window

If you ever made a web site with the content in a center column and a different background for the body, or with a navigation bar not too tall, probably you experienced the problem of some elements not extending to the bottom of the browser window when the content height is lesser that the content area of the browser window.

A fix for float-margin inconsistences across browsers

While in the process of redesign one of my sites I stumbled upon some inconsistences in the margin applied to the floated boxes that I have in one of my pages. At first I thought that it was due another IE float bug (and it's in part true), but some tests proved that all browsers have issues when applying the margin.

How to install Apache (and PHP+MySQL) on Windows

When you are making a web page, the easiest way of view a page stored in your hard disk is double-clicking in the file, which usually results in the page being opened in your default browser. Although this method (which I still use sometimes) it's good enough for simple static pages, it's not useful if you you are using server side languages, or even with pages that are static but use links relative to the server root. In this situations the a good solution can be set up a local test server for making all the design and tests in the same computer.

Optimization of JPEG images: good quality and small size

Depending of the program you use for saving JPEG images, there are available some options for adjust the compression of the image. In this article I'll try to explain how to adjust that options and optimize the ratio between image quality and file size.

Tables vs. Definition Lists

In a question posted to the list, Maximillian Schwanekamp wondered this: when presenting data which is a set of related key-value attributes, what would be more appropriate from a semantic point of view: a table, a definition list or something else?

Standard (and valid) DOCTYPE definitions

Web pages should include a valid DOCTYPE definition at the beginning of the HTML document, not only to validate the page against it, but also to activate the standards compliant rendering mode in Internet Explorer 6 and Mozilla/Netscape 7.

CSS Image replacement for submit buttons

Expanding the techniques for CSS image replacement by Mike Rundle and Seamus P. H. Leahy, and inspired by a question posted by Susan Petracco to the WebDesign-L mailing list, I have developed an image replacement method for submit buttons, and in general for the tag.

Common fonts to all versions of Windows

I have build a list with the fonts common to all versions of Windows and their Mac equivalents, which is the reference I use for knowing what fonts I can use when making web pages. I expect you find it useful too. 

Common fonts to all versions of Windows & Mac equivalents.

Using relative font sizes in web pages

The two most common ways of setting font sizes with CSS are using points (pt) or pixels (px), but you can use also relative font sizes, either using ems (being an em the height of the element's font) or size keyworks (small, medium, large...).