Results tagged “website” from Ye Olde Rad Blog III

CSS Image Replacement & Other Misnomers

|

Happy Halloween. I modified the method of placing the graphics in the header found at the top of the home page .. up where it says » RADIFIED | Nuclear Grade Technolust. There I implemented a technique known as » CSS Image Replacement, of which there exist many variations, each with its own set of pro's & con's.

HalloweenThe dividing-line among web designers seems to be whether or not to use a non-semantic span tag with CSS positioning, which involves a more complicated technique .. but leaves visible TEXT in place for visitors who surf the Web with STYLES turned off (primarily those using mobile devices).

I used a simpler IR technique, by changing the images you see displayed there .. from foreground images to background images.

This allowed me to replace the foreground images (contained in those heading elements) with TEXT .. which I then indented (way to your left), so it can't be seen. By moving the TEXT out of the way, this technique reveals the graphics (.. which look prettier than standard heading-text).

The advantage however, is » devices that don't render styles (such as screen readers and mobile devices) will now see a TEXT heading and tag-line displayed there, where before there existed only images. Search engines also gives more weight to TEXT than images.

Most Rad visitors will never notice the difference .. seeing most who frequent the site (fellow technolusters) browse with both images and CSS turned ON. But I'm gradually filling my webmaster toolkit with increasingly sophisticated techniques. (Learning by doing.)

After all the pages are styled however, and the markup is coded semantically, there's still no substitute for insightful content .. that is well written (.. and hopefully seasoned with a dash of personality).

This has always been the most difficult challenge .. because a stylish suit does not a charming pig make. And the ugliest person can say the profoundest things, and possess scintillating ideas. So it would seem that content trumps style .. no matter the venue (.. except maybe for those who focus on style).

Reblog this post [with Zemanta]

Semantic Markup & Passing Inspection

|

Changed the underlying markup that controls the links in the blue-green sidebars on the home-page. They were previously coded as » paragraphs. I changed them to » list-items .. cuz that's what they are » a list of items (links) grouped according to category. Certainly not paragraphs .. not even sentences.

Website InspectionIf I did this correctly, you shouldn't notice any difference. Cuz I applied the same styling to the list items .. tho this was trickier than it might sound. I nearly freaked when a single misplaced comma trashed my whole layout. Yikes!

This change represents a semantic improvement. Semantics (i.e. » 'meaning') is one of the buzz-words kicked around when thinkers discuss the Web's future.

Most surprising was that it took me so long to realize I had coded the home-page with semantically incorrect markup. It suddenly hit me (last night), when out of the blue (actually » blue-green), I thought » "Those links aren't paragraphs; they're a LIST."

Reblog this post [with Zemanta]

Semantic Markup & Passing Inspection

|

Changed the underlying markup that controls the links in the blue-green sidebars on the home-page. They were previously coded as » paragraphs. I changed them to » list-items .. cuz that's what they are » a list of items (links) grouped according to category. Certainly not paragraphs .. not even sentences.

Website InspectionIf I did this correctly, you shouldn't notice any difference. Cuz I applied the same styling to the list items .. tho this was trickier than it might sound. I nearly freaked when a single misplaced comma trashed my whole layout. Yikes!

This change represents a semantic improvement. Semantics (i.e. » 'meaning') is one of the buzz-words kicked around when thinkers discuss the Web's future.

Most surprising was that it took me so long to realize I had coded the home-page with semantically incorrect markup. It suddenly hit me (last night), when out of the blue (actually » blue-green), I thought » "Those links aren't paragraphs; they're a LIST."

Reblog this post [with Zemanta]

It occurred to me again today, while composing a short thank-you note, that Texans donate more to the Rad cause (this site) than all other states combined.

TexasNever been ever to figure out this statistical curio, seeing I live in California.

I've lived in many states over the years .. including Connecticut (where I grew up), Florida, (where I attended both bootcamp & the Navy's Nuclear Power school), Maine (shipyard at Bath Iron Works), Hawaii (the first state away from home to feel like home), Idaho (gorgeous .. in the summer), Washington, Pennsylvania & Illinois, and vacationed in many others, but Texas isn't one of them ..

.. tho I do recall being enchanted with the sense of expanse there as I drove thru the panhandle on I-40 (on my way to California). There was something compelling about the landscape .. readily apparent soon as we crossed the border. Vast & open. Felt like I could see for a hundred miles. Couldn't stop looking, as if it were beckoning.

So maybe Texans are simply the most generous?

Anyway, thanks to all you Texans for your continued generosity over the years .. especially during these difficult economic times, when so many are struggling financially. I'm sincerely grateful.

While surfing the web recently, I've noticed more website authors including a photograph of themselves on their home page (.. places such as here & here) .. aka 'mugshots'.

Mug ShotI forget when I added it, but my mugshot has been posted there for quite some time. It was taken at night (at the Noguchi sculpture garden in Costa Mesa after a yummy Italian dinner), and the flash illuminated only my image (nothing behind). So the background is dark .. which works nicely with the page design (dark background).

I even sampled the exact shade of black contained in the photo's background, so I could blend the photo perfectly into its surrounding box.

Personally, I like to see a photo of the authors whose sites I visit and whose articles I read. It's been said » the eyes are the windows of the soul. In other words, you can get a good idea of a person from a photo.

It actually took more courage than you might think to post that pic there .. so prominently .. for all the world to see .. the online version of stagefright. (Tho I wouldn't be surprised if some printed it out, blew it up, and used it as a dartboard .. or for other things.)

If I knew then what I know now. Ever uttered those words? Looking back on my progression of web skills, one omission stands out » incorporating the use of templates to help develop & maintain the pages of my web site.

Templates are both powerful & flexible for two reasons:

  1. They speed up site development, by allowing the rapid creation of web pages based on a preformed (uniform) structure .. so all your pages have the same look & feel.

  2. They facilitate site maintenance, by enabling structural changes site-wide via the editing of a single-file .. similar to how CSS works. This aspect of templates is considerably more significant than item #1.

Dreamweaver TemplatesIf your web site grows bigger than expected (as they usually do), and you want to make structural changes (non CSS-based changes) to your web pages, you'll have to edit each page individually (.. which suks giant goose eggs). Tedious maximus.

When CSS came along, website designers could transfer all style controls into a single file, so that the look of an entire site could be modified by editing a single file (provided, of course, the entire site was based off of the same style sheet). Very cool development.

But what about structural changes? That's where templates come in. To be honest, I'm not sure if web design programs (such as Dreamweaver and Expression) had the ability to generate templates back when I launched the site. But they do now.

CSS-based Tabbed Menu (Centered)

|

Created a tabbed menu today .. something I've been meaning to do for ages.

Kandinsky's Black Spot

The menu displayed at the top of the homepage is pure-CSS driven (no images used). Using images would allow for more creativity, but would also add to the page's download-weight. (And I use enough images already .. in the daily entries.)

My goal was to design a tabbed menu that was both simple & functional. I'm pleased with how it turned out .. tho it took a surprising amount of tweakage to get it to look the way I wanted.

Now that I've developed a basic format, I can tweak & adapt as necessary.

Might look simple, but centering that menu had me jumping thru hoops. I reviewed several methods and finally decided to modify Ethan's approach .. so it would resemble the cleanness of Eric Meyer's tabbed navbar (which is not centered).

What's that Strange Munching Sound?

|

Changed the font used for headings on the home page .. to Trebuchet MS, known for its modern, artsy style. (You like?) Before this, I was using Courier New, which seemed more computer techie-ish (which I also like).

Genghis KhanThis Font is Trebuchet MS

A better example of black text on white background can be found » HERE (VPS guide).

This Font is Courier New

Courier New is a mono-spaced font, which tends to consume more space (per character), forcing me to use shorter headings/titles (.. tho not necessarily a bad thing).

Regarding the text used on the home page, I still use Verdana, which can't be beat (I feel) for pure readability. Many times, I've tried to replace Verdana, but could never find another screen-font as easy to read.

Ye Olde Rad Blog II uses Trebuchet MS as its normal-text font. Not as readable, if you ask me.

On a more personal note, I am in the middle of "stuff." (Which is why I'm lagging on entries.) The kind of stuff you find wading thru a swamp infested with hungry crocodiles. (A particularly toothy one is chewing on my butt right now. Munch-munch.)

Radified's 8th Anniversary

|

Almost forgot .. June 5th was the site's » 8th anniversary. Happy birthday to Radified.

Happy Birthday, Radified

Was a little distracted at the time. No wonder I missed it. Everything turned out okay, tho. (So we're good to go.)

This is where I usually review the site's origins, philosophy, milestones & future. But I recently revised the About page to include this (+ inject more Rad techno-ego).

Eight is a long time in web-years. We were just getting started back when the dot-com industry was melting-down. Consequently, a small percentage of sites on the web today are older than 8.

This is our first b-day at our new VPS. Maybe someday we'll host on a dedicated web server, or at least a hybrid.

Besides a new web host, this past-year we got an open source version of Movable Type, a new table-less layout for the home page, a new Rad URL (compliments Apache mod_rewrite), and numerous upgrades to the forum (compliments YaBB).

Rad Apache Mojo via Mod_Rewrite Engine

|

Woohoo! I worked some Apache mojo today to "alias" the file-name of this home page (index2.html) to » index.rad.

That's so cool! Thanks to Nigel (Ghost Developer from New Zealand) for holding my hand. Here's the code I used to work this magic (added to .htaccess file):

Apache Web Server

RewriteEngine on
RewriteRule ^index.rad index2.html

Thus far, this technique has only been applied to the home page (starting with a baby-step). But in the future, I'd like to expand its use .. to 'radify' other key pages.

Rad Web Design Studio

|

It has been a week since the home page was redesigned .. with a new table-less layout. Have you gotten used to it yet? Like it? (I'm diggin' it.) Been making slight tweaks here and there...

.. such as adding left-padding to the graphics in the center section, to keep text from butting up against images.

Dreamweaver CS3: The MIssing ManualThis padding also adds a slight indent (6 pixels) to the yellow tri-blade radiation symbols which begin each post.

Speaking of design .. I got a call from somebody saying they wanted to hire me to redesign their web site. (Cool.) My nuclear training instilled in me the notion that I need to know everything about everything before doing anything professionally.

Which might be true in the nuclear world, but friends say that ain't how the real world works, and that I already know more than enough to do web design professionally.

And I must admit, after reading (studying) those excellent books (» Head First XHTML/CSS, » CSS Mastery & » Dreamweaver: The Missing Manual), I *do* feel comfortable wielding web design mojo.

So if you know somebody who needs web work, I'm available. (And cheap.) I don't know PHP yet, but that's coming. Rad Web Design .. has a nice ring, no?

Memory Limit Exceeded on Our New VPS

|

We exceeded the memory limit on our new VPS today (for the first time). Our current memory limit is 384-MB (256-regular + 128-upgrade).

I noticed the forums set the record today for most guests ever online at one time. So maybe that has something to do with it. See » here. [More info here.]

Note: today's entry applies to the site home page (not this blog entry page).

Notice anything different? The old/previous design was based on pre-XHTML standards mark-up .. which I had *converted* to XHTML-valid (using Dreamweaver). But the guts still contained a table-based layout (kludge).

The layout of this page however, is not based on tables (rather » on CSS). My new CSS page (if you're interested) is aqui » radified_xhtml2.css.

Been meaning to start over from scratch and layout this page based on CSS .. ever since I started upgrading my web design skills.

Now that the site is busy enough to require a VPS, I figure we probably oughta have a homepage laid-out with CSS. (Modern.)

So I finally just put my head down and went for it. Spur-of-the-moment decision. More involved than I expected. A million little details required attention .. in order to massage current content (you see here) into the new layout. And once I start a project like this, I don't like to stop until it's done. (Worked 'til 1AM.)

This CSS-based layout will let me tweak the design more easily as my CSS skills (continue to) develop.

I chose that bluish-green color (sidebars) cuz I was searching for a link-color that doesn't distract from reading this normal gray text.

The old light-blue links I was using before were so bright (on a black background) they jumped out .. which I found distracting, since I tend to use copious linkage. (Design should complement content .. not overpower it, right?) But sometimes we don't notice things, until we're looking for them. My design-aim was/is to present a content-focused website.

Logged into my Paypal account today, planning to move fund$ (from my checking account) .. in preparation for paying this month's web hosting fee (with our new provider) .. when I noticed...

Sydney, Australia .. Home of Good Things.. there was already plenty of cash in the account. (Woohoo!) How did it get in there?

You might've noticed the small Make a Donation button .. found in the left side-bar (have to scroll down). As you know, I don't solicit donations. But if readers feel inspired, there it is.

Timely Donations

Several generous readers donated amounts ranging from $50 to $100 (less a small percentage Paypal keeps for their trouble). Boy, was I stoked!

Funny how donations always seem to arrive when they're needed most.

As a side note, I find it interesting that most donations (by far) come from » Texans. Why is that? Are they more generous than most? .. or drawn more strongly to the site? I have lived in many states, but Texas isn't one of them. So I can't say for sure.

Priorities & Sacrifice

Speaking of money .. all my life, cash was never a problem. I mean (not to brag), I was earning close to $100K fifteen years ago .. (back when 100K was still 100K). I paid ca$h for a Porsche (the Rad-mobile) .. back in the '80's. Even at age 11, I was delivering newspapers 7 days a week. So I've always had plenty of spending-cash .. for long as I can recall.

But ever since I started going to court a few years ago .. well, that wiped me out. And you can't work nuclear just any ol' place. Reactors aren't found on every street corner, or in every town. (Or even in every state.)

WiredTree VPS Plans: 256-MB + 512-MB RAM

Today I paid for our second month of hosting at our new web host .. WiredTree (using half the refund I received from cancelling my annual subscription with Lunarpages).

During our first month of service, I've been closely monitoring resource usage .. at our new VPS server. So I have a good idea where we stand.

Everything in the world of Virtual Privates Servers, I learned, boils down to memory usage (RAM). Our hosting plan dedicates 384-MB to the site. (256-MB standard plan, plus a 128-MB upgrade).

If we exceed 384-MB, we would have to purcha$e more memory .. at a rate of $7.50/month per additional 64-MB RAM.

Here's what I found » the highest amount of RAM we've used thus far is 366-MB (see here), which equals 95% of our allowable limit. Kinda close, but this was only a short-term transient (1 hour).

Our highest *sustained* memory use is ~325-MB (lasting a few days), so that number might be more meaningful (85% max). Our average memory use tends to be in the range of 270-to-290 MB (75%)...

.. which is actually pretty comfortable. And it's not uncommon, following a reboot, for our usage to drop down to the 220-240 area, tho these low numbers tend to creep up over time (as Apache caches more pages).

The Lunarpages chapter in Radified's webhosting history officially came to a close yesterday .. when I cancelled the account. See here » Lunarpages Account Cancelled

If the site continues to grow and develop, our next move might be to a Hybrid Dedicated Server (which sounds pretty cool).

If I had cancelled after today, I would've lost $95 (my annual renewal fee) .. which will pay for two months of service at our new VPS (with WiredTree).

This last-hurrah with Lunarpages began back in November, when we were booted off the Production server .. for using "excessive resources." Closure always feels good. "Adios, Lunarpages. It was fun while it lasted."

While laying in the sauna last night (where I had a great sweat going), I was thinking how pleased I am with the way things turned out .. with our move to the new VPS server (upgrade). The site is more enjoyable to use, now that's much zippier. Both the blog and the forum are way faster.

SaunaAnd I like how the world of VPS contains such cool language. Consider, for example, the phrase, "Rad on VPS ala Xen." Sounds Ferrari-like, doesn't it?

Laying there (in the steam), I was thinking how many people have worked very hard to make all this cool software (such as MTOS) available .. that I get to play with!

The last few months have been hectic, trying to lower our usage of server resources. I upgraded both the forum & blog scripts. And when that wasn't enough, I had no choice but to move the site. Lunarpages kept threatening to cancel my account, so I had to do something.

Feel like I can finally relax. The move is complete. The site is stable. Nobody is threatening to turn off the lights. Plus these WiredTree support techs are great.

WiredTree Virtual Private Servers (VPS)Biggest problem I had moving the site (to our new VPS server) .. was the blog not working.

Readers could still view pages/entries, but the blog-interface (which allows me to create new entries) would not load.

Instead of launching the interface, the master script-file (mt.cgi) prompted a *download*. ("Would you like to download, open or cancel?")

That suk'ed .. cuz I make much use of the blog .. to help keep the home-page lean-n-mean.

(Tho I create these entries in Dreamweaver, cuz it's a far superior tool to what you find in the MT interface, far as web page creation goes. Then I copy-n-paste into MT. That's why the blog entries always come after you see/read it on the home page.)

Normally I have a plenty of tools in my Troubleshooting bag-of-tricks, but this problem left me scratching my head.

I'd never seen this type of behavior. And neither had anyone at the Movable Type forums. (I use the new Open Source version of Movable Type » v4.1.)

Not being able to use the blog was a major bummer. Fortunately, I found an article that offered a solution .. even tho it appeared to address a different problem.

First thing I did after moving the site to a new server is .. find out if the move was really necessary.

WiredTree VPS Plans: 256 & 512-MB RAM

You'll recall that Lunarpages support told me the site used too many resources to qualify for their VPS plan, and that I needed a dedicate server (something I found hard to believe).

So now that we are here, I've been pinging the sppt techs at WiredTree, asking them exactly what resources we're using.

You can find all the gory details here » Resource Usage at New VPS Server .. but they basically said our CPU usage is "minimal."

Surprisingly however, they also said our allotment of memory would've already been exceeded .. had it not been for the free 128-MB RAM upgrade ( .. for which I found a coupon).

WiredTree offers two VPS plans. One comes with 256-MB ($49/mo), the other 512-MB ($89/mo). So it seems we already exceed the 256 .. currently using 270-MB, and the specs of our current plan (with 384-MB dedicated memory) are half-way between the 256 and 512-MB VPS plans.

WT offers incremental memory upgrades at a rate of $7.50/mo per 64-MB. So it seems my (free) 128-MB upgrade is worth $15/mo. Plus the coupon also provides a 10% discount .. equal to $5/mo. So the coupon is worth $20/mo (total) .. without which we'd be paying $65/mo.

Moving the Site Today to New VPS Server

|

Moving the site today .. to our new server (physically-located downtown Chicago). You can read some of the details in this thread here » Heads up - Preparing to move the site

Allied Moving TruckThis is the final entry I will make at the old server. It will take a day or so for the new DNS to resolve. When I'm set up at the new server, I'll add a note to this page indicating so.

This is currently the *NEW* server. It's 7:30 AM Pacific time right now. By tonight, hopefully, we should be done moving.

I'm on the steeper slopes of the learning curve, so it may take longer than expected. They sent me lots of "New account" PDFs to read ("Getting Started"). I stayed up 'til midnight, last night. Then my eyeballs started falling out, and I passed out (with the laptop still on my lap).

Tags

Find recent content on the main index or look in the archives to find all content.