PHG Timeline

[khaled]

Build a navigational tool for PHG that allows access to week-by-week pages for Pregnancy. See attached design.

[maryann]

FYI- I have the bulk of this page ready to go. Yesterday I finished the top part that is a timeline that is on every page. I still have to complete the things in the right column.

[maryann]

The timeline is made! For QA--- we have a new server that you should look at it in that includes media, called devwww.healthgurumedia.com. So to check out this new stuff, go to devpreg.healthgurumedia.com/content/timeline/week/1

[lila]

-The Nav Bar, Pregnancy Week, and search bar are not lining up properly
-The Register Button and "Pregnancy Health Guru Survey" pieces of art are missing
-The gray behind the color in the feature section of the page is a the roll over function. NOT the pattern.
-In the video blog box on the right, the title is underlined. It should only be underlined when it's rolled over. All of the links should be underlined, but then not underlined when rolled over/hovered over.

[maryann]

Replying to lila:

-The Nav Bar, Pregnancy Week, and search bar are not lining up properly<--- this should be good to go

-The Register Button and "Pregnancy Health Guru Survey" pieces of art are missing<---- they are there now, and should be lined up properly

-The gray behind the color in the feature section of the page is a the roll over function. NOT the pattern.<--- it is now a rollover

-In the video blog box on the right, the title is underlined. It should only be underlined when it's rolled over. All of the links should be underlined, but then not underlined when rolled over/hovered over.<---- this is fixed

[maryann]

QA FROM BRENT (w/LILA):

Landing Page:

Featured Box:

-size of video needs to be the correct dimensions
-everything in the feature box needs to be able to expand to fit content
-needs thin gray line to delineate the columns of the feature box
-also needs a gray line beneath the description

Register+BabySize? Box:

-make the size of the image 100X100
-bring the image to the left a little so that it doesn't run into the register area

Top Timeline Element:

-change the hearts to dots
-also change colors (as seen in attached mockup)
-make the heart(now dot) at the top get larger than it is now when rolled over
-add word month (was in mock-up, disappeared)
-on the homepage, always have the top trimesters filled in
-right now there is only interaction on the actual line, should be interaction on months and trimesters also
-is there a way to make this a little less abrupt, maybe add a fade of sorts?

Vlog Box:

-there should be a place for a description of the video blog.
-change it to "blogs" instead of "logs"

Right Column Timeline:

-change the color of the week with rollover
-change the hearts to dots (mock-up will be attached)

Picture Box:

-title should have the name of the week
-recent pics should only show pics from that week only, not other pictures
-there should be no "My Pictures" section unless you are signed in
-the pop-up lightbox should expand to size of picture

[lila]

Notice the timeline colors, placement has been changed. THANKS!

[maryann]

Replying to maryann:

QA FROM BRENT (w/LILA):

Landing Page:
Featured Box:
-size of video needs to be the correct dimensions<---done
-everything in the feature box needs to be able to expand to fit content<--- everything should be expandable now
-needs thin gray line to delineate the columns of the feature box<--- done
-also needs a gray line beneath the description<---done
Register+BabySize? Box:
-make the size of the image 100X100<---done
-bring the image to the left a little so that it doesn't run into the register area<---done

Top Timeline Element:
-change the hearts to dots <---done
-also change colors (as seen in attached mockup)<---done
-make the heart(now dot) at the top get larger than it is now when rolled over<---done
-add word month (was in mock-up, disappeared)<---done
-on the homepage, always have the top trimesters filled in<---done
-right now there is only interaction on the actual line, should be interaction on months and trimesters also<---done
-is there a way to make this a little less abrupt, maybe add a fade of sorts?<---not without making it easy to break and hard to be compatible among browsers. It wouldn't work well enough to make it a good idea.

The way that the top timeline works now is that on most pages, when a user is not within the timeline box interacting with it, it shows the top 3 trimesters all lit up. When the user goes into it, the dots grow when they go over trimesters, months, or weeks. On the landing page the same thing happens when a user is interacting with it, but when the user is not interacting with it, it snaps back to the week that it is currently on.

Vlog Box:
-there should be a place for a description of the video blog.<---faisal was working on this
-change it to "blogs" instead of "logs"<---done

Right Column Timeline:
-change the color of the week with rollover<---made it bold instead, is 100% more awesome
-change the hearts to dots (mock-up will be attached)<---done

Picture Box:
-title should have the name of the week <---done
-recent pics should only show pics from that week only, not other pictures<---done
-there should be no "My Pictures" section unless you are signed in<---done
-the pop-up lightbox should expand to size of picture<---done

[lila]

PHG TIMELINE QA--6/5/09

1. WHen rolled over a week in the timeline, it does not indicate the week except in the tool tip. a while "week " needs to appear above the enlarged dot.

2. Insert "Month 10" on the timeline

3. Needs heading saying "Pregnancy Week " in a pink box.

4. Compact Pregnancy Week under Search Box VERTICALLY. Please make dots the same size as they are in the Preg Timeline up top. Font should be smaller for headline "Pregnancy Week ". Heart stays the same size. Also--font color should be #ffb4d9 when rolled over instead of red.

5. The timeline smacks up against the PHG logo in Firefox on a MAC. Please center. ALSO it smacks into PHG logo on SAFARI on a MAC.

6. Featured video should autoplay

7. Lose the "View all blog links" in the featured blog on the right.

8. Week 1 Video blogs--Please change color, font style, and spacing to match design in the mock up. (Headings are bolded--they shouldn't be, font color in this box should be #7a7a7a, 'other video logs' links have bullets, please compact space btwn the Video Blog links).

9. Register for Weekly Updates is not aligned. Text "I have no due date" is not next to the check box.

10. Spacing between the center and right column is not aligned. Please match up top of headline to top of search box, etc.

11. Most Recent Pics Box--Most recent pics & my pics should display in the same order (login as 'aaaaaa' to see). Border for whole box should be 1 px grey. We changed headline from "Week 1 Uploaded Pictures
most recent pictures" to "most recent week 1 pictures"s.

12. We need a notification if user tries to upload a pic without checking certification box.

13. In Firefox on MAC when logged in, the comment login/reg Drop Down box does not align with the Comment box above.

[maryann]

Replying to lila:

PHG TIMELINE QA--6/5/09

1. WHen rolled over a week in the timeline, it does not indicate the week except in the tool tip. a while "week " needs to appear above the enlarged dot.<---done

2. Insert "Month 10" on the timeline<---done

3. Needs heading saying "Pregnancy Week " in a pink box.<---added

4. Compact Pregnancy Week under Search Box VERTICALLY. Please make dots the same size as they are in the Preg Timeline up top. Font should be smaller for headline "Pregnancy Week ". Heart stays the same size. Also--font color should be #ffb4d9 when rolled over instead of red.<---done

5. The timeline smacks up against the PHG logo in Firefox on a MAC. Please center. ALSO it smacks into PHG logo on SAFARI on a MAC.<---faisal fixed this

6. Featured video should autoplay<---it will when it is on the live site

7. Lose the "View all blog links" in the featured blog on the right.<---removed

8. Week 1 Video blogs--Please change color, font style, and spacing to match design in the mock up. (Headings are bolded--they shouldn't be, font color in this box should be #7a7a7a, 'other video logs' links have bullets, please compact space btwn the Video Blog links).<---done and DONE

9. Register for Weekly Updates is not aligned. Text "I have no due date" is not next to the check box.<---is now

10. Spacing between the center and right column is not aligned. Please match up top of headline to top of search box, etc. <---good to go

11. Most Recent Pics Box--Most recent pics & my pics should display in the same order (login as 'aaaaaa' to see). Border for whole box should be 1 px grey. We changed headline from "Week 1 Uploaded Pictures
most recent pictures" to "most recent week 1 pictures"s. <---faisal worked on the order of pictures, should be good now. It already has a gray border, if you would like a different color then give me the hex. Headline is changed.

12. We need a notification if user tries to upload a pic without checking certification box.<--- there already was one, made it red and bold

13. In Firefox on MAC when logged in, the comment login/reg Drop Down box does not align with the Comment box above.<--- should be looking good now.

[brent]

QA from 06/08/09

1. White moth box is too far down and not connected to timeline.
2.video still does not auto-play
3. Featured vlog should grow to show full excerpt
4. in featured section the links with bullet should have a rollover effect to show grey background and lose underline.
5. on test machine the register for weekly updates section does not fit on the background.
6. week 1 video blos healdline is too close to first vlog entry below it.
7. About week description - title should be bold, show grow to fit content

[maryann]

Replying to brent:

QA from 06/08/09

1. White moth box is too far down and not connected to timeline.<---fixed
2.video still does not auto-play<--should autoplay on live site
3. Featured vlog should grow to show full excerpt<---it does now
4. in featured section the links with bullet should have a rollover effect to show grey background and lose underline.<---done
5. on test machine the register for weekly updates section does not fit on the background.<---fixed
6. week 1 video blos healdline is too close to first vlog entry below it.<---done
7. About week description - title should be bold, show grow to fit content<--- is now

[brent]

1. timeline is way off the page to the right in ie7
2. week 1 video blog healdline is too close to first vlog entry below it.<---not done
3. in IE register for weekly updates section does not fit on the background.

[maryann]

Replying to brent:

1. timeline is way off the page to the right in ie7<---fixed!!!
2. week 1 video blog healdline is too close to first vlog entry below it.<--- moved it down 7px by giving the headline a margin-bottom: 7px;
3. in IE register for weekly updates section does not fit on the background.<---fixed :-)

[brent]

1. rollover on links at botytom of feture section should only highlight 1 link at a time.
2. "About Pregnancy Week 1" should appear bolded as other headlines are.
3. links at the bottom of feature section do not have b ullet points in IE7
5. Spacing between subfeature links should be increased (ESPECIALLY IN ie).

[maryann]

Replying to brent:

1. rollover on links at botytom of feture section should only highlight 1 link at a time.<---done
2. "About Pregnancy Week 1" should appear bolded as other headlines are.<---done
3. links at the bottom of feature section do not have bullet points in IE7<---done
5. Spacing between subfeature links should be increased (ESPECIALLY IN ie).<---done

[brent]

Instructions for SEO on weekly timeline pages

<head>
<title>Pregnancy.HealthGuru?.com: Week "" of your pregnancy</title>
<meta name="description" content="use 'About Pregnancy Week 1' description from page">
<meta name="keywords" content="Use keywords from featured video">
</head>

[maryann]

Latest QA Via Brent:

- Add SEO stuff<---faisal completed this
- Vlog right column box- doesn't wrap properly in IE, is too close to headline in Firefox<---done!
- How big is my baby box- it should store the e-mail entered, even if the person does not choose to register completely<---this is being postponed, takes more time to work out and is not critical