6: Putting it all together

Introduction: Putting It All Together

In the beginning we looked at an example .html and CSS document that I created. You have seen how the web is put together, you know how to code. You understand FTP and Hosting. You have a familiarity with CMS. Your design skills are blossoming. Now what?

It’s time to bring all your knowledge together and create your own site. I am going to outline how I might go about building my site. It should be noted that if I were to be building a site for a client I would go about this in a slightly different way. For now I am going to let that go. Follow along if you’d like.

I like to begin working with pen and paper, writing and sketching out my ideas and desires.

To Begin:

  1. I Brain Dump my ideas onto paper.
  2. I thin out my ideas until I have a clear goal for my site.
  3. I build a general outline of potential topics.
  4. I clarify my goals.
  5. Then I approximate the number of pages that I will have, which will become my navigation menu.
  1. Using number 5 from above I will create a small flow chart to form the bones of the site (IA).
  2. Once I have the pages figured out I will either begin working on the design or I will start writing the content. I usually switch back and forth polishing both as I move along. This depends on the next step that I choose.

Two Options:

  1. If I am using WordPress, which I often do, I may simply use a generic theme to begin building my site. This is my preferred method now.
    • Once I have my generic pages created I will then either find a theme that I like or I will install a theme that has been stripped down.
    • Then I will begin to code using Note++, Firefox with the Firebug plug-in, and Filezilla to upload my changes.
  2. However, if I am going to build a site from scratch I will begin sketching it out with a pencil and paper. It can be as simple or as complex as I feel is needed. Generally, I make a simple sketch. Then take that idea into Photoshop where I can manipulate the details with speed.
    • Once I like my design I will switch gears and move over to my XHTML and CSS documents. I create the basic framework in the XHTML doc. Then I will begin to manipulate the CSS to get the desired design. It’s the same as above. Now that I know what I want, I will use Note++, Firefox with the Firebug plug in, and Filezilla to FTP my changes. ***Note: I will build the site on my computer, only uploading it when I am nearly finished or finished.

Finishing off the site

By this time my site design is nearly completed. I will continue to create my content and fine tune the design. If  I haven’t used WordPress, I will now FTP the site to my hosting plan, making the site available to the public.

And that my friend is a brief outline of the process that I use. I have left out a few things one thing you might be wondering about is how to get into the Search Engines so that Google, Yahoo, and others can find your web site.

SEO (Search Engine Optimization):

Here are a few steps that you will want to take:

  • Submit your site to Google: http://www.google.com/addurl/
  • Add fresh content to your site
  • Use appropriate Semantic Structure: (Title, H1, H2,alt and so forth. Search engines will crawl your site looking for keywords)
  • Create content that is dense with key words.
  • Link to other sites, ask other sites to link to you.
  • Time
  • Keyword relevancy: (if your site is about dogs and parks in the North West U.S. than make sure your titles reflect that)
  • Respect the rules of the search engine companies.
  • Read this brief: http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf

SEO or search engine optimization is a skill that I can not comfortably say I have a great grasp on. This is not because I haven’t read or studied it some; it is more a function of the level of competition within a niche that makes it difficult. In other words trying to make it to the top of a Google search for Golf, Books, or Digital Photography will be quite difficult. That said I have had great success with clients by simply making sure the title tags for their sites match up with their business. I make sure to have them write content that also includes the specific words that they feel people will search for.

Conclusion:

I know I’ve given you a lot of information and I know that there is always more to learn. Because there is so much, I really can’t stress it enough that you should focus on learning what is going to give you the greatest return for your time. This is why I believe that you should focus on CSS and one of the content management systems. This will allow you to create websites for clients right from the get go. It will also allow your design skills time to catch up to your new technical abilities.

I have one more page that I would like you to read. The information here will take you along a quick path that will bring all of your skills together and it will show you a way to building web sites that you will love. You do not have to travel this path, but I believe it will help you. And while you are there I will show you how you can make a few additional dollars by helping your clients, help you. Check it out:  The Finale

Resources:

Enjoy this brief article on Semantic Markup for SEO; I know this article says it is for blogs but it is relevant to straight up websites as well: http://www.pearsonified.com/2007/04/definitive-guide-to-semantic-markup.php

A video on Google services, including SEO: http://services.google.com/breeze/webmasters/googleforwebmasters/

Leave a Comment