|
Tips
Updated Monday, March 1, 2010.
Index
| AOL |
If you are using AOL, make
sure you save the images as .GIFs and .JPGs only (whatever type they are
on the set page).
AOL will force saving the
images in the .ART format if you have your settings set to compress web
graphics, and these images are not currently visible to all browsers.
I've also found that having the compression on compromises the quality
of the pages you see.
I've been told that Personal
Publisher likes to assume you're using .bmp format graphics. Since
I haven't published any graphics in this format, you would have to make
sure to specify that they are either .gifs or .jpgs.
Sorry, I can't begin to answer
questions on AOL PP because I've never used it! Whenever I've uploaded
pages to AOL, I worked on them offline and then uploaded them at keyword
"My Place". |
Annoyances
(Page Pet Peeves!) |
Most design guides will
tell you the worst thing you can do is have a page with long load time.
While this might be the very worst thing, there are other things that might
make a visit to a page less than pleasant.
Dumb Abbreviations
- Maybe I'm showing my age here, but what ever happened to proper spelling,
punctuation, and grammar? Whenever I visit a mailing list, web page,
newsgroup or other place where I can read what someone else has typed,
I have to shake my head and wonder. As SOON as I see a sentence like,
"U hav 2 c it to believe it!", I chalk it up as something that was written
by either a very young child, or someone who really doesn't care if he
gets his point across. I've noticed this has become an alarming trend
with teens, just like the "mall talk" we hear about. If web pages
have this type of "talk" on them, I usually don't spend much time on them.
I also pity the future workforce.
Automatic Pop-Ups
- This one is a MAJOR annoyance to me - and I'll bet to most of the population!
I just answered a survey about this very thing, and said that I NEVER pay
attention to what's in the pop-ups, and close them immediately. Use
them sparingly, if at all. If you want someone to stay on your page,
then don't send out ten pop-ups that will turn them off and possibly crash
their browser. When this happens I never go back!
Music - I'd say a
lot of people are probably listening to something while they're on the
computer. For me, if it's not my MP3 collection, then it's either
the radio or tv in the room. Sometimes there is nothing more annoying
than having a loud and obnoxious midi blast into my computer and clash
with whatever I'm listening to!
Poor Navigation -
When I find I have to keep hitting the back button to find another page
to see on a site, I get annoyed and usually leave. It's a good idea
to have links to all the other pages (or at least all the other major sections)
on every page of your site, if possible.
Rambling Busy Text
- This one turns me off immediately. If it seems like a job to read
the page, I usually won't bother. Text that's appropriately broken
by paragraph breaks, or lines or bars, is much more pleasing to the eye
than one long stretch of text that's squished together. |
| Bordered
Sets |
See the
Border
Tips page showing some examples of using tables with bordered sets
to make sure your text doesn't show up over the border. |
| Browser
and Resolution Differences |
IE
vs Netscape
One good tip I can give you
- if you have both browsers on your system - view your pages with both
to make sure your visitors are seeing what you intended them to see.
I try and do this as often as I can - but I'll bet I forgot a few times
and things might look a little funny to IE users. I find this to
be especially true when using tables - and my site is loaded with them.
So, bear with me, as I catch the errors I'll fix them. If you're using
Netscape you should be seeing the pages the way I see them, though!
I think there are some utilities
that simulate different browsers. If I find any I'll post their locations
here. While I'd rather use the real Netscape and IE to test my pages,
I still would like to find something that simulates WebTV - and hope I
don't gasp in horror at my pages once I do!
Screen
Resolution
It's also a good idea, if
you're able, to check your pages at various resolutions. My backgrounds
will not repeat the borders, even at 1024 x 768.
I've found that the most
common resolution is 800 x 600. Not realizing this when I started
making graphics - I found I was making them way too big for the most common
resolution because my monitor was set at 1024 x 768! While the background
borders won't repeat - some of the borders and buttons are huge on the
oldest sets. I now design at 800 x 600 when I decide on my border
and button sizes (but still make the backgrounds wide enough for higher
resolutions).
Some people browse at yet
higher resolutions, and some even use the lower 640 x 480. While
it's impossible to please all of the browsers and resolutions all of the
time, you can try to get the best results by testing browsers AND resolutions
on your pages. If you can't do this yourself, try to get a friend
to view them and let you know what they see.
There are probably a lot
more issues with the difference between these two major browsers.
I'll post them as I think of them. |
| Button
Coding |
To code buttons, use the
following:
<a href="http://www.chibicreations.com"><img
SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>
Of course you'll substitute
the correct filenames, urls and dimensions.
Borderless
Buttons
None of my buttons are designed
to have borders around them. However, when you add a link to a graphic,
browsers assume there should be a border around it - just as links have
underlines. Borders make the buttons look funny, especially when
I've tried to make them look realistic with shadows against the backgrounds.
To avoid the borders and
display the buttons as you see them on my set pages, make sure you use
the border=0 statement in your code.
<a href="http://www.chibicreations.com"><img
SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>
Image
Attributes
It's also important to include
the height and width statements as shown in the example above.
When you code your images
using their height and width, browsers will load the pages much more quickly
because they don't have to figure out the dimensions for themselves.
How do you find the correct
dimensions for a particular button? It's easy - simply display a
web page with the image on it, and right click to bring up a sub menu.
Choose "View Image" or something similar. This will bring you to
a new browser window showing only that image. The title at the top
of the window should list the dimensions for you.
<a href="http://www.chibicreations.com"><img
SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>
Open
in New Window
You might want to code your
pages so that clicking on my credit button opens a new window rather than
leaving your site. If so, use the target="_blank" statement
after the Chibi Creations url. Be sure to put a space between the
quotation marks and the start of the target statement, and keep it
within the brackets.
Example:
<a href="http://www.chibicreations.com"
target="_blank"><img SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>
|
| HTML |
I get a lot of email from
people asking about HTML coding, and a lot of the questions are general
things not pertaining to graphics.
While I like to be helpful
and I do answer their questions, I'd rather point people to some tutorial
pages that can answer these questions far better than I can. Here
are a quite a few links to get started.
Beginner's
Guide to HTML
BigNoseBird.Com
Builder.Com
Free
Web Utilities
HTML
Quick Reference
Sizzling
HTML
Web
Developer.Com
More
Links
Also see my Webmaster
Resources page. |
| Table
Sets |
When I redesigned the graphics
for this site in November 98 with the black/floral design and put them
into place, I decided to use a different approach that I had not seen anywhere
else before. More and more graphics are now designed this way, and
they give pages a whole new look, away from the customary left-bordered
appearance. I've been trying to design new sets with alternatives
- both tiled backgrounds for tables, and left bordered ones as well.
Some even have "framed" pieces for your tables.
Using a centered table on
top of your page background, either with a particular color or a specific
secondary background, will give the effect of double borders (top and bottom
too!)
This type of set will look
like a double bordered set no matter what browser is used - no matter what
resolution (if you use a centered table with percentages for the sizing).
I'm sure we've all seen "double
bordered" pages that look awful to us because they were designed by someone
using a different resolution - it just doesn't work!
Most table sets must use
the table color or secondary background that I used only because the graphics
were designed for it (they have bits of the background in them).
You
MUST remember
to use the closing table codes or they won't work properly for Netscape
browsers! If you ever stumble upon a page that has only a background
and nothing else at all (while you're using Netscape) - view the source
code - chances are you'll see all that should be in the page, but the author
forgot to use their closing table code!
</td></tr></table>
Placed just after the content
ends
(the very last text or picture that will show up on the page - before the
/body and /html statements). Or, if you have several nested
tables, make sure each one has it's own closing table codes. |
| Text
on Buttons |
Here are some basic instructions
for placing text on buttons using MS Paint (in the Accessories folder)
and Windows 98.
Save the blank button on
your system, and open MSPaint.
File, Open - and find the
blank button in whatever directory you placed it. You may have to
select which file type to look for so it finds the appropriate one.
Once displayed, click on
the "Type" button (shown as a capital A). Down below all the tools
there are two buttons with pictures of three different shaped blocks..
The top one shows the green block on a white background, where the bottom
one shows it on a transparent background. This bottom button is the
one you should click. Select white (or whatever other color you choose
for the text) at the bottom of the screen.
Place the cursor where you
want the text, and click. If a little font toolbox doesn't pop up,
you can right click to select "Text Toolbar". Here is where you can
select your font and start typing the text. You can size the font,
stretch the little text box, etc.
When finished:
File, Save As.
Make sure you're saving as
the same file type, but name the button something else such as mail,
photos, next, etc., and move on to make the next. You should
always open and save the files in the formats that they originally came
in - and this is especially important with gifs because some of them have
transparency and keeping the file type will retain it.
Since your buttons will probably
look different than my originals, if you have the time and patience it
would be great to make ALL the buttons you'll be using so your pages look
cleaner and better.
|
| Web
TV |
If you have Web TV, that's
a whole different set of circumstances - you don't have a computer to download
the graphics to. Also, you can't link directly to my images since
they're not on my server. I set them up on temporary web pages for
the Web TV population (and email them by zip file to others) so
that you may have access to them for a short time. Therefore,
you must use a "transloader" of sorts to get them from my temporary page
to your server.
Try this Geocities
Web TV Committee page for some more help. |
More tips to come...
© Dawn Gombos /
Chibi Creations 1998-2006 All Rights Reserved
Chibi Creations site graphics are
NOT available for any use.
|
|