2003-05-26 - 3:37 a.m. - design notes...
I used to put my design notes/changes as separate diary entries, Since I constantly tweak, manipulate, rearrange and hopefully improve this layout, I didn't want all those little design notes getting in the way of the rest of the content. Plus I wanted there to be one place to look that was linked for easy access.
For now, the overall theme is black with white text and blue highlights to reflect my "dark" Scorpio nature. You may detect subtle influences in the layout and in my writing from the Matrix, Fight Club and of course Drinking, I mean drinking IS in my screename. ;) I also wanted to make it sexy without being outwardly obvious about it. Hopefully the imagery I have included in the layout achieves that effect.
Because I designed this layout myself, I also wanted give an general overview of this layout in case other designers are curious about what I did here. Basically I used
FrontPage 2000 to arrange the tables and do the basic WYSIWYG layout tweaking. I tried my best to keep the layout as simple as possible following the common design philosophy of "form following function". I placed the main banner on top, navigation and links off to the left and forward and backward entry navigation on the bottom. I left the largest space for the main content of course, and I used the overflow parameter on the div tag for both the navigation and the main content so they are scrollable.
I used A Cascading Style Sheets (CSS) to keep the fonts and colors consistent. I was considering several drop-down navigation menus but I haven't figured a way to make various links open to a new window. I basically wanted any link that links to another link within the diary to open in the same window and links that are not part of the main diary to open in a new window, so I went with the more traditional links that allow you to set how you want the link to open to. Plus I like the hover effect of regular links which I've added an overline and underline to highlight the links upon mouseover. To keep the color scheme consistent I used the same color for the regular and visited links and made the active link a darker shade. I found the following site a very good resource on CSS:
I used scripts from Dynamic Drive to add effects to the images. A "spotlight" effect for the main banner and a "gradual image highlight" effect on the rest of the images. There are also TONS of other free scripts that do lots of other cool stuff. If you are into tweaking your diary it's well worth a look:
For Basic HTML Tutorials and really cool HTML generators, look no further than HTML Basix The site has really useful HTML code generators as well, just select ot type in what you need and it pops custom code out for you. Really good stuff. I used it to generate the Meta Tags for my main page which will hopefully help websearch spiders find my page easier. Anyway here's the site.
- May 27, 2003 -
The free account I put up in picturetrail.com along with all the pics I've uploaded there expired. I fixed the image links in the latest entry, but there are going to be some of those dreaded red X's in the older entries until I figure out how to update them. =/
- May 28, 2003 -
I fixed the links to the pictures and I figure out how to force a template update on the older entries. I still have to fix the guestbook. I will likely update it with the new template I have been working on for the main diary pages. I'm pretty much waiting for my pending reviews to roll in but it has been slow going. I was originally due for a review by Heather in Sweetreviews and I was damn close to the end of the queue, but have since been switched to be reviewed by Gumphood. I'm not sure why but I looked at
their bios and it appears that Heather is 16 year old reviewer, so it's possible she couldn't relate so they turned my diary over to the only guy on staff so I had to start at the end of his list again and now there's one review ahead of me. Muffreviews has a much smaller review staff, so that may take a bit longer before I get any results from them but it will be interesting what the reviewer has to say from
their unique perspective. But I digress. I seek creative input so I will have a general idea on what needs improving if anything before I do any major redesigns, so hopefully it will come around soon...
- June 1, 2003 - I added a fade in/out effect but for some reason it turns my images white. I've been working on a new layout that looks very similar to my guestbook and includes a space for my last 5 entries. All I need to do is find somthing to fill the that space for my older entries page. I also revised my "ethnicity" entry and put a link to it in the bio segment of my navigation bar.
- June 2, 2003 - New layout, version liquid-fade 1.5. Added one of my art sketches images in the center, added the fade effect and linked it to my artwork page. I still have to test it against some of my entries and tweak the layout so it all looks clean but so far I like the way it turned out. After I'm happy with that design I'll apply to to my older entries. I'm also planning on isolating specific entries and adding it to the navigation like I did with the ethnicity entry. Hopefully I can dig up some of the more interesting content buried deep in some of my neglected weblog entries. I'm also planning to consolidate all of my past design notes onto this page. Tedious work but I think it will streamline things before I submit my next batch of review requests.
- June 3, 2003 - Tweaked layout, version liquid-fade 1.6. The Silhouette image w/ fade-in effect is off to the far left with the last 5 entries below it. Navigation is now in the middle along with the fade-in image links and a forward/back navigator prominently displayed in the navbar. Entries section is a little wider to
accommodate images, so 800x600 users will have to horizontally scroll left for now to see the main content until I can figure a better design.
- June 5, 2003 - Heavily tweaked layout, version liquid-fade 1.6.1 and 1.6.2. For v.1.6.1, I removed the background images in the cells and widened the division for the entries so it could
accommodate the images in my photo slideshow. For v.1.6.2, I used an "updated" version of the 'gradual image highlight' script that fades out when the mouse cursor leaves the image. For some reason the new script interferes with the 'moving light' script, so I went back to the 'spotlight' script for the banner. It did fix the problem of images turning white when the the enter/leave fade effect occurs. I also added images instead of plain text for the navigation titles and the title of the 5 older entries. There are a few more things that I want to do before I manually apply this layout to the older entries. I'm also planning on copying and pasting my older diary onto this one. Tedious work for sure. =/ I may totally redo the layout to
- June 08, 2003 - version liquid-fade 1.6.3 - Redesign of the 'older entries' page. I also archived the older entries according to the weblog grouping because I let my allowed some of my past weblog pages get
ridiculously long and there's no easy way, if any, to go back and break it up into individual entries or even just smaller groups. Future
archiving will be done according to month. I also added a link to 'readers' which links to the page that shows people who have this diary on
their buddy list. I also joind a diaryring. I temporarily linked it to the older entries page but I will eventually have a seperate page dedicated to diary rings.
- June 12, 2003 - version liquid-fade 1.7.0 - I put the navigation section back to the far left and I redesigned the guestbook layout to more or less match the rest of the diary. There are a probably a few tweaks I have to do in terms of section sizes and there are a few more pages I have been meaning to add, but I think I may be sticking to this general layout.
- June 14, 2003 - version liquid-fade 1.7.1 - Added an e-mail address and a guestmap to the contact section. Both are fully functional. Added a "friends" and "links++" page to the links section and "quizzes" to the extraneous
section. The new pages are blank for now, but I will be adding content to them as time progresses, I just didn't want anyone hitting the dreaded error page when they clicked on a particular link.
- June 12, 2003 - version liquid-fade 1.7.2 - I added an "number of hits" counter and an "number of online users" counter scripts from fastonlineusers.com.
- June 15, 2003 - version liquid-fade 1.7.1 - Reverted back to version 1.7.1 It appears
that the fastonlineusers.com site is down and it seems like that is preventing my diary and the diary of anyone who uses that script on thier site from loading. If this is a regular
occurrence I may keep that script off permanently.
- June 12, 2003 - version liquid-fade 1.7.3 - More Tweakage: I put the fastlonlineusers script back and I moved it off to the left under the links. The script seems to be working fine now. I also rearranged a few of the links in my navigation bar, placing MOST of the diaryland related links under the navigation title, notably the ones that are related to my diary like my profile and my recommend links. I've also made a few additions such as quotes and faves. I left the diaryland notes under the contact section and the main diaryland link under links. I also took some the constructive suggestions from conquestgirl's review of my diary such as having too many of my pages open in new windows and basically made all pages related to my diary open in the SAME page. Thanks to conquestgirl for all her help and support.
I slimmed all the "horizontal rule" (hr) lines on the main page to 1 pixel. The older version was too thick and it seemed to pull focus away from other parts of the layout. Finally I took the forward and back (reminisce and transcend) links out of the scrollable division tag for the entries so it is always at the bottom of the entries no matter where you scroll. There are also a few minor window sizing tweaks, just to make sure everything on the page lines up as evenly as possible. Navigation is also going to be updated for my older entries and guestbook pages. *phew* I think that is it. Now if diaryland will only let me friggin' update. Damn bastards! ;)
- July 30, 2003 - version liquid-fade 1.8 beta, 1.8.0 and 1.8.1 - I went for new layout arrangement, hence the skip to v1.8.x. With the beta I was testing a layout that would
accommodate 640 x 480 screen resolutions. It actually came out OK but I was not happy with the the entries being "under the fold", it seemed a little unbalanced from a aesthetic standpoint, and I figured not too many people are using 640 nowadays. I would like to consider my target audience as being of an younger, more technically endowed crowd, so I went back to the 1024 x 768 layout for v1.8.0 and 1.8.1. I tried incorporating some of the new ideas I was playing with the beta version, such as the use of drop-down menus and dotted borders using CSS. I also added a "link to me" button along with the copy and paste code for that button inside a small
text area box. For some reason I couldn't get the height of the layout to fit in a "smaller than 768 pixel height" window so I played with one of the scripts from dynamicdrive.com, the flexislide viewer that automatically rotates linked images on the top left corner of my layout, just under the banner. It worked out pretty well in terms of saving space, and I can add more small linked images if I feel the need to expand on that concept. I've also added a few pages such as a "disclaimer" page under the navigation portion, and I linked an "erotica" entry and my "planet derrick" entry in the new drop-down menus. I'm not sure what I'm going to do with the guestbook and the older entries page. I may remove the navigation bar in both, the functionality and consistency of design will be reduced, but the appearance will be much more streamlined. I'll play with those a little more when I have the chance, until then the last versions of those layouts will stay.
- August 10, 2003 - version liquid-fade 1.8.2 - I updated the archive page and the guestbook to reflect the design changes of the main page, mostly minor superficial tweaks, along with archiving my extras on a seperate page and denoting which of the archives are weblog-style entries. I also changed the hover link highlight property from underline and overline to the blue/violet glow filter. I wracked my brain trying to get the glow filter to work then I figured out that you need to include a height:0; in the style property for some reason not known by me. Since I could not find any documentation on this, I basically learned this "trick" though trial and error and experimenting with source code from pages where the hover glow filter is actually working and modifying it for my own needs. There is a minor side effect in that it causes most of the linked images to glow in wierd places as well. A minor sacrifice for such a cool effect I think. I changed the global font size from 8pt to 9pt to help Vickie (one of the reviewers who commented negatively on the miniscule font size) read my diary more easily. The main entry font size has not changed though, but I'm tired so I'll figure that one out later.
- August 20, 2003 - version liquid-fade 1.8.3 - Added comments which is a gold member feature. Made all links text based and removed the dropdown menus and moved the [link to me] under links++ (for now). These changes are based on Jassie of Designviews suggestion. Also made entries font larger per Vickie of Lavish Reviews suggestion. I moved the last 5 entries section from under the entries to the middle right under the silhouette graphic. Hopefully all these changes will minimize "clutter" and make my entries more readable. I plan to incoporate the optional fields into the design in version 1.8.4...
- 2004/2006 - version liquid-fade lite - To make a long story short, a few years back I allowed my gold membership run out due to financial concerns. Since most of the my former "liquid-fade" template had images and code dependent on the gold membership my once venerable layout got totally screwed. There were also issues of cross-browser compatibility. My old layout had TONS of bells and whistles, but ultimately it only worked well with the IE browser, which isn't so cool considering the popularity of other browsers like Firefox, Mozilla, Opera, Safari and IE for Macintosh. Thus the simplified "liquid-fade lite" was born.
I've made the layout simpler so that the main part of the entry could be read on screens that still use 800x600 although you do have to scroll horizantally to get to the navigation bar on the right. The diary is actually optimized for 1024x768 which is more or less the standard for even the least expensive of the modern windows XP desktop PCs. I've made the font slightly larger for those with those "widescreen" laptops and acompanying resolutions, so hopefully the text is still easy to read on those really high resolution screens. I've also added a few "bells and whistles" here and there, but most features, such as the page transitions will only work with the IE browser. I used CSS absolute positioning to get the things like my banner to overlap the main entry section and the navigation bar to the left. The intended design works fine for IE and Firefox. Hopefully it will look fine for other browsers as well...