ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
3D Sign Shop in Mercado
-
-
- mjindustry
- Hero Rocketeer
- Posts: 289
- Thanks: 0
-
Finally have come close to finishing a joomla site! :shock: :shock:
Thanks to RT, seriously...wow, just wow. You guys are so full of awesome it ain't funny. You make this dummy look like, well, a little bit better than the fat fingered dummy I usually tend to be.
So here it is... www.3dsignshop.com/
OP wrote:Site Updates since original post: Today's Date 4/4/2011
Rokstorie-s on front page is now Rokslideshow (love it, way better for what I'm doing there)
Social Stuff- Check out this social stuff I'm implementing. I have forms that will produce discount codes for the ecwid shop. It requires that you perform a small task like a "like" on facebook. "follow" on twitter etc to be completely valid. That was a fun implementation.
SidePanel I was having a heck of a time trying to get a side menu going, no matter how i did it it would crash my front end. I ended up implementing a yoodrawer with ecwid shop category thumbs! Some yootools are pretty sweet inside Rocket Templates.
Rokbridge is implemented. Theming is still required. I can't even figure out how to center my logo there . I tried firebug but just couldn't figure out the right code to get er done.
Linky...
3dsignshop.com/forum/
Some screens for a preview...
Rokstories with K2 content featured on home page...
This image is hidden for guests.
Please log in or register to see it.
Here I have added many .png's to the fusion sub menu items..
This image is hidden for guests.
Please log in or register to see it.
A snapshot of items view in my mercado / Ecwid Catalog.
This image is hidden for guests.
Please log in or register to see it.
Then a single item view...
This image is hidden for guests.
Please log in or register to see it.
Here you can see the sub menu in the mega gallery
This image is hidden for guests.
Please log in or register to see it.
The simple image gallery pro plugin allows for easy photo galleries in articles
This image is hidden for guests.
Please log in or register to see it.
Here is a snap shot of our livehelpnow icon and user initiation window.
This image is hidden for guests.
Please log in or register to see it.
For our FAQ we used yoo accordion .
This image is hidden for guests.
Please log in or register to see it.
Notes:
-Have recently installed Mercado phpbb3 and rokbridge , working on making it look good.
-Mega Gallery is a WIP as far as taggin gpics and text content.
Critique?
~I would like to hear advice on site loading times/site size. I know it's a pig, it's slow...I know that. Now what can I do to fix it...without sacrificing all of my images and features?
~My claw mark background png is around 110k for example, but i love it...what can I do about that?
~Also, my 'logo' big wide top banner is like 90k. Any optimization tips there?
Any other function, form or content critiques are welcome as well...Thanks for looking.
Jason & Melissa Jones
3D Sign Shop by Nice Carvings - Last Edit: 14 years 2 months ago by mjindustry.
- Commerce Site with Metropolis magento 1.7- Wood Signs
-
-
-
- Hobbes
- Newbie
- Posts: 13
- Thanks: 0
-
Can't see the page directly (maybe offline today?). However, some points on image optimization;
PNGs are excellent (with the right settings) for black & white images (including shades of grey) OR for smaller images that require some transparency. I have a vague recollection that IE6 doesn't acknowledge the transparency of PNGs (in which case you'd have to use GIFs in order to achieve the same result) - but I've been ignoring IE6 for as long as I can remember (preferring to spend my time on an "upgrade already" message as opposed to eating glass).
Generally, JPGs are very good for colour images that you need to keep small - a JPG will trounce PNG for filesize if you require lots of colours. If an image only requires a palette of, say, 14 colours, you can specify that when saving a PNG - whereas JPG will always use a 16.7 million colour palette whether it requires them or not (and this is why PNG tends to be particularly good for low-size, high quality B&W images in which a few dozen shades of grey can still produce something pretty stunning).
When saving colour JPGs, you have to experiment with different levels of compression. Too much compression and you'll get a tiny file, but your gorgeous landscape will look like pizza. If you're using Photoshop, you can get a real-time representation of what an image will look like at differing levels of compression whilst you're setting up the save.
You said that your background image is about 119Kb in size, right? Well, I can't really make it out from the snapshots above - but what might be an option for you is to use a repeated pattern rather than one enormous image if you have the option. For example, if you have a vertical gradient, you might use a 1px wide image that's as tall as you require - which you would then repeat horizontally (thus only loading the one tiny image). If need be, you could then layer another image on top of that (usually a transparent-layered PNG) if you needed additional defining characteristics, etc.
Hope that's of some use ...
-
-
-
- mjindustry
- Hero Rocketeer
- Posts: 289
- Thanks: 0
-
Wow Hobbes! Great information there! :shock: I will read and re-read and soak in every millimeter of it believe me, you.
:cheesy:
I did at least one site backup today.
Who knows what else may have possibly ailed your attempt to view the site. Anyway,again I seriously appreciate the comments on the optimizatation.
Your idea on the big BG is good, I have actually thought of that. But I think I would need to do 2 backgrounds like that in order to cover the ground, one left and one right. Is that even possible? Otherwise yea I don't know it seems like what makes it so large of a file, is mostly the physical size...of which most is blank transparent space. I don't have photoshop, I use xara and it allows with png to go (what they call) true color + alpha. This also of course allows transparency. Then, the next step is 256 and that option just looks way too grainy.
Anyway, eventually I will figure out the background. Would be awesome if that were the only worry..lol BTW: Is the 110k extremely large for a background image?
Thanks! - Commerce Site with Metropolis magento 1.7- Wood Signs
-
-
-
- Hobbes
- Newbie
- Posts: 13
- Thanks: 0
-
Aaaah, yes - site's working for me now.
mjindustry wrote:Your idea on the big BG is good, I have actually thought of that. But I think I would need to do 2 backgrounds like that in order to cover the ground, one left and one right. Is that even possible? Otherwise yea I don't know it seems like what makes it so large of a file, is mostly the physical size...of which most is blank transparent space.Some good thinking there, fella - that's the kind of inventiveness that will serve you well as a web developer! (says me, pretending not to be somewhat amateur on that front, myself) :cheesy: Now in this instance, that wouldn't necessarily afford you any immediate benefit - but it might do depending on your answer to a few other questions ...
As you say, most of the image is populated with transparent space. In the world of PNG-24s (loosely speaking, there are two types of PNG that are used for web work - PNG-8 and PNG-24, at a glance I'm assuming you're using the latter) transparent space doesn't take up much filesize at all. Negligible enough for you not to really save anything by dividing it up into two smaller PNG-24s, anyway.
However ... 3 options spring to mind (might have a few more later, depending on how much sleep I get).
- If your background colour (the grey that's on the front page) remains unchanged on every sub-page, then you don't actually require transparency on the claw mark graphic, do you? You could simply have a solid image that sits seamlessly on top of the grey background - unless you intend to have a gradient or something in the future (or otherwise want the claw mark to appear on a variety of differing backgrounds).
With this in mind, the option to use JPGs instead of PNGs is opened up. As per your notion of having two smaller images split aside from one another, two JPGs would achieve this goal very well - and could probably come in at around 25-35Kb total, for the both of them.
As for how you might achieve this, one way would be to create two divs that encompass everything else (essentially overlapping) and you could then position a separate background image in each. Something like this (applying CSS positioned background image to bg1 & bg2, you could optionally apply the overall grey to body);
Other people might have better ways of doing this - but this would be one way.<body> <div id="bg1"> <div id="bg2"> <div id="rest_of_the_site"> </div> </div> </div> </body>
- I didn't realise until just now that Photoshop (which I know you aren't using) can't save complex transparency to PNG-8s!! :shock: Fireworks, however, can. You simply [ask someone to] re-save your background image in PNG-8 format using Fireworks in order to get pretty much the same background image that you're currently using down to about a third of the size.
In theory.
I just tried this now, but for some reason I was getting colour banding in there - as if it wasn't recognising that there should be a larger colour palette. I have no idea why (hopefully it's just me not knowing how to use Fireworks, otherwise there might be some kind of limitation than needs to be worked around in some fiddly way). - One final way that springs immediately mind is to - again, using JPG - use the opacity CSS command to make the smaller JPG(s) transparent, getting a similar effect to that of the PNG you're currently using.
There are two sizeable problems that I can think of:- the opacity command may have cross-browser (or at least, old-browser) inconsistencies which may make it more trouble than it's worth. You're probably alright with the latest versions of Firefox, Chrome and Safari, etc - but I'm not sure how it sits with various versions of IE and other browsers, though.
Second, I believe that opacity is inherited by all elements inside the parent - and can't be reversed (i.e. you can't apply negative opacity to the affected items). So, in order for this to work, you would have to create a separate div (or similar) and perform some kind of layering trick to make it appear underneath your main content without technically containing that content, if that makes any sense (like, if you were floating two unrelated items atop of one another using negative margins, or something). Again, a bit of hassle, but theoretically it should work (I'd be more concerned about the cross-browser stuff, really).
I don't have photoshop, I use xara and it allows with png to go (what they call) true color + alpha. This also of course allows transparency. Then, the next step is 256 and that option just looks way too grainy.256 colours should theoretically be more than enough for that particular image - though obviously I can't see what results you're getting ...
The bigger hurdle tends to be finding a package that saves to PNG-8 whilst allowing complex transparency. It seems that they are few and far between ... here's an old-ish, though informative article you might want to look at:
http://blogs.sitepoint.com/png8-the-clear-winner/
mjindustry wrote:Anyway, eventually I will figure out the background. Would be awesome if that were the only worry..lol BTW: Is the 110k extremely large for a background image?110k isn't horrible by any means, no. The fact is, though, that images tend to be responsible for a huge amount of a site's bandwidth usage - considerably more than the rest of the textual HTML and CSS content, and it's for that reason that optimizing your images is one of the most important things you can do in order to improve performance (naturally, this is completely proportionate to how much imagery you actually have).
*ghah!!* Must stop putting off my OWN work ..! :shock: - If your background colour (the grey that's on the front page) remains unchanged on every sub-page, then you don't actually require transparency on the claw mark graphic, do you? You could simply have a solid image that sits seamlessly on top of the grey background - unless you intend to have a gradient or something in the future (or otherwise want the claw mark to appear on a variety of differing backgrounds).
-
-
-
- Lelldorianx
- Rocketeer
- Posts: 71
- Thanks: 0
- Not bad, but the slideshow is going way too fast IMO. It should be 2x longer (6 seconds is good). There are also too many different font types and images in the main banner, but the layout is not bad. Keep it up!
-
-
-
- mjindustry
- Hero Rocketeer
- Posts: 289
- Thanks: 0
-
Lelldorianx wrote:
Not bad, but the slideshow is going way too fast IMO. It should be 2x longer (6 seconds is good). There are also too many different font types and images in the main banner, but the layout is not bad. Keep it up!
Lelldorianx-
Thanks so much for the tips and compliments here and at Joomla! :cheesy:
I totally understand what you're saying on the speed issue now, I have pretty much slowed anything that moves on my site to around 10 seconds or more even. Great advice thank you, it all looks so much better. My typical way is rush-fast-now-big. Type A personality problem, it's been a struggle of mine my whole life.
Hobbes-
You have pretty much single handedly turned me into a optimization freek. lol I'm going to optimize this site, so it all loads fast. The way I see it is this, I'm on a 1meg clearwire type connection and wirelessly connected to that even. If it runs good here, damn-it, it should run good just about anywhere.
Anyway, yea, I can't say enough how much I appreciate the help. It's been an eye opener for me. Another problem I have had for YEARS. Uploading big file sized photo's...not anymore. Wanna know something else I'm finding (could just be part of the new obsession) is they look better at lower quality a lot of times. More so of the png graphic stuff...if you take some colors away (which I just learned how to do now in Xara) they actually look better on the site. To me I'm seeing a fused look, like it belongs there more. So yea, I'm having fun with this and will always be able to refer back to this thread if I need additional help in optimizing, but I think I'm getting the hang of it. I will have to go backwards and optimize a bunch of stuff that's already live. I'm finding quite a few image files over 100k+ ( what the hell was I thinking?), then tons of photo album pics in the 60-70k range...will have to fix those as well.
Site Updates since original post:
Rokstorie-s on front page is now Rokslideshow (love it, way better for what I'm doing there)
Social Stuff- Check out this social stuff I'm implementing. I have forms that will produce discount codes for the ecwid shop. It requires that you perform a small task like a "like" on facebook. "follow" on twitter etc to be completely valid. That was a fun implementation.
SidePanel I was having a heck of a time trying to get a side menu going, no matter how i did it it would crash my front end. I ended up implementing a yoodrawer with ecwid shop category thumbs! Some yootools are pretty sweet inside Rocket Templates.
Rokbridge is implemented. Theming is still required. I can't even figure out how to center my logo there . I tried firebug but just couldn't figure out the right code to get er done. Linky...
3dsignshop.com/forum/
- Commerce Site with Metropolis magento 1.7- Wood Signs
-
Time to create page: 0.101 seconds