SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Education Site - Revised Home Page

    Hi,

    Thanks for the thoughtful reviews I received on the previous version of my site.

    I've updated the home page, so instead of taking visitors directly to most enrichment activities like book quizzes or math problems, visitors can choose to click on a Teacher or a Student button, and those pages will lead them to the most relevant activities for each audience. My hope is that this will decrease my home page bounce rate and encourage users to explore what's offered.

    I also added some pictures of students to humanize the home page, in place of my previous PowerPoint clip-art.

    I welcome any comments or suggestions about the new look of the home page. The enrichment pages for teachers and students are also new, so comments about making those as user-friendly as possible are also welcome. The site has 600 pages, and I want to focus on building content, but I want to feel like I'm moving in the right direction with the layout and navigation before it gets too much bigger.

    Some of you offered very helpful suggestions that I haven't been able to address yet, including the creation of the footer or the fact that my site builder automatically adds the site title to my meta tags for page titles, among other things. Still working on them!

    Thanks in advance for your help!

    http://www.conversationpieceslearning.org/index.html

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You're absolutely moving in the right direction. This version is a significant improvement to the previous iteration.

    I find the content to be well organized, the visual design is harmonious, the language is refreshingly clean and concise, and, most importantly, I'm tempted to stay on the site and delve in deeper.

    The only thing I'd try is to trim your markup. It's quite heavy and probably has an effect on the site's performance in terms of speed, at least on my end it could definitely be faster. It's not slow, mind you, but for this type of site, there's little reason to have such massive code.

    That's all I can see as a minus point, though.

    Overall, this is an excellent site.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much! Your reply is very encouraging.

    I have a lot of work to do in terms of internal consistency, in addition to learning some tricks to try to work within the site template I've chosen, but it feels good to be on the right track.

  4. #4
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried playing with the font colors? Instead of having all of the font be blue perhaps just have the links be blue so they stand out. If everything is blue (in my opinion) nobody knows what is clickable or not, especially when you have text-decoration set to none.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really like the header and the color selections. I think that you may be trying to use too many colors. You may try making that tan middle section white and the aqua line below it the same blue as one of the blues in your header. Also, I'd put borders around the images. I think images should almost always have a nice THIN border. Maybe underline the links at the bottom of the page. Your site does look well structured, but I do think that you can tone it down on the colors some.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your comments.

    I had tried making the links green (on the darker side of lime), with visited links magenta (currently they are brighter blue with visited links magenta; regular text is darker royal blue). I changed them to blue just so they would be more conventional and in line with user expectations. I didn't consider there wouldn't be enough contrast between links and text, so maybe I should try to switch that back. I tried orange, too (opposite blue on the color wheel), but again, I thought visited links should be more in the red/purple family, so I didn't want to be confusing.

    Brian, you're talking about the border around the main text area, right? The tan between the two blues? That is one of the banes of my template existence. (Can a person have multiple banes? Anyway.) So this template I've chosen has that background as a picture--so I can't edit the color. If I remove the tan background picture, the dark blue from the bottom goes all the way up to meet the bright blue header. It looks kind of cool, but I did a user test with Five Second Test and users there preferred the one with the divided border. I know a bit of html and less css, so I don't know how to create my own background picture and size it properly, although my site editor does allow me to upload files, so I could put something there once I figure that out.

    On the other hand, if you mean the color that's the background for the main text area, I could make that white.
    I'm not sure what aqua line you mean, though.

    I'll re-consider the picture borders--good to have other opinions on stuff like that.

    Thanks very much for taking time to look and offer comments--I appreciate your feedback.

  7. #7
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,103
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I agree with Scott, the blue font color and links threw me off, I would suggest a dark gray for text and leave the links blue.
    What I lack in acuracy I make up for in misteaks

  8. #8
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's like there's a mismatch between your top (pretty & shiny) top banner (good job!) and the rest of the page, which is rather plain and uninteresting to look at.
    Too much text of the same color on flat surface of the same color.

    Also, I agree with the others: that blue color you found for the text is not good.
    Actually, no large portions of text should be blue at all. Black or dark grey.

  9. #9
    Non-Member
    Join Date
    Jul 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My advice, your site needs more content.

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leandros21 View Post
    My advice, your site needs more content.
    :-) I assume you are teasing a little, since the site has over 600 pages, and some are pretty extensive. If not, could you explain more about what you're looking for?


    I changed the main text color and removed the tan/gray background color, which gives me a lot of blue background. I'm getting used to it--not sure if it's "there" yet, but still trying things. Thanks for the comments so far!

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    I would recommend you make the headings of each page much bigger, and keep them to the left (not centered) and deppending how big, add enough padding to make them stand out

    in your banner, you have very nice shades of blues, maybe use them in your content ??

    And maybe, just because your "I am a student ..." box, is green, try to use a bit more green.

    because you have a lot of content, maybe a big footer, might help, not 100% sure how, but I think it would

    And also maybe make use of some form of tabs and drop-down content, to brake the content so that it is easier to consume

    also, this might be just me, but if you try to remove the body background color, and this image:
    http://www.conversationpieceslearnin...-bg.png?603134
    from you #content its background color - I think then content seems less crammed
    --- but this might be just a personal preference

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your ideas, akurtula. I have been trying to figure out how to develop a footer that I can drag and drop with links inside it (I would have several different versions for different content sections), but I don't know how to do it yet. It's supposedly possible with my site editor, but I haven't been able to manage it yet. I think it will make a big difference when I can make that work.

    I hadn't thought about left-aligning the headers or enlarging them--I'll try that and see how it feels. I think more green is in order somehow, somewhere . . . I'm just not sure how to use it yet without going crazy.

    With the background image, do you mean just letting the main content area be a white background, instead of the off-white-ish color it is now?

    Thanks--I appreciate the time you took to look and offer feedback.

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by J in Calgary View Post
    With the background image, do you mean just letting the main content area be a white background, instead of the off-white-ish color it is now?
    I took a screenshot of your website after I edited it on my browser so this is what I mean:
    - http://aurelslab.co.uk/deletethis.png

    ps - let me know when you finish with the above like so that I can remove the image from my server

    Hope it helps

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks! All done--I kept a picture of the screenshot you took so I could try it and play with it. I see what you mean now.

  15. #15
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have a question--not sure if anyone can help me.

    The good news--I found footer code that I can insert into my web design template. This footer will allow me to drag and drop elements (search box, text links, social media icons, copyright info, etc.) in the same way I can manipulate page elements with my design builder. Better yet, if I change the footer in one place, the changes automatically happen across the site--no more manually changing 600+ pages.

    When I inserted the css and html bits, they behaved the way I want them to, but they don't look the way I want them to. Apologies to all the real designers out there--I am really doing a hack job with my css, but I have tried changing everything I can imagine--changed the padding around the footer, changed the width of the footer--and the footer continues to be wider than my main content area, no matter what I do.

    Essentially, I have a main box for the content area with blank sidebars on either side. I am trying to add a footer that will either A) line up with the borders of the main content box (I sized it to the same # of pix as the wrapper, but it didn't work--still showed too wide, or if I decrease the pix a lot, it moves over to the left) or B) have the footer box go infinitely to the left and right.

    Can anyone point me in the right direction about what I could adjust? It's center-aligned, if that makes a difference. There are styles in my code for a footer and a custom footer (mine is a "flexible footer"), and I tried just deleting both of the other styles, and getting rid of those didn't help, either.

    I haven't published the footer version with my editor yet, because it looks too goofy, but it would be a huge step forward to make this work. Thanks in advance for any guidance you can offer!
    www.conversationpieceslearning.org
    Enrichment Ideas and Activities for Teachers and Students
    www.youcancreate.org
    Daily Creative Challenges for People Like You

  16. #16
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    This question should probably be posted in the CSS section of the forums.

    Anyway, the "symptoms" you mention are usually the result of wrongly calculated widths.

    What is the total width of the content containers (above the footer?). The total width comprises borders, margins, padding, and width.

    Example of a 940 total width element could look like this:
    Code CSS:
    width: 880px;
    padding: 20px;
    margin: 8px;
    border: 2px solid black;

    This computes to a total of 940px = 880px (width) + 20px + 20px (padding) + 8px + 8px (margin) + 2px +2px (borders).

    So, see what values you've got for your footer and see if the total width is not greater than that of your other containers.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  17. #17
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks, kohoutek--this is a great place to start. I didn't want to mess with my other code too much, so I appreciate the direction. (Sorry for the off-topic post location, but I am really attending to previous advice about implementing a footer . . . I've almost got it!)

  18. #18
    SitePoint Enthusiast marksmit's Avatar
    Join Date
    Sep 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your about page form alignment is not proper. Please take care of this. Bottom part of your home page is seems blank. If you could add some bottons then it will be more attractive.

  19. #19
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Sweden
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    + : Page header is nice
    - : Just change the color of the Green button("i'm a student") on the page. it's unreadable by this contrast. also footer links are not good enough.

  20. #20
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @GeorgL--I am trying to add a universal footer (see my previous post about 5 back), and I am actually thinking of doing it in that green color, but I'm having some coding issues. I thought I had tested that for contrast, but I'll check it again.

    @marksmit--sorry, not sure what you mean about alignment on the about page--what would you recommend? (and with regard to the bottom of the page--again, the footer is in progress, but a bit stalled).

    Thanks for having a look!

  21. #21
    SitePoint Enthusiast marksmit's Avatar
    Join Date
    Sep 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thing is that I'm using lower version of Mozilla web browser. So, its showing something odd but fine in higher versions. My apologize.

  22. #22
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, my first viewing and I've haven't read any other posts about what you've already done.
    Home page only - My first impressions are;
    The blue background is too strong for me, it's competing for attention (top blue is fine), i think the blue link colour is also too strong. The search box & FB like are jammed in and look messy. Photos are good, but are all different sizes. Two colour boxes "I'm a teacher etc"; colours too strong and not complimentary, and again different sizes.

    In the white section: you have a heading going right across, then 2 box signs, then text going right across, then 3 pics of diff sizes, then 2 rows of links, & then search, FB etx jammed in... there's no real design/flow which makes it all jumbled and somewhat confusing... that stops the mind; instead you want it flow seamlessly.

    I also visited the first 2 pages on the menu; again it's jumbled and no real sense of order.

    I'd redesign it from the menu down (on paper first)... I appreciate it can be tough to hear these sorts of comments; but they've given with the best of intentions. Best of luck.

  23. #23
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    I think your site is well organised and does the job well for an educational site. I think most of the important thing have been already said so I won't repeat them.

    If I can mention few small things I noticed...

    1. Facebook button - It looks kind of lost outside the layout. Maybe you can shorten the main title of the site and place a larger FB button directly next to the title. If you are creating the footer, it will be a good idea to place one there as well. In either case you should think about giving enough room for more buttons. You may want to include more buttons (or links) for other social site such as Twitter, YouTube etc.

    2. Navigation drop down - Dropdowns look slightly too far down from the top-level navigation elements due to the white spaces above and below. Maybe you can do something like adding a border around the parent element to visually bind them together?

  24. #24
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I published the version with the universal footer, but the links aren't visible. Kind of frustrated, and looking at three options:

    1) Figure out how to change the link color so it's different in the footer than in the main content area (posted for help about this in css forum--I found the code, but can't figure out where to put it. I can't find the hex code colors in the css or html edit views of my site--had to go to the published version page source to find the hex code colors at all. To choose colors for active/visited/hover in my site builder, I can click boxes or enter custom hex codes in the design menu, but I don't actually enter the colors in the page code. Wysiwyg . . . the beauty and the pain.)

    2) Manually add all the things I want in the footer to the bottom of each page, including the copyright notice, search box, site map, and text links. That's what I have now, although if I get the footer working I'll have to go back in and remove all those elements from all those pages. It'll be worth it for a cleaner look, though.

    3) Make the footer area light and keep the same text color links through the whole site.

    I'm trying to make #1 happen . . . will keep experimenting and researching. Thanks for the comments--I'd like to solve this big issue before I focus on others, because I think this one addresses several other design quirks.

  25. #25
    SitePoint Zealot
    Join Date
    Feb 2012
    Posts
    109
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hooray! I did it! I got #1 to work!

    Now I have to fix all the other things on the site, including manually removing all the items that are now in the footer from the bottom area of the pages. I don't even mind--it works! Thanks for letting me have this moment of huzzah :-)


Bookmarks

Posting Permissions

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