1132954 - Reading List FTU - design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

This bug is to execute any design required for the Reading List FTU launching with FF38.

UX bug 1129536

Comment 1

[Jennifer Balaco]

Hi Mike, 

Is this just a placeholder for if any design work is needed from the Creative team or are there specific asks for this? I want to make sure we have any potential work on our radar. If there is expected work, can you also provide rough timing? Thanks!

Comment 2

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Hi Lee,

Wireframes have been posted to bug 1129536. Do you think we can have something to review by Wednesday?

Copy is being done by Troy in bug 1144766.

Thanks

Comment 3

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Quick note that we don't need a visual design for bug1129536comment9. When the user is in reader view, this is what we assume the view will look like.

Comment 4

[Lee Tom]

Hi all, here are some mockups based on Holly's first pass at the Landing Page in the UX bug (1129536)

http://cl.ly/3K2X0u3r3x00

Looks like RV creates a column width of 660px, so I optimized the top graphic to fill that width.

Comment 5

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #4)
> Hi all, here are some mockups based on Holly's first pass at the Landing
> Page in the UX bug (1129536)
> 
> http://cl.ly/3K2X0u3r3x00
> 
> Looks like RV creates a column width of 660px, so I optimized the top
> graphic to fill that width.

Looking good, Lee.

In the meeting yesterday we talked about moving that wireframe image of how Reader View renders pages to the top of the page for non-Firefox users. If they're not using Firefox already, showing them where it lives in the browser chrome doesn't make as much sense.

Comment 6

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

'+' icon for the URL bar - http://cl.ly/code/1u1R110S1R44

Comment 7

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Matej Novak [:matej] from comment #5)
> Looking good, Lee.
> 
> In the meeting yesterday we talked about moving that wireframe image of how
> Reader View renders pages to the top of the page for non-Firefox users. If
> they're not using Firefox already, showing them where it lives in the
> browser chrome doesn't make as much sense.
Per a meeting today (habber, lee, alex), let's keep the image the same for non FF. 1) it gives users a preview of what is coming next 2) avoid adding complexity to this page given the fact it will have to interact with Reader View.

Lee to provide a new comp with the '+' icon in the URL bar to match the feature.

Comment 8

[Lee Tom]

Hi all, 
Please review the new comp: http://cl.ly/1O3n0C3d022n

- added the '+' icon for Add to Reading List
- all copy updated from Troy's latest copy 
https://docs.google.com/a/mozilla.com/document/d/1YppLD-xD7FWnz8T_eHystEP0DLdrFGH68jHEfnbITcY/edit
- browser chrome remains as the hero for both User and Non-User versions
- simplified glyph colors that work well for both, styled-page and RV (CSS/SVG overlays TBD by agibson)

Comment 9

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: firefox_reading-list_FTU_04(1)(1).pdf

Comment 10

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Designs in comment 9 are approved. Lee, please upload design file.

Comment 11

[Lee Tom]

I'll post these to the DAM asap, but here's a link to the PSD and icon assets, for the time being:
http://cl.ly/13043b2w1i3u

Comment 12

[Alex Gibson [:agibson]]

Thanks, Lee!

Could you please provide an SVG of the main browser image as well? Thanks

Comment 13

[Lee Tom]

Let me know if you need anything else, Alex. Thanks!
http://cl.ly/2Z2q443E1I2m



(In reply to Alex Gibson [:agibson] from comment #12)
> Thanks, Lee!
> 
> Could you please provide an SVG of the main browser image as well? Thanks

Comment 14

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #13)
> Let me know if you need anything else, Alex. Thanks!
> http://cl.ly/2Z2q443E1I2m
> 
> 
> 
> (In reply to Alex Gibson [:agibson] from comment #12)
> > Thanks, Lee!
> > 
> > Could you please provide an SVG of the main browser image as well? Thanks

Hi Lee,

Could I please get the browser SVG file cropped and sized as it's seen in the design? Because reader mode will ignore the CSS I specify in the web page, we'll need to make sure it gets displayed consistently in both modes. As it stands, I believe the full height browser image would get displayed in reader mode as provided here. Sorry I don't have the tools to try and adjust this myself very easily.

Comment 15

[Alex Gibson [:agibson]]

Lee, some of the other SVG icons also seem to be not quite usable as inline <img>'s. Most seem to be positioned on a very large viewBox, so they all appear really tiny. I'm trying to amend them by hand but for some of the more detailed ones, it may be easier to resize/export them in Illustrator. Can you take a look at those too if you have some time? Thanks

Comment 16

[Lee Tom]

No problem, Alex. I get it. Here's a cropped version of the browser UI: http://cl.ly/0f2i1J0k251T

> 
> Hi Lee,
> 
> Could I please get the browser SVG file cropped and sized as it's seen in
> the design? Because reader mode will ignore the CSS I specify in the web
> page, we'll need to make sure it gets displayed consistently in both modes.
> As it stands, I believe the full height browser image would get displayed in
> reader mode as provided here. Sorry I don't have the tools to try and adjust
> this myself very easily.

Comment 17

[Lee Tom]

OkOK..please disregard the graphic I posted in Commment #16. 
Here is a whole new set of SVGs scaled to our webpage designs with artboards set to the same dimensions as the graphics: http://cl.ly/1K1u1Y163z0w

Ping me if you have any problems! Thanks.

(In reply to Alex Gibson [:agibson] from comment #15)
> Lee, some of the other SVG icons also seem to be not quite usable as inline
> <img>'s. Most seem to be positioned on a very large viewBox, so they all
> appear really tiny. I'm trying to amend them by hand but for some of the
> more detailed ones, it may be easier to resize/export them in Illustrator.
> Can you take a look at those too if you have some time? Thanks

Comment 18

[Alex Gibson [:agibson]]

Lee, an update on our idea for the icons:

My original plan was to use inline SVG for the icons in the lower section of the web page, which would allow us to style them a different color in the page using CSS, and have them displayed their original color in Reader View.

However, it seems Reader View freaks out when I try to inline SVG this way (I'm still trying to debug why exactly). I think we should probably proceed for now using a simple <img> for the SVG icons, which sadly means I can no longer style them different colors.

Lee, could we try your alternate idea where the icons we're blue in a white circle? I think we may need to keep the markup as simple as possible, so the white circle should probably also be part of the SVG.

Comment 19

[Lee Tom]

I'm saving these out as SVG at 80x80px (to display at 40x40px), but AI keeps resizing the artwork and artboards... Let me know if they come out OK on your end: http://cl.ly/3z2p3w3t1L10



(In reply to Alex Gibson [:agibson] from comment #18)
> Lee, an update on our idea for the icons:
> 
> My original plan was to use inline SVG for the icons in the lower section of
> the web page, which would allow us to style them a different color in the
> page using CSS, and have them displayed their original color in Reader View.
> 
> However, it seems Reader View freaks out when I try to inline SVG this way
> (I'm still trying to debug why exactly). I think we should probably proceed
> for now using a simple <img> for the SVG icons, which sadly means I can no
> longer style them different colors.
> 
> Lee, could we try your alternate idea where the icons we're blue in a white
> circle? I think we may need to keep the markup as simple as possible, so the
> white circle should probably also be part of the SVG.

Comment 20

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #19)
> I'm saving these out as SVG at 80x80px (to display at 40x40px), but AI keeps
> resizing the artwork and artboards... Let me know if they come out OK on
> your end: http://cl.ly/3z2p3w3t1L10

To get these to size correctly in Reader View, looks like we'll need them without the white circles, sorry Lee :(

Could we please try one last time, and make sure they are exactly the same height / size in their original size? I'll have to try and add the white circle styling using CSS in the web page. Hopefully I can do this cross-browser without adding extraneous markup.

Also, can you please provide @2x png's for before/after images (plug arrow) which are visible in non-Firefox browsers.

Thanks

Comment 21

[Alex Gibson [:agibson]]

That should be (plus arrow), sorry.

Comment 22

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Just a quick checkin here. I want to ensure we are incorporating the CTA button copy. It wasn't in the original design. It was something we had to add based on product discussions.

It should be 'Try it now'

Comment 23

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

It's also in the copy document.

Comment 24

[Alex Gibson [:agibson]]

(In reply to Cory Price [:ckprice] from comment #22)
> Just a quick checkin here. I want to ensure we are incorporating the CTA
> button copy. It wasn't in the original design. It was something we had to
> add based on product discussions.
> 
> It should be 'Try it now'

It's in the template ready, fwiw.

Comment 25

[Lee Tom]

Alex, sorry for the delay - Do you still need something from me, or did we cover it out-of-bug?

(In reply to Alex Gibson [:agibson] from comment #20)
> (In reply to Lee Tom from comment #19)
> > I'm saving these out as SVG at 80x80px (to display at 40x40px), but AI keeps
> > resizing the artwork and artboards... Let me know if they come out OK on
> > your end: http://cl.ly/3z2p3w3t1L10
> 
> To get these to size correctly in Reader View, looks like we'll need them
> without the white circles, sorry Lee :(
> 
> Could we please try one last time, and make sure they are exactly the same
> height / size in their original size? I'll have to try and add the white
> circle styling using CSS in the web page. Hopefully I can do this
> cross-browser without adding extraneous markup.
> 
> Also, can you please provide @2x png's for before/after images (plug arrow)
> which are visible in non-Firefox browsers.
> 
> Thanks

Comment 26

[Alex Gibson [:agibson]]

I got the icons ok after we talked on IRC, thanks Lee. This page is no longer happening for Spring campaign, so I've just set the assets aside for the time being. Thanks