Wednesday, July 28, 2010

The Website - Creation

Of all the many things we've done and experienced since my wife decided to "go professional", this was by far the most frustrating and stressful.  Hopefully these tidbits will spare you some of that.

As I mentioned in my last blog, I knew nothing about web hosting or design.  The hosting part was fairly easy to figure out but the design took quite a bit more effort.  The hosting company that I went with, http://www.inmotionhosting.com/, provided a large variety of pre-made templates but after searching through them, I was left feeling that none of them really had what I was looking for.  So, I began doing some research into how to create your own website from scratch. 

All websites are build using HTML code, though I learned that the easiest method to creating a website would be to use a WYSIWYG (what you see is what you get) style of web designer which writes the code for you.  The most popular of these is Adobe Dreamweaver.  Unfortunately, the price for that program was such that I didn't look twice before searching for some free options.   The two programs that I ended up using were Kompozer and Seamonkey.  These two programs are very similar and I started with Kompozer due to the excellent guide provided by http://www.thesitewizard.com/.  If you know nothing at all about web design, I highly encourage you to follow this guide to get a good idea of what to expect.  The guide is very step-by-step and I followed it religiously.  Once I was a bit more comfortable with what I was doing, I began to insert our own information and formatting. 

A few things that will help you out a bit will be to get all of your text and images together before you really get started on your site.  Some of the things you'll want to do are:

- Create a folder to store all of your web files/images
- Create your Welcome Message if you are going to have one
- Create your Artists Statement
- Create your Biography
- Determine what images you are going to use on your site
- Modify your images to all be the same size, resolution (we use three image sizes on our site, 150 x 150 pixels for thumbnails, 500 x ??? pixels for mid-size images, and 750 x ??? for our full-size images.  All of these are set to 72 resolution, which is sufficient for most web applications yet is not a high enough quality that others can copy, scan or print your images from the web)
- Save and arrange images in your "web" folder.  We have our images divided by size and gallery.  For example, we have separate folders for not only our full-size and thumbnail images, but each of those folders have sub folders based on gallery (ie, flowers, abstract, portraits, etc).  This organizes things well and makes it easy to find images.
- Create your web banner or other images that you will use and place them in the web folder

As an artist's website, images were a huge part of the content.  We used Photoshop to edit all of our pictures.  The images of artwork were "saved for web" in JPEG format.  If you use the "save for web" option, it will compress the file giving a smaller file size.  There are only three image types typically used in web design, JPEG, GIF and PNG and each have their benefits and shortfalls.  JPEG's are great for detailed images with a great variety of color.  Though they end up with a larger file size (potential slowing down the load times of your website), they provide the greatest amount of color and detail.  GIF's are really great for simple and low color images such as buttons, arrows, etc.  They have a very small file size and you can do some cool things with them.  They can be strung together to create a mini slideshow/video and they can be made to have a transparent background so you can see the background images or text around the image itself, instead of having a block of color around the picture.  The downside is that they only use 256 colors so they aren't suited to detailed and colorful images.  PNG is something of a bridge between the two, designed to have a transparent background but also utilize a greater variety of colors.  Here is a website that discusses these types in greater detail.

When you create the files for your website, it is highly recommeded that you save them in the place that you plan to keep them.  Be organized from the start and don't move too much around as even one folder or file in the wrong place in the server can lead to all sorts of headaches.

Once you have the building blocks of your website created, and the layout in mind, you can really begin to create the site.  Both Kompozer and Seamonkey work in the same way with the same features, though I preferred Seamonkey.  If you've followed this guide on http://www.thesitewizard.com/ for Kompozer, then you shouldn't have too many questions about how to create a basic layout.  Unfortunately, I don't know much more than you can read there. 

Creating a website can be a tough process, but a very rewarding one as well.  Once the site is actually created though, upkeep and maintenance is fairly minimal.  Though you may not be able to, try to get what you want on the first try.  I'll be completely redoing our website to make it look more "contemporary".  At least I have an idea of what I'm doing this time :)


I highly encourage you to check out other highly rated websites when creating yours.  Here is a great article that showcases the website of artist Latifah Shay and discusses what makes a good website.  In the end, it comes down to three things:
1. Make sure your website has a quick load time.  Many visitors won't stay if it takes longer than five seconds to load the page.  Do this by not including a bunch of "extra" stuff, such as music, videos, flash screens and by compressing your image files.
2. Make sure your site is visually appealing.  Remember, sometimes "less is more".
3. Make sure your site is easy to navigate.  No one will look around too much if its difficult to get from page to page.

I plan to write a page on website and search engine optimization at some point in the future (once I learn more about it myself).  However, one thing that really helps the ranking of your page is to have incoming links from other sites.  Here's your chance!  If you have your own website, please leave a comment with your web address and provide any additional web creation tips and resources that you've found especially useful.  Besides, we all need a bit of inspiration and ideas from other people every now and then :)

5 comments:

  1. On my screen this particular font in white is hard to read on the black.... You might try yellow or a heavier script....
    Best wishes.

    ReplyDelete
  2. I'm going to bookmark this specific page...for future use. You know, when I finally feel like I might have a go at 'professional'! Excellent resource!

    ReplyDelete
  3. Raena, Glad it could might help you in the future :)

    Knitting Painter, thank you for your comment. You give a great example of the kinds of things that we need to think about when creating content for other users. (for those who don't understand, the previous font was smaller and white, making it difficult for some to read). Hope the larger, yellow font is easier to read :)

    ReplyDelete
  4. I didn't see the font you used first but this one is not hard on the eyes, at least not on my monitor.

    I'm miles away from having a website, but will bookmark this post for future reference. Thanks for posting all the "how-to" info.

    How's the drawing going?

    ReplyDelete
  5. The drawing is not going anywhere yet.. though I'm constantly motivated and inspired by many of you. I have a few paintings that I did on a particularly "artsy" day that I'll post in a day or so.. trying to spread things out so it looks like I have/know more than I really do :P

    ReplyDelete