BHG: Home (Index) Page Updates

[khaled]

Updates and Fixes for the Home Page

index/index

[lila]

QA--Lila. Dec 17, 2009

http://devbaby.healthgurumedia.com/

1. Left Justify all text except for the title "Baby Health Surveys" & "view all surveys"
2. Title text (BH Surveys), question of both surveys, and also 'voice your op,' 'most pop,' 'Survey Says!' should be hex:#444444
3. The lighter gray color is hex#:828282
4. Remove the Survey Says white box so that all three survey sections are sitting on the light gray background
5. light gray bg color is hex:#f9f9f9 (I do not believe we have used this hex# before..it is lighter than e7e7e7 and d9d9d9--this was a choice because we wanted the surveys to be diferentiated from the content around it, but not to draw the viewer's eye directly to the surveys).
5. Match "Baby Health Surveys" title text size with "Baby Health Videos" above it

[maryann]

Looks like the mock-up now

[khaled]

Khaled, Ubuntu 9.04, Dec 18, 2009

General appearance seems right to me. Passes dev testing.

Passing to QA.

[lila]

QA--Dec 21, 2009

1. the survey pie chart is on a white bg--possible to remove this?
2. 'view all surveys' in the BHG survey section should be hex:#828282. it is black rt now.

[khaled]

1. Changed background color so it's now F9F9F9.
2. Changed link to include class 'light-gray-font' which is a #828282 color.

[deepu]

1. Changed background color so it's now F9F9F9.---works fine in FF,chrome,IE
2. Changed link to include class 'light-gray-font' which is a #828282 color.--works fine in FF, chrome, IE

[khaled]

Passed Dev Testing. Sending to QA.

[brent]

QA from Brent 122109
Ubuntu - Firefox 3.1

Homepage:

- Please reduce the size of the “getting started” headline to save room and push everything up neatly against the features box…

- the text in the headlines of the getting started section is still wrapping strangely.

- in the featured videos section the most popular headlines is breaking to display

- logo needs to be changed to newer version (has baby on top and Health Guru on the bottom) the new logo is also 90px high and should align with the 728 x 90 banner.

- when you rollover the logo in the upper left it should show the option of going to the [channel] homepage or the Health Guru Homepage.

- in the list of most popular surveys the responses is written as "(463822 of responses)" we should remove the word 'of' and add commas for the thousands so it reads as "(111,463,822 responses)"

- The 'voice your opinion' section has a button for 'Take the complete Survey' and the 'Survey Says' section has a text link. We should use the botton for both sections and have the link below the buttons as it appears in the voice your opnion section 'From [Survey Title]'.

[khaled]

BHG New Logo 90x90

[khaled]

CHG (College) Logo 90x90

[khaled]

HG (Health Main) Logo 90x90

[khaled]

NHG (News) Logo 90x90

[khaled]

PHG (Pregnancy) Logo 90x90

[khaled]

SHG (Sex) Logo 90x90

[khaled]

Home Page Prototype Mock Up. What the homepage should look like.

[deepu]

Homepage:

- Please reduce the size of the “getting started” headline to save room and push everything up neatly against the features box…----Reduced the size of getting started to 14px from 18px and also changed the background to gray--changes made in gettingstarted.phtml

- logo needs to be changed to newer version (has baby on top and Health Guru on the bottom) the new logo is also 90px high and should align with the 728 x 90 banner.--logo changed to the new version and here just replaced the image in Media folder baby-logo.png

- in the list of most popular surveys the responses is written as "(463822 of responses)" we should remove the word 'of' and add commas for the thousands so it reads as "(111,463,822 responses)"---now responses are in number format and no of word--change made in index.phtml just added number_format for the output and removed the of word

- The 'voice your opinion' section has a button for 'Take the complete Survey' and the 'Survey Says' section has a text link. We should use the botton for both sections and have the link below the buttons as it appears in the voice your opnion section 'From [Survey Title]'. ---Now added the button of Take the complete Survey and link of From[]--just added few lines of code in surveyresponsechart.phtml

[deepu]

-the text in the headlines of the getting started section is still wrapping strangely.--now fixed just by decreasing the array limit.

- in the featured videos section the most popular headlines is breaking to display --now fixed just by decreasing the array limit in categorybox.phtml

[lei]

- when you rollover the logo in the upper left it should show the option of going to the [channel] homepage or the Health Guru Homepage.

--almost done, needs some CSS adjustments.

[maryann]

Everything's done except #4, if design thinks it looks OK then this ticket is ready for QA

Homepage:

1. Please reduce the size of the “getting started” headline to save room and push everything up neatly against the features box…<---deepu: Reduced the size of getting started to 14px from 18px and also changed the background to gray--changes made in gettingstarted.phtml; maryann: I changed the background back to look like the mockup

2. the text in the headlines of the getting started section is still wrapping strangely.<---deepu: now fixed just by decreasing the array limit.

3. in the featured videos section the most popular headlines is breaking to display <---now fixed just by decreasing the array limit in categorybox.phtml

4. logo needs to be changed to newer version (has baby on top and Health Guru on the bottom) the new logo is also 90px high and should align with the 728 x 90 banner.<--- is changed and aligned, looks a little funny. design: can you check this??

5. when you rollover the logo in the upper left it should show the option of going to the [channel] homepage or the Health Guru Homepage.<--- done, in LeftColTool?

6. in the list of most popular surveys the responses is written as "(463822 of responses)" we should remove the word 'of' and add commas for the thousands so it reads as "(111,463,822 responses)"<---now responses are in number format and no of word--change made in index.phtml just added number_format for the output and removed the of word

7. The 'voice your opinion' section has a button for 'Take the complete Survey' and the 'Survey Says' section has a text link. We should use the botton for both sections and have the link below the buttons as it appears in the voice your opnion section 'From [Survey Title]'.<---Now added the button of Take the complete Survey and link of From[]--just added few lines of code in surveyresponsechart.phtml

[brent]

Homepage:

1. Please reduce the size of the “getting started” headline to save room and push everything up neatly against the features box…<---deepu: Reduced the size of getting started to 14px from 18px and also changed the background to gray--changes made in gettingstarted.phtml; maryann: I changed the background back to look like the mockup

[Brent] this should have the light grey background that encompasses the 'getting started' heading and be lined up with the leaderboard ad to the right. This box should be made to grow to fit content. When a headline wraps it should have the text be left justified and the 2nd line should be indented.

2. the text in the headlines of the getting started section is still wrapping strangely.<---deepu: now fixed just by decreasing the array limit.

[Brent] still a bit of an issue

3. in the featured videos section the most popular headlines is breaking to display <---now fixed just by decreasing the array limit in categorybox.phtml

[Brent] still a bit of an issue

4. logo needs to be changed to newer version (has baby on top and Health Guru on the bottom) the new logo is also 90px high and should align with the 728 x 90 banner.<--- is changed and aligned, looks a little funny. design: can you check this??

[Brent] we agreed to stay with old logo until lila come back to revise

5. when you rollover the logo in the upper left it should show the option of going to the [channel] homepage or the Health Guru Homepage.<--- done, in LeftColTool??

[Brent] a few changes needed
- the links when the logo is rolled over should be underlined and read as below. the links should be justified to the bottom of the logo. also we can add the health conditions a-z link

Go To:
Baby Health
Health Guru
Health Conditions A-Z

- when you click the channel logo without using the links it should take you to the channel homepage

6. in the list of most popular surveys the responses is written as "(463822 of responses)" we should remove the word 'of' and add commas for the thousands so it reads as "(111,463,822 responses)"<---now responses are in number format and no of word--change made in index.phtml just added number_format for the output and removed the of word

[Brent] done

7. The 'voice your opinion' section has a button for 'Take the complete Survey' and the 'Survey Says' section has a text link. We should use the botton for both sections and have the link below the buttons as it appears in the voice your opnion section 'From [Survey Title]'.<---Now added the button of Take the complete Survey and link of From[]--just added few lines of code in surveyresponsechart.phtml

[Brent] done

[brent]

Comments from the Senior mgmt team

10. please move the ADVERTISEMENT to vertical orientation, there are a bunch of pixels we could reclaim above the Ad/BHG logo
11. revert to old logo
12. The order of the icons on the top right should be removed
13· The rollovers on the Nav Bar have pink headers – not purple for BHG
14· When you rollover the health conditions A-Z there is no channel icon for BHG
15· When you rollover BHG and HG channels there are no icons in the bubble
16. In the surveys section the background for the pie graph is white, but the rest of the section has a grey background. this background should be grey
17. In the “Health Videos” section, within the category boxes – many of the descriptions are rolling over past the bottom of the box so that the “Watch Video” link is half cut off. better to truncate text and add a ... to be sure this doesnt happen
18. In the Footer, the copyright says 2008 and there is no space between the 2008 and the dash. We are now officially called Health Guru Media, Inc. as well.
19. In the grey box on the bottom which lists all the channels and sub categories – the spacing looks much better now than before, however I am wondering if each of the channels is spaced evenly across the entire box, or if it is just an optical illusion because the word lengths are all different…

[deepu]

1. IE issue: The roll over of the image is not intended to the right side of image it is showing up in the bottom of the image ie above the Baby Health Topics

[lei]

Replying to brent:

Comments from the Senior mgmt team

10. please move the ADVERTISEMENT to vertical orientation, there are a bunch of pixels we could reclaim above the Ad/BHG logo
11. revert to old logo
12. The order of the icons on the top right should be removed
13· The rollovers on the Nav Bar have pink headers – not purple for BHG
14· When you rollover the health conditions A-Z there is no channel icon for BHG
15· When you rollover BHG and HG channels there are no icons in the bubble
16. In the surveys section the background for the pie graph is white, but the rest of the section has a grey background. this background should be grey
17. In the “Health Videos” section, within the category boxes – many of the descriptions are rolling over past the bottom of the box so that the “Watch Video” link is half cut off. better to truncate text and add a ... to be sure this doesnt happen
18. In the Footer, the copyright says 2008 and there is no space between the 2008 and the dash. We are now officially called Health Guru Media, Inc. as well.
19. In the grey box on the bottom which lists all the channels and sub categories – the spacing looks much better now than before, however I am wondering if each of the channels is spaced evenly across the entire box, or if it is just an optical illusion because the word lengths are all different…

14· When you rollover the health conditions A-Z there is no channel icon for BHG
-Done
15· When you rollover BHG and HG channels there are no icons in the bubble
-Done

[maryann]

10. please move the ADVERTISEMENT to vertical orientation, there are a bunch of pixels we could reclaim above the Ad/BHG logo<---added, is an image, some css, and some html
11. revert to old logo<---done, reduced the size of it a little, still need the newer logo in the future
12. The order of the icons on the top right should be removed<--- has been removed
13· The rollovers on the Nav Bar have pink headers – not purple for BHG<--- this will not be the case on the live site
14· When you rollover the health conditions A-Z there is no channel icon for BHG<---added this is leftcolumn.phtml
15· When you rollover BHG and HG channels there are no icons in the bubble<---this is fixed when content is added in the back office under Publishing>Categories Manager>Edit Channels
16. In the surveys section the background for the pie graph is white, but the rest of the section has a grey background. this background should be grey<---passed to lei
17. In the “Health Videos” section, within the category boxes – many of the descriptions are rolling over past the bottom of the box so that the “Watch Video” link is half cut off. better to truncate text and add a ... to be sure this doesnt happen<---decreased the fontsize and the line height, also truncated more (from 180 to 160)
18. In the Footer, the copyright says 2008 and there is no space between the 2008 and the dash. We are now officially called Health Guru Media, Inc. as well.<---added a space and changed it to 2010
19. In the grey box on the bottom which lists all the channels and sub categories – the spacing looks much better now than before, however I am wondering if each of the channels is spaced evenly across the entire box, or if it is just an optical illusion because the word lengths are all different…<---optical illusion

[lei]

Replying to maryann:

10. please move the ADVERTISEMENT to vertical orientation, there are a bunch of pixels we could reclaim above the Ad/BHG logo<---added, is an image, some css, and some html
11. revert to old logo<---done, reduced the size of it a little, still need the newer logo in the future
12. The order of the icons on the top right should be removed<--- has been removed
13· The rollovers on the Nav Bar have pink headers – not purple for BHG<--- this will not be the case on the live site
14· When you rollover the health conditions A-Z there is no channel icon for BHG<---added this is leftcolumn.phtml
15· When you rollover BHG and HG channels there are no icons in the bubble<---this is fixed when content is added in the back office under Publishing>Categories Manager>Edit Channels
16. In the surveys section the background for the pie graph is white, but the rest of the section has a grey background. this background should be grey<---passed to lei
17. In the “Health Videos” section, within the category boxes – many of the descriptions are rolling over past the bottom of the box so that the “Watch Video” link is half cut off. better to truncate text and add a ... to be sure this doesnt happen<---decreased the fontsize and the line height, also truncated more (from 180 to 160)
18. In the Footer, the copyright says 2008 and there is no space between the 2008 and the dash. We are now officially called Health Guru Media, Inc. as well.<---added a space and changed it to 2010
19. In the grey box on the bottom which lists all the channels and sub categories – the spacing looks much better now than before, however I am wondering if each of the channels is spaced evenly across the entire box, or if it is just an optical illusion because the word lengths are all different…<---optical illusion

16. In the surveys section the background for the pie graph is white, but the rest of the section has a grey background. this background should be grey<---passed to lei

--Done, changed the background color to F9F9F9.

[brent]

Everything done except for the following.

20. the links when the logo is rolled over should be underlined and read as below. the links should be justified to the bottom of the logo. also we can add the health conditions a-z link

Go To:
Baby Health
Health Guru
Health Conditions A-Z

when you click the channel logo without using the links it should take you to the channel homepage

[deepu]

20. the links when the logo is rolled over should be underlined and read as below. the links should be justified to the bottom of the logo. also we can add the health conditions a-z link

Go To:
Baby Health
Health Guru
Health Conditions A-Z

when you click the channel logo without using the links it should take you to the channel homepage ----just added the link in leftcoltool.php and working fine now...