Animated gif or something other?

[Anonymous]

Greetings All,

I’m trying to use a few elements from the old site as teaching aids. Currently I’m thinking of reusing the animated gifs here on the new site. They are rather simple and straightforward, but is there a better way? I know that placing them in tables is a no-no, but given their small sizes, are they alright to reuse?

Also, should I use an image preload?

Thanks in advance.

[Paulie_D]

Your question is very broad.

GIFs of what?

What purpose do they serve?

What sort of file load so they impose?

Could they be reproduced using more semantic divs, animations &/or transitions of static images ?

If they could, would it improve performance or not?

[Anonymous]

Oops! I meant to have a link to the page with the gifs. It is here and the gifs are a smidge more than half way down.

They loaded pretty well even when first created, so I would imagine most connections would handle them in this day. As for reproduction options, I’ve not a clue. They are rather plain and merely for basic illustration and teaching, so I’m hoping they are alright as they are. I would like to know what options there are for more complex animated gifs as I have a few of those. Again, if pre-loading would help is js alright to use?

Thanks Paulie.

[Paulie_D]

From the couple I could see they look harmless enough…no need to re-invent the wheel.

The only way to be sure is to use them and see how the site performs using developer tools.

As for pre-loading, I’m not really qualified to speak…and I’m certainly no JS expert.

[Anonymous]

Thank you Paulie,

Given they are simple, is it acceptable to use a table to put these in or should I use something like the following?

.wrap{
    width:210px;
}

<div>
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>

As for the js, I’ve used this in the past:

if (document.images) {
    img1 = new Image(0,0);
    img1.src = "imade1";
    img2 = new Image(0,0);
    img2.src = "image2";

It has served well, but may be outdated. I’ve searched for something that is current but am not finding anything useful.

Best Regards.

[Paulie_D]

For layout, my preference is to use divs rather than a table.

Tables were used many years ago for layout purely because the offered the flexibility that wasn’t available with the state of CSS and browsers back then…and I’m talking 20 years or so.

That said, if you are more comfortable with tables, have at it. Unless someone looks at your source HTML they aren’t going to know and it’s your site and you can code it how you want.

The code purists may mock, they would anyway if you aren’t using bleeding edge properties and elements but that’s not something I would worry about.

At the end, to my mind, the final question that needs answering is “Does the site work?” If it does in various browsers at your target window size then that’s all that really matters.

Others might disagree with how you got there but at least you have arrived at your destination.

Mini-rant over :)

As for JS, I have no real insight, I can barely parse basic JQuery functions and I usually need someone to hold my hand while doing it.

[Anonymous]

Greetings Paulie,

I went with divs in wrappers. After careful consideration I realized this would allow me more control and a cleaner looking page than the tables would.

> The code purists may mock, they would anyway if you aren’t using bleeding edge properties and elements but that’s not something I would worry about.

At the end, to my mind, the final question that needs answering is “Does the site work?” If it does in various browsers at your target window size then that’s all that really matters.

I agree. I used to fudge on HTML years ago and had some criticize, but the pages worked fine. As my site isn’t about web design but about artifacts, I figure the coding isn’t the focus. I do however want to learn CSS to the best possible degree so that if I change my mind regarding the above, I will know what to do.

As for JS, I have no real insight, I can barely parse basic JQuery functions and I usually need someone to hold my hand while doing it.

LOL! I know how that (hand holding) feels, only with CSS in my case. I have learned quite a lot, but still get confused at times. This is more the case when I can’t be at my computer and can’t keep things fresh in my mind.

JS was/is something I understand pretty well, but with all the changes I am concerned that what I used to use is outdated, such as the example given above.

Thanks Paulie!

[Author]

Posts