j_in_calgary — 2012-07-10T12:33:22-04:00 — #1
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!
kohoutek — 2012-07-10T16:16:00-04:00 — #2
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.
j_in_calgary — 2012-07-10T19:32:18-04:00 — #3
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.
scott_botkins1 — 2012-07-10T20:55:29-04:00 — #4
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.
brianbam — 2012-07-11T03:10:36-04:00 — #5
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.
lorenw — 2012-07-11T11:30:42-04:00 — #6
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.
j_in_calgary — 2012-07-11T11:33:38-04:00 — #7
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.
mrdude — 2012-07-12T17:42:17-04:00 — #8
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.
system — 2012-07-13T17:11:27-04:00 — #9
My advice, your site needs more content.
j_in_calgary — 2012-07-13T17:21:00-04:00 — #10
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!
akurtula — 2012-07-13T18:10:05-04:00 — #11
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:
from you #content its background color - I think then content seems less crammed
--- but this might be just a personal preference
j_in_calgary — 2012-07-13T18:27:22-04:00 — #12
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.
akurtula — 2012-07-13T18:37:09-04:00 — #13
I took a screenshot of your website after I edited it on my browser so this is what I mean:
ps - let me know when you finish with the above like so that I can remove the image from my server
Hope it helps
j_in_calgary — 2012-07-13T18:43:32-04:00 — #14
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.
j_in_calgary — 2012-09-25T16:22:21-04:00 — #15
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!
kohoutek — 2012-09-25T20:19:06-04:00 — #16
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:
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.
j_in_calgary — 2012-09-25T20:47:46-04:00 — #17
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!)
marksmit — 2012-09-26T01:36:37-04:00 — #18
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.
georgl — 2012-09-26T17:40:48-04:00 — #19
- : 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.
j_in_calgary — 2012-09-26T18:20:47-04:00 — #20
@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!
next page →