Daily Twaddle

When I first created my web design website, I added two stylesheets - a printer friendly and a low-vision friendly. They’re totally ugly, but I wanted to stick with function, not beauty.

I noticed the other day on campus that students stop to read flyers with color photos. They skip right over the plain font flyers, or even the ones with pictures printed in black and white. I guess a picture really does tell a thousand words.

When designing my website I wanted to steer away from a cluttered image-filled look, to a nice clean soft-colored site. After looking at it yesterday, I decided the colors actually look old, like they’ve been yellowed from the sun.

Anyway, I found some sites (listed below) that let you change the page style, but not all of them do it for accessibility features. In fact most of them seem to do it just for fun. Maybe Jenn doesn’t like to have fun? All work and no play makes Jenn… you know the rest.

By the way… DON’T click your back button if you want to change the style back. Just choose a different style (probably “default”) from the page you’re on!

Stage 38 (my website)
Collingwood College
Carmel College
MVA Resource Guide
Romance at Cambridge
Elena of Valhalla

My question is… are alternate screen stylesheets useless?

A rainy day! Just in time for Spring!

I love this picture of the wet leaves and I’m a big fan of umbrellas (I hate getting rained on you know). So here we are.

I styled the “logo” in Web 2.0 - the current look of the web propelled by Apple. I added the photo border on the edge with photoshop, then warped the whole image. I love drop shadows even though they’re out of style and this way I could have a shadow without the traditional drop-shadow-look. The header looks great. It looks like I can peel the photo right off the page!

I’m using the default Kubrick theme for simplicity. I just added some styles. Linking the logo to the home page was a little tricky. I used my faithful transparent.gif for the effect. I added a regular paragraph to the main index template for the intro description at the top. Maybe I should make it an H tag for proper mark-up?

Tell me what you think and happy reading!

I came across a problem when working with ordered and unordered lists.
Here is an ordered list in case you were wondering what the hell it is:

1. Proper mark-up
2. I didn’t type these numbers
3. Each item gets a number
4. Or maybe a roman numeral

I want to give all my normal-looking regular lists a little style. No problem, I add a 50px left margin to the li’s. My paragraphs have a 30px margin and I like the lists to be indented a little bit. Just like the example above.

But what about my other lists? Like a list of links that I want to display inline? Whoa - they can’t have a 50px left margin! That would look like crap! So, I gave these lists a special class (named “links” or whatever). I styled them inline with NO margin.

Well, since the style properties cascade, I figured a margin of zero would bring the link lists back to normal. Well, crap! It didn’t work! How about making a negative margin (-50px)? Nope. That didn’t work either. Why not? I don’t know.

Then I remembered the “!important” declaration. I haven’t used it, but I notice it when I look at other websites’ CSS. Yes, we all do it. I found a reference to this declaration in my trusty CSS Pocket Reference (by Eric Meyer) which says “those rules marked !important are given greater weight than those that are not.”

Simple enough. So I tried it:

ol.links li
{display: inline;
margin: 0 !important;}

And it worked like a charm. I love web design.

I decided to go with a transparent gif at the top of each page. I do this on all my sites anyway so I can make the logo a link to the home page. So, I just gave some style to the alt text that appears when the images are turned off.

The HTML looks like this:

<div id="headbox" >
  <a href="index.html"><img src="images/transparent.gif"
  alt="Company Name" /></a>
<h1>Company Name</h1>
</div>

And here is the CSS:

#headbox img
{border: none;
/*make the transparent gif the same size as the company logo */
width: 800px;
height: 100px;
/*make sure the alt text font can be seen on the background */
color: #f7f7f0;
/*make it look like a header*/
font: bold 24pt "Times New Roman", Times, serif;}
#headbox h1
/*hides the real header for CSS completely off*/
{display: none;}


The Pros:

1. It’s easy to make a transparent gif.
2. No hacks or extra markup for certain browsers.
3. Minimal coding.
4. Great flexibility when changing the overall look of the site.

The Cons:

1. The H1 is invisible to search engines.
2. I’m surprised that I can’t think of any more cons. I must be tired.

The result is pretty cool. Here is images off:

Here is images on:

Images make a dramatic difference in the overall feel of the website. And I suppose it could go either way (good or bad). I’m going to start using more images (and preparing for images off with my solution). I don’t know if anyone else has tried this, but I’m going to give it a snappy name. Like “the covert gif.” I never tried the Campaign Monitor’s solution. I’m sorry Matt.

I’m sorry Carol, I can’t help it. I love this shit.

I have a couple of websites that use a graphic header instead of a plain text header. It’s pretty that way. And if a person is browsing with CSS turned off all-together, the site still functions beautifully.

But, what if someone just turns off the images and leaves the CSS on? I used to surf this way all the time. My stupid slow dial-up internet was killing me. With the images turned off, I could surf twice as fast. I lose critical information surfing this way. Which is a bummer if designers design without me in mind.

But I have planned for this disaster. Most of the images on my site are worthless (just decoration). But if they have a purpose, I’ve included a descriptive “alt” tag which replaces the image with text.

Now, on to my headers. Eeek. Background images are in the background. How can I get them to cover-up the plain text header? Apparently, I’m not the only one trying to figure out this problem. Here are a few sites with solutions:

1. Site Point » CSS On/Images Off
2. Site Point » Accessible Header Images
3. Campaign Monitor » A CSS Solution to Image Blocking
4. The Watchmaker Project » Images off/CSS on Image Replacement

I ended up using Site Point’s Accessible Header Images because it didn’t require a lot of extra markup. In the example images above, one of the sites has images and the other has plain text. They both function well, just one looks better.

I didn’t like this solution very much though. It works really nice in good browsers (Carol), but it sucks it up in IE. I hate using hacks. I think I’m going to try The Campaign Monitor’s solution.