Re: Revisiting Cleaning-up HTML & Site Load Speeds

J2Lingerie wrote:

As I said in my earlier post of 18/03/05...
I am working on cleaning up my site to make it
load faster and produce a better impact to increase
my visitor/sales ratio.

You can probably reduce your HTML by 50-60%

<table width="720" height="35" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="433" valign="top"><div align="left"><font
color="#0000CC" size="1" face="Verdana, Arial, Helvetica, sans-serif"><a
href="http://j2lingerie.j2web.co.uk/">Tattoo
Hosiery Home</a> | <a href="Products.htm">Products</a>

a href="mailto:info (AT) j2lingerie (DOT) co.uk">Contact Us</a
a href="SiteMap.htm">Site
Map</a></font></div></td

<td width="339" valign="top"><div align="right"><font
color="#CC9933" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<strong><em>&quot;Love
your legs... and really get noticed !&quot;</em>
</strong></font></div></td>

</tr>
</table>

Can be (partially) rewritten like:

<ul>
<li class="first"><a href="http://j2lingerie.j2web.co.uk/">Tattoo
Hosiery Home</a></li>
<li><a href="Products.htm">Products</a></li>
<li><a href="mailto:info@j2lingerie.co.uk">Contact Us</a></li>
<li><a href="SiteMap.htm">Site Map</a></li>
</ul>

The | can be made by using a left border on li (except on class first)

Even with simple CSS you can avoid things like:

<font color="#0000CC" size="1" face="Verdana, Arial, Helvetica, sans-
serif">

etc.


--
John Perl SEO tools: http://johnbokma.com/perl/
Experienced (web) developer: http://castleamber.com/
Get a SEO report of your site for just 100 USD:
http://johnbokma.com/websitedesign/seo-expert-help.html

Thanks for your reply John

I wish I could just look at the code and see exactly
what to do like that ! - It all looks jumbled-up like its
written in a different language !
I'll see if I can implement something like that ?

Where can I get the freeware application :
"Clean-up-with-John-Bokma.exe" ?

MrMcN

On Tue, 22 Mar 2005 09:36:15 +0000 (UTC), "Mr McN"
<BobMcNobby (AT) yahoo (DOT) com> wrote:

Thanks for your reply John

I wish I could just look at the code and see exactly
what to do like that ! - It all looks jumbled-up like its
written in a different language !
I'll see if I can implement something like that ?

Where can I get the freeware application :

It's called a brain. Apply frequently. Improves with practice.

BB

"Clean-up-with-John-Bokma.exe" ?

MrMcN

--
www.kruse.co.uk/ seo (AT) kruse (DOT) demon.co.uk
seo that loves a cuddle...
--

Where can I get the freeware application :

It's called a brain. Apply frequently. Improves with practice.

Brain totally reserved for CAN communication protocols
but have between 11pm and 1pm free most days !! :-)

McN

BB


"Clean-up-with-John-Bokma.exe" ?

MrMcN


--
www.kruse.co.uk/ seo (AT) kruse (DOT) demon.co.uk
seo that loves a cuddle...
--

Mr McN wrote:

Thanks for your reply John

I wish I could just look at the code and see exactly
what to do like that ! - It all looks jumbled-up like its
written in a different language !
I'll see if I can implement something like that ?

Where can I get the freeware application :
"Clean-up-with-John-Bokma.exe" ?

LOL :-D.

Well, in fact it is quite easy, learn less HTML and a bit more CSS
(which is in fact the hardest part).

The example I showed, your links are a list of links, so I use <ul></ul>
and <li></li> for each item. You normally get a vertical list with * in
front, but with CSS you can remove the *, make the list horizontal, and
you can add the vertical bar (|) as a separator.

http://johnbokma.com/ at the bottom has a simple example (without |)

Every time you use <font> inside an element, you can make it shorter by
moving the face, color, size part to CSS, and give the element a class,
e.g.

<td><font face="..." color="...">.....</font></td>

Can be replaced by:

<td class="price">.....</td>

There are two ways to clean up:

- learn CSS and read a bit here and there about how to do columns,
menu's, etc. Also: learn the hacks (you might need them).
And start from scratch making a copy of your existing page(s)

- learn as you go, clean up the HTML more and more, move more and
more to CSS

The former is probably the best way to go, but has a steep learning
curve.

Finally, do it in Firefox, and fix it for IE. When finished ask in an
HTML group for comments, be nice to them, thank them, and fix the page
and ask for more :-D.

--
John Perl SEO tools: http://johnbokma.com/perl/
Experienced (web) developer: http://castleamber.com/
Get a SEO report of your site for just 100 USD:
http://johnbokma.com/websitedesign/seo-expert-help.html

J2Lingerie wrote:

And start from scratch making a copy of your existing page(s)


Ouch... that hurts...
I have only just mastered tables and embedding PayPal !

Tables are indeed very easy for layout. The only thing is: purists say:
use tables for tables, and not layout. You can do many things with div
and some clever CSS, but sometimes...

The former is probably the best way to go, but has a steep learning
curve.

I love steep learning curves :-)

Good :-D.

Very informative John, Thank you very much

You're welcome.

I have downloaded 5 Ebooks on CSS... about 3 years reading !

Yup, in this case more is not better. google for: css book review (or
ask in comp.infosystems.www.authoring.stylesheets ). I know that Eric
Meyer writes good books on CSS. And I prefer O'Reilly over many other
publishers.

Also, there are a lot of good examples on the net, e.g:

http://www.google.com/search?q=pure%20css%20menu

(I see eric meyer at #1 :-D )

The hardest thing about CSS is learning and understanding all the hacks
/ filters, e.g. sometimes you have to do nasty tricks to kick IE a bit
around.

http://www.google.com/search?q=css%20hacks

Hey, we've got Bank holiday here soon !! (sorry kids !)

Yup, those often work the best. No computer, just reading. I often try
to "speed" read the book once, and then start over, and make notes
(about 2 a page on average, depends a bit on the level)

Actually my mate and I are going to learn CSS together
...I wont be updating it all again for a while until I have
got the whole CSS thing mastered (did I say "mastered" ??!!)

Yeah, that often works the best :-D I still want to redo my site,
probably next month.

I do most of my viewing if Firefox, I really cant stand IE

Yeah, same here too. If it works in Firefox, I can often make it work in
IE. The other way around takes often a lot of time.

Many Thanks

You're welcome :-D

--
John Perl SEO tools: http://johnbokma.com/perl/
Experienced (web) developer: http://castleamber.com/
Get a SEO report of your site for just 100 USD:
http://johnbokma.com/websitedesign/seo-expert-help.html

I have downloaded 5 Ebooks on CSS... about 3 years reading !

Yup, in this case more is not better. google for: css book review (or
ask in comp.infosystems.www.authoring.stylesheets ). I know that Eric
Meyer writes good books on CSS. And I prefer O'Reilly over many other
publishers.

Also, there are a lot of good examples on the net, e.g:

http://www.google.com/search?q=pure%20css%20menu

(I see eric meyer at #1 :-D )

These are the Ebooks I have found and downloaded :

CSS - O'Reilly - Cascading Style Sheets The Definitive Guide.pdf
Prentice Hall - Css, Dhtml And Javascript.pdf
Sitepoint Pty - Html Utopia - Designing Without Tables Using Css.pdf
SitePoint.The.CSS.Anthology.101.Essential.Tips.Tri cks.and.Hacks.pdf
Wiley - Creating Cool Web Sites With Html, Xhtml And Css (2004) - 432pp.pdf

Any of them of particularily useful ?
It may save reading time if i just focussed on one of them

Thanks

MrMcN

J2Lingerie wrote:

I have downloaded 5 Ebooks on CSS... about 3 years reading...

I tend to learn more quickly by analyzing examples than applying theory, so
what I did to learn CSS and completely redo my website was to:

1. scour the web to find a site that I could use as a model of what I wanted
2. copy the site and put in my own text
3. remove the copied site's CSS functions that I saw I would not be using
4. tweak the copied site's CSS to get the effects I wanted

I actually learned CSS from steps 3 and 4, all the while reading online CSS
tutorials. This process allowed me in a surprisingly short time - about two
weeks - to go one to step 5: start using new CSS elements to create new
features on my website. Just to keep the learning curve in context, I had
designed my websites up to then with Dreamweaver 3 and had only a smattering of
knowledge of HTML.

When I finished all this, I think I had eliminated about 90% of the copied
site's CSS. What's left is now mine.

--
Brad Blanchard
Website http://www.braser.com
Email accepted from the website

Mr McN wrote:

These are the Ebooks I have found and downloaded :

CSS - O'Reilly - Cascading Style Sheets The Definitive Guide.pdf
Prentice Hall - Css, Dhtml And Javascript.pdf
Sitepoint Pty - Html Utopia - Designing Without Tables Using Css.pdf
SitePoint.The.CSS.Anthology.101.Essential.Tips.Tri cks.and.Hacks.pdf
Wiley - Creating Cool Web Sites With Html, Xhtml And Css (2004) -
432pp.pdf

Any of them of particularily useful ?
It may save reading time if i just focussed on one of them

The O'Reilly books are often good, or excellent.
The PH book sounds focussed on 3 techniques together, 2 you probably don't
use.
The designing without tables sounds nice, but I wonder if it has all the
research of this one:
<http://www.thenoodleincident.com/tutorials/box_lesson/>

The hacks, I already gave a nice link :-D, no idea how much the book covers

The last one, I wouldn't use XHTML. And you probably know enough HTML to skip
that one.

So I would start with the first book if I were you :-D

--
John Perl SEO tools: http://johnbokma.com/perl/
Experienced (web) developer: http://castleamber.com/
Get a SEO report of your site for just 100 USD:
http://johnbokma.com/websitedesign/seo-expert-help.html

GB Blanchard wrote:

J2Lingerie wrote:

I have downloaded 5 Ebooks on CSS... about 3 years reading...

I tend to learn more quickly by analyzing examples than applying
theory, so
what I did to learn CSS and completely redo my website was to:

Weird, I always feel exactly the opposite. Mostly because most examples of
programming or CSS or HTML are very very bad.

1. scour the web to find a site that I could use as a model of what I
wanted 2. copy the site and put in my own text

One can only do this if one fully understands CSS. Otherwise you copy the
mistakes etc of someone else on your site.

3. remove the copied site's CSS functions that I saw I would not be
using

So you must already understand CSS, how could you otherwise remove
"functions" (it are not functions)

4. tweak the copied site's CSS to get the effects I wanted

Again, only works if you know what you are doing, and hence know CSS and
moreover know all the weird hacks / filters.

I actually learned CSS from steps 3 and 4, all the while reading
online CSS
tutorials. This process allowed me in a surprisingly short time -
about two weeks - to go one to step 5: start using new CSS elements to
create new features on my website. Just to keep the learning curve in
context, I had designed my websites up to then with Dreamweaver 3 and
had only a smattering of knowledge of HTML.

How could you do step 3 and 4 then? You knew nothing about CSS. By looking
up in a book on a site, tweaking until it works?

With learning a programming language this is the worst way to go, and I
doubt it's any different from learning CSS. It's not learning, but guessing
for a long time. You apply things without really understanding them why.
Moreover, if you look at bad examples (for example people who learned it
this way) you just copy bad style.

When I finished all this, I think I had eliminated about 90% of the
copied
site's CSS. What's left is now mine.

IMNSHO that studying for 1 week, say 3 days of reading, 2 days of
experimenting and looking at examples would have got you further than 2
weeks guess, trial and error.

The problem is that people consider a nose in a book often "reading for
pleasure" and think others regard is as: nothing is happening. And no,
productivity can not be measured by the number of keypresses a day...

--
John Perl SEO tools: http://johnbokma.com/perl/
Experienced (web) developer: http://castleamber.com/
Get a SEO report of your site for just 100 USD:
http://johnbokma.com/websitedesign/seo-expert-help.html