|
Here's where I grumble about websites and act like I know everything.
|
The intro
So, let's say you're the average teenager, or an otherwise new face to the internet who would like to do more on it than exchange email and hang out in chat rooms. You want to make a web page about yourself, or an interest of yours. You have no web design experience, and MySpace just isn't up your alley (you're off to a good start so far). You search Google for something that lets you stamp out pages, but run into sites talking about this HTML jibberish. You quickly become frustrated by all of these weird <tags> floating around. They <confuse> you and make you <angry>, because you're not a computer programmer and there's no way you could comprehend this lunacy! Then...
Sweet son of a harlot! Is it really true? A program that does everything for you? Alas, it is indeed true. Today, many things exist to aid in helping you accomplish the same goal: designing web pages or entire sites with the click of a mouse. These range from programs you install, to web-based applications that require little more than visiting a site and logging in. The entire internet is now at your fingertips, and nobody can stop you from doing to your page what everybody else lacks the creativity to do with their own! Who else but you could possibly fathom the idea of using tiled picture backgrounds or embedded music files that immediately play once the page has loaded?
|
Music
The first thing that everybody needs to know is that visiting somebody's web page is not the same as being in the passenger seat of their car. When a person is in the car with you, the ball is in your court; you paid the twenty-thousand for the car, the twenty minutes of download time for the burned CD you've got playing, and the twenty dollars for gas that keeps it moving. Your passenger is receiving a kind of hospitality that one could liken to visiting your home. Therefore, they must deal with whatever music you play, or whatever color and design you chose for your vehicle's interior. Even if you have an awful taste in both.
When a person is on your web page, the stakes just aren't the same. There's no need for them to be there; they visited your site of their own free will, and may just as easily leave without you knowing they were ever there. This means that you, the "webmaster" must do your best to make them want to stay. How does one go about doing this? How do I determine which colors and music to use that best express how I feel, in addition to providing a comfortable environment for those who visit my web space? You don't. No music. Don't insert an MP3 of Linkin Park's "Numb" because it's your favorite song, and don't set a picture of some psychedelic butterfly or flaming skull as the background.
Take your visitors into account, because not everybody surfs the web to see people expressing themselves - most are out for their own entertainment. What's to be done if somebody's listening to a relaxing tune with their music player, and suddenly falls victim to the incoherent screaming of heavy metal music on your page? They're usually either going to pause/stop their own music so they can view it without having two songs crash head-first into each other, scramble to find the "stop" button for player that's playing your song, or close your page right away to restore the tranquility that they were enjoying before you interrupted it. If your goal is to attract visitors and keep them coming back, I shouldn't have to go into further detail about why taking this gamble is a bad idea.
If you're adamant about having music on your page, consider giving your visitors the option to click the "play" button and start the song on their own instead of making it play automatically. This doesn't really apply to MySpace pages because music is almost expected there, and anybody who's been to it more than once is probably aware that a song could begin playing at any time. Sometimes long after the rest of the profile has finished loading.
|
Backgrounds and images
Background images can work, but it's all about picking the right one. There's a reason books are printed on plain white paper. Nobody wants to have to highlight the text or "select all" to read it because you couldn't resist using the picture of an album cover. In fact, it's almost impossible to make an actual picture of any kind look good, even if you dim the colors with Photoshop so they don't interfere too much with the text. Unless you know how to manipulate the way background images are displayed using CSS, no matter how pretty it is, you're still going to have an image that tiles repeatedly over the entire page background. It looks tacky, generic, overdone, and you won't be impressing anybody with your choice of picture. Trust me on this one, you're only gonna be able to pull this off when you're experienced enough to make your own graphics that, when tiled together, form subtle patterns that act as more of a texture.
Another thing to think about is the actual size of the image. I don't expect people to be able to comprehend an image's dimensions (height/width in pixels) or filesize if they're new to this sort of thing, but if you can place your whole hand over the image without covering it up, then it's probably many, many, many times larger than it should be. Going back to what I mentioned earlier about background textures; these images are usually very small in size and will load almost instantly. If your page has an "image gallery" of any kind, make sure to use thumbnails. A thumbnail is just a much smaller version of a larger image that will load quickly, so you can have a bunch of them on a single page without years of load time. A prime example of thumbing images can be seen on my photos page. Most sites will automatically generate thumbnail images, but you could always crop your own for that added personal touch.
Here's a quick word of advice to any of you who may know a thing or two about incorporating graphic design into site design. Don't use maximum-quality compression for your .JPG images, or you'll be no better off than if you'd posted a raw .BMP file. I dislike the color bleeding as much as the next perfectionist, but it's something we just have to live with for now. Nobody else is really going to care if the colors in your graphics have a bit of blurring near the edges.
For the love of Pete & Pete, NEVER use an animated .GIF file as a tiled background image, no matter how small it is. The animation by itself may be tiny and only a few frames long, but when that sucker is tiled endlessly, that's potentially a hundred or more animations running at once. It's no longer a matter of filesize or dimensions, but the fact that your computer is being forced to play them all at once. Even a very good computer is likely to "skip" when you're scrolling down the page, and for as long as the page is open, your computer's performance will be more sluggish than usual. In general, animations should be used sparingly.
|
Colors and text
Generally, people like to use darker colors. Red text, green text, pink text, yellow text, or sky blue text on a black background are all common choices because those colors are just cool together - but they're not so cool on the eyes after awhile if ALL of the text is that color. A general rule of thumb is that reading black text on a white background seems to be easier than reading white text on a black background, and dark text on a black background is easier to read than light text on a white background.
If you go with a background color besides black or white, try to give the colors a sort of "theme" - in my case, most of the colors I chose are desaturated. The only bright colors I use are for the top of the page, and when somebody places their mouse on a text link. Well, and for that little example in the previous paragraph. Font sizes aren't much of an issue, and people usually have enough sense to not use a font that they themselves can't read.
|
Screen resolution and cross-browser functionality
This one is rather overlooked, and deserves noting. I see this mostly in sites made with page builders, which often use DIV tags and absolute positioning to allow for the drag-and-drop placement of text fields and images. What many don't realize is that doing this also fixes the width of their site by the pixel, not by a percentage. If you do this with a larger screen resolution, people with smaller sizes 800x600 or 1024x760 will be forced to scroll a little bit to the right every time they want to read the last few words of a sentence. If I might get away with wanking myself a little bit more, you'll notice that this site displays fine on any screen resolution, from 800x600 all the way up to the 1920x1200 I'm using now and beyond. This is because I have the main body table's width set to 100%, meaning that even if you change the size of the window you're viewing this site in, its width will expand or collapse accordingly.
Try to keep in mind that what looks perfect on your computer screen might look terrible on somebody else's if you get too careless. This leads me to browser compatability. It never hurts test your pages on different browsers, because each one handles page loading in slightly different ways. In fact, it's almost a staple practice for experienced web designers to do this so they don't have layouts breaking because Internet Explorer handles a certain kind of tag differently than FireFox or Google Chrome. Wank time again: this is why I opted for an ultra-minimal design for my site that only uses very basic HTML, CSS, and some PHP. Unless you're using some obscure browser that was developed in the stone age, there's no reason this site shouldn't show up as intended on just about every browser out there.
|
Javascript
Javascript, like images, can either make or break your page if used correctly - so naturally, about 90% of pages that use Javascript are going about it in a very obnoxious way. These are occasionally used in excess by people who have no idea what they're doing, thanks to a number of sites that offer chunks of completed Javascript functions for aspiring web designers to copy/paste right into their source code. Some even seem to think that whoever can have the most Javascripts running on their page at once before the visitor's computer starts blowing smoke is going to win a prize. It's never fun to enter a site and be met with the sinking feeling that I've just done something incredibly wrong. We've all visited a site like this once or twice in our lives. Ordinarily, a page will begin loading almost immediately, starting with the text. Sites that are overloaded with Javascripts are an exception to this rule. You can usually tell when you've tripped over one of these landmines because your browser will freeze, and often times your mouse cursor will disappear or freeze too.
No, it's probably not a virus that slipped in and began tinkering with your registry. No, it definitely isn't a hacker that decided to target an anonymous web surfer for no reason at all and fry their hard drive by overloading it with incriminating photos of your next-door neighbor giving fellatio to the kitchen faucet - this time. It is the lag of twelve individual Javascript functions that span hundreds of lines of code trying to all load at once. In a panic, you look down at your status bar to see what's causing this, and the text is MOVING. You notice the same thing happening on the top of your browser window. Uh oh, now we've got some pop-ups appearing that we can't deal with because our mouse is still conveniently frozen in place. Awesome!
Your eyes are met with a flash of light, and as if your computer had sprang to life on its own and pulled up a live feed of Las Vegas, it barely withstands the visual hernia of countless animations, image roll-overs, falling raindrops or snowflakes, cursor streamers that read "Welcome to my page!" and a few poorly placed text marquees. This is God's way of punishing people like me. That's not to say that Javascript can't be used in cool ways like anything else, but this only seems to happen about once a year. Don't bank too much on Javascript carrying your site design forward. Some people have it disabled since Javascript is a common way for advertisers to "unknowingly" distribute their malware through pop-ups and banner ads.
|
Grammar and general presentation
A web page, unlike an IM window or an email, isn't passive, and won't be directly replied to by a single person and deleted from their inbox. It will instead remain publically viewable for as long as you choose it to be, so it's generally a good idea not to make yourself look like a numbskull if it can be avoided (and in most cases, it can). I know most of you guys and gals like to cut corners when you're talking directly to someone (u no wut i mean). That's perfectly fine if the person you're speaking with is on the same wave length, or is mellow enough to not care. Most people are. I am. It's a different ball game if you're trying to keep people interested in what you have to say from a web design standpoint, though.
Just as most books are meticulously proof-read and edited before publishing, web pages could also be considered published pieces. Sure, they can be modified and updated at any time, but there's also an unwritten expectency of finality when you dissolve the difference between an actual website and a social networking profile. It doesn't have to be perfect, either. I'm sure this very page is littered with grammatical inconsistencies that would make an English major weep. Still, you have all the time in the world to prepare your content before it's open to the public. What kind of impression are you leaving if your written material reads like a text message?
|
In closing
I could go for days about things on websites that really grind my gears, but I'll stick with voicing the ones that came to mind first when I started writing this and leave it at that.
Have a nice days! :)
|
|