Quick! How do I make a good web site?

I was recently approached by a friend for advice on how to tackle the task of making a web site. As a career web developer, this is the type of inquiry I field every now and then, and I thought my answer might make a suitable blog post. I will offer the disclaimer that there are countless ways to accomplish this goal and I don’t consider these to be the right answers (or necessarily the answers I would provide today). They just happened to be things that popped into my mind when answering his questions.

Do you use any type of software to get started with web layouts or do you just code everything manually?

There are obviously many ways to go about this. Tools like Adobe Dreamweaver are getting to be pretty advanced these days to the point where it is certainly possible to do the whole thing in WYSIWYG mode, and have the program generate good code and quality layouts. I don’t have much experience doing that though.

If there is one skill that is most important I would say it is a solid knowledge of CSS. I generally try to lay out my web sites entirely with CSS – that is, only using tables when representing tabular data. This web site is more of a conceptual example than actually useful information, but it shows the power of CSS and explains some of the reasons why you should build your layouts with stylesheets, not markup: (CSS Zen Garden).

Are you using a program like Illustrator to create your illustrations/graphics?

As far as the graphics are concerned, I generally work in Photoshop (this could also probably be done w/ Illustrator), to build a mockup of the site. Then, I will create “slices” in Photoshop which correspond to the structure I plan on using to put together the pieces, guided by my knowledge of CSS. (Read: 3 column layouts, also CSS “float” property is of particular importance). The good part about slices is that you can rework the mockup as a whole over time and then re-export the sliced up images for your web site. This saves a lot of time over cutting up an image manually each time (because you know your client’s going to mess with the design, right?).

From a content aspect I would recommend using a content management system of some sort to drive the site if you are going to have regularly updated material and/or want to provide an easy way for non-technical people to enter the content. I have had a lot of success using WordPress for this in the past. It is known primarily as a blogging platform but it works well for creating full-blown content-managed sites as well. As an example There are already nice-looking themes that you can pick up and re-work as well, so that may reduce your need to get that involved with the layout. Simply find a theme where you like the structure, and tweak the graphics and CSS to customize it (as long as the license allows).

Finally, I would recommend setting up some sort of version control for the site, just because you never know when you will want to roll back, and it’s really nice to have all that history stored. I use Subversion for all the sites I work on.

One Response to “Quick! How do I make a good web site?”

  1. DelRay Davis Says:

    Great post Alex. We work in such a fluid dynamic field you are absolutely correct that there are many many ways to approach this question.

    You mention using WordPress as a CMS, and I run my own site on the platform. I would add that there is a great very versatile theme created for WordPress called thesis. Works on a hook system and is very robust and easy to manipulate.

Leave a Reply