This is intended for people who might be where I was 7 months ago–I wanted to create a website for friends and family, but I had no idea where to start.  In this article, I will be describing the tools I used, and how I created this site.  I won’t go into details about specific themes, widgets and plugins, because I know me, and I’ll probably have something totally different next week.  Instead, I have published a credits section, current features will be acknowledged there.  Also, there is a ga-zillion other ways to do what I’ve done, but since I had a hard time even knowing where to start, perhaps this will help jumpstart your project, and you may find other tools that you like better. 

At first, I looked into those website providers that provide everything–you just bring your content.  Then I looked into making my own site, but using “template” photo albums.  Finally, after realizing that all these options limit the look and feel of the website, I decided to embark on a journey that Roger has called, “my life’s work”.  Ugh….ok…it had only been 45 days into this when he compared my website project to Michelangelo painting the Sistine Chapel.  And by-the-way, it did take Michelangelo 4 years to paint the Sistine Chapel, but according to some, it was not his fault that it took 4 years, apparently, he had numerous setbacks like damp weather, mold, oh, and a war.  Perhaps there are some parallels there.  I had some licensing issues initially and there’s that other serious time-suck–taking care of a 6 month old; both issues that are somewhat out of my control!  Actually, tending to Julie was part of the reason I’ve made this progress.  She nurses a LOT, and then she likes to nap on my lap.  During this time, I can not move or even breathe heavily or she’ll wake up.  The numbing sensation from my neck to my ankles is uncomfortable, but I digress…

In the beginning, I decided I would learn HTML and start from scratch.  It wasn’t too difficult, but it was very time consuming, and doing everything from scratch really limited what I could do with the amount of time I had, and my know-enough-to-be-dangerous skillset.  Ultimately, I was able to create a really basic site that was pretty much all pictures.  There were lots of features that I wanted to add to the site, but as I said, I was limited on time and knowledge.  Then when it got time to add new pictures, and update the site (which I wanted to do regularly), it was a total hassle, because all the steps were manual–and I’m all about automating what I can!  Then I started wondering if there might already be tools out there to do what I wanted to do–why reinvent the wheel if I didn’t have to.  I was skeptical at first, because I wanted something I could customize.  It all started with my search for a “Contact” page, that’s how I stumbled onto WordPress; more on that later.

Website Hosting Service

loofamily.us is hosted with 1and1 (1and1.com).  I can’t speak about other providers, but 1and1 offers Microsoft and Linux packages.  If you want to have a site like this, the backend must be Linux.  WordPress requires mySQL and php, which are only available on the Linux platform.  I started out with the Microsoft package because I didn’t know any better, and honestly, I can’t tell much difference between the two packages, other than lacking the blogging style functionality with the Microsoft backend.  If you’re not a techy type, don’t let this terminology intimidate you.  There are a TON of tutorials on how to configure mySQL and php.  In fact, WordPress has very easy to follow instructions on how to configure your web server, and I even found one site with video tutorials on how to get WordPress installed.  You can find those video tutorials in the credits section. 

So, what you need to know when searching for a website hosting service is that you need mySQL and php support.

Oh, a note about domain names.  You can certainly go out and register your domain name on your own, but website hosting service providers usually offer a really good deal to register several names as part of the package.  You may have to commit to a 1-year contract, as I did, but the combo deal is pretty good.  I think the package I got was 3 free domains + web hosting for ~$8/month.  Don’t quote me on those numbers, I’m going from memory here, and there’s lots of packages to choose from, but I’m sure this is the ballpark numbers.

Getting Your Content To Your Website Server

I use FTP to transfer files to 1and1.  If you’re just copying a couple files, you might want to open an ftp connection via your browser (most service providers give you easy-to-follow instructions on how to do this).  For the bigger jobs, when you’re copying oodles of content to/fro your web server, it makes the job much easier to use an FTP program.  This way, you only enter your user credentials once, and the connection stays open as long as the app is open, and it’s nice to have a split pane to upload/download files.  I use SmartFTP, which comes with it’s quirks, but it is FREE!  Do a search for SmartFTP, and you’ll find the program available for download.  The only quirk I’ve found so far, is that occasionally I have to restart the program because I can’t upload/download files.  The app does not give any indication that your files are not being transferred, you just eventually figure out that nothing is happening.  That’s a little annoying, but restarting the program has always fixed the problem.

Personal Publishing Program

Now that I’ve been working wtih WordPress, I’m becoming familiar with some of the other publishing tools available, like TypePad and Blogger.  I happened to stumble onto WordPress, and I was impressed with the size of the forum style user-to-user support community, the documentation is written in plain English that is very easy to understand and follow–the writers seem like people who know what they’re talking about, and I also liked the written tone–very casual, with a little humor thrown in.  I got the impression that these are just normal people with a passion for all things web.  I liked that, so decided to go for it–and I have not been disappointed!  Sure, there have been some quirks, and it’s not a ‘perfect’ system (but it is FREE!), and it’s been mostly little stuff–I’ve always been able to find a work-around for whatever problem I encounter.

Accessorizing the Site

This is the fun (and super easy) part. 

Themes:  Out of the box install gives you a very generic (but functional) website interface, but remember how I said I wanted something that I could customize?  This is where WordPress seriously does not disappoint!  For starters, there are tons of “themes” available, you can look at the themes, and even take them for a test drive before you go to the trouble of downloading and installing on your server.  Your imagination is the limitation here.  In my case, I wanted a simple site with clean lines and a fresh look.  I did customize the header a bit, but the interface you see is pretty much an out of the box install.  And if you want to change themes, for a whole new look, its very simple!  You go to the WordPress admin tool, pick a new theme, and all your content stays the same, but the look and feel of the site can be totally changed!  These themes are written by people who, as far as I can tell, are doing this because they enjoy it.  All that they ask is that you leave the credit at the footer of the page.  I’ve read about some themes that are available for purchase, but those are geared more toward corporate sites.

Plugins & Widgets:  Again, if you’re not the techy type, don’t let this scare you off.  Together with themes, plugins and widgets can make your site way more interesting, and you don’t need to be a programmer!  If you look at this site, everything on the left and right sidebar is created using plugins and widgets.  As with themes, plugins and widgets are super easy to install.  If you can download a file, unzip it, and move it to a specified directory, you can implement plugins and widgets.  The time consuming part will be finding the plugins and widgets that work best for what you want to do.  And here’s where one of the quirks comes in…I have found some plugins and widgets to be incompatible with each other; you do need to keep an eye on your existing features when you add something new.  There’s been several things that I’ve had to redo on the site because a plugin from one author broke features on another plugin.  This is one of those areas where you’ll just have to tweak your environment until you get the results you’re looking for. 

An example of incompatibility that I experienced was the photo album plugin and the translator widget.  We have lots of friends and family who will benefit from viewing our site in their native language, but when I installed the translator widget, and viewed the pictures in other languages, my picture placement and formatting was so broken that it was unusable.  I had to find other plugins to do the same task.  Ultimately I went with a totally different translator widget, and an all new plugin for pictures.  I spent a lot of extra time rebuilding the pictures with the new plugin, but it was worth it for the translation feature.  With the latest version of WordPress, a lot of the features are built-in, so you don’t have to seek 3rd party solutions; and this example of my picture album and translator incompatibility is probably the rare exception.  Oh, one other thing about that…when I was troubleshooting the problem with the translator, I ended up posting a question on the author’s website, and he was very courteous and helpful.  I ended up not being able to use his translator widget, but I was impressed that he took the time to answer my questions, and even look at the problem I was experiencing.  That was only the second time I had to throw out a question to fix a problem–thats a testament to the documentation, and the amount of information already available from others who had the same problem and posted about how they fixed it.

Static homepage:  Even though WordPress is a weblog program, there is a feature that allows you to designate a page as a home page, which gives the feel of a website, not just a blog.  The distinction is important, because a weblog publishes your work in chronological order–in which case your “home page” would always change to show your latest post.  This might be what you want, but what I was looking for was something a little more formal as the starting page for my visitors.  In my case, there’s lots of pictures, which I wanted to have the same emphasis as the “news” part of the site, a static homepage is how I accomplished that.  WordPress is not configured for a static homepage by default, but changing that is a fairly simple process.  If you want to use a static home page, do a search for “WordPress using static homepage”, and you’ll find very easy to follow instructions.

Adding Picture Content

A lot can be said about content–and in fact, a lot already has been said, so I won’t repeat it here.  But one thing that I think slows a lot of sites down is pictures.  One important thing to know:  resize your images for the web.  Your visitors are going to be viewing your pictures on their monitor.  Monitors can not display a picture in more than 72dpi (dots per inch).  Most pictures are about 500dpi in their original format.  Don’t slow your site down by forcing visitors to download larger pictures. 

Resizing pictures also prevents others from reprinting your work when they steal it–printing the picture to paper won’t look that great.  You can also add a watermark to your pictures.  The plugin that I’m using for pictures has an option to put a watermark on your images automatically.  Watermarking is not perfect either, I know some people who had their watermarked pictures stolen, and the thief modified the images to remove the watermark. 

I use Photoshop to resize images for web, but if you don’t have Photoshop, there’s other tools.  One thing I really like about Photoshop is when using the “save for web” feature, you can split the screen into 4 sections, and change the settings of each to compare the quality–really slick!  Again, that feature is probably available with other tools, but this is the one I’m familiar with.

If you’re an XP Windows user, there’s a tool that comes with the ”XP PowerToys” called “image resizer”, to use it, you right-click on the picture(s), and select the size you want to resize to (ex. 800×600).  It gets the job done without any bells and whistles.

Resizing your pictures will decrease the file size considerably–my 2.5MB files usually go to ~20KB.  I resize all photos to 520×400–it’s a weird size, but it was a size that I could use on a previous revision of the site without chopping off access to the sidebars.  WordPress has a picture resizer in the admin tool, but I haven’t tried it.  I know that DreamWeaver’s resizer tool will resize the image dimensions, but the number of pixels does not change, so the image size is not reduced.  I assume that the WordPress tool works similiarly, but I do not know for sure.

Using Weblog Writing Tools

Here’s what I don’t like about WordPress.  The “post” section, where you actually write your content is a small box about 5 lines tall.  Not that helpful for writing.  There are Weblog Writing tools out there, but I don’t have any solid recommendations in this area yet.  So far, I’ve tried Windows Live Writer by Microsoft, which I haven’t been that impressed with.  Sometimes I lose the cursor as if the app is not responding, and it has a pretty cool feature that sounds good on paper:  you can post to your weblog directly from the LiveWriter app.  I’ve only gotten this “feature” to work one time, right after I set it up, and ever since, I get this error about “not being able to connect to the server”.  So for now, I compose in LiveWriter, then copy/paste to the WordPress write tool found in the administration part of WordPress.  I tried copy/paste from Word, and I got this weird yellow highlighted text effect which I didn’t like, and I couldn’t figure out how to fix.  If you have any recommendations for writing tools, let me know!

In a nutshell, that’s how I created this site. If you decide to create a site, let this be your starting point for a LOT more research, hopefully this will give you some ideas of where to start.