Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts

    Newsletter, Your thoughts?

    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

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    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.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • Users who have thanked BWiz for this post:

    trigger_tre (11-10-2007)

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by BWiz View Post
    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

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    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.

  • Users who have thanked srule_ for this post:

    trigger_tre (11-10-2007)

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Very clean, nice design. I love how easily you change the colors.

  • Users who have thanked binaryWeapon for this post:

    trigger_tre (11-10-2007)

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • Users who have thanked vtjustinb for this post:

    trigger_tre (11-10-2007)

  • #7
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Thanks for the criticism, though I think I should explain a few things.

    Quote Originally Posted by vtjustinb View Post
    - 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.

    Quote Originally Posted by vtjustinb View Post
    - 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.

    Quote Originally Posted by vtjustinb View Post
    - 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

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by trigger_tre View Post
    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.

    Quote Originally Posted by trigger_tre View Post
    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.

    Quote Originally Posted by trigger_tre View Post
    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.

  • #9
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by vtjustinb View Post
    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

  • #10
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Mark Wiseman
    allthewikis.com
    Enjoy your life and each moment in it,
    Know the purpose of every minute.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •