Notes about the slow redesign of TimsLaw.com

[UPDATE March 2006] —– Here’s more ancient history. I used to “blog” about my struggles with web coding and web design. My Blog-methodology was to use plain old HTML files to kind of keep a record of the major steps and problem I dealt with.

Currently, I am re-coding the website to enable me to manage it through the Wordpress content management system.

Yes, I am using separate CSS files now, and templates, and a dynamic database. There aren’t even “files” anymore. All the content is stored in a database, and pulled out of the database when a user wants an article. The content is fitted within my “template” files. Wordpress then displays a seemingly normal HTML page to the user.

The delivery of pages will be significantly slower now than it has been historically on my website, but I gain SO MUCH flexibility that I’ve just gotta make the change.

[END OF UPDATE]

The notes are in rough reverse chronological order, most recent at the top. Click a Feedback link at the bottom of the page and tell me how the changes are working for your unique setup.

<

2005 — big changes in store for Timslaw.com

I have cruised for two years, not changing too much about the design or look or feel of the site. I’d update content, but not style. That has all changed.

May 2005, I dramatically changed the color scheme and the style coding. I reverted to using a separate CSS style sheet, and I pulled the style code out of the individual html files.

I had found the site to be difficult to manage. Too many pages had evolved little changes in style, changes that were ONLY reflected in the body of the individual pages. I could not therefore make GLOBAL changes in style by performing massive search and replace functions. I USED to be able to do that, but not anymore. Each time I’d try a search and replace, I’d miss some files, because those files had evolved little individual style tweaks (that I did at some point). It got so cumbersome tracking down the exceptions to the search and replace, that I couldn’t hardly be bothered to make any style changes at all.

Also, I am actively learning PHP coding, so I can STOP using plain static old html files for my content. I want my content to be in an active database, like a blog. Then I only need one file to “drive” the delivery of all content. You will soon be seeing the PHP version of TimsLaw.com. The index file will contain links to other “files” just as it does now, but those links will not be to static html files - the links will be to database content. The content will be displayed using a few template files. I can edit the content easily through my web browser (no more editing and using FTP to upload changes).

I am playing with the software I intend to use to drive my new coding scheme, Wordpress. I use Wordpress to drive my political blog The Radical Moderate - RadMod.com. Running and tweaking the blog is teaching me PHP coding.

I am ALSO playing with a forum-bulletin board package, phpBB.

January 8, 2003: ALL CSS styles are in the bodies of all documents; no more separate CSS files

See my How I learned HTML coding and website development article, where I talk about how I learned to use CSS stylesheet files and some tricks to deny the stylesheet to older version web browsers. Boy, have I made some major changes since I wrote that article. For one thing, I have stopped using CSS stylesheet files completely. That’s monumental for me in the evolution of this website.

I finally got the CSS code down to 5k and then put the code into each article, so no article calls a separate CSS file. This should save about 2 to 4 seconds in loading time (on dialup connections) for each pageview, even considering the extra 5K size of each file. Front page size dropped to 27K including 5K in CSS styles - formerly 35K with two separate CSS stylesheet files totalling 23K, for almost 60K just to see the front page. Should be substantial improvement in download time for dialup users. Broadband users probably won’t notice the difference.

I put the Front Page CSS Styles into the code for the Front Page

See below for notes on how I’m trying to reduce download times. I carved out the styles for the Front Page and put those styles into the code for the front page, meaning that when users come to the front page they do not any longer have to wait while a separate CSS stylesheet loads. Bonus: The front page style code only added 6K to the size of the front page, which now sits at 29K. When the front page loads, all styles are included, and only a 1K scales picture needs to be grabbed. Previously, before redesign started, 4 files had to be downloaded, totalling 60K. Should be quite an improvement for those on dialup connections. Additionally, I have further reduced the size of the CSS stylesheet for the content pages, down to 8K from 13K a short while ago (goal is 5K).

I dropped the “@-import” trick

See my How I learned HTML coding and website development article for more about CSS and @-import, but now everyone can get my real stylesheet, even Netscape 4.7 users. I made a lot of stylesheet changes that don’t seem to destroy the display in Netscape 4 any longer. The reason I dropped the @-import tool is: my Front Page is taking too long to load, due to a lot of content, anyway, and I’m trying to reduce initial download times. The call to 2 stylesheets takes a couple of extra seconds. So I worked to drop one of the stylesheets.

Next, I think I’m going to stop using the little Scales of Justice in the upper left of the screen. It takes a couple of seconds to download.

Before I began the recent redesign process, my Front Page was 35K and my stylesheet was about 22K, with a 1K scales picture and a second 1K stylesheet containing the @-import command. Total= 4 files, and about 60K of download (or 15-20 seconds on a dialup connection!) , just to see my front page. Current status [obsolete now]: Front Page is at about 23K, one stylesheet at about 13K, a scales picture at 1K - total=37K and three files (or 9 -12 seconds on a dialup connection). If I drop the picture, I can cut 2 seconds off the download time. I will also continue to optimize my CSS stylesheet to reduce the size. I want the stylesheet to get down to around 5K max. I can’t cut the size of the Front Page much more without a major overhaul.

The TimsLaw front page had gotten way too bloated with excess verbiage, and was never really optimized to display in the most compact way on the most common screen resolution of 800 x 600.

It began to bother me a lot, that my front page was so dense. I began to talk about a redesign in my article on website development. I began to take steps in preparation for a redesign, by adding the Links page and the Articles page, so I could remove some content from the front page and break out the content into subsidiary pages.

For a few days, I put up a “vote” request to ask visitors if the front page was too dense or was ok. The results were split about 50-50. That’s good enough for me, and I realized I needed to make some changes.

During the end of December 2002, I focused a day on learning some additional design commands that could shrink the screen area taken up by content and links, so I could re-write the front page’s content to display smaller and more compactly. The current front page reflects the results of my efforts. The old front page was much more heavily populated with text, big text, text that displayed very well at high resolution but crowded the screen unacceptably on lower resolutions like 800 x 600.

Those of you who visited during the “days of crowding” should be noticing that the site now loads a little faster and displays a little cleaner, with less verbiage to wade through. The three-column design theme remains.

I am not finished yet, though. I intend to keep working on the front page. I may move to a two-column display and revamp the menu structure. I have played with some designs, but nothing acceptable has come up yet. I am not a graphic designer and I have no idea what I am doing with web design.

Your input would be appreciated. Click a feedback link (at the bottom of each page) and tell me what you think.