Dialupers beware..

A few screenshots of my homepage.

The first is the default look at 800x600, and the second is with everything expanded. I took the screenshots to see what could go at the bottom on the expanded green bar, and what it would look like with everything else expanded. Also to show off how much stuff is hidden from the default view.

Was just editing stuff behind the scenes. The goal wasn't really optimization in the sense of reducing file size, rather to separate the files into html, css and js which should in theory make the page load faster. The byproduct of that reduced the size. Also to make the html easier to edit and not be so bunched up. Not sure how much I could save if I got rid of spaces like Google does, but it is easier to edit having the spaces there.


The page before was: 9.61KB
Now: 5.98KB

The second one calls a .css file and .js file. Having it load separate will cause the index.htm to load faster. The both of those equal out to 3.06KB, with the css being 1.90KB and the js being 1.15 KB. Which brings up the total to 9.05KB when combined. For a total gain of .56KB. Not much but a little something.

When including the two images, they equal out to 9.44KB. With the sidebar image being 1.09KB, and the main Google image being 8.34KB.

That brings it up to 18.49KB. Not bad when considering all the extra stuff included, compared to the current Google search page. Which with images and html is 17.80KB.

I didn't include the translation iframe into any of this.. While the other sidebar and footer which expand are divs and all content located within the page itself, the translation bar on the right is an iframe located within an expanding div. It loads last so it doesn't affect the other stuff, and since it is hidden by default, no one notices. The size of that page is 3.34KB. Which when included pushes the page 4KB over Google's page. It is a great functionality to have but rarely ever used. I just may remove it again as I have done in the past and replace it with something else, that takes up less space. Can't let Google outdo me even if there is more content, albeit hidden on my page.

Went ahead and took the translation sidebar down again and put thumbnails of websites in the green footer. Though now the site is even bigger, I haven't optimized the thumbnail images so there is some space there to be reclaimed when the time comes, also the styles are inputed for each thumbnail so that will reduce the page by about a KB when I move that over to the css file.

I used my experience in the sidebars for making the thumbnails clickable. The image is set as the background of a div, inside the footer element. Doing that makes it easier to resize the thumbnails if I choose by changing the size of the footersub element, in which the thumbnails reside. Also it allows me to at a later day be able to change the opacity of each the text and thumbnail independently and by only changing each divs properties.

As far as I know, since the image is set as a background image for the div, it is impossible to make it clickable on its own. Thus I made it so the div in which that image resides clickable with an onclick event, that opens a new window for the url specified. This also means no alt tag is given so it's not very friendly for blind people who reside on alt tags, and also those who have images turned off. Though I don't see the need for alt tags when the text remains above it even when the images are turned off.

It hasn't been tested with IE yet so it is probably terrible. I've only tested it with firefox and opera and they both display it perfectly. Also when I open the sidebar, the temporary google thumbnail is the only one that is hidden from view. I also haven't tested it with higher resolutions or bigger window sizes yet. I'll get to that later.

There are easier ways to do this but easier doesn't always mean as quick. I did this within thirty minutes, including taking the screenshots and resizing them. So, I'm pretty happy with the result.

Forgot to write about the links:

1.) Google, a temporary link until I find something better to put there.

2.) Release Log, information about new 'scene' releases.

3.) Project Censored, news which has been censored or rather not picked up by the mainstreams news organizations.

4.) Digg Down, mirrors for early releases of the diggnation podcast.

5.) Stargate Wiki, lots of information about the stargate universe.

6.) How Stuff Works, the name explains the premise and it is just fascinating how stuff works.

My plans for the footer are to make it so that I can click on the bigger left and right bars and cause the thumbnails to rotate in that direction, offering even more thumbnails previously hidden from view. Though I'm sure that'll be some over complicated script to do that.. It seems like an interesting idea and I imagine it that the thumbnails will scroll left or right when the sidebars are clicked and the new thumbnail replaces it.

When enough thumbnails are created, clicking on the footer sidebars should cause the whole list to change to a new one. Though I'm getting ahead of myself and not to sure this is even possible yet. Perhaps create an iframe and give it a overly hidden attribute and make the left and right sidebar scroll buttons hidden but linked to the sidebar. That seems doable.