Newsletter, Your thoughts?

[trigger_tre]

I created a newsletter for my pastor. Its simple I know but I think in this case less is more.

I tried to make it light on images but still have some appeal to it. I also set it up so that all the colored areas can easily be changed to different colors by changing three css values from 01(red) to 02(blue), 03(green), or 04(gray). This way he can change the look of it without causing too much strain.

http://harvestwhitecounty.com/newsletter/v01_11.php

Just curious of what you think.

-trigger

[BWiz]

In a crux: I dislike it. If its a newsletter, I think you should make it more eye appealing keep it simple, use a very small range of colors, and make sure that they contrast.

Your letter is really cramped, a massive body of text. Most people, especially on the web, dislike reading a massive block of text. Increase your line-height to make it user-friendly, though keep the font-size the same.

Keep the design simple as well. Get rid of the gradients. Just add simple horizontal and vertical lines for separation.

[trigger_tre]

Originally Posted by BWiz

In a crux: I dislike it. If its a newsletter, I think you should make it more eye appealing keep it simple, use a very small range of colors, and make sure that they contrast.

Your letter is really cramped, a massive body of text. Most people, especially on the web, dislike reading a massive block of text. Increase your line-height to make it user-friendly, though keep the font-size the same.

Keep the design simple as well. Get rid of the gradients. Just add simple horizontal and vertical lines for separation.

First thanks for the comment. I am a little confused though about it being cramped. I am guessing you meant only the line-height (space between lines) and not cramped as far as the width of the page. I did a little research before starting this project and my understanding was that the max width for an email newsletter should be between 550-600 pixels wide, mine is 590.

The plain blocks of text will eventually be "peppered" with images roughly 100x100 pixels in size. This should break up the text some.

As far as the appeal of it? My goal was to create something that would be easy for someone who has very little HTML coding experience the opportunity to adjust the page with many different color schemes with little effort. All this while still giving the newsletter a slight 3-D look.

After I post this I will show how he could completely change the color scheme of the newsletter by changing just a few lines of code.

When you saw it, it looked like this:




About 10 key strokes later it looks like this.

http://harvestwhitecounty.com/newsletter/v01_11.php

I know its not a drastic change but I am trying to use KISS on this one since I won't be the one maintaining it.

Again thanks for your comment.

-trigger

[srule_]

I like the blue colors much better.

I also like the organization. It is very easy to navigate through and get to exactly what you want.

I must say that i do agree in terms of it being cramped. Try adding some padding to the main text area and between stories. It would also be nice if some of the storyies had a small image that related to the story floating to the left or right.

[binaryWeapon]

Very clean, nice design. I love how easily you change the colors.

[vtjustinb]

A few picky things (since that's my thing :P)

- The drop shadows make the depth a little confusing. Since they're cast into the content areas is that supposed to imply the background as being higher than the content? The content higher than the sidebar but at the same level as the sidebar at the same time? It's just a little visually confusing, and if you only did it to make it look a little snazzier I'd encourage you to revisit your choices to actually create a more cohesive sense of depth in your design.

- I agree that it's a little cramped. In both font size, horizontal padding on the content, and line height. Frankly when I see that page I don't want to read it--and I think that's something important when you're designing a newsletter. I can only assume you're optimizing it for a very low resolution (640x480), but for me at 1920x1200 I definitely don't want to spend much time on the page.

- Using transparent gradients to change the color scheme with background changes is nice, but IE6 doesn't support transparent pngs and you should probably check it out in IE6 to make sure you're okay with that rendering.

Otherwise nice design. I do think since this is a newsletter the primary focus of your design should be to make it comfortable to read, and establish a vertical rhythm without the claustrophobic effects.

[trigger_tre]

Thanks for the criticism, though I think I should explain a few things.

Originally Posted by vtjustinb

- The drop shadows make the depth a little confusing. Since they're cast into the content areas is that supposed to imply the background as being higher than the content? The content higher than the sidebar but at the same level as the sidebar at the same time? It's just a little visually confusing, and if you only did it to make it look a little snazzier I'd encourage you to revisit your choices to actually create a more cohesive sense of depth in your design.

These are not drop shadows. These are inner shadows. Inner shadows are used to create a bevel appearance. I don't use the bevel tool because its rigid and often unrealistic looking, so I used the smoother looking inner shadow to achieve the same subtle effect. Basically the left column is raised higher than the right content area and and the entire newsletter itself is higher than the actual background color. I went ahead and faded in the inner shadow that separates the left and right columns. This way its similar to how it fades out in the footer.

Originally Posted by vtjustinb

- I agree that it's a little cramped. In both font size, horizontal padding on the content, and line height. Frankly when I see that page I don't want to read it--and I think that's something important when you're designing a newsletter. I can only assume you're optimizing it for a very low resolution (640x480), but for me at 1920x1200 I definitely don't want to spend much time on the page.

I altered the line-height and added some dummy pictures to show how images might appear on the page. Also, these are newsletters that will be viewed via EMAIL not on the actual website page. So even though you have a 1920x1200 resolution you won't be viewing it at that size in your email. Most emails like yahoo, etc. have side bar info and advertisements taking up several hundred pixels.

Originally Posted by vtjustinb

- Using transparent gradients to change the color scheme with background changes is nice, but IE6 doesn't support transparent pngs and you should probably check it out in IE6 to make sure you're okay with that rendering.

These are not transparent gradients. They are regular 24png files used to display the gradients without lines. So no IE6 hack is needed. This is the main reason why the newsletter wrapper doesn't have a drop shadow. This way the background color could be changed without having to use transparent png to accommodate the separate color schemes.

Again thanks for the criticism.

-trigger

[vtjustinb]

Originally Posted by trigger_tre

These are not drop shadows. These are inner shadows. Inner shadows are used to create a bevel appearance. I don't use the bevel tool because its rigid and often unrealistic looking, so I used the smoother looking inner shadow to achieve the same subtle effect. Basically the left column is raised higher than the right content area and and the entire newsletter itself is higher than the actual background color. I went ahead and faded in the inner shadow that separates the left and right columns. This way its similar to how it fades out in the footer.

I'm aware of the difference :P Inner shadows are typically used to recess an object in depth though.

If you were going for a bevelled appearance, it doesn't come across without more variations in chisel. It just looks like a shadow cast by the background, and a shadow cast by the main content area. The latter there has a problem because of the right shadow in the main content area, which is a conflicting edge that would imply the right edge as being below the background.

Originally Posted by trigger_tre

I altered the line-height and added some dummy pictures to show how images might appear on the page. Also, these are newsletters that will be viewed via EMAIL not on the actual website page. So even though you have a 1920x1200 resolution you won't be viewing it at that size in your email. Most emails like yahoo, etc. have side bar info and advertisements taking up several hundred pixels.

Well it's the pixels-per-inch that concerns me, not the width. It'd still be very small to comfortably read, even in an email.

Originally Posted by trigger_tre

These are not transparent gradients. They are regular 24png files used to display the gradients without lines. So no IE6 hack is needed. This is the main reason why the newsletter wrapper doesn't have a drop shadow. This way the background color could be changed without having to use transparent png to accommodate the separate color schemes.

Yeah that's my mistake, when someone was praising you for being able to change the color scheme easily I assumed it was strictly through CSS--not having to go back to Photoshop and make new graphics.

[trigger_tre]

Originally Posted by vtjustinb

If you were going for a bevelled appearance, it doesn't come across without more variations in chisel. It just looks like a shadow cast by the background, and a shadow cast by the main content area. The latter there has a problem because of the right shadow in the main content area, which is a conflicting edge that would imply the right edge as being below the background.

Okay that makes more sense as I look at it a little closer. When I originally create the design I was using a white #FFF background so the actual inner shadow was more noticeable and the newsletter appeared raised. Any color change to the background, even if its a very slight one is going to be darker than #FFF so it does seems to wash out the inner shadow.

I changed the background back to white #FFF so that it appears more raised. I think it helped some, the only other options are...

1.) make the inner shadow darker.

2.) put a drop shadow back around the outer edge of the newsletter. I originally had it this way to help with the raised look. But I couldn't neatly alter the background color without using transparent pngs which I didn't want to do. So I chopped off the 5 pixel drop shadow. This is why the newsletter is 590 pixels now instead of the original 600 pixels.

Yeah that's my mistake, when someone was praising you for being able to change the color scheme easily I assumed it was strictly through CSS--not having to go back to Photoshop and make new graphics.

Yeah, lol not easy for me because I do all the work. It was really meant to be easy for my pastor who has very limited knowledge of css and xhtml. I do the setup work and help fills in the blanks.

Well it's the pixels-per-inch that concerns me, not the width. It'd still be very small to comfortably read, even in an email.

I increased the font size of the main content area. Though the left is still small. It does seem easier to read now.

Thanks guys for the insight.

-trigger

[MarkWiseman]

Hi
Just a word of caution about displaying email addresses so openly on the page. You are going to expose people to a lot of spam.
Mark