522754 - Set up iframe contents with featured persona previews for mozilla.com firstrun and whatsnew pages

Status: VERIFIED FIXED

(Websites Graveyard :: getpersonas.com, defect)

Description

[Steven Garrity [:sgarrity]]

For Firefox 3.6, the whatsnew page (bug 521532) and firstrun page (bug 521531) will include live previews of personas. According to bug 522513, this will have to be done by the mozilla.com pages using iframes to pull in pages from getpersonas.com.

Hopefully we can do this with one page on the getpersonas.com site.

See these two screenshots:
https://bug521532.bugzilla.mozilla.org/attachment.cgi?id=405618
https://bug521532.bugzilla.mozilla.org/attachment.cgi?id=405619

Each has an unordered list with six previews of personas. The second also includes a larger screenshot with is also intended to be a preview of a persona (so it would have the same hover-to-preview/click-to-install behaviour as the six preview images).

So, I think we'll need two files on getpersonas.com, one with the <ul> with six previews, and one with the larger preview, plus the <ul> with six previews.

Perhaps the HTML files on getpersonas.com could include a related CSS file from mozilla.com so we can control the styles there (the number of http requests may be a performance issue).

Comment 1

[Ryan Doherty (:rdoherty)]

I can setup 2 files for mozilla.com to pull from, and they *can* pull styles from mozilla.com, but I'd prefer to style them with a few inlines styles. The persona images aren't really inheriting any styles from mozilla.com, so it would be easier and faster to just style it on getpersonas.com.

I'll need the psds and list of personas to display.

We're not linking any of the images to getpersonas.com, correct?

And I have to voice my complaints about resizing the preview images in the browser. Bad for performance :)

Comment 2

[Steven Garrity [:sgarrity]]

Ryan, can you base the file off of the current static implementation here (http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/) rather than a PSD? The large preview/screenshot is also intended to be a persona preview.

The second layout variation (without the larger screenshot/preview) is here: https://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/?variation=2

I agree that we shouldn't be browser-resizing the preview images. Since this is (I presume?) a static set of 6 personas (Tara, or is it 7, a different one for the large screenshot?), we can probably just create new preview images for this page at the appropriate size.

Tara, can you get Ryan the list of personas?

Comment 3

[Tara (musingt)]

Below is an initial batch of 6:

1) http://www.getpersonas.com/en-US/persona/19 - Foxkeh Canoe
2) http://www.getpersonas.com/en-US/persona/7610 - Japanese Tattoo
3) http://www.getpersonas.com/en-US/persona/30987 - Endless Possibilities
4) http://www.getpersonas.com/en-US/persona/32757 - Retro Notes
5) http://www.getpersonas.com/en-US/persona/37711 - Fresh Snow
6) http://www.getpersonas.com/en-US/persona/35081 - Harry Potter

I may change one or two, but for purposes of moving forward, these designs will suffice.

Please zoom in and crop at the right corner.  And place the "Japanese Tattoo" at the top left so that it's close to the mockup - which has the same design applied. Thank you.

Comment 4

[Tara (musingt)]

I also filed a related Bug 523454, to setup iframe contents for the Get Personal and Customization pages.

Comment 5

[Ryan Doherty (:rdoherty)]

This bug lists firstrun and whatsnew, but the page linked to is the firstrun page with 2 different layouts. Are we missing a page?

Comment 6

[Tara (musingt)]

We shouldn't be.  Here are the links for each:

First Run.
* Main Page: 
http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/
* Alternative for testing: 
https://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/?variation=2

What's New.
* Main Page: 
https://www-3.6.stage.mozilla.com/en-US/firefox/3.6/whatsnew/?variation=2
* Alternative for testing: 
http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/whatsnew/

Does that help?

Comment 7

[Steven Garrity [:sgarrity]]

Ryan, the first-run and whats-new pages can pull in the same iframe contents as those parts of the firstrun/whatsnew pages are identical.

Comment 8

[Ryan Doherty (:rdoherty)]

(In reply to comment #7)
> Ryan, the first-run and whats-new pages can pull in the same iframe contents as
> those parts of the firstrun/whatsnew pages are identical.

Got it, thanks!

Comment 9

[Tara (musingt)]

Hey Ryan.  Just checking in to see if you had a status update on this - and if you're still on track to have it done by EOD today, or tomorrow.

Thanks.

Comment 10

[Tara (musingt)]

Slight change of designs.

Please replace:
http://www.getpersonas.com/en-US/persona/19 - Foxkeh Canoe
http://www.getpersonas.com/en-US/persona/37711 - Fresh Snow

With:
http://www.getpersonas.com/en-US/persona/44136 - Bob Marley
http://www.getpersonas.com/en-US/persona/29736 - Elephants in Bay of Bengal

Attaching a mockup for reference as well.

Comment 11

[Tara (musingt)]

Attachment: mini-gallery mockup

Comment 12

[Ryan Doherty (:rdoherty)]

Got it working on stage, ran in to a bug.

(personas are different because it's stage)

http://sm-personas01.mozilla.org/en-US/external/mozilla
http://sm-personas01.mozilla.org/en-US/external/mozilla?variation=2

I made it easily configurable so we can change it on the fly once it's in production. 

One small thing that will need to happen on the mozilla.com side is the 'Try these on!' text and arrow will have to move a little bit up. Right now it 1/2 overlaps with the persona area, which isn't possible with an iframe.

Let me know if there's anything that needs to be changed, plan is to file a bug with IT to push tmrw.

Comment 13

[Tara (musingt)]

Thanks Ryan!  I included the 6 designs in earlier comments.  One of them is tied up in a separate bug (Bug 523681).  But wanted to get these added to the FR/WN pages to see how they look.  Not sure if that's on your plate or Steven's.

Comment 14

[Steven Garrity [:sgarrity]]

These iframes are now included in the pages in r54063. Ryan, can you change the background: #fff; on the html/body to be transparent?

Comment 15

[Ryan Doherty (:rdoherty)]

Changed background to #fff. 

As noted, because this is stage it won't have the same personas as they don't exist on stage. I will file a bug to get this pushed live today.

Comment 16

[Stephen Donner [:stephend] Not actively reading bugmail]

Looking great on:

* http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/whatsnew/
* https://www-3.6.stage.mozilla.com/en-US/firefox/3.6/whatsnew/?variation=2
* http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/
* https://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/?variation=2

Will wait until bug 524132 is fixed until I verify.

Comment 17

[Stephen Donner [:stephend] Not actively reading bugmail]

http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/whatsnew/
http://www-3.6.stage.mozilla.com/en-US/firefox/3.6/firstrun/

Tara, what happened to Elephants in Bay of Bengal (http://www.getpersonas.com/en-US/persona/29736)?  It seems it was replaced with Sunset over Water (http://www.getpersonas.com/en-US/persona/64769).

Comment 18

[Tara (musingt)]

You're right.  Sorry for not updating this.  We have replaced the Elephants with the Sunset Persona.  Good catch.

Comment 19

[Stephen Donner [:stephend] Not actively reading bugmail]

OK, thanks for the update.  Verified FIXED.

Comment 20

[Steven Garrity [:sgarrity]]

Ryan, I'm seeing a different page load up in the iframe now - can you confirm? http://www.getpersonas.com/en-US/external/mozilla/firstrun.php

Comment 21

[Ryan Doherty (:rdoherty)]

(In reply to comment #20)
> Ryan, I'm seeing a different page load up in the iframe now - can you confirm?
> http://www.getpersonas.com/en-US/external/mozilla/firstrun.php

The push last night wiped out a bunch of previous updates, I'm re-opening bug 527792 now.

Comment 22

[John Slater]

These pages are looking better again - can we close this one?

Comment 23

[Stephen Donner [:stephend] Not actively reading bugmail]

(In reply to comment #22)
> These pages are looking better again - can we close this one?

WFM.