Free Web Page Headers

Web Design Blog

Thoughts and commentary about web design plus links to helpful resources including fonts, plugins, templates, stock photos, software, scripts, tutorials, and other useful tools for webmasters!

Sunday, September 23, 2007

Web Design from Scratch

Web design is a complex discipline that involves a wide range of skills. I notice that some of the most basic skills are lacking in many web site designs. Those basic skills are quite simple, but can be hard to gain because of a lack of teaching material. That’s what WDFS aims to solve! Designing effective web sites requires having a firm understanding of design fundamentals, and applying them with an eye for simplicity. The simple approach doesn’t make sites boring or plain! On the contrary, well-designed sites can be beautiful, and fulfilling and enjoyable to use. ‘Web Design from Scratch’ describes my approach to simple web design.

Visit Web Design from Scratch

Saturday, September 22, 2007

Input Forms Without Tables

Tutorial by Nick Rigby, A List Apart

“It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.

I’ve tried to create a form-styling solution that is both accessible and portable (in the sense that I can move the code from one project to the next). Floats have often provided a solution to my problem, but given the complexity of some layouts and the numerous float bugs associated with Internet Explorer, it’s not always easy to reuse a float solution. I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.”

Read the Tutorial

Wednesday, September 19, 2007

70 Expert Ideas For Better CSS Coding

Tutorial by Smashing Magazine
CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

Read the Tutorial

Tuesday, September 18, 2007

2-Col Tableless Layout Tutorial at Wellstyled.com

Sometimes you may need two columns of the same height in your layout. If the height of their content differs, their backgrounds should flow and end at the same position. This is exactly how columns were made by tables.

There are several ways to make two columns in CSS. You can use one floating block, both blocks floating, one block positioned into other’s margin etc. Anyway, every time the block ends where its content ends. That’s OK — in fact, the “same-height columns” is just a design illusion: not the columns, but the background under them makes the effect. Thus, let’s make the columns of their own height and then just play with the background. That’s the matter.

View the Tutorial

Monday, July 16, 2007

Learn HTML and CSS: An Absolute Beginner’s Guide

SitePoint tutorial by Ian Lloyd

“So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous.

Before you dive in and start to build your web site, we need to take a little time to get your computer set up and ready for the work that lies ahead. That’s what this section is all about: ensuring that you have all the tools you need installed and ready to go.”

Read the Tutorial