Surrealia: Tutorials: Digital Art

Web Tips & Tricks

Working on designing your own page? Below are some things that you might consider considering as you do! It doesn't matter whether you're a beginner who's letting Tripod design your page or a professional who's been doing this for years; the same stuff applies!

(A note of caution: the following is a terrifying example of what happens when I stay up too late and/or have too much caffeine in my system. If you can survive this tutorial and have it actually make sense to you, maybe you should get off caffeine too. If you choose to read on...may the Force be with you...)

(1.) Text Tips.
So there you are, browsing the net, trying to find the name of your long lost great-great-grandmother-in-law who was rumored to have been an alien. Okay, maybe not. But anyway, you come to the first page of a site and what you see--all you see--is text. You estimate that it'll take about 10 scroll bar clicks to reach the bottom. (Ugh.) What do you do? You find it only natural to click the "back" button since clearly these people have nothing that will interest you. Well...they might, but you're not willing to read that to find out! So you leave the page--simply because these people have put massive amounts of text on their site. Not to mention the fact that the text is white and the background is yellow, so you were positively blinded when you visited the page. Exciting, wasn't it? o.O

So what should have happened? Well, first, you shouldn't be looking for your alien great-great-grandmother-in-law; you were asking for it! Besides that, the designers of the page you visited should have been a bit more courteous to you, the visitor, by not putting up so much text without a few images here and there to break it up a bit. Of course no one's going to read that! They couldn't read that even if they tried, since white on yellow blinds even aliens... (ENOUGH WITH THE ALIENS ALREADY!!!) Anyway.

(2.) Table Sizing.
(If you're asking "What the hell is a table?!", proceed to tip 3.)
A few days later, after having no luck in trying to find your alien grandmother, you find yourself surfing again and you come to a site that specializes in web design. Woohoo! Unfortunately for you, your screen resolution is only 640 x 480 while the designer's resolution was at least 1024 x 768.

So naturally, all the links which were meticulously placed on the right side of the page (for your convenience!), not to mention half of the text, isn't even visible to you. So once again, you're inconvenienced by some carelessness on the part of the web author in that you have to scroll to the right each time you want to go to a different page. ISN'T THAT EXCITING?! 8))

Of course not! Web pages should be designed so that a person with fairly minimal monitor settings (ie. a resolution of 640x480) can navigate the site as easily as someone with a resolution of 1600 x 1280. If the web designer had been thoughtful, he'd have made his table width no larger than 620 (that includes his images) so they can be easily viewed by the average browser.

(3.) Big Images.
Some sites...*looks around at the various random pics and nav bars on this page* Ahem. Some sites have lots of images and animations *tries to hide her page* that take FOREVER to load. GOSH, I can't believe that some people DO that! 8| They use nav images, animated GIFs, random pics that have absolutely NOTHING to do with the content of the page, and they actually expect their viewers to load them! There really are some jerks out there on the web... Take my site for example. Oh, wait... O_O

Umm...take any other site for example...
Like Station Eight! Gorebash has minimized the number of graphics so he only has the necessary ones, thus giving him great load times and a very effective design. For a graphics-oriented website, the viewer should expect to have to load some larger pics, as long as they don't have to load new ones each time he goes to a new page. (My thoughts only...just keep it in mind! ;)

(4.) Calculating Images.
Plants. Ah, yes...plants.
Nevermind.
You're surfing the web again! Only this time you're looking for a great recipe for lard! You do a search on "Lard Recipes" and you find the page you're looking for. You begin reading the recipe when suddenly, it disappears! AAAH! In its place is a big picture of lard! (Isn't that scary?!) But what happened to the text?

Well, the magically appearing lard was a result of the image not being calculated, ie. the "height" and "width" attributes weren't used in the "IMG" tag when the author wrote the HTML for the page. For example, the image should have been defined as such:

<IMG src="lard.gif" height=250 width=327>
The pixel sizes provided in the "height" and "width" attributes tell the browser what size to make the image so it designates a certain amount of space for it on the page. That'll keep you from having magical lard on your site! 8)) That's good!

(5.) Thumbnail Images
When you came back to the "Lard 'R' Us" homepage after a few weeks of therapy from seeing the 'magical appearing lard' (or was it this page?)...anyway, you returned and began browsing through the images of great lard delicacies. Boy were there a lot! Your stomach was churning as you waited for the page to load...as you waited, and waited and waited and WaITEd and wAItEd...AAAA!!! The page was so SLOW! The thumbnail images were taking forEVER to appear!!! And you REALLY wanted to see all of them before you clicked any of them...
roger, my stereo system. i'm not kidding.

roger, my stereo system. i'm not kidding.

The problem was, the designer hadn't made SEPARATE images to be the thumbnail pics. Rather, he linked to the main picture and assigned it a height and width attribute on the page.
He apparently didn't realize that the reason for having thumbnail images is so the viewer doesn't have to load the big image to get the "taste" of it! (no pun intended.) If he'd shrunken the bigger image in a photo editing program and saved it as a totally different picture, the page would have loaded much faster and your stomach wouldn't have churned nearly as much. That's definitely a good thing when it comes to lard recipes! Here's what should have been done:
<A href="lardcordonbleu.jpg"><IMG src="minilard.gif" border=0 height=100 width=56></A>

(6.)Final Words of "Wisdom"
*random-o-meter blows up* Uh...

Okay, I can't be random much more, so I'll just make this last one quick...

Always seek to improve your site. Don't leave it hanging around for years and years, gathering world-wide cobwebs...that's not good. No one will visit you if you don't have new stuff. In fact they might start to turn on you. Yes, one by one your viewers will begin to take up arms against you and your site. A war will begin. World Wide Web War I. They'll call it WWWWI for short. Am I off subject?

If you have nothing to add, make up some gossip. Okay, that's bad advice. Rather, change the layout, do something interesting to give viewers a reason to return.
That's it for now.
I'm done.
scared yet?

O_O

-out-

Return to Tutorials

artwork :: info :: links :: tutorials :: feedback :: main