Another site themed with Zen

Events happening in the community are now at Drupal community events on www.drupal.org.
byronveale's picture

Hi there, just wanted to add my site to the list of sites built with a Zen subtheme:

New Jersey Library Champions

Zen rocks, one of the things that makes Drupal outstanding...

Comments

The design is very wide, and

Garrett Albright's picture

The design is very wide, and won't fit on smaller displays (such as on netbooks) without causing horizontal scrolling. Also, the HUUUUGE images in the slideshow really slow down any browser I try to view this in. I would recommend tweaking the design to aim for a lower common denominator.

Nice!

sunshinee's picture

I love the slideshow and the overall look of the site. It required some horizontal scrolling and time to load images on my laptop, but was lovely on my desktop. Not the end of the world, just a bit annoying for anyone using a smallish display or slowish machine. =)

Thanks for taking the time...

byronveale's picture

...to check out the site. Yes, it's big, it's optimized for 1280x1024 screen resolution, or a typical 17" monitor or 15" laptop (fairly common these days). My "client" (my boss) had a site in mind she wanted to "emulate", they had a big slideshow for their homepage, that's how this came to be. It's the gallaria module, with a lot of custom css.

I try to compress the heck out of the images to make them load okay -- hmm, that makes me think, they're jpegs, maybe I'll try .png files, see if they compress better...

If anyone has an iPad & can check the site out, please let me know -- does it scale larger pages down to fit the screen automatically, like the iPhone?

Thanks again,

-Byron

Yes, it's big, it's optimized

Garrett Albright's picture

Yes, it's big, it's optimized for 1280x1024 screen resolution, or a typical 17" monitor or 15" laptop (fairly common these days).

Fairly common, but it can't be expected, especially given the rise of netbooks and smart phones. Standard practice these days is to optimize for at most a 1024x768 display.

hmm, that makes me think, they're jpegs, maybe I'll try .png files, see if they compress better...

The images in question are photographic, so they should be compressed with JPEG. Frankly, that's web design 101… The issue is not just any single image's compression (though those images could perhaps be compressed a bit better) but also that there are so many of them, and they all try to load at once when the page loads. Do you really expect someone to sit through and watch all those slides cycle through before they click through and go to something else? Aside from shrinking the physical size of the images and compressing them better, also consider just using fewer of them - maybe five at most.

If anyone has an iPad & can check the site out, please let me know -- does it scale larger pages down to fit the screen automatically, like the iPhone?

I haven't used one either, but it's my understanding that iPad's Safari does scale and zoom like the iPhone's. However, guess what the iPad's native resolution is? 1024x768. If your design is optimized for that resolution, it doesn't even need to scale the page, assuming the user uses it in horizontal mode.

Easy, man...

byronveale's picture

...I tried to explain, this size is what my client wanted.

P.S. <flamebate>netbooks are a passing fad.</flamebait>

And if you optimize solely for a 1024x768 display, your site looks "less-than-optimal" on all the 19-24" monitors out there (not to mention the really big ones). Our next site compensates - stretches from 960px width to 1280px, using a percentage of the browser window. <juvenile>So there...</juvenile>

And if you <more-flamebait>bothered to pay attention</more-flamebait>, you'd notice that you don't have to wait for all the images to load -- just the first one. Watch how the thumbnails appear one at a time on a slower connection -- the galleria module was written with this in mind.

Sorry, I didn't take web design 101 -- I'm a self-taught. Sue me.

And if the iPhones and iPads scale automatically, and my site looks better on bigger screens (read that "to the vast majority of my site visitors" according to my stats), then gee, I come out ahead, right?

Sorry everyone else if I'm a bit grouchy, but what the hey? I appreciate constructive comments. Please leave condescending attitude at the door...

...I tried to explain, this

Garrett Albright's picture

...I tried to explain, this size is what my client wanted.

Did you try to talk them out of it? If a client ever wants me to do something dumb, I will at least put up a fight - and most of the time the client will accept the idea that I know what I'm doing more than they do.

P.S. netbooks are a passing fad.

Perhaps, but they're a present reality. And smart phones aren't going anywhere (though they are, in fact, going everywhere… lol English).

And if you optimize solely for a 1024x768 display, your site looks "less-than-optimal" on all the 19-24" monitors out there (not to mention the really big ones).

Well, I guess that depends on how you define "optimal." A site doesn't need to take up a given percentage of a monitor to be effective, and in fact if you make a design too wide, the lines of text can be too long to read comfortably. (Liquid layout designs like the one g.d.o uses suffer from that, though it's fairly tolerant to simply resizing the window to make it narrower, so far as you ignore the search box in the sidebar breaking out of its container. EDIT: Never mind, it looks like they've fixed that to a certain extent. That search field still looks pretty ugly and Windows-like, though.)

It's trite, but remember the old adage, "what would Apple do?" Their site design is 982px wide - non-standard, but still capable of comfortably fitting on a 10x7 display.

Frankly, though it's good to experiment, by ignoring the 960/1024 rule, you're going against commonly accepted web design standards - standards decided upon for a reason.

And if you bothered to pay attention, you'd notice that you don't have to wait for all the images to load -- just the first one.

Your design is such that the browser to request about a dozen and a half large (both in terms of file and physical size) images just as part of rendering the page - try disabling JavaScript and seeing how things look. At least on my system, I can't do a fresh load of your page without my computer freezing up while the OS juggles things around to allocate memory to store the uncompressed images in. If you really must have this many images in the slideshow, a better way to do it would be to just have the first image load using an <img> tag, then use JavaScript to dynamically add the next image to the DOM as that and subsequent images display. That way, those images can be added to the page gradually.

As it stands, the total weight of your front page is about 1.7MB. This is at least ten times more than it realistically should be. At least.

Sorry, I didn't take web design 101 -- I'm a self-taught. Sue me.

That's fine; so am I, for the most part. But you aren't going to learn everything on your own. There's a lot to learn from taking classes, reading books, and, frankly, paying attention to advice from those more experienced.

I appreciate constructive comments. Please leave condescending attitude at the door...

I'm trying to be constructive here. I'm not tearing you apart; I'm tearing apart your design. Please don't take it personally, but if you're proud of this design, then you need more experience, especially if you are/want to be doing paid work.

Heh-heh -- no, .png files aren't any better...

byronveale's picture

...by a long shot. I did recompress the worst offenders with a more aggressive .jpeg setting -- Garret, rjoy, if you have the time and inclination, please visit the site again, see if you notice any difference.

Site width / speed

jcchapster's picture

Not a fan.

Ridiculous amount of images on front page.
Annoying that I had to scroll over.
Yes, I use a laptop, max width 1024x768. I surf a lot. And there isn't any reason I should have to scroll to see your page.

Beautiful

jep4's picture

sure, smaller pix would be a little more user friendly; regardless of that - and the bickering - it's a good site, a good design and a great campaign.