Try something new on a low-pressure project

I tend to think that, in doing work for clients, it's best to stick with techniques that you know very well, if at all possible. Often it's unavoidable that we need to learn something new for a client project, but that can be a stressful way to learn, with your meal ticket depending upon it working out well and getting done on time.

But it's important to keep expanding your skills, so here's my Suggestion of the Day. Once in a while, try something completely new to you. But don't do this on a client project if you can help it. Try the new thing on a low-pressure no no-pressure project, like one of your own web sites. It's usually fun to figure out how to do something entirely new to you when you can do it in "play mode" rather than "work mode".

Consistency and Changeability

I'm really liking certain aspects of the web sites I've been building over the past few months. I'm happy with the visual appearance of most of them, but what's more pleasing to me are two aspects I'll call Consistency and Changeability, for lack of better terms. (If there are more accurate or better words for these things, I'd be glad to hear about it in comments to this blog!)

By Consistency, I mean that the pages have a design with common sections that do not change from page to page, or change only in minor ways, making "paging" (clicking from page to page) a pleasant experience. Assuming the server is performing well, the pages load quickly and these common sections remain in exactly the same position from page to page, providing almost the same feel as as frames site. I also mean that text styling matches throughout the site.

By Changeability, I mean that it's easy to change many parts of the site, because of the Consistency factor above, and because the underlying code is written to support these two goals. The use of server-side includes is central to this approach. I sometimes almost don't want to let on to my clients how easy it is to change a navigation bar or sidebar or footer. It is really easy, but it's easy because I've spent years learning how to make it easy, and because I've spent hours planning their site so that these things will be easy!

There are a lot of techniques and tactics, large and small, which make up my system for a consistent, changeable site. Por ejemplo, I definitely favor vertical navigation bars over horizontal navigation bars. Because of the nature of a web page, a vertical navigation bar is much more flexible in terms of the addition or subtraction of links or buttons, whereas with a horizontal navigation bar, there will always be major issues with the number of links/buttons, the length of their actual text, and how this fits (or wraps) in different browser windows.

These days, I'm enamored of a web page and web site design that is simple, orderly, and flexible, not not necessary on the surface, visually, but in its essential design and code. They're so much more pleasant to work with, and the accompanying client work is accordingly more pleasant as well!

My Digital Filing System for Client Work

I believe that it's absolutely essential to be extremely organized with the digital files related to a client's web site. I use a very specific system for ordering these files. It's exactly the same for every site, and I'm pretty disciplined about putting documents where they belong. Like any kind of organizational scheme, this might take me a little time, but it most definitely saves
me a lot of time.

One of the main reasons this system is set up the way it is, is so that I can upload a site's source files and other backup files to the server as an extra backup. (See my recent post, A System for Backing up Client Website Files.)

My system might seem complicated on first glance, but I've thought it through carefully!

I really recommend that you develop your own system that makes sense to you, and then stick to it. Here's mine.

As soon as I sign on a new client, I create a digital filing system for them. On my hard drive is a folder, web sites. Inside that folder is a folder for each client. Say I've just signed on a client whose site will use the domain name ethelmertz.com. (I've just discovered that there is a real site with that domain. I have nothing to do with it - I just like to use Ethel Mertz and Fred Mertz as fake names for lots of things, for some reason. Feel free to visit it yourself, though - it looks cute.) Here's what the hierarchy of folders will be:

---

web sites - Holds all of my web site client files.

ethelmertz - Holds all files for the client whose site is EthelMertz.com.

site - Holds all files which get uploaded to the server for EthelMertz.com.

external - Holds all of the files which are not part of the web site itself.

docs - Holds documents which aren't site content, but which aren't private.

cont - Holds documents which are site content.

pngs - Holds graphic .png source files.

grfx - Holds non-.png graphic files.

arch - Holds site files which are archived, not currently used.

index.htm - This would be the actual site index file, to show the location of site root.

priv - Holds site-related docs I don't want to store on the server because they're private.

---

The folder external is named with a leading underscore because I want it to float at or near the top of my alphabetized list of folders.

The reason external is located within the folder site is that I upload it to the client's server space as an extra backup. (It is password-protected.) The folder priv is not uploaded to the server, and that's why it is located outside of the folder external.

Displaying HTML code on your page: escaping special characters

A few posts ago, I was writing about the use of HTML comments in code, and wanted to show some HTML code here. In other words, I wanted to display actual HTML code - tags - in an HTML document (which of course this blog page is). This wasn't as simple as I thought!

To cut to the chase, the problem was that I needed to escape the special characters that are part of HTML code. From the bit of research I did, this topic appears to be pretty complicated; this Wikipedia article might be helpful. Here's another article on Special Character Entities in HTML.

To escape the special characters, you just replace them with a sequence of letters and numbers, in your HTML. The opening bracket character, or mathematical "less than" sign, should be replaced with this sequence: "<" (without the quotation marks). The closing bracket character, or mathematical "greater than" sign, should be replaced with this sequence: ">" (without the quotation marks). This allows the browser to remain unconfused when interpreting your code, and to display the characters on the screen the way you want.

Here's an example:

<p>Here's some HTML code displayed on an HTML page.</p>

Here's the same example, marked up with the HTML "code" tag, which provides the correct semantic meaning, and allows the browser to display the code formatted slightly differently to set it apart:

<p>Here's some HTML code displayed on an HTML page.</p>

A System for Backing Up Client Website Files

Despite careful digital filing habits and regular complete backups, a couple of years ago I found myself in a situation in which I had lost some file that was important to one of my client web sites. I don't remember offhand what it was now - maybe a Fireworks graphic source file - and I don't remember how I goofed and lost it. But it did make enough of an impression on me that I began taking some extra precautions with client web site files.

What I decided to do was to set up a system that would serve as an additional backup to my regular backups of my whole hard drive contents. Since every client has remote hosting that I have access to, I realized that I could use that space for a backup of files involved in their web site. Of course, the remote site itself serves as a kind of backup of the actual site files, but I decided to routinely keep copies of other client files there too.

For me, everything has to be orderly - it's just so much less work and stress. So I decided to change the folder system I use for each client. Within the directory that holds their actual web site files, I place a special directory, and in that folder I place all of the supporting and source files. I now routinely upload that directory to the remote server as an extra backup.

One caveat: usually, I'm the only one with access to that remote site, but occasionally there's someone else in there as well, so I decided not to keep anything potentially sensitive in that folder, such as the Word documents I sometimes write up when I'm taking notes and working on an estimate for a web site. So I don't upload the sub-directory that contains my own internal written documents at all.

Another caveat: when the professional relationship is ended, for whatever reason, I make sure to go into that remote directory while I still have access and delete those backup files. If I have an agreement with the client to provide them with my source files, I'm glad to replace them on the server, or burn them to a CD or whatever is easiest, but I don't want to just leave them there without sorting them out and making decisions as to which the client should have. If nothing else, I want to clean up and toss out any non-useful files.

I use this system with every single client account now, and I don't worry so much about the possibility of losing important website-related files anymore.