Where are we?
You’ve decided to create a new site by reusing an existing design. Now what?
This lesson’s goals
See how to:
- Work out what you want.
- Gather your tools.
- Set up directories.
Knowing what you want – a little
You’ll be looking at lots of different designs. How do you know what to choose?
Making a list of things the design must have. Such as:
- Mood. Modern, traditional, fun, conservative, extreme, decorative, plain…
- How many side bars?
- Menu location – left, right, top, whatever.
- Want a footer?
- Place for a logo in the header?
When you’re making your must-have list, don’t be too picky. You may not find a design that’s exactly what you want.
If you’re making a site for young girls, don’t say: “The design must have a pink background with flower accent graphics.” You probably won’t find it.
Instead, say: “The design should be attractive to young girls.” That’s the right goal, and you’ll have more options to choose from.
I see some Flash templates out there. You can make a complete Flash site. What do you think?
I’d avoid that. Flash is great, but not for entire sites, unless you have very good reasons.
First, you need special tools to edit Flash. Some template companies offer online tools that make it easy to make a Flash site. But if you want to do something even a little bit different from what their tools do, you’re out of luck.
Second, Flash sites don’t index well with search engines. If search engine traffic is important to you, don’t use Flash.
Third, Flash sites can be just plain annoying. They’re cool when you first see them. But after a while they can be painful.
Does Flash have any place?
Yes! Slide shows with voice over, educational animations, games… I’ve done a lot with it over the years, and still use it. Just not for entire sites.
Gather your tools
Here’s a basic toolkit. Everything is free. You’ve seen this stuff before. I just want to remind you.
- Firefox. The official CoreDogs browser.
- Firebug. A Firefox extension. Lets you find the right CSS to change.
- ColorZilla. Another Firefox extension. Lets you get the right color codes.
- MeasureIt. Yet another Firefox extension. Lets you make things the right size.
- Paint.NET or another graphics program. Make and change graphics. I use Paint.NET for simple things, and Gimp for more complex tasks.
- WinSCP or another file transfer program. To get your work up to the server.
Set up your development directories
You’ll need to have a directory on your hard disk (or USB flash drive or whatever) to do your work. For example, if you’re working on a site called BiteSize, you might open your
Documents directory, and make a directory called
Figure 1. Project directory
When you work on a design, make snapshots as you go. A snapshot is a copy of the design at a point in time. If you mess something up, you can go back to the last snapshot.
When to make a snapshot? When you’ve got part of the design working. Say the first thing you work on is the top nav bar. When you get it right, take a snapshot. Then you work on the layout. When you get that right, take a snapshot. And so on.
How to make snaphots? First, make a subdirectory in
current. This is where you do your work. After you’ve been working for a while, make a copy of
current, and call it
snapshot1. Keep working. When you’ve made a bunch o’ new changes, copy
current again, and call it
snapshot2. And so on.
After a while, your working directory will look like this:
Figure 2. Project directory with snapshots
snapshot1 would be the oldest snapshot.
snapshot4 would be the newest snapshot.
current would be your most recent work.
Suppose you made a bunch of changes to
current, and they weren’t working. You’ve lost track of what you did. You’d rather just start this part over. You can delete
snapshot4, and rename the copy to
What you’re doing is called “version control.” This simple approach is just fine for basic, one-person projects. Professionals working in teams use version control software, like Git.
- Work out what you want, but only in general terms. Be open to new ideas as you look at designs.
- Get your tools ready. IDE, browser, extensions, graphics editor, and file transfer tool.
- Make working directories.
Let’s go find ourselves a design!