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.

Vertical align for navigation lists with multiple 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.

Making web pages extend to the bottom 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.

A fix for float-margin inconsistences across browsers.

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.

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

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.

Optimization of JPEG compression settings.

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?

Tables vs. Definition Lists.

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.

Standard (and valid) DOCTYPE definitions.

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

Useful Tips for Effective Web Design

Listed below are some useful and rather important tips for designing a professional and high quality web site:

• Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Read our article on Web site Navigation Tips.

• Clean Layout Design: A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use dreamweaver templates for this. Use fonts that will be available on all computers to prevent your site looking messed up.

• Program using pure CSS: The world is moving away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Styles Effects to enhance your website:
  1. Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing, Line-through Effect
  2. Bullets in HTML or Deamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
  3. Links without Underline: Use CSS Styles to display links without the appearance of the underline.

• Optimum Load Time: Make sure your load time is low. For this you must: 
  Minimize Graphics, Flash and scripts: They hugely increase your file size. 
  Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts.
  Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster. 
  Read our article Tips for a Fast Loading Site for more.

• Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site. 
  Read our article Designing for all Screen Resolutions for more.

• Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.

• Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1+, Opera 7+, Safari 3+ and Netscape Navigator 6+ as they constitute 95% of the worlds browsers.

10 Usability Principles to guide you through the Web Design Maze

Motivate  Design your site to meet specific user needs and goals. Use motivators to draw different user "personae" into specific parts of your site. User task flow  Who are your users? What are their tasks and online environment? For a site to be usable, page flow must match workflow. Architecture – it's 80% of usability  Build an efficient navigational structure. Remember – if they can't find it in 3 clicks, they're gone. Affordance means obvious  Make controls understandable. Avoid confusion between emblems, banners, and buttons. Replicate  Why reinvent the wheel? Use ergonomically designed templates for the most common 8-12 pages. Usability test along the way  Test early in design using low-fidelity prototypes. Don't wait until the end when it's too late.Know the technology limitations Identify and optimize for target browsers and user hardware. Test HTML, JavaScript, etc. for compatibility. Know the technology limitations Identify and optimize for target browsers and user hardware.Test HTML, JavaScript, etc for compatibility. Know user tolerances  Users are impatient. Design for a 2-10 second maximum download. Reuse header graphics so they can load from cache. Avoid excessive scrolling. Multimedia – be discriminating  Good animation attracts attention to specific information, then stops. Too much movement distracts, slowing reading and comprehension. Use a stats package  Monitor traffic through your site. Which pages pique user interest? Which pages make users leave? Adjust your site accordingly.