website question regarding css

@pawkyAug 29.2004

There is this website that is currently up (~~[url]~~www.outsidepride.com[/url]) that someone i know has. It is done in php w/ the layout done using tables and css to style the tables. He is making a lot of money w/ the website (over 100k a year) and has gone through some ppl doing the coding for him. He started out doing it but doesnt have the time. He is the son of a friend of my dad’s so i could get it pretty easy. My main question right now, how much do u think it would help the site to convert it to a css layout instead of the table layout? How much faster u think it will make it? Also, how hard do you think it would be to convert everything over? thx

to post a comment

CSS

13 Comments(s) _↴

@JPnycAug 29.2004 — #I doubt it would make any noticeable difference at all, except to a few web standards enthusiasts who checked the source code.

@MstrBobAug 29.2004 — #If done with [I]proper, semantic[/I] markup, and with pure-CSS, I can see you really hacking away at that source code. There's a lot of unneccessary HTML in there, along with a lot of unecessary classes. Considering the website's size and usage, if you used semantic markup to aid in the styling (ex: using an unordered list for the nav links and similar) you'd save a large amount of bandwith. You'd hence get faster page loads for users on 56k (took a few seconds for me, and I'm on cable). Generally, especially non-technofiles, the longer a page takes to load, the less likely they are to use the site. It has the potential to increase the visitor numbers and to really cut down on bandwith. I see nothing particularly difficult with the design, so there shouldn't be a large CSS file or many browser hacks needed at all. It would be a successful and worthwhile redesign.

@CharlesAug 29.2004 — #Take a look at http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.outsidepride.com%2Fstore%2Fhome.php and you'll get an idea of just what the problem is. That site is a pretty miserable experience for anybody using a Braille or audio browser.

@JPnycAug 29.2004 — #You could trim the code a bit yeah, but we're talking about maybe 50 chars in a txt file. You won't even notice the difference. Trimming graphic content would make a noticeable difference.

@MstrBobAug 29.2004 — #No, he's got tons of uneccessary code. Trimming the code on the home page would drop 1k or so in file size. Now multiply that by the number of pages on the website times the number of visitors and that's a substantial ammount.

And graphics optimization never hurts. Unless the quality drop results in that banner. It's so pixelated.... it looks like it was saved as a .jpg in MSPAINT *shudders*

@Paul_JrAug 29.2004 — #[i]Originally posted by DUNSEL [/i]

[B]You could trim the code a bit yeah, but we're talking about maybe 50 chars in a txt file.[/B][/QUOTE]
We're talking more than just 50 characters here; you could trim that down a lot.

This, for example:

[size=1]
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=249" class="VertMenuItems"&gt;Animal Repellent&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=250" class="VertMenuItems"&gt;Arches&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=251" class="VertMenuItems"&gt;Books&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=252" class="VertMenuItems"&gt;Dethatcher&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=253" class="VertMenuItems"&gt;Fertilizer&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=255" class="VertMenuItems"&gt;Gardening Products&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=317" class="VertMenuItems"&gt;Grass Plugs&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=254" class="VertMenuItems"&gt;Greenhouse Kits&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=256" class="VertMenuItems"&gt;Harrows&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=257" class="VertMenuItems"&gt;Inoculant&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=344" class="VertMenuItems"&gt;Landscape Design&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=258" class="VertMenuItems"&gt;Landscape Fabric&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=259" class="VertMenuItems"&gt;Lawn Edger&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=261" class="VertMenuItems"&gt;Lawn Mower&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=260" class="VertMenuItems"&gt;Lawn Roller&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=262" class="VertMenuItems"&gt;Lawn Stripers&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=263" class="VertMenuItems"&gt;Lawn Sweepers&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=264" class="VertMenuItems"&gt;Moss&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=265" class="VertMenuItems"&gt;Mycorrhizae&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=266" class="VertMenuItems"&gt;Reel Mowers&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=319" class="VertMenuItems"&gt;Seed&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=268" class="VertMenuItems"&gt;Soil Test Kits &amp; More&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=267" class="VertMenuItems"&gt;Spreaders&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=269" class="VertMenuItems"&gt;Squirrel Feeders&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 &lt;font class="CategoriesList"&gt;&lt;a href="home.php?cat=318" class="VertMenuItems"&gt;Trail Mower&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
 [/size]

Could be trimmed down to:

[size=1]
 &lt;ul id="categories"&gt;
 &lt;li&gt;&lt;a href="home.php?cat=249"&gt;Animal Repellent&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=250"&gt;Arches&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=251"&gt;Books&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=252"&gt;Dethatcher&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=253"&gt;Fertilizer&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=255"&gt;Gardening Products&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=317"&gt;Grass Plugs&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=254"&gt;Greenhouse Kits&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=256"&gt;Harrows&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=257"&gt;Inoculant&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=344"&gt;Landscape Design&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=258"&gt;Landscape Fabric&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=259"&gt;Lawn Edger&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=261"&gt;Lawn Mower&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=260"&gt;Lawn Roller&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=262"&gt;Lawn Stripers&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=263"&gt;Lawn Sweepers&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=264"&gt;Moss&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=265"&gt;Mycorrhizae&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=266"&gt;Reel Mowers&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=319"&gt;Seed&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=268"&gt;Soil Test Kits &amp; More&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=267"&gt;Spreaders&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=269"&gt;Squirrel Feeders&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="home.php?cat=318"&gt;Trail Mower&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 [/size]

Which is not only more semantic, easier to read/modify, but smaller by over 1K -- and that's [i]just[/i] the category links. That code could use some major cleaning in a terrible, terrible way.

[i]Originally posted by MstrBob [/i]

[B]No, he's got tons of uneccessary code. Trimming the code on the home page would drop 1k or so in file size.[/B][/QUOTE]
If that site was rewritten with semantic, clean markup, I bet that'd be closer to 10K.

@JPnycAug 29.2004 — #Yeah I see the point, but a 1k difference in my opinion won't be noticeable in terms of download speed. And mutilplying the pages isn't valid because you only DL 1 at a time.

@Ben_RogersAug 29.2004 — #[i]Originally posted by DUNSEL [/i]

[B]Yeah I see the point, but a 1k difference in my opinion won't be noticeable in terms of download speed. And mutilplying the pages isn't valid because you only DL 1 at a time. [/B][/QUOTE] He's referring to the bandwidth used. Smaller, semantic code = cheaper.

@JPnycAug 29.2004 — #Ah, well in that case it would make an appreciable difference. Dunno that it would allow a cheaper hosting package, but it might, depending on the number of visitors. Well to answer his other question then, which was how much difficulty is involved, it would basically be redesigning the entire site. Would end up taking less time than trying to weed out the bad code piece by piece.

@Ben_RogersAug 29.2004 — #No, I think one good afternoon could be all the redesign requires, if he uses includes...

@JPnycAug 29.2004 — #What would you use SSI for? Bear in mind I didn't bother to sift through that mountain of code.

@Ben_RogersAug 29.2004 — #[i]Originally posted by DUNSEL [/i]

[B]What would you use SSI for? Bear in mind I didn't bother to sift through that mountain of code. [/B][/QUOTE] For the navigation, footers, and headers that are repeated on every page, of course. Then you just change the header and footer files, and you're almost done, just gotta change the content's HTML.

@Paul_JrAug 30.2004 — #[i]Originally posted by DUNSEL [/i]

[B]Yeah I see the point, but a 1k difference in my opinion won't be noticeable in terms of download speed. And mutilplying the pages isn't valid because you only DL 1 at a time. [/B][/QUOTE]
That's just 1K for that small piece of code -- there's code like that all over the place. You could probably drop the filesize of that main page by 10K. Multiply that by however many pages you have, and multiply that by the amount of traffic you get, and then you'll see how much bandwidth you save. Wasted bandwidth == wasted money.

Also in #CSS _↴

Which DOCTYPE?Multiple LINK Entries Position a Semi-Transparent Div on Top of Another

Success!

Help @pawky spread the word by sharing this article on Twitter...

Tweet This

website question regarding css

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

website question regarding css

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴