Archive for the ‘web design’ Category

h1

web advertising standards

July 22, 2008

It’s almost impossible to visit a website without seeing some sort of advertising. Whether you yourself click it or not, there is somebody in this world that does. I have seen some very impressive ads that definitely catch my attention.

If you want the ads you create to come out decent (and more importantly have people click on it), there are a few considerations that you must take:

  • Keep it light: not everyone has a fast connection (yet). Try and keep the file under 30kb.
  • Keep it short: If you are going to animate your ad, don’t make the animation to long. You have about 5 seconds to capture a uses attention. If you make some dramatic animation before showing the call to action (logo, URL, etc), no one will care and continue to do whatever they intended to in the first place.
  • Stay away from loops: If you are going to animate it, don’t use loops. This will only drive your casual browser insane. Plus, it’s kinda tacky.
  • Pay attention to standards:Yes, there are standards. All the ads you see on sites have to be a specific size. Check out the Internet Advertising Board (IAB) for the standards and stick to them.
h1

775px webpage width

April 16, 2008

Awhile back I posted what the standard size for a web page’s width should be. I noticed that it has been very popular amongst readers and have decided to put a cool update.

Copy and paste the following code to notepad (or equivalent) and save it as an htm file:


<html>
<head>
<title>https://funbytebitstop.wordpress.com</title&gt;
</head>
<body leftmargin=0 topmargin=0 >
<img src=”https://funbytebitstop.files.wordpress.com/2008/04/775.jpg”/&gt;
</body>
</html>


Put your monitor’s resolution to 800×600 and preview the file you just created in any browser. Now you can see for yourself that 775px is the perfect standard web page width.

Enjoy! 🙂

NOTE: When pasting this code, you may have to replace the double quotes with your own double quotes when referencing the img src (image source). For some reason when I copy and paste the code into notepad and saved it, it didn’t understand the double quotes, so you’ll have to put your own in by literally replacing it with your own double quotes. Ugh.

Also, it is always a good idea to put your values in double quotes. I omitted putting double quotes for the leftmargin/topmargin values because it was being annoying when I copy and pasted it. Some browsers are forgiving of this and don’t mind omitting the double quotes, however, you should always put your values in double quotes when using HTML.

h1

icon ads?

October 17, 2007

What’s up with the icon trend? Most websites have icons (usually their logo) that display on your browser. You might notice it on yours. Check to the left of this URL on your search box, you should see the wordpress logo.

The code for that is (between your <head> tag):

<LINK REL="SHORTCUT ICON" HREF="directory/yourIcon.ICO">
(You can even put an animated gif! Sweetness.)

Lately, Google (and some other sites I’ve seen) has had icons that are different from their own. Has anyone else noticed this? I thought that maybe it could be that the icon stayed there because of the cache, but then sometimes I see icons for sites that I’ve never even been to.

Is this a new way of advertising that I don’t know about?

h1

my new obsession; jQuery

October 11, 2007

So it’s been around for awhile (Jan. 06 to be exact). I LOVE IT. It’s basically the love child of AJAX and JavaScript. You can do so many cool things with it. I’m still getting to know the language, but from what I’ve seen so far I’m very impressed.

The Internet is ever expanding and everyday developers are coming out with technology that smacks you in the face and doesn’t bother apologizing. Here I thought that animating on the web was (Adobe’s) Flash domain. Nope. With jQuery, animation is (somewhat) simple. You can’t necessarily do everything that Flash can do, but it does allow for less processing on the client side. You don’t even need a plug-in to run the scripts. This is wonderful. See for yourself:

http://interface.eyecon.ro/demos
http://jquery.com/

h1

make an error page, geez.

May 22, 2007

Most of you have seen it, and developers should dread it. When your browsing the net and you find a site who’s page you are requesting is missing, you’ll see this infamous page (depending on your browser of course):
Page cannot be found

Please, for the sake of your viewers make a custom error 404 page.

Read the rest of this entry ?

h1

sample only

April 27, 2007

So you have to do some work for someone and they didn’t pay you yet. Or, let’s say that they only paid you half and you get the other half when you complete the project. Whatever the reason, in order for them to be happy (remember, the customer is always right!), they have to see what you’ve been up to.

If you don’t want your work stolen, use a watermark on the work you send them. This is done really easy with photoshop by creating a new file (165 x 73 pixels) and typing the word “sample”. Use a font size that can fit neatly in the center of the file. Do not use a background color, just have the text with a clear background.

Save it as a pattern (Edit>Define Pattern) and then fill in your new pattern in your flattened artwork (please use a copy, not the original!) using the layer effects. You can adjust the size and opacity in the fx panel. Put the opacity low (10-20) so that they can view your artwork. Once your happy, your almost done!

Make sure your artwork is 72 dip (dots per inch/resolution) by going to Image > Image Size. Save your work and send it! Now your work can’t be stolen because it says “sample” all over it. Not only that, the resolution is so low that it wouldn’t even be worth printing. Yay for designers!