Website Makin' on the Cheap

Website Makin' on the Cheap

Monday, July 16, 2012

Around the year 1997, during the time of geocities and angelfire, I was designing my dotcom using Microsoft Frontpage on my own server. Over the years I've gained experience building websites, using tools online and learning code without the help of a WYSIWYG editor. Now, I use the help of Google to host my site for free. The only thing I pay for is the dotcom name (or in this case the .tc), I don't pay for a hosting service for this site or my other ones and it's easy. Plus, I use a content management system, so I only play with my code for designing and not updating. Here's how:

The first thing you need to do is design. Now you could completely skip the design part and simply use a template provided in a blogging site but as a designer I'd much rather display my own work. I use Photoshop with a canvas size at about 800 x 600 pixels, also keeping in mind that some elements will actually be CSS code (like borders that dynamically change with content). While designing you need to keep in mind that all HTML/CSS websites are just boxes but you can trick visitors into seeing curves and other shapes. For example, you might notice that some websites have rounded corners. This is done by making the curve in Photoshop as an image and either making the background transparent or the same color as the background of the website and allowing for the image to be placed in the corner of the box. As a better visual example, the top border of schema.tc is an image which allows for the diagonal cut on the right side. This matches with a CSS border on the right side to dynamically change depending on the content inside.

After you're done designing you need to build the website. You'll need much more skill in coding HTML/CSS to display the images how you designed them in Photoshop than I can ever give you here but w3schools is a pretty good place to start learning. You can keep all the files on your computer locally as you build, but you'll need to know where the image tags are in the code because you'll be changing these later. Don't worry about content here, just worry about design.

Here's what you've probably been waiting for; the free stuff. If you've tried to host images using an online photo album, you may have noticed that the images resize after you upload them. This is not good for design work where everything must be the same size in which it was originally designed. To remedy this, Google provides something called Google Sites which they advertise as a way quick way to make a webpage for things like a junior soccer league. We'll use it to simply host images for the design. Log into your Google account and make a directory (they call it choosing a name, which doesn't matter much just make it something like 'siteimages') and you'll eventually get to something that looks like a WYSIWYG editor. On the right side there are some buttons. They'll change depending on if you've edited and saved the site (which is annoying if you ask me). What you are looking for is a button that says 'more'. If you don't see it, find the save button and click it, then 'more' should appear. When you click 'more', a drop-down menu appears and then click 'Manage Site'. On the left side, there will be a link that says 'attachments', this is basically where you upload your images. You'll notice when you upload an image and click 'view' the link to the image is very weird. I suggest not using this link and finding the correct directory. Normally you may just hover over the link and find the info appear at the bottom of your browser or by right-clicking and viewing the link properties. If you uploaded the image to the main directory, the file path should look like this: http://sites.google.com/site/yoursitename/yourimage.jpg. This is the link you will use to replace the images in the site you designed earlier.

The last part is fighting with Blogger, also owned by Google (which is nice since you'll only need to log-in once for both). The layout of Blogger has changed since I started using it but you'll want to find the layout and template pages. You want the simplest layout; the less design there is, the less code you'll need to remove. Then go to template and edit the HTML. Personally I remove all the code under variables, which use $ sign along with the CSS code. This is supposed to help keep everything uniform but it can really get in the way when Blogger tries to parse the code. The code you have left should be some header code, the CSS code and some HTML divs. It's also very important to stay away from deleting anything that says b:skin. I suggest deleting things in sections and previewing the site each time making sure nothing breaks. If everything looks fine, save the template and then go back in to delete more. You can always revert changes if there was a problem.

After you've cleaned out everything, you'll add your own HTML/CSS in there. There's definitely a lot of playing around you'll need to do. Just a few things to note. Blogger does not allow for a static homepage unless you do some extra hacking but I don't find that worth it. Also, Blogger only allows for 10 static pages along with a few other limits but the number of posts is unlimited. The last thing you'll need to do is connect your dotcom to Blogger. You can find a step-by-step instruction under Blogger's settings, and it's even easier if you use GoDaddy as your domain name provider (there's literally one button that does it all for you). The turn around for the domain name to start working is usually under 48 hours.

This isn't a project that you can just pick up without having web design experience and a lot of patience but it's definitely worth it in the end.