?

Log in

No account? Create an account

Previous | Next

Take a class or something

Web Design 101:

This would be a 'bad' design plan if you want people to actually stay around while your 'cool' site loads:



Clue, meet Web Designer. Web Designer, meet Clue. Please? 500 graphics per page makes your page load SLOWLY, even on high speed access. Seeing as how there are users out there still on dial-up, try to optimize your pages.



Excuse the ascii values below, but you'll get the gist.



<tr>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="37" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="14" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="16" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="13" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="39" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="13" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="18" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="25" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="7" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="12" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="21" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="14" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="10" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="11" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="19" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="21" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="25" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="18" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="10" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="19" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="20" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="14" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="13" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="17" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="6" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="11" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="22" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="27" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="7" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="13" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="15" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="7" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="10" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="28" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="15" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="18" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="15" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="4" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="8" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="12" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="2" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="11" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="16" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="9" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="22" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="9" height="1"><img src="./images/space.gif" width="1" height="1"></td>

	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="3" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="17" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="34" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="1" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="49" height="1"><img src="./images/space.gif" width="1" height="1"></td>
	<td nowrap width="5" height="1"><img src="./images/space.gif" width="1" height="1"></td>
</tr>




It goes on and on like this. *sigh* I would have quoted all of the code, but LJ told me that made the post 'too large' *laugh*


Comments

( 3 thoughts — Whatcha' think? )
allykatt
Jan. 2nd, 2008 03:14 pm (UTC)
geez, louise. i would bet anything that's either a template or a page constructed using a template program.

i HATE template sites! they're ridiculously complicated, and HUGE. there's no reason to have things done that way, especially with CSS having come so far!

people who under-use or mis-use CSS crack me up, too. i found a page recently designed by someone i have no respect for {heh} that actually linked an on-site CSS sheet - which was ONE LINE LONG! all it did was state the "page" properties - background color, font, etc. and then ... in the individual page's ... the designer actually specified the exact same elements! worse, the pages were all supposed to be exactly the same {which is ... what css sheets were DESIGNED for...} but - he had different point fonts for headers, slightly different colors or layouts...
the whole thing was awful. of course, considering the designer, i laughed. a LOT!

man, when will people learn? webpages are designed for people to view, and navigate. these should be the goals of any design!
morzsa
Jan. 2nd, 2008 04:26 pm (UTC)
ooooh....

That hurt.
oddharmonic
Jan. 2nd, 2008 05:42 pm (UTC)
...

I'm going to crawl back under my rock now. I can't brain after reading that code.
( 3 thoughts — Whatcha' think? )